Merge branch '347409-migrate-package-details-page-to-vue-router' into 'master'

Package Details: Move help_page_path to frontend

See merge request gitlab-org/gitlab!77481

app/assets/javascripts/packages_and_registries/package_registry/components/details/app.vue

@@ -74,7 +74,6 @@ export default {
     'canDelete',
     'svgPath',
     'npmPath',
-    'npmHelpPath',
     'projectListUrl',
     'groupListUrl',
   ],

app/assets/javascripts/packages_and_registries/package_registry/components/details/composer_installation.vue

@@ -6,6 +6,7 @@ import {
   TRACKING_ACTION_COPY_COMPOSER_REGISTRY_INCLUDE_COMMAND,
   TRACKING_ACTION_COPY_COMPOSER_PACKAGE_INCLUDE_COMMAND,
   TRACKING_LABEL_CODE_INSTRUCTION,
+  COMPOSER_HELP_PATH,
 } from '~/packages_and_registries/package_registry/constants';
 import CodeInstruction from '~/vue_shared/components/registry/code_instruction.vue';
 
@@ -17,7 +18,7 @@ export default {
     GlLink,
     GlSprintf,
   },
-  inject: ['composerHelpPath', 'composerConfigRepositoryName', 'composerPath', 'groupListUrl'],
+  inject: ['composerConfigRepositoryName', 'composerPath', 'groupListUrl'],
   props: {
     packageEntity: {
       type: Object,
@@ -51,6 +52,9 @@ export default {
     TRACKING_ACTION_COPY_COMPOSER_PACKAGE_INCLUDE_COMMAND,
     TRACKING_LABEL_CODE_INSTRUCTION,
   },
+  links: {
+    COMPOSER_HELP_PATH,
+  },
   installOptions: [{ value: 'composer', label: s__('PackageRegistry|Show Composer commands') }],
 };
 </script>
@@ -79,7 +83,7 @@ export default {
     <span data-testid="help-text">
       <gl-sprintf :message="$options.i18n.infoLine">
         <template #link="{ content }">
-          <gl-link :href="composerHelpPath" target="_blank">{{ content }}</gl-link>
+          <gl-link :href="$options.links.COMPOSER_HELP_PATH" target="_blank">{{ content }}</gl-link>
         </template>
       </gl-sprintf>
     </span>

app/assets/javascripts/packages_and_registries/package_registry/components/details/conan_installation.vue

@@ -6,6 +6,7 @@ import {
   TRACKING_ACTION_COPY_CONAN_COMMAND,
   TRACKING_ACTION_COPY_CONAN_SETUP_COMMAND,
   TRACKING_LABEL_CODE_INSTRUCTION,
+  CONAN_HELP_PATH,
 } from '~/packages_and_registries/package_registry/constants';
 import CodeInstruction from '~/vue_shared/components/registry/code_instruction.vue';
 
@@ -17,7 +18,7 @@ export default {
     GlLink,
     GlSprintf,
   },
-  inject: ['conanHelpPath', 'conanPath'],
+  inject: ['conanPath'],
   props: {
     packageEntity: {
       type: Object,
@@ -44,7 +45,7 @@ export default {
     TRACKING_ACTION_COPY_CONAN_SETUP_COMMAND,
     TRACKING_LABEL_CODE_INSTRUCTION,
   },
-
+  links: { CONAN_HELP_PATH },
   installOptions: [{ value: 'conan', label: s__('PackageRegistry|Show Conan commands') }],
 };
 </script>
@@ -72,7 +73,7 @@ export default {
     />
     <gl-sprintf :message="$options.i18n.helpText">
       <template #link="{ content }">
-        <gl-link :href="conanHelpPath" target="_blank">{{ content }}</gl-link>
+        <gl-link :href="$options.links.CONAN_HELP_PATH" target="_blank">{{ content }}</gl-link>
       </template>
     </gl-sprintf>
   </div>

app/assets/javascripts/packages_and_registries/package_registry/components/details/maven_installation.vue

@@ -12,6 +12,7 @@ import {
   TRACKING_ACTION_COPY_KOTLIN_ADD_TO_SOURCE_COMMAND,
   TRACKING_LABEL_CODE_INSTRUCTION,
   TRACKING_LABEL_MAVEN_INSTALLATION,
+  MAVEN_HELP_PATH,
 } from '~/packages_and_registries/package_registry/constants';
 import CodeInstruction from '~/vue_shared/components/registry/code_instruction.vue';
 
@@ -23,7 +24,7 @@ export default {
     GlLink,
     GlSprintf,
   },
-  inject: ['mavenHelpPath', 'mavenPath'],
+  inject: ['mavenPath'],
   props: {
     packageEntity: {
       type: Object,
@@ -126,7 +127,7 @@ export default {
     TRACKING_LABEL_CODE_INSTRUCTION,
     TRACKING_LABEL_MAVEN_INSTALLATION,
   },
-
+  links: { MAVEN_HELP_PATH },
   installOptions: [
     { value: 'maven', label: s__('PackageRegistry|Maven XML') },
     { value: 'groovy', label: s__('PackageRegistry|Gradle Groovy DSL') },
@@ -185,7 +186,7 @@ export default {
       />
       <gl-sprintf :message="$options.i18n.helpText">
         <template #link="{ content }">
-          <gl-link :href="mavenHelpPath" target="_blank">{{ content }}</gl-link>
+          <gl-link :href="$options.links.MAVEN_HELP_PATH" target="_blank">{{ content }}</gl-link>
         </template>
       </gl-sprintf>
     </template>

app/assets/javascripts/packages_and_registries/package_registry/components/details/npm_installation.vue

@@ -13,6 +13,7 @@ import {
   YARN_PACKAGE_MANAGER,
   PROJECT_PACKAGE_ENDPOINT_TYPE,
   INSTANCE_PACKAGE_ENDPOINT_TYPE,
+  NPM_HELP_PATH,
 } from '~/packages_and_registries/package_registry/constants';
 import CodeInstruction from '~/vue_shared/components/registry/code_instruction.vue';
 
@@ -25,7 +26,7 @@ export default {
     GlSprintf,
     GlFormRadioGroup,
   },
-  inject: ['npmHelpPath', 'npmPath', 'npmProjectPath'],
+  inject: ['npmPath', 'npmProjectPath'],
   props: {
     packageEntity: {
       type: Object,
@@ -89,6 +90,7 @@ export default {
       'PackageRegistry|You may also need to setup authentication using an auth token. %{linkStart}See the documentation%{linkEnd} to find out more.',
     ),
   },
+  links: { NPM_HELP_PATH },
   installOptions: [
     { value: NPM_PACKAGE_MANAGER, label: s__('PackageRegistry|Show NPM commands') },
     { value: YARN_PACKAGE_MANAGER, label: s__('PackageRegistry|Show Yarn commands') },
@@ -150,7 +152,7 @@ export default {
 
     <gl-sprintf :message="$options.i18n.helpText">
       <template #link="{ content }">
-        <gl-link :href="npmHelpPath" target="_blank">{{ content }}</gl-link>
+        <gl-link :href="$options.links.NPM_HELP_PATH" target="_blank">{{ content }}</gl-link>
       </template>
     </gl-sprintf>
   </div>

app/assets/javascripts/packages_and_registries/package_registry/components/details/nuget_installation.vue

@@ -6,6 +6,7 @@ import {
   TRACKING_ACTION_COPY_NUGET_INSTALL_COMMAND,
   TRACKING_ACTION_COPY_NUGET_SETUP_COMMAND,
   TRACKING_LABEL_CODE_INSTRUCTION,
+  NUGET_HELP_PATH,
 } from '~/packages_and_registries/package_registry/constants';
 import CodeInstruction from '~/vue_shared/components/registry/code_instruction.vue';
 
@@ -17,7 +18,7 @@ export default {
     GlLink,
     GlSprintf,
   },
-  inject: ['nugetHelpPath', 'nugetPath'],
+  inject: ['nugetPath'],
   props: {
     packageEntity: {
       type: Object,
@@ -42,6 +43,7 @@ export default {
       'PackageRegistry|For more information on the NuGet registry, %{linkStart}see the documentation%{linkEnd}.',
     ),
   },
+  links: { NUGET_HELP_PATH },
   installOptions: [{ value: 'nuget', label: s__('PackageRegistry|Show Nuget commands') }],
 };
 </script>
@@ -68,7 +70,7 @@ export default {
     />
     <gl-sprintf :message="$options.i18n.helpText">
       <template #link="{ content }">
-        <gl-link :href="nugetHelpPath" target="_blank">{{ content }}</gl-link>
+        <gl-link :href="$options.links.NUGET_HELP_PATH" target="_blank">{{ content }}</gl-link>
       </template>
     </gl-sprintf>
   </div>

app/assets/javascripts/packages_and_registries/package_registry/components/details/pypi_installation.vue

@@ -7,6 +7,7 @@ import {
   TRACKING_ACTION_COPY_PIP_INSTALL_COMMAND,
   TRACKING_ACTION_COPY_PYPI_SETUP_COMMAND,
   TRACKING_LABEL_CODE_INSTRUCTION,
+  PYPI_HELP_PATH,
 } from '~/packages_and_registries/package_registry/constants';
 import CodeInstruction from '~/vue_shared/components/registry/code_instruction.vue';
 
@@ -18,7 +19,7 @@ export default {
     GlLink,
     GlSprintf,
   },
-  inject: ['pypiHelpPath', 'pypiPath', 'pypiSetupPath'],
+  inject: ['pypiPath', 'pypiSetupPath'],
   props: {
     packageEntity: {
       type: Object,
@@ -50,6 +51,7 @@ password = <your personal access token>`;
       'PackageRegistry|For more information on the PyPi registry, %{linkStart}see the documentation%{linkEnd}.',
     ),
   },
+  links: { PYPI_HELP_PATH },
   installOptions: [{ value: 'pypi', label: s__('PackageRegistry|Show PyPi commands') }],
 };
 </script>
@@ -86,7 +88,7 @@ password = <your personal access token>`;
     />
     <gl-sprintf :message="$options.i18n.helpText">
       <template #link="{ content }">
-        <gl-link :href="pypiHelpPath" target="_blank">{{ content }}</gl-link>
+        <gl-link :href="$options.links.PYPI_HELP_PATH" target="_blank">{{ content }}</gl-link>
       </template>
     </gl-sprintf>
   </div>

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

@@ -142,3 +142,9 @@ export const PACKAGE_TYPES = [
 
 export const EMPTY_LIST_HELP_URL = helpPagePath('user/packages/package_registry/index');
 export const PACKAGE_HELP_URL = helpPagePath('user/packages/index');
+export const NPM_HELP_PATH = helpPagePath('user/packages/npm_registry/index');
+export const MAVEN_HELP_PATH = helpPagePath('user/packages/maven_repository/index');
+export const CONAN_HELP_PATH = helpPagePath('user/packages/conan_repository/index');
+export const NUGET_HELP_PATH = helpPagePath('user/packages/nuget_repository/index');
+export const PYPI_HELP_PATH = helpPagePath('user/packages/pypi_repository/index');
+export const COMPOSER_HELP_PATH = helpPagePath('user/packages/composer_repository/index');

app/helpers/packages_helper.rb

@@ -61,18 +61,12 @@ module PackagesHelper
       svg_path: image_path('illustrations/no-packages.svg'),
       npm_path: package_registry_instance_url(:npm),
       npm_project_path: package_registry_project_url(project.id, :npm),
-      npm_help_path: help_page_path('user/packages/npm_registry/index'),
       maven_path: package_registry_project_url(project.id, :maven),
-      maven_help_path: help_page_path('user/packages/maven_repository/index'),
       conan_path: package_registry_project_url(project.id, :conan),
-      conan_help_path: help_page_path('user/packages/conan_repository/index'),
       nuget_path: nuget_package_registry_url(project.id),
-      nuget_help_path: help_page_path('user/packages/nuget_repository/index'),
       pypi_path: pypi_registry_url(project.id),
       pypi_setup_path: package_registry_project_url(project.id, :pypi),
-      pypi_help_path: help_page_path('user/packages/pypi_repository/index'),
       composer_path: composer_registry_url(project&.group&.id),
-      composer_help_path: help_page_path('user/packages/composer_repository/index'),
       project_name: project.name,
       project_list_url: project_packages_path(project),
       group_list_url: project.group ? group_packages_path(project.group) : '',

spec/frontend/packages_and_registries/package_registry/components/details/__snapshots__/conan_installation_spec.js.snap

@@ -28,9 +28,13 @@ exports[`ConanInstallation renders all the messages 1`] = `
     trackingaction="copy_conan_setup_command"
     trackinglabel="code_instruction"
   />
-   
-  <gl-sprintf-stub
-    message="For more information on the Conan registry, %{linkStart}see the documentation%{linkEnd}."
-  />
+   For more information on the Conan registry, 
+  <gl-link-stub
+    href="/help/user/packages/conan_repository/index"
+    target="_blank"
+  >
+    see the documentation
+  </gl-link-stub>
+  .
 </div>
 `;

spec/frontend/packages_and_registries/package_registry/components/details/__snapshots__/maven_installation_spec.js.snap

@@ -64,9 +64,15 @@ exports[`MavenInstallation maven renders all the messages 1`] = `
   />
    
   <p>
-    <gl-sprintf-stub
-      message="Copy and paste this inside your %{codeStart}pom.xml%{codeEnd} %{codeStart}dependencies%{codeEnd} block."
-    />
+    Copy and paste this inside your 
+    <code>
+      pom.xml
+    </code>
+     
+    <code>
+      dependencies
+    </code>
+     block.
   </p>
    
   <code-instruction-stub
@@ -97,9 +103,11 @@ exports[`MavenInstallation maven renders all the messages 1`] = `
   </h3>
    
   <p>
-    <gl-sprintf-stub
-      message="If you haven't already done so, you will need to add the below to your %{codeStart}pom.xml%{codeEnd} file."
-    />
+    If you haven't already done so, you will need to add the below to your 
+    <code>
+      pom.xml
+    </code>
+     file.
   </p>
    
   <code-instruction-stub
@@ -127,9 +135,13 @@ exports[`MavenInstallation maven renders all the messages 1`] = `
     trackingaction="copy_maven_setup_xml"
     trackinglabel="code_instruction"
   />
-   
-  <gl-sprintf-stub
-    message="For more information on the Maven registry, %{linkStart}see the documentation%{linkEnd}."
-  />
+   For more information on the Maven registry, 
+  <gl-link-stub
+    href="/help/user/packages/maven_repository/index"
+    target="_blank"
+  >
+    see the documentation
+  </gl-link-stub>
+  .
 </div>
 `;

spec/frontend/packages_and_registries/package_registry/components/details/__snapshots__/npm_installation_spec.js.snap

@@ -37,9 +37,13 @@ exports[`NpmInstallation renders all the messages 1`] = `
     trackingaction="copy_npm_setup_command"
     trackinglabel="code_instruction"
   />
-   
-  <gl-sprintf-stub
-    message="You may also need to setup authentication using an auth token. %{linkStart}See the documentation%{linkEnd} to find out more."
-  />
+   You may also need to setup authentication using an auth token. 
+  <gl-link-stub
+    href="/help/user/packages/npm_registry/index"
+    target="_blank"
+  >
+    See the documentation
+  </gl-link-stub>
+   to find out more.
 </div>
 `;

spec/frontend/packages_and_registries/package_registry/components/details/__snapshots__/nuget_installation_spec.js.snap

@@ -28,9 +28,13 @@ exports[`NugetInstallation renders all the messages 1`] = `
     trackingaction="copy_nuget_setup_command"
     trackinglabel="code_instruction"
   />
-   
-  <gl-sprintf-stub
-    message="For more information on the NuGet registry, %{linkStart}see the documentation%{linkEnd}."
-  />
+   For more information on the NuGet registry, 
+  <gl-link-stub
+    href="/help/user/packages/nuget_repository/index"
+    target="_blank"
+  >
+    see the documentation
+  </gl-link-stub>
+  .
 </div>
 `;

spec/frontend/packages_and_registries/package_registry/components/details/__snapshots__/pypi_installation_spec.js.snap

@@ -23,9 +23,11 @@ exports[`PypiInstallation renders all the messages 1`] = `
   </h3>
    
   <p>
-    <gl-sprintf-stub
-      message="If you haven't already done so, you will need to add the below to your %{codeStart}.pypirc%{codeEnd} file."
-    />
+    If you haven't already done so, you will need to add the below to your 
+    <code>
+      .pypirc
+    </code>
+     file.
   </p>
    
   <code-instruction-stub
@@ -40,9 +42,13 @@ password = <your personal access token>"
     trackingaction="copy_pypi_setup_command"
     trackinglabel="code_instruction"
   />
-   
-  <gl-sprintf-stub
-    message="For more information on the PyPi registry, %{linkStart}see the documentation%{linkEnd}."
-  />
+   For more information on the PyPi registry, 
+  <gl-link-stub
+    href="/help/user/packages/pypi_repository/index"
+    target="_blank"
+  >
+    see the documentation
+  </gl-link-stub>
+  .
 </div>
 `;

spec/frontend/packages_and_registries/package_registry/components/details/composer_installation_spec.js

@@ -7,6 +7,7 @@ import {
   TRACKING_ACTION_COPY_COMPOSER_REGISTRY_INCLUDE_COMMAND,
   TRACKING_ACTION_COPY_COMPOSER_PACKAGE_INCLUDE_COMMAND,
   PACKAGE_TYPE_COMPOSER,
+  COMPOSER_HELP_PATH,
 } from '~/packages_and_registries/package_registry/constants';
 
 const packageEntity = { ...packageData(), packageType: PACKAGE_TYPE_COMPOSER };
@@ -24,7 +25,6 @@ describe('ComposerInstallation', () => {
   function createComponent(groupListUrl = 'groupListUrl') {
     wrapper = shallowMountExtended(ComposerInstallation, {
       provide: {
-        composerHelpPath: 'composerHelpPath',
         composerConfigRepositoryName: 'composerConfigRepositoryName',
         composerPath: 'composerPath',
         groupListUrl,
@@ -96,7 +96,7 @@ describe('ComposerInstallation', () => {
         'For more information on Composer packages in GitLab, see the documentation.',
       );
       expect(findHelpLink().attributes()).toMatchObject({
-        href: 'composerHelpPath',
+        href: COMPOSER_HELP_PATH,
         target: '_blank',
       });
     });

spec/frontend/packages_and_registries/package_registry/components/details/conan_installation_spec.js

+import { GlLink, GlSprintf } from '@gitlab/ui';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import { packageData } from 'jest/packages_and_registries/package_registry/mock_data';
 import ConanInstallation from '~/packages_and_registries/package_registry/components/details/conan_installation.vue';
 import InstallationTitle from '~/packages_and_registries/package_registry/components/details/installation_title.vue';
-import { PACKAGE_TYPE_CONAN } from '~/packages_and_registries/package_registry/constants';
+import {
+  PACKAGE_TYPE_CONAN,
+  CONAN_HELP_PATH,
+} from '~/packages_and_registries/package_registry/constants';
 import CodeInstructions from '~/vue_shared/components/registry/code_instruction.vue';
 
 const packageEntity = { ...packageData(), packageType: PACKAGE_TYPE_CONAN };
@@ -12,16 +16,19 @@ describe('ConanInstallation', () => {
 
   const findCodeInstructions = () => wrapper.findAllComponents(CodeInstructions);
   const findInstallationTitle = () => wrapper.findComponent(InstallationTitle);
+  const findSetupDocsLink = () => wrapper.findComponent(GlLink);
 
   function createComponent() {
     wrapper = shallowMountExtended(ConanInstallation, {
       provide: {
-        conanHelpPath: 'conanHelpPath',
         conanPath: 'conanPath',
       },
       propsData: {
         packageEntity,
       },
+      stubs: {
+        GlSprintf,
+      },
     });
   }
 
@@ -61,5 +68,12 @@ describe('ConanInstallation', () => {
         'conan remote add gitlab conanPath',
       );
     });
+
+    it('has a link to the docs', () => {
+      expect(findSetupDocsLink().attributes()).toMatchObject({
+        href: CONAN_HELP_PATH,
+        target: '_blank',
+      });
+    });
   });
 });

spec/frontend/packages_and_registries/package_registry/components/details/maven_installation_spec.js

+import { GlLink, GlSprintf } from '@gitlab/ui';
 import { nextTick } from 'vue';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 
@@ -16,6 +17,7 @@ import {
   TRACKING_ACTION_COPY_KOTLIN_INSTALL_COMMAND,
   TRACKING_ACTION_COPY_KOTLIN_ADD_TO_SOURCE_COMMAND,
   PACKAGE_TYPE_MAVEN,
+  MAVEN_HELP_PATH,
 } from '~/packages_and_registries/package_registry/constants';
 import CodeInstructions from '~/vue_shared/components/registry/code_instruction.vue';
 
@@ -28,7 +30,6 @@ describe('MavenInstallation', () => {
     metadata: mavenMetadata(),
   };
 
-  const mavenHelpPath = 'mavenHelpPath';
   const mavenPath = 'mavenPath';
 
   const xmlCodeBlock = `<dependency>
@@ -64,11 +65,11 @@ describe('MavenInstallation', () => {
 
   const findCodeInstructions = () => wrapper.findAllComponents(CodeInstructions);
   const findInstallationTitle = () => wrapper.findComponent(InstallationTitle);
+  const findSetupDocsLink = () => wrapper.findComponent(GlLink);
 
   function createComponent({ data = {} } = {}) {
     wrapper = shallowMountExtended(MavenInstallation, {
       provide: {
-        mavenHelpPath,
         mavenPath,
       },
       propsData: {
@@ -77,6 +78,9 @@ describe('MavenInstallation', () => {
       data() {
         return data;
       },
+      stubs: {
+        GlSprintf,
+      },
     });
   }
 
@@ -148,6 +152,13 @@ describe('MavenInstallation', () => {
           trackingAction: TRACKING_ACTION_COPY_MAVEN_SETUP,
         });
       });
+
+      it('has a setup link', () => {
+        expect(findSetupDocsLink().attributes()).toMatchObject({
+          href: MAVEN_HELP_PATH,
+          target: '_blank',
+        });
+      });
     });
   });
 

spec/frontend/packages_and_registries/package_registry/components/details/npm_installation_spec.js

-import { GlFormRadioGroup } from '@gitlab/ui';
+import { GlLink, GlSprintf, GlFormRadioGroup } from '@gitlab/ui';
 import { nextTick } from 'vue';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 
@@ -15,6 +15,7 @@ import {
   YARN_PACKAGE_MANAGER,
   PROJECT_PACKAGE_ENDPOINT_TYPE,
   INSTANCE_PACKAGE_ENDPOINT_TYPE,
+  NPM_HELP_PATH,
 } from '~/packages_and_registries/package_registry/constants';
 import CodeInstructions from '~/vue_shared/components/registry/code_instruction.vue';
 
@@ -29,11 +30,11 @@ describe('NpmInstallation', () => {
   const findCodeInstructions = () => wrapper.findAllComponents(CodeInstructions);
   const findInstallationTitle = () => wrapper.findComponent(InstallationTitle);
   const findEndPointTypeSector = () => wrapper.findComponent(GlFormRadioGroup);
+  const findSetupDocsLink = () => wrapper.findComponent(GlLink);
 
   function createComponent({ data = {} } = {}) {
     wrapper = shallowMountExtended(NpmInstallation, {
       provide: {
-        npmHelpPath: 'npmHelpPath',
         npmPath: 'npmPath',
         npmProjectPath: 'npmProjectPath',
       },
@@ -43,6 +44,7 @@ describe('NpmInstallation', () => {
       data() {
         return data;
       },
+      stubs: { GlSprintf },
     });
   }
 
@@ -58,6 +60,13 @@ describe('NpmInstallation', () => {
     expect(wrapper.element).toMatchSnapshot();
   });
 
+  it('has a setup link', () => {
+    expect(findSetupDocsLink().attributes()).toMatchObject({
+      href: NPM_HELP_PATH,
+      target: '_blank',
+    });
+  });
+
   describe('endpoint type selector', () => {
     it('has the endpoint type selector', () => {
       expect(findEndPointTypeSector().exists()).toBe(true);

spec/frontend/packages_and_registries/package_registry/components/details/nuget_installation_spec.js

+import { GlLink, GlSprintf } from '@gitlab/ui';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import { packageData } from 'jest/packages_and_registries/package_registry/mock_data';
 import InstallationTitle from '~/packages_and_registries/package_registry/components/details/installation_title.vue';
@@ -6,6 +7,7 @@ import {
   TRACKING_ACTION_COPY_NUGET_INSTALL_COMMAND,
   TRACKING_ACTION_COPY_NUGET_SETUP_COMMAND,
   PACKAGE_TYPE_NUGET,
+  NUGET_HELP_PATH,
 } from '~/packages_and_registries/package_registry/constants';
 import CodeInstructions from '~/vue_shared/components/registry/code_instruction.vue';
 
@@ -20,16 +22,17 @@ describe('NugetInstallation', () => {
 
   const findCodeInstructions = () => wrapper.findAllComponents(CodeInstructions);
   const findInstallationTitle = () => wrapper.findComponent(InstallationTitle);
+  const findSetupDocsLink = () => wrapper.findComponent(GlLink);
 
   function createComponent() {
     wrapper = shallowMountExtended(NugetInstallation, {
       provide: {
-        nugetHelpPath: 'nugetHelpPath',
         nugetPath: 'nugetPath',
       },
       propsData: {
         packageEntity,
       },
+      stubs: { GlSprintf },
     });
   }
 
@@ -71,5 +74,12 @@ describe('NugetInstallation', () => {
         trackingAction: TRACKING_ACTION_COPY_NUGET_SETUP_COMMAND,
       });
     });
+
+    it('it has docs link', () => {
+      expect(findSetupDocsLink().attributes()).toMatchObject({
+        href: NUGET_HELP_PATH,
+        target: '_blank',
+      });
+    });
   });
 });

spec/frontend/packages_and_registries/package_registry/components/details/pypi_installation_spec.js

+import { GlLink, GlSprintf } from '@gitlab/ui';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import { packageData } from 'jest/packages_and_registries/package_registry/mock_data';
 import InstallationTitle from '~/packages_and_registries/package_registry/components/details/installation_title.vue';
@@ -6,6 +7,7 @@ import {
   PACKAGE_TYPE_PYPI,
   TRACKING_ACTION_COPY_PIP_INSTALL_COMMAND,
   TRACKING_ACTION_COPY_PYPI_SETUP_COMMAND,
+  PYPI_HELP_PATH,
 } from '~/packages_and_registries/package_registry/constants';
 
 const packageEntity = { ...packageData(), packageType: PACKAGE_TYPE_PYPI };
@@ -23,17 +25,20 @@ password = <your personal access token>`;
   const setupInstruction = () => wrapper.findByTestId('pypi-setup-content');
 
   const findInstallationTitle = () => wrapper.findComponent(InstallationTitle);
+  const findSetupDocsLink = () => wrapper.findComponent(GlLink);
 
   function createComponent() {
     wrapper = shallowMountExtended(PypiInstallation, {
       provide: {
-        pypiHelpPath: 'pypiHelpPath',
         pypiPath: 'pypiPath',
         pypiSetupPath: 'pypiSetupPath',
       },
       propsData: {
         packageEntity,
       },
+      stubs: {
+        GlSprintf,
+      },
     });
   }
 
@@ -76,5 +81,12 @@ password = <your personal access token>`;
         trackingAction: TRACKING_ACTION_COPY_PYPI_SETUP_COMMAND,
       });
     });
+
+    it('has a link to the docs', () => {
+      expect(findSetupDocsLink().attributes()).toMatchObject({
+        href: PYPI_HELP_PATH,
+        target: '_blank',
+      });
+    });
   });
 });