Geo Primary Verification Details: Hookup API 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 UI added as as part of Geo Primary Verification Details: Hookup `geo_s... (#538198 - closed) and hooking up the API implemented via Geo Primary Verification API: GET `api/v4/admin... (#537708 - closed)

Relevant links

• UI issue: Geo Primary Verification Details: Hookup `geo_s... (#538198 - closed)
• API Endpoint Issue: Geo Primary Verification API: GET `api/v4/admin... (#537708 - closed)

Implementation plan

1. Capture model_id in the show.html.haml file and pass it up to the JS app through #js-admin-data-management-item

- model_id = params[:model_id]

#js-admin-data-management-item { data: { "model_id" => model_id } }

2. Extract the model_id in the index.js and pass it as a prop to the app.vue

const { modelId } = el.dataset;

return new Vue({
  // omitted
  props: {
    modelId
  }
}

3. Add fetchModelDetails to ee/api/data_management_api.js (if not created, create it and import it to ee/rest_api.js)

export const fetchModelDetails = (model, id) => {
  const url = buildApiUrl(DATA_MANAGEMENT_DETAILS_PATH).replace(':model', model).replace(':id', id);

  return axios.get(url);
};

4. Call fetchModelDetails from app.vue on mount and pass the modelId and modelClass (added via Geo Primary Verification: View helpers (#537695 - closed))

<script>
export default {
  inject: ['modelClass'],
  props: {
    modelId: {
      type: String,
      required: true
    }
  },
  created() {
    this.getModelDetails();
  },
  methods: {
    async getModelDetails() {
      try {
        this.isLoading = true

        const { data } = await fetchModelDetails(this.modelClass, this.modelId);
        this.modelDetails = data
      } catch (error) {
        createAlert({
          message: this.$options.i18n.modelDetailsFetchError,
          captureError: true,
          error,
        });
      } finally {
        this.isLoading = false
      }
    },
  }
}
</script>

5. Handle loading state in the template of app.vue

<template>
  <section>
    <gl-loading-icon v-if="isLoading" size="xl" class="gl-mt-4" />
    <div v-else>
      <page-heading :heading="modelId" />

      {{ modelDetails }}
    </div>
  </section>
</template>