Skip to content

Geo Replicables: Improve Bulk Actions Experience in UI

Why are we doing this work

We are working to allow more robust functionality in the bulk actions in Geo and in particular allow customers to fire bulk actions on failing data: Geo: Provide a way to resync and reverify only ... (#263435 - closed)

Once the API is updated to support this in Geo Replicables API: Add query `arguments` to t... (#520345 - closed) we should add the ability to fire filtered actions in the UI. For a first iteration we should add the requested Failed Only Bulk Action from Geo: Provide a way to resync and reverify only ... (#263435 - closed)

This functionality should be built with the intention that we may add more flexibility to this action in the future (for instance the ability to curate a bulk action based on the users active filter or selected replicables)

UX Notes

We should also be sure to update the experience a bit here to ensure users understand what these actions are truly doing behind the scenes.

  1. Tooltip/popover on the action with link to docs
  2. Warning modal with information and link to docs
  3. UX feedback: #520355 (comment 2393749411)
  4. Be sure we capture that the actions are performed async #523380 (comment 2388285277)

Screenshots

Before After
Actions UI Before After
Popover N/A Tooltip
Resync All Modal Resync_All_-_Before Resync_All_-_After
Resync Failed Modal N/A Resync_Failed

Relevant links

Implementation plan

  1. Update buttons in geo_replicable_filter_bar.vue to GlDisclosureDropdown and include additional bulk actions (ie only failed) to the dropdown.
<div v-if="showBulkActions" class="gl-ml-auto">
  <gl-button-group class="gl-mr-2">
    <gl-button @click="triggerModal($options.actionTypes.RESYNC_ALL)>{{ $options.i18n.resyncAll }}</gl-button>

    <gl-disclosure-dropdown :items="addlResyncBulkActions" />
  </gl-button-group>

  <gl-button-group>
    <gl-button @click="triggerModal($options.actionTypes.REVERIFY_ALL)">{{ $options.i18n.reverifyAll }}</gl-button>

    <gl-disclosure-dropdown :items="addlReverifyBulkActions" />
  </gl-button-group>
</div>
  1. Add popover to each primary button in the button group of step 1 with helpful info
<gl-popover
  :target="() => $refs.resyncAllBulkAction.$el"
  placement="top"
  triggers="hover focus"
  :title="$options.i18n.resyncAllPopoverTitle"
>
  <p>
    {{ $options.i18n.resyncAllPopoverBody }}
  </p>
  <gl-link :href="$options.RESYNC_ALL_HELP_LINK" target="_blank">{{
    $options.i18n.learnMore
  }}</gl-link>
</gl-popover>

  1. Update text in modal to match screenshots and include any relevant information about the new bulk actions

  2. Add support for query parameters to the GraphQL Mutation in the Vuex Store. Query parameters added in #520345 (closed) to match the new added actions in step 1

Edited by 🤖 GitLab Bot 🤖