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

Enable new dependency proxy vue app

See merge request gitlab-org/gitlab!70916

app/assets/javascripts/dependency_proxy.js

-import setupToggleButtons from '~/toggle_buttons';
-
-export default () => {
-  setupToggleButtons(document.querySelector('.js-dependency-proxy-toggle-area'));
-};

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

@@ -22,8 +22,9 @@ export default {
   },
   inject: ['groupPath', 'dependencyProxyAvailable'],
   i18n: {
-    proxyNotAvailableText: __('Dependency proxy feature is limited to public groups for now.'),
-    proxyImagePrefix: __('Dependency proxy image prefix'),
+    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})'),
   },
@@ -52,6 +53,9 @@ export default {
         },
       ];
     },
+    dependencyProxyEnabled() {
+      return this.group?.dependencyProxySetting?.enabled;
+    },
   },
 };
 </script>
@@ -59,18 +63,23 @@ export default {
 <template>
   <div>
     <title-area :title="__('Dependency Proxy')" :info-messages="infoMessages" />
-    <gl-alert v-if="!dependencyProxyAvailable" :dismissible="false">
+    <gl-alert
+      v-if="!dependencyProxyAvailable"
+      :dismissible="false"
+      data-testid="proxy-not-available"
+    >
       {{ $options.i18n.proxyNotAvailableText }}
     </gl-alert>
 
     <gl-skeleton-loader v-else-if="$apollo.queries.group.loading" />
 
-    <div v-else data-testid="main-area">
+    <div v-else-if="dependencyProxyEnabled" data-testid="main-area">
       <gl-form-group :label="$options.i18n.proxyImagePrefix">
         <gl-form-input-group
           readonly
           :value="group.dependencyProxyImagePrefix"
           class="gl-layout-w-limited"
+          data-testid="proxy-url"
         >
           <template #append>
             <clipboard-button
@@ -89,5 +98,8 @@ export default {
         </template>
       </gl-form-group>
     </div>
+    <gl-alert v-else :dismissible="false" data-testid="proxy-disabled">
+      {{ $options.i18n.proxyDisabledText }}
+    </gl-alert>
   </div>
 </template>

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
-      }
+    dependencyProxySetting {
+      enabled
     }
   }
 }

app/assets/javascripts/pages/groups/dependency_proxies/index.js

-import $ from 'jquery';
-import initDependencyProxy from '~/dependency_proxy';
+import { initDependencyProxyApp } from '~/packages_and_registries/dependency_proxy/';
 
-initDependencyProxy();
-
-const form = document.querySelector('form.edit_dependency_proxy_group_setting');
-const toggleInput = $('input.js-project-feature-toggle-input');
-
-if (form && toggleInput) {
-  toggleInput.on('trigger-change', () => {
-    form.submit();
-  });
-}
+initDependencyProxyApp();

app/views/groups/dependency_proxies/_url.html.haml

-- proxy_url = @group.dependency_proxy_image_prefix
-
-%h5.prepend-top-20= _('Dependency proxy image prefix')
-
-.row
-  .col-lg-8.col-md-12.input-group
-    = text_field_tag :url, "#{proxy_url}", class: 'js-dependency-proxy-url form-control', readonly: true
-    = clipboard_button(text: "#{proxy_url}", title: _("Copy %{proxy_url}") % { proxy_url: proxy_url })
-
-.row
-  .col-12.help-block.gl-mt-3{ data: { qa_selector: 'dependency_proxy_count' } }
-    = _('Contains %{count} blobs of images (%{size})') % { count: @blobs_count, size: number_to_human_size(@blobs_total_size) }

app/views/groups/dependency_proxies/show.html.haml

 - page_title _("Dependency Proxy")
+- dependency_proxy_available = Feature.enabled?(:dependency_proxy_for_private_groups, default_enabled: true) || @group.public?
 
-.settings-header
-  %h4= _('Dependency proxy')
-
-  %p
-    - link_start = '<a href="%{url}">'.html_safe % { url: help_page_path('user/packages/dependency_proxy/index') }
-    = _('Create a local proxy for storing frequently used upstream images. %{link_start}Learn more%{link_end} about dependency proxies.').html_safe % { link_start: link_start, link_end: '</a>'.html_safe }
-
-- if Feature.enabled?(:dependency_proxy_for_private_groups, default_enabled: true) || @group.public?
-  - if @dependency_proxy.enabled
-    = render 'groups/dependency_proxies/url'
-
-- else
-  .gl-alert.gl-alert-info
-    .gl-alert-container
-      = sprite_icon('information-o', size: 16, css_class: 'gl-icon gl-alert-icon gl-alert-icon-no-title')
-      .gl-alert-content
-        = _('Dependency proxy feature is limited to public groups for now.')
+#js-dependency-proxy{ data: { group_path: @group.full_path,
+  dependency_proxy_available: dependency_proxy_available.to_s } }

locale/gitlab.pot

@@ -9272,9 +9272,6 @@ msgstr ""
 msgid "Copy %{protocol} clone URL"
 msgstr ""
 
-msgid "Copy %{proxy_url}"
-msgstr ""
-
 msgid "Copy %{type}"
 msgstr ""
 
@@ -9572,9 +9569,6 @@ msgstr ""
 msgid "Create a Mattermost team for this group"
 msgstr ""
 
-msgid "Create a local proxy for storing frequently used upstream images. %{link_start}Learn more%{link_end} about dependency proxies."
-msgstr ""
-
 msgid "Create a merge request"
 msgstr ""
 
@@ -11204,16 +11198,16 @@ msgstr ""
 msgid "Dependency Proxy"
 msgstr ""
 
-msgid "Dependency Scanning"
+msgid "Dependency Proxy disabled. To enable it, contact the group owner."
 msgstr ""
 
-msgid "Dependency proxy"
+msgid "Dependency Proxy feature is limited to public groups for now."
 msgstr ""
 
-msgid "Dependency proxy feature is limited to public groups for now."
+msgid "Dependency Proxy image prefix"
 msgstr ""
 
-msgid "Dependency proxy image prefix"
+msgid "Dependency Scanning"
 msgstr ""
 
 msgid "DependencyProxy|Create a local proxy for storing frequently used upstream images. %{docLinkStart}Learn more%{docLinkEnd} about dependency proxies."

qa/qa/page/group/dependency_proxy.rb

@@ -4,7 +4,7 @@ module QA
   module Page
     module Group
       class DependencyProxy < QA::Page::Base
-        view 'app/views/groups/dependency_proxies/_url.html.haml' do
+        view 'app/assets/javascripts/packages_and_registries/dependency_proxy/app.vue' do
           element :dependency_proxy_count
         end
 

spec/features/groups/dependency_proxy_spec.rb

@@ -23,7 +23,7 @@ RSpec.describe 'Group Dependency Proxy' do
 
         visit path
 
-        expect(page).not_to have_css('.js-dependency-proxy-url')
+        expect(page).not_to have_css('[data-testid="proxy-url"]')
       end
     end
 
@@ -43,13 +43,13 @@ RSpec.describe 'Group Dependency Proxy' do
         it 'toggles defaults to enabled' do
           visit path
 
-          expect(page).to have_css('.js-dependency-proxy-url')
+          expect(page).to have_css('[data-testid="proxy-url"]')
         end
 
         it 'shows the proxy URL' do
           visit path
 
-          expect(find('.js-dependency-proxy-url').value).to have_content('/dependency_proxy/containers')
+          expect(find('input[data-testid="proxy-url"]').value).to have_content('/dependency_proxy/containers')
         end
 
         it 'hides the proxy URL when feature is disabled' do
@@ -62,7 +62,7 @@ RSpec.describe 'Group Dependency Proxy' do
 
           visit path
 
-          expect(page).not_to have_css('.js-dependency-proxy-url')
+          expect(page).not_to have_css('input[data-testid="proxy-url"]')
         end
       end
 
@@ -73,7 +73,7 @@ RSpec.describe 'Group Dependency Proxy' do
         end
 
         it 'does not show the feature toggle but shows the proxy URL' do
-          expect(find('.js-dependency-proxy-url').value).to have_content('/dependency_proxy/containers')
+          expect(find('input[data-testid="proxy-url"]').value).to have_content('/dependency_proxy/containers')
         end
       end
     end
@@ -83,7 +83,7 @@ RSpec.describe 'Group Dependency Proxy' do
         sign_in(owner)
       end
 
-      context 'feature flag is disabled' do
+      context 'feature flag is disabled', :js do
         before do
           stub_feature_flags(dependency_proxy_for_private_groups: false)
         end
@@ -94,7 +94,7 @@ RSpec.describe 'Group Dependency Proxy' do
           it 'informs user that feature is only available for public groups' do
             visit path
 
-            expect(page).to have_content('Dependency proxy feature is limited to public groups for now.')
+            expect(page).to have_content('Dependency Proxy feature is limited to public groups for now.')
           end
         end
       end

spec/frontend/packages_and_registries/dependency_proxy/app_spec.js

-import { GlAlert, GlFormInputGroup, GlFormGroup, GlSkeletonLoader, GlSprintf } from '@gitlab/ui';
+import { 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';
@@ -45,7 +45,8 @@ describe('DependencyProxyApp', () => {
     });
   }
 
-  const findProxyNotAvailableAlert = () => wrapper.findComponent(GlAlert);
+  const findProxyNotAvailableAlert = () => wrapper.findByTestId('proxy-not-available');
+  const findProxyDisabledAlert = () => wrapper.findByTestId('proxy-disabled');
   const findClipBoardButton = () => wrapper.findComponent(ClipboardButton);
   const findFormGroup = () => wrapper.findComponent(GlFormGroup);
   const findFormInputGroup = () => wrapper.findComponent(GlFormInputGroup);
@@ -108,38 +109,64 @@ describe('DependencyProxyApp', () => {
     });
 
     describe('when the app is loaded', () => {
-      beforeEach(() => {
-        createComponent();
-        return waitForPromises();
-      });
+      describe('when the dependency proxy is enabled', () => {
+        beforeEach(() => {
+          createComponent();
+          return waitForPromises();
+        });
 
-      it('does not render the info alert', () => {
-        expect(findProxyNotAvailableAlert().exists()).toBe(false);
-      });
+        it('does not render the info alert', () => {
+          expect(findProxyNotAvailableAlert().exists()).toBe(false);
+        });
 
-      it('renders the main area', () => {
-        expect(findMainArea().exists()).toBe(true);
-      });
+        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 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('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('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)');
         });
       });
+      describe('when the dependency proxy is disabled', () => {
+        beforeEach(() => {
+          createComponent({
+            resolver: jest
+              .fn()
+              .mockResolvedValue(proxyDetailsQuery({ extendSettings: { enabled: false } })),
+          });
+          return waitForPromises();
+        });
 
-      it('from group has a description with proxy count', () => {
-        expect(findProxyCountText().text()).toBe('Contains 2 blobs of images (1024 Bytes)');
+        it('does not show the main area', () => {
+          expect(findMainArea().exists()).toBe(false);
+        });
+
+        it('does not show the loader', () => {
+          expect(findSkeletonLoader().exists()).toBe(false);
+        });
+
+        it('shows a proxy disabled alert', () => {
+          expect(findProxyDisabledAlert().text()).toBe(DependencyProxyApp.i18n.proxyDisabledText);
+        });
       });
     });
   });

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' },
+  dependencyProxyImagePrefix: 'gdk.test:3000/private-group/dependency_proxy/containers',
+  dependencyProxySetting: { enabled: true, __typename: 'DependencyProxySetting' },
 });
-export const proxyDetailsQuery = () => ({
+
+export const proxySettings = (extend = {}) => ({ enabled: true, ...extend });
+
+export const proxyDetailsQuery = ({ extendSettings = {} } = {}) => ({
   data: {
     group: {
       ...proxyData(),
       __typename: 'Group',
+      dependencyProxySetting: {
+        ...proxySettings(extendSettings),
+        __typename: 'DependencyProxySetting',
+      },
     },
   },
 });