diff options
Diffstat (limited to 'app/assets/javascripts/packages_and_registries')
13 files changed, 91 insertions, 115 deletions
diff --git a/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/details_page/tags_list_row.vue b/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/details_page/tags_list_row.vue index acf810257e6..38b601ac3ec 100644 --- a/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/details_page/tags_list_row.vue +++ b/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/details_page/tags_list_row.vue @@ -95,7 +95,7 @@ export default { return formatDate(this.tag.createdAt, 'isoDate'); }, publishedTime() { - return formatDate(this.tag.createdAt, 'hh:MM Z'); + return formatDate(this.tag.createdAt, 'HH:MM:ss Z'); }, formattedRevision() { // to be removed when API response is adjusted diff --git a/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/list_page/image_list_row.vue b/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/list_page/image_list_row.vue index 23d8e97dd79..4f89d217623 100644 --- a/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/list_page/image_list_row.vue +++ b/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/list_page/image_list_row.vue @@ -12,7 +12,6 @@ import { REMOVE_REPOSITORY_LABEL, ROW_SCHEDULED_FOR_DELETION, IMAGE_DELETE_SCHEDULED_STATUS, - IMAGE_FAILED_DELETED_STATUS, IMAGE_MIGRATING_STATE, COPY_IMAGE_PATH_TITLE, IMAGE_FULL_PATH_LABEL, @@ -79,9 +78,6 @@ export default { migrating() { return this.item.migrationState === IMAGE_MIGRATING_STATE; }, - failedDelete() { - return this.item.status === IMAGE_FAILED_DELETED_STATUS; - }, tagsCountText() { return n__( 'ContainerRegistry|%{count} Tag', @@ -99,9 +95,6 @@ export default { } return projectPath; }, - routerLinkEvent() { - return this.deleting ? '' : 'click'; - }, deleteButtonTooltipTitle() { return this.migrating ? LIST_DELETE_BUTTON_DISABLED_FOR_MIGRATION @@ -121,15 +114,7 @@ export default { </script> <template> - <list-item - v-gl-tooltip="{ - placement: 'left', - disabled: !deleting, - title: $options.i18n.ROW_SCHEDULED_FOR_DELETION, - }" - v-bind="$attrs" - :disabled="deleting" - > + <list-item v-bind="$attrs"> <template #left-primary> <gl-button v-if="!showFullPath" @@ -143,12 +128,13 @@ export default { :aria-label="$options.i18n.IMAGE_FULL_PATH_LABEL" @click="hideButton" /> + <span v-if="deleting" class="gl-text-gray-500">{{ imageName }}</span> <router-link + v-else ref="imageName" class="gl-text-body gl-font-weight-bold" data-testid="details-link" data-qa-selector="registry_image_content" - :event="routerLinkEvent" :to="{ name: 'details', params: { id } }" > {{ imageName }} @@ -163,21 +149,24 @@ export default { </template> <template #left-secondary> <template v-if="!metadataLoading"> - <span class="gl-display-flex gl-align-items-center" data-testid="tags-count"> - <gl-icon name="tag" class="gl-mr-2" /> - <gl-sprintf :message="tagsCountText"> - <template #count> - {{ item.tagsCount }} - </template> - </gl-sprintf> - </span> + <span v-if="deleting">{{ $options.i18n.ROW_SCHEDULED_FOR_DELETION }}</span> + <template v-else> + <span class="gl-display-flex gl-align-items-center" data-testid="tags-count"> + <gl-icon name="tag" class="gl-mr-2" /> + <gl-sprintf :message="tagsCountText"> + <template #count> + {{ item.tagsCount }} + </template> + </gl-sprintf> + </span> - <cleanup-status - v-if="item.expirationPolicyCleanupStatus" - class="ml-2" - :status="item.expirationPolicyCleanupStatus" - :expiration-policy="expirationPolicy" - /> + <cleanup-status + v-if="item.expirationPolicyCleanupStatus" + class="gl-ml-2" + :status="item.expirationPolicyCleanupStatus" + :expiration-policy="expirationPolicy" + /> + </template> </template> <div v-else class="gl-w-full"> diff --git a/app/assets/javascripts/packages_and_registries/container_registry/explorer/constants/list.js b/app/assets/javascripts/packages_and_registries/container_registry/explorer/constants/list.js index 020d78ad364..f2aa4916f48 100644 --- a/app/assets/javascripts/packages_and_registries/container_registry/explorer/constants/list.js +++ b/app/assets/javascripts/packages_and_registries/container_registry/explorer/constants/list.js @@ -53,7 +53,6 @@ export const TRACKING_ACTION_CLICK_SHOW_FULL_PATH = 'click_show_full_path'; // Parameters export const IMAGE_DELETE_SCHEDULED_STATUS = 'DELETE_SCHEDULED'; -export const IMAGE_FAILED_DELETED_STATUS = 'DELETE_FAILED'; export const IMAGE_MIGRATING_STATE = 'importing'; export const GRAPHQL_PAGE_SIZE = 10; diff --git a/app/assets/javascripts/packages_and_registries/container_registry/explorer/graphql/index.js b/app/assets/javascripts/packages_and_registries/container_registry/explorer/graphql/index.js index 9b062024d03..850dca07a3f 100644 --- a/app/assets/javascripts/packages_and_registries/container_registry/explorer/graphql/index.js +++ b/app/assets/javascripts/packages_and_registries/container_registry/explorer/graphql/index.js @@ -20,7 +20,7 @@ export const apolloProvider = new VueApollo({ ContainerRepositoryDetails: { fields: { tags: { - keyArgs: ['id'], + keyArgs: ['id', 'name', 'sort'], merge: mergeVariables, }, }, diff --git a/app/assets/javascripts/packages_and_registries/infrastructure_registry/details/components/package_history.vue b/app/assets/javascripts/packages_and_registries/infrastructure_registry/details/components/package_history.vue index e5be98b87f7..06e4c38a179 100644 --- a/app/assets/javascripts/packages_and_registries/infrastructure_registry/details/components/package_history.vue +++ b/app/assets/javascripts/packages_and_registries/infrastructure_registry/details/components/package_history.vue @@ -96,9 +96,9 @@ export default { <history-item icon="commit" data-testid="first-pipeline-commit"> <gl-sprintf :message="$options.i18n.createdByCommitText"> <template #link> - <gl-link :href="firstPipeline.project.commit_url" - >#{{ truncate(firstPipeline.sha) }}</gl-link - > + <gl-link :href="firstPipeline.project.commit_url">{{ + truncate(firstPipeline.sha) + }}</gl-link> </template> <template #branch> <strong>{{ firstPipeline.ref }}</strong> @@ -147,7 +147,7 @@ export default { > <gl-sprintf :message="$options.i18n.combinedUpdateText"> <template #link> - <gl-link :href="pipeline.project.commit_url">#{{ truncate(pipeline.sha) }}</gl-link> + <gl-link :href="pipeline.project.commit_url">{{ truncate(pipeline.sha) }}</gl-link> </template> <template #branch> <strong>{{ pipeline.ref }}</strong> 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> diff --git a/app/assets/javascripts/packages_and_registries/shared/components/registry_list.vue b/app/assets/javascripts/packages_and_registries/shared/components/registry_list.vue index cc345fda7e8..d07d0a7673f 100644 --- a/app/assets/javascripts/packages_and_registries/shared/components/registry_list.vue +++ b/app/assets/javascripts/packages_and_registries/shared/components/registry_list.vue @@ -87,13 +87,15 @@ export default { <template> <div> - <div class="gl-display-flex gl-justify-content-space-between gl-mb-3 gl-align-items-center"> - <gl-form-checkbox v-if="!hiddenDelete" v-model="selectAll" class="gl-ml-2 gl-pt-2"> + <div + v-if="!hiddenDelete" + class="gl-display-flex gl-justify-content-space-between gl-mb-3 gl-align-items-center" + > + <gl-form-checkbox v-model="selectAll" class="gl-ml-2 gl-pt-2"> <span class="gl-font-weight-bold">{{ title }}</span> </gl-form-checkbox> <gl-button - v-if="!hiddenDelete" :disabled="disableDeleteButton" category="secondary" variant="danger" |