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"