Skip to content

Geo Primary Verification List: Hookup bulk actions to UI

Why are we doing this work

This work will be behind feature flag geo_primary_verification_view

This work is focused on taking the UI added as as part of Geo Primary Verification List: Hookup `geo_shar... (#538023 - closed) and hooking up the bulk actions that will be supported in the API Geo Primary Verification API: POST `api/v4/admi... (#537709 - closed).

These actions will function very similar to how we utilize them in the Geo Replicables views: https://gitlab.com/gitlab-org/gitlab/-/blob/master/ee/app/assets/javascripts/geo_replicable/components/geo_replicable_bulk_actions.vue

Relevant links

Implementation plan

  1. Define BULK_ACTIONS in the constants.js file
export const BULK_ACTIONS = [
  {
    id: 'geo-bulk-action-checksum',
    action: ACTION_TYPES.CHECKSUM,
    text: s__('Geo|Checksum all'),
    modal: {
      title: s__('Geo|checksum all %{type}'),
      description: s__(
        'Geo|This will checksum all %{type}. It may take some time to complete. Are you sure you want to continue?',
      ),
    },
  },
]
  1. Define commitBulkModelAction in ee/api/data_management_api.js 
const DATA_MANAGEMENT_BULK_ACTION_PATH = '/api/:version/data_management/:model/:action';

export const commitBulkModelAction = (model, action, options = {}) => {
  const url = buildApiUrl(DATA_MANAGEMENT_BULK_ACTION_PATH)
    .replace(':model', model)
    .replace(':action', action)

  return axios.post(url, {
    params: {
      ...options
    }
  });
};
  1. Expose modelTitle to the ee/admin/data_management/index.js based on its implementation in Geo Primary Verification: View helpers (#537695 - closed) and provide it to the app as itemTitle 
export const initDataManagement = () => {
  // most of file omitted

  const { modelTitle } = el.dataset;

  return new Vue({
    // omitted
    provide: {
      itemTitle: modelTitle,
    },
  });
};
  1. Expose BULK_ACTIONS to app.vue and pass it as a prop to geo-list-top-bar along with properly setting the prop show-actions 
<template>
  <geo-list-top-bar
    :show-actions="sBoolean(modelItems.length)"
    :bulk-actions="$options.BULK_ACTIONS"
  />
</template>
  1. Add event handling for bulkAction event that calls the API method commitBulkModelAction in app.vue 
<script>
export default {
  methods: {
    async onBulkAction(action) {
      try {
        this.isLoading = true

        await commitBulkModelAction(this.activeModel, action)
      } catch (error) {
        createAlert({
          message: this.$options.i18n.bulkActionError,
          captureError: true,
          error,
        });
      } finally {
        this.isLoading = false
      }
    },
  },
}
</script>

<template>
  <geo-list-top-bar
    @bulkAction="onBulkAction"
  />
</template>
Edited by 🤖 GitLab Bot 🤖