Geo Primary Verification List: Hookup pagination 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 started in Geo Primary Verification List: Hookup `geo_shar... (#538023 - closed) and adding pagination to it.

This implementation will be similar to the Geo Replicables approach in Geo Replicables List: Add ability to store pagi... (#535692 - closed)

Relevant links

• UI issue: Geo Primary Verification List: Hookup `geo_shar... (#538023 - closed)
• Geo Replicables approach: Geo Replicables List: Add ability to store pagi... (#535692 - closed)

Implementation plan

1. Add GlPagination to the data_management_view.vue component (create component if needed). This component should handle the paginationData prop and emit an event when the pagination changes.

<script>
import { GlPagination } from '@gitlab/ui';
import { DEFAULT_PER_PAGE } from '~/api';

export default {
  components: {
    GlPagination,
  },
  props: {
    paginationData: {
      type: Object,
      required: true
    }
  },
  computed: {
    showPagination() {
      return this.paginationData.total > DEFAULT_PER_PAGE
    }
  },
  methods: {
    pageChanged(page) {
      this.$emit('paginate', page)
    }
  },
  DEFAULT_PER_PAGE
};
</script>

<template>
  <section>
    <gl-pagination
      v-if="showPagination"
      :value="paginationData.page"
      :per-page="$options.DEFAULT_PER_PAGE"
      :total-items="paginationData.total"
      align="center"
      class="gl-mt-6"
      @input="pageChanged"
    />
  </section>
</template>

2. Add way to process pagination query from the URL onCreate in app.vue. This should happen before the API is called.

<script>
export default {
  created() {
    this.getFiltersFromQuery();
    this.getPaginationFromQuery(); // added
    this.getModelList();
  },
  methods: {
    getPaginationFromQuery() {
      const { page } = queryToObject(window.location.search || '');

      this.paginationData = {
        page: Number(page) || 1,
      }
    },
  },
}
</script>

3. Add logic to send and receive pagination data from the API in app.vue

async getModelList() {
  try {
    this.isLoading = true

    const { query } = processFilters(this.activeFilters)
---    const { data } = fetchModelList(this.activeModel, query);
+++    const { data, headers } = fetchModelList(this.activeModel, { page: this.paginationData.page, ... query });

    this.modelItems = data
+++    this.paginationData = parseIntPagination(normalizeHeaders(headers));
  } catch (error) {
    createAlert({
      message: this.$options.i18n.modelListFetchError,
      captureError: true,
      error,
    });
  } finally {
    this.isLoading = false
  }
},

4. Add logic to handle when the page is changed in the app.vue

<script>
export default {
  methods: {
    onPaginate(page) {
      visitUrl(setUrlParams({ page }))
    }
  }
}
</script>

<template>
  <geo-list :is-loading="isLoading" :has-items="Boolean(modelItems.length)" :empty-state="emptyState">
    <data-management-view :items="modelItems" :pagination-data="paginationData" @pagination="onPaginate" />
  </geo-list>
</template>