diff options
Diffstat (limited to 'app/assets/javascripts/packages_and_registries/package_registry/components/details/app.vue')
| -rw-r--r-- | app/assets/javascripts/packages_and_registries/package_registry/components/details/app.vue | 248 |
1 files changed, 155 insertions, 93 deletions
diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/details/app.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/details/app.vue index e2a2fb1430d..3d3fa62fd43 100644 --- a/app/assets/javascripts/packages_and_registries/package_registry/components/details/app.vue +++ b/app/assets/javascripts/packages_and_registries/package_registry/components/details/app.vue @@ -1,8 +1,4 @@ <script> -/* - * The commented part of this component needs to be re-enabled in the refactor process, - * See here for more info: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/64939 - */ import { GlBadge, GlButton, @@ -14,22 +10,39 @@ import { GlTabs, GlSprintf, } from '@gitlab/ui'; +import createFlash from '~/flash'; +import { convertToGraphQLId } from '~/graphql_shared/utils'; import { numberToHumanSize } from '~/lib/utils/number_utils'; import { objectToQuery } from '~/lib/utils/url_utility'; import { s__, __ } from '~/locale'; -// import AdditionalMetadata from '~/packages/details/components/additional_metadata.vue'; -// import DependencyRow from '~/packages/details/components/dependency_row.vue'; -// import InstallationCommands from '~/packages/details/components/installation_commands.vue'; -// import PackageFiles from '~/packages/details/components/package_files.vue'; -// import PackageHistory from '~/packages/details/components/package_history.vue'; -// import PackageListRow from '~/packages/shared/components/package_list_row.vue'; -import PackagesListLoader from '~/packages/shared/components/packages_list_loader.vue'; +import { packageTypeToTrackCategory } from '~/packages/shared/utils'; +import AdditionalMetadata from '~/packages_and_registries/package_registry/components/details/additional_metadata.vue'; +import DependencyRow from '~/packages_and_registries/package_registry/components/details/dependency_row.vue'; +import InstallationCommands from '~/packages_and_registries/package_registry/components/details/installation_commands.vue'; +import PackageFiles from '~/packages_and_registries/package_registry/components/details/package_files.vue'; +import PackageHistory from '~/packages_and_registries/package_registry/components/details/package_history.vue'; +import PackageTitle from '~/packages_and_registries/package_registry/components/details/package_title.vue'; +import VersionRow from '~/packages_and_registries/package_registry/components/details/version_row.vue'; import { - PackageType, - TrackingActions, + PACKAGE_TYPE_NUGET, + PACKAGE_TYPE_COMPOSER, + DELETE_PACKAGE_TRACKING_ACTION, + REQUEST_DELETE_PACKAGE_TRACKING_ACTION, + CANCEL_DELETE_PACKAGE_TRACKING_ACTION, + PULL_PACKAGE_TRACKING_ACTION, + DELETE_PACKAGE_FILE_TRACKING_ACTION, + REQUEST_DELETE_PACKAGE_FILE_TRACKING_ACTION, + CANCEL_DELETE_PACKAGE_FILE_TRACKING_ACTION, SHOW_DELETE_SUCCESS_ALERT, -} from '~/packages/shared/constants'; -import { packageTypeToTrackCategory } from '~/packages/shared/utils'; + FETCH_PACKAGE_DETAILS_ERROR_MESSAGE, + DELETE_PACKAGE_ERROR_MESSAGE, + DELETE_PACKAGE_FILE_ERROR_MESSAGE, + DELETE_PACKAGE_FILE_SUCCESS_MESSAGE, +} from '~/packages_and_registries/package_registry/constants'; + +import destroyPackageMutation from '~/packages_and_registries/package_registry/graphql/mutations/destroy_package.mutation.graphql'; +import destroyPackageFileMutation from '~/packages_and_registries/package_registry/graphql/mutations/destroy_package_file.mutation.graphql'; +import getPackageDetails from '~/packages_and_registries/package_registry/graphql/queries/get_package_details.query.graphql'; import Tracking from '~/tracking'; export default { @@ -42,16 +55,13 @@ export default { GlTab, GlTabs, GlSprintf, - PackageTitle: () => import('~/packages/details/components/package_title.vue'), - TerraformTitle: () => - import('~/packages_and_registries/infrastructure_registry/components/details_title.vue'), - PackagesListLoader, - // PackageListRow, - // DependencyRow, - // PackageHistory, - // AdditionalMetadata, - // InstallationCommands, - // PackageFiles, + PackageTitle, + VersionRow, + DependencyRow, + PackageHistory, + AdditionalMetadata, + InstallationCommands, + PackageFiles, }, directives: { GlTooltip: GlTooltipDirective, @@ -59,7 +69,7 @@ export default { }, mixins: [Tracking.mixin()], inject: [ - 'titleComponent', + 'packageId', 'projectName', 'canDelete', 'svgPath', @@ -68,72 +78,150 @@ export default { 'projectListUrl', 'groupListUrl', ], - trackingActions: { ...TrackingActions }, + trackingActions: { + DELETE_PACKAGE_TRACKING_ACTION, + REQUEST_DELETE_PACKAGE_TRACKING_ACTION, + CANCEL_DELETE_PACKAGE_TRACKING_ACTION, + PULL_PACKAGE_TRACKING_ACTION, + DELETE_PACKAGE_FILE_TRACKING_ACTION, + REQUEST_DELETE_PACKAGE_FILE_TRACKING_ACTION, + CANCEL_DELETE_PACKAGE_FILE_TRACKING_ACTION, + }, data() { return { fileToDelete: null, packageEntity: {}, }; }, + apollo: { + packageEntity: { + query: getPackageDetails, + variables() { + return this.queryVariables; + }, + update(data) { + return data.package; + }, + error(error) { + createFlash({ + message: FETCH_PACKAGE_DETAILS_ERROR_MESSAGE, + captureError: true, + error, + }); + }, + }, + }, computed: { + queryVariables() { + return { + id: convertToGraphQLId('Packages::Package', this.packageId), + }; + }, packageFiles() { - return this.packageEntity.packageFiles; + return this.packageEntity?.packageFiles?.nodes; }, isLoading() { - return false; + return this.$apollo.queries.packageEntity.loading; }, isValidPackage() { - return Boolean(this.packageEntity.name); + return this.isLoading || Boolean(this.packageEntity?.name); }, tracking() { return { - category: packageTypeToTrackCategory(this.packageEntity.package_type), + category: packageTypeToTrackCategory(this.packageEntity.packageType), }; }, hasVersions() { - return this.packageEntity.versions?.length > 0; + return this.packageEntity.versions?.nodes?.length > 0; }, packageDependencies() { - return this.packageEntity.dependency_links || []; + return this.packageEntity.dependencyLinks?.nodes || []; }, showDependencies() { - return this.packageEntity.package_type === PackageType.NUGET; + return this.packageEntity.packageType === PACKAGE_TYPE_NUGET; }, showFiles() { - return this.packageEntity?.package_type !== PackageType.COMPOSER; + return this.packageEntity?.packageType !== PACKAGE_TYPE_COMPOSER; }, }, methods: { formatSize(size) { return numberToHumanSize(size); }, - getPackageVersions() { - if (!this.packageEntity.versions) { - // this.fetchPackageVersions(); + async deletePackage() { + const { data } = await this.$apollo.mutate({ + mutation: destroyPackageMutation, + variables: { + id: this.packageEntity.id, + }, + }); + + if (data?.destroyPackage?.errors[0]) { + throw data.destroyPackage.errors[0]; } }, async confirmPackageDeletion() { - this.track(TrackingActions.DELETE_PACKAGE); + this.track(DELETE_PACKAGE_TRACKING_ACTION); - await this.deletePackage(); + try { + await this.deletePackage(); - const returnTo = - !this.groupListUrl || document.referrer.includes(this.projectName) - ? this.projectListUrl - : this.groupListUrl; // to avoid security issue url are supplied from backend + const returnTo = + !this.groupListUrl || document.referrer.includes(this.projectName) + ? this.projectListUrl + : this.groupListUrl; // to avoid security issue url are supplied from backend - const modalQuery = objectToQuery({ [SHOW_DELETE_SUCCESS_ALERT]: true }); + const modalQuery = objectToQuery({ [SHOW_DELETE_SUCCESS_ALERT]: true }); - window.location.replace(`${returnTo}?${modalQuery}`); + window.location.replace(`${returnTo}?${modalQuery}`); + } catch (error) { + createFlash({ + message: DELETE_PACKAGE_ERROR_MESSAGE, + type: 'warning', + captureError: true, + error, + }); + } + }, + async deletePackageFile(id) { + try { + const { data } = await this.$apollo.mutate({ + mutation: destroyPackageFileMutation, + variables: { + id, + }, + awaitRefetchQueries: true, + refetchQueries: [ + { + query: getPackageDetails, + variables: this.queryVariables, + }, + ], + }); + if (data?.destroyPackageFile?.errors[0]) { + throw data.destroyPackageFile.errors[0]; + } + createFlash({ + message: DELETE_PACKAGE_FILE_SUCCESS_MESSAGE, + type: 'success', + }); + } catch (error) { + createFlash({ + message: DELETE_PACKAGE_FILE_ERROR_MESSAGE, + type: 'warning', + captureError: true, + error, + }); + } }, handleFileDelete(file) { - this.track(TrackingActions.REQUEST_DELETE_PACKAGE_FILE); + this.track(REQUEST_DELETE_PACKAGE_FILE_TRACKING_ACTION); this.fileToDelete = { ...file }; this.$refs.deleteFileModal.show(); }, confirmFileDelete() { - this.track(TrackingActions.DELETE_PACKAGE_FILE); - // this.deletePackageFile(this.fileToDelete.id); + this.track(DELETE_PACKAGE_FILE_TRACKING_ACTION); + this.deletePackageFile(this.fileToDelete.id); this.fileToDelete = null; }, }, @@ -174,60 +262,48 @@ export default { :description="s__('PackageRegistry|There was a problem fetching the details for this package.')" :svg-path="svgPath" /> - - <div v-else class="packages-app"> - <component :is="titleComponent"> + <div v-else-if="!isLoading" class="packages-app"> + <package-title :package-entity="packageEntity"> <template #delete-button> <gl-button v-if="canDelete" v-gl-modal="'delete-modal'" - class="js-delete-button" variant="danger" category="primary" data-qa-selector="delete_button" + data-testid="delete-package" > {{ __('Delete') }} </gl-button> </template> - </component> + </package-title> <gl-tabs> <gl-tab :title="__('Detail')"> - <div data-qa-selector="package_information_content"> - <!-- <package-history :package-entity="packageEntity" :project-name="projectName" /> + <div v-if="!isLoading" data-qa-selector="package_information_content"> + <package-history :package-entity="packageEntity" :project-name="projectName" /> - <installation-commands - :package-entity="packageEntity" - :npm-path="npmPath" - :npm-help-path="npmHelpPath" - /> + <installation-commands :package-entity="packageEntity" /> - <additional-metadata :package-entity="packageEntity" /> --> + <additional-metadata :package-entity="packageEntity" /> </div> - <!-- <package-files + <package-files v-if="showFiles" :package-files="packageFiles" - :can-delete="canDelete" @download-file="track($options.trackingActions.PULL_PACKAGE)" @delete-file="handleFileDelete" - /> --> + /> </gl-tab> - <gl-tab v-if="showDependencies" title-item-class="js-dependencies-tab"> + <gl-tab v-if="showDependencies"> <template #title> <span>{{ __('Dependencies') }}</span> - <gl-badge size="sm" data-testid="dependencies-badge">{{ - packageDependencies.length - }}</gl-badge> + <gl-badge size="sm">{{ packageDependencies.length }}</gl-badge> </template> <template v-if="packageDependencies.length > 0"> - <dependency-row - v-for="(dep, index) in packageDependencies" - :key="index" - :dependency="dep" - /> + <dependency-row v-for="dep in packageDependencies" :key="dep.id" :dependency-link="dep" /> </template> <p v-else class="gl-mt-3" data-testid="no-dependencies-message"> @@ -235,24 +311,9 @@ export default { </p> </gl-tab> - <gl-tab - :title="__('Other versions')" - title-item-class="js-versions-tab" - @click="getPackageVersions" - > - <template v-if="isLoading && !hasVersions"> - <packages-list-loader /> - </template> - - <template v-else-if="hasVersions"> - <!-- <package-list-row - v-for="v in packageEntity.versions" - :key="v.id" - :package-entity="{ name: packageEntity.name, ...v }" - :package-link="v.id.toString()" - :disable-delete="true" - :show-package-type="false" - /> --> + <gl-tab :title="__('Other versions')" title-item-class="js-versions-tab"> + <template v-if="hasVersions"> + <version-row v-for="v in packageEntity.versions.nodes" :key="v.id" :package-entity="v" /> </template> <p v-else class="gl-mt-3" data-testid="no-versions-message"> @@ -263,8 +324,8 @@ export default { <gl-modal ref="deleteModal" - class="js-delete-modal" modal-id="delete-modal" + data-testid="delete-modal" :action-primary="$options.modal.packageDeletePrimaryAction" :action-cancel="$options.modal.cancelAction" @primary="confirmPackageDeletion" @@ -287,6 +348,7 @@ export default { modal-id="delete-file-modal" :action-primary="$options.modal.fileDeletePrimaryAction" :action-cancel="$options.modal.cancelAction" + data-testid="delete-file-modal" @primary="confirmFileDelete" @canceled="track($options.trackingActions.CANCEL_DELETE_PACKAGE_FILE)" > |