Merge branch '225665-create-shared-components-for-package-and-container-registry-3' into 'master'

Move code_instruction component to registry

See merge request gitlab-org/gitlab!41565

app/assets/javascripts/packages/details/components/composer_installation.vue

@@ -2,8 +2,8 @@
 import { GlLink, GlSprintf } from '@gitlab/ui';
 import { mapGetters, mapState } from 'vuex';
 import { s__ } from '~/locale';
-import CodeInstruction from './code_instruction.vue';
-import { TrackingActions } from '../constants';
+import CodeInstruction from '~/vue_shared/components/registry/code_instruction.vue';
+import { TrackingActions, TrackingLabels } from '../constants';
 
 export default {
   name: 'ComposerInstallation',
@@ -26,28 +26,30 @@ export default {
     ),
   },
   trackingActions: { ...TrackingActions },
+  TrackingLabels,
 };
 </script>
 
 <template>
   <div>
     <h3 class="gl-font-lg">{{ __('Installation') }}</h3>
-    <h4 class="gl-font-base" data-testid="registry-include-title">
-      {{ $options.i18n.registryInclude }}
-    </h4>
 
     <code-instruction
+      :label="$options.i18n.registryInclude"
       :instruction="composerRegistryInclude"
       :copy-text="$options.i18n.copyRegistryInclude"
       :tracking-action="$options.trackingActions.COPY_COMPOSER_REGISTRY_INCLUDE_COMMAND"
+      :tracking-label="$options.TrackingLabels.CODE_INSTRUCTION"
+      data-testid="registry-include"
     />
-    <h4 class="gl-font-base" data-testid="package-include-title">
-      {{ $options.i18n.packageInclude }}
-    </h4>
+
     <code-instruction
+      :label="$options.i18n.packageInclude"
       :instruction="composerPackageInclude"
       :copy-text="$options.i18n.copyPackageInclude"
       :tracking-action="$options.trackingActions.COPY_COMPOSER_PACKAGE_INCLUDE_COMMAND"
+      :tracking-label="$options.TrackingLabels.CODE_INSTRUCTION"
+      data-testid="package-include"
     />
     <span data-testid="help-text">
       <gl-sprintf :message="$options.i18n.infoLine">

app/assets/javascripts/packages/details/components/conan_installation.vue

@@ -2,8 +2,8 @@
 import { GlLink, GlSprintf } from '@gitlab/ui';
 import { mapGetters, mapState } from 'vuex';
 import { s__ } from '~/locale';
-import CodeInstruction from './code_instruction.vue';
-import { TrackingActions } from '../constants';
+import CodeInstruction from '~/vue_shared/components/registry/code_instruction.vue';
+import { TrackingActions, TrackingLabels } from '../constants';
 
 export default {
   name: 'ConanInstallation',
@@ -22,30 +22,30 @@ export default {
     ),
   },
   trackingActions: { ...TrackingActions },
+  TrackingLabels,
 };
 </script>
 
 <template>
   <div>
     <h3 class="gl-font-lg">{{ __('Installation') }}</h3>
-    <h4 class="gl-font-base">
-      {{ s__('PackageRegistry|Conan Command') }}
-    </h4>
 
     <code-instruction
+      :label="s__('PackageRegistry|Conan Command')"
       :instruction="conanInstallationCommand"
       :copy-text="s__('PackageRegistry|Copy Conan Command')"
       :tracking-action="$options.trackingActions.COPY_CONAN_COMMAND"
+      :tracking-label="$options.TrackingLabels.CODE_INSTRUCTION"
     />
 
     <h3 class="gl-font-lg">{{ __('Registry setup') }}</h3>
-    <h4 class="gl-font-base">
-      {{ s__('PackageRegistry|Add Conan Remote') }}
-    </h4>
+
     <code-instruction
+      :label="s__('PackageRegistry|Add Conan Remote')"
       :instruction="conanSetupCommand"
       :copy-text="s__('PackageRegistry|Copy Conan Setup Command')"
       :tracking-action="$options.trackingActions.COPY_CONAN_SETUP_COMMAND"
+      :tracking-label="$options.TrackingLabels.CODE_INSTRUCTION"
     />
     <gl-sprintf :message="$options.i18n.helpText">
       <template #link="{ content }">

app/assets/javascripts/packages/details/components/maven_installation.vue

@@ -2,8 +2,8 @@
 import { GlLink, GlSprintf } from '@gitlab/ui';
 import { mapGetters, mapState } from 'vuex';
 import { s__ } from '~/locale';
-import CodeInstruction from './code_instruction.vue';
-import { TrackingActions } from '../constants';
+import CodeInstruction from '~/vue_shared/components/registry/code_instruction.vue';
+import { TrackingActions, TrackingLabels } from '../constants';
 
 export default {
   name: 'MavenInstallation',
@@ -28,6 +28,7 @@ export default {
     ),
   },
   trackingActions: { ...TrackingActions },
+  TrackingLabels,
 };
 </script>
 
@@ -35,9 +36,6 @@ export default {
   <div>
     <h3 class="gl-font-lg">{{ __('Installation') }}</h3>
 
-    <h4 class="gl-font-base">
-      {{ s__('PackageRegistry|Maven XML') }}
-    </h4>
     <p>
       <gl-sprintf :message="$options.i18n.xmlText">
         <template #code="{ content }">
@@ -45,20 +43,22 @@ export default {
         </template>
       </gl-sprintf>
     </p>
+
     <code-instruction
+      :label="s__('PackageRegistry|Maven XML')"
       :instruction="mavenInstallationXml"
       :copy-text="s__('PackageRegistry|Copy Maven XML')"
       multiline
       :tracking-action="$options.trackingActions.COPY_MAVEN_XML"
+      :tracking-label="$options.TrackingLabels.CODE_INSTRUCTION"
     />
 
-    <h4 class="gl-font-base">
-      {{ s__('PackageRegistry|Maven Command') }}
-    </h4>
     <code-instruction
+      :label="s__('PackageRegistry|Maven Command')"
       :instruction="mavenInstallationCommand"
       :copy-text="s__('PackageRegistry|Copy Maven command')"
       :tracking-action="$options.trackingActions.COPY_MAVEN_COMMAND"
+      :tracking-label="$options.TrackingLabels.CODE_INSTRUCTION"
     />
 
     <h3 class="gl-font-lg">{{ __('Registry setup') }}</h3>
@@ -74,6 +74,7 @@ export default {
       :copy-text="s__('PackageRegistry|Copy Maven registry XML')"
       multiline
       :tracking-action="$options.trackingActions.COPY_MAVEN_SETUP"
+      :tracking-label="$options.TrackingLabels.CODE_INSTRUCTION"
     />
     <gl-sprintf :message="$options.i18n.helpText">
       <template #link="{ content }">

app/assets/javascripts/packages/details/components/npm_installation.vue

@@ -2,8 +2,8 @@
 import { GlLink, GlSprintf } from '@gitlab/ui';
 import { mapGetters, mapState } from 'vuex';
 import { s__ } from '~/locale';
-import CodeInstruction from './code_instruction.vue';
-import { NpmManager, TrackingActions } from '../constants';
+import CodeInstruction from '~/vue_shared/components/registry/code_instruction.vue';
+import { NpmManager, TrackingActions, TrackingLabels } from '../constants';
 
 export default {
   name: 'NpmInstallation',
@@ -34,41 +34,46 @@ export default {
     ),
   },
   trackingActions: { ...TrackingActions },
+  TrackingLabels,
 };
 </script>
 
 <template>
   <div>
     <h3 class="gl-font-lg">{{ __('Installation') }}</h3>
-    <h4 class="gl-font-base">{{ s__('PackageRegistry|npm command') }}</h4>
 
     <code-instruction
+      :label="s__('PackageRegistry|npm command')"
       :instruction="npmCommand"
       :copy-text="s__('PackageRegistry|Copy npm command')"
       :tracking-action="$options.trackingActions.COPY_NPM_INSTALL_COMMAND"
+      :tracking-label="$options.TrackingLabels.CODE_INSTRUCTION"
     />
 
-    <h4 class="gl-font-base">{{ s__('PackageRegistry|yarn command') }}</h4>
     <code-instruction
+      :label="s__('PackageRegistry|yarn command')"
       :instruction="yarnCommand"
       :copy-text="s__('PackageRegistry|Copy yarn command')"
       :tracking-action="$options.trackingActions.COPY_YARN_INSTALL_COMMAND"
+      :tracking-label="$options.TrackingLabels.CODE_INSTRUCTION"
     />
 
     <h3 class="gl-font-lg">{{ __('Registry setup') }}</h3>
 
-    <h4 class="gl-font-base">{{ s__('PackageRegistry|npm command') }}</h4>
     <code-instruction
+      :label="s__('PackageRegistry|npm command')"
       :instruction="npmSetup"
       :copy-text="s__('PackageRegistry|Copy npm setup command')"
       :tracking-action="$options.trackingActions.COPY_NPM_SETUP_COMMAND"
+      :tracking-label="$options.TrackingLabels.CODE_INSTRUCTION"
     />
 
-    <h4 class="gl-font-base">{{ s__('PackageRegistry|yarn command') }}</h4>
     <code-instruction
+      :label="s__('PackageRegistry|yarn command')"
       :instruction="yarnSetupCommand"
       :copy-text="s__('PackageRegistry|Copy yarn setup command')"
       :tracking-action="$options.trackingActions.COPY_YARN_SETUP_COMMAND"
+      :tracking-label="$options.TrackingLabels.CODE_INSTRUCTION"
     />
 
     <gl-sprintf :message="$options.i18n.helpText">

app/assets/javascripts/packages/details/components/nuget_installation.vue

@@ -2,8 +2,8 @@
 import { GlLink, GlSprintf } from '@gitlab/ui';
 import { mapGetters, mapState } from 'vuex';
 import { s__ } from '~/locale';
-import CodeInstruction from './code_instruction.vue';
-import { TrackingActions } from '../constants';
+import CodeInstruction from '~/vue_shared/components/registry/code_instruction.vue';
+import { TrackingActions, TrackingLabels } from '../constants';
 
 export default {
   name: 'NugetInstallation',
@@ -22,29 +22,28 @@ export default {
     ),
   },
   trackingActions: { ...TrackingActions },
+  TrackingLabels,
 };
 </script>
 
 <template>
   <div>
     <h3 class="gl-font-lg">{{ __('Installation') }}</h3>
-    <h4 class="gl-font-base">
-      {{ s__('PackageRegistry|NuGet Command') }}
-    </h4>
     <code-instruction
+      :label="s__('PackageRegistry|NuGet Command')"
       :instruction="nugetInstallationCommand"
       :copy-text="s__('PackageRegistry|Copy NuGet Command')"
       :tracking-action="$options.trackingActions.COPY_NUGET_INSTALL_COMMAND"
+      :tracking-label="$options.TrackingLabels.CODE_INSTRUCTION"
     />
     <h3 class="gl-font-lg">{{ __('Registry setup') }}</h3>
-    <h4 class="gl-font-base">
-      {{ s__('PackageRegistry|Add NuGet Source') }}
-    </h4>
 
     <code-instruction
+      :label="s__('PackageRegistry|Add NuGet Source')"
       :instruction="nugetSetupCommand"
       :copy-text="s__('PackageRegistry|Copy NuGet Setup Command')"
       :tracking-action="$options.trackingActions.COPY_NUGET_SETUP_COMMAND"
+      :tracking-label="$options.TrackingLabels.CODE_INSTRUCTION"
     />
     <gl-sprintf :message="$options.i18n.helpText">
       <template #link="{ content }">

app/assets/javascripts/packages/details/components/pypi_installation.vue

@@ -2,8 +2,8 @@
 import { GlLink, GlSprintf } from '@gitlab/ui';
 import { mapGetters, mapState } from 'vuex';
 import { s__ } from '~/locale';
-import CodeInstruction from './code_instruction.vue';
-import { TrackingActions } from '../constants';
+import CodeInstruction from '~/vue_shared/components/registry/code_instruction.vue';
+import { TrackingActions, TrackingLabels } from '../constants';
 
 export default {
   name: 'PyPiInstallation',
@@ -25,6 +25,7 @@ export default {
     ),
   },
   trackingActions: { ...TrackingActions },
+  TrackingLabels,
 };
 </script>
 
@@ -32,15 +33,13 @@ export default {
   <div>
     <h3 class="gl-font-lg">{{ __('Installation') }}</h3>
 
-    <h4 class="gl-font-base">
-      {{ s__('PackageRegistry|Pip Command') }}
-    </h4>
-
     <code-instruction
+      :label="s__('PackageRegistry|Pip Command')"
       :instruction="pypiPipCommand"
       :copy-text="s__('PackageRegistry|Copy Pip command')"
       data-testid="pip-command"
       :tracking-action="$options.trackingActions.COPY_PIP_INSTALL_COMMAND"
+      :tracking-label="$options.TrackingLabels.CODE_INSTRUCTION"
     />
 
     <h3 class="gl-font-lg">{{ __('Registry setup') }}</h3>
@@ -58,6 +57,7 @@ export default {
       data-testid="pypi-setup-content"
       multiline
       :tracking-action="$options.trackingActions.COPY_PYPI_SETUP_COMMAND"
+      :tracking-label="$options.TrackingLabels.CODE_INSTRUCTION"
     />
     <gl-sprintf :message="$options.i18n.helpText">
       <template #link="{ content }">

app/assets/javascripts/registry/explorer/components/list_page/cli_commands.vue

 <script>
-import { GlDeprecatedDropdown, GlFormGroup, GlFormInputGroup } from '@gitlab/ui';
+import { GlDeprecatedDropdown } from '@gitlab/ui';
 import { mapGetters } from 'vuex';
 import Tracking from '~/tracking';
-import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
+import CodeInstruction from '~/vue_shared/components/registry/code_instruction.vue';
 import {
   QUICK_START,
   LOGIN_COMMAND_LABEL,
@@ -13,22 +13,23 @@ import {
   COPY_PUSH_TITLE,
 } from '../../constants/index';
 
+const trackingLabel = 'quickstart_dropdown';
+
 export default {
   components: {
     GlDeprecatedDropdown,
-    GlFormGroup,
-    GlFormInputGroup,
-    ClipboardButton,
+    CodeInstruction,
   },
-  mixins: [Tracking.mixin({ label: 'quickstart_dropdown' })],
+  mixins: [Tracking.mixin({ label: trackingLabel })],
+  trackingLabel,
   i18n: {
-    dropdownTitle: QUICK_START,
-    loginCommandLabel: LOGIN_COMMAND_LABEL,
-    copyLoginTitle: COPY_LOGIN_TITLE,
-    buildCommandLabel: BUILD_COMMAND_LABEL,
-    copyBuildTitle: COPY_BUILD_TITLE,
-    pushCommandLabel: PUSH_COMMAND_LABEL,
-    copyPushTitle: COPY_PUSH_TITLE,
+    QUICK_START,
+    LOGIN_COMMAND_LABEL,
+    COPY_LOGIN_TITLE,
+    BUILD_COMMAND_LABEL,
+    COPY_BUILD_TITLE,
+    PUSH_COMMAND_LABEL,
+    COPY_PUSH_TITLE,
   },
   computed: {
     ...mapGetters(['dockerBuildCommand', 'dockerPushCommand', 'dockerLoginCommand']),
@@ -37,7 +38,7 @@ export default {
 </script>
 <template>
   <gl-deprecated-dropdown
-    :text="$options.i18n.dropdownTitle"
+    :text="$options.i18n.QUICK_START"
     variant="primary"
     size="sm"
     right
@@ -45,59 +46,30 @@ export default {
   >
     <!-- This li is used as a container since gl-dropdown produces a root ul, this mimics the functionality exposed by b-dropdown-form -->
     <li role="presentation" class="px-2 py-1 dropdown-menu-large">
-      <form>
-        <gl-form-group
-          label-size="sm"
-          label-for="docker-login-btn"
-          :label="$options.i18n.loginCommandLabel"
-        >
-          <gl-form-input-group id="docker-login-btn" :value="dockerLoginCommand" readonly>
-            <template #append>
-              <clipboard-button
-                class="border"
-                :text="dockerLoginCommand"
-                :title="$options.i18n.copyLoginTitle"
-                @click.native="track('click_copy_login')"
-              />
-            </template>
-          </gl-form-input-group>
-        </gl-form-group>
+      <code-instruction
+        :label="$options.i18n.LOGIN_COMMAND_LABEL"
+        :instruction="dockerLoginCommand"
+        :copy-text="$options.i18n.COPY_LOGIN_TITLE"
+        tracking-action="click_copy_login"
+        :tracking-label="$options.trackingLabel"
+      />
 
-        <gl-form-group
-          label-size="sm"
-          label-for="docker-build-btn"
-          :label="$options.i18n.buildCommandLabel"
-        >
-          <gl-form-input-group id="docker-build-btn" :value="dockerBuildCommand" readonly>
-            <template #append>
-              <clipboard-button
-                class="border"
-                :text="dockerBuildCommand"
-                :title="$options.i18n.copyBuildTitle"
-                @click.native="track('click_copy_build')"
-              />
-            </template>
-          </gl-form-input-group>
-        </gl-form-group>
+      <code-instruction
+        :label="$options.i18n.BUILD_COMMAND_LABEL"
+        :instruction="dockerBuildCommand"
+        :copy-text="$options.i18n.COPY_BUILD_TITLE"
+        tracking-action="click_copy_build"
+        :tracking-label="$options.trackingLabel"
+      />
 
-        <gl-form-group
-          class="mb-0"
-          label-size="sm"
-          label-for="docker-push-btn"
-          :label="$options.i18n.pushCommandLabel"
-        >
-          <gl-form-input-group id="docker-push-btn" :value="dockerPushCommand" readonly>
-            <template #append>
-              <clipboard-button
-                class="border"
-                :text="dockerPushCommand"
-                :title="$options.i18n.copyPushTitle"
-                @click.native="track('click_copy_push')"
-              />
-            </template>
-          </gl-form-input-group>
-        </gl-form-group>
-      </form>
+      <code-instruction
+        class="mb-0"
+        :label="$options.i18n.PUSH_COMMAND_LABEL"
+        :instruction="dockerPushCommand"
+        :copy-text="$options.i18n.COPY_PUSH_TITLE"
+        tracking-action="click_copy_push"
+        :tracking-label="$options.trackingLabel"
+      />
     </li>
   </gl-deprecated-dropdown>
 </template>

app/assets/javascripts/packages/details/components/code_instruction.vue → app/assets/javascripts/vue_shared/components/registry/code_instruction.vue

 <script>
+import { uniqueId } from 'lodash';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import Tracking from '~/tracking';
-import { TrackingLabels } from '../constants';
 
 export default {
   name: 'CodeInstruction',
   components: {
     ClipboardButton,
   },
-  mixins: [
-    Tracking.mixin({
-      label: TrackingLabels.CODE_INSTRUCTION,
-    }),
-  ],
+  mixins: [Tracking.mixin()],
   props: {
+    label: {
+      type: String,
+      required: false,
+      default: '',
+    },
     instruction: {
       type: String,
       required: true,
@@ -32,32 +33,50 @@ export default {
       required: false,
       default: '',
     },
+    trackingLabel: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  created() {
+    this.uniqueId = uniqueId();
   },
   methods: {
     trackCopy() {
       if (this.trackingAction) {
-        this.track(this.trackingAction);
+        this.track(this.trackingAction, { label: this.trackingLabel });
       }
     },
+    generateFormId(name) {
+      return `${name}_${this.uniqueId}`;
+    },
   },
 };
 </script>
 
 <template>
-  <div v-if="!multiline" class="input-group gl-mb-3">
-    <input
-      :value="instruction"
-      type="text"
-      class="form-control gl-font-monospace js-instruction-input"
-      readonly
-      @copy="trackCopy"
-    />
-    <span class="input-group-append js-instruction-button" @click="trackCopy">
-      <clipboard-button :text="instruction" :title="copyText" class="input-group-text" />
-    </span>
+  <div v-if="!multiline" class="gl-mb-3">
+    <label v-if="label" :for="generateFormId('instruction-input')">{{ label }}</label>
+    <div class="input-group gl-mb-3">
+      <input
+        :id="generateFormId('instruction-input')"
+        :value="instruction"
+        type="text"
+        class="form-control gl-font-monospace"
+        data-testid="instruction-input"
+        readonly
+        @copy="trackCopy"
+      />
+      <span class="input-group-append" data-testid="instruction-button" @click="trackCopy">
+        <clipboard-button :text="instruction" :title="copyText" class="input-group-text" />
+      </span>
+    </div>
   </div>
 
   <div v-else>
-    <pre class="js-instruction-pre" @copy="trackCopy">{{ instruction }}</pre>
+    <pre class="gl-font-monospace" data-testid="multiline-instruction" @copy="trackCopy">{{
+      instruction
+    }}</pre>
   </div>
 </template>

spec/frontend/packages/details/components/__snapshots__/code_instruction_spec.js.snap

-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Package code instruction multiline to match the snapshot 1`] = `
-<div>
-  <pre
-    class="js-instruction-pre"
-  >
-    this is some
-multiline text
-  </pre>
-</div>
-`;
-
-exports[`Package code instruction single line to match the default snapshot 1`] = `
-<div
-  class="input-group gl-mb-3"
->
-  <input
-    class="form-control gl-font-monospace js-instruction-input"
-    readonly="readonly"
-    type="text"
-  />
-   
-  <span
-    class="input-group-append js-instruction-button"
-  >
-    <button
-      class="btn input-group-text btn-secondary btn-md btn-default"
-      data-clipboard-text="npm i @my-package"
-      title="Copy npm install command"
-      type="button"
-    >
-      <!---->
-       
-      <svg
-        class="gl-icon s16"
-        data-testid="copy-to-clipboard-icon"
-      >
-        <use
-          href="#copy-to-clipboard"
-        />
-      </svg>
-    </button>
-  </span>
-</div>
-`;

spec/frontend/packages/details/components/__snapshots__/conan_installation_spec.js.snap

@@ -8,18 +8,12 @@ exports[`ConanInstallation renders all the messages 1`] = `
     Installation
   </h3>
    
-  <h4
-    class="gl-font-base"
-  >
-    
-    Conan Command
-  
-  </h4>
-   
   <code-instruction-stub
     copytext="Copy Conan Command"
     instruction="foo/command"
+    label="Conan Command"
     trackingaction="copy_conan_command"
+    trackinglabel="code_instruction"
   />
    
   <h3
@@ -28,18 +22,12 @@ exports[`ConanInstallation renders all the messages 1`] = `
     Registry setup
   </h3>
    
-  <h4
-    class="gl-font-base"
-  >
-    
-    Add Conan Remote
-  
-  </h4>
-   
   <code-instruction-stub
     copytext="Copy Conan Setup Command"
     instruction="foo/setup"
+    label="Add Conan Remote"
     trackingaction="copy_conan_setup_command"
+    trackinglabel="code_instruction"
   />
    
   <gl-sprintf-stub

spec/frontend/packages/details/components/__snapshots__/maven_installation_spec.js.snap

@@ -8,14 +8,6 @@ exports[`MavenInstallation renders all the messages 1`] = `
     Installation
   </h3>
    
-  <h4
-    class="gl-font-base"
-  >
-    
-    Maven XML
-  
-  </h4>
-   
   <p>
     <gl-sprintf-stub
       message="Copy and paste this inside your %{codeStart}pom.xml%{codeEnd} %{codeStart}dependencies%{codeEnd} block."
@@ -25,22 +17,18 @@ exports[`MavenInstallation renders all the messages 1`] = `
   <code-instruction-stub
     copytext="Copy Maven XML"
     instruction="foo/xml"
+    label="Maven XML"
     multiline="true"
     trackingaction="copy_maven_xml"
+    trackinglabel="code_instruction"
   />
    
-  <h4
-    class="gl-font-base"
-  >
-    
-    Maven Command
-  
-  </h4>
-   
   <code-instruction-stub
     copytext="Copy Maven command"
     instruction="foo/command"
+    label="Maven Command"
     trackingaction="copy_maven_command"
+    trackinglabel="code_instruction"
   />
    
   <h3
@@ -58,8 +46,10 @@ exports[`MavenInstallation renders all the messages 1`] = `
   <code-instruction-stub
     copytext="Copy Maven registry XML"
     instruction="foo/setup"
+    label=""
     multiline="true"
     trackingaction="copy_maven_setup_xml"
+    trackinglabel="code_instruction"
   />
    
   <gl-sprintf-stub

spec/frontend/packages/details/components/__snapshots__/npm_installation_spec.js.snap

@@ -8,28 +8,20 @@ exports[`NpmInstallation renders all the messages 1`] = `
     Installation
   </h3>
    
-  <h4
-    class="gl-font-base"
-  >
-    npm command
-  </h4>
-   
   <code-instruction-stub
     copytext="Copy npm command"
     instruction="npm i @Test/package"
+    label="npm command"
     trackingaction="copy_npm_install_command"
+    trackinglabel="code_instruction"
   />
    
-  <h4
-    class="gl-font-base"
-  >
-    yarn command
-  </h4>
-   
   <code-instruction-stub
     copytext="Copy yarn command"
     instruction="yarn add @Test/package"
+    label="yarn command"
     trackingaction="copy_yarn_install_command"
+    trackinglabel="code_instruction"
   />
    
   <h3
@@ -38,28 +30,20 @@ exports[`NpmInstallation renders all the messages 1`] = `
     Registry setup
   </h3>
    
-  <h4
-    class="gl-font-base"
-  >
-    npm command
-  </h4>
-   
   <code-instruction-stub
     copytext="Copy npm setup command"
     instruction="echo @Test:registry=undefined >> .npmrc"
+    label="npm command"
     trackingaction="copy_npm_setup_command"
+    trackinglabel="code_instruction"
   />
    
-  <h4
-    class="gl-font-base"
-  >
-    yarn command
-  </h4>
-   
   <code-instruction-stub
     copytext="Copy yarn setup command"
     instruction="echo \\\\\\"@Test:registry\\\\\\" \\\\\\"undefined\\\\\\" >> .yarnrc"
+    label="yarn command"
     trackingaction="copy_yarn_setup_command"
+    trackinglabel="code_instruction"
   />
    
   <gl-sprintf-stub

spec/frontend/packages/details/components/__snapshots__/nuget_installation_spec.js.snap

@@ -8,18 +8,12 @@ exports[`NugetInstallation renders all the messages 1`] = `
     Installation
   </h3>
    
-  <h4
-    class="gl-font-base"
-  >
-    
-    NuGet Command
-  
-  </h4>
-   
   <code-instruction-stub
     copytext="Copy NuGet Command"
     instruction="foo/command"
+    label="NuGet Command"
     trackingaction="copy_nuget_install_command"
+    trackinglabel="code_instruction"
   />
    
   <h3
@@ -28,18 +22,12 @@ exports[`NugetInstallation renders all the messages 1`] = `
     Registry setup
   </h3>
    
-  <h4
-    class="gl-font-base"
-  >
-    
-    Add NuGet Source
-  
-  </h4>
-   
   <code-instruction-stub
     copytext="Copy NuGet Setup Command"
     instruction="foo/setup"
+    label="Add NuGet Source"
     trackingaction="copy_nuget_setup_command"
+    trackinglabel="code_instruction"
   />
    
   <gl-sprintf-stub

spec/frontend/packages/details/components/__snapshots__/pypi_installation_spec.js.snap

@@ -8,19 +8,13 @@ exports[`PypiInstallation renders all the messages 1`] = `
     Installation
   </h3>
    
-  <h4
-    class="gl-font-base"
-  >
-    
-    Pip Command
-  
-  </h4>
-   
   <code-instruction-stub
     copytext="Copy Pip command"
     data-testid="pip-command"
     instruction="pip install"
+    label="Pip Command"
     trackingaction="copy_pip_install_command"
+    trackinglabel="code_instruction"
   />
    
   <h3
@@ -39,8 +33,10 @@ exports[`PypiInstallation renders all the messages 1`] = `
     copytext="Copy .pypirc content"
     data-testid="pypi-setup-content"
     instruction="python setup"
+    label=""
     multiline="true"
     trackingaction="copy_pypi_setup_command"
+    trackinglabel="code_instruction"
   />
    
   <gl-sprintf-stub

spec/frontend/packages/details/components/composer_installation_spec.js

@@ -4,7 +4,7 @@ import { GlSprintf, GlLink } from '@gitlab/ui';
 import { registryUrl as composerHelpPath } from 'jest/packages/details/mock_data';
 import { composerPackage as packageEntity } from 'jest/packages/mock_data';
 import ComposerInstallation from '~/packages/details/components/composer_installation.vue';
-import CodeInstructions from '~/packages/details/components/code_instruction.vue';
+
 import { TrackingActions } from '~/packages/details/constants';
 
 const localVue = createLocalVue();
@@ -27,9 +27,8 @@ describe('ComposerInstallation', () => {
     },
   });
 
-  const findCodeInstructions = () => wrapper.findAll(CodeInstructions);
-  const findRegistryIncludeTitle = () => wrapper.find('[data-testid="registry-include-title"]');
-  const findPackageIncludeTitle = () => wrapper.find('[data-testid="package-include-title"]');
+  const findRegistryInclude = () => wrapper.find('[data-testid="registry-include"]');
+  const findPackageInclude = () => wrapper.find('[data-testid="package-include"]');
   const findHelpText = () => wrapper.find('[data-testid="help-text"]');
   const findHelpLink = () => wrapper.find(GlLink);
 
@@ -53,7 +52,7 @@ describe('ComposerInstallation', () => {
 
   describe('registry include command', () => {
     it('uses code_instructions', () => {
-      const registryIncludeCommand = findCodeInstructions().at(0);
+      const registryIncludeCommand = findRegistryInclude();
       expect(registryIncludeCommand.exists()).toBe(true);
       expect(registryIncludeCommand.props()).toMatchObject({
         instruction: composerRegistryIncludeStr,
@@ -63,13 +62,13 @@ describe('ComposerInstallation', () => {
     });
 
     it('has the correct title', () => {
-      expect(findRegistryIncludeTitle().text()).toBe('composer.json registry include');
+      expect(findRegistryInclude().props('label')).toBe('composer.json registry include');
     });
   });
 
   describe('package include command', () => {
     it('uses code_instructions', () => {
-      const registryIncludeCommand = findCodeInstructions().at(1);
+      const registryIncludeCommand = findPackageInclude();
       expect(registryIncludeCommand.exists()).toBe(true);
       expect(registryIncludeCommand.props()).toMatchObject({
         instruction: composerPackageIncludeStr,
@@ -79,7 +78,7 @@ describe('ComposerInstallation', () => {
     });
 
     it('has the correct title', () => {
-      expect(findPackageIncludeTitle().text()).toBe('composer.json require package include');
+      expect(findPackageInclude().props('label')).toBe('composer.json require package include');
     });
 
     it('has the correct help text', () => {

spec/frontend/packages/details/components/conan_installation_spec.js

 import Vuex from 'vuex';
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import ConanInstallation from '~/packages/details/components/conan_installation.vue';
-import CodeInstructions from '~/packages/details/components/code_instruction.vue';
+import CodeInstructions from '~/vue_shared/components/registry/code_instruction.vue';
 import { conanPackage as packageEntity } from '../../mock_data';
 import { registryUrl as conanPath } from '../mock_data';
 

spec/frontend/packages/details/components/maven_installation_spec.js

@@ -3,7 +3,7 @@ import { shallowMount, createLocalVue } from '@vue/test-utils';
 import { registryUrl as mavenPath } from 'jest/packages/details/mock_data';
 import { mavenPackage as packageEntity } from 'jest/packages/mock_data';
 import MavenInstallation from '~/packages/details/components/maven_installation.vue';
-import CodeInstructions from '~/packages/details/components/code_instruction.vue';
+import CodeInstructions from '~/vue_shared/components/registry/code_instruction.vue';
 import { TrackingActions } from '~/packages/details/constants';
 
 const localVue = createLocalVue();

spec/frontend/packages/details/components/npm_installation_spec.js

@@ -3,7 +3,7 @@ import { shallowMount, createLocalVue } from '@vue/test-utils';
 import { npmPackage as packageEntity } from 'jest/packages/mock_data';
 import { registryUrl as nugetPath } from 'jest/packages/details/mock_data';
 import NpmInstallation from '~/packages/details/components/npm_installation.vue';
-import CodeInstructions from '~/packages/details/components/code_instruction.vue';
+import CodeInstructions from '~/vue_shared/components/registry/code_instruction.vue';
 import { TrackingActions } from '~/packages/details/constants';
 import { npmInstallationCommand, npmSetupCommand } from '~/packages/details/store/getters';
 

spec/frontend/packages/details/components/nuget_installation_spec.js

@@ -3,7 +3,7 @@ import { shallowMount, createLocalVue } from '@vue/test-utils';
 import { nugetPackage as packageEntity } from 'jest/packages/mock_data';
 import { registryUrl as nugetPath } from 'jest/packages/details/mock_data';
 import NugetInstallation from '~/packages/details/components/nuget_installation.vue';
-import CodeInstructions from '~/packages/details/components/code_instruction.vue';
+import CodeInstructions from '~/vue_shared/components/registry/code_instruction.vue';
 import { TrackingActions } from '~/packages/details/constants';
 
 const localVue = createLocalVue();

spec/frontend/registry/explorer/components/list_page/cli_commands_spec.js

 import Vuex from 'vuex';
 import { mount, createLocalVue } from '@vue/test-utils';
-import { GlDeprecatedDropdown, GlFormGroup, GlFormInputGroup } from '@gitlab/ui';
+import { GlDeprecatedDropdown } from '@gitlab/ui';
 import Tracking from '~/tracking';
 import * as getters from '~/registry/explorer/stores/getters';
 import QuickstartDropdown from '~/registry/explorer/components/list_page/cli_commands.vue';
-import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
+import CodeInstruction from '~/vue_shared/components/registry/code_instruction.vue';
 
 import {
   QUICK_START,
@@ -24,7 +24,7 @@ describe('cli_commands', () => {
   let store;
 
   const findDropdownButton = () => wrapper.find(GlDeprecatedDropdown);
-  const findFormGroups = () => wrapper.findAll(GlFormGroup);
+  const findCodeInstruction = () => wrapper.findAll(CodeInstruction);
 
   const mountComponent = () => {
     store = new Vuex.Store({
@@ -67,54 +67,29 @@ describe('cli_commands', () => {
   });
 
   describe.each`
-    index | id                    | labelText              | titleText           | getter                  | trackedEvent
-    ${0}  | ${'docker-login-btn'} | ${LOGIN_COMMAND_LABEL} | ${COPY_LOGIN_TITLE} | ${'dockerLoginCommand'} | ${'click_copy_login'}
-    ${1}  | ${'docker-build-btn'} | ${BUILD_COMMAND_LABEL} | ${COPY_BUILD_TITLE} | ${'dockerBuildCommand'} | ${'click_copy_build'}
-    ${2}  | ${'docker-push-btn'}  | ${PUSH_COMMAND_LABEL}  | ${COPY_PUSH_TITLE}  | ${'dockerPushCommand'}  | ${'click_copy_push'}
-  `('form group at $index', ({ index, id, labelText, titleText, getter, trackedEvent }) => {
-    let formGroup;
-
-    const findFormInputGroup = parent => parent.find(GlFormInputGroup);
-    const findClipboardButton = parent => parent.find(ClipboardButton);
+    index | labelText              | titleText           | getter                  | trackedEvent
+    ${0}  | ${LOGIN_COMMAND_LABEL} | ${COPY_LOGIN_TITLE} | ${'dockerLoginCommand'} | ${'click_copy_login'}
+    ${1}  | ${BUILD_COMMAND_LABEL} | ${COPY_BUILD_TITLE} | ${'dockerBuildCommand'} | ${'click_copy_build'}
+    ${2}  | ${PUSH_COMMAND_LABEL}  | ${COPY_PUSH_TITLE}  | ${'dockerPushCommand'}  | ${'click_copy_push'}
+  `('code instructions at $index', ({ index, labelText, titleText, getter, trackedEvent }) => {
+    let codeInstruction;
 
     beforeEach(() => {
-      formGroup = findFormGroups().at(index);
+      codeInstruction = findCodeInstruction().at(index);
     });
 
     it('exists', () => {
-      expect(formGroup.exists()).toBe(true);
-    });
-
-    it(`has a label ${labelText}`, () => {
-      expect(formGroup.text()).toBe(labelText);
-    });
-
-    it(`contains a form input group with ${id} id and with value equal to ${getter} getter`, () => {
-      const formInputGroup = findFormInputGroup(formGroup);
-      expect(formInputGroup.exists()).toBe(true);
-      expect(formInputGroup.attributes('id')).toBe(id);
-      expect(formInputGroup.props('value')).toBe(store.getters[getter]);
-    });
-
-    it(`contains a clipboard button with title of ${titleText} and text equal to ${getter} getter`, () => {
-      const clipBoardButton = findClipboardButton(formGroup);
-      expect(clipBoardButton.exists()).toBe(true);
-      expect(clipBoardButton.props('title')).toBe(titleText);
-      expect(clipBoardButton.props('text')).toBe(store.getters[getter]);
+      expect(codeInstruction.exists()).toBe(true);
     });
 
-    it('clipboard button tracks click event', () => {
-      const clipBoardButton = findClipboardButton(formGroup);
-      clipBoardButton.trigger('click');
-      /* This expect to be called with first argument undefined so that
-       * the function internally can default to document.body.dataset.page
-       * https://docs.gitlab.com/ee/telemetry/frontend.html#tracking-within-vue-components
-       */
-      expect(Tracking.event).toHaveBeenCalledWith(
-        undefined,
-        trackedEvent,
-        expect.objectContaining({ label: 'quickstart_dropdown' }),
-      );
+    it(`has the correct props`, () => {
+      expect(codeInstruction.props()).toMatchObject({
+        label: labelText,
+        instruction: store.getters[getter],
+        copyText: titleText,
+        trackingAction: trackedEvent,
+        trackingLabel: 'quickstart_dropdown',
+      });
     });
   });
 });

spec/frontend/vue_shared/components/registry/__snapshots__/code_instruction_spec.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Package code instruction multiline to match the snapshot 1`] = `
+<div>
+  <pre
+    class="gl-font-monospace"
+    data-testid="multiline-instruction"
+  >
+    this is some
+multiline text
+  </pre>
+</div>
+`;
+
+exports[`Package code instruction single line to match the default snapshot 1`] = `
+<div
+  class="gl-mb-3"
+>
+  <label
+    for="instruction-input_2"
+  >
+    foo_label
+  </label>
+   
+  <div
+    class="input-group gl-mb-3"
+  >
+    <input
+      class="form-control gl-font-monospace"
+      data-testid="instruction-input"
+      id="instruction-input_2"
+      readonly="readonly"
+      type="text"
+    />
+     
+    <span
+      class="input-group-append"
+      data-testid="instruction-button"
+    >
+      <button
+        class="btn input-group-text btn-secondary btn-md btn-default"
+        data-clipboard-text="npm i @my-package"
+        title="Copy npm install command"
+        type="button"
+      >
+        <!---->
+         
+        <svg
+          class="gl-icon s16"
+          data-testid="copy-to-clipboard-icon"
+        >
+          <use
+            href="#copy-to-clipboard"
+          />
+        </svg>
+      </button>
+    </span>
+  </div>
+</div>
+`;

spec/frontend/packages/details/components/code_instruction_spec.js → spec/frontend/vue_shared/components/registry/code_instruction_spec.js

 import { mount } from '@vue/test-utils';
-import CodeInstruction from '~/packages/details/components/code_instruction.vue';
-import { TrackingLabels } from '~/packages/details/constants';
 import Tracking from '~/tracking';
+import CodeInstruction from '~/vue_shared/components/registry/code_instruction.vue';
+import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 
 describe('Package code instruction', () => {
   let wrapper;
@@ -20,16 +20,20 @@ describe('Package code instruction', () => {
     });
   }
 
-  const findInstructionInput = () => wrapper.find('.js-instruction-input');
-  const findInstructionPre = () => wrapper.find('.js-instruction-pre');
-  const findInstructionButton = () => wrapper.find('.js-instruction-button');
+  const findCopyButton = () => wrapper.find(ClipboardButton);
+  const findInputElement = () => wrapper.find('[data-testid="instruction-input"]');
+  const findMultilineInstruction = () => wrapper.find('[data-testid="multiline-instruction"]');
 
   afterEach(() => {
     wrapper.destroy();
   });
 
   describe('single line', () => {
-    beforeEach(() => createComponent());
+    beforeEach(() =>
+      createComponent({
+        label: 'foo_label',
+      }),
+    );
 
     it('to match the default snapshot', () => {
       expect(wrapper.element).toMatchSnapshot();
@@ -41,6 +45,7 @@ describe('Package code instruction', () => {
       createComponent({
         instruction: 'this is some\nmultiline text',
         copyText: 'Copy the command',
+        label: 'foo_label',
         multiline: true,
       }),
     );
@@ -53,7 +58,7 @@ describe('Package code instruction', () => {
   describe('tracking', () => {
     let eventSpy;
     const trackingAction = 'test_action';
-    const label = TrackingLabels.CODE_INSTRUCTION;
+    const trackingLabel = 'foo_label';
 
     beforeEach(() => {
       eventSpy = jest.spyOn(Tracking, 'event');
@@ -61,7 +66,7 @@ describe('Package code instruction', () => {
 
     it('should not track when no trackingAction is provided', () => {
       createComponent();
-      findInstructionButton().trigger('click');
+      findCopyButton().trigger('click');
 
       expect(eventSpy).toHaveBeenCalledTimes(0);
     });
@@ -70,22 +75,23 @@ describe('Package code instruction', () => {
       beforeEach(() =>
         createComponent({
           trackingAction,
+          trackingLabel,
         }),
       );
 
       it('should track when copying from the input', () => {
-        findInstructionInput().trigger('copy');
+        findInputElement().trigger('copy');
 
         expect(eventSpy).toHaveBeenCalledWith(undefined, trackingAction, {
-          label,
+          label: trackingLabel,
         });
       });
 
       it('should track when the copy button is pressed', () => {
-        findInstructionButton().trigger('click');
+        findCopyButton().trigger('click');
 
         expect(eventSpy).toHaveBeenCalledWith(undefined, trackingAction, {
-          label,
+          label: trackingLabel,
         });
       });
     });
@@ -94,15 +100,16 @@ describe('Package code instruction', () => {
       beforeEach(() =>
         createComponent({
           trackingAction,
+          trackingLabel,
           multiline: true,
         }),
       );
 
       it('should track when copying from the multiline pre element', () => {
-        findInstructionPre().trigger('copy');
+        findMultilineInstruction().trigger('copy');
 
         expect(eventSpy).toHaveBeenCalledWith(undefined, trackingAction, {
-          label,
+          label: trackingLabel,
         });
       });
     });