Merge branch '347409-migrate-package-details-page-to-vue-router-3' into 'master'

Use GraphQl api to fetch package managers URLs

See merge request gitlab-org/gitlab!77560

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

@@ -68,15 +68,7 @@ export default {
     GlModal: GlModalDirective,
   },
   mixins: [Tracking.mixin()],
-  inject: [
-    'packageId',
-    'projectName',
-    'canDelete',
-    'svgPath',
-    'npmPath',
-    'projectListUrl',
-    'groupListUrl',
-  ],
+  inject: ['packageId', 'svgPath', 'projectListUrl', 'groupListUrl'],
   trackingActions: {
     DELETE_PACKAGE_TRACKING_ACTION,
     REQUEST_DELETE_PACKAGE_TRACKING_ACTION,
@@ -99,7 +91,7 @@ export default {
         return this.queryVariables;
       },
       update(data) {
-        return data.package;
+        return data.package || {};
       },
       error(error) {
         createFlash({
@@ -111,19 +103,22 @@ export default {
     },
   },
   computed: {
+    projectName() {
+      return this.packageEntity.project?.name;
+    },
     queryVariables() {
       return {
         id: convertToGraphQLId('Packages::Package', this.packageId),
       };
     },
     packageFiles() {
-      return this.packageEntity?.packageFiles?.nodes;
+      return this.packageEntity.packageFiles?.nodes;
     },
     isLoading() {
       return this.$apollo.queries.packageEntity.loading;
     },
     isValidPackage() {
-      return this.isLoading || Boolean(this.packageEntity?.name);
+      return this.isLoading || Boolean(this.packageEntity.name);
     },
     tracking() {
       return {
@@ -140,7 +135,7 @@ export default {
       return this.packageEntity.packageType === PACKAGE_TYPE_NUGET;
     },
     showFiles() {
-      return this.packageEntity?.packageType !== PACKAGE_TYPE_COMPOSER;
+      return this.packageEntity.packageType !== PACKAGE_TYPE_COMPOSER;
     },
   },
   methods: {
@@ -240,7 +235,7 @@ export default {
     <package-title :package-entity="packageEntity">
       <template #delete-button>
         <gl-button
-          v-if="canDelete"
+          v-if="packageEntity.canDestroy"
           v-gl-modal="'delete-modal'"
           variant="danger"
           category="primary"
@@ -264,6 +259,7 @@ export default {
 
         <package-files
           v-if="showFiles"
+          :can-delete="packageEntity.canDestroy"
           :package-files="packageFiles"
           @download-file="track($options.trackingActions.PULL_PACKAGE)"
           @delete-file="handleFileDelete"

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

@@ -18,7 +18,7 @@ export default {
     GlLink,
     GlSprintf,
   },
-  inject: ['composerConfigRepositoryName', 'composerPath', 'groupListUrl'],
+  inject: ['groupListUrl'],
   props: {
     packageEntity: {
       type: Object,
@@ -28,7 +28,7 @@ export default {
   computed: {
     composerRegistryInclude() {
       // eslint-disable-next-line @gitlab/require-i18n-strings
-      return `composer config repositories.${this.composerConfigRepositoryName} '{"type": "composer", "url": "${this.composerPath}"}'`;
+      return `composer config repositories.${this.packageEntity.composerConfigRepositoryUrl} '{"type": "composer", "url": "${this.packageEntity.composerUrl}"}'`;
     },
     composerPackageInclude() {
       // eslint-disable-next-line @gitlab/require-i18n-strings

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

@@ -18,7 +18,6 @@ export default {
     GlLink,
     GlSprintf,
   },
-  inject: ['conanPath'],
   props: {
     packageEntity: {
       type: Object,
@@ -32,7 +31,7 @@ export default {
     },
     conanSetupCommand() {
       // eslint-disable-next-line @gitlab/require-i18n-strings
-      return `conan remote add gitlab ${this.conanPath}`;
+      return `conan remote add gitlab ${this.packageEntity.conanUrl}`;
     },
   },
   i18n: {

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

@@ -24,7 +24,6 @@ export default {
     GlLink,
     GlSprintf,
   },
-  inject: ['mavenPath'],
   props: {
     packageEntity: {
       type: Object,
@@ -37,6 +36,9 @@ export default {
     };
   },
   computed: {
+    mavenUrl() {
+      return this.packageEntity.mavenUrl;
+    },
     appGroup() {
       return this.packageEntity.metadata.appGroup;
     },
@@ -62,19 +64,19 @@ export default {
       return `<repositories>
   <repository>
     <id>gitlab-maven</id>
-    <url>${this.mavenPath}</url>
+    <url>${this.mavenUrl}</url>
   </repository>
 </repositories>
 
 <distributionManagement>
   <repository>
     <id>gitlab-maven</id>
-    <url>${this.mavenPath}</url>
+    <url>${this.mavenUrl}</url>
   </repository>
 
   <snapshotRepository>
     <id>gitlab-maven</id>
-    <url>${this.mavenPath}</url>
+    <url>${this.mavenUrl}</url>
   </snapshotRepository>
 </distributionManagement>`;
     },
@@ -87,7 +89,7 @@ export default {
     gradleGroovyAddSourceCommand() {
       // eslint-disable-next-line @gitlab/require-i18n-strings
       return `maven {
-  url '${this.mavenPath}'
+  url '${this.mavenUrl}'
 }`;
     },
 
@@ -96,7 +98,7 @@ export default {
     },
 
     gradleKotlinAddSourceCommand() {
-      return `maven("${this.mavenPath}")`;
+      return `maven("${this.mavenUrl}")`;
     },
     showMaven() {
       return this.instructionType === 'maven';

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

@@ -26,7 +26,7 @@ export default {
     GlSprintf,
     GlFormRadioGroup,
   },
-  inject: ['npmPath', 'npmProjectPath'],
+  inject: ['npmPath'],
   props: {
     packageEntity: {
       type: Object,
@@ -66,7 +66,7 @@ export default {
     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;
+        endpointType === INSTANCE_PACKAGE_ENDPOINT_TYPE ? this.npmPath : this.packageEntity.npmUrl;
 
       if (type === NPM_PACKAGE_MANAGER) {
         return `echo ${scope}:registry=${npmPathForEndpoint}/ >> .npmrc`;

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

@@ -18,7 +18,6 @@ export default {
     GlLink,
     GlSprintf,
   },
-  inject: ['nugetPath'],
   props: {
     packageEntity: {
       type: Object,
@@ -30,7 +29,7 @@ export default {
       return `nuget install ${this.packageEntity.name} -Source "GitLab"`;
     },
     nugetSetupCommand() {
-      return `nuget source Add -Name "GitLab" -Source "${this.nugetPath}" -UserName <your_username> -Password <your_token>`;
+      return `nuget source Add -Name "GitLab" -Source "${this.packageEntity.nugetUrl}" -UserName <your_username> -Password <your_token>`;
     },
   },
   tracking: {

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

@@ -22,8 +22,12 @@ export default {
     FileSha,
   },
   mixins: [Tracking.mixin()],
-  inject: ['canDelete'],
   props: {
+    canDelete: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     packageFiles: {
       type: Array,
       required: false,

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

@@ -19,7 +19,6 @@ export default {
     GlLink,
     GlSprintf,
   },
-  inject: ['pypiPath', 'pypiSetupPath'],
   props: {
     packageEntity: {
       type: Object,
@@ -29,11 +28,11 @@ export default {
   computed: {
     pypiPipCommand() {
       // eslint-disable-next-line @gitlab/require-i18n-strings
-      return `pip install ${this.packageEntity.name} --extra-index-url ${this.pypiPath}`;
+      return `pip install ${this.packageEntity.name} --extra-index-url ${this.packageEntity.pypiUrl}`;
     },
     pypiSetupCommand() {
       return `[gitlab]
-repository = ${this.pypiSetupPath}
+repository = ${this.packageEntity.pypiSetupUrl}
 username = __token__
 password = <your personal access token>`;
     },

app/assets/javascripts/packages_and_registries/package_registry/graphql/queries/get_package_details.query.graphql

@@ -7,9 +7,19 @@ query getPackageDetails($id: ID!) {
     createdAt
     updatedAt
     status
+    canDestroy
+    npmUrl
+    mavenUrl
+    conanUrl
+    nugetUrl
+    pypiUrl
+    pypiSetupUrl
+    composerUrl
+    composerConfigRepositoryUrl
     project {
       id
       path
+      name
     }
     tags(first: 10) {
       nodes {

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

@@ -23,7 +23,7 @@ exports[`ConanInstallation renders all the messages 1`] = `
    
   <code-instruction-stub
     copytext="Copy Conan Setup Command"
-    instruction="conan remote add gitlab conanPath"
+    instruction="conan remote add gitlab http://gdk.test:3000/api/v4/projects/1/packages/conan"
     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

@@ -19,7 +19,7 @@ exports[`MavenInstallation groovy renders all the messages 1`] = `
   <code-instruction-stub
     copytext="Copy add Gradle Groovy DSL repository command"
     instruction="maven {
-  url 'mavenPath'
+  url 'http://gdk.test:3000/api/v4/projects/1/packages/maven'
 }"
     label="Add Gradle Groovy DSL repository command"
     multiline="true"
@@ -47,7 +47,7 @@ exports[`MavenInstallation kotlin renders all the messages 1`] = `
    
   <code-instruction-stub
     copytext="Copy add Gradle Kotlin DSL repository command"
-    instruction="maven(\\"mavenPath\\")"
+    instruction="maven(\\"http://gdk.test:3000/api/v4/projects/1/packages/maven\\")"
     label="Add Gradle Kotlin DSL repository command"
     multiline="true"
     trackingaction="copy_kotlin_add_to_source_command"
@@ -115,19 +115,19 @@ exports[`MavenInstallation maven renders all the messages 1`] = `
     instruction="<repositories>
   <repository>
     <id>gitlab-maven</id>
-    <url>mavenPath</url>
+    <url>http://gdk.test:3000/api/v4/projects/1/packages/maven</url>
   </repository>
 </repositories>
 
 <distributionManagement>
   <repository>
     <id>gitlab-maven</id>
-    <url>mavenPath</url>
+    <url>http://gdk.test:3000/api/v4/projects/1/packages/maven</url>
   </repository>
 
   <snapshotRepository>
     <id>gitlab-maven</id>
-    <url>mavenPath</url>
+    <url>http://gdk.test:3000/api/v4/projects/1/packages/maven</url>
   </snapshotRepository>
 </distributionManagement>"
     label=""

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

@@ -23,7 +23,7 @@ exports[`NugetInstallation renders all the messages 1`] = `
    
   <code-instruction-stub
     copytext="Copy NuGet Setup Command"
-    instruction="nuget source Add -Name \\"GitLab\\" -Source \\"nugetPath\\" -UserName <your_username> -Password <your_token>"
+    instruction="nuget source Add -Name \\"GitLab\\" -Source \\"http://gdk.test:3000/api/v4/projects/1/packages/nuget/index.json\\" -UserName <your_username> -Password <your_token>"
     label="Add NuGet Source"
     trackingaction="copy_nuget_setup_command"
     trackinglabel="code_instruction"

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

@@ -10,7 +10,7 @@ exports[`PypiInstallation renders all the messages 1`] = `
   <code-instruction-stub
     copytext="Copy Pip command"
     data-testid="pip-command"
-    instruction="pip install @gitlab-org/package-15 --extra-index-url pypiPath"
+    instruction="pip install @gitlab-org/package-15 --extra-index-url http://__token__:<your_personal_token>@gdk.test:3000/api/v4/projects/1/packages/pypi/simple"
     label="Pip Command"
     trackingaction="copy_pip_install_command"
     trackinglabel="code_instruction"
@@ -34,7 +34,7 @@ exports[`PypiInstallation renders all the messages 1`] = `
     copytext="Copy .pypirc content"
     data-testid="pypi-setup-content"
     instruction="[gitlab]
-repository = pypiSetupPath
+repository = http://gdk.test:3000/api/v4/projects/1/packages/pypi
 username = __token__
 password = <your personal access token>"
     label=""

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

@@ -49,9 +49,6 @@ describe('PackagesApp', () => {
 
   const provide = {
     packageId: '111',
-    titleComponent: 'PackageTitle',
-    projectName: 'projectName',
-    canDelete: 'canDelete',
     svgPath: 'svgPath',
     npmPath: 'npmPath',
     npmHelpPath: 'npmHelpPath',
@@ -149,7 +146,7 @@ describe('PackagesApp', () => {
     expect(findPackageHistory().exists()).toBe(true);
     expect(findPackageHistory().props()).toMatchObject({
       packageEntity: expect.objectContaining(packageData()),
-      projectName: provide.projectName,
+      projectName: packageDetailsQuery().data.package.project.name,
     });
   });
 
@@ -177,7 +174,7 @@ describe('PackagesApp', () => {
 
   describe('delete package', () => {
     const originalReferrer = document.referrer;
-    const setReferrer = (value = provide.projectName) => {
+    const setReferrer = (value = packageDetailsQuery().data.package.project.name) => {
       Object.defineProperty(document, 'referrer', {
         value,
         configurable: true,
@@ -244,6 +241,7 @@ describe('PackagesApp', () => {
       expect(findPackageFiles().exists()).toBe(true);
 
       expect(findPackageFiles().props('packageFiles')[0]).toMatchObject(expectedFile);
+      expect(findPackageFiles().props('canDelete')).toBe(packageData().canDestroy);
     });
 
     it('does not render the package files table when the package is composer', async () => {

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

@@ -25,8 +25,6 @@ describe('ComposerInstallation', () => {
   function createComponent(groupListUrl = 'groupListUrl') {
     wrapper = shallowMountExtended(ComposerInstallation, {
       provide: {
-        composerConfigRepositoryName: 'composerConfigRepositoryName',
-        composerPath: 'composerPath',
         groupListUrl,
       },
       propsData: { packageEntity },
@@ -61,7 +59,7 @@ describe('ComposerInstallation', () => {
       const registryIncludeCommand = findRegistryInclude();
       expect(registryIncludeCommand.exists()).toBe(true);
       expect(registryIncludeCommand.props()).toMatchObject({
-        instruction: `composer config repositories.composerConfigRepositoryName '{"type": "composer", "url": "composerPath"}'`,
+        instruction: `composer config repositories.${packageEntity.composerConfigRepositoryUrl} '{"type": "composer", "url": "${packageEntity.composerUrl}"}'`,
         copyText: 'Copy registry include',
         trackingAction: TRACKING_ACTION_COPY_COMPOSER_REGISTRY_INCLUDE_COMMAND,
       });

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

@@ -20,9 +20,6 @@ describe('ConanInstallation', () => {
 
   function createComponent() {
     wrapper = shallowMountExtended(ConanInstallation, {
-      provide: {
-        conanPath: 'conanPath',
-      },
       propsData: {
         packageEntity,
       },
@@ -65,7 +62,7 @@ describe('ConanInstallation', () => {
   describe('setup commands', () => {
     it('renders the correct command', () => {
       expect(findCodeInstructions().at(1).props('instruction')).toBe(
-        'conan remote add gitlab conanPath',
+        `conan remote add gitlab ${packageEntity.conanUrl}`,
       );
     });
 

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

@@ -30,8 +30,6 @@ describe('MavenInstallation', () => {
     metadata: mavenMetadata(),
   };
 
-  const mavenPath = 'mavenPath';
-
   const xmlCodeBlock = `<dependency>
   <groupId>appGroup</groupId>
   <artifactId>appName</artifactId>
@@ -41,27 +39,27 @@ describe('MavenInstallation', () => {
   const mavenSetupXml = `<repositories>
   <repository>
     <id>gitlab-maven</id>
-    <url>${mavenPath}</url>
+    <url>${packageEntity.mavenUrl}</url>
   </repository>
 </repositories>
 
 <distributionManagement>
   <repository>
     <id>gitlab-maven</id>
-    <url>${mavenPath}</url>
+    <url>${packageEntity.mavenUrl}</url>
   </repository>
 
   <snapshotRepository>
     <id>gitlab-maven</id>
-    <url>${mavenPath}</url>
+    <url>${packageEntity.mavenUrl}</url>
   </snapshotRepository>
 </distributionManagement>`;
   const gradleGroovyInstallCommandText = `implementation 'appGroup:appName:appVersion'`;
   const gradleGroovyAddSourceCommandText = `maven {
-  url '${mavenPath}'
+  url '${packageEntity.mavenUrl}'
 }`;
   const gradleKotlinInstallCommandText = `implementation("appGroup:appName:appVersion")`;
-  const gradleKotlinAddSourceCommandText = `maven("${mavenPath}")`;
+  const gradleKotlinAddSourceCommandText = `maven("${packageEntity.mavenUrl}")`;
 
   const findCodeInstructions = () => wrapper.findAllComponents(CodeInstructions);
   const findInstallationTitle = () => wrapper.findComponent(InstallationTitle);
@@ -69,9 +67,6 @@ describe('MavenInstallation', () => {
 
   function createComponent({ data = {} } = {}) {
     wrapper = shallowMountExtended(MavenInstallation, {
-      provide: {
-        mavenPath,
-      },
       propsData: {
         packageEntity,
       },

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

@@ -36,7 +36,6 @@ describe('NpmInstallation', () => {
     wrapper = shallowMountExtended(NpmInstallation, {
       provide: {
         npmPath: 'npmPath',
-        npmProjectPath: 'npmProjectPath',
       },
       propsData: {
         packageEntity,
@@ -130,7 +129,7 @@ describe('NpmInstallation', () => {
       await nextTick();
 
       expect(findCodeInstructions().at(1).props()).toMatchObject({
-        instruction: `echo @gitlab-org:registry=npmProjectPath/ >> .npmrc`,
+        instruction: `echo @gitlab-org:registry=${packageEntity.npmUrl}/ >> .npmrc`,
         multiline: false,
         trackingAction: TRACKING_ACTION_COPY_NPM_SETUP_COMMAND,
       });
@@ -174,7 +173,7 @@ describe('NpmInstallation', () => {
       await nextTick();
 
       expect(findCodeInstructions().at(1).props()).toMatchObject({
-        instruction: `echo \\"@gitlab-org:registry\\" \\"npmProjectPath/\\" >> .yarnrc`,
+        instruction: `echo \\"@gitlab-org:registry\\" \\"${packageEntity.npmUrl}/\\" >> .yarnrc`,
         multiline: false,
         trackingAction: TRACKING_ACTION_COPY_YARN_SETUP_COMMAND,
       });

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

@@ -17,8 +17,7 @@ describe('NugetInstallation', () => {
   let wrapper;
 
   const nugetInstallationCommandStr = 'nuget install @gitlab-org/package-15 -Source "GitLab"';
-  const nugetSetupCommandStr =
-    'nuget source Add -Name "GitLab" -Source "nugetPath" -UserName <your_username> -Password <your_token>';
+  const nugetSetupCommandStr = `nuget source Add -Name "GitLab" -Source "${packageEntity.nugetUrl}" -UserName <your_username> -Password <your_token>`;
 
   const findCodeInstructions = () => wrapper.findAllComponents(CodeInstructions);
   const findInstallationTitle = () => wrapper.findComponent(InstallationTitle);
@@ -26,9 +25,6 @@ describe('NugetInstallation', () => {
 
   function createComponent() {
     wrapper = shallowMountExtended(NugetInstallation, {
-      provide: {
-        nugetPath: 'nugetPath',
-      },
       propsData: {
         packageEntity,
       },

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

@@ -28,8 +28,8 @@ describe('Package Files', () => {
 
   const createComponent = ({ packageFiles = [file], canDelete = true } = {}) => {
     wrapper = mountExtended(PackageFiles, {
-      provide: { canDelete },
       propsData: {
+        canDelete,
         packageFiles,
       },
       stubs: {

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

@@ -15,9 +15,9 @@ const packageEntity = { ...packageData(), packageType: PACKAGE_TYPE_PYPI };
 describe('PypiInstallation', () => {
   let wrapper;
 
-  const pipCommandStr = 'pip install @gitlab-org/package-15 --extra-index-url pypiPath';
+  const pipCommandStr = `pip install @gitlab-org/package-15 --extra-index-url ${packageEntity.pypiUrl}`;
   const pypiSetupStr = `[gitlab]
-repository = pypiSetupPath
+repository = ${packageEntity.pypiSetupUrl}
 username = __token__
 password = <your personal access token>`;
 
@@ -29,10 +29,6 @@ password = <your personal access token>`;
 
   function createComponent() {
     wrapper = shallowMountExtended(PypiInstallation, {
-      provide: {
-        pypiPath: 'pypiPath',
-        pypiSetupPath: 'pypiSetupPath',
-      },
       propsData: {
         packageEntity,
       },

spec/frontend/packages_and_registries/package_registry/mock_data.js

@@ -120,12 +120,22 @@ export const packageVersions = () => [
 
 export const packageData = (extend) => ({
   id: 'gid://gitlab/Packages::Package/111',
+  canDestroy: true,
   name: '@gitlab-org/package-15',
   packageType: 'NPM',
   version: '1.0.0',
   createdAt: '2020-08-17T14:23:32Z',
   updatedAt: '2020-08-17T14:23:32Z',
   status: 'DEFAULT',
+  mavenUrl: 'http://gdk.test:3000/api/v4/projects/1/packages/maven',
+  npmUrl: 'http://gdk.test:3000/api/v4/projects/1/packages/npm',
+  nugetUrl: 'http://gdk.test:3000/api/v4/projects/1/packages/nuget/index.json',
+  composerConfigRepositoryUrl: 'gdk.test/22',
+  composerUrl: 'http://gdk.test:3000/api/v4/group/22/-/packages/composer/packages.json',
+  conanUrl: 'http://gdk.test:3000/api/v4/projects/1/packages/conan',
+  pypiUrl:
+    'http://__token__:<your_personal_token>@gdk.test:3000/api/v4/projects/1/packages/pypi/simple',
+  pypiSetupUrl: 'http://gdk.test:3000/api/v4/projects/1/packages/pypi',
   ...extend,
 });
 
@@ -185,6 +195,7 @@ export const packageDetailsQuery = (extendPackage) => ({
       project: {
         id: '1',
         path: 'projectPath',
+        name: 'gitlab-test',
       },
       tags: {
         nodes: packageTags(),