Update installation components

- conan
- maven
- npm
- nuget
- pipy

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

@@ -42,7 +42,7 @@ export default {
 
 <template>
   <div v-if="showMetadata">
-    <h3 class="gl-font-lg gl-mt-5" data-testid="title">{{ __('Additional Metadata') }}</h3>
+    <h3 class="gl-font-lg" data-testid="title">{{ __('Additional Metadata') }}</h3>
 
     <div class="gl-bg-gray-50 gl-inset-border-1-gray-100 gl-rounded-base" data-testid="main">
       <template v-if="packageEntity.nuget_metadatum">

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

@@ -31,18 +31,19 @@ export default {
 
 <template>
   <div>
-    <p class="gl-mt-3 gl-font-weight-bold" data-testid="registry-include-title">
+    <h3 class="gl-font-lg">{{ __('Installation') }}</h3>
+    <h4 class="gl-font-base" data-testid="registry-include-title">
       {{ $options.i18n.registryInclude }}
-    </p>
+    </h4>
+
     <code-instruction
       :instruction="composerRegistryInclude"
       :copy-text="$options.i18n.copyRegistryInclude"
       :tracking-action="$options.trackingActions.COPY_COMPOSER_REGISTRY_INCLUDE_COMMAND"
     />
-
-    <p class="gl-mt-3 gl-font-weight-bold" data-testid="package-include-title">
+    <h4 class="gl-font-base" data-testid="package-include-title">
       {{ $options.i18n.packageInclude }}
-    </p>
+    </h4>
     <code-instruction
       :instruction="composerPackageInclude"
       :copy-text="$options.i18n.copyPackageInclude"

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

@@ -2,9 +2,8 @@
 import { GlLink, GlSprintf } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import CodeInstruction from './code_instruction.vue';
-import { TrackingActions, TrackingLabels } from '../constants';
+import { TrackingActions } from '../constants';
 import { mapGetters, mapState } from 'vuex';
-import InstallationTabs from './installation_tabs.vue';
 
 export default {
   name: 'ConanInstallation',
@@ -12,7 +11,6 @@ export default {
     CodeInstruction,
     GlLink,
     GlSprintf,
-    InstallationTabs,
   },
   computed: {
     ...mapState(['conanHelpPath']),
@@ -24,30 +22,29 @@ export default {
     ),
   },
   trackingActions: { ...TrackingActions },
-  trackingLabel: TrackingLabels.CONAN_INSTALLATION,
 };
 </script>
 
 <template>
-  <installation-tabs :tracking-label="$options.trackingLabel">
-    <template #installation>
-      <p class="gl-mt-3 font-weight-bold">{{ s__('PackageRegistry|Conan Command') }}</p>
+  <div>
+    <h3 class="gl-font-lg">{{ __('Installation') }}</h3>
+    <h4 class="gl-font-base">
+      {{ s__('PackageRegistry|Conan Command') }}
+    </h4>
+
     <code-instruction
       :instruction="conanInstallationCommand"
       :copy-text="s__('PackageRegistry|Copy Conan Command')"
-        class="js-conan-command"
       :tracking-action="$options.trackingActions.COPY_CONAN_COMMAND"
     />
-    </template>
 
-    <template #setup>
-      <p class="gl-mt-3 font-weight-bold">
+    <h3 class="gl-font-lg">{{ __('Registry setup') }}</h3>
+    <h4 class="gl-font-base">
       {{ s__('PackageRegistry|Add Conan Remote') }}
-      </p>
+    </h4>
     <code-instruction
       :instruction="conanSetupCommand"
       :copy-text="s__('PackageRegistry|Copy Conan Setup Command')"
-        class="js-conan-setup"
       :tracking-action="$options.trackingActions.COPY_CONAN_SETUP_COMMAND"
     />
     <gl-sprintf :message="$options.i18n.helpText">
@@ -55,6 +52,5 @@ export default {
         <gl-link :href="conanHelpPath" target="_blank">{{ content }}</gl-link>
       </template>
     </gl-sprintf>
-    </template>
-  </installation-tabs>
+  </div>
 </template>

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

@@ -43,7 +43,6 @@ export default {
 
 <template>
   <div v-if="installationComponent">
-    <h3 class="gl-font-lg gl-mt-5" data-testid="title">{{ __('Installation Commands') }}</h3>
     <component
       :is="installationComponent"
       :name="packageEntity.name"

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

-<script>
-import Tracking from '~/tracking';
-import { trackInstallationTabChange } from '../utils';
-import { GlTab, GlTabs } from '@gitlab/ui';
-
-export default {
-  name: 'TabWrapper',
-  components: {
-    GlTab,
-    GlTabs,
-  },
-  mixins: [Tracking.mixin(), trackInstallationTabChange],
-  props: {
-    trackingLabel: {
-      type: String,
-      required: true,
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="gl-mb-3">
-    <gl-tabs @input="trackInstallationTabChange">
-      <gl-tab :title="s__('PackageRegistry|Installation')" title-item-class="js-installation-tab">
-        <div class="gl-ml-3 gl-mr-3">
-          <slot name="installation"></slot>
-        </div>
-      </gl-tab>
-      <gl-tab :title="s__('PackageRegistry|Registry Setup')" title-item-class="js-setup-tab">
-        <div class="gl-ml-3 gl-mr-3">
-          <slot name="setup"></slot>
-        </div>
-      </gl-tab>
-    </gl-tabs>
-  </div>
-</template>

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

@@ -2,9 +2,8 @@
 import { GlLink, GlSprintf } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import CodeInstruction from './code_instruction.vue';
-import { TrackingActions, TrackingLabels } from '../constants';
+import { TrackingActions } from '../constants';
 import { mapGetters, mapState } from 'vuex';
-import InstallationTabs from './installation_tabs.vue';
 
 export default {
   name: 'MavenInstallation',
@@ -12,7 +11,6 @@ export default {
     CodeInstruction,
     GlLink,
     GlSprintf,
-    InstallationTabs,
   },
   computed: {
     ...mapState(['mavenHelpPath']),
@@ -30,14 +28,16 @@ export default {
     ),
   },
   trackingActions: { ...TrackingActions },
-  trackingLabel: TrackingLabels.MAVEN_INSTALLATION,
 };
 </script>
 
 <template>
-  <installation-tabs :tracking-label="$options.trackingLabel">
-    <template #installation>
-      <p class="gl-mt-3 font-weight-bold">{{ s__('PackageRegistry|Maven XML') }}</p>
+  <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 }">
@@ -48,23 +48,20 @@ export default {
     <code-instruction
       :instruction="mavenInstallationXml"
       :copy-text="s__('PackageRegistry|Copy Maven XML')"
-        class="js-maven-xml"
       multiline
       :tracking-action="$options.trackingActions.COPY_MAVEN_XML"
     />
 
-      <p class="gl-mt-3 font-weight-bold">
+    <h4 class="gl-font-base">
       {{ s__('PackageRegistry|Maven Command') }}
-      </p>
+    </h4>
     <code-instruction
       :instruction="mavenInstallationCommand"
       :copy-text="s__('PackageRegistry|Copy Maven command')"
-        class="js-maven-command"
       :tracking-action="$options.trackingActions.COPY_MAVEN_COMMAND"
     />
-    </template>
 
-    <template #setup>
+    <h3 class="gl-font-lg">{{ __('Registry setup') }}</h3>
     <p>
       <gl-sprintf :message="$options.i18n.setupText">
         <template #code="{ content }">
@@ -75,7 +72,6 @@ export default {
     <code-instruction
       :instruction="mavenSetupXml"
       :copy-text="s__('PackageRegistry|Copy Maven registry XML')"
-        class="js-maven-setup-xml"
       multiline
       :tracking-action="$options.trackingActions.COPY_MAVEN_SETUP"
     />
@@ -84,6 +80,5 @@ export default {
         <gl-link :href="mavenHelpPath" target="_blank">{{ content }}</gl-link>
       </template>
     </gl-sprintf>
-    </template>
-  </installation-tabs>
+  </div>
 </template>

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

@@ -2,9 +2,8 @@
 import { GlLink, GlSprintf } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import CodeInstruction from './code_instruction.vue';
-import { NpmManager, TrackingActions, TrackingLabels } from '../constants';
+import { NpmManager, TrackingActions } from '../constants';
 import { mapGetters, mapState } from 'vuex';
-import InstallationTabs from './installation_tabs.vue';
 
 export default {
   name: 'NpmInstallation',
@@ -12,7 +11,6 @@ export default {
     CodeInstruction,
     GlLink,
     GlSprintf,
-    InstallationTabs,
   },
   computed: {
     ...mapState(['npmHelpPath']),
@@ -36,44 +34,40 @@ export default {
     ),
   },
   trackingActions: { ...TrackingActions },
-  trackingLabel: TrackingLabels.NPM_INSTALLATION,
 };
 </script>
 
 <template>
-  <installation-tabs :tracking-label="$options.trackingLabel">
-    <template #installation>
-      <p class="gl-mt-3 font-weight-bold">{{ s__('PackageRegistry|npm') }}</p>
+  <div>
+    <h3 class="gl-font-lg">{{ __('Installation') }}</h3>
+    <h4 class="gl-font-base">{{ s__('PackageRegistry|npm command') }}</h4>
+
     <code-instruction
       :instruction="npmCommand"
       :copy-text="s__('PackageRegistry|Copy npm command')"
-        class="js-npm-install"
       :tracking-action="$options.trackingActions.COPY_NPM_INSTALL_COMMAND"
     />
 
-      <p class="gl-mt-3 font-weight-bold">{{ s__('PackageRegistry|yarn') }}</p>
+    <h4 class="gl-font-base">{{ s__('PackageRegistry|yarn command') }}</h4>
     <code-instruction
       :instruction="yarnCommand"
       :copy-text="s__('PackageRegistry|Copy yarn command')"
-        class="js-yarn-install"
       :tracking-action="$options.trackingActions.COPY_YARN_INSTALL_COMMAND"
     />
-    </template>
 
-    <template #setup>
-      <p class="gl-mt-3 font-weight-bold">{{ s__('PackageRegistry|npm') }}</p>
+    <h3 class="gl-font-lg">{{ __('Registry setup') }}</h3>
+
+    <h4 class="gl-font-base">{{ s__('PackageRegistry|npm command') }}</h4>
     <code-instruction
       :instruction="npmSetup"
       :copy-text="s__('PackageRegistry|Copy npm setup command')"
-        class="js-npm-setup"
       :tracking-action="$options.trackingActions.COPY_NPM_SETUP_COMMAND"
     />
 
-      <p class="gl-mt-3 font-weight-bold">{{ s__('PackageRegistry|yarn') }}</p>
+    <h4 class="gl-font-base">{{ s__('PackageRegistry|yarn command') }}</h4>
     <code-instruction
       :instruction="yarnSetupCommand"
       :copy-text="s__('PackageRegistry|Copy yarn setup command')"
-        class="js-yarn-setup"
       :tracking-action="$options.trackingActions.COPY_YARN_SETUP_COMMAND"
     />
 
@@ -82,6 +76,5 @@ export default {
         <gl-link :href="npmHelpPath" target="_blank">{{ content }}</gl-link>
       </template>
     </gl-sprintf>
-    </template>
-  </installation-tabs>
+  </div>
 </template>

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

@@ -2,9 +2,8 @@
 import { GlLink, GlSprintf } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import CodeInstruction from './code_instruction.vue';
-import { TrackingActions, TrackingLabels } from '../constants';
+import { TrackingActions } from '../constants';
 import { mapGetters, mapState } from 'vuex';
-import InstallationTabs from './installation_tabs.vue';
 
 export default {
   name: 'NugetInstallation',
@@ -12,7 +11,6 @@ export default {
     CodeInstruction,
     GlLink,
     GlSprintf,
-    InstallationTabs,
   },
   computed: {
     ...mapState(['nugetHelpPath']),
@@ -24,30 +22,28 @@ export default {
     ),
   },
   trackingActions: { ...TrackingActions },
-  trackingLabel: TrackingLabels.NUGET_INSTALLATION,
 };
 </script>
 
 <template>
-  <installation-tabs :tracking-label="$options.trackingLabel">
-    <template #installation>
-      <p class="gl-mt-3 font-weight-bold">{{ s__('PackageRegistry|NuGet Command') }}</p>
+  <div>
+    <h3 class="gl-font-lg">{{ __('Installation') }}</h3>
+    <h4 class="gl-font-base">
+      {{ s__('PackageRegistry|NuGet Command') }}
+    </h4>
     <code-instruction
       :instruction="nugetInstallationCommand"
       :copy-text="s__('PackageRegistry|Copy NuGet Command')"
-        class="js-nuget-command"
       :tracking-action="$options.trackingActions.COPY_NUGET_INSTALL_COMMAND"
     />
-    </template>
-
-    <template #setup>
-      <p class="gl-mt-3 font-weight-bold">
+    <h3 class="gl-font-lg">{{ __('Registry setup') }}</h3>
+    <h4 class="gl-font-base">
       {{ s__('PackageRegistry|Add NuGet Source') }}
-      </p>
+    </h4>
+
     <code-instruction
       :instruction="nugetSetupCommand"
       :copy-text="s__('PackageRegistry|Copy NuGet Setup Command')"
-        class="js-nuget-setup"
       :tracking-action="$options.trackingActions.COPY_NUGET_SETUP_COMMAND"
     />
     <gl-sprintf :message="$options.i18n.helpText">
@@ -55,6 +51,5 @@ export default {
         <gl-link :href="nugetHelpPath" target="_blank">{{ content }}</gl-link>
       </template>
     </gl-sprintf>
-    </template>
-  </installation-tabs>
+  </div>
 </template>

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

@@ -44,7 +44,7 @@ export default {
 
 <template>
   <div class="issuable-discussion">
-    <h3 class="gl-font-lg gl-my-3" data-testid="title">{{ __('History') }}</h3>
+    <h3 class="gl-font-lg" data-testid="title">{{ __('History') }}</h3>
     <ul class="timeline main-notes-list notes gl-mb-4" data-testid="timeline">
       <history-element icon="clock" data-testid="created-on">
         <gl-sprintf :message="$options.i18n.createdOn">

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

@@ -2,9 +2,8 @@
 import { GlLink, GlSprintf } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import CodeInstruction from './code_instruction.vue';
-import { TrackingActions, TrackingLabels } from '../constants';
+import { TrackingActions } from '../constants';
 import { mapGetters, mapState } from 'vuex';
-import InstallationTabs from './installation_tabs.vue';
 
 export default {
   name: 'PyPiInstallation',
@@ -12,7 +11,6 @@ export default {
     CodeInstruction,
     GlLink,
     GlSprintf,
-    InstallationTabs,
   },
   computed: {
     ...mapState(['pypiHelpPath']),
@@ -27,25 +25,25 @@ export default {
     ),
   },
   trackingActions: { ...TrackingActions },
-  trackingLabel: TrackingLabels.PYPI_INSTALLATION,
 };
 </script>
 
 <template>
-  <installation-tabs :tracking-label="$options.trackingLabel">
-    <template #installation>
-      <p class="gl-mt-3 font-weight-bold">
+  <div>
+    <h3 class="gl-font-lg">{{ __('Installation') }}</h3>
+
+    <h4 class="gl-font-base">
       {{ s__('PackageRegistry|Pip Command') }}
-      </p>
+    </h4>
+
     <code-instruction
       :instruction="pypiPipCommand"
       :copy-text="s__('PackageRegistry|Copy Pip command')"
       data-testid="pip-command"
       :tracking-action="$options.trackingActions.COPY_PIP_INSTALL_COMMAND"
     />
-    </template>
 
-    <template #setup>
+    <h3 class="gl-font-lg">{{ __('Registry setup') }}</h3>
     <p>
       <gl-sprintf :message="$options.i18n.setupText">
         <template #code="{ content }">
@@ -53,6 +51,7 @@ export default {
         </template>
       </gl-sprintf>
     </p>
+
     <code-instruction
       :instruction="pypiSetupCommand"
       :copy-text="s__('PackageRegistry|Copy .pypirc content')"
@@ -65,6 +64,5 @@ export default {
         <gl-link :href="pypiHelpPath" target="_blank">{{ content }}</gl-link>
       </template>
     </gl-sprintf>
-    </template>
-  </installation-tabs>
+  </div>
 </template>

locale/gitlab.pot

@@ -13037,7 +13037,7 @@ msgstr ""
 msgid "Install on clusters"
 msgstr ""
 
-msgid "Installation Commands"
+msgid "Installation"
 msgstr ""
 
 msgid "Installed"
@@ -17158,9 +17158,6 @@ msgstr ""
 msgid "PackageRegistry|If you haven't already done so, you will need to add the below to your %{codeStart}pom.xml%{codeEnd} file."
 msgstr ""
 
-msgid "PackageRegistry|Installation"
-msgstr ""
-
 msgid "PackageRegistry|Is your favorite package manager missing? We'd love your help in building first-class support for it into GitLab! %{contributionLinkStart}Visit the contribution documentation%{contributionLinkEnd} to learn more about how to build support for new package managers into GitLab. Below is a list of package managers that are on our radar."
 msgstr ""
 
@@ -17209,9 +17206,6 @@ msgstr ""
 msgid "PackageRegistry|Recipe: %{recipe}"
 msgstr ""
 
-msgid "PackageRegistry|Registry Setup"
-msgstr ""
-
 msgid "PackageRegistry|Remove package"
 msgstr ""
 
@@ -17266,13 +17260,13 @@ msgstr ""
 msgid "PackageRegistry|composer.json require package include"
 msgstr ""
 
-msgid "PackageRegistry|npm"
+msgid "PackageRegistry|npm command"
 msgstr ""
 
 msgid "PackageRegistry|published by %{author}"
 msgstr ""
 
-msgid "PackageRegistry|yarn"
+msgid "PackageRegistry|yarn command"
 msgstr ""
 
 msgid "PackageType|Composer"
@@ -20034,6 +20028,9 @@ msgstr ""
 msgid "Registration|Your profile"
 msgstr ""
 
+msgid "Registry setup"
+msgstr ""
+
 msgid "Regulate approvals by authors/committers, based on compliance frameworks. Can be changed only at the instance level."
 msgstr ""
 

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

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ConanInstallation renders all the messages 1`] = `
+<div>
+  <h3
+    class="gl-font-lg"
+  >
+    Installation
+  </h3>
+   
+  <h4
+    class="gl-font-base"
+  >
+    
+    Conan Command
+  
+  </h4>
+   
+  <code-instruction-stub
+    copytext="Copy Conan Command"
+    instruction="foo/command"
+    trackingaction="copy_conan_command"
+  />
+   
+  <h3
+    class="gl-font-lg"
+  >
+    Registry setup
+  </h3>
+   
+  <h4
+    class="gl-font-base"
+  >
+    
+    Add Conan Remote
+  
+  </h4>
+   
+  <code-instruction-stub
+    copytext="Copy Conan Setup Command"
+    instruction="foo/setup"
+    trackingaction="copy_conan_setup_command"
+  />
+   
+  <gl-sprintf-stub
+    message="For more information on the Conan registry, %{linkStart}see the documentation%{linkEnd}."
+  />
+</div>
+`;

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

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MavenInstallation renders all the messages 1`] = `
+<div>
+  <h3
+    class="gl-font-lg"
+  >
+    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."
+    />
+  </p>
+   
+  <code-instruction-stub
+    copytext="Copy Maven XML"
+    instruction="foo/xml"
+    multiline="true"
+    trackingaction="copy_maven_xml"
+  />
+   
+  <h4
+    class="gl-font-base"
+  >
+    
+    Maven Command
+  
+  </h4>
+   
+  <code-instruction-stub
+    copytext="Copy Maven command"
+    instruction="foo/command"
+    trackingaction="copy_maven_command"
+  />
+   
+  <h3
+    class="gl-font-lg"
+  >
+    Registry setup
+  </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."
+    />
+  </p>
+   
+  <code-instruction-stub
+    copytext="Copy Maven registry XML"
+    instruction="foo/setup"
+    multiline="true"
+    trackingaction="copy_maven_setup_xml"
+  />
+   
+  <gl-sprintf-stub
+    message="For more information on the Maven registry, %{linkStart}see the documentation%{linkEnd}."
+  />
+</div>
+`;

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

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NpmInstallation renders all the messages 1`] = `
+<div>
+  <h3
+    class="gl-font-lg"
+  >
+    Installation
+  </h3>
+   
+  <h4
+    class="gl-font-base"
+  >
+    npm command
+  </h4>
+   
+  <code-instruction-stub
+    copytext="Copy npm command"
+    instruction="npm i @Test/package"
+    trackingaction="copy_npm_install_command"
+  />
+   
+  <h4
+    class="gl-font-base"
+  >
+    yarn command
+  </h4>
+   
+  <code-instruction-stub
+    copytext="Copy yarn command"
+    instruction="yarn add @Test/package"
+    trackingaction="copy_yarn_install_command"
+  />
+   
+  <h3
+    class="gl-font-lg"
+  >
+    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"
+    trackingaction="copy_npm_setup_command"
+  />
+   
+  <h4
+    class="gl-font-base"
+  >
+    yarn command
+  </h4>
+   
+  <code-instruction-stub
+    copytext="Copy yarn setup command"
+    instruction="echo \\\\\\"@Test:registry\\\\\\" \\\\\\"undefined\\\\\\" >> .yarnrc"
+    trackingaction="copy_yarn_setup_command"
+  />
+   
+  <gl-sprintf-stub
+    message="You may also need to setup authentication using an auth token. %{linkStart}See the documentation%{linkEnd} to find out more."
+  />
+</div>
+`;

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

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NugetInstallation renders all the messages 1`] = `
+<div>
+  <h3
+    class="gl-font-lg"
+  >
+    Installation
+  </h3>
+   
+  <h4
+    class="gl-font-base"
+  >
+    
+    NuGet Command
+  
+  </h4>
+   
+  <code-instruction-stub
+    copytext="Copy NuGet Command"
+    instruction="foo/command"
+    trackingaction="copy_nuget_install_command"
+  />
+   
+  <h3
+    class="gl-font-lg"
+  >
+    Registry setup
+  </h3>
+   
+  <h4
+    class="gl-font-base"
+  >
+    
+    Add NuGet Source
+  
+  </h4>
+   
+  <code-instruction-stub
+    copytext="Copy NuGet Setup Command"
+    instruction="foo/setup"
+    trackingaction="copy_nuget_setup_command"
+  />
+   
+  <gl-sprintf-stub
+    message="For more information on the NuGet registry, %{linkStart}see the documentation%{linkEnd}."
+  />
+</div>
+`;

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

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PypiInstallation renders all the messages 1`] = `
+<div>
+  <h3
+    class="gl-font-lg"
+  >
+    Installation
+  </h3>
+   
+  <h4
+    class="gl-font-base"
+  >
+    
+    Pip Command
+  
+  </h4>
+   
+  <code-instruction-stub
+    copytext="Copy Pip command"
+    data-testid="pip-command"
+    instruction="pip install"
+    trackingaction="copy_pip_install_command"
+  />
+   
+  <h3
+    class="gl-font-lg"
+  >
+    Registry setup
+  </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."
+    />
+  </p>
+   
+  <code-instruction-stub
+    copytext="Copy .pypirc content"
+    data-testid="pypi-setup-content"
+    instruction="python setup"
+    multiline="true"
+    trackingaction="copy_pypi_setup_command"
+  />
+   
+  <gl-sprintf-stub
+    message="For more information on the PyPi registry, %{linkStart}see the documentation%{linkEnd}."
+  />
+</div>
+`;

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

 import Vuex from 'vuex';
-import { mount, createLocalVue } from '@vue/test-utils';
+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 { conanPackage as packageEntity } from '../../mock_data';
 import { registryUrl as conanPath } from '../mock_data';
-import { GlTabs } from '@gitlab/ui';
 
 const localVue = createLocalVue();
 localVue.use(Vuex);
@@ -25,12 +25,10 @@ describe('ConanInstallation', () => {
     },
   });
 
-  const findTabs = () => wrapper.find(GlTabs);
-  const conanInstallationCommand = () => wrapper.find('.js-conan-command > input');
-  const conanSetupCommand = () => wrapper.find('.js-conan-setup > input');
+  const findCodeInstructions = () => wrapper.findAll(CodeInstructions);
 
   function createComponent() {
-    wrapper = mount(ConanInstallation, {
+    wrapper = shallowMount(ConanInstallation, {
       localVue,
       store,
     });
@@ -44,21 +42,27 @@ describe('ConanInstallation', () => {
     if (wrapper) wrapper.destroy();
   });
 
-  describe('it renders', () => {
-    it('with GlTabs', () => {
-      expect(findTabs().exists()).toBe(true);
-    });
+  it('renders all the messages', () => {
+    expect(wrapper.element).toMatchSnapshot();
   });
 
   describe('installation commands', () => {
     it('renders the correct command', () => {
-      expect(conanInstallationCommand().element.value).toBe(conanInstallationCommandStr);
+      expect(
+        findCodeInstructions()
+          .at(0)
+          .props('instruction'),
+      ).toBe(conanInstallationCommandStr);
     });
   });
 
   describe('setup commands', () => {
     it('renders the correct command', () => {
-      expect(conanSetupCommand().element.value).toBe(conanSetupCommandStr);
+      expect(
+        findCodeInstructions()
+          .at(1)
+          .props('instruction'),
+      ).toBe(conanSetupCommandStr);
     });
   });
 });

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

-import { mount } from '@vue/test-utils';
-import InstallationTabs from '~/packages/details/components/installation_tabs.vue';
-import Tracking from '~/tracking';
-import { TrackingActions } from '~/packages/details/constants';
-
-describe('InstallationTabs', () => {
-  let wrapper;
-  let eventSpy;
-
-  const trackingLabel = 'foo';
-
-  function createComponent() {
-    wrapper = mount(InstallationTabs, {
-      propsData: {
-        trackingLabel,
-      },
-    });
-  }
-
-  const installationTab = () => wrapper.find('.js-installation-tab > a');
-  const setupTab = () => wrapper.find('.js-setup-tab > a');
-
-  beforeEach(() => {
-    eventSpy = jest.spyOn(Tracking, 'event');
-    createComponent();
-  });
-
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
-  describe('tab change tracking', () => {
-    it('should track when the setup tab is clicked', () => {
-      setupTab().trigger('click');
-
-      return wrapper.vm.$nextTick().then(() => {
-        expect(eventSpy).toHaveBeenCalledWith(undefined, TrackingActions.REGISTRY_SETUP, {
-          label: trackingLabel,
-        });
-      });
-    });
-
-    it('should track when the installation tab is clicked', () => {
-      setupTab().trigger('click');
-
-      return wrapper.vm
-        .$nextTick()
-        .then(() => {
-          installationTab().trigger('click');
-        })
-        .then(() => {
-          expect(eventSpy).toHaveBeenCalledWith(undefined, TrackingActions.INSTALLATION, {
-            label: trackingLabel,
-          });
-        });
-    });
-  });
-});

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

 import Vuex from 'vuex';
-import { mount, createLocalVue } from '@vue/test-utils';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
 import MavenInstallation from '~/packages/details/components/maven_installation.vue';
-import { registryUrl as mavenPath } from '../mock_data';
-import { mavenPackage as packageEntity } from '../../mock_data';
-import { GlTabs } from '@gitlab/ui';
+import CodeInstructions from '~/packages/details/components/code_instruction.vue';
+import { registryUrl as mavenPath } from 'jest/packages/details/mock_data';
+import { mavenPackage as packageEntity } from 'jest/packages/mock_data';
+import { TrackingActions } from '~/packages/details/constants';
 
 const localVue = createLocalVue();
 localVue.use(Vuex);
@@ -27,13 +28,10 @@ describe('MavenInstallation', () => {
     },
   });
 
-  const findTabs = () => wrapper.find(GlTabs);
-  const xmlCode = () => wrapper.find('.js-maven-xml > pre');
-  const mavenCommand = () => wrapper.find('.js-maven-command > input');
-  const xmlSetup = () => wrapper.find('.js-maven-setup-xml > pre');
+  const findCodeInstructions = () => wrapper.findAll(CodeInstructions);
 
   function createComponent() {
-    wrapper = mount(MavenInstallation, {
+    wrapper = shallowMount(MavenInstallation, {
       localVue,
       store,
     });
@@ -47,25 +45,47 @@ describe('MavenInstallation', () => {
     if (wrapper) wrapper.destroy();
   });
 
-  describe('it renders', () => {
-    it('with GlTabs', () => {
-      expect(findTabs().exists()).toBe(true);
-    });
+  it('renders all the messages', () => {
+    expect(wrapper.element).toMatchSnapshot();
   });
 
   describe('installation commands', () => {
     it('renders the correct xml block', () => {
-      expect(xmlCode().text()).toBe(xmlCodeBlock);
+      expect(
+        findCodeInstructions()
+          .at(0)
+          .props(),
+      ).toMatchObject({
+        instruction: xmlCodeBlock,
+        multiline: true,
+        trackingAction: TrackingActions.COPY_MAVEN_XML,
+      });
     });
 
     it('renders the correct maven command', () => {
-      expect(mavenCommand().element.value).toBe(mavenCommandStr);
+      expect(
+        findCodeInstructions()
+          .at(1)
+          .props(),
+      ).toMatchObject({
+        instruction: mavenCommandStr,
+        multiline: false,
+        trackingAction: TrackingActions.COPY_MAVEN_COMMAND,
+      });
     });
   });
 
   describe('setup commands', () => {
     it('renders the correct xml block', () => {
-      expect(xmlSetup().text()).toBe(mavenSetupXml);
+      expect(
+        findCodeInstructions()
+          .at(2)
+          .props(),
+      ).toMatchObject({
+        instruction: mavenSetupXml,
+        multiline: true,
+        trackingAction: TrackingActions.COPY_MAVEN_SETUP,
+      });
     });
   });
 });

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

 import Vuex from 'vuex';
-import { mount, createLocalVue } from '@vue/test-utils';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
 import NpmInstallation from '~/packages/details/components/npm_installation.vue';
-import { npmPackage as packageEntity } from '../../mock_data';
-import { registryUrl as nugetPath } from '../mock_data';
-import { GlTabs } from '@gitlab/ui';
+import CodeInstructions from '~/packages/details/components/code_instruction.vue';
+import { npmPackage as packageEntity } from 'jest/packages/mock_data';
+import { registryUrl as nugetPath } from 'jest/packages/details/mock_data';
+import { TrackingActions } from '~/packages/details/constants';
+import { npmInstallationCommand, npmSetupCommand } from '~/packages/details/store/getters';
 
 const localVue = createLocalVue();
 localVue.use(Vuex);
@@ -11,30 +13,21 @@ localVue.use(Vuex);
 describe('NpmInstallation', () => {
   let wrapper;
 
-  const npmCommandStr = 'npm install';
-  const npmSetupStr = 'npm setup';
-  const yarnCommandStr = 'npm install';
-  const yarnSetupStr = 'npm setup';
+  const findCodeInstructions = () => wrapper.findAll(CodeInstructions);
 
-  const findTabs = () => wrapper.find(GlTabs);
-  const npmInstallationCommand = () => wrapper.find('.js-npm-install > input');
-  const npmSetupCommand = () => wrapper.find('.js-npm-setup > input');
-  const yarnInstallationCommand = () => wrapper.find('.js-yarn-install > input');
-  const yarnSetupCommand = () => wrapper.find('.js-yarn-setup > input');
-
-  function createComponent(yarn = false) {
+  function createComponent() {
     const store = new Vuex.Store({
       state: {
         packageEntity,
         nugetPath,
       },
       getters: {
-        npmInstallationCommand: () => () => (yarn ? yarnCommandStr : npmCommandStr),
-        npmSetupCommand: () => () => (yarn ? yarnSetupStr : npmSetupStr),
+        npmInstallationCommand,
+        npmSetupCommand,
       },
     });
 
-    wrapper = mount(NpmInstallation, {
+    wrapper = shallowMount(NpmInstallation, {
       localVue,
       store,
     });
@@ -48,33 +41,59 @@ describe('NpmInstallation', () => {
     if (wrapper) wrapper.destroy();
   });
 
-  describe('it renders', () => {
-    it('with GlTabs', () => {
-      expect(findTabs().exists()).toBe(true);
-    });
+  it('renders all the messages', () => {
+    expect(wrapper.element).toMatchSnapshot();
   });
 
-  describe('npm commands', () => {
-    it('renders the correct install command', () => {
-      expect(npmInstallationCommand().element.value).toBe(npmCommandStr);
+  describe('installation commands', () => {
+    it('renders the correct npm command', () => {
+      expect(
+        findCodeInstructions()
+          .at(0)
+          .props(),
+      ).toMatchObject({
+        instruction: 'npm i @Test/package',
+        multiline: false,
+        trackingAction: TrackingActions.COPY_NPM_INSTALL_COMMAND,
+      });
     });
 
-    it('renders the correct setup command', () => {
-      expect(npmSetupCommand().element.value).toBe(npmSetupStr);
+    it('renders the correct yarn command', () => {
+      expect(
+        findCodeInstructions()
+          .at(1)
+          .props(),
+      ).toMatchObject({
+        instruction: 'yarn add @Test/package',
+        multiline: false,
+        trackingAction: TrackingActions.COPY_YARN_INSTALL_COMMAND,
       });
     });
-
-  describe('yarn commands', () => {
-    beforeEach(() => {
-      createComponent(true);
   });
 
-    it('renders the correct install command', () => {
-      expect(yarnInstallationCommand().element.value).toBe(yarnCommandStr);
+  describe('setup commands', () => {
+    it('renders the correct npm command', () => {
+      expect(
+        findCodeInstructions()
+          .at(2)
+          .props(),
+      ).toMatchObject({
+        instruction: 'echo @Test:registry=undefined >> .npmrc',
+        multiline: false,
+        trackingAction: TrackingActions.COPY_NPM_SETUP_COMMAND,
+      });
     });
 
-    it('renders the correct setup command', () => {
-      expect(yarnSetupCommand().element.value).toBe(yarnSetupStr);
+    it('renders the correct yarn command', () => {
+      expect(
+        findCodeInstructions()
+          .at(3)
+          .props(),
+      ).toMatchObject({
+        instruction: 'echo \\"@Test:registry\\" \\"undefined\\" >> .yarnrc',
+        multiline: false,
+        trackingAction: TrackingActions.COPY_YARN_SETUP_COMMAND,
+      });
     });
   });
 });

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

 import Vuex from 'vuex';
-import { mount, createLocalVue } from '@vue/test-utils';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
 import NugetInstallation from '~/packages/details/components/nuget_installation.vue';
-import { nugetPackage as packageEntity } from '../../mock_data';
-import { registryUrl as nugetPath } from '../mock_data';
-import { GlTabs } from '@gitlab/ui';
+import CodeInstructions from '~/packages/details/components/code_instruction.vue';
+import { nugetPackage as packageEntity } from 'jest/packages/mock_data';
+import { registryUrl as nugetPath } from 'jest/packages/details/mock_data';
+import { TrackingActions } from '~/packages/details/constants';
 
 const localVue = createLocalVue();
 localVue.use(Vuex);
@@ -25,12 +26,10 @@ describe('NugetInstallation', () => {
     },
   });
 
-  const findTabs = () => wrapper.find(GlTabs);
-  const nugetInstallationCommand = () => wrapper.find('.js-nuget-command > input');
-  const nugetSetupCommand = () => wrapper.find('.js-nuget-setup > input');
+  const findCodeInstructions = () => wrapper.findAll(CodeInstructions);
 
   function createComponent() {
-    wrapper = mount(NugetInstallation, {
+    wrapper = shallowMount(NugetInstallation, {
       localVue,
       store,
     });
@@ -44,21 +43,33 @@ describe('NugetInstallation', () => {
     if (wrapper) wrapper.destroy();
   });
 
-  describe('it renders', () => {
-    it('with GlTabs', () => {
-      expect(findTabs().exists()).toBe(true);
-    });
+  it('renders all the messages', () => {
+    expect(wrapper.element).toMatchSnapshot();
   });
 
   describe('installation commands', () => {
     it('renders the correct command', () => {
-      expect(nugetInstallationCommand().element.value).toBe(nugetInstallationCommandStr);
+      expect(
+        findCodeInstructions()
+          .at(0)
+          .props(),
+      ).toMatchObject({
+        instruction: nugetInstallationCommandStr,
+        trackingAction: TrackingActions.COPY_NUGET_INSTALL_COMMAND,
+      });
     });
   });
 
   describe('setup commands', () => {
     it('renders the correct command', () => {
-      expect(nugetSetupCommand().element.value).toBe(nugetSetupCommandStr);
+      expect(
+        findCodeInstructions()
+          .at(1)
+          .props(),
+      ).toMatchObject({
+        instruction: nugetSetupCommandStr,
+        trackingAction: TrackingActions.COPY_NUGET_SETUP_COMMAND,
+      });
     });
   });
 });

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

 import Vuex from 'vuex';
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import PypiInstallation from '~/packages/details/components/pypi_installation.vue';
-import InstallationTabs from '~/packages/details/components/installation_tabs.vue';
-import { pypiPackage as packageEntity } from '../../mock_data';
-import { GlTabs } from '@gitlab/ui';
+import { pypiPackage as packageEntity } from 'jest/packages/mock_data';
 
 const localVue = createLocalVue();
 localVue.use(Vuex);
@@ -25,7 +23,6 @@ describe('PypiInstallation', () => {
     },
   });
 
-  const findTabs = () => wrapper.find(GlTabs);
   const pipCommand = () => wrapper.find('[data-testid="pip-command"]');
   const setupInstruction = () => wrapper.find('[data-testid="pypi-setup-content"]');
 
@@ -33,9 +30,6 @@ describe('PypiInstallation', () => {
     wrapper = shallowMount(PypiInstallation, {
       localVue,
       store,
-      stubs: {
-        InstallationTabs,
-      },
     });
   }
 
@@ -48,10 +42,8 @@ describe('PypiInstallation', () => {
     wrapper = null;
   });
 
-  describe('it renders', () => {
-    it('with GlTabs', () => {
-      expect(findTabs().exists()).toBe(true);
-    });
+  it('renders all the messages', () => {
+    expect(wrapper.element).toMatchSnapshot();
   });
 
   describe('installation commands', () => {

spec/support/shared_examples/features/packages_shared_examples.rb

@@ -38,7 +38,7 @@ RSpec.shared_examples 'package details link' do |property|
 
     page.within('[data-qa-selector="package_information_content"]') do
       expect(page).to have_content('Installation')
-      expect(page).to have_content('Registry Setup')
+      expect(page).to have_content('Registry setup')
     end
   end
 end