Geo Replicable Details: Add ability to resync from details view

Why are we doing this work

Broken off from Geo Replicable Details: Add ability to fire act... (#530840 - closed)
This currently is behind the feature flag geo_replicables_show_view

Recently we have added a Details View for individual registries in Geo. At the list view level we have the ability to commit Resync actions on individual records. We should add this functionality to the details view too.

Relevant links

• List view implementation
• Conversation that sparked this change
• Replication Info Vue Component

Screenshots

Current	Proposed

Implementation plan

1. Add a Resync button in the header of Replication Information card that emits an event 'resync' when clicked

<template #header>
  <div class="gl-flex gl-items-center">
    <h5 class="gl-my-0">{{ $options.i18n.replicationInformation }}</h5>
    <gl-button class="gl-ml-auto" @click="$emit('resync')">{{ $options.i18n.resync }}</gl-button>
  </div>
</template>

2. Add GraphQL update mutation file geo_replicable_item/graphql/replicable_type_update_mutation.graphql
   • May have already been added via #534133 (closed)

mutation replicableTypeUpdate($action: GeoRegistryAction!, $registryId: GeoBaseRegistryID!) {
  geoRegistriesUpdate(input: { action: $action, registryId: $registryId }) {
    errors
  }
}

3. Add event listener and resync mutation call in the app.vue

<script>
export default {
  // most of existing script omitted for clarity

  methods: {
    async resync() {
      try {
        await this.$apollo.mutate({
          mutation: replicableTypeUpdateMutation,
          variables: {
            action: 'RESYNC',
            registryId: convertToGraphQLId(this.replicableClass.graphqlRegistryClass, this.replicableItemId),
          }
        })

        this.$apollo.queries.replicableItem.refetch();
      } catch (error) {
        createAlert({ message: this.$options.i18n.resyncErrorMessage, error, captureError: true });
      }
    }
  }
}
</script>

<template>
  <!-- most of existing template omitted for clarity -->

  <geo-replicable-item-replication-info :replicable-item="replicableItem" class="gl-mb-4" @resync="resync" />
</template>