Geo: Surface failure messages to items in the Replicable List View

Why are we doing this work

The Replication List view is currently undergoing a change and you may notice slightly different experiences in regards to if you have the feature flag geo_replicables_filtered_list_view and/or geo_replicables_show_view enabled

Currently, in the Geo UI we simply tell the user that there is a failed sync but don't give any more information outside of that. With recent efforts, users can "click into" a record to get more information. However, we should expose the error messages at the list level so users can quickly look for consistencies or outliers.

Relevant links

• List view item component (geo_replicable_item.vue)

Screenshots

Proposal Demo

Screen_Recording_2025-04-07_at_12.54.36_PM

Sync Error	Verification Error

Implementation plan

1. Expose verificationFailure if verification is enabled to replicable_type_query_builder.js

nodes {
  // omitted for clarity
  verificationFailure @include (if: ${verificationEnabled})
}

2. Create new component geo_replicable_item_errors.vue that has a show/hide feature for the errors

<template>
  <section>
    <div v-if="open" class="gl-py-2">
      <p v-if="lastSyncFailure" class="gl-mb-0">
        <gl-sprintf :message="$options.i18n.replicationFailure">
          <template #message>
            <span class="gl-font-bold gl-text-red-700">{{
              lastSyncFailure
            }}</span>
          </template>
        </gl-sprintf>
      </p>
      <p v-if="verificationFailure" class="gl-mb-0">
        <gl-sprintf :message="$options.i18n.verificationFailure">
          <template #message>
            <span class="gl-font-bold gl-text-red-700">{{
              verificationFailure
            }}</span>
          </template>
        </gl-sprintf>
      </p>
    </div>
    <gl-button variant="link" @click="toggleErrorText">{{ toggleButtonText }}</gl-button>
  </section>
</template>

3. Add new errors component to the bottom of geo_replicable_item.vue and only render if either error exists.

<geo-replicable-item-errors v-if="hasErrors" :last-sync-failure="lastSyncFailure" :verification-failure="verificationFailure" class="gl-pl-2" />

4. Add lastSyncFailure and verificationFailure to the geo-replicable-item in geo_replicable.vue

<geo-replicable-item
  v-for="item in replicableItems"
  :key="item.id"

  :last-sync-failure="item.lastSyncFailure"
  :verification-failure="item.verificationFailure"
/>