Move npm and yarn to new dropdown UI

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

@@ -14,6 +14,11 @@ export default {
     GlLink,
     GlSprintf,
   },
+  data() {
+    return {
+      instructionType: 'npm',
+    };
+  },
   computed: {
     ...mapState(['npmHelpPath']),
     ...mapGetters(['npmInstallationCommand', 'npmSetupCommand']),
@@ -29,6 +34,9 @@ export default {
     yarnSetupCommand() {
       return this.npmSetupCommand(NpmManager.YARN);
     },
+    showNpm() {
+      return this.instructionType === 'npm';
+    },
   },
   i18n: {
     helpText: s__(
@@ -37,16 +45,23 @@ export default {
   },
   trackingActions: { ...TrackingActions },
   TrackingLabels,
-  installOptions: [{ value: 'npm', label: s__('PackageRegistry|Show NPM commands') }],
+  installOptions: [
+    { value: 'npm', label: s__('PackageRegistry|Show NPM commands') },
+    { value: 'yarn', label: s__('PackageRegistry|Show Yarn commands') },
+  ],
 };
 </script>
 
 <template>
   <div>
-    <installation-title package-type="npm" :options="$options.installOptions" />
+    <installation-title
+      package-type="npm"
+      :options="$options.installOptions"
+      @change="instructionType = $event"
+    />
 
     <code-instruction
-      :label="s__('PackageRegistry|npm command')"
+      v-if="showNpm"
       :instruction="npmCommand"
       :copy-text="s__('PackageRegistry|Copy npm command')"
       :tracking-action="$options.trackingActions.COPY_NPM_INSTALL_COMMAND"
@@ -54,7 +69,7 @@ export default {
     />
 
     <code-instruction
-      :label="s__('PackageRegistry|yarn command')"
+      v-else
       :instruction="yarnCommand"
       :copy-text="s__('PackageRegistry|Copy yarn command')"
       :tracking-action="$options.trackingActions.COPY_YARN_INSTALL_COMMAND"
@@ -64,7 +79,7 @@ export default {
     <h3 class="gl-font-lg">{{ __('Registry setup') }}</h3>
 
     <code-instruction
-      :label="s__('PackageRegistry|npm command')"
+      v-if="showNpm"
       :instruction="npmSetup"
       :copy-text="s__('PackageRegistry|Copy npm setup command')"
       :tracking-action="$options.trackingActions.COPY_NPM_SETUP_COMMAND"
@@ -72,7 +87,7 @@ export default {
     />
 
     <code-instruction
-      :label="s__('PackageRegistry|yarn command')"
+      v-else
       :instruction="yarnSetupCommand"
       :copy-text="s__('PackageRegistry|Copy yarn setup command')"
       :tracking-action="$options.trackingActions.COPY_YARN_SETUP_COMMAND"

changelogs/unreleased/324014-move-npm-and-yarn-to-new-dropdown-ui.yml

+---
+title: Move npm and yarn to new dropdown UI
+merge_request: 59628
+author:
+type: changed

locale/gitlab.pot

@@ -22742,6 +22742,9 @@ msgstr ""
 msgid "PackageRegistry|Show PyPi commands"
 msgstr ""
 
+msgid "PackageRegistry|Show Yarn commands"
+msgstr ""
+
 msgid "PackageRegistry|Sorry, your filter produced no results"
 msgstr ""
 
@@ -22784,15 +22787,9 @@ msgstr ""
 msgid "PackageRegistry|npm"
 msgstr ""
 
-msgid "PackageRegistry|npm command"
-msgstr ""
-
 msgid "PackageRegistry|published by %{author}"
 msgstr ""
 
-msgid "PackageRegistry|yarn command"
-msgstr ""
-
 msgid "Packages"
 msgstr ""
 

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

@@ -3,26 +3,18 @@
 exports[`NpmInstallation renders all the messages 1`] = `
 <div>
   <installation-title-stub
-    options="[object Object]"
+    options="[object Object],[object Object]"
     packagetype="npm"
   />
    
   <code-instruction-stub
     copytext="Copy npm command"
     instruction="npm i @Test/package"
-    label="npm command"
+    label=""
     trackingaction="copy_npm_install_command"
     trackinglabel="code_instruction"
   />
    
-  <code-instruction-stub
-    copytext="Copy yarn command"
-    instruction="yarn add @Test/package"
-    label="yarn command"
-    trackingaction="copy_yarn_install_command"
-    trackinglabel="code_instruction"
-  />
-   
   <h3
     class="gl-font-lg"
   >
@@ -32,19 +24,11 @@ exports[`NpmInstallation renders all the messages 1`] = `
   <code-instruction-stub
     copytext="Copy npm setup command"
     instruction="echo @Test:registry=undefined/ >> .npmrc"
-    label="npm command"
+    label=""
     trackingaction="copy_npm_setup_command"
     trackinglabel="code_instruction"
   />
    
-  <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
     message="You may also need to setup authentication using an auth token. %{linkStart}See the documentation%{linkEnd} to find out more."
   />

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

 import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import Vuex from 'vuex';
 import { registryUrl as nugetPath } from 'jest/packages/details/mock_data';
 import { npmPackage as packageEntity } from 'jest/packages/mock_data';
@@ -14,10 +15,13 @@ localVue.use(Vuex);
 describe('NpmInstallation', () => {
   let wrapper;
 
+  const npmInstallationCommandLabel = 'npm i @Test/package';
+  const yarnInstallationCommandLabel = 'yarn add @Test/package';
+
   const findCodeInstructions = () => wrapper.findAll(CodeInstructions);
   const findInstallationTitle = () => wrapper.findComponent(InstallationTitle);
 
-  function createComponent() {
+  function createComponent({ data = {} } = {}) {
     const store = new Vuex.Store({
       state: {
         packageEntity,
@@ -32,6 +36,9 @@ describe('NpmInstallation', () => {
     wrapper = shallowMount(NpmInstallation, {
       localVue,
       store,
+      data() {
+        return data;
+      },
     });
   }
 
@@ -52,40 +59,61 @@ describe('NpmInstallation', () => {
       expect(findInstallationTitle().exists()).toBe(true);
       expect(findInstallationTitle().props()).toMatchObject({
         packageType: 'npm',
-        options: [{ value: 'npm', label: 'Show NPM commands' }],
+        options: [
+          { value: 'npm', label: 'Show NPM commands' },
+          { value: 'yarn', label: 'Show Yarn commands' },
+        ],
       });
     });
+
+    it('on change event updates the instructions to show', async () => {
+      createComponent();
+
+      expect(findCodeInstructions().at(0).props('instruction')).toBe(npmInstallationCommandLabel);
+      findInstallationTitle().vm.$emit('change', 'yarn');
+
+      await nextTick();
+
+      expect(findCodeInstructions().at(0).props('instruction')).toBe(yarnInstallationCommandLabel);
+    });
   });
 
-  describe('installation commands', () => {
-    it('renders the correct npm command', () => {
+  describe('npm', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+    it('renders the correct installation command', () => {
       expect(findCodeInstructions().at(0).props()).toMatchObject({
-        instruction: 'npm i @Test/package',
+        instruction: npmInstallationCommandLabel,
         multiline: false,
         trackingAction: TrackingActions.COPY_NPM_INSTALL_COMMAND,
       });
     });
 
-    it('renders the correct yarn command', () => {
+    it('renders the correct setup command', () => {
       expect(findCodeInstructions().at(1).props()).toMatchObject({
-        instruction: 'yarn add @Test/package',
+        instruction: 'echo @Test:registry=undefined/ >> .npmrc',
         multiline: false,
-        trackingAction: TrackingActions.COPY_YARN_INSTALL_COMMAND,
+        trackingAction: TrackingActions.COPY_NPM_SETUP_COMMAND,
       });
     });
   });
 
-  describe('setup commands', () => {
-    it('renders the correct npm command', () => {
-      expect(findCodeInstructions().at(2).props()).toMatchObject({
-        instruction: 'echo @Test:registry=undefined/ >> .npmrc',
+  describe('yarn', () => {
+    beforeEach(() => {
+      createComponent({ data: { instructionType: 'yarn' } });
+    });
+
+    it('renders the correct setup command', () => {
+      expect(findCodeInstructions().at(0).props()).toMatchObject({
+        instruction: yarnInstallationCommandLabel,
         multiline: false,
-        trackingAction: TrackingActions.COPY_NPM_SETUP_COMMAND,
+        trackingAction: TrackingActions.COPY_YARN_INSTALL_COMMAND,
       });
     });
 
-    it('renders the correct yarn command', () => {
-      expect(findCodeInstructions().at(3).props()).toMatchObject({
+    it('renders the correct registry command', () => {
+      expect(findCodeInstructions().at(1).props()).toMatchObject({
         instruction: 'echo \\"@Test:registry\\" \\"undefined/\\" >> .yarnrc',
         multiline: false,
         trackingAction: TrackingActions.COPY_YARN_SETUP_COMMAND,