Merge branch '330847-convert-package-details-page-to-use-graphql-2' into 'master'

Refactor installation components to Apollo in package details

See merge request gitlab-org/gitlab!67320

app/assets/javascripts/packages_and_registries/package_registry/components/details/composer_installation.vue

 <script>
 import { GlLink, GlSprintf } from '@gitlab/ui';
-import { mapGetters, mapState } from 'vuex';
 import { s__ } from '~/locale';
-import { TrackingActions, TrackingLabels } from '~/packages/details/constants';
 import InstallationTitle from '~/packages_and_registries/package_registry/components/details/installation_title.vue';
+import {
+  TRACKING_ACTION_COPY_COMPOSER_REGISTRY_INCLUDE_COMMAND,
+  TRACKING_ACTION_COPY_COMPOSER_PACKAGE_INCLUDE_COMMAND,
+  TRACKING_LABEL_CODE_INSTRUCTION,
+} from '~/packages_and_registries/package_registry/constants';
 import CodeInstruction from '~/vue_shared/components/registry/code_instruction.vue';
 
 export default {
@@ -14,9 +17,25 @@ export default {
     GlLink,
     GlSprintf,
   },
+  inject: ['composerHelpPath', 'composerConfigRepositoryName', 'composerPath', 'groupListUrl'],
+  props: {
+    packageEntity: {
+      type: Object,
+      required: true,
+    },
+  },
   computed: {
-    ...mapState(['composerHelpPath']),
-    ...mapGetters(['composerRegistryInclude', 'composerPackageInclude', 'groupExists']),
+    composerRegistryInclude() {
+      // eslint-disable-next-line @gitlab/require-i18n-strings
+      return `composer config repositories.${this.composerConfigRepositoryName} '{"type": "composer", "url": "${this.composerPath}"}'`;
+    },
+    composerPackageInclude() {
+      // eslint-disable-next-line @gitlab/require-i18n-strings
+      return `composer req ${[this.packageEntity.name]}:${this.packageEntity.version}`;
+    },
+    groupExists() {
+      return this.groupListUrl?.length > 0;
+    },
   },
   i18n: {
     registryInclude: s__('PackageRegistry|Add composer registry'),
@@ -27,8 +46,11 @@ export default {
       'PackageRegistry|For more information on Composer packages in GitLab, %{linkStart}see the documentation.%{linkEnd}',
     ),
   },
-  trackingActions: { ...TrackingActions },
-  TrackingLabels,
+  tracking: {
+    TRACKING_ACTION_COPY_COMPOSER_REGISTRY_INCLUDE_COMMAND,
+    TRACKING_ACTION_COPY_COMPOSER_PACKAGE_INCLUDE_COMMAND,
+    TRACKING_LABEL_CODE_INSTRUCTION,
+  },
   installOptions: [{ value: 'composer', label: s__('PackageRegistry|Show Composer commands') }],
 };
 </script>
@@ -41,8 +63,8 @@ export default {
       :label="$options.i18n.registryInclude"
       :instruction="composerRegistryInclude"
       :copy-text="$options.i18n.copyRegistryInclude"
-      :tracking-action="$options.trackingActions.COPY_COMPOSER_REGISTRY_INCLUDE_COMMAND"
-      :tracking-label="$options.TrackingLabels.CODE_INSTRUCTION"
+      :tracking-action="$options.tracking.TRACKING_ACTION_COPY_COMPOSER_REGISTRY_INCLUDE_COMMAND"
+      :tracking-label="$options.tracking.TRACKING_LABEL_CODE_INSTRUCTION"
       data-testid="registry-include"
     />
 
@@ -50,8 +72,8 @@ export default {
       :label="$options.i18n.packageInclude"
       :instruction="composerPackageInclude"
       :copy-text="$options.i18n.copyPackageInclude"
-      :tracking-action="$options.trackingActions.COPY_COMPOSER_PACKAGE_INCLUDE_COMMAND"
-      :tracking-label="$options.TrackingLabels.CODE_INSTRUCTION"
+      :tracking-action="$options.tracking.TRACKING_ACTION_COPY_COMPOSER_PACKAGE_INCLUDE_COMMAND"
+      :tracking-label="$options.tracking.TRACKING_LABEL_CODE_INSTRUCTION"
       data-testid="package-include"
     />
     <span data-testid="help-text">

app/assets/javascripts/packages_and_registries/package_registry/components/details/conan_installation.vue

 <script>
 import { GlLink, GlSprintf } from '@gitlab/ui';
-import { mapGetters, mapState } from 'vuex';
 import { s__ } from '~/locale';
-import { TrackingActions, TrackingLabels } from '~/packages/details/constants';
 import InstallationTitle from '~/packages_and_registries/package_registry/components/details/installation_title.vue';
+import {
+  TRACKING_ACTION_COPY_CONAN_COMMAND,
+  TRACKING_ACTION_COPY_CONAN_SETUP_COMMAND,
+  TRACKING_LABEL_CODE_INSTRUCTION,
+} from '~/packages_and_registries/package_registry/constants';
 import CodeInstruction from '~/vue_shared/components/registry/code_instruction.vue';
 
 export default {
@@ -14,17 +17,34 @@ export default {
     GlLink,
     GlSprintf,
   },
+  inject: ['conanHelpPath', 'conanPath'],
+  props: {
+    packageEntity: {
+      type: Object,
+      required: true,
+    },
+  },
   computed: {
-    ...mapState(['conanHelpPath']),
-    ...mapGetters(['conanInstallationCommand', 'conanSetupCommand']),
+    conanInstallationCommand() {
+      // eslint-disable-next-line @gitlab/require-i18n-strings
+      return `conan install ${this.packageEntity.name} --remote=gitlab`;
+    },
+    conanSetupCommand() {
+      // eslint-disable-next-line @gitlab/require-i18n-strings
+      return `conan remote add gitlab ${this.conanPath}`;
+    },
   },
   i18n: {
     helpText: s__(
       'PackageRegistry|For more information on the Conan registry, %{linkStart}see the documentation%{linkEnd}.',
     ),
   },
-  trackingActions: { ...TrackingActions },
-  TrackingLabels,
+  tracking: {
+    TRACKING_ACTION_COPY_CONAN_COMMAND,
+    TRACKING_ACTION_COPY_CONAN_SETUP_COMMAND,
+    TRACKING_LABEL_CODE_INSTRUCTION,
+  },
+
   installOptions: [{ value: 'conan', label: s__('PackageRegistry|Show Conan commands') }],
 };
 </script>
@@ -37,8 +57,8 @@ export default {
       :label="s__('PackageRegistry|Conan Command')"
       :instruction="conanInstallationCommand"
       :copy-text="s__('PackageRegistry|Copy Conan Command')"
-      :tracking-action="$options.trackingActions.COPY_CONAN_COMMAND"
-      :tracking-label="$options.TrackingLabels.CODE_INSTRUCTION"
+      :tracking-action="$options.tracking.TRACKING_ACTION_COPY_CONAN_COMMAND"
+      :tracking-label="$options.tracking.TRACKING_LABEL_CODE_INSTRUCTION"
     />
 
     <h3 class="gl-font-lg">{{ __('Registry setup') }}</h3>
@@ -47,8 +67,8 @@ export default {
       :label="s__('PackageRegistry|Add Conan Remote')"
       :instruction="conanSetupCommand"
       :copy-text="s__('PackageRegistry|Copy Conan Setup Command')"
-      :tracking-action="$options.trackingActions.COPY_CONAN_SETUP_COMMAND"
-      :tracking-label="$options.TrackingLabels.CODE_INSTRUCTION"
+      :tracking-action="$options.tracking.TRACKING_ACTION_COPY_CONAN_SETUP_COMMAND"
+      :tracking-label="$options.tracking.TRACKING_LABEL_CODE_INSTRUCTION"
     />
     <gl-sprintf :message="$options.i18n.helpText">
       <template #link="{ content }">

app/assets/javascripts/packages_and_registries/package_registry/components/details/installation_commands.vue

 <script>
-import { PackageType, TERRAFORM_PACKAGE_TYPE } from '~/packages/shared/constants';
-import TerraformInstallation from '~/packages_and_registries/infrastructure_registry/components/terraform_installation.vue';
+import {
+  PACKAGE_TYPE_CONAN,
+  PACKAGE_TYPE_MAVEN,
+  PACKAGE_TYPE_NPM,
+  PACKAGE_TYPE_NUGET,
+  PACKAGE_TYPE_PYPI,
+  PACKAGE_TYPE_COMPOSER,
+} from '~/packages_and_registries/package_registry/constants';
 import ComposerInstallation from './composer_installation.vue';
 import ConanInstallation from './conan_installation.vue';
 import MavenInstallation from './maven_installation.vue';
@@ -11,33 +17,22 @@ import PypiInstallation from './pypi_installation.vue';
 export default {
   name: 'InstallationCommands',
   components: {
-    [PackageType.CONAN]: ConanInstallation,
-    [PackageType.MAVEN]: MavenInstallation,
-    [PackageType.NPM]: NpmInstallation,
-    [PackageType.NUGET]: NugetInstallation,
-    [PackageType.PYPI]: PypiInstallation,
-    [PackageType.COMPOSER]: ComposerInstallation,
-    [TERRAFORM_PACKAGE_TYPE]: TerraformInstallation,
+    [PACKAGE_TYPE_CONAN]: ConanInstallation,
+    [PACKAGE_TYPE_MAVEN]: MavenInstallation,
+    [PACKAGE_TYPE_NPM]: NpmInstallation,
+    [PACKAGE_TYPE_NUGET]: NugetInstallation,
+    [PACKAGE_TYPE_PYPI]: PypiInstallation,
+    [PACKAGE_TYPE_COMPOSER]: ComposerInstallation,
   },
   props: {
     packageEntity: {
       type: Object,
       required: true,
     },
-    npmPath: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    npmHelpPath: {
-      type: String,
-      required: false,
-      default: '',
-    },
   },
   computed: {
     installationComponent() {
-      return this.$options.components[this.packageEntity.package_type];
+      return this.$options.components[this.packageEntity.packageType];
     },
   },
 };
@@ -45,11 +40,6 @@ export default {
 
 <template>
   <div v-if="installationComponent">
-    <component
-      :is="installationComponent"
-      :name="packageEntity.name"
-      :registry-url="npmPath"
-      :help-url="npmHelpPath"
-    />
+    <component :is="installationComponent" :package-entity="packageEntity" />
   </div>
 </template>

app/assets/javascripts/packages_and_registries/package_registry/components/details/maven_installation.vue

 <script>
 import { GlLink, GlSprintf } from '@gitlab/ui';
-import { mapGetters, mapState } from 'vuex';
 import { s__ } from '~/locale';
-import { TrackingActions, TrackingLabels } from '~/packages/details/constants';
 import InstallationTitle from '~/packages_and_registries/package_registry/components/details/installation_title.vue';
+import {
+  TRACKING_ACTION_COPY_MAVEN_XML,
+  TRACKING_ACTION_COPY_MAVEN_COMMAND,
+  TRACKING_ACTION_COPY_MAVEN_SETUP,
+  TRACKING_ACTION_COPY_GRADLE_INSTALL_COMMAND,
+  TRACKING_ACTION_COPY_GRADLE_ADD_TO_SOURCE_COMMAND,
+  TRACKING_ACTION_COPY_KOTLIN_INSTALL_COMMAND,
+  TRACKING_ACTION_COPY_KOTLIN_ADD_TO_SOURCE_COMMAND,
+  TRACKING_LABEL_CODE_INSTRUCTION,
+  TRACKING_LABEL_MAVEN_INSTALLATION,
+} from '~/packages_and_registries/package_registry/constants';
 import CodeInstruction from '~/vue_shared/components/registry/code_instruction.vue';
 
 export default {
@@ -14,22 +23,80 @@ export default {
     GlLink,
     GlSprintf,
   },
+  inject: ['mavenHelpPath', 'mavenPath'],
+  props: {
+    packageEntity: {
+      type: Object,
+      required: true,
+    },
+  },
   data() {
     return {
       instructionType: 'maven',
     };
   },
   computed: {
-    ...mapState(['mavenHelpPath']),
-    ...mapGetters([
-      'mavenInstallationXml',
-      'mavenInstallationCommand',
-      'mavenSetupXml',
-      'gradleGroovyInstalCommand',
-      'gradleGroovyAddSourceCommand',
-      'gradleKotlinInstalCommand',
-      'gradleKotlinAddSourceCommand',
-    ]),
+    appGroup() {
+      return this.packageEntity.metadata.appGroup;
+    },
+    appName() {
+      return this.packageEntity.metadata.appName;
+    },
+    appVersion() {
+      return this.packageEntity.metadata.appVersion;
+    },
+    mavenInstallationXml() {
+      return `<dependency>
+  <groupId>${this.appGroup}</groupId>
+  <artifactId>${this.appName}</artifactId>
+  <version>${this.appVersion}</version>
+</dependency>`;
+    },
+
+    mavenInstallationCommand() {
+      return `mvn dependency:get -Dartifact=${this.appGroup}:${this.appName}:${this.appVersion}`;
+    },
+
+    mavenSetupXml() {
+      return `<repositories>
+  <repository>
+    <id>gitlab-maven</id>
+    <url>${this.mavenPath}</url>
+  </repository>
+</repositories>
+
+<distributionManagement>
+  <repository>
+    <id>gitlab-maven</id>
+    <url>${this.mavenPath}</url>
+  </repository>
+
+  <snapshotRepository>
+    <id>gitlab-maven</id>
+    <url>${this.mavenPath}</url>
+  </snapshotRepository>
+</distributionManagement>`;
+    },
+
+    gradleGroovyInstalCommand() {
+      // eslint-disable-next-line @gitlab/require-i18n-strings
+      return `implementation '${this.appGroup}:${this.appName}:${this.appVersion}'`;
+    },
+
+    gradleGroovyAddSourceCommand() {
+      // eslint-disable-next-line @gitlab/require-i18n-strings
+      return `maven {
+  url '${this.mavenPath}'
+}`;
+    },
+
+    gradleKotlinInstalCommand() {
+      return `implementation("${this.appGroup}:${this.appName}:${this.appVersion}")`;
+    },
+
+    gradleKotlinAddSourceCommand() {
+      return `maven("${this.mavenPath}")`;
+    },
     showMaven() {
       return this.instructionType === 'maven';
     },
@@ -48,8 +115,18 @@ export default {
       'PackageRegistry|For more information on the Maven registry, %{linkStart}see the documentation%{linkEnd}.',
     ),
   },
-  trackingActions: { ...TrackingActions },
-  TrackingLabels,
+  tracking: {
+    TRACKING_ACTION_COPY_MAVEN_XML,
+    TRACKING_ACTION_COPY_MAVEN_COMMAND,
+    TRACKING_ACTION_COPY_MAVEN_SETUP,
+    TRACKING_ACTION_COPY_GRADLE_INSTALL_COMMAND,
+    TRACKING_ACTION_COPY_GRADLE_ADD_TO_SOURCE_COMMAND,
+    TRACKING_ACTION_COPY_KOTLIN_INSTALL_COMMAND,
+    TRACKING_ACTION_COPY_KOTLIN_ADD_TO_SOURCE_COMMAND,
+    TRACKING_LABEL_CODE_INSTRUCTION,
+    TRACKING_LABEL_MAVEN_INSTALLATION,
+  },
+
   installOptions: [
     { value: 'maven', label: s__('PackageRegistry|Maven XML') },
     { value: 'groovy', label: s__('PackageRegistry|Gradle Groovy DSL') },
@@ -78,8 +155,8 @@ export default {
       <code-instruction
         :instruction="mavenInstallationXml"
         :copy-text="s__('PackageRegistry|Copy Maven XML')"
-        :tracking-action="$options.trackingActions.COPY_MAVEN_XML"
-        :tracking-label="$options.TrackingLabels.CODE_INSTRUCTION"
+        :tracking-action="$options.tracking.TRACKING_ACTION_COPY_MAVEN_XML"
+        :tracking-label="$options.tracking.TRACKING_LABEL_CODE_INSTRUCTION"
         multiline
       />
 
@@ -87,8 +164,8 @@ export default {
         :label="s__('PackageRegistry|Maven Command')"
         :instruction="mavenInstallationCommand"
         :copy-text="s__('PackageRegistry|Copy Maven command')"
-        :tracking-action="$options.trackingActions.COPY_MAVEN_COMMAND"
-        :tracking-label="$options.TrackingLabels.CODE_INSTRUCTION"
+        :tracking-action="$options.tracking.TRACKING_ACTION_COPY_MAVEN_COMMAND"
+        :tracking-label="$options.tracking.TRACKING_LABEL_CODE_INSTRUCTION"
       />
 
       <h3 class="gl-font-lg">{{ s__('PackageRegistry|Registry setup') }}</h3>
@@ -102,8 +179,8 @@ export default {
       <code-instruction
         :instruction="mavenSetupXml"
         :copy-text="s__('PackageRegistry|Copy Maven registry XML')"
-        :tracking-action="$options.trackingActions.COPY_MAVEN_SETUP"
-        :tracking-label="$options.TrackingLabels.CODE_INSTRUCTION"
+        :tracking-action="$options.tracking.TRACKING_ACTION_COPY_MAVEN_SETUP"
+        :tracking-label="$options.tracking.TRACKING_LABEL_CODE_INSTRUCTION"
         multiline
       />
       <gl-sprintf :message="$options.i18n.helpText">
@@ -118,15 +195,15 @@ export default {
         :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"
+        :tracking-action="$options.tracking.TRACKING_ACTION_COPY_GRADLE_INSTALL_COMMAND"
+        :tracking-label="$options.tracking.TRACKING_LABEL_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"
+        :tracking-action="$options.tracking.TRACKING_ACTION_COPY_GRADLE_ADD_TO_SOURCE_COMMAND"
+        :tracking-label="$options.tracking.TRACKING_LABEL_CODE_INSTRUCTION"
         multiline
       />
     </template>
@@ -136,15 +213,15 @@ export default {
         :label="s__('PackageRegistry|Gradle Kotlin DSL install command')"
         :instruction="gradleKotlinInstalCommand"
         :copy-text="s__('PackageRegistry|Copy Gradle Kotlin DSL install command')"
-        :tracking-action="$options.trackingActions.COPY_KOTLIN_INSTALL_COMMAND"
-        :tracking-label="$options.TrackingLabels.CODE_INSTRUCTION"
+        :tracking-action="$options.tracking.TRACKING_ACTION_COPY_KOTLIN_INSTALL_COMMAND"
+        :tracking-label="$options.tracking.TRACKING_LABEL_CODE_INSTRUCTION"
       />
       <code-instruction
         :label="s__('PackageRegistry|Add Gradle Kotlin DSL repository command')"
         :instruction="gradleKotlinAddSourceCommand"
         :copy-text="s__('PackageRegistry|Copy add Gradle Kotlin DSL repository command')"
-        :tracking-action="$options.trackingActions.COPY_KOTLIN_ADD_TO_SOURCE_COMMAND"
-        :tracking-label="$options.TrackingLabels.CODE_INSTRUCTION"
+        :tracking-action="$options.tracking.TRACKING_ACTION_COPY_KOTLIN_ADD_TO_SOURCE_COMMAND"
+        :tracking-label="$options.tracking.TRACKING_LABEL_CODE_INSTRUCTION"
         multiline
       />
     </template>

app/assets/javascripts/packages_and_registries/package_registry/constants.js

@@ -10,7 +10,6 @@ export const PACKAGE_TYPE_RUBYGEMS = 'RUBYGEMS';
 export const PACKAGE_TYPE_GENERIC = 'GENERIC';
 export const PACKAGE_TYPE_DEBIAN = 'DEBIAN';
 export const PACKAGE_TYPE_HELM = 'HELM';
-export const PACKAGE_TYPE_TERRAFORM = 'terraform_module';
 
 export const DELETE_PACKAGE_TRACKING_ACTION = 'delete_package';
 export const REQUEST_DELETE_PACKAGE_TRACKING_ACTION = 'request_delete_package';
@@ -20,6 +19,46 @@ export const DELETE_PACKAGE_FILE_TRACKING_ACTION = 'delete_package_file';
 export const REQUEST_DELETE_PACKAGE_FILE_TRACKING_ACTION = 'request_delete_package_file';
 export const CANCEL_DELETE_PACKAGE_FILE_TRACKING_ACTION = 'cancel_delete_package_file';
 
+export const TRACKING_LABEL_CODE_INSTRUCTION = 'code_instruction';
+export const TRACKING_LABEL_CONAN_INSTALLATION = 'conan_installation';
+export const TRACKING_LABEL_MAVEN_INSTALLATION = 'maven_installation';
+export const TRACKING_LABEL_NPM_INSTALLATION = 'npm_installation';
+export const TRACKING_LABEL_NUGET_INSTALLATION = 'nuget_installation';
+export const TRACKING_LABEL_PYPI_INSTALLATION = 'pypi_installation';
+export const TRACKING_LABEL_COMPOSER_INSTALLATION = 'composer_installation';
+
+export const TRACKING_ACTION_INSTALLATION = 'installation';
+export const TRACKING_ACTION_REGISTRY_SETUP = 'registry_setup';
+
+export const TRACKING_ACTION_COPY_CONAN_COMMAND = 'copy_conan_command';
+export const TRACKING_ACTION_COPY_CONAN_SETUP_COMMAND = 'copy_conan_setup_command';
+
+export const TRACKING_ACTION_COPY_MAVEN_XML = 'copy_maven_xml';
+export const TRACKING_ACTION_COPY_MAVEN_COMMAND = 'copy_maven_command';
+export const TRACKING_ACTION_COPY_MAVEN_SETUP = 'copy_maven_setup_xml';
+export const TRACKING_ACTION_COPY_GRADLE_INSTALL_COMMAND = 'copy_gradle_install_command';
+export const TRACKING_ACTION_COPY_GRADLE_ADD_TO_SOURCE_COMMAND =
+  'copy_gradle_add_to_source_command';
+export const TRACKING_ACTION_COPY_KOTLIN_INSTALL_COMMAND = 'copy_kotlin_install_command';
+export const TRACKING_ACTION_COPY_KOTLIN_ADD_TO_SOURCE_COMMAND =
+  'copy_kotlin_add_to_source_command';
+
+export const TRACKING_ACTION_COPY_NPM_INSTALL_COMMAND = 'copy_npm_install_command';
+export const TRACKING_ACTION_COPY_NPM_SETUP_COMMAND = 'copy_npm_setup_command';
+export const TRACKING_ACTION_COPY_YARN_INSTALL_COMMAND = 'copy_yarn_install_command';
+export const TRACKING_ACTION_COPY_YARN_SETUP_COMMAND = 'copy_yarn_setup_command';
+
+export const TRACKING_ACTION_COPY_NUGET_INSTALL_COMMAND = 'copy_nuget_install_command';
+export const TRACKING_ACTION_COPY_NUGET_SETUP_COMMAND = 'copy_nuget_setup_command';
+
+export const TRACKING_ACTION_COPY_PIP_INSTALL_COMMAND = 'copy_pip_install_command';
+export const TRACKING_ACTION_COPY_PYPI_SETUP_COMMAND = 'copy_pypi_setup_command';
+
+export const TRACKING_ACTION_COPY_COMPOSER_REGISTRY_INCLUDE_COMMAND =
+  'copy_composer_registry_include_command';
+export const TRACKING_ACTION_COPY_COMPOSER_PACKAGE_INCLUDE_COMMAND =
+  'copy_composer_package_include_command';
+
 export const TrackingCategories = {
   [PACKAGE_TYPE_MAVEN]: 'MavenPackages',
   [PACKAGE_TYPE_NPM]: 'NpmPackages',

spec/frontend/packages_and_registries/package_registry/components/details/__snapshots__/conan_installation_spec.js.snap

@@ -9,7 +9,7 @@ exports[`ConanInstallation renders all the messages 1`] = `
    
   <code-instruction-stub
     copytext="Copy Conan Command"
-    instruction="foo/command"
+    instruction="conan install @gitlab-org/package-15 --remote=gitlab"
     label="Conan Command"
     trackingaction="copy_conan_command"
     trackinglabel="code_instruction"
@@ -23,7 +23,7 @@ exports[`ConanInstallation renders all the messages 1`] = `
    
   <code-instruction-stub
     copytext="Copy Conan Setup Command"
-    instruction="foo/setup"
+    instruction="conan remote add gitlab conanPath"
     label="Add Conan Remote"
     trackingaction="copy_conan_setup_command"
     trackinglabel="code_instruction"

spec/frontend/packages_and_registries/package_registry/components/details/__snapshots__/maven_installation_spec.js.snap

@@ -10,7 +10,7 @@ exports[`MavenInstallation groovy renders all the messages 1`] = `
   <code-instruction-stub
     class="gl-mb-5"
     copytext="Copy Gradle Groovy DSL install command"
-    instruction="foo/gradle/groovy/install"
+    instruction="implementation 'appGroup:appName:appVersion'"
     label="Gradle Groovy DSL install command"
     trackingaction="copy_gradle_install_command"
     trackinglabel="code_instruction"
@@ -18,7 +18,9 @@ exports[`MavenInstallation groovy renders all the messages 1`] = `
    
   <code-instruction-stub
     copytext="Copy add Gradle Groovy DSL repository command"
-    instruction="foo/gradle/groovy/add/source"
+    instruction="maven {
+  url 'mavenPath'
+}"
     label="Add Gradle Groovy DSL repository command"
     multiline="true"
     trackingaction="copy_gradle_add_to_source_command"
@@ -37,7 +39,7 @@ exports[`MavenInstallation kotlin renders all the messages 1`] = `
   <code-instruction-stub
     class="gl-mb-5"
     copytext="Copy Gradle Kotlin DSL install command"
-    instruction="foo/gradle/kotlin/install"
+    instruction="implementation(\\"appGroup:appName:appVersion\\")"
     label="Gradle Kotlin DSL install command"
     trackingaction="copy_kotlin_install_command"
     trackinglabel="code_instruction"
@@ -45,7 +47,7 @@ exports[`MavenInstallation kotlin renders all the messages 1`] = `
    
   <code-instruction-stub
     copytext="Copy add Gradle Kotlin DSL repository command"
-    instruction="foo/gradle/kotlin/add/source"
+    instruction="maven(\\"mavenPath\\")"
     label="Add Gradle Kotlin DSL repository command"
     multiline="true"
     trackingaction="copy_kotlin_add_to_source_command"
@@ -69,7 +71,11 @@ exports[`MavenInstallation maven renders all the messages 1`] = `
    
   <code-instruction-stub
     copytext="Copy Maven XML"
-    instruction="foo/xml"
+    instruction="<dependency>
+  <groupId>appGroup</groupId>
+  <artifactId>appName</artifactId>
+  <version>appVersion</version>
+</dependency>"
     label=""
     multiline="true"
     trackingaction="copy_maven_xml"
@@ -78,7 +84,7 @@ exports[`MavenInstallation maven renders all the messages 1`] = `
    
   <code-instruction-stub
     copytext="Copy Maven command"
-    instruction="foo/command"
+    instruction="mvn dependency:get -Dartifact=appGroup:appName:appVersion"
     label="Maven Command"
     trackingaction="copy_maven_command"
     trackinglabel="code_instruction"
@@ -98,7 +104,24 @@ exports[`MavenInstallation maven renders all the messages 1`] = `
    
   <code-instruction-stub
     copytext="Copy Maven registry XML"
-    instruction="foo/setup"
+    instruction="<repositories>
+  <repository>
+    <id>gitlab-maven</id>
+    <url>mavenPath</url>
+  </repository>
+</repositories>
+
+<distributionManagement>
+  <repository>
+    <id>gitlab-maven</id>
+    <url>mavenPath</url>
+  </repository>
+
+  <snapshotRepository>
+    <id>gitlab-maven</id>
+    <url>mavenPath</url>
+  </snapshotRepository>
+</distributionManagement>"
     label=""
     multiline="true"
     trackingaction="copy_maven_setup_xml"

spec/frontend/packages_and_registries/package_registry/components/details/composer_installation_spec.js

 import { GlSprintf, GlLink } from '@gitlab/ui';
-import { shallowMount, createLocalVue } from '@vue/test-utils';
-import Vuex from 'vuex';
-import { registryUrl as composerHelpPath } from 'jest/packages/details/mock_data';
-import { composerPackage as packageEntity } from 'jest/packages/mock_data';
-import { TrackingActions } from '~/packages/details/constants';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import { packageData } from 'jest/packages_and_registries/package_registry/mock_data';
 import ComposerInstallation from '~/packages_and_registries/package_registry/components/details/composer_installation.vue';
 import InstallationTitle from '~/packages_and_registries/package_registry/components/details/installation_title.vue';
+import {
+  TRACKING_ACTION_COPY_COMPOSER_REGISTRY_INCLUDE_COMMAND,
+  TRACKING_ACTION_COPY_COMPOSER_PACKAGE_INCLUDE_COMMAND,
+  PACKAGE_TYPE_COMPOSER,
+} from '~/packages_and_registries/package_registry/constants';
 
-const localVue = createLocalVue();
-localVue.use(Vuex);
+const packageEntity = { ...packageData(), packageType: PACKAGE_TYPE_COMPOSER };
 
 describe('ComposerInstallation', () => {
   let wrapper;
-  let store;
-
-  const composerRegistryIncludeStr = 'foo/registry';
-  const composerPackageIncludeStr = 'foo/package';
-
-  const createStore = (groupExists = true) => {
-    store = new Vuex.Store({
-      state: { packageEntity, composerHelpPath },
-      getters: {
-        composerRegistryInclude: () => composerRegistryIncludeStr,
-        composerPackageInclude: () => composerPackageIncludeStr,
-        groupExists: () => groupExists,
-      },
-    });
-  };
 
-  const findRootNode = () => wrapper.find('[data-testid="root-node"]');
-  const findRegistryInclude = () => wrapper.find('[data-testid="registry-include"]');
-  const findPackageInclude = () => wrapper.find('[data-testid="package-include"]');
-  const findHelpText = () => wrapper.find('[data-testid="help-text"]');
-  const findHelpLink = () => wrapper.find(GlLink);
+  const findRootNode = () => wrapper.findByTestId('root-node');
+  const findRegistryInclude = () => wrapper.findByTestId('registry-include');
+  const findPackageInclude = () => wrapper.findByTestId('package-include');
+  const findHelpText = () => wrapper.findByTestId('help-text');
+  const findHelpLink = () => wrapper.findComponent(GlLink);
   const findInstallationTitle = () => wrapper.findComponent(InstallationTitle);
 
-  function createComponent() {
-    wrapper = shallowMount(ComposerInstallation, {
-      localVue,
-      store,
+  function createComponent(groupListUrl = 'groupListUrl') {
+    wrapper = shallowMountExtended(ComposerInstallation, {
+      provide: {
+        composerHelpPath: 'composerHelpPath',
+        composerConfigRepositoryName: 'composerConfigRepositoryName',
+        composerPath: 'composerPath',
+        groupListUrl,
+      },
+      propsData: { packageEntity },
       stubs: {
         GlSprintf,
       },
@@ -51,7 +42,6 @@ describe('ComposerInstallation', () => {
 
   describe('install command switch', () => {
     it('has the installation title component', () => {
-      createStore();
       createComponent();
 
       expect(findInstallationTitle().exists()).toBe(true);
@@ -64,7 +54,6 @@ describe('ComposerInstallation', () => {
 
   describe('registry include command', () => {
     beforeEach(() => {
-      createStore();
       createComponent();
     });
 
@@ -72,9 +61,9 @@ describe('ComposerInstallation', () => {
       const registryIncludeCommand = findRegistryInclude();
       expect(registryIncludeCommand.exists()).toBe(true);
       expect(registryIncludeCommand.props()).toMatchObject({
-        instruction: composerRegistryIncludeStr,
+        instruction: `composer config repositories.composerConfigRepositoryName '{"type": "composer", "url": "composerPath"}'`,
         copyText: 'Copy registry include',
-        trackingAction: TrackingActions.COPY_COMPOSER_REGISTRY_INCLUDE_COMMAND,
+        trackingAction: TRACKING_ACTION_COPY_COMPOSER_REGISTRY_INCLUDE_COMMAND,
       });
     });
 
@@ -85,7 +74,6 @@ describe('ComposerInstallation', () => {
 
   describe('package include command', () => {
     beforeEach(() => {
-      createStore();
       createComponent();
     });
 
@@ -93,9 +81,9 @@ describe('ComposerInstallation', () => {
       const registryIncludeCommand = findPackageInclude();
       expect(registryIncludeCommand.exists()).toBe(true);
       expect(registryIncludeCommand.props()).toMatchObject({
-        instruction: composerPackageIncludeStr,
+        instruction: 'composer req @gitlab-org/package-15:1.0.0',
         copyText: 'Copy require package include',
-        trackingAction: TrackingActions.COPY_COMPOSER_PACKAGE_INCLUDE_COMMAND,
+        trackingAction: TRACKING_ACTION_COPY_COMPOSER_PACKAGE_INCLUDE_COMMAND,
       });
     });
 
@@ -108,7 +96,7 @@ describe('ComposerInstallation', () => {
         'For more information on Composer packages in GitLab, see the documentation.',
       );
       expect(findHelpLink().attributes()).toMatchObject({
-        href: composerHelpPath,
+        href: 'composerHelpPath',
         target: '_blank',
       });
     });
@@ -116,15 +104,13 @@ describe('ComposerInstallation', () => {
 
   describe('root node', () => {
     it('is normally rendered', () => {
-      createStore();
       createComponent();
 
       expect(findRootNode().exists()).toBe(true);
     });
 
     it('is not rendered when the group does not exist', () => {
-      createStore(false);
-      createComponent();
+      createComponent('');
 
       expect(findRootNode().exists()).toBe(false);
     });

spec/frontend/packages_and_registries/package_registry/components/details/conan_installation_spec.js

-import { shallowMount, createLocalVue } from '@vue/test-utils';
-import Vuex from 'vuex';
-import { registryUrl as conanPath } from 'jest/packages/details/mock_data';
-import { conanPackage as packageEntity } from 'jest/packages/mock_data';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import { packageData } from 'jest/packages_and_registries/package_registry/mock_data';
 import ConanInstallation from '~/packages_and_registries/package_registry/components/details/conan_installation.vue';
 import InstallationTitle from '~/packages_and_registries/package_registry/components/details/installation_title.vue';
+import { PACKAGE_TYPE_CONAN } from '~/packages_and_registries/package_registry/constants';
 import CodeInstructions from '~/vue_shared/components/registry/code_instruction.vue';
 
-const localVue = createLocalVue();
-localVue.use(Vuex);
+const packageEntity = { ...packageData(), packageType: PACKAGE_TYPE_CONAN };
 
 describe('ConanInstallation', () => {
   let wrapper;
 
-  const conanInstallationCommandStr = 'foo/command';
-  const conanSetupCommandStr = 'foo/setup';
-
-  const store = new Vuex.Store({
-    state: {
-      packageEntity,
-      conanPath,
-    },
-    getters: {
-      conanInstallationCommand: () => conanInstallationCommandStr,
-      conanSetupCommand: () => conanSetupCommandStr,
-    },
-  });
-
-  const findCodeInstructions = () => wrapper.findAll(CodeInstructions);
+  const findCodeInstructions = () => wrapper.findAllComponents(CodeInstructions);
   const findInstallationTitle = () => wrapper.findComponent(InstallationTitle);
 
   function createComponent() {
-    wrapper = shallowMount(ConanInstallation, {
-      localVue,
-      store,
+    wrapper = shallowMountExtended(ConanInstallation, {
+      provide: {
+        conanHelpPath: 'conanHelpPath',
+        conanPath: 'conanPath',
+      },
+      propsData: {
+        packageEntity,
+      },
     });
   }
 
@@ -60,13 +49,17 @@ describe('ConanInstallation', () => {
 
   describe('installation commands', () => {
     it('renders the correct command', () => {
-      expect(findCodeInstructions().at(0).props('instruction')).toBe(conanInstallationCommandStr);
+      expect(findCodeInstructions().at(0).props('instruction')).toBe(
+        'conan install @gitlab-org/package-15 --remote=gitlab',
+      );
     });
   });
 
   describe('setup commands', () => {
     it('renders the correct command', () => {
-      expect(findCodeInstructions().at(1).props('instruction')).toBe(conanSetupCommandStr);
+      expect(findCodeInstructions().at(1).props('instruction')).toBe(
+        'conan remote add gitlab conanPath',
+      );
     });
   });
 });

spec/frontend/packages_and_registries/package_registry/components/details/installations_commands_spec.js

 import { shallowMount } from '@vue/test-utils';
-import {
-  conanPackage,
-  mavenPackage,
-  npmPackage,
-  nugetPackage,
-  pypiPackage,
-  composerPackage,
-  terraformModule,
-} from 'jest/packages/mock_data';
-import TerraformInstallation from '~/packages_and_registries/infrastructure_registry/components/terraform_installation.vue';
+import { packageData } from 'jest/packages_and_registries/package_registry/mock_data';
 import ComposerInstallation from '~/packages_and_registries/package_registry/components/details/composer_installation.vue';
 import ConanInstallation from '~/packages_and_registries/package_registry/components/details/conan_installation.vue';
 import InstallationCommands from '~/packages_and_registries/package_registry/components/details/installation_commands.vue';
@@ -17,6 +8,21 @@ import MavenInstallation from '~/packages_and_registries/package_registry/compon
 import NpmInstallation from '~/packages_and_registries/package_registry/components/details/npm_installation.vue';
 import NugetInstallation from '~/packages_and_registries/package_registry/components/details/nuget_installation.vue';
 import PypiInstallation from '~/packages_and_registries/package_registry/components/details/pypi_installation.vue';
+import {
+  PACKAGE_TYPE_CONAN,
+  PACKAGE_TYPE_MAVEN,
+  PACKAGE_TYPE_NPM,
+  PACKAGE_TYPE_NUGET,
+  PACKAGE_TYPE_PYPI,
+  PACKAGE_TYPE_COMPOSER,
+} from '~/packages_and_registries/package_registry/constants';
+
+const conanPackage = { ...packageData(), packageType: PACKAGE_TYPE_CONAN };
+const mavenPackage = { ...packageData(), packageType: PACKAGE_TYPE_MAVEN };
+const npmPackage = { ...packageData(), packageType: PACKAGE_TYPE_NPM };
+const nugetPackage = { ...packageData(), packageType: PACKAGE_TYPE_NUGET };
+const pypiPackage = { ...packageData(), packageType: PACKAGE_TYPE_PYPI };
+const composerPackage = { ...packageData(), packageType: PACKAGE_TYPE_COMPOSER };
 
 describe('InstallationCommands', () => {
   let wrapper;
@@ -33,7 +39,6 @@ describe('InstallationCommands', () => {
   const nugetInstallation = () => wrapper.find(NugetInstallation);
   const pypiInstallation = () => wrapper.find(PypiInstallation);
   const composerInstallation = () => wrapper.find(ComposerInstallation);
-  const terraformInstallation = () => wrapper.findComponent(TerraformInstallation);
 
   afterEach(() => {
     wrapper.destroy();
@@ -48,9 +53,8 @@ describe('InstallationCommands', () => {
       ${nugetPackage}    | ${nugetInstallation}
       ${pypiPackage}     | ${pypiInstallation}
       ${composerPackage} | ${composerInstallation}
-      ${terraformModule} | ${terraformInstallation}
     `('renders', ({ packageEntity, selector }) => {
-      it(`${packageEntity.package_type} instructions exist`, () => {
+      it(`${packageEntity.packageType} instructions exist`, () => {
         createComponent({ packageEntity });
 
         expect(selector()).toExist();

spec/frontend/packages_and_registries/package_registry/components/details/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 { TrackingActions } from '~/packages/details/constants';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+
+import {
+  packageData,
+  mavenMetadata,
+} from 'jest/packages_and_registries/package_registry/mock_data';
 import InstallationTitle from '~/packages_and_registries/package_registry/components/details/installation_title.vue';
 import MavenInstallation from '~/packages_and_registries/package_registry/components/details/maven_installation.vue';
+import {
+  TRACKING_ACTION_COPY_MAVEN_XML,
+  TRACKING_ACTION_COPY_MAVEN_COMMAND,
+  TRACKING_ACTION_COPY_MAVEN_SETUP,
+  TRACKING_ACTION_COPY_GRADLE_INSTALL_COMMAND,
+  TRACKING_ACTION_COPY_GRADLE_ADD_TO_SOURCE_COMMAND,
+  TRACKING_ACTION_COPY_KOTLIN_INSTALL_COMMAND,
+  TRACKING_ACTION_COPY_KOTLIN_ADD_TO_SOURCE_COMMAND,
+  PACKAGE_TYPE_MAVEN,
+} from '~/packages_and_registries/package_registry/constants';
 import CodeInstructions from '~/vue_shared/components/registry/code_instruction.vue';
 
-const localVue = createLocalVue();
-localVue.use(Vuex);
-
 describe('MavenInstallation', () => {
   let wrapper;
 
-  const xmlCodeBlock = 'foo/xml';
-  const mavenCommandStr = 'foo/command';
-  const mavenSetupXml = 'foo/setup';
-  const gradleGroovyInstallCommandText = 'foo/gradle/groovy/install';
-  const gradleGroovyAddSourceCommandText = 'foo/gradle/groovy/add/source';
-  const gradleKotlinInstallCommandText = 'foo/gradle/kotlin/install';
-  const gradleKotlinAddSourceCommandText = 'foo/gradle/kotlin/add/source';
-
-  const store = new Vuex.Store({
-    state: {
-      packageEntity,
-      mavenPath,
-    },
-    getters: {
-      mavenInstallationXml: () => xmlCodeBlock,
-      mavenInstallationCommand: () => mavenCommandStr,
-      mavenSetupXml: () => mavenSetupXml,
-      gradleGroovyInstalCommand: () => gradleGroovyInstallCommandText,
-      gradleGroovyAddSourceCommand: () => gradleGroovyAddSourceCommandText,
-      gradleKotlinInstalCommand: () => gradleKotlinInstallCommandText,
-      gradleKotlinAddSourceCommand: () => gradleKotlinAddSourceCommandText,
-    },
-  });
-
-  const findCodeInstructions = () => wrapper.findAll(CodeInstructions);
+  const packageEntity = {
+    ...packageData(),
+    packageType: PACKAGE_TYPE_MAVEN,
+    metadata: mavenMetadata(),
+  };
+
+  const mavenHelpPath = 'mavenHelpPath';
+  const mavenPath = 'mavenPath';
+
+  const xmlCodeBlock = `<dependency>
+  <groupId>appGroup</groupId>
+  <artifactId>appName</artifactId>
+  <version>appVersion</version>
+</dependency>`;
+  const mavenCommandStr = 'mvn dependency:get -Dartifact=appGroup:appName:appVersion';
+  const mavenSetupXml = `<repositories>
+  <repository>
+    <id>gitlab-maven</id>
+    <url>${mavenPath}</url>
+  </repository>
+</repositories>
+
+<distributionManagement>
+  <repository>
+    <id>gitlab-maven</id>
+    <url>${mavenPath}</url>
+  </repository>
+
+  <snapshotRepository>
+    <id>gitlab-maven</id>
+    <url>${mavenPath}</url>
+  </snapshotRepository>
+</distributionManagement>`;
+  const gradleGroovyInstallCommandText = `implementation 'appGroup:appName:appVersion'`;
+  const gradleGroovyAddSourceCommandText = `maven {
+  url '${mavenPath}'
+}`;
+  const gradleKotlinInstallCommandText = `implementation("appGroup:appName:appVersion")`;
+  const gradleKotlinAddSourceCommandText = `maven("${mavenPath}")`;
+
+  const findCodeInstructions = () => wrapper.findAllComponents(CodeInstructions);
   const findInstallationTitle = () => wrapper.findComponent(InstallationTitle);
 
   function createComponent({ data = {} } = {}) {
-    wrapper = shallowMount(MavenInstallation, {
-      localVue,
-      store,
+    wrapper = shallowMountExtended(MavenInstallation, {
+      provide: {
+        mavenHelpPath,
+        mavenPath,
+      },
+      propsData: {
+        packageEntity,
+      },
       data() {
         return data;
       },
@@ -98,7 +127,7 @@ describe('MavenInstallation', () => {
         expect(findCodeInstructions().at(0).props()).toMatchObject({
           instruction: xmlCodeBlock,
           multiline: true,
-          trackingAction: TrackingActions.COPY_MAVEN_XML,
+          trackingAction: TRACKING_ACTION_COPY_MAVEN_XML,
         });
       });
 
@@ -106,7 +135,7 @@ describe('MavenInstallation', () => {
         expect(findCodeInstructions().at(1).props()).toMatchObject({
           instruction: mavenCommandStr,
           multiline: false,
-          trackingAction: TrackingActions.COPY_MAVEN_COMMAND,
+          trackingAction: TRACKING_ACTION_COPY_MAVEN_COMMAND,
         });
       });
     });
@@ -116,7 +145,7 @@ describe('MavenInstallation', () => {
         expect(findCodeInstructions().at(2).props()).toMatchObject({
           instruction: mavenSetupXml,
           multiline: true,
-          trackingAction: TrackingActions.COPY_MAVEN_SETUP,
+          trackingAction: TRACKING_ACTION_COPY_MAVEN_SETUP,
         });
       });
     });
@@ -136,7 +165,7 @@ describe('MavenInstallation', () => {
         expect(findCodeInstructions().at(0).props()).toMatchObject({
           instruction: gradleGroovyInstallCommandText,
           multiline: false,
-          trackingAction: TrackingActions.COPY_GRADLE_INSTALL_COMMAND,
+          trackingAction: TRACKING_ACTION_COPY_GRADLE_INSTALL_COMMAND,
         });
       });
     });
@@ -146,7 +175,7 @@ describe('MavenInstallation', () => {
         expect(findCodeInstructions().at(1).props()).toMatchObject({
           instruction: gradleGroovyAddSourceCommandText,
           multiline: true,
-          trackingAction: TrackingActions.COPY_GRADLE_ADD_TO_SOURCE_COMMAND,
+          trackingAction: TRACKING_ACTION_COPY_GRADLE_ADD_TO_SOURCE_COMMAND,
         });
       });
     });
@@ -166,7 +195,7 @@ describe('MavenInstallation', () => {
         expect(findCodeInstructions().at(0).props()).toMatchObject({
           instruction: gradleKotlinInstallCommandText,
           multiline: false,
-          trackingAction: TrackingActions.COPY_KOTLIN_INSTALL_COMMAND,
+          trackingAction: TRACKING_ACTION_COPY_KOTLIN_INSTALL_COMMAND,
         });
       });
     });
@@ -176,7 +205,7 @@ describe('MavenInstallation', () => {
         expect(findCodeInstructions().at(1).props()).toMatchObject({
           instruction: gradleKotlinAddSourceCommandText,
           multiline: true,
-          trackingAction: TrackingActions.COPY_KOTLIN_ADD_TO_SOURCE_COMMAND,
+          trackingAction: TRACKING_ACTION_COPY_KOTLIN_ADD_TO_SOURCE_COMMAND,
         });
       });
     });