1<script>
2import { GlLink, GlSprintf } from '@gitlab/ui';
3import { s__ } from '~/locale';
4import InstallationTitle from '~/packages_and_registries/package_registry/components/details/installation_title.vue';
5import {
6  TRACKING_ACTION_COPY_COMPOSER_REGISTRY_INCLUDE_COMMAND,
7  TRACKING_ACTION_COPY_COMPOSER_PACKAGE_INCLUDE_COMMAND,
8  TRACKING_LABEL_CODE_INSTRUCTION,
9} from '~/packages_and_registries/package_registry/constants';
10import CodeInstruction from '~/vue_shared/components/registry/code_instruction.vue';
11
12export default {
13  name: 'ComposerInstallation',
14  components: {
15    InstallationTitle,
16    CodeInstruction,
17    GlLink,
18    GlSprintf,
19  },
20  inject: ['composerHelpPath', 'composerConfigRepositoryName', 'composerPath', 'groupListUrl'],
21  props: {
22    packageEntity: {
23      type: Object,
24      required: true,
25    },
26  },
27  computed: {
28    composerRegistryInclude() {
29      // eslint-disable-next-line @gitlab/require-i18n-strings
30      return `composer config repositories.${this.composerConfigRepositoryName} '{"type": "composer", "url": "${this.composerPath}"}'`;
31    },
32    composerPackageInclude() {
33      // eslint-disable-next-line @gitlab/require-i18n-strings
34      return `composer req ${[this.packageEntity.name]}:${this.packageEntity.version}`;
35    },
36    groupExists() {
37      return this.groupListUrl?.length > 0;
38    },
39  },
40  i18n: {
41    registryInclude: s__('PackageRegistry|Add composer registry'),
42    copyRegistryInclude: s__('PackageRegistry|Copy registry include'),
43    packageInclude: s__('PackageRegistry|Install package version'),
44    copyPackageInclude: s__('PackageRegistry|Copy require package include'),
45    infoLine: s__(
46      'PackageRegistry|For more information on Composer packages in GitLab, %{linkStart}see the documentation.%{linkEnd}',
47    ),
48  },
49  tracking: {
50    TRACKING_ACTION_COPY_COMPOSER_REGISTRY_INCLUDE_COMMAND,
51    TRACKING_ACTION_COPY_COMPOSER_PACKAGE_INCLUDE_COMMAND,
52    TRACKING_LABEL_CODE_INSTRUCTION,
53  },
54  installOptions: [{ value: 'composer', label: s__('PackageRegistry|Show Composer commands') }],
55};
56</script>
57
58<template>
59  <div v-if="groupExists" data-testid="root-node">
60    <installation-title package-type="composer" :options="$options.installOptions" />
61
62    <code-instruction
63      :label="$options.i18n.registryInclude"
64      :instruction="composerRegistryInclude"
65      :copy-text="$options.i18n.copyRegistryInclude"
66      :tracking-action="$options.tracking.TRACKING_ACTION_COPY_COMPOSER_REGISTRY_INCLUDE_COMMAND"
67      :tracking-label="$options.tracking.TRACKING_LABEL_CODE_INSTRUCTION"
68      data-testid="registry-include"
69    />
70
71    <code-instruction
72      :label="$options.i18n.packageInclude"
73      :instruction="composerPackageInclude"
74      :copy-text="$options.i18n.copyPackageInclude"
75      :tracking-action="$options.tracking.TRACKING_ACTION_COPY_COMPOSER_PACKAGE_INCLUDE_COMMAND"
76      :tracking-label="$options.tracking.TRACKING_LABEL_CODE_INSTRUCTION"
77      data-testid="package-include"
78    />
79    <span data-testid="help-text">
80      <gl-sprintf :message="$options.i18n.infoLine">
81        <template #link="{ content }">
82          <gl-link :href="composerHelpPath" target="_blank">{{ content }}</gl-link>
83        </template>
84      </gl-sprintf>
85    </span>
86  </div>
87</template>
88