Merge branch...

Merge branch '207467-add-gradle-setup-and-install-commands-to-the-package-details-page-2' into 'master'

Add Gradle instructions and instruction selector to package details

See merge request gitlab-org/gitlab!55738

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

@@ -2,12 +2,14 @@
 import { GlLink, GlSprintf } from '@gitlab/ui';
 import { mapGetters, mapState } from 'vuex';
 import { s__ } from '~/locale';
+import InstallationTitle from '~/packages/details/components/installation_title.vue';
 import CodeInstruction from '~/vue_shared/components/registry/code_instruction.vue';
 import { TrackingActions, TrackingLabels } from '../constants';
 
 export default {
   name: 'ComposerInstallation',
   components: {
+    InstallationTitle,
     CodeInstruction,
     GlLink,
     GlSprintf,
@@ -27,12 +29,13 @@ export default {
   },
   trackingActions: { ...TrackingActions },
   TrackingLabels,
+  installOptions: [{ value: 'composer', label: s__('PackageRegistry|Show Composer commands') }],
 };
 </script>
 
 <template>
   <div v-if="groupExists" data-testid="root-node">
-    <h3 class="gl-font-lg">{{ __('Installation') }}</h3>
+    <installation-title package-type="composer" :options="$options.installOptions" />
 
     <code-instruction
       :label="$options.i18n.registryInclude"

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

@@ -2,12 +2,14 @@
 import { GlLink, GlSprintf } from '@gitlab/ui';
 import { mapGetters, mapState } from 'vuex';
 import { s__ } from '~/locale';
+import InstallationTitle from '~/packages/details/components/installation_title.vue';
 import CodeInstruction from '~/vue_shared/components/registry/code_instruction.vue';
 import { TrackingActions, TrackingLabels } from '../constants';
 
 export default {
   name: 'ConanInstallation',
   components: {
+    InstallationTitle,
     CodeInstruction,
     GlLink,
     GlSprintf,
@@ -23,12 +25,13 @@ export default {
   },
   trackingActions: { ...TrackingActions },
   TrackingLabels,
+  installOptions: [{ value: 'conan', label: s__('PackageRegistry|Show Conan commands') }],
 };
 </script>
 
 <template>
   <div>
-    <h3 class="gl-font-lg">{{ __('Installation') }}</h3>
+    <installation-title package-type="conan" :options="$options.installOptions" />
 
     <code-instruction
       :label="s__('PackageRegistry|Conan Command')"

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

+<script>
+import PersistedDropdownSelection from '~/vue_shared/components/registry/persisted_dropdown_selection.vue';
+
+export default {
+  name: 'InstallationTitle',
+  components: {
+    PersistedDropdownSelection,
+  },
+  props: {
+    packageType: {
+      type: String,
+      required: true,
+    },
+    options: {
+      type: Array,
+      required: true,
+    },
+  },
+  computed: {
+    storageKey() {
+      return `package_${this.packageType}_installation_instructions`;
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="gl-display-flex gl-justify-content-space-between gl-align-items-center">
+    <h3 class="gl-font-lg">{{ __('Installation') }}</h3>
+    <div>
+      <persisted-dropdown-selection
+        :storage-key="storageKey"
+        :options="options"
+        @change="$emit('change', $event)"
+      />
+    </div>
+  </div>
+</template>

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

@@ -2,12 +2,15 @@
 import { GlLink, GlSprintf } from '@gitlab/ui';
 import { mapGetters, mapState } from 'vuex';
 import { s__ } from '~/locale';
+import InstallationTitle from '~/packages/details/components/installation_title.vue';
 import CodeInstruction from '~/vue_shared/components/registry/code_instruction.vue';
+
 import { TrackingActions, TrackingLabels } from '../constants';
 
 export default {
   name: 'MavenInstallation',
   components: {
+    InstallationTitle,
     CodeInstruction,
     GlLink,
     GlSprintf,
@@ -19,7 +22,13 @@ export default {
   },
   computed: {
     ...mapState(['mavenHelpPath']),
-    ...mapGetters(['mavenInstallationXml', 'mavenInstallationCommand', 'mavenSetupXml']),
+    ...mapGetters([
+      'mavenInstallationXml',
+      'mavenInstallationCommand',
+      'mavenSetupXml',
+      'gradleGroovyInstalCommand',
+      'gradleGroovyAddSourceCommand',
+    ]),
     showMaven() {
       return this.instructionType === 'maven';
     },
@@ -37,12 +46,20 @@ export default {
   },
   trackingActions: { ...TrackingActions },
   TrackingLabels,
+  installOptions: [
+    { value: 'maven', label: s__('PackageRegistry|Show Maven commands') },
+    { value: 'groovy', label: s__('PackageRegistry|Show Gradle Groovy DSL commands') },
+  ],
 };
 </script>
 
 <template>
   <div>
-    <h3 class="gl-font-lg">{{ __('Installation') }}</h3>
+    <installation-title
+      package-type="maven"
+      :options="$options.installOptions"
+      @change="instructionType = $event"
+    />
 
     <template v-if="showMaven">
       <p>
@@ -90,5 +107,23 @@ export default {
         </template>
       </gl-sprintf>
     </template>
+    <template v-else>
+      <code-instruction
+        class="gl-mb-5"
+        :label="s__('PackageRegistry|Gradle Groovy DSL install command')"
+        :instruction="gradleGroovyInstalCommand"
+        :copy-text="s__('PackageRegistry|Copy Gradle Groovy DSL install command')"
+        :tracking-action="$options.trackingActions.COPY_GRADLE_INSTALL_COMMAND"
+        :tracking-label="$options.TrackingLabels.CODE_INSTRUCTION"
+      />
+      <code-instruction
+        :label="s__('PackageRegistry|Add Gradle Groovy DSL repository command')"
+        :instruction="gradleGroovyAddSourceCommand"
+        :copy-text="s__('PackageRegistry|Copy add Gradle Groovy DSL repository command')"
+        :tracking-action="$options.trackingActions.COPY_GRADLE_ADD_TO_SOURCE_COMMAND"
+        :tracking-label="$options.TrackingLabels.CODE_INSTRUCTION"
+        multiline
+      />
+    </template>
   </div>
 </template>

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

@@ -2,12 +2,14 @@
 import { GlLink, GlSprintf } from '@gitlab/ui';
 import { mapGetters, mapState } from 'vuex';
 import { s__ } from '~/locale';
+import InstallationTitle from '~/packages/details/components/installation_title.vue';
 import CodeInstruction from '~/vue_shared/components/registry/code_instruction.vue';
 import { NpmManager, TrackingActions, TrackingLabels } from '../constants';
 
 export default {
   name: 'NpmInstallation',
   components: {
+    InstallationTitle,
     CodeInstruction,
     GlLink,
     GlSprintf,
@@ -35,12 +37,13 @@ export default {
   },
   trackingActions: { ...TrackingActions },
   TrackingLabels,
+  installOptions: [{ value: 'npm', label: s__('PackageRegistry|Show NPM commands') }],
 };
 </script>
 
 <template>
   <div>
-    <h3 class="gl-font-lg">{{ __('Installation') }}</h3>
+    <installation-title package-type="npm" :options="$options.installOptions" />
 
     <code-instruction
       :label="s__('PackageRegistry|npm command')"

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

@@ -2,12 +2,14 @@
 import { GlLink, GlSprintf } from '@gitlab/ui';
 import { mapGetters, mapState } from 'vuex';
 import { s__ } from '~/locale';
+import InstallationTitle from '~/packages/details/components/installation_title.vue';
 import CodeInstruction from '~/vue_shared/components/registry/code_instruction.vue';
 import { TrackingActions, TrackingLabels } from '../constants';
 
 export default {
   name: 'NugetInstallation',
   components: {
+    InstallationTitle,
     CodeInstruction,
     GlLink,
     GlSprintf,
@@ -23,12 +25,14 @@ export default {
   },
   trackingActions: { ...TrackingActions },
   TrackingLabels,
+  installOptions: [{ value: 'nuget', label: s__('PackageRegistry|Show Nuget commands') }],
 };
 </script>
 
 <template>
   <div>
-    <h3 class="gl-font-lg">{{ __('Installation') }}</h3>
+    <installation-title package-type="nuget" :options="$options.installOptions" />
+
     <code-instruction
       :label="s__('PackageRegistry|NuGet Command')"
       :instruction="nugetInstallationCommand"

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

@@ -2,12 +2,14 @@
 import { GlLink, GlSprintf } from '@gitlab/ui';
 import { mapGetters, mapState } from 'vuex';
 import { s__ } from '~/locale';
+import InstallationTitle from '~/packages/details/components/installation_title.vue';
 import CodeInstruction from '~/vue_shared/components/registry/code_instruction.vue';
 import { TrackingActions, TrackingLabels } from '../constants';
 
 export default {
   name: 'PyPiInstallation',
   components: {
+    InstallationTitle,
     CodeInstruction,
     GlLink,
     GlSprintf,
@@ -26,12 +28,13 @@ export default {
   },
   trackingActions: { ...TrackingActions },
   TrackingLabels,
+  installOptions: [{ value: 'pypi', label: s__('PackageRegistry|Show PyPi commands') }],
 };
 </script>
 
 <template>
   <div>
-    <h3 class="gl-font-lg">{{ __('Installation') }}</h3>
+    <installation-title package-type="pypi" :options="$options.installOptions" />
 
     <code-instruction
       :label="s__('PackageRegistry|Pip Command')"

app/assets/javascripts/packages/details/constants.js

@@ -35,6 +35,9 @@ export const TrackingActions = {
 
   COPY_COMPOSER_REGISTRY_INCLUDE_COMMAND: 'copy_composer_registry_include_command',
   COPY_COMPOSER_PACKAGE_INCLUDE_COMMAND: 'copy_composer_package_include_command',
+
+  COPY_GRADLE_INSTALL_COMMAND: 'copy_gradle_install_command',
+  COPY_GRADLE_ADD_TO_SOURCE_COMMAND: 'copy_gradle_add_to_source_command',
 };
 
 export const NpmManager = {

app/assets/javascripts/packages/details/store/getters.js

@@ -110,4 +110,20 @@ export const composerPackageInclude = ({ packageEntity }) =>
   // eslint-disable-next-line @gitlab/require-i18n-strings
   `composer req ${[packageEntity.name]}:${packageEntity.version}`;
 
+export const gradleGroovyInstalCommand = ({ packageEntity }) => {
+  const {
+    app_group: group = '',
+    app_name: name = '',
+    app_version: version = '',
+  } = packageEntity.maven_metadatum;
+  // eslint-disable-next-line @gitlab/require-i18n-strings
+  return `implementation '${group}:${name}:${version}'`;
+};
+
+export const gradleGroovyAddSourceCommand = ({ mavenPath }) =>
+  // eslint-disable-next-line @gitlab/require-i18n-strings
+  `gitlab {
+  url "${mavenPath}"
+}`;
+
 export const groupExists = ({ groupListUrl }) => groupListUrl.length > 0;

changelogs/unreleased/207467-add-gradle-setup-and-install-commands-to-the-package-details-page-.yml

+---
+title: Add Gradle instructions and instruction selector to package details
+merge_request: 55738
+author:
+type: changed

locale/gitlab.pot

@@ -21583,6 +21583,9 @@ msgstr ""
 msgid "PackageRegistry|Add Conan Remote"
 msgstr ""
 
+msgid "PackageRegistry|Add Gradle Groovy DSL repository command"
+msgstr ""
+
 msgid "PackageRegistry|Add NuGet Source"
 msgstr ""
 
@@ -21619,6 +21622,9 @@ msgstr ""
 msgid "PackageRegistry|Copy Conan Setup Command"
 msgstr ""
 
+msgid "PackageRegistry|Copy Gradle Groovy DSL install command"
+msgstr ""
+
 msgid "PackageRegistry|Copy Maven XML"
 msgstr ""
 
@@ -21637,6 +21643,9 @@ msgstr ""
 msgid "PackageRegistry|Copy Pip command"
 msgstr ""
 
+msgid "PackageRegistry|Copy add Gradle Groovy DSL repository command"
+msgstr ""
+
 msgid "PackageRegistry|Copy and paste this inside your %{codeStart}pom.xml%{codeEnd} %{codeStart}dependencies%{codeEnd} block."
 msgstr ""
 
@@ -21688,6 +21697,9 @@ msgstr ""
 msgid "PackageRegistry|GitLab Packages allows organizations to utilize GitLab as a private repository for a variety of common package formats. %{linkStart}More Information%{linkEnd}"
 msgstr ""
 
+msgid "PackageRegistry|Gradle Groovy DSL install command"
+msgstr ""
+
 msgid "PackageRegistry|If you haven't already done so, you will need to add the below to your %{codeStart}.pypirc%{codeEnd} file."
 msgstr ""
 
@@ -21760,6 +21772,27 @@ msgstr ""
 msgid "PackageRegistry|Settings saved successfully"
 msgstr ""
 
+msgid "PackageRegistry|Show Composer commands"
+msgstr ""
+
+msgid "PackageRegistry|Show Conan commands"
+msgstr ""
+
+msgid "PackageRegistry|Show Gradle Groovy DSL commands"
+msgstr ""
+
+msgid "PackageRegistry|Show Maven commands"
+msgstr ""
+
+msgid "PackageRegistry|Show NPM commands"
+msgstr ""
+
+msgid "PackageRegistry|Show Nuget commands"
+msgstr ""
+
+msgid "PackageRegistry|Show PyPi commands"
+msgstr ""
+
 msgid "PackageRegistry|Sorry, your filter produced no results"
 msgstr ""
 

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"

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`] = `
+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

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"

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"

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"

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();

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

 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);

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

+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']]);
+    });
+  });
+});

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

 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,24 +29,59 @@ 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(() => {
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  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' },
+        ],
+      });
     });
 
-  afterEach(() => {
-    if (wrapper) wrapper.destroy();
+    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('maven', () => {
+    beforeEach(() => {
+      createComponent();
     });
 
     it('renders all the messages', () => {
@@ -76,4 +115,35 @@ describe('MavenInstallation', () => {
         });
       });
     });
+  });
+
+  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,
+        });
+      });
+    });
+  });
 });

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({

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({

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

 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', () => {

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,
@@ -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(`
+        "gitlab {
+          url \\"foo/registry\\"
+        }"
+      `);
+    });
+  });
+
   describe('check if group', () => {
     it('is set', () => {
       setupState({ groupListUrl: '/groups/composer/-/packages' });