Geo Primary Verification List: List Item UI Components

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 started in Geo Primary Verification List: Hookup `geo_shar... (#538023 - closed) and creating a UI experience based on the data returned from Geo Primary Verification List: Hookup API to UI (#538025 - closed)

This UI will be similar to the Geo Replicables List Items

Relevant links

• UI issue: Geo Primary Verification List: Hookup `geo_shar... (#538023 - closed)
• API Issue: Geo Primary Verification List: Hookup API to UI (#538025 - closed)
• Geo Replicables List Items

Implementation plan

1. Expose modelClass and basePath 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 listboxItems

export const initDataManagement = () => {
  // most of file omitted

  const { modelClass, basePath } = el.dataset;

  return new Vue({
    // omitted
    provide: {
      modelClass,
      basePath
    },
  });
};

2. Create a data_management_list_item.vue component that wraps the geo_list_item.vue component.

Expand for component proposal

<script>
import { GlSprintf } from '@gitlab/ui';
import GeoListItem from 'ee/geo_shared/list/geo_list_item.vue';
import { VERIFICATION_STATUS_STATES } from 'ee/geo_shared/constants';
import { __, s__, sprintf } from '~/locale';

export default {
  i18n: {
    created: __('Created'),
    unknown: __('Unknown'),
    lastChecksum: s__('Geo|Last checksum'),
    size: s__('Geo|Size: %{size}'),
    checksumStatus: s__('Geo|Checksum: %{status}'),
  },
  components: {
    GeoListItem,
    GlSprintf
  },
  inject: ['basePath', 'modelClass'],
  props: {
    item: {
      type: Object,
      required: true
    }
  },
  computed: {
    statusArray() {
      const checksumStatus =
        VERIFICATION_STATUS_STATES[this.item.checksumStatus?.toUpperCase()] ||
        VERIFICATION_STATUS_STATES.UNKNOWN;

      return [
        {
          tooltip: sprintf(this.$options.i18n.checksumStatus, {
            status: checksumStatus.title,
          }),
          icon: checksumStatus.icon,
          variant: checksumStatus.variant,
        },
      ];
    },
    timeAgoArray() {
      return [
        {
          label: this.$options.i18n.created,
          dateString: this.item.createdAt,
          defaultText: this.$options.i18n.unknown,
        },
        {
          label: this.$options.i18n.lastChecksum,
          dateString: this.lastVerified,
          defaultText: this.$options.i18n.unknown,
        },
      ];
    },
    detailsPath() {
      return `${this.basePath}/${this.item.id}`;
    },
    name() {
      return `${this.modelClass}/${this.item.id}`;
    },
  },
};
</script>

<template>
  <geo-list-item
    :name="name"
    :details-path="detailsPath"
    :status-array="statusArray"
    :time-ago-array="timeAgoArray"
  >
    <template #extra-details>
      <gl-sprintf :message="$options.i18n.size">
        <template #size>
          {{ item.size }}
        </template>
      </gl-sprintf>
    </template>
  </geo-list-item>
</template>

3. Expose the items prop to the data_management_view.vue and hook up the new data-management-list-item component in the template.

<script>
export default {
  components: {
    DataManagementListItem
  },
  props: {
    items: {
      type: Array,
      required: false,
      default: () => []
    },
  },
}
</script>

<template>
  <data-management-list-item
    v-for="item in items"
    :key="item.id"
    :item="item"
  />
</template>