1 files changed, 83 insertions, 13 deletions

diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_versions_list.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_versions_list.vue
index 3d5ac528920..7ea19df7a6c 100644
--- a/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_versions_list.vue
+++ b/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_versions_list.vue
@@ -1,4 +1,6 @@
 <script>
+import { GlAlert } from '@gitlab/ui';
+import * as Sentry from '@sentry/browser';
 import { n__ } from '~/locale';
 import VersionRow from '~/packages_and_registries/package_registry/components/details/version_row.vue';
 import PackagesListLoader from '~/packages_and_registries/shared/components/packages_list_loader.vue';
@@ -10,16 +12,20 @@ import {
   CANCEL_DELETE_PACKAGE_VERSIONS_TRACKING_ACTION,
   DELETE_PACKAGE_VERSION_TRACKING_ACTION,
   DELETE_PACKAGE_VERSIONS_TRACKING_ACTION,
+  FETCH_PACKAGE_VERSIONS_ERROR_MESSAGE,
+  GRAPHQL_PAGE_SIZE,
   REQUEST_DELETE_PACKAGE_VERSION_TRACKING_ACTION,
   REQUEST_DELETE_PACKAGE_VERSIONS_TRACKING_ACTION,
 } from '~/packages_and_registries/package_registry/constants';
 import Tracking from '~/tracking';
 import { packageTypeToTrackCategory } from '~/packages_and_registries/package_registry/utils';
+import getPackageVersionsQuery from '~/packages_and_registries/package_registry/graphql/queries/get_package_versions.query.graphql';
 
 export default {
   components: {
     DeleteModal,
     DeletePackageModal,
+    GlAlert,
     VersionRow,
     PackagesListLoader,
     RegistryList,
@@ -31,33 +37,65 @@ export default {
       required: false,
       default: false,
     },
-    versions: {
-      type: Array,
-      required: true,
-      default: () => [],
-    },
-    pageInfo: {
-      type: Object,
-      required: true,
+    count: {
+      type: Number,
+      required: false,
+      default: 0,
     },
-    isLoading: {
+    isMutationLoading: {
       type: Boolean,
       required: false,
       default: false,
     },
+    packageId: {
+      type: String,
+      required: true,
+    },
   },
   data() {
     return {
       itemToBeDeleted: null,
       itemsToBeDeleted: [],
+      packageVersions: {},
+      fetchPackageVersionsError: false,
     };
   },
+  apollo: {
+    packageVersions: {
+      query: getPackageVersionsQuery,
+      variables() {
+        return this.queryVariables;
+      },
+      skip() {
+        return this.isListEmpty;
+      },
+      update(data) {
+        return data.package?.versions ?? {};
+      },
+      error(error) {
+        this.fetchPackageVersionsError = true;
+        Sentry.captureException(error);
+      },
+    },
+  },
   computed: {
+    isListEmpty() {
+      return this.count === 0;
+    },
+    isLoading() {
+      return this.$apollo.queries.packageVersions.loading || this.isMutationLoading;
+    },
+    pageInfo() {
+      return this.packageVersions?.pageInfo ?? {};
+    },
     listTitle() {
       return n__('%d version', '%d versions', this.versions.length);
     },
-    isListEmpty() {
-      return this.versions.length === 0;
+    queryVariables() {
+      return {
+        id: this.packageId,
+        first: GRAPHQL_PAGE_SIZE,
+      };
     },
     tracking() {
       const category = this.itemToBeDeleted
@@ -67,6 +105,9 @@ export default {
         category,
       };
     },
+    versions() {
+      return this.packageVersions?.nodes ?? [];
+    },
   },
   methods: {
     deleteItemConfirmation() {
@@ -101,6 +142,32 @@ export default {
       this.track(REQUEST_DELETE_PACKAGE_VERSIONS_TRACKING_ACTION);
       this.$refs.deletePackagesModal.show();
     },
+    fetchPreviousVersionsPage() {
+      const variables = {
+        ...this.queryVariables,
+        first: null,
+        last: GRAPHQL_PAGE_SIZE,
+        before: this.pageInfo?.startCursor,
+      };
+      this.$apollo.queries.packageVersions.fetchMore({
+        variables,
+      });
+    },
+    fetchNextVersionsPage() {
+      const variables = {
+        ...this.queryVariables,
+        first: GRAPHQL_PAGE_SIZE,
+        last: null,
+        after: this.pageInfo?.endCursor,
+      };
+
+      this.$apollo.queries.packageVersions.fetchMore({
+        variables,
+      });
+    },
+  },
+  i18n: {
+    errorMessage: FETCH_PACKAGE_VERSIONS_ERROR_MESSAGE,
   },
 };
 </script>
@@ -109,6 +176,9 @@ export default {
     <div v-if="isLoading">
       <packages-list-loader />
     </div>
+    <gl-alert v-else-if="fetchPackageVersionsError" variant="danger" :dismissible="false">{{
+      $options.i18n.errorMessage
+    }}</gl-alert>
     <slot v-else-if="isListEmpty" name="empty-state"></slot>
     <div v-else>
       <registry-list
@@ -118,8 +188,8 @@ export default {
         :pagination="pageInfo"
         :title="listTitle"
         @delete="setItemsToBeDeleted"
-        @prev-page="$emit('prev-page')"
-        @next-page="$emit('next-page')"
+        @prev-page="fetchPreviousVersionsPage"
+        @next-page="fetchNextVersionsPage"
       >
         <template #default="{ first, item, isSelected, selectItem }">
           <version-row