diff options
Diffstat (limited to 'app/assets/javascripts/packages_and_registries/container_registry/explorer/pages')
2 files changed, 33 insertions, 46 deletions
diff --git a/app/assets/javascripts/packages_and_registries/container_registry/explorer/pages/details.vue b/app/assets/javascripts/packages_and_registries/container_registry/explorer/pages/details.vue index 931849c9918..71a85d8885e 100644 --- a/app/assets/javascripts/packages_and_registries/container_registry/explorer/pages/details.vue +++ b/app/assets/javascripts/packages_and_registries/container_registry/explorer/pages/details.vue @@ -20,6 +20,7 @@ import { ALERT_SUCCESS_TAGS, ALERT_DANGER_TAGS, ALERT_DANGER_IMAGE, + ALERT_DANGER_IMPORTING, FETCH_IMAGES_LIST_ERROR_MESSAGE, UNFINISHED_STATUS, MISSING_OR_DELETED_IMAGE_BREADCRUMB, @@ -32,6 +33,8 @@ import deleteContainerRepositoryTagsMutation from '../graphql/mutations/delete_c import getContainerRepositoryDetailsQuery from '../graphql/queries/get_container_repository_details.query.graphql'; import getContainerRepositoryTagsQuery from '../graphql/queries/get_container_repository_tags.query.graphql'; +const REPOSITORY_IMPORTING_ERROR_MESSAGE = 'repository importing'; + export default { name: 'RegistryDetailsPage', components: { @@ -147,12 +150,17 @@ export default { }); if (data?.destroyContainerRepositoryTags?.errors[0]) { - throw new Error(); + throw new Error(data.destroyContainerRepositoryTags.errors[0]); } this.deleteAlertType = itemsToBeDeleted.length === 0 ? ALERT_SUCCESS_TAG : ALERT_SUCCESS_TAGS; } catch (e) { - this.deleteAlertType = itemsToBeDeleted.length === 0 ? ALERT_DANGER_TAG : ALERT_DANGER_TAGS; + if (e.message === REPOSITORY_IMPORTING_ERROR_MESSAGE) { + this.deleteAlertType = ALERT_DANGER_IMPORTING; + } else { + this.deleteAlertType = + itemsToBeDeleted.length === 0 ? ALERT_DANGER_TAG : ALERT_DANGER_TAGS; + } } this.mutationLoading = false; @@ -188,6 +196,7 @@ export default { <delete-alert v-model="deleteAlertType" :garbage-collection-help-page-path="config.garbageCollectionHelpPagePath" + :container-registry-importing-help-page-path="config.containerRegistryImportingHelpPagePath" :is-admin="config.isAdmin" class="gl-my-2" /> diff --git a/app/assets/javascripts/packages_and_registries/container_registry/explorer/pages/list.vue b/app/assets/javascripts/packages_and_registries/container_registry/explorer/pages/list.vue index e2acebf39d6..5f9e614bebb 100644 --- a/app/assets/javascripts/packages_and_registries/container_registry/explorer/pages/list.vue +++ b/app/assets/javascripts/packages_and_registries/container_registry/explorer/pages/list.vue @@ -13,9 +13,8 @@ import getContainerRepositoriesQuery from 'shared_queries/container_registry/get import createFlash from '~/flash'; import CleanupPolicyEnabledAlert from '~/packages_and_registries/shared/components/cleanup_policy_enabled_alert.vue'; import { FILTERED_SEARCH_TERM } from '~/packages_and_registries/shared/constants'; -import { extractFilterAndSorting } from '~/packages_and_registries/shared/utils'; import Tracking from '~/tracking'; -import RegistrySearch from '~/vue_shared/components/registry/registry_search.vue'; +import PersistedSearch from '~/packages_and_registries/shared/components/persisted_search.vue'; import DeleteImage from '../components/delete_image.vue'; import RegistryHeader from '../components/list_page/registry_header.vue'; @@ -61,8 +60,8 @@ export default { GlSkeletonLoader, RegistryHeader, DeleteImage, - RegistrySearch, CleanupPolicyEnabledAlert, + PersistedSearch, }, directives: { GlTooltip: GlTooltipDirective, @@ -130,8 +129,7 @@ export default { containerRepositoriesCount: 0, itemToDelete: {}, deleteAlertType: null, - filter: [], - sorting: { orderBy: 'UPDATED', sort: 'desc' }, + sorting: null, name: null, mutationLoading: false, fetchBaseQuery: false, @@ -154,7 +152,7 @@ export default { queryVariables() { return { name: this.name, - sort: this.sortBy, + sort: this.sorting, fullPath: this.config.isGroupPage ? this.config.groupPath : this.config.projectPath, isGroupPage: this.config.isGroupPage, first: GRAPHQL_PAGE_SIZE, @@ -182,24 +180,6 @@ export default { ? DELETE_IMAGE_SUCCESS_MESSAGE : DELETE_IMAGE_ERROR_MESSAGE; }, - sortBy() { - const { orderBy, sort } = this.sorting; - return `${orderBy}_${sort}`.toUpperCase(); - }, - }, - mounted() { - const { sorting, filters } = extractFilterAndSorting(this.$route.query); - - this.filter = [...filters]; - this.name = filters[0]?.value.data; - this.sorting = { ...this.sorting, ...sorting }; - - // If the two graphql calls - which are not batched - resolve togheter we will have a race - // condition when apollo sets the cache, with this we give the 'base' call an headstart - this.fetchBaseQuery = true; - setTimeout(() => { - this.fetchAdditionalDetails = true; - }, 200); }, methods: { deleteImage(item) { @@ -258,18 +238,20 @@ export default { this.track('confirm_delete'); this.mutationLoading = true; }, - updateSorting(value) { - this.sorting = { - ...this.sorting, - ...value, - }; - }, - doFilter() { - const search = this.filter.find((i) => i.type === FILTERED_SEARCH_TERM); + handleSearchUpdate({ sort, filters }) { + this.sorting = sort; + + const search = filters.find((i) => i.type === FILTERED_SEARCH_TERM); this.name = search?.value?.data; - }, - updateUrlQueryString(query) { - this.$router.push({ query }); + + if (!this.fetchBaseQuery && !this.fetchAdditionalDetails) { + // If the two graphql calls - which are not batched - resolve together we will have a race + // condition when apollo sets the cache, with this we give the 'base' call an headstart + this.fetchBaseQuery = true; + setTimeout(() => { + this.fetchAdditionalDetails = true; + }, 200); + } }, }, }; @@ -332,16 +314,12 @@ export default { /> </template> </registry-header> - - <registry-search - :filter="filter" - :sorting="sorting" - :tokens="[]" + <persisted-search + class="gl-mb-5" :sortable-fields="$options.searchConfig" - @sorting:changed="updateSorting" - @filter:changed="filter = $event" - @filter:submit="doFilter" - @query:changed="updateUrlQueryString" + :default-order="$options.searchConfig[0].orderBy" + default-sort="desc" + @update="handleSearchUpdate" /> <div v-if="isLoading" class="gl-mt-5"> |