Geo Primary Verification List: Hookup geo_shared list view components 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 Vue App initialized as part of Geo Primary Verification List: Init Vue App (#538017 - closed) and hooking up the shared UI organized as part of Geo Shared UI: Migrate Replicables List view to... (#538020 - closed)

This issue is only focused on getting the shared components in place. There will be little to no functionality as additional UI will need to be added after the API is hooked up.

Relevant links

• Vue App Issue: Geo Primary Verification List: Init Vue App (#538017 - closed)
• Shared UI Components Issue: Geo Shared UI: Migrate Replicables List view to... (#538020 - closed)

Implementation plan

1. Expose emptyStateSvgPath 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

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

  const { emptyStateSvgPath } = el.dataset;

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

2. Add bare bones geo_shared/list components to the ee/admin/data_management/components/app.vue to be expanded on in future MRs

Expand for rough example of component

<script>
import GeoListTopBar from 'ee/geo_shared/list/geo_list_top_bar.vue';
import GeoList from 'ee/geo_shared/list/geo_list.vue';
import { __, s__ } from '~/locale';
import {
  GEO_TROUBLESHOOTING_LINK,
} from '../constants';

export default {
  name: 'GeoReplicableApp',
  i18n: {
    noResultsFoundTitle: __('No results found'),
    noResultsFoundDescription: s__('Geo|No %{item} were found. If you believe this may be an error, please refer to the %{linkStart}Geo Troubleshooting%{linkEnd} documentation for more information.'),
    selectModel: s__('Geo|Select model'),
  },
  components: {
    GeoListTopBar,
    GeoList,
  },
  inject: {
    emptyStateSvgPath: {
      type: String,
      required: true,
    },
  },
  computed: {
    emptyState() {
      return {
        title: this.$options.i18n.noResultsFoundTitle,
        description: this.$options.i18n.noResultsFoundDescription,
        item: 'placeholder',
        svgPath: this.emptyStateSvgPath,
        helpLink: GEO_TROUBLESHOOTING_LINK,
      };
    },
  },
};
</script>

<template>
  <section>
    <geo-list-top-bar
      :listbox-header-text="$options.i18n.selectModel"
      :show-actions="false"
    />

    <geo-list :is-loading="false" :has-items="false" :empty-state="emptyState" />
  </section>
</template>