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