Update dependency proxy copy and help text

https://gitlab.com/gitlab-org/gitlab/-/merge_requests/74806

Changelog: fixed

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

 <script>
 import {
   GlAlert,
+  GlEmptyState,
   GlFormGroup,
   GlFormInputGroup,
+  GlLink,
   GlSkeletonLoader,
   GlSprintf,
-  GlEmptyState,
 } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
@@ -15,7 +16,10 @@ 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 {
+  GRAPHQL_PAGE_SIZE,
+  ENABLE_DEPENDENCY_PROXY_DOCS_PATH,
+} from '~/packages_and_registries/dependency_proxy/constants';
 
 import getDependencyProxyDetailsQuery from '~/packages_and_registries/dependency_proxy/graphql/queries/get_dependency_proxy_details.query.graphql';
 
@@ -25,6 +29,7 @@ export default {
     GlEmptyState,
     GlFormGroup,
     GlFormInputGroup,
+    GlLink,
     GlSkeletonLoader,
     GlSprintf,
     ClipboardButton,
@@ -37,7 +42,7 @@ export default {
       'DependencyProxy|Dependency Proxy feature is limited to public groups for now.',
     ),
     proxyDisabledText: s__(
-      'DependencyProxy|Dependency Proxy disabled. To enable it, contact the group owner.',
+      'DependencyProxy|The Dependency Proxy is disabled. %{docLinkStart}Learn how to enable it%{docLinkEnd}.',
     ),
     proxyImagePrefix: s__('DependencyProxy|Dependency Proxy image prefix'),
     copyImagePrefixText: s__('DependencyProxy|Copy prefix'),
@@ -45,6 +50,10 @@ export default {
     pageTitle: s__('DependencyProxy|Dependency Proxy'),
     noManifestTitle: s__('DependencyProxy|There are no images in the cache'),
   },
+  links: {
+    DEPENDENCY_PROXY_DOCS_PATH,
+    ENABLE_DEPENDENCY_PROXY_DOCS_PATH,
+  },
   data() {
     return {
       group: {},
@@ -162,7 +171,11 @@ export default {
       />
     </div>
     <gl-alert v-else :dismissible="false" data-testid="proxy-disabled">
-      {{ $options.i18n.proxyDisabledText }}
+      <gl-sprintf :message="$options.i18n.proxyDisabledText">
+        <template #docLink="{ content }">
+          <gl-link :href="$options.links.ENABLE_DEPENDENCY_PROXY_DOCS_PATH">{{ content }}</gl-link>
+        </template>
+      </gl-sprintf>
     </gl-alert>
   </div>
 </template>

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

+import { helpPagePath } from '~/helpers/help_page_helper';
+
 export const GRAPHQL_PAGE_SIZE = 20;
+export const ENABLE_DEPENDENCY_PROXY_DOCS_PATH = helpPagePath(
+  'user/packages/dependency_proxy/index',
+  { anchor: 'enable-or-disable-the-dependency-proxy-for-a-group' },
+);

app/assets/javascripts/packages_and_registries/settings/group/bundle.js

@@ -18,9 +18,10 @@ export default () => {
     el,
     apolloProvider,
     provide: {
+      groupPath: el.dataset.groupPath,
+      groupDependencyProxyPath: el.dataset.groupDependencyProxyPath,
       defaultExpanded: parseBoolean(el.dataset.defaultExpanded),
       dependencyProxyAvailable: parseBoolean(el.dataset.dependencyProxyAvailable),
-      groupPath: el.dataset.groupPath,
     },
     render(createElement) {
       return createElement(SettingsApp);

app/assets/javascripts/packages_and_registries/settings/group/components/dependency_proxy_settings.vue

@@ -23,12 +23,15 @@ export default {
   i18n: {
     DEPENDENCY_PROXY_HEADER,
     DEPENDENCY_PROXY_SETTINGS_DESCRIPTION,
-    label: s__('DependencyProxy|Enable Proxy'),
+    label: s__('DependencyProxy|Enable Dependency Proxy'),
+    enabledProxyHelpText: s__(
+      'DependencyProxy|To see the image prefix and what is in the cache, visit the %{linkStart}Dependency Proxy%{linkEnd}',
+    ),
   },
   links: {
     DEPENDENCY_PROXY_DOCS_PATH,
   },
-  inject: ['defaultExpanded', 'groupPath'],
+  inject: ['defaultExpanded', 'groupPath', 'groupDependencyProxyPath'],
   props: {
     dependencyProxySettings: {
       type: Object,
@@ -49,6 +52,9 @@ export default {
         this.updateSettings({ enabled });
       },
     },
+    helpText() {
+      return this.enabled ? this.$options.i18n.enabledProxyHelpText : '';
+    },
   },
   methods: {
     async updateSettings(payload) {
@@ -91,7 +97,11 @@ export default {
       <span data-testid="description">
         <gl-sprintf :message="$options.i18n.DEPENDENCY_PROXY_SETTINGS_DESCRIPTION">
           <template #docLink="{ content }">
-            <gl-link :href="$options.links.DEPENDENCY_PROXY_DOCS_PATH">{{ content }}</gl-link>
+            <gl-link
+              data-testid="description-link"
+              :href="$options.links.DEPENDENCY_PROXY_DOCS_PATH"
+              >{{ content }}</gl-link
+            >
           </template>
         </gl-sprintf>
       </span>
@@ -102,9 +112,22 @@ export default {
           v-model="enabled"
           :disabled="isLoading"
           :label="$options.i18n.label"
+          :help="helpText"
           data-qa-selector="dependency_proxy_setting_toggle"
           data-testid="dependency-proxy-setting-toggle"
-        />
+        >
+          <template #help>
+            <span class="gl-overflow-break-word gl-max-w-100vw gl-display-inline-block">
+              <gl-sprintf :message="$options.i18n.enabledProxyHelpText">
+                <template #link="{ content }">
+                  <gl-link data-testid="toggle-help-link" :href="groupDependencyProxyPath">{{
+                    content
+                  }}</gl-link>
+                </template>
+              </gl-sprintf>
+            </span>
+          </template>
+        </gl-toggle>
       </div>
     </template>
   </settings-block>

app/views/groups/settings/packages_and_registries/show.html.haml

@@ -5,4 +5,5 @@
 
 %section#js-packages-and-registries-settings{ data: { default_expanded: expanded_by_default?.to_s,
   group_path: @group.full_path,
-  dependency_proxy_available: dependency_proxy_available.to_s } }
+  dependency_proxy_available: dependency_proxy_available.to_s,
+  group_dependency_proxy_path: group_dependency_proxy_path(@group) } }

locale/gitlab.pot

@@ -11418,24 +11418,27 @@ msgstr ""
 msgid "DependencyProxy|Dependency Proxy"
 msgstr ""
 
-msgid "DependencyProxy|Dependency Proxy disabled. To enable it, contact the group owner."
-msgstr ""
-
 msgid "DependencyProxy|Dependency Proxy feature is limited to public groups for now."
 msgstr ""
 
 msgid "DependencyProxy|Dependency Proxy image prefix"
 msgstr ""
 
-msgid "DependencyProxy|Enable Proxy"
+msgid "DependencyProxy|Enable Dependency Proxy"
 msgstr ""
 
 msgid "DependencyProxy|Image list"
 msgstr ""
 
+msgid "DependencyProxy|The Dependency Proxy is disabled. %{docLinkStart}Learn how to enable it%{docLinkEnd}."
+msgstr ""
+
 msgid "DependencyProxy|There are no images in the cache"
 msgstr ""
 
+msgid "DependencyProxy|To see the image prefix and what is in the cache, visit the %{linkStart}Dependency Proxy%{linkEnd}"
+msgstr ""
+
 msgid "Depends on %d merge request being merged"
 msgid_plural "Depends on %d merge requests being merged"
 msgstr[0] ""

spec/frontend/packages_and_registries/dependency_proxy/app_spec.js

@@ -3,6 +3,7 @@ import {
   GlFormGroup,
   GlSkeletonLoader,
   GlSprintf,
+  GlLink,
   GlEmptyState,
 } from '@gitlab/ui';
 import { createLocalVue } from '@vue/test-utils';
@@ -11,7 +12,10 @@ import createMockApollo from 'helpers/mock_apollo_helper';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import { stripTypenames } from 'helpers/graphql_helpers';
 import waitForPromises from 'helpers/wait_for_promises';
-import { GRAPHQL_PAGE_SIZE } from '~/packages_and_registries/dependency_proxy/constants';
+import {
+  GRAPHQL_PAGE_SIZE,
+  ENABLE_DEPENDENCY_PROXY_DOCS_PATH,
+} from '~/packages_and_registries/dependency_proxy/constants';
 
 import DependencyProxyApp from '~/packages_and_registries/dependency_proxy/app.vue';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
@@ -55,6 +59,7 @@ describe('DependencyProxyApp', () => {
 
   const findProxyNotAvailableAlert = () => wrapper.findByTestId('proxy-not-available');
   const findProxyDisabledAlert = () => wrapper.findByTestId('proxy-disabled');
+  const findDisabledAlertLink = () => findProxyDisabledAlert().findComponent(GlLink);
   const findClipBoardButton = () => wrapper.findComponent(ClipboardButton);
   const findFormGroup = () => wrapper.findComponent(GlFormGroup);
   const findFormInputGroup = () => wrapper.findComponent(GlFormInputGroup);
@@ -238,7 +243,15 @@ describe('DependencyProxyApp', () => {
         });
 
         it('shows a proxy disabled alert', () => {
-          expect(findProxyDisabledAlert().text()).toBe(DependencyProxyApp.i18n.proxyDisabledText);
+          expect(findProxyDisabledAlert().text()).toMatchInterpolatedText(
+            DependencyProxyApp.i18n.proxyDisabledText,
+          );
+        });
+
+        it('disabled alert has a link to the docs', () => {
+          expect(findDisabledAlertLink().attributes()).toMatchObject({
+            href: ENABLE_DEPENDENCY_PROXY_DOCS_PATH,
+          });
         });
       });
     });

spec/frontend/packages_and_registries/settings/group/components/dependency_proxy_settings_spec.js

-import { GlSprintf, GlLink, GlToggle } from '@gitlab/ui';
-import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { GlSprintf, GlToggle } from '@gitlab/ui';
+import { createLocalVue } from '@vue/test-utils';
 import VueApollo from 'vue-apollo';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 
@@ -16,7 +17,7 @@ import getGroupPackagesSettingsQuery from '~/packages_and_registries/settings/gr
 import SettingsBlock from '~/vue_shared/components/settings/settings_block.vue';
 import { updateGroupDependencyProxySettingsOptimisticResponse } from '~/packages_and_registries/settings/group/graphql/utils/optimistic_responses';
 import {
-  dependencyProxySettings,
+  dependencyProxySettings as dependencyProxySettingsMock,
   dependencyProxySettingMutationMock,
   groupPackageSettingsMock,
   dependencyProxySettingMutationErrorMock,
@@ -34,6 +35,7 @@ describe('DependencyProxySettings', () => {
   const defaultProvide = {
     defaultExpanded: false,
     groupPath: 'foo_group_path',
+    groupDependencyProxyPath: 'group_dependency_proxy_path',
   };
 
   localVue.use(VueApollo);
@@ -42,21 +44,23 @@ describe('DependencyProxySettings', () => {
     provide = defaultProvide,
     mutationResolver = jest.fn().mockResolvedValue(dependencyProxySettingMutationMock()),
     isLoading = false,
+    dependencyProxySettings = dependencyProxySettingsMock(),
   } = {}) => {
     const requestHandlers = [[updateDependencyProxySettings, mutationResolver]];
 
     apolloProvider = createMockApollo(requestHandlers);
 
-    wrapper = shallowMount(component, {
+    wrapper = shallowMountExtended(component, {
       localVue,
       apolloProvider,
       provide,
       propsData: {
-        dependencyProxySettings: dependencyProxySettings(),
+        dependencyProxySettings,
         isLoading,
       },
       stubs: {
         GlSprintf,
+        GlToggle,
         SettingsBlock,
       },
     });
@@ -67,9 +71,10 @@ describe('DependencyProxySettings', () => {
   });
 
   const findSettingsBlock = () => wrapper.findComponent(SettingsBlock);
-  const findDescription = () => wrapper.find('[data-testid="description"');
-  const findLink = () => wrapper.findComponent(GlLink);
+  const findDescription = () => wrapper.findByTestId('description');
+  const findDescriptionLink = () => wrapper.findByTestId('description-link');
   const findToggle = () => wrapper.findComponent(GlToggle);
+  const findToggleHelpLink = () => wrapper.findByTestId('toggle-help-link');
 
   const fillApolloCache = () => {
     apolloProvider.defaultClient.cache.writeQuery({
@@ -112,10 +117,59 @@ describe('DependencyProxySettings', () => {
   it('has the correct link', () => {
     mountComponent();
 
-    expect(findLink().attributes()).toMatchObject({
+    expect(findDescriptionLink().attributes()).toMatchObject({
       href: DEPENDENCY_PROXY_DOCS_PATH,
     });
-    expect(findLink().text()).toBe('Learn more');
+    expect(findDescriptionLink().text()).toBe('Learn more');
+  });
+
+  describe('enable toggle', () => {
+    it('exists', () => {
+      mountComponent();
+
+      expect(findToggle().props()).toMatchObject({
+        label: component.i18n.label,
+      });
+    });
+
+    describe('when enabled', () => {
+      beforeEach(() => {
+        mountComponent();
+      });
+
+      it('has the help prop correctly set', () => {
+        expect(findToggle().props()).toMatchObject({
+          help: component.i18n.enabledProxyHelpText,
+        });
+      });
+
+      it('has help text with a link', () => {
+        expect(findToggle().text()).toContain(
+          'To see the image prefix and what is in the cache, visit the Dependency Proxy',
+        );
+        expect(findToggleHelpLink().attributes()).toMatchObject({
+          href: defaultProvide.groupDependencyProxyPath,
+        });
+      });
+    });
+
+    describe('when disabled', () => {
+      beforeEach(() => {
+        mountComponent({
+          dependencyProxySettings: dependencyProxySettingsMock({ enabled: false }),
+        });
+      });
+
+      it('has the help prop set to empty', () => {
+        expect(findToggle().props()).toMatchObject({
+          help: '',
+        });
+      });
+
+      it('the help text is not visible', () => {
+        expect(findToggleHelpLink().exists()).toBe(false);
+      });
+    });
   });
 
   describe('settings update', () => {

spec/frontend/packages_and_registries/settings/group/mock_data.js

@@ -5,8 +5,9 @@ export const packageSettings = () => ({
   genericDuplicateExceptionRegex: '',
 });
 
-export const dependencyProxySettings = () => ({
+export const dependencyProxySettings = (extend) => ({
   enabled: true,
+  ...extend,
 });
 
 export const groupPackageSettingsMock = {