1 files changed, 75 insertions, 12 deletions

diff --git a/app/assets/javascripts/packages_and_registries/dependency_proxy/app.vue b/app/assets/javascripts/packages_and_registries/dependency_proxy/app.vue
index 73fb3656af1..71e8cf4f634 100644
--- a/app/assets/javascripts/packages_and_registries/dependency_proxy/app.vue
+++ b/app/assets/javascripts/packages_and_registries/dependency_proxy/app.vue
@@ -1,32 +1,49 @@
 <script>
-import { GlAlert, GlFormGroup, GlFormInputGroup, GlSkeletonLoader, GlSprintf } from '@gitlab/ui';
-import { __ } from '~/locale';
+import {
+  GlAlert,
+  GlFormGroup,
+  GlFormInputGroup,
+  GlSkeletonLoader,
+  GlSprintf,
+  GlEmptyState,
+} from '@gitlab/ui';
+import { s__ } from '~/locale';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import TitleArea from '~/vue_shared/components/registry/title_area.vue';
+import ManifestsList from '~/packages_and_registries/dependency_proxy/components/manifests_list.vue';
 import {
   DEPENDENCY_PROXY_SETTINGS_DESCRIPTION,
   DEPENDENCY_PROXY_DOCS_PATH,
 } from '~/packages_and_registries/settings/group/constants';
+import { GRAPHQL_PAGE_SIZE } from '~/packages_and_registries/dependency_proxy/constants';
 
 import getDependencyProxyDetailsQuery from '~/packages_and_registries/dependency_proxy/graphql/queries/get_dependency_proxy_details.query.graphql';
 
 export default {
   components: {
-    GlFormGroup,
     GlAlert,
+    GlEmptyState,
+    GlFormGroup,
     GlFormInputGroup,
+    GlSkeletonLoader,
     GlSprintf,
     ClipboardButton,
     TitleArea,
-    GlSkeletonLoader,
+    ManifestsList,
   },
-  inject: ['groupPath', 'dependencyProxyAvailable'],
+  inject: ['groupPath', 'dependencyProxyAvailable', 'noManifestsIllustration'],
   i18n: {
-    proxyNotAvailableText: __('Dependency Proxy feature is limited to public groups for now.'),
-    proxyDisabledText: __('Dependency Proxy disabled. To enable it, contact the group owner.'),
-    proxyImagePrefix: __('Dependency Proxy image prefix'),
-    copyImagePrefixText: __('Copy prefix'),
-    blobCountAndSize: __('Contains %{count} blobs of images (%{size})'),
+    proxyNotAvailableText: s__(
+      'DependencyProxy|Dependency Proxy feature is limited to public groups for now.',
+    ),
+    proxyDisabledText: s__(
+      'DependencyProxy|Dependency Proxy disabled. To enable it, contact the group owner.',
+    ),
+    proxyImagePrefix: s__('DependencyProxy|Dependency Proxy image prefix'),
+    copyImagePrefixText: s__('DependencyProxy|Copy prefix'),
+    blobCountAndSize: s__('DependencyProxy|Contains %{count} blobs of images (%{size})'),
+    pageTitle: s__('DependencyProxy|Dependency Proxy'),
+    noManifestTitle: s__('DependencyProxy|There are no images in the cache'),
   },
   data() {
     return {
@@ -40,7 +57,7 @@ export default {
         return !this.dependencyProxyAvailable;
       },
       variables() {
-        return { fullPath: this.groupPath };
+        return this.queryVariables;
       },
     },
   },
@@ -56,13 +73,45 @@ export default {
     dependencyProxyEnabled() {
       return this.group?.dependencyProxySetting?.enabled;
     },
+    queryVariables() {
+      return { fullPath: this.groupPath, first: GRAPHQL_PAGE_SIZE };
+    },
+    pageInfo() {
+      return this.group.dependencyProxyManifests.pageInfo;
+    },
+    manifests() {
+      return this.group.dependencyProxyManifests.nodes;
+    },
+  },
+  methods: {
+    fetchNextPage() {
+      this.fetchMore({
+        first: GRAPHQL_PAGE_SIZE,
+        after: this.pageInfo?.endCursor,
+      });
+    },
+    fetchPreviousPage() {
+      this.fetchMore({
+        first: null,
+        last: GRAPHQL_PAGE_SIZE,
+        before: this.pageInfo?.startCursor,
+      });
+    },
+    fetchMore(variables) {
+      this.$apollo.queries.group.fetchMore({
+        variables: { ...this.queryVariables, ...variables },
+        updateQuery(_, { fetchMoreResult }) {
+          return fetchMoreResult;
+        },
+      });
+    },
   },
 };
 </script>
 
 <template>
   <div>
-    <title-area :title="__('Dependency Proxy')" :info-messages="infoMessages" />
+    <title-area :title="$options.i18n.pageTitle" :info-messages="infoMessages" />
     <gl-alert
       v-if="!dependencyProxyAvailable"
       :dismissible="false"
@@ -97,6 +146,20 @@ export default {
           </span>
         </template>
       </gl-form-group>
+
+      <manifests-list
+        v-if="manifests && manifests.length"
+        :manifests="manifests"
+        :pagination="pageInfo"
+        @prev-page="fetchPreviousPage"
+        @next-page="fetchNextPage"
+      />
+
+      <gl-empty-state
+        v-else
+        :svg-path="noManifestsIllustration"
+        :title="$options.i18n.noManifestTitle"
+      />
     </div>
     <gl-alert v-else :dismissible="false" data-testid="proxy-disabled">
       {{ $options.i18n.proxyDisabledText }}