diff options
Diffstat (limited to 'app/assets/javascripts/packages_and_registries/package_registry/components/details/npm_installation.vue')
-rw-r--r-- | app/assets/javascripts/packages_and_registries/package_registry/components/details/npm_installation.vue | 30 |
1 files changed, 23 insertions, 7 deletions
diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/details/npm_installation.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/details/npm_installation.vue index 47081e23318..2448324549e 100644 --- a/app/assets/javascripts/packages_and_registries/package_registry/components/details/npm_installation.vue +++ b/app/assets/javascripts/packages_and_registries/package_registry/components/details/npm_installation.vue @@ -1,5 +1,5 @@ <script> -import { GlLink, GlSprintf } from '@gitlab/ui'; +import { GlLink, GlSprintf, GlFormRadioGroup } from '@gitlab/ui'; import { s__ } from '~/locale'; import InstallationTitle from '~/packages_and_registries/package_registry/components/details/installation_title.vue'; @@ -11,6 +11,8 @@ import { TRACKING_LABEL_CODE_INSTRUCTION, NPM_PACKAGE_MANAGER, YARN_PACKAGE_MANAGER, + PROJECT_PACKAGE_ENDPOINT_TYPE, + INSTANCE_PACKAGE_ENDPOINT_TYPE, } from '~/packages_and_registries/package_registry/constants'; import CodeInstruction from '~/vue_shared/components/registry/code_instruction.vue'; @@ -21,8 +23,9 @@ export default { CodeInstruction, GlLink, GlSprintf, + GlFormRadioGroup, }, - inject: ['npmHelpPath', 'npmPath'], + inject: ['npmHelpPath', 'npmPath', 'npmProjectPath'], props: { packageEntity: { type: Object, @@ -32,6 +35,7 @@ export default { data() { return { instructionType: NPM_PACKAGE_MANAGER, + packageEndpointType: INSTANCE_PACKAGE_ENDPOINT_TYPE, }; }, computed: { @@ -39,13 +43,13 @@ export default { return this.npmInstallationCommand(NPM_PACKAGE_MANAGER); }, npmSetup() { - return this.npmSetupCommand(NPM_PACKAGE_MANAGER); + return this.npmSetupCommand(NPM_PACKAGE_MANAGER, this.packageEndpointType); }, yarnCommand() { return this.npmInstallationCommand(YARN_PACKAGE_MANAGER); }, yarnSetupCommand() { - return this.npmSetupCommand(YARN_PACKAGE_MANAGER); + return this.npmSetupCommand(YARN_PACKAGE_MANAGER, this.packageEndpointType); }, showNpm() { return this.instructionType === NPM_PACKAGE_MANAGER; @@ -58,14 +62,16 @@ export default { return `${instruction} ${this.packageEntity.name}`; }, - npmSetupCommand(type) { + npmSetupCommand(type, endpointType) { const scope = this.packageEntity.name.substring(0, this.packageEntity.name.indexOf('/')); + const npmPathForEndpoint = + endpointType === INSTANCE_PACKAGE_ENDPOINT_TYPE ? this.npmPath : this.npmProjectPath; if (type === NPM_PACKAGE_MANAGER) { - return `echo ${scope}:registry=${this.npmPath}/ >> .npmrc`; + return `echo ${scope}:registry=${npmPathForEndpoint}/ >> .npmrc`; } - return `echo \\"${scope}:registry\\" \\"${this.npmPath}/\\" >> .yarnrc`; + return `echo \\"${scope}:registry\\" \\"${npmPathForEndpoint}/\\" >> .yarnrc`; }, }, packageManagers: { @@ -87,6 +93,10 @@ export default { { value: NPM_PACKAGE_MANAGER, label: s__('PackageRegistry|Show NPM commands') }, { value: YARN_PACKAGE_MANAGER, label: s__('PackageRegistry|Show Yarn commands') }, ], + packageEndpointTypeOptions: [ + { value: INSTANCE_PACKAGE_ENDPOINT_TYPE, text: s__('PackageRegistry|Instance-level') }, + { value: PROJECT_PACKAGE_ENDPOINT_TYPE, text: s__('PackageRegistry|Project-level') }, + ], }; </script> @@ -116,6 +126,12 @@ export default { <h3 class="gl-font-lg">{{ __('Registry setup') }}</h3> + <gl-form-radio-group + :options="$options.packageEndpointTypeOptions" + :checked="packageEndpointType" + @change="packageEndpointType = $event" + /> + <code-instruction v-if="showNpm" :instruction="npmSetup" |