Add latest changes from gitlab-org/gitlab@master

2 files changed, 185 insertions, 27 deletions

diff --git a/spec/frontend/packages_and_registries/package_registry/components/details/__snapshots__/pypi_installation_spec.js.snap b/spec/frontend/packages_and_registries/package_registry/components/details/__snapshots__/pypi_installation_spec.js.snap
index 06ae8645101..92c2cd90568 100644
--- a/spec/frontend/packages_and_registries/package_registry/components/details/__snapshots__/pypi_installation_spec.js.snap
+++ b/spec/frontend/packages_and_registries/package_registry/components/details/__snapshots__/pypi_installation_spec.js.snap
@@ -2,19 +2,161 @@
 
 exports[`PypiInstallation renders all the messages 1`] = `
 <div>
-  <installation-title-stub
-    options="[object Object]"
-    packagetype="pypi"
-  />
+  <div
+    class="gl-display-flex gl-justify-content-space-between gl-align-items-center"
+  >
+    <h3
+      class="gl-font-lg"
+    >
+      Installation
+    </h3>
+     
+    <div>
+      <div
+        class="dropdown b-dropdown gl-new-dropdown btn-group"
+        id="__BVID__27"
+        lazy=""
+      >
+        <!---->
+        <button
+          aria-expanded="false"
+          aria-haspopup="true"
+          class="btn dropdown-toggle btn-default btn-md gl-button gl-dropdown-toggle"
+          id="__BVID__27__BV_toggle_"
+          type="button"
+        >
+          <!---->
+           
+          <!---->
+           
+          <span
+            class="gl-new-dropdown-button-text"
+          >
+            Show PyPi commands
+          </span>
+           
+          <svg
+            aria-hidden="true"
+            class="gl-button-icon dropdown-chevron gl-icon s16"
+            data-testid="chevron-down-icon"
+            role="img"
+          >
+            <use
+              href="#chevron-down"
+            />
+          </svg>
+        </button>
+        <ul
+          aria-labelledby="__BVID__27__BV_toggle_"
+          class="dropdown-menu"
+          role="menu"
+          tabindex="-1"
+        >
+          <!---->
+        </ul>
+      </div>
+    </div>
+  </div>
    
-  <code-instruction-stub
-    copytext="Copy Pip command"
-    data-testid="pip-command"
-    instruction="pip install @gitlab-org/package-15 --extra-index-url http://__token__:<your_personal_token>@gdk.test:3000/api/v4/projects/1/packages/pypi/simple"
-    label="Pip Command"
-    trackingaction="copy_pip_install_command"
-    trackinglabel="code_instruction"
-  />
+  <fieldset
+    aria-describedby="installation-pip-command-group__BV_description_"
+    class="form-group gl-form-group"
+    id="installation-pip-command-group"
+  >
+    <legend
+      class="bv-no-focus-ring col-form-label pt-0 col-form-label"
+      id="installation-pip-command-group__BV_label_"
+      tabindex="-1"
+    >
+      
+      
+      
+      <!---->
+       
+      <!---->
+    </legend>
+    <div
+      aria-labelledby="installation-pip-command-group__BV_label_"
+      class="bv-no-focus-ring"
+      role="group"
+      tabindex="-1"
+    >
+      <div
+        data-testid="pip-command"
+        id="installation-pip-command"
+      >
+        <label
+          for="instruction-input_5"
+        >
+          Pip Command
+        </label>
+         
+        <div
+          class="gl-mb-3"
+        >
+          <div
+            class="input-group gl-mb-3"
+          >
+            <input
+              class="form-control gl-font-monospace"
+              data-testid="instruction-input"
+              id="instruction-input_5"
+              readonly="readonly"
+              type="text"
+            />
+             
+            <span
+              class="input-group-append"
+              data-testid="instruction-button"
+            >
+              <button
+                aria-label="Copy Pip command"
+                aria-live="polite"
+                class="btn input-group-text btn-default btn-md gl-button btn-default-secondary btn-icon"
+                data-clipboard-handle-tooltip="false"
+                data-clipboard-text="pip install @gitlab-org/package-15 --extra-index-url http://__token__:<your_personal_token>@gdk.test:3000/api/v4/projects/1/packages/pypi/simple"
+                id="clipboard-button-6"
+                title="Copy Pip command"
+                type="button"
+              >
+                <!---->
+                 
+                <svg
+                  aria-hidden="true"
+                  class="gl-button-icon gl-icon s16"
+                  data-testid="copy-to-clipboard-icon"
+                  role="img"
+                >
+                  <use
+                    href="#copy-to-clipboard"
+                  />
+                </svg>
+                  
+                <!---->
+              </button>
+            </span>
+          </div>
+        </div>
+      </div>
+      <!---->
+      <!---->
+      <small
+        class="form-text text-muted"
+        id="installation-pip-command-group__BV_description_"
+        tabindex="-1"
+      >
+        You will need a 
+        <a
+          class="gl-link"
+          data-testid="access-token-link"
+          href="/help/user/profile/personal_access_tokens"
+        >
+          personal access token
+        </a>
+        .
+      </small>
+    </div>
+  </fieldset>
    
   <h3
     class="gl-font-lg"
@@ -30,25 +172,33 @@ exports[`PypiInstallation renders all the messages 1`] = `
      file.
   </p>
    
-  <code-instruction-stub
-    copytext="Copy .pypirc content"
+  <div
     data-testid="pypi-setup-content"
-    instruction="[gitlab]
+  >
+    <!---->
+     
+    <div>
+      <pre
+        class="gl-font-monospace"
+        data-testid="multiline-instruction"
+      >
+        [gitlab]
 repository = http://gdk.test:3000/api/v4/projects/1/packages/pypi
 username = __token__
-password = <your personal access token>"
-    label=""
-    multiline="true"
-    trackingaction="copy_pypi_setup_command"
-    trackinglabel="code_instruction"
-  />
+password = &lt;your personal access token&gt;
+      </pre>
+    </div>
+  </div>
    For more information on the PyPi registry, 
-  <gl-link-stub
+  <a
+    class="gl-link"
+    data-testid="pypi-docs-link"
     href="/help/user/packages/pypi_repository/index"
+    rel="noopener"
     target="_blank"
   >
     see the documentation
-  </gl-link-stub>
+  </a>
   .
 </div>
 `;
diff --git a/spec/frontend/packages_and_registries/package_registry/components/details/pypi_installation_spec.js b/spec/frontend/packages_and_registries/package_registry/components/details/pypi_installation_spec.js
index f2fef6436a6..20acb0872e5 100644
--- a/spec/frontend/packages_and_registries/package_registry/components/details/pypi_installation_spec.js
+++ b/spec/frontend/packages_and_registries/package_registry/components/details/pypi_installation_spec.js
@@ -1,9 +1,10 @@
-import { GlLink, GlSprintf } from '@gitlab/ui';
-import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import { GlSprintf } from '@gitlab/ui';
+import { mountExtended } 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';
 import PypiInstallation from '~/packages_and_registries/package_registry/components/details/pypi_installation.vue';
 import {
+  PERSONAL_ACCESS_TOKEN_HELP_URL,
   PACKAGE_TYPE_PYPI,
   TRACKING_ACTION_COPY_PIP_INSTALL_COMMAND,
   TRACKING_ACTION_COPY_PYPI_SETUP_COMMAND,
@@ -24,11 +25,12 @@ password = <your personal access token>`;
   const pipCommand = () => wrapper.findByTestId('pip-command');
   const setupInstruction = () => wrapper.findByTestId('pypi-setup-content');
 
+  const findAccessTokenLink = () => wrapper.findByTestId('access-token-link');
   const findInstallationTitle = () => wrapper.findComponent(InstallationTitle);
-  const findSetupDocsLink = () => wrapper.findComponent(GlLink);
+  const findSetupDocsLink = () => wrapper.findByTestId('pypi-docs-link');
 
   function createComponent() {
-    wrapper = shallowMountExtended(PypiInstallation, {
+    wrapper = mountExtended(PypiInstallation, {
       propsData: {
         packageEntity,
       },
@@ -78,6 +80,12 @@ password = <your personal access token>`;
       });
     });
 
+    it('has a link to personal access token docs', () => {
+      expect(findAccessTokenLink().attributes()).toMatchObject({
+        href: PERSONAL_ACCESS_TOKEN_HELP_URL,
+      });
+    });
+
     it('has a link to the docs', () => {
       expect(findSetupDocsLink().attributes()).toMatchObject({
         href: PYPI_HELP_PATH,