Commit 1a802be8 authored by Olena Horal-Koretska's avatar Olena Horal-Koretska

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
parents 05a6d361 54aa4a22
......@@ -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"
......
......@@ -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
......
......@@ -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: {
......
......@@ -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';
......
......@@ -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`;
......
......@@ -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: {
......
......@@ -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,
......
......@@ -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>`;
},
......
......@@ -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 {
......
......@@ -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"
......
......@@ -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=""
......
......@@ -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"
......
......@@ -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=""
......
......@@ -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 () => {
......
......@@ -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,
});
......
......@@ -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}`,
);
});
......
......@@ -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,
},
......
......@@ -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,
});
......
......@@ -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,
},
......
......@@ -28,8 +28,8 @@ describe('Package Files', () => {
const createComponent = ({ packageFiles = [file], canDelete = true } = {}) => {
wrapper = mountExtended(PackageFiles, {
provide: { canDelete },
propsData: {
canDelete,
packageFiles,
},
stubs: {
......
......@@ -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,
},
......
......@@ -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(),
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment