1 files changed, 25 insertions, 5 deletions
diff --git a/app/assets/javascripts/registry/explorer/pages/list.vue b/app/assets/javascripts/registry/explorer/pages/list.vue
index 625d491db6a..589b88d7bbe 100644
--- a/app/assets/javascripts/registry/explorer/pages/list.vue
+++ b/app/assets/javascripts/registry/explorer/pages/list.vue
@@ -11,6 +11,8 @@ import {
 import { get } from 'lodash';
 import getContainerRepositoriesQuery from 'shared_queries/container_registry/get_container_repositories.query.graphql';
 import createFlash from '~/flash';
+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 DeleteImage from '../components/delete_image.vue';
@@ -81,6 +83,9 @@ export default {
   searchConfig: SORT_FIELDS,
   apollo: {
     baseImages: {
+      skip() {
+        return !this.fetchBaseQuery;
+      },
       query: getContainerRepositoriesQuery,
       variables() {
         return this.queryVariables;
@@ -124,15 +129,19 @@ export default {
       sorting: { orderBy: 'UPDATED', sort: 'desc' },
       name: null,
       mutationLoading: false,
+      fetchBaseQuery: false,
       fetchAdditionalDetails: false,
     };
   },
   computed: {
     images() {
-      return this.baseImages.map((image, index) => ({
-        ...image,
-        ...get(this.additionalDetails, index, {}),
-      }));
+      if (this.baseImages) {
+        return this.baseImages.map((image, index) => ({
+          ...image,
+          ...get(this.additionalDetails, index, {}),
+        }));
+      }
+      return [];
     },
     graphqlResource() {
       return this.config.isGroupPage ? 'group' : 'project';
@@ -171,8 +180,15 @@ export default {
     },
   },
   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);
@@ -241,9 +257,12 @@ export default {
       };
     },
     doFilter() {
-      const search = this.filter.find((i) => i.type === 'filtered-search-term');
+      const search = this.filter.find((i) => i.type === FILTERED_SEARCH_TERM);
       this.name = search?.value?.data;
     },
+    updateUrlQueryString(query) {
+      this.$router.push({ query });
+    },
   },
 };
 </script>
@@ -303,6 +322,7 @@ export default {
         @sorting:changed="updateSorting"
         @filter:changed="filter = $event"
         @filter:submit="doFilter"
+        @query:changed="updateUrlQueryString"
       />
 
       <div v-if="isLoading" class="gl-mt-5">