diff options
Diffstat (limited to 'app/assets/javascripts/packages_and_registries/package_registry')
7 files changed, 60 insertions, 74 deletions
diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/delete_modal.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/delete_modal.vue index 2a1de2ae4a7..011a2668a8b 100644 --- a/app/assets/javascripts/packages_and_registries/package_registry/components/delete_modal.vue +++ b/app/assets/javascripts/packages_and_registries/package_registry/components/delete_modal.vue @@ -55,6 +55,7 @@ export default { :action-cancel="$options.modal.cancelAction" :title="$options.i18n.DELETE_PACKAGES_MODAL_TITLE" @primary="$emit('confirm')" + @cancel="$emit('cancel')" > <span>{{ description }}</span> </gl-modal> diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_history.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_history.vue index a1fc7563de1..663c361819e 100644 --- a/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_history.vue +++ b/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_history.vue @@ -159,9 +159,9 @@ export default { <history-item icon="commit" data-testid="first-pipeline-commit"> <gl-sprintf :message="$options.i18n.createdByCommitText"> <template #link> - <gl-link :href="firstPipeline.commitPath" @click="trackCommitClick" - >#{{ truncate(firstPipeline.sha) }}</gl-link - > + <gl-link :href="firstPipeline.commitPath" @click="trackCommitClick">{{ + truncate(firstPipeline.sha) + }}</gl-link> </template> <template #branch> <strong>{{ firstPipeline.ref }}</strong> @@ -212,9 +212,9 @@ export default { > <gl-sprintf :message="$options.i18n.combinedUpdateText"> <template #link> - <gl-link :href="pipeline.commitPath" @click="trackCommitClick" - >#{{ truncate(pipeline.sha) }}</gl-link - > + <gl-link :href="pipeline.commitPath" @click="trackCommitClick">{{ + truncate(pipeline.sha) + }}</gl-link> </template> <template #branch> <strong>{{ pipeline.ref }}</strong> diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_versions_list.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_versions_list.vue index efc60c9c037..787f21d9419 100644 --- a/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_versions_list.vue +++ b/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_versions_list.vue @@ -1,13 +1,13 @@ <script> -import { GlKeysetPagination } from '@gitlab/ui'; import VersionRow from '~/packages_and_registries/package_registry/components/details/version_row.vue'; import PackagesListLoader from '~/packages_and_registries/shared/components/packages_list_loader.vue'; +import RegistryList from '~/packages_and_registries/shared/components/registry_list.vue'; export default { components: { VersionRow, - GlKeysetPagination, PackagesListLoader, + RegistryList, }, props: { versions: { @@ -26,9 +26,6 @@ export default { }, }, computed: { - showPagination() { - return this.pageInfo.hasPreviousPage || this.pageInfo.hasNextPage; - }, isListEmpty() { return this.versions.length === 0; }, @@ -42,16 +39,18 @@ export default { </div> <slot v-else-if="isListEmpty" name="empty-state"></slot> <div v-else> - <version-row v-for="version in versions" :key="version.id" :package-entity="version" /> - <div class="gl-display-flex gl-justify-content-center"> - <gl-keyset-pagination - v-if="showPagination" - v-bind="pageInfo" - class="gl-mt-3" - @prev="$emit('prev-page')" - @next="$emit('next-page')" - /> - </div> + <registry-list + :hidden-delete="true" + :is-loading="isLoading" + :items="versions" + :pagination="pageInfo" + @prev-page="$emit('prev-page')" + @next-page="$emit('next-page')" + > + <template #default="{ item }"> + <version-row :package-entity="item" /> + </template> + </registry-list> </div> </div> </template> 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 dd58f28a262..fdc6e75c932 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 @@ -30,7 +30,7 @@ export default { computed: { pypiPipCommand() { // eslint-disable-next-line @gitlab/require-i18n-strings - return `pip install ${this.packageEntity.name} --extra-index-url ${this.packageEntity.pypiUrl}`; + return `pip install ${this.packageEntity.name} --index-url ${this.packageEntity.pypiUrl}`; }, pypiSetupCommand() { return `[gitlab] diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/list/packages_list.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/list/packages_list.vue index ddcddf80c15..40bf7b7e143 100644 --- a/app/assets/javascripts/packages_and_registries/package_registry/components/list/packages_list.vue +++ b/app/assets/javascripts/packages_and_registries/package_registry/components/list/packages_list.vue @@ -5,10 +5,14 @@ import DeletePackageModal from '~/packages_and_registries/shared/components/dele import PackagesListRow from '~/packages_and_registries/package_registry/components/list/package_list_row.vue'; import PackagesListLoader from '~/packages_and_registries/shared/components/packages_list_loader.vue'; import RegistryList from '~/packages_and_registries/shared/components/registry_list.vue'; +import DeleteModal from '~/packages_and_registries/package_registry/components/delete_modal.vue'; import { DELETE_PACKAGE_TRACKING_ACTION, + DELETE_PACKAGES_TRACKING_ACTION, REQUEST_DELETE_PACKAGE_TRACKING_ACTION, + REQUEST_DELETE_PACKAGES_TRACKING_ACTION, CANCEL_DELETE_PACKAGE_TRACKING_ACTION, + CANCEL_DELETE_PACKAGES_TRACKING_ACTION, PACKAGE_ERROR_STATUS, } from '~/packages_and_registries/package_registry/constants'; import { packageTypeToTrackCategory } from '~/packages_and_registries/package_registry/utils'; @@ -18,6 +22,7 @@ export default { name: 'PackagesList', components: { GlAlert, + DeleteModal, DeletePackageModal, PackagesListLoader, PackagesListRow, @@ -44,6 +49,7 @@ export default { data() { return { itemToBeDeleted: null, + itemsToBeDeleted: [], errorPackages: [], }; }, @@ -92,7 +98,18 @@ export default { this.setItemToBeDeleted(item); return; } - this.$emit('delete', items); + this.itemsToBeDeleted = items; + this.track(REQUEST_DELETE_PACKAGES_TRACKING_ACTION); + this.$refs.deletePackagesModal.show(); + }, + deleteItemsConfirmation() { + this.$emit('delete', this.itemsToBeDeleted); + this.track(DELETE_PACKAGES_TRACKING_ACTION); + this.itemsToBeDeleted = []; + }, + deleteItemsCanceled() { + this.track(CANCEL_DELETE_PACKAGES_TRACKING_ACTION); + this.itemsToBeDeleted = []; }, deleteItemConfirmation() { this.$emit('package:delete', this.itemToBeDeleted); @@ -159,6 +176,13 @@ export default { @ok="deleteItemConfirmation" @cancel="deleteItemCanceled" /> + + <delete-modal + ref="deletePackagesModal" + :items-to-be-deleted="itemsToBeDeleted" + @confirm="deleteItemsConfirmation" + @cancel="deleteItemsCanceled" + /> </template> </div> </template> 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 b731cd77e66..539b12bd6db 100644 --- a/app/assets/javascripts/packages_and_registries/package_registry/constants.js +++ b/app/assets/javascripts/packages_and_registries/package_registry/constants.js @@ -110,6 +110,11 @@ export const FETCH_PACKAGE_PIPELINES_ERROR_MESSAGE = s__( export const FETCH_PACKAGE_METADATA_ERROR_MESSAGE = s__( 'PackageRegistry|Something went wrong while fetching the package metadata.', ); + +export const DELETE_PACKAGES_TRACKING_ACTION = 'delete_packages'; +export const REQUEST_DELETE_PACKAGES_TRACKING_ACTION = 'request_delete_packages'; +export const CANCEL_DELETE_PACKAGES_TRACKING_ACTION = 'cancel_delete_packages'; + export const DELETE_PACKAGES_ERROR_MESSAGE = s__( 'PackageRegistry|Something went wrong while deleting packages.', ); @@ -184,9 +189,6 @@ export const PACKAGE_TYPES = [ s__('PackageRegistry|Helm'), ]; -export const HIDE_PACKAGE_MIGRATION_SURVEY_COOKIE = 'hide_package_registry_migration_survey'; -export const SURVEY_LINK = 'https://gitlab.fra1.qualtrics.com/jfe/form/SV_cHomH9FPzOaiDTU'; - // links export const EMPTY_LIST_HELP_URL = helpPagePath('user/packages/package_registry/index'); diff --git a/app/assets/javascripts/packages_and_registries/package_registry/pages/list.vue b/app/assets/javascripts/packages_and_registries/package_registry/pages/list.vue index 8b5d51cb856..396429d60d8 100644 --- a/app/assets/javascripts/packages_and_registries/package_registry/pages/list.vue +++ b/app/assets/javascripts/packages_and_registries/package_registry/pages/list.vue @@ -1,20 +1,18 @@ <script> -import { GlAlert, GlBanner, GlEmptyState, GlLink, GlSprintf } from '@gitlab/ui'; -import { createAlert, VARIANT_INFO } from '~/flash'; -import { getCookie, historyReplaceState, parseBoolean, setCookie } from '~/lib/utils/common_utils'; +import { GlAlert, GlEmptyState, GlLink, GlSprintf } from '@gitlab/ui'; +import { createAlert, VARIANT_INFO, VARIANT_SUCCESS, VARIANT_DANGER } from '~/flash'; +import { historyReplaceState } from '~/lib/utils/common_utils'; import { s__ } from '~/locale'; import { SHOW_DELETE_SUCCESS_ALERT } from '~/packages_and_registries/shared/constants'; import { PROJECT_RESOURCE_TYPE, GROUP_RESOURCE_TYPE, GRAPHQL_PAGE_SIZE, - HIDE_PACKAGE_MIGRATION_SURVEY_COOKIE, DELETE_PACKAGE_SUCCESS_MESSAGE, DELETE_PACKAGES_ERROR_MESSAGE, DELETE_PACKAGES_SUCCESS_MESSAGE, EMPTY_LIST_HELP_URL, PACKAGE_HELP_URL, - SURVEY_LINK, } from '~/packages_and_registries/package_registry/constants'; import getPackagesQuery from '~/packages_and_registries/package_registry/graphql/queries/get_packages.query.graphql'; import destroyPackagesMutation from '~/packages_and_registries/package_registry/graphql/mutations/destroy_packages.mutation.graphql'; @@ -22,31 +20,26 @@ import DeletePackage from '~/packages_and_registries/package_registry/components import PackageTitle from '~/packages_and_registries/package_registry/components/list/package_title.vue'; import PackageSearch from '~/packages_and_registries/package_registry/components/list/package_search.vue'; import PackageList from '~/packages_and_registries/package_registry/components/list/packages_list.vue'; -import DeleteModal from '~/packages_and_registries/package_registry/components/delete_modal.vue'; export default { components: { GlAlert, - GlBanner, GlEmptyState, GlLink, GlSprintf, PackageList, PackageTitle, PackageSearch, - DeleteModal, DeletePackage, }, inject: ['emptyListIllustration', 'isGroupPage', 'fullPath'], data() { return { alertVariables: null, - itemsToBeDeleted: [], packages: {}, sort: '', filters: {}, mutationLoading: false, - showSurveyBanner: !parseBoolean(getCookie(HIDE_PACKAGE_MIGRATION_SURVEY_COOKIE)), }; }, apollo: { @@ -121,15 +114,13 @@ export default { historyReplaceState(cleanUrl); } }, - async confirmDelete() { - const { itemsToBeDeleted } = this; - this.itemsToBeDeleted = []; + async deletePackages(packageEntities) { this.mutationLoading = true; try { const { data } = await this.$apollo.mutate({ mutation: destroyPackagesMutation, variables: { - ids: itemsToBeDeleted.map((i) => i.id), + ids: packageEntities.map((i) => i.id), }, awaitRefetchQueries: true, refetchQueries: [ @@ -144,30 +135,22 @@ export default { throw new Error(data.destroyPackages.errors[0]); } this.showAlert({ - variant: 'success', + variant: VARIANT_SUCCESS, message: DELETE_PACKAGES_SUCCESS_MESSAGE, }); } catch { this.showAlert({ - variant: 'danger', + variant: VARIANT_DANGER, message: DELETE_PACKAGES_ERROR_MESSAGE, }); } finally { this.mutationLoading = false; } }, - showDeletePackagesModal(toBeDeleted) { - this.itemsToBeDeleted = toBeDeleted; - this.$refs.deletePackagesModal.show(); - }, handleSearchUpdate({ sort, filters }) { this.sort = sort; this.filters = { ...filters }; }, - hideSurvey() { - this.showSurveyBanner = false; - setCookie(HIDE_PACKAGE_MIGRATION_SURVEY_COOKIE, 'true'); - }, updateQuery(_, { fetchMoreResult }) { return fetchMoreResult; }, @@ -208,17 +191,11 @@ export default { noResultsText: s__( 'PackageRegistry|Learn how to %{noPackagesLinkStart}publish and share your packages%{noPackagesLinkEnd} with GitLab.', ), - surveyBannerTitle: s__('PackageRegistry|Help us learn about your registry migration needs'), - surveyBannerDescription: s__( - 'PackageRegistry|If you are interested in migrating packages from your private registry to the GitLab Package Registry, take our survey and tell us more about your needs.', - ), - surveyBannerPrimaryButtonText: s__('PackageRegistry|Take survey'), }, links: { EMPTY_LIST_HELP_URL, PACKAGE_HELP_URL, }, - surveyLink: SURVEY_LINK, }; </script> @@ -233,17 +210,6 @@ export default { > {{ alertVariables.message }} </gl-alert> - <gl-banner - v-if="showSurveyBanner" - :title="$options.i18n.surveyBannerTitle" - :button-text="$options.i18n.surveyBannerPrimaryButtonText" - :button-link="$options.surveyLink" - class="gl-mt-3" - @primary="hideSurvey" - @close="hideSurvey" - > - <p>{{ $options.i18n.surveyBannerDescription }}</p> - </gl-banner> <package-title :help-url="$options.links.PACKAGE_HELP_URL" :count="packagesCount" /> <package-search class="gl-mb-5" @update="handleSearchUpdate" /> @@ -261,7 +227,7 @@ export default { @prev-page="fetchPreviousPage" @next-page="fetchNextPage" @package:delete="deletePackage" - @delete="showDeletePackagesModal" + @delete="deletePackages" > <template #empty-state> <gl-empty-state :title="emptyStateTitle" :svg-path="emptyListIllustration"> @@ -280,11 +246,5 @@ export default { </package-list> </template> </delete-package> - - <delete-modal - ref="deletePackagesModal" - :items-to-be-deleted="itemsToBeDeleted" - @confirm="confirmDelete" - /> </div> </template> |