Merge branch '322842-convert-the-dependency-proxy-ui-from-haml-to-vue' into 'master'

Add apollo to dependency proxy app

See merge request gitlab-org/gitlab!70800

app/assets/javascripts/packages_and_registries/dependency_proxy/app.vue

 <script>
-import { GlAlert, GlFormGroup, GlFormInputGroup, GlSprintf } from '@gitlab/ui';
+import { GlAlert, GlFormGroup, GlFormInputGroup, GlSkeletonLoader, GlSprintf } from '@gitlab/ui';
 import { helpPagePath } from '~/helpers/help_page_helper';
-import { numberToHumanSize } from '~/lib/utils/number_utils';
 import { __ } from '~/locale';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import TitleArea from '~/vue_shared/components/registry/title_area.vue';
 
+import getDependencyProxyDetailsQuery from '~/packages_and_registries/dependency_proxy/graphql/queries/get_dependency_proxy_details.query.graphql';
+
 export default {
   components: {
     GlFormGroup,
@@ -14,6 +15,7 @@ export default {
     GlSprintf,
     ClipboardButton,
     TitleArea,
+    GlSkeletonLoader,
   },
   inject: ['groupPath', 'dependencyProxyAvailable'],
   i18n: {
@@ -27,11 +29,20 @@ export default {
   },
   data() {
     return {
-      dependencyProxyTotalSize: 0,
-      dependencyProxyImagePrefix: '',
-      dependencyProxyBlobCount: 0,
+      group: {},
     };
   },
+  apollo: {
+    group: {
+      query: getDependencyProxyDetailsQuery,
+      skip() {
+        return !this.dependencyProxyAvailable;
+      },
+      variables() {
+        return { fullPath: this.groupPath };
+      },
+    },
+  },
   computed: {
     infoMessages() {
       return [
@@ -41,9 +52,6 @@ export default {
         },
       ];
     },
-    humanizedTotalSize() {
-      return numberToHumanSize(this.dependencyProxyTotalSize);
-    },
   },
 };
 </script>
@@ -55,16 +63,18 @@ export default {
       {{ $options.i18n.proxyNotAvailableText }}
     </gl-alert>
 
+    <gl-skeleton-loader v-else-if="$apollo.queries.group.loading" />
+
     <div v-else data-testid="main-area">
       <gl-form-group :label="$options.i18n.proxyImagePrefix">
         <gl-form-input-group
           readonly
-          :value="dependencyProxyImagePrefix"
+          :value="group.dependencyProxyImagePrefix"
           class="gl-layout-w-limited"
         >
           <template #append>
             <clipboard-button
-              :text="dependencyProxyImagePrefix"
+              :text="group.dependencyProxyImagePrefix"
               :title="$options.i18n.copyImagePrefixText"
             />
           </template>
@@ -72,8 +82,8 @@ export default {
         <template #description>
           <span data-qa-selector="dependency_proxy_count" data-testid="proxy-count">
             <gl-sprintf :message="$options.i18n.blobCountAndSize">
-              <template #count>{{ dependencyProxyBlobCount }}</template>
-              <template #size>{{ humanizedTotalSize }}</template>
+              <template #count>{{ group.dependencyProxyBlobCount }}</template>
+              <template #size>{{ group.dependencyProxyTotalSize }}</template>
             </gl-sprintf>
           </span>
         </template>

app/assets/javascripts/packages_and_registries/dependency_proxy/graphql/index.js

+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import createDefaultClient from '~/lib/graphql';
+
+Vue.use(VueApollo);
+
+export const apolloProvider = new VueApollo({
+  defaultClient: createDefaultClient(
+    {},
+    {
+      assumeImmutableResults: true,
+    },
+  ),
+});

app/assets/javascripts/packages_and_registries/dependency_proxy/graphql/queries/get_dependency_proxy_details.query.graphql

+query getDependencyProxyDetails($fullPath: ID!) {
+  group(fullPath: $fullPath) {
+    name
+    dependencyProxyBlobCount
+    dependencyProxyTotalSize
+    dependencyProxyImagePrefix
+    dependencyProxyManifests {
+      nodes {
+        digest
+      }
+    }
+    dependencyProxyBlobs {
+      nodes {
+        fileName
+      }
+    }
+  }
+}

app/assets/javascripts/packages_and_registries/dependency_proxy/index.js

 import Vue from 'vue';
 import { parseBoolean } from '~/lib/utils/common_utils';
 import app from '~/packages_and_registries/dependency_proxy/app.vue';
-import { apolloProvider } from '~/packages_and_registries/package_registry/graphql';
+import { apolloProvider } from '~/packages_and_registries/dependency_proxy/graphql';
 import Translate from '~/vue_shared/translate';
 
 Vue.use(Translate);

spec/frontend/packages_and_registries/dependency_proxy/app_spec.js

-import { GlAlert, GlFormInputGroup, GlFormGroup, GlSprintf } from '@gitlab/ui';
+import { GlAlert, GlFormInputGroup, GlFormGroup, GlSkeletonLoader, GlSprintf } from '@gitlab/ui';
+import { createLocalVue } from '@vue/test-utils';
+import VueApollo from 'vue-apollo';
+import createMockApollo from 'helpers/mock_apollo_helper';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import waitForPromises from 'helpers/wait_for_promises';
 
 import DependencyProxyApp from '~/packages_and_registries/dependency_proxy/app.vue';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 
+import getDependencyProxyDetailsQuery from '~/packages_and_registries/dependency_proxy/graphql/queries/get_dependency_proxy_details.query.graphql';
+
+import { proxyDetailsQuery, proxyData } from './mock_data';
+
+const localVue = createLocalVue();
+
 describe('DependencyProxyApp', () => {
   let wrapper;
+  let apolloProvider;
 
   const provideDefaults = {
     groupPath: 'gitlab-org',
     dependencyProxyAvailable: true,
   };
 
-  function createComponent({ provide = provideDefaults } = {}) {
+  function createComponent({
+    provide = provideDefaults,
+    resolver = jest.fn().mockResolvedValue(proxyDetailsQuery()),
+  } = {}) {
+    localVue.use(VueApollo);
+
+    const requestHandlers = [[getDependencyProxyDetailsQuery, resolver]];
+
+    apolloProvider = createMockApollo(requestHandlers);
+
     wrapper = shallowMountExtended(DependencyProxyApp, {
+      localVue,
+      apolloProvider,
       provide,
       stubs: {
         GlFormInputGroup,
@@ -27,6 +49,7 @@ describe('DependencyProxyApp', () => {
   const findClipBoardButton = () => wrapper.findComponent(ClipboardButton);
   const findFormGroup = () => wrapper.findComponent(GlFormGroup);
   const findFormInputGroup = () => wrapper.findComponent(GlFormInputGroup);
+  const findSkeletonLoader = () => wrapper.findComponent(GlSkeletonLoader);
   const findMainArea = () => wrapper.findByTestId('main-area');
   const findProxyCountText = () => wrapper.findByTestId('proxy-count');
 
@@ -35,48 +58,89 @@ describe('DependencyProxyApp', () => {
   });
 
   describe('when the dependency proxy is not available', () => {
-    beforeEach(() => {
-      createComponent({ provide: { ...provideDefaults, dependencyProxyAvailable: false } });
-    });
+    const createComponentArguments = {
+      provide: { ...provideDefaults, dependencyProxyAvailable: false },
+    };
 
     it('renders an info alert', () => {
+      createComponent(createComponentArguments);
+
       expect(findProxyNotAvailableAlert().text()).toBe(
         DependencyProxyApp.i18n.proxyNotAvailableText,
       );
     });
 
     it('does not render the main area', () => {
+      createComponent(createComponentArguments);
+
       expect(findMainArea().exists()).toBe(false);
     });
+
+    it('does not call the graphql endpoint', async () => {
+      const resolver = jest.fn().mockResolvedValue(proxyDetailsQuery());
+      createComponent({ ...createComponentArguments, resolver });
+
+      await waitForPromises();
+
+      expect(resolver).not.toHaveBeenCalled();
+    });
   });
 
   describe('when the dependency proxy is available', () => {
-    beforeEach(() => {
-      createComponent();
-    });
+    describe('when is loading', () => {
+      it('renders the skeleton loader', () => {
+        createComponent();
 
-    it('does not render the info alert', () => {
-      expect(findProxyNotAvailableAlert().exists()).toBe(false);
-    });
+        expect(findSkeletonLoader().exists()).toBe(true);
+      });
 
-    it('renders the main area', () => {
-      expect(findMainArea().exists()).toBe(true);
-    });
+      it('does not show the main section', () => {
+        createComponent();
 
-    it('renders a form group with a label', () => {
-      expect(findFormGroup().attributes('label')).toBe(DependencyProxyApp.i18n.proxyImagePrefix);
-    });
+        expect(findMainArea().exists()).toBe(false);
+      });
 
-    it('renders a form input group', () => {
-      expect(findFormInputGroup().exists()).toBe(true);
-    });
+      it('does not render the info alert', () => {
+        createComponent();
 
-    it('form input group has a clipboard button', () => {
-      expect(findClipBoardButton().exists()).toBe(true);
+        expect(findProxyNotAvailableAlert().exists()).toBe(false);
+      });
     });
 
-    it('from group has a description with proxy count', () => {
-      expect(findProxyCountText().text()).toBe('Contains 0 blobs of images (0 bytes)');
+    describe('when the app is loaded', () => {
+      beforeEach(() => {
+        createComponent();
+        return waitForPromises();
+      });
+
+      it('does not render the info alert', () => {
+        expect(findProxyNotAvailableAlert().exists()).toBe(false);
+      });
+
+      it('renders the main area', () => {
+        expect(findMainArea().exists()).toBe(true);
+      });
+
+      it('renders a form group with a label', () => {
+        expect(findFormGroup().attributes('label')).toBe(DependencyProxyApp.i18n.proxyImagePrefix);
+      });
+
+      it('renders a form input group', () => {
+        expect(findFormInputGroup().exists()).toBe(true);
+        expect(findFormInputGroup().props('value')).toBe(proxyData().dependencyProxyImagePrefix);
+      });
+
+      it('form input group has a clipboard button', () => {
+        expect(findClipBoardButton().exists()).toBe(true);
+        expect(findClipBoardButton().props()).toMatchObject({
+          text: proxyData().dependencyProxyImagePrefix,
+          title: DependencyProxyApp.i18n.copyImagePrefixText,
+        });
+      });
+
+      it('from group has a description with proxy count', () => {
+        expect(findProxyCountText().text()).toBe('Contains 2 blobs of images (1024 Bytes)');
+      });
     });
   });
 });

spec/frontend/packages_and_registries/dependency_proxy/mock_data.js

+export const proxyData = () => ({
+  name: 'Gitlab Org',
+  dependencyProxyBlobCount: 2,
+  dependencyProxyTotalSize: '1024 Bytes',
+  dependencyProxyImagePrefix: 'gdk.test:3000/groups/gitlab-org/dependency_proxy/containers',
+  dependencyProxyManifests: { nodes: [], __typename: 'DependencyProxyManifestConnection' },
+  dependencyProxyBlobs: { nodes: [], __typename: 'DependencyProxyBlobConnection' },
+});
+export const proxyDetailsQuery = () => ({
+  data: {
+    group: {
+      ...proxyData(),
+      __typename: 'Group',
+    },
+  },
+});