Add latest changes from gitlab-org/gitlab@13-10-stable-eev13.10.0-rc40

16 files changed, 312 insertions, 67 deletions

diff --git a/spec/frontend/packages/details/components/__snapshots__/conan_installation_spec.js.snap b/spec/frontend/packages/details/components/__snapshots__/conan_installation_spec.js.snap
index a1d08f032bc..a3423e3f4d7 100644
--- a/spec/frontend/packages/details/components/__snapshots__/conan_installation_spec.js.snap
+++ b/spec/frontend/packages/details/components/__snapshots__/conan_installation_spec.js.snap
@@ -2,11 +2,10 @@
 
 exports[`ConanInstallation renders all the messages 1`] = `
 <div>
-  <h3
-    class="gl-font-lg"
-  >
-    Installation
-  </h3>
+  <installation-title-stub
+    options="[object Object]"
+    packagetype="conan"
+  />
    
   <code-instruction-stub
     copytext="Copy Conan Command"
diff --git a/spec/frontend/packages/details/components/__snapshots__/maven_installation_spec.js.snap b/spec/frontend/packages/details/components/__snapshots__/maven_installation_spec.js.snap
index 6d22b372d41..a6bb9e868ee 100644
--- a/spec/frontend/packages/details/components/__snapshots__/maven_installation_spec.js.snap
+++ b/spec/frontend/packages/details/components/__snapshots__/maven_installation_spec.js.snap
@@ -1,12 +1,38 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`MavenInstallation renders all the messages 1`] = `
+exports[`MavenInstallation gradle renders all the messages 1`] = `
 <div>
-  <h3
-    class="gl-font-lg"
-  >
-    Installation
-  </h3>
+  <installation-title-stub
+    options="[object Object],[object Object]"
+    packagetype="maven"
+  />
+   
+  <code-instruction-stub
+    class="gl-mb-5"
+    copytext="Copy Gradle Groovy DSL install command"
+    instruction="foo/gradle/install"
+    label="Gradle Groovy DSL install command"
+    trackingaction="copy_gradle_install_command"
+    trackinglabel="code_instruction"
+  />
+   
+  <code-instruction-stub
+    copytext="Copy add Gradle Groovy DSL repository command"
+    instruction="foo/gradle/add/source"
+    label="Add Gradle Groovy DSL repository command"
+    multiline="true"
+    trackingaction="copy_gradle_add_to_source_command"
+    trackinglabel="code_instruction"
+  />
+</div>
+`;
+
+exports[`MavenInstallation maven renders all the messages 1`] = `
+<div>
+  <installation-title-stub
+    options="[object Object],[object Object]"
+    packagetype="maven"
+  />
    
   <p>
     <gl-sprintf-stub
@@ -17,7 +43,7 @@ exports[`MavenInstallation renders all the messages 1`] = `
   <code-instruction-stub
     copytext="Copy Maven XML"
     instruction="foo/xml"
-    label="Maven XML"
+    label=""
     multiline="true"
     trackingaction="copy_maven_xml"
     trackinglabel="code_instruction"
diff --git a/spec/frontend/packages/details/components/__snapshots__/npm_installation_spec.js.snap b/spec/frontend/packages/details/components/__snapshots__/npm_installation_spec.js.snap
index b616751f75f..6903d342d6a 100644
--- a/spec/frontend/packages/details/components/__snapshots__/npm_installation_spec.js.snap
+++ b/spec/frontend/packages/details/components/__snapshots__/npm_installation_spec.js.snap
@@ -2,11 +2,10 @@
 
 exports[`NpmInstallation renders all the messages 1`] = `
 <div>
-  <h3
-    class="gl-font-lg"
-  >
-    Installation
-  </h3>
+  <installation-title-stub
+    options="[object Object]"
+    packagetype="npm"
+  />
    
   <code-instruction-stub
     copytext="Copy npm command"
diff --git a/spec/frontend/packages/details/components/__snapshots__/nuget_installation_spec.js.snap b/spec/frontend/packages/details/components/__snapshots__/nuget_installation_spec.js.snap
index 84cf5e4db49..04532743952 100644
--- a/spec/frontend/packages/details/components/__snapshots__/nuget_installation_spec.js.snap
+++ b/spec/frontend/packages/details/components/__snapshots__/nuget_installation_spec.js.snap
@@ -2,11 +2,10 @@
 
 exports[`NugetInstallation renders all the messages 1`] = `
 <div>
-  <h3
-    class="gl-font-lg"
-  >
-    Installation
-  </h3>
+  <installation-title-stub
+    options="[object Object]"
+    packagetype="nuget"
+  />
    
   <code-instruction-stub
     copytext="Copy NuGet Command"
diff --git a/spec/frontend/packages/details/components/__snapshots__/pypi_installation_spec.js.snap b/spec/frontend/packages/details/components/__snapshots__/pypi_installation_spec.js.snap
index 2a588f99c1d..d5bb825d8d1 100644
--- a/spec/frontend/packages/details/components/__snapshots__/pypi_installation_spec.js.snap
+++ b/spec/frontend/packages/details/components/__snapshots__/pypi_installation_spec.js.snap
@@ -2,11 +2,10 @@
 
 exports[`PypiInstallation renders all the messages 1`] = `
 <div>
-  <h3
-    class="gl-font-lg"
-  >
-    Installation
-  </h3>
+  <installation-title-stub
+    options="[object Object]"
+    packagetype="pypi"
+  />
    
   <code-instruction-stub
     copytext="Copy Pip command"
diff --git a/spec/frontend/packages/details/components/composer_installation_spec.js b/spec/frontend/packages/details/components/composer_installation_spec.js
index a1d30d0ed22..18d11c7dd57 100644
--- a/spec/frontend/packages/details/components/composer_installation_spec.js
+++ b/spec/frontend/packages/details/components/composer_installation_spec.js
@@ -4,6 +4,7 @@ import Vuex from 'vuex';
 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 InstallationTitle from '~/packages/details/components/installation_title.vue';
 
 import { TrackingActions } from '~/packages/details/constants';
 
@@ -33,6 +34,7 @@ describe('ComposerInstallation', () => {
   const findPackageInclude = () => wrapper.find('[data-testid="package-include"]');
   const findHelpText = () => wrapper.find('[data-testid="help-text"]');
   const findHelpLink = () => wrapper.find(GlLink);
+  const findInstallationTitle = () => wrapper.findComponent(InstallationTitle);
 
   function createComponent() {
     wrapper = shallowMount(ComposerInstallation, {
@@ -48,6 +50,19 @@ describe('ComposerInstallation', () => {
     wrapper.destroy();
   });
 
+  describe('install command switch', () => {
+    it('has the installation title component', () => {
+      createStore();
+      createComponent();
+
+      expect(findInstallationTitle().exists()).toBe(true);
+      expect(findInstallationTitle().props()).toMatchObject({
+        packageType: 'composer',
+        options: [{ value: 'composer', label: 'Show Composer commands' }],
+      });
+    });
+  });
+
   describe('registry include command', () => {
     beforeEach(() => {
       createStore();
diff --git a/spec/frontend/packages/details/components/conan_installation_spec.js b/spec/frontend/packages/details/components/conan_installation_spec.js
index bf8a92a6350..78a7d265a21 100644
--- a/spec/frontend/packages/details/components/conan_installation_spec.js
+++ b/spec/frontend/packages/details/components/conan_installation_spec.js
@@ -1,6 +1,7 @@
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import Vuex from 'vuex';
 import ConanInstallation from '~/packages/details/components/conan_installation.vue';
+import InstallationTitle from '~/packages/details/components/installation_title.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';
@@ -26,6 +27,7 @@ describe('ConanInstallation', () => {
   });
 
   const findCodeInstructions = () => wrapper.findAll(CodeInstructions);
+  const findInstallationTitle = () => wrapper.findComponent(InstallationTitle);
 
   function createComponent() {
     wrapper = shallowMount(ConanInstallation, {
@@ -39,13 +41,23 @@ describe('ConanInstallation', () => {
   });
 
   afterEach(() => {
-    if (wrapper) wrapper.destroy();
+    wrapper.destroy();
   });
 
   it('renders all the messages', () => {
     expect(wrapper.element).toMatchSnapshot();
   });
 
+  describe('install command switch', () => {
+    it('has the installation title component', () => {
+      expect(findInstallationTitle().exists()).toBe(true);
+      expect(findInstallationTitle().props()).toMatchObject({
+        packageType: 'conan',
+        options: [{ value: 'conan', label: 'Show Conan commands' }],
+      });
+    });
+  });
+
   describe('installation commands', () => {
     it('renders the correct command', () => {
       expect(findCodeInstructions().at(0).props('instruction')).toBe(conanInstallationCommandStr);
diff --git a/spec/frontend/packages/details/components/installation_title_spec.js b/spec/frontend/packages/details/components/installation_title_spec.js
new file mode 100644
index 00000000000..14e990d3011
--- /dev/null
+++ b/spec/frontend/packages/details/components/installation_title_spec.js
@@ -0,0 +1,58 @@
+import { shallowMount } from '@vue/test-utils';
+
+import InstallationTitle from '~/packages/details/components/installation_title.vue';
+import PersistedDropdownSelection from '~/vue_shared/components/registry/persisted_dropdown_selection.vue';
+
+describe('InstallationTitle', () => {
+  let wrapper;
+
+  const defaultProps = { packageType: 'foo', options: [{ value: 'foo', label: 'bar' }] };
+
+  const findPersistedDropdownSelection = () => wrapper.findComponent(PersistedDropdownSelection);
+  const findTitle = () => wrapper.find('h3');
+
+  function createComponent({ props = {} } = {}) {
+    wrapper = shallowMount(InstallationTitle, {
+      propsData: {
+        ...defaultProps,
+        ...props,
+      },
+    });
+  }
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('has a title', () => {
+    createComponent();
+
+    expect(findTitle().exists()).toBe(true);
+    expect(findTitle().text()).toBe('Installation');
+  });
+
+  describe('persisted dropdown selection', () => {
+    it('exists', () => {
+      createComponent();
+
+      expect(findPersistedDropdownSelection().exists()).toBe(true);
+    });
+
+    it('has the correct props', () => {
+      createComponent();
+
+      expect(findPersistedDropdownSelection().props()).toMatchObject({
+        storageKey: 'package_foo_installation_instructions',
+        options: defaultProps.options,
+      });
+    });
+
+    it('on change event emits a change event', () => {
+      createComponent();
+
+      findPersistedDropdownSelection().vm.$emit('change', 'baz');
+
+      expect(wrapper.emitted('change')).toEqual([['baz']]);
+    });
+  });
+});
diff --git a/spec/frontend/packages/details/components/maven_installation_spec.js b/spec/frontend/packages/details/components/maven_installation_spec.js
index dfeb6002186..d49a7c0b561 100644
--- a/spec/frontend/packages/details/components/maven_installation_spec.js
+++ b/spec/frontend/packages/details/components/maven_installation_spec.js
@@ -1,7 +1,9 @@
 import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import Vuex from 'vuex';
 import { registryUrl as mavenPath } from 'jest/packages/details/mock_data';
 import { mavenPackage as packageEntity } from 'jest/packages/mock_data';
+import InstallationTitle from '~/packages/details/components/installation_title.vue';
 import MavenInstallation from '~/packages/details/components/maven_installation.vue';
 import { TrackingActions } from '~/packages/details/constants';
 import CodeInstructions from '~/vue_shared/components/registry/code_instruction.vue';
@@ -15,6 +17,8 @@ describe('MavenInstallation', () => {
   const xmlCodeBlock = 'foo/xml';
   const mavenCommandStr = 'foo/command';
   const mavenSetupXml = 'foo/setup';
+  const gradleGroovyInstallCommandText = 'foo/gradle/install';
+  const gradleGroovyAddSourceCommandText = 'foo/gradle/add/source';
 
   const store = new Vuex.Store({
     state: {
@@ -25,54 +29,120 @@ describe('MavenInstallation', () => {
       mavenInstallationXml: () => xmlCodeBlock,
       mavenInstallationCommand: () => mavenCommandStr,
       mavenSetupXml: () => mavenSetupXml,
+      gradleGroovyInstalCommand: () => gradleGroovyInstallCommandText,
+      gradleGroovyAddSourceCommand: () => gradleGroovyAddSourceCommandText,
     },
   });
 
   const findCodeInstructions = () => wrapper.findAll(CodeInstructions);
+  const findInstallationTitle = () => wrapper.findComponent(InstallationTitle);
 
-  function createComponent() {
+  function createComponent({ data = {} } = {}) {
     wrapper = shallowMount(MavenInstallation, {
       localVue,
       store,
+      data() {
+        return data;
+      },
     });
   }
 
-  beforeEach(() => {
-    createComponent();
-  });
-
   afterEach(() => {
-    if (wrapper) wrapper.destroy();
+    wrapper.destroy();
   });
 
-  it('renders all the messages', () => {
-    expect(wrapper.element).toMatchSnapshot();
+  describe('install command switch', () => {
+    it('has the installation title component', () => {
+      createComponent();
+
+      expect(findInstallationTitle().exists()).toBe(true);
+      expect(findInstallationTitle().props()).toMatchObject({
+        packageType: 'maven',
+        options: [
+          { value: 'maven', label: 'Show Maven commands' },
+          { value: 'groovy', label: 'Show Gradle Groovy DSL commands' },
+        ],
+      });
+    });
+
+    it('on change event updates the instructions to show', async () => {
+      createComponent();
+
+      expect(findCodeInstructions().at(0).props('instruction')).toBe(xmlCodeBlock);
+      findInstallationTitle().vm.$emit('change', 'groovy');
+
+      await nextTick();
+
+      expect(findCodeInstructions().at(0).props('instruction')).toBe(
+        gradleGroovyInstallCommandText,
+      );
+    });
   });
 
-  describe('installation commands', () => {
-    it('renders the correct xml block', () => {
-      expect(findCodeInstructions().at(0).props()).toMatchObject({
-        instruction: xmlCodeBlock,
-        multiline: true,
-        trackingAction: TrackingActions.COPY_MAVEN_XML,
+  describe('maven', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('renders all the messages', () => {
+      expect(wrapper.element).toMatchSnapshot();
+    });
+
+    describe('installation commands', () => {
+      it('renders the correct xml block', () => {
+        expect(findCodeInstructions().at(0).props()).toMatchObject({
+          instruction: xmlCodeBlock,
+          multiline: true,
+          trackingAction: TrackingActions.COPY_MAVEN_XML,
+        });
+      });
+
+      it('renders the correct maven command', () => {
+        expect(findCodeInstructions().at(1).props()).toMatchObject({
+          instruction: mavenCommandStr,
+          multiline: false,
+          trackingAction: TrackingActions.COPY_MAVEN_COMMAND,
+        });
       });
     });
 
-    it('renders the correct maven command', () => {
-      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(findCodeInstructions().at(2).props()).toMatchObject({
+          instruction: mavenSetupXml,
+          multiline: true,
+          trackingAction: TrackingActions.COPY_MAVEN_SETUP,
+        });
       });
     });
   });
 
-  describe('setup commands', () => {
-    it('renders the correct xml block', () => {
-      expect(findCodeInstructions().at(2).props()).toMatchObject({
-        instruction: mavenSetupXml,
-        multiline: true,
-        trackingAction: TrackingActions.COPY_MAVEN_SETUP,
+  describe('gradle', () => {
+    beforeEach(() => {
+      createComponent({ data: { instructionType: 'gradle' } });
+    });
+
+    it('renders all the messages', () => {
+      expect(wrapper.element).toMatchSnapshot();
+    });
+
+    describe('installation commands', () => {
+      it('renders the gradle install command', () => {
+        expect(findCodeInstructions().at(0).props()).toMatchObject({
+          instruction: gradleGroovyInstallCommandText,
+          multiline: false,
+          trackingAction: TrackingActions.COPY_GRADLE_INSTALL_COMMAND,
+        });
+      });
+    });
+
+    describe('setup commands', () => {
+      it('renders the correct gradle command', () => {
+        expect(findCodeInstructions().at(1).props()).toMatchObject({
+          instruction: gradleGroovyAddSourceCommandText,
+          multiline: true,
+          trackingAction: TrackingActions.COPY_GRADLE_ADD_TO_SOURCE_COMMAND,
+        });
       });
     });
   });
diff --git a/spec/frontend/packages/details/components/npm_installation_spec.js b/spec/frontend/packages/details/components/npm_installation_spec.js
index df820e7e948..09afcd4fd0a 100644
--- a/spec/frontend/packages/details/components/npm_installation_spec.js
+++ b/spec/frontend/packages/details/components/npm_installation_spec.js
@@ -2,6 +2,7 @@ import { shallowMount, createLocalVue } from '@vue/test-utils';
 import Vuex from 'vuex';
 import { registryUrl as nugetPath } from 'jest/packages/details/mock_data';
 import { npmPackage as packageEntity } from 'jest/packages/mock_data';
+import InstallationTitle from '~/packages/details/components/installation_title.vue';
 import NpmInstallation from '~/packages/details/components/npm_installation.vue';
 import { TrackingActions } from '~/packages/details/constants';
 import { npmInstallationCommand, npmSetupCommand } from '~/packages/details/store/getters';
@@ -14,6 +15,7 @@ describe('NpmInstallation', () => {
   let wrapper;
 
   const findCodeInstructions = () => wrapper.findAll(CodeInstructions);
+  const findInstallationTitle = () => wrapper.findComponent(InstallationTitle);
 
   function createComponent() {
     const store = new Vuex.Store({
@@ -38,13 +40,23 @@ describe('NpmInstallation', () => {
   });
 
   afterEach(() => {
-    if (wrapper) wrapper.destroy();
+    wrapper.destroy();
   });
 
   it('renders all the messages', () => {
     expect(wrapper.element).toMatchSnapshot();
   });
 
+  describe('install command switch', () => {
+    it('has the installation title component', () => {
+      expect(findInstallationTitle().exists()).toBe(true);
+      expect(findInstallationTitle().props()).toMatchObject({
+        packageType: 'npm',
+        options: [{ value: 'npm', label: 'Show NPM commands' }],
+      });
+    });
+  });
+
   describe('installation commands', () => {
     it('renders the correct npm command', () => {
       expect(findCodeInstructions().at(0).props()).toMatchObject({
diff --git a/spec/frontend/packages/details/components/nuget_installation_spec.js b/spec/frontend/packages/details/components/nuget_installation_spec.js
index 100e369751c..8839a8f1108 100644
--- a/spec/frontend/packages/details/components/nuget_installation_spec.js
+++ b/spec/frontend/packages/details/components/nuget_installation_spec.js
@@ -2,6 +2,7 @@ import { shallowMount, createLocalVue } from '@vue/test-utils';
 import Vuex from 'vuex';
 import { registryUrl as nugetPath } from 'jest/packages/details/mock_data';
 import { nugetPackage as packageEntity } from 'jest/packages/mock_data';
+import InstallationTitle from '~/packages/details/components/installation_title.vue';
 import NugetInstallation from '~/packages/details/components/nuget_installation.vue';
 import { TrackingActions } from '~/packages/details/constants';
 import CodeInstructions from '~/vue_shared/components/registry/code_instruction.vue';
@@ -27,6 +28,7 @@ describe('NugetInstallation', () => {
   });
 
   const findCodeInstructions = () => wrapper.findAll(CodeInstructions);
+  const findInstallationTitle = () => wrapper.findComponent(InstallationTitle);
 
   function createComponent() {
     wrapper = shallowMount(NugetInstallation, {
@@ -40,13 +42,23 @@ describe('NugetInstallation', () => {
   });
 
   afterEach(() => {
-    if (wrapper) wrapper.destroy();
+    wrapper.destroy();
   });
 
   it('renders all the messages', () => {
     expect(wrapper.element).toMatchSnapshot();
   });
 
+  describe('install command switch', () => {
+    it('has the installation title component', () => {
+      expect(findInstallationTitle().exists()).toBe(true);
+      expect(findInstallationTitle().props()).toMatchObject({
+        packageType: 'nuget',
+        options: [{ value: 'nuget', label: 'Show Nuget commands' }],
+      });
+    });
+  });
+
   describe('installation commands', () => {
     it('renders the correct command', () => {
       expect(findCodeInstructions().at(0).props()).toMatchObject({
diff --git a/spec/frontend/packages/details/components/pypi_installation_spec.js b/spec/frontend/packages/details/components/pypi_installation_spec.js
index a6ccba71554..2cec84282d9 100644
--- a/spec/frontend/packages/details/components/pypi_installation_spec.js
+++ b/spec/frontend/packages/details/components/pypi_installation_spec.js
@@ -1,6 +1,7 @@
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import Vuex from 'vuex';
 import { pypiPackage as packageEntity } from 'jest/packages/mock_data';
+import InstallationTitle from '~/packages/details/components/installation_title.vue';
 import PypiInstallation from '~/packages/details/components/pypi_installation.vue';
 
 const localVue = createLocalVue();
@@ -26,6 +27,8 @@ describe('PypiInstallation', () => {
   const pipCommand = () => wrapper.find('[data-testid="pip-command"]');
   const setupInstruction = () => wrapper.find('[data-testid="pypi-setup-content"]');
 
+  const findInstallationTitle = () => wrapper.findComponent(InstallationTitle);
+
   function createComponent() {
     wrapper = shallowMount(PypiInstallation, {
       localVue,
@@ -39,7 +42,16 @@ describe('PypiInstallation', () => {
 
   afterEach(() => {
     wrapper.destroy();
-    wrapper = null;
+  });
+
+  describe('install command switch', () => {
+    it('has the installation title component', () => {
+      expect(findInstallationTitle().exists()).toBe(true);
+      expect(findInstallationTitle().props()).toMatchObject({
+        packageType: 'pypi',
+        options: [{ value: 'pypi', label: 'Show PyPi commands' }],
+      });
+    });
   });
 
   it('renders all the messages', () => {
diff --git a/spec/frontend/packages/details/store/getters_spec.js b/spec/frontend/packages/details/store/getters_spec.js
index 07c120f57f7..f12b75d3b70 100644
--- a/spec/frontend/packages/details/store/getters_spec.js
+++ b/spec/frontend/packages/details/store/getters_spec.js
@@ -17,6 +17,8 @@ import {
   composerRegistryInclude,
   composerPackageInclude,
   groupExists,
+  gradleGroovyInstalCommand,
+  gradleGroovyAddSourceCommand,
 } from '~/packages/details/store/getters';
 import {
   conanPackage,
@@ -99,7 +101,7 @@ describe('Getters PackageDetails Store', () => {
       packageEntity              | expectedResult
       ${conanPackage}            | ${'Conan'}
       ${packageWithoutBuildInfo} | ${'Maven'}
-      ${npmPackage}              | ${'NPM'}
+      ${npmPackage}              | ${'npm'}
       ${nugetPackage}            | ${'NuGet'}
       ${pypiPackage}             | ${'PyPI'}
     `(`package type`, ({ packageEntity, expectedResult }) => {
@@ -168,13 +170,13 @@ describe('Getters PackageDetails Store', () => {
   });
 
   describe('npm string getters', () => {
-    it('gets the correct npmInstallationCommand for NPM', () => {
+    it('gets the correct npmInstallationCommand for npm', () => {
       setupState({ packageEntity: npmPackage });
 
       expect(npmInstallationCommand(state)(NpmManager.NPM)).toBe(npmInstallStr);
     });
 
-    it('gets the correct npmSetupCommand for NPM', () => {
+    it('gets the correct npmSetupCommand for npm', () => {
       setupState({ packageEntity: npmPackage });
 
       expect(npmSetupCommand(state)(NpmManager.NPM)).toBe(npmSetupStr);
@@ -235,6 +237,26 @@ describe('Getters PackageDetails Store', () => {
     });
   });
 
+  describe('gradle groovy string getters', () => {
+    it('gets the correct gradleGroovyInstalCommand', () => {
+      setupState();
+
+      expect(gradleGroovyInstalCommand(state)).toMatchInlineSnapshot(
+        `"implementation 'com.test.app:test-app:1.0-SNAPSHOT'"`,
+      );
+    });
+
+    it('gets the correct gradleGroovyAddSourceCommand', () => {
+      setupState();
+
+      expect(gradleGroovyAddSourceCommand(state)).toMatchInlineSnapshot(`
+        "maven {
+          url 'foo/registry'
+        }"
+      `);
+    });
+  });
+
   describe('check if group', () => {
     it('is set', () => {
       setupState({ groupListUrl: '/groups/composer/-/packages' });
diff --git a/spec/frontend/packages/shared/components/__snapshots__/package_list_row_spec.js.snap b/spec/frontend/packages/shared/components/__snapshots__/package_list_row_spec.js.snap
index 4a75deebcf9..77095f7c611 100644
--- a/spec/frontend/packages/shared/components/__snapshots__/package_list_row_spec.js.snap
+++ b/spec/frontend/packages/shared/components/__snapshots__/package_list_row_spec.js.snap
@@ -6,7 +6,7 @@ exports[`packages_list_row renders 1`] = `
   data-qa-selector="package_row"
 >
   <div
-    class="gl-display-flex gl-align-items-center gl-py-3"
+    class="gl-display-flex gl-align-items-center gl-py-3 gl-px-5"
   >
     <!---->
      
@@ -102,7 +102,7 @@ exports[`packages_list_row renders 1`] = `
       <gl-button-stub
         aria-label="Remove package"
         buttontextclasses=""
-        category="primary"
+        category="secondary"
         data-testid="action-delete"
         icon="remove"
         size="medium"
diff --git a/spec/frontend/packages/shared/components/package_list_row_spec.js b/spec/frontend/packages/shared/components/package_list_row_spec.js
index bd122167273..1c0ef7e3539 100644
--- a/spec/frontend/packages/shared/components/package_list_row_spec.js
+++ b/spec/frontend/packages/shared/components/package_list_row_spec.js
@@ -60,11 +60,9 @@ describe('packages_list_row', () => {
   });
 
   describe('when is is group', () => {
-    beforeEach(() => {
+    it('has a package path component', () => {
       mountComponent({ isGroup: true });
-    });
 
-    it('has a package path component', () => {
       expect(findPackagePath().exists()).toBe(true);
       expect(findPackagePath().props()).toMatchObject({ path: 'foo/bar/baz' });
     });
@@ -92,10 +90,22 @@ describe('packages_list_row', () => {
     });
   });
 
-  describe('delete event', () => {
-    beforeEach(() => mountComponent({ packageEntity: packageWithoutTags }));
+  describe('delete button', () => {
+    it('exists and has the correct props', () => {
+      mountComponent({ packageEntity: packageWithoutTags });
+
+      expect(findDeleteButton().exists()).toBe(true);
+      expect(findDeleteButton().attributes()).toMatchObject({
+        icon: 'remove',
+        category: 'secondary',
+        variant: 'danger',
+        title: 'Remove package',
+      });
+    });
 
     it('emits the packageToDelete event when the delete button is clicked', async () => {
+      mountComponent({ packageEntity: packageWithoutTags });
+
       findDeleteButton().vm.$emit('click');
 
       await wrapper.vm.$nextTick();
diff --git a/spec/frontend/packages/shared/utils_spec.js b/spec/frontend/packages/shared/utils_spec.js
index 506f37f8895..4a95def1bef 100644
--- a/spec/frontend/packages/shared/utils_spec.js
+++ b/spec/frontend/packages/shared/utils_spec.js
@@ -35,7 +35,7 @@ describe('Packages shared utils', () => {
       packageType   | expectedResult
       ${'conan'}    | ${'Conan'}
       ${'maven'}    | ${'Maven'}
-      ${'npm'}      | ${'NPM'}
+      ${'npm'}      | ${'npm'}
       ${'nuget'}    | ${'NuGet'}
       ${'pypi'}     | ${'PyPI'}
       ${'composer'} | ${'Composer'}