Commit 753405a1 authored by Lin Jen-Shin's avatar Lin Jen-Shin

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

Package Details: Move help_page_path to frontend

See merge request gitlab-org/gitlab!77481
parents 82c817a2 fbab8084
......@@ -74,7 +74,6 @@ export default {
'canDelete',
'svgPath',
'npmPath',
'npmHelpPath',
'projectListUrl',
'groupListUrl',
],
......
......@@ -6,6 +6,7 @@ import {
TRACKING_ACTION_COPY_COMPOSER_REGISTRY_INCLUDE_COMMAND,
TRACKING_ACTION_COPY_COMPOSER_PACKAGE_INCLUDE_COMMAND,
TRACKING_LABEL_CODE_INSTRUCTION,
COMPOSER_HELP_PATH,
} from '~/packages_and_registries/package_registry/constants';
import CodeInstruction from '~/vue_shared/components/registry/code_instruction.vue';
......@@ -17,7 +18,7 @@ export default {
GlLink,
GlSprintf,
},
inject: ['composerHelpPath', 'composerConfigRepositoryName', 'composerPath', 'groupListUrl'],
inject: ['composerConfigRepositoryName', 'composerPath', 'groupListUrl'],
props: {
packageEntity: {
type: Object,
......@@ -51,6 +52,9 @@ export default {
TRACKING_ACTION_COPY_COMPOSER_PACKAGE_INCLUDE_COMMAND,
TRACKING_LABEL_CODE_INSTRUCTION,
},
links: {
COMPOSER_HELP_PATH,
},
installOptions: [{ value: 'composer', label: s__('PackageRegistry|Show Composer commands') }],
};
</script>
......@@ -79,7 +83,7 @@ export default {
<span data-testid="help-text">
<gl-sprintf :message="$options.i18n.infoLine">
<template #link="{ content }">
<gl-link :href="composerHelpPath" target="_blank">{{ content }}</gl-link>
<gl-link :href="$options.links.COMPOSER_HELP_PATH" target="_blank">{{ content }}</gl-link>
</template>
</gl-sprintf>
</span>
......
......@@ -6,6 +6,7 @@ import {
TRACKING_ACTION_COPY_CONAN_COMMAND,
TRACKING_ACTION_COPY_CONAN_SETUP_COMMAND,
TRACKING_LABEL_CODE_INSTRUCTION,
CONAN_HELP_PATH,
} from '~/packages_and_registries/package_registry/constants';
import CodeInstruction from '~/vue_shared/components/registry/code_instruction.vue';
......@@ -17,7 +18,7 @@ export default {
GlLink,
GlSprintf,
},
inject: ['conanHelpPath', 'conanPath'],
inject: ['conanPath'],
props: {
packageEntity: {
type: Object,
......@@ -44,7 +45,7 @@ export default {
TRACKING_ACTION_COPY_CONAN_SETUP_COMMAND,
TRACKING_LABEL_CODE_INSTRUCTION,
},
links: { CONAN_HELP_PATH },
installOptions: [{ value: 'conan', label: s__('PackageRegistry|Show Conan commands') }],
};
</script>
......@@ -72,7 +73,7 @@ export default {
/>
<gl-sprintf :message="$options.i18n.helpText">
<template #link="{ content }">
<gl-link :href="conanHelpPath" target="_blank">{{ content }}</gl-link>
<gl-link :href="$options.links.CONAN_HELP_PATH" target="_blank">{{ content }}</gl-link>
</template>
</gl-sprintf>
</div>
......
......@@ -12,6 +12,7 @@ import {
TRACKING_ACTION_COPY_KOTLIN_ADD_TO_SOURCE_COMMAND,
TRACKING_LABEL_CODE_INSTRUCTION,
TRACKING_LABEL_MAVEN_INSTALLATION,
MAVEN_HELP_PATH,
} from '~/packages_and_registries/package_registry/constants';
import CodeInstruction from '~/vue_shared/components/registry/code_instruction.vue';
......@@ -23,7 +24,7 @@ export default {
GlLink,
GlSprintf,
},
inject: ['mavenHelpPath', 'mavenPath'],
inject: ['mavenPath'],
props: {
packageEntity: {
type: Object,
......@@ -126,7 +127,7 @@ export default {
TRACKING_LABEL_CODE_INSTRUCTION,
TRACKING_LABEL_MAVEN_INSTALLATION,
},
links: { MAVEN_HELP_PATH },
installOptions: [
{ value: 'maven', label: s__('PackageRegistry|Maven XML') },
{ value: 'groovy', label: s__('PackageRegistry|Gradle Groovy DSL') },
......@@ -185,7 +186,7 @@ export default {
/>
<gl-sprintf :message="$options.i18n.helpText">
<template #link="{ content }">
<gl-link :href="mavenHelpPath" target="_blank">{{ content }}</gl-link>
<gl-link :href="$options.links.MAVEN_HELP_PATH" target="_blank">{{ content }}</gl-link>
</template>
</gl-sprintf>
</template>
......
......@@ -13,6 +13,7 @@ import {
YARN_PACKAGE_MANAGER,
PROJECT_PACKAGE_ENDPOINT_TYPE,
INSTANCE_PACKAGE_ENDPOINT_TYPE,
NPM_HELP_PATH,
} from '~/packages_and_registries/package_registry/constants';
import CodeInstruction from '~/vue_shared/components/registry/code_instruction.vue';
......@@ -25,7 +26,7 @@ export default {
GlSprintf,
GlFormRadioGroup,
},
inject: ['npmHelpPath', 'npmPath', 'npmProjectPath'],
inject: ['npmPath', 'npmProjectPath'],
props: {
packageEntity: {
type: Object,
......@@ -89,6 +90,7 @@ export default {
'PackageRegistry|You may also need to setup authentication using an auth token. %{linkStart}See the documentation%{linkEnd} to find out more.',
),
},
links: { NPM_HELP_PATH },
installOptions: [
{ value: NPM_PACKAGE_MANAGER, label: s__('PackageRegistry|Show NPM commands') },
{ value: YARN_PACKAGE_MANAGER, label: s__('PackageRegistry|Show Yarn commands') },
......@@ -150,7 +152,7 @@ export default {
<gl-sprintf :message="$options.i18n.helpText">
<template #link="{ content }">
<gl-link :href="npmHelpPath" target="_blank">{{ content }}</gl-link>
<gl-link :href="$options.links.NPM_HELP_PATH" target="_blank">{{ content }}</gl-link>
</template>
</gl-sprintf>
</div>
......
......@@ -6,6 +6,7 @@ import {
TRACKING_ACTION_COPY_NUGET_INSTALL_COMMAND,
TRACKING_ACTION_COPY_NUGET_SETUP_COMMAND,
TRACKING_LABEL_CODE_INSTRUCTION,
NUGET_HELP_PATH,
} from '~/packages_and_registries/package_registry/constants';
import CodeInstruction from '~/vue_shared/components/registry/code_instruction.vue';
......@@ -17,7 +18,7 @@ export default {
GlLink,
GlSprintf,
},
inject: ['nugetHelpPath', 'nugetPath'],
inject: ['nugetPath'],
props: {
packageEntity: {
type: Object,
......@@ -42,6 +43,7 @@ export default {
'PackageRegistry|For more information on the NuGet registry, %{linkStart}see the documentation%{linkEnd}.',
),
},
links: { NUGET_HELP_PATH },
installOptions: [{ value: 'nuget', label: s__('PackageRegistry|Show Nuget commands') }],
};
</script>
......@@ -68,7 +70,7 @@ export default {
/>
<gl-sprintf :message="$options.i18n.helpText">
<template #link="{ content }">
<gl-link :href="nugetHelpPath" target="_blank">{{ content }}</gl-link>
<gl-link :href="$options.links.NUGET_HELP_PATH" target="_blank">{{ content }}</gl-link>
</template>
</gl-sprintf>
</div>
......
......@@ -7,6 +7,7 @@ import {
TRACKING_ACTION_COPY_PIP_INSTALL_COMMAND,
TRACKING_ACTION_COPY_PYPI_SETUP_COMMAND,
TRACKING_LABEL_CODE_INSTRUCTION,
PYPI_HELP_PATH,
} from '~/packages_and_registries/package_registry/constants';
import CodeInstruction from '~/vue_shared/components/registry/code_instruction.vue';
......@@ -18,7 +19,7 @@ export default {
GlLink,
GlSprintf,
},
inject: ['pypiHelpPath', 'pypiPath', 'pypiSetupPath'],
inject: ['pypiPath', 'pypiSetupPath'],
props: {
packageEntity: {
type: Object,
......@@ -50,6 +51,7 @@ password = <your personal access token>`;
'PackageRegistry|For more information on the PyPi registry, %{linkStart}see the documentation%{linkEnd}.',
),
},
links: { PYPI_HELP_PATH },
installOptions: [{ value: 'pypi', label: s__('PackageRegistry|Show PyPi commands') }],
};
</script>
......@@ -86,7 +88,7 @@ password = <your personal access token>`;
/>
<gl-sprintf :message="$options.i18n.helpText">
<template #link="{ content }">
<gl-link :href="pypiHelpPath" target="_blank">{{ content }}</gl-link>
<gl-link :href="$options.links.PYPI_HELP_PATH" target="_blank">{{ content }}</gl-link>
</template>
</gl-sprintf>
</div>
......
......@@ -142,3 +142,9 @@ export const PACKAGE_TYPES = [
export const EMPTY_LIST_HELP_URL = helpPagePath('user/packages/package_registry/index');
export const PACKAGE_HELP_URL = helpPagePath('user/packages/index');
export const NPM_HELP_PATH = helpPagePath('user/packages/npm_registry/index');
export const MAVEN_HELP_PATH = helpPagePath('user/packages/maven_repository/index');
export const CONAN_HELP_PATH = helpPagePath('user/packages/conan_repository/index');
export const NUGET_HELP_PATH = helpPagePath('user/packages/nuget_repository/index');
export const PYPI_HELP_PATH = helpPagePath('user/packages/pypi_repository/index');
export const COMPOSER_HELP_PATH = helpPagePath('user/packages/composer_repository/index');
......@@ -61,18 +61,12 @@ module PackagesHelper
svg_path: image_path('illustrations/no-packages.svg'),
npm_path: package_registry_instance_url(:npm),
npm_project_path: package_registry_project_url(project.id, :npm),
npm_help_path: help_page_path('user/packages/npm_registry/index'),
maven_path: package_registry_project_url(project.id, :maven),
maven_help_path: help_page_path('user/packages/maven_repository/index'),
conan_path: package_registry_project_url(project.id, :conan),
conan_help_path: help_page_path('user/packages/conan_repository/index'),
nuget_path: nuget_package_registry_url(project.id),
nuget_help_path: help_page_path('user/packages/nuget_repository/index'),
pypi_path: pypi_registry_url(project.id),
pypi_setup_path: package_registry_project_url(project.id, :pypi),
pypi_help_path: help_page_path('user/packages/pypi_repository/index'),
composer_path: composer_registry_url(project&.group&.id),
composer_help_path: help_page_path('user/packages/composer_repository/index'),
project_name: project.name,
project_list_url: project_packages_path(project),
group_list_url: project.group ? group_packages_path(project.group) : '',
......
......@@ -28,9 +28,13 @@ exports[`ConanInstallation renders all the messages 1`] = `
trackingaction="copy_conan_setup_command"
trackinglabel="code_instruction"
/>
<gl-sprintf-stub
message="For more information on the Conan registry, %{linkStart}see the documentation%{linkEnd}."
/>
For more information on the Conan registry,
<gl-link-stub
href="/help/user/packages/conan_repository/index"
target="_blank"
>
see the documentation
</gl-link-stub>
.
</div>
`;
......@@ -64,9 +64,15 @@ exports[`MavenInstallation maven renders all the messages 1`] = `
/>
<p>
<gl-sprintf-stub
message="Copy and paste this inside your %{codeStart}pom.xml%{codeEnd} %{codeStart}dependencies%{codeEnd} block."
/>
Copy and paste this inside your
<code>
pom.xml
</code>
<code>
dependencies
</code>
block.
</p>
<code-instruction-stub
......@@ -97,9 +103,11 @@ exports[`MavenInstallation maven renders all the messages 1`] = `
</h3>
<p>
<gl-sprintf-stub
message="If you haven't already done so, you will need to add the below to your %{codeStart}pom.xml%{codeEnd} file."
/>
If you haven't already done so, you will need to add the below to your
<code>
pom.xml
</code>
file.
</p>
<code-instruction-stub
......@@ -127,9 +135,13 @@ exports[`MavenInstallation maven renders all the messages 1`] = `
trackingaction="copy_maven_setup_xml"
trackinglabel="code_instruction"
/>
<gl-sprintf-stub
message="For more information on the Maven registry, %{linkStart}see the documentation%{linkEnd}."
/>
For more information on the Maven registry,
<gl-link-stub
href="/help/user/packages/maven_repository/index"
target="_blank"
>
see the documentation
</gl-link-stub>
.
</div>
`;
......@@ -37,9 +37,13 @@ exports[`NpmInstallation renders all the messages 1`] = `
trackingaction="copy_npm_setup_command"
trackinglabel="code_instruction"
/>
<gl-sprintf-stub
message="You may also need to setup authentication using an auth token. %{linkStart}See the documentation%{linkEnd} to find out more."
/>
You may also need to setup authentication using an auth token.
<gl-link-stub
href="/help/user/packages/npm_registry/index"
target="_blank"
>
See the documentation
</gl-link-stub>
to find out more.
</div>
`;
......@@ -28,9 +28,13 @@ exports[`NugetInstallation renders all the messages 1`] = `
trackingaction="copy_nuget_setup_command"
trackinglabel="code_instruction"
/>
<gl-sprintf-stub
message="For more information on the NuGet registry, %{linkStart}see the documentation%{linkEnd}."
/>
For more information on the NuGet registry,
<gl-link-stub
href="/help/user/packages/nuget_repository/index"
target="_blank"
>
see the documentation
</gl-link-stub>
.
</div>
`;
......@@ -23,9 +23,11 @@ exports[`PypiInstallation renders all the messages 1`] = `
</h3>
<p>
<gl-sprintf-stub
message="If you haven't already done so, you will need to add the below to your %{codeStart}.pypirc%{codeEnd} file."
/>
If you haven't already done so, you will need to add the below to your
<code>
.pypirc
</code>
file.
</p>
<code-instruction-stub
......@@ -40,9 +42,13 @@ password = <your personal access token>"
trackingaction="copy_pypi_setup_command"
trackinglabel="code_instruction"
/>
<gl-sprintf-stub
message="For more information on the PyPi registry, %{linkStart}see the documentation%{linkEnd}."
/>
For more information on the PyPi registry,
<gl-link-stub
href="/help/user/packages/pypi_repository/index"
target="_blank"
>
see the documentation
</gl-link-stub>
.
</div>
`;
......@@ -7,6 +7,7 @@ import {
TRACKING_ACTION_COPY_COMPOSER_REGISTRY_INCLUDE_COMMAND,
TRACKING_ACTION_COPY_COMPOSER_PACKAGE_INCLUDE_COMMAND,
PACKAGE_TYPE_COMPOSER,
COMPOSER_HELP_PATH,
} from '~/packages_and_registries/package_registry/constants';
const packageEntity = { ...packageData(), packageType: PACKAGE_TYPE_COMPOSER };
......@@ -24,7 +25,6 @@ describe('ComposerInstallation', () => {
function createComponent(groupListUrl = 'groupListUrl') {
wrapper = shallowMountExtended(ComposerInstallation, {
provide: {
composerHelpPath: 'composerHelpPath',
composerConfigRepositoryName: 'composerConfigRepositoryName',
composerPath: 'composerPath',
groupListUrl,
......@@ -96,7 +96,7 @@ describe('ComposerInstallation', () => {
'For more information on Composer packages in GitLab, see the documentation.',
);
expect(findHelpLink().attributes()).toMatchObject({
href: 'composerHelpPath',
href: COMPOSER_HELP_PATH,
target: '_blank',
});
});
......
import { GlLink, GlSprintf } from '@gitlab/ui';
import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
import { packageData } from 'jest/packages_and_registries/package_registry/mock_data';
import ConanInstallation from '~/packages_and_registries/package_registry/components/details/conan_installation.vue';
import InstallationTitle from '~/packages_and_registries/package_registry/components/details/installation_title.vue';
import { PACKAGE_TYPE_CONAN } from '~/packages_and_registries/package_registry/constants';
import {
PACKAGE_TYPE_CONAN,
CONAN_HELP_PATH,
} from '~/packages_and_registries/package_registry/constants';
import CodeInstructions from '~/vue_shared/components/registry/code_instruction.vue';
const packageEntity = { ...packageData(), packageType: PACKAGE_TYPE_CONAN };
......@@ -12,16 +16,19 @@ describe('ConanInstallation', () => {
const findCodeInstructions = () => wrapper.findAllComponents(CodeInstructions);
const findInstallationTitle = () => wrapper.findComponent(InstallationTitle);
const findSetupDocsLink = () => wrapper.findComponent(GlLink);
function createComponent() {
wrapper = shallowMountExtended(ConanInstallation, {
provide: {
conanHelpPath: 'conanHelpPath',
conanPath: 'conanPath',
},
propsData: {
packageEntity,
},
stubs: {
GlSprintf,
},
});
}
......@@ -61,5 +68,12 @@ describe('ConanInstallation', () => {
'conan remote add gitlab conanPath',
);
});
it('has a link to the docs', () => {
expect(findSetupDocsLink().attributes()).toMatchObject({
href: CONAN_HELP_PATH,
target: '_blank',
});
});
});
});
import { GlLink, GlSprintf } from '@gitlab/ui';
import { nextTick } from 'vue';
import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
......@@ -16,6 +17,7 @@ import {
TRACKING_ACTION_COPY_KOTLIN_INSTALL_COMMAND,
TRACKING_ACTION_COPY_KOTLIN_ADD_TO_SOURCE_COMMAND,
PACKAGE_TYPE_MAVEN,
MAVEN_HELP_PATH,
} from '~/packages_and_registries/package_registry/constants';
import CodeInstructions from '~/vue_shared/components/registry/code_instruction.vue';
......@@ -28,7 +30,6 @@ describe('MavenInstallation', () => {
metadata: mavenMetadata(),
};
const mavenHelpPath = 'mavenHelpPath';
const mavenPath = 'mavenPath';
const xmlCodeBlock = `<dependency>
......@@ -64,11 +65,11 @@ describe('MavenInstallation', () => {
const findCodeInstructions = () => wrapper.findAllComponents(CodeInstructions);
const findInstallationTitle = () => wrapper.findComponent(InstallationTitle);
const findSetupDocsLink = () => wrapper.findComponent(GlLink);
function createComponent({ data = {} } = {}) {
wrapper = shallowMountExtended(MavenInstallation, {
provide: {
mavenHelpPath,
mavenPath,
},
propsData: {
......@@ -77,6 +78,9 @@ describe('MavenInstallation', () => {
data() {
return data;
},
stubs: {
GlSprintf,
},
});
}
......@@ -148,6 +152,13 @@ describe('MavenInstallation', () => {
trackingAction: TRACKING_ACTION_COPY_MAVEN_SETUP,
});
});
it('has a setup link', () => {
expect(findSetupDocsLink().attributes()).toMatchObject({
href: MAVEN_HELP_PATH,
target: '_blank',
});
});
});
});
......
import { GlFormRadioGroup } from '@gitlab/ui';
import { GlLink, GlSprintf, GlFormRadioGroup } from '@gitlab/ui';
import { nextTick } from 'vue';
import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
......@@ -15,6 +15,7 @@ import {
YARN_PACKAGE_MANAGER,
PROJECT_PACKAGE_ENDPOINT_TYPE,
INSTANCE_PACKAGE_ENDPOINT_TYPE,
NPM_HELP_PATH,
} from '~/packages_and_registries/package_registry/constants';
import CodeInstructions from '~/vue_shared/components/registry/code_instruction.vue';
......@@ -29,11 +30,11 @@ describe('NpmInstallation', () => {
const findCodeInstructions = () => wrapper.findAllComponents(CodeInstructions);
const findInstallationTitle = () => wrapper.findComponent(InstallationTitle);
const findEndPointTypeSector = () => wrapper.findComponent(GlFormRadioGroup);
const findSetupDocsLink = () => wrapper.findComponent(GlLink);
function createComponent({ data = {} } = {}) {
wrapper = shallowMountExtended(NpmInstallation, {
provide: {
npmHelpPath: 'npmHelpPath',
npmPath: 'npmPath',
npmProjectPath: 'npmProjectPath',
},
......@@ -43,6 +44,7 @@ describe('NpmInstallation', () => {
data() {
return data;
},
stubs: { GlSprintf },
});
}
......@@ -58,6 +60,13 @@ describe('NpmInstallation', () => {
expect(wrapper.element).toMatchSnapshot();
});
it('has a setup link', () => {
expect(findSetupDocsLink().attributes()).toMatchObject({
href: NPM_HELP_PATH,
target: '_blank',
});
});
describe('endpoint type selector', () => {
it('has the endpoint type selector', () => {
expect(findEndPointTypeSector().exists()).toBe(true);
......
import { GlLink, GlSprintf } from '@gitlab/ui';
import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
import { packageData } from 'jest/packages_and_registries/package_registry/mock_data';
import InstallationTitle from '~/packages_and_registries/package_registry/components/details/installation_title.vue';
......@@ -6,6 +7,7 @@ import {
TRACKING_ACTION_COPY_NUGET_INSTALL_COMMAND,
TRACKING_ACTION_COPY_NUGET_SETUP_COMMAND,
PACKAGE_TYPE_NUGET,
NUGET_HELP_PATH,
} from '~/packages_and_registries/package_registry/constants';
import CodeInstructions from '~/vue_shared/components/registry/code_instruction.vue';
......@@ -20,16 +22,17 @@ describe('NugetInstallation', () => {
const findCodeInstructions = () => wrapper.findAllComponents(CodeInstructions);
const findInstallationTitle = () => wrapper.findComponent(InstallationTitle);
const findSetupDocsLink = () => wrapper.findComponent(GlLink);
function createComponent() {
wrapper = shallowMountExtended(NugetInstallation, {
provide: {
nugetHelpPath: 'nugetHelpPath',
nugetPath: 'nugetPath',
},
propsData: {
packageEntity,
},
stubs: { GlSprintf },
});
}
......@@ -71,5 +74,12 @@ describe('NugetInstallation', () => {
trackingAction: TRACKING_ACTION_COPY_NUGET_SETUP_COMMAND,
});
});
it('it has docs link', () => {
expect(findSetupDocsLink().attributes()).toMatchObject({
href: NUGET_HELP_PATH,
target: '_blank',
});
});
});
});
import { GlLink, GlSprintf } from '@gitlab/ui';
import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
import { packageData } from 'jest/packages_and_registries/package_registry/mock_data';
import InstallationTitle from '~/packages_and_registries/package_registry/components/details/installation_title.vue';
......@@ -6,6 +7,7 @@ import {
PACKAGE_TYPE_PYPI,
TRACKING_ACTION_COPY_PIP_INSTALL_COMMAND,
TRACKING_ACTION_COPY_PYPI_SETUP_COMMAND,
PYPI_HELP_PATH,
} from '~/packages_and_registries/package_registry/constants';
const packageEntity = { ...packageData(), packageType: PACKAGE_TYPE_PYPI };
......@@ -23,17 +25,20 @@ password = <your personal access token>`;
const setupInstruction = () => wrapper.findByTestId('pypi-setup-content');
const findInstallationTitle = () => wrapper.findComponent(InstallationTitle);
const findSetupDocsLink = () => wrapper.findComponent(GlLink);
function createComponent() {
wrapper = shallowMountExtended(PypiInstallation, {
provide: {
pypiHelpPath: 'pypiHelpPath',
pypiPath: 'pypiPath',
pypiSetupPath: 'pypiSetupPath',
},
propsData: {
packageEntity,
},
stubs: {
GlSprintf,
},
});
}
......@@ -76,5 +81,12 @@ password = <your personal access token>`;
trackingAction: TRACKING_ACTION_COPY_PYPI_SETUP_COMMAND,
});
});
it('has a link to the docs', () => {
expect(findSetupDocsLink().attributes()).toMatchObject({
href: PYPI_HELP_PATH,
target: '_blank',
});
});
});
});
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