1 files changed, 36 insertions, 11 deletions
diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/details/pypi_installation.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/details/pypi_installation.vue
index a126d30f1ec..dd58f28a262 100644
--- a/app/assets/javascripts/packages_and_registries/package_registry/components/details/pypi_installation.vue
+++ b/app/assets/javascripts/packages_and_registries/package_registry/components/details/pypi_installation.vue
@@ -1,9 +1,10 @@
 <script>
-import { GlLink, GlSprintf } from '@gitlab/ui';
+import { GlFormGroup, GlLink, GlSprintf } from '@gitlab/ui';
 
 import { s__ } from '~/locale';
 import InstallationTitle from '~/packages_and_registries/package_registry/components/details/installation_title.vue';
 import {
+  PERSONAL_ACCESS_TOKEN_HELP_URL,
   TRACKING_ACTION_COPY_PIP_INSTALL_COMMAND,
   TRACKING_ACTION_COPY_PYPI_SETUP_COMMAND,
   TRACKING_LABEL_CODE_INSTRUCTION,
@@ -16,6 +17,7 @@ export default {
   components: {
     InstallationTitle,
     CodeInstruction,
+    GlFormGroup,
     GlLink,
     GlSprintf,
   },
@@ -43,6 +45,7 @@ password = <your personal access token>`;
     TRACKING_LABEL_CODE_INSTRUCTION,
   },
   i18n: {
+    tokenText: s__(`PackageRegistry|You will need a %{linkStart}personal access token%{linkEnd}.`),
     setupText: s__(
       `PackageRegistry|If you haven't already done so, you will need to add the below to your %{codeStart}.pypirc%{codeEnd} file.`,
     ),
@@ -50,7 +53,10 @@ password = <your personal access token>`;
       'PackageRegistry|For more information on the PyPi registry, %{linkStart}see the documentation%{linkEnd}.',
     ),
   },
-  links: { PYPI_HELP_PATH },
+  links: {
+    PERSONAL_ACCESS_TOKEN_HELP_URL,
+    PYPI_HELP_PATH,
+  },
   installOptions: [{ value: 'pypi', label: s__('PackageRegistry|Show PyPi commands') }],
 };
 </script>
@@ -59,14 +65,28 @@ password = <your personal access token>`;
   <div>
     <installation-title package-type="pypi" :options="$options.installOptions" />
 
-    <code-instruction
-      :label="s__('PackageRegistry|Pip Command')"
-      :instruction="pypiPipCommand"
-      :copy-text="s__('PackageRegistry|Copy Pip command')"
-      data-testid="pip-command"
-      :tracking-action="$options.tracking.TRACKING_ACTION_COPY_PIP_INSTALL_COMMAND"
-      :tracking-label="$options.tracking.TRACKING_LABEL_CODE_INSTRUCTION"
-    />
+    <gl-form-group id="installation-pip-command-group">
+      <code-instruction
+        id="installation-pip-command"
+        :label="s__('PackageRegistry|Pip Command')"
+        :instruction="pypiPipCommand"
+        :copy-text="s__('PackageRegistry|Copy Pip command')"
+        data-testid="pip-command"
+        :tracking-action="$options.tracking.TRACKING_ACTION_COPY_PIP_INSTALL_COMMAND"
+        :tracking-label="$options.tracking.TRACKING_LABEL_CODE_INSTRUCTION"
+      />
+      <template #description>
+        <gl-sprintf :message="$options.i18n.tokenText">
+          <template #link="{ content }">
+            <gl-link
+              :href="$options.links.PERSONAL_ACCESS_TOKEN_HELP_URL"
+              data-testid="access-token-link"
+              >{{ content }}</gl-link
+            >
+          </template>
+        </gl-sprintf>
+      </template>
+    </gl-form-group>
 
     <h3 class="gl-font-lg">{{ __('Registry setup') }}</h3>
     <p>
@@ -87,7 +107,12 @@ password = <your personal access token>`;
     />
     <gl-sprintf :message="$options.i18n.helpText">
       <template #link="{ content }">
-        <gl-link :href="$options.links.PYPI_HELP_PATH" target="_blank">{{ content }}</gl-link>
+        <gl-link
+          :href="$options.links.PYPI_HELP_PATH"
+          target="_blank"
+          data-testid="pypi-docs-link"
+          >{{ content }}</gl-link
+        >
       </template>
     </gl-sprintf>
   </div>