diff options
Diffstat (limited to 'app/assets/javascripts/packages_and_registries/package_registry')
14 files changed, 153 insertions, 93 deletions
diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/details/composer_installation.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/details/composer_installation.vue index cc629ae394c..a482c29bf50 100644 --- a/app/assets/javascripts/packages_and_registries/package_registry/components/details/composer_installation.vue +++ b/app/assets/javascripts/packages_and_registries/package_registry/components/details/composer_installation.vue @@ -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: ['groupListUrl'], props: { packageEntity: { type: Object, @@ -27,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 @@ -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> diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/details/conan_installation.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/details/conan_installation.vue index 99e27c9d44a..ba0a3fcf5a1 100644 --- a/app/assets/javascripts/packages_and_registries/package_registry/components/details/conan_installation.vue +++ b/app/assets/javascripts/packages_and_registries/package_registry/components/details/conan_installation.vue @@ -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,6 @@ export default { GlLink, GlSprintf, }, - inject: ['conanHelpPath', 'conanPath'], props: { packageEntity: { type: Object, @@ -31,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: { @@ -44,7 +44,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 +72,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> diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/details/maven_installation.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/details/maven_installation.vue index 2070f0bbca0..4510c7a7322 100644 --- a/app/assets/javascripts/packages_and_registries/package_registry/components/details/maven_installation.vue +++ b/app/assets/javascripts/packages_and_registries/package_registry/components/details/maven_installation.vue @@ -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,6 @@ export default { GlLink, GlSprintf, }, - inject: ['mavenHelpPath', 'mavenPath'], props: { packageEntity: { type: Object, @@ -36,6 +36,9 @@ export default { }; }, computed: { + mavenUrl() { + return this.packageEntity.mavenUrl; + }, appGroup() { return this.packageEntity.metadata.appGroup; }, @@ -61,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>`; }, @@ -86,7 +89,7 @@ export default { gradleGroovyAddSourceCommand() { // eslint-disable-next-line @gitlab/require-i18n-strings return `maven { - url '${this.mavenPath}' + url '${this.mavenUrl}' }`; }, @@ -95,7 +98,7 @@ export default { }, gradleKotlinAddSourceCommand() { - return `maven("${this.mavenPath}")`; + return `maven("${this.mavenUrl}")`; }, showMaven() { return this.instructionType === 'maven'; @@ -126,7 +129,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 +188,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> 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 2448324549e..7479f748a56 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 @@ -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: ['npmInstanceUrl'], props: { packageEntity: { type: Object, @@ -65,7 +66,9 @@ 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.npmInstanceUrl + : this.packageEntity.npmUrl; if (type === NPM_PACKAGE_MANAGER) { return `echo ${scope}:registry=${npmPathForEndpoint}/ >> .npmrc`; @@ -89,6 +92,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 +154,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> diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/details/nuget_installation.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/details/nuget_installation.vue index 2e9991b7be5..b2007df142c 100644 --- a/app/assets/javascripts/packages_and_registries/package_registry/components/details/nuget_installation.vue +++ b/app/assets/javascripts/packages_and_registries/package_registry/components/details/nuget_installation.vue @@ -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,6 @@ export default { GlLink, GlSprintf, }, - inject: ['nugetHelpPath', 'nugetPath'], props: { packageEntity: { type: Object, @@ -29,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: { @@ -42,6 +42,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 +69,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> diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_files.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_files.vue index bf7fe6fb91b..3724e371e01 100644 --- a/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_files.vue +++ b/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, diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/details/pypi_installation.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/details/pypi_installation.vue index 669adab9df6..a126d30f1ec 100644 --- a/app/assets/javascripts/packages_and_registries/package_registry/components/details/pypi_installation.vue +++ b/app/assets/javascripts/packages_and_registries/package_registry/components/details/pypi_installation.vue @@ -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,6 @@ export default { GlLink, GlSprintf, }, - inject: ['pypiHelpPath', 'pypiPath', 'pypiSetupPath'], props: { packageEntity: { type: Object, @@ -28,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>`; }, @@ -50,6 +50,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 +87,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> diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/list/package_list_row.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/list/package_list_row.vue index 6fd96c0654f..6222c2e73d7 100644 --- a/app/assets/javascripts/packages_and_registries/package_registry/components/list/package_list_row.vue +++ b/app/assets/javascripts/packages_and_registries/package_registry/components/list/package_list_row.vue @@ -1,5 +1,5 @@ <script> -import { GlButton, GlLink, GlSprintf, GlTooltipDirective, GlTruncate } from '@gitlab/ui'; +import { GlButton, GlSprintf, GlTooltipDirective, GlTruncate } from '@gitlab/ui'; import { s__, __ } from '~/locale'; import ListItem from '~/vue_shared/components/registry/list_item.vue'; import { @@ -18,7 +18,6 @@ export default { name: 'PackageListRow', components: { GlButton, - GlLink, GlSprintf, GlTruncate, PackageTags, @@ -42,9 +41,8 @@ export default { packageType() { return getPackageTypeLabel(this.packageEntity.packageType); }, - packageLink() { - const { project, id } = this.packageEntity; - return `${project?.webUrl}/-/packages/${getIdFromGraphQLId(id)}`; + packageId() { + return getIdFromGraphQLId(this.packageEntity.id); }, pipeline() { return this.packageEntity?.pipelines?.nodes[0]; @@ -61,6 +59,9 @@ export default { disabledRow() { return this.packageEntity.status && this.packageEntity.status !== PACKAGE_DEFAULT_STATUS; }, + routerLinkEvent() { + return this.disabledRow ? '' : 'click'; + }, }, i18n: { erroredPackageText: s__('PackageRegistry|Invalid Package: failed metadata extraction'), @@ -73,14 +74,15 @@ export default { <list-item data-qa-selector="package_row" :disabled="disabledRow"> <template #left-primary> <div class="gl-display-flex gl-align-items-center gl-mr-3 gl-min-w-0"> - <gl-link - :href="packageLink" + <router-link class="gl-text-body gl-min-w-0" + data-testid="details-link" data-qa-selector="package_link" - :disabled="disabledRow" + :event="routerLinkEvent" + :to="{ name: 'details', params: { id: packageId } }" > <gl-truncate :text="packageEntity.name" /> - </gl-link> + </router-link> <gl-button v-if="showWarningIcon" diff --git a/app/assets/javascripts/packages_and_registries/package_registry/constants.js b/app/assets/javascripts/packages_and_registries/package_registry/constants.js index ab6541e4264..c4d331fa384 100644 --- a/app/assets/javascripts/packages_and_registries/package_registry/constants.js +++ b/app/assets/javascripts/packages_and_registries/package_registry/constants.js @@ -74,6 +74,7 @@ export const FETCH_PACKAGE_DETAILS_ERROR_MESSAGE = s__( ); export const DELETE_PACKAGE_SUCCESS_MESSAGE = s__('PackageRegistry|Package deleted successfully'); +export const PACKAGE_REGISTRY_TITLE = __('Package Registry'); export const PACKAGE_ERROR_STATUS = 'ERROR'; export const PACKAGE_DEFAULT_STATUS = 'DEFAULT'; @@ -142,3 +143,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'); diff --git a/app/assets/javascripts/packages_and_registries/package_registry/graphql/queries/get_package_details.query.graphql b/app/assets/javascripts/packages_and_registries/package_registry/graphql/queries/get_package_details.query.graphql index 08ea0938a59..c45cbe56e00 100644 --- a/app/assets/javascripts/packages_and_registries/package_registry/graphql/queries/get_package_details.query.graphql +++ b/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 { diff --git a/app/assets/javascripts/packages_and_registries/package_registry/index.js b/app/assets/javascripts/packages_and_registries/package_registry/index.js index 7ec931ff9a0..6680e612985 100644 --- a/app/assets/javascripts/packages_and_registries/package_registry/index.js +++ b/app/assets/javascripts/packages_and_registries/package_registry/index.js @@ -2,29 +2,59 @@ import Vue from 'vue'; import Translate from '~/vue_shared/translate'; import { apolloProvider } from '~/packages_and_registries/package_registry/graphql/index'; import PackageRegistry from '~/packages_and_registries/package_registry/pages/index.vue'; +import RegistryBreadcrumb from '~/packages_and_registries/shared/components/registry_breadcrumb.vue'; +import { renderBreadcrumb } from '~/packages_and_registries/shared/utils'; import createRouter from './router'; Vue.use(Translate); export default () => { const el = document.getElementById('js-vue-packages-list'); - const { endpoint, resourceId, fullPath, pageType, emptyListIllustration } = el.dataset; - const router = createRouter(endpoint); + const { + endpoint, + resourceId, + fullPath, + pageType, + emptyListIllustration, + npmInstanceUrl, + projectListUrl, + groupListUrl, + } = el.dataset; const isGroupPage = pageType === 'groups'; - return new Vue({ - el, - router, - apolloProvider, - provide: { - resourceId, - fullPath, - emptyListIllustration, - isGroupPage, - }, - render(createElement) { - return createElement(PackageRegistry); + // This is a mini state to help the breadcrumb have the correct name in the details page + const breadCrumbState = Vue.observable({ + name: '', + updateName(value) { + this.name = value; }, }); + + const router = createRouter(endpoint, breadCrumbState); + + const attachMainComponent = () => + new Vue({ + el, + router, + apolloProvider, + provide: { + resourceId, + fullPath, + emptyListIllustration, + isGroupPage, + npmInstanceUrl, + projectListUrl, + groupListUrl, + breadCrumbState, + }, + render(createElement) { + return createElement(PackageRegistry); + }, + }); + + return { + attachBreadcrumb: renderBreadcrumb(router, apolloProvider, RegistryBreadcrumb), + attachMainComponent, + }; }; diff --git a/app/assets/javascripts/packages_and_registries/package_registry/pages/details.js b/app/assets/javascripts/packages_and_registries/package_registry/pages/details.js deleted file mode 100644 index d94bbd21035..00000000000 --- a/app/assets/javascripts/packages_and_registries/package_registry/pages/details.js +++ /dev/null @@ -1,27 +0,0 @@ -import Vue from 'vue'; -import { parseBoolean } from '~/lib/utils/common_utils'; -import PackagesApp from '~/packages_and_registries/package_registry/components/details/app.vue'; -import { apolloProvider } from '~/packages_and_registries/package_registry/graphql/index'; -import Translate from '~/vue_shared/translate'; - -Vue.use(Translate); - -export default () => { - const el = document.getElementById('js-vue-packages-detail-new'); - if (!el) { - return null; - } - - const { canDelete, ...datasetOptions } = el.dataset; - return new Vue({ - el, - apolloProvider, - provide: { - canDelete: parseBoolean(canDelete), - ...datasetOptions, - }, - render(createElement) { - return createElement(PackagesApp); - }, - }); -}; diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/details/app.vue b/app/assets/javascripts/packages_and_registries/package_registry/pages/details.vue index d49c1be5202..162b420a784 100644 --- a/app/assets/javascripts/packages_and_registries/package_registry/components/details/app.vue +++ b/app/assets/javascripts/packages_and_registries/package_registry/pages/details.vue @@ -68,16 +68,7 @@ export default { GlModal: GlModalDirective, }, mixins: [Tracking.mixin()], - inject: [ - 'packageId', - 'projectName', - 'canDelete', - 'svgPath', - 'npmPath', - 'npmHelpPath', - 'projectListUrl', - 'groupListUrl', - ], + inject: ['emptyListIllustration', 'projectListUrl', 'groupListUrl', 'breadCrumbState'], trackingActions: { DELETE_PACKAGE_TRACKING_ACTION, REQUEST_DELETE_PACKAGE_TRACKING_ACTION, @@ -100,7 +91,7 @@ export default { return this.queryVariables; }, update(data) { - return data.package; + return data.package || {}; }, error(error) { createFlash({ @@ -109,22 +100,33 @@ export default { error, }); }, + result() { + this.breadCrumbState.updateName( + `${this.packageEntity?.name} v ${this.packageEntity?.version}`, + ); + }, }, }, computed: { + projectName() { + return this.packageEntity.project?.name; + }, + packageId() { + return this.$route.params.id; + }, 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 { @@ -141,7 +143,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: { @@ -235,13 +237,13 @@ export default { v-if="!isValidPackage" :title="s__('PackageRegistry|Unable to load package')" :description="s__('PackageRegistry|There was a problem fetching the details for this package.')" - :svg-path="svgPath" + :svg-path="emptyListIllustration" /> <div v-else-if="!isLoading" class="packages-app"> <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" @@ -265,6 +267,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" diff --git a/app/assets/javascripts/packages_and_registries/package_registry/router.js b/app/assets/javascripts/packages_and_registries/package_registry/router.js index ea5b740e879..c5ef4f70dd9 100644 --- a/app/assets/javascripts/packages_and_registries/package_registry/router.js +++ b/app/assets/javascripts/packages_and_registries/package_registry/router.js @@ -1,10 +1,12 @@ import Vue from 'vue'; import VueRouter from 'vue-router'; import List from '~/packages_and_registries/package_registry/pages/list.vue'; +import Details from '~/packages_and_registries/package_registry/pages/details.vue'; +import { PACKAGE_REGISTRY_TITLE } from '~/packages_and_registries/package_registry/constants'; Vue.use(VueRouter); -export default function createRouter(base) { +export default function createRouter(base, breadCrumbState) { const router = new VueRouter({ base, mode: 'history', @@ -13,9 +15,25 @@ export default function createRouter(base) { name: 'list', path: '/', component: List, + meta: { + nameGenerator: () => PACKAGE_REGISTRY_TITLE, + root: true, + }, + }, + { + name: 'details', + path: '/:id', + component: Details, + meta: { + nameGenerator: () => breadCrumbState.name, + }, }, ], }); + router.afterEach(() => { + breadCrumbState.updateName(''); + }); + return router; } |