Add latest changes from gitlab-org/gitlab@master

6 files changed, 29 insertions, 42 deletions

diff --git a/app/assets/javascripts/registry/explorer/components/list_page/image_list_row.vue b/app/assets/javascripts/registry/explorer/components/list_page/image_list_row.vue
index cfd787b3f52..8308ac7e327 100644
--- a/app/assets/javascripts/registry/explorer/components/list_page/image_list_row.vue
+++ b/app/assets/javascripts/registry/explorer/components/list_page/image_list_row.vue
@@ -37,15 +37,6 @@ export default {
     ROW_SCHEDULED_FOR_DELETION,
   },
   computed: {
-    encodedItem() {
-      const params = JSON.stringify({
-        name: this.item.path,
-        tags_path: this.item.tags_path,
-        id: this.item.id,
-        cleanup_policy_started_at: this.item.cleanup_policy_started_at,
-      });
-      return window.btoa(params);
-    },
     disabledDelete() {
       return !this.item.destroy_path || this.item.deleting;
     },
@@ -82,7 +73,7 @@ export default {
       <router-link
         class="gl-text-body gl-font-weight-bold"
         data-testid="detailsLink"
-        :to="{ name: 'details', params: { id: encodedItem } }"
+        :to="{ name: 'details', params: { id: item.id } }"
       >
         {{ item.path }}
       </router-link>
diff --git a/app/assets/javascripts/registry/explorer/components/registry_breadcrumb.vue b/app/assets/javascripts/registry/explorer/components/registry_breadcrumb.vue
index 146d1434b18..666d8b042da 100644
--- a/app/assets/javascripts/registry/explorer/components/registry_breadcrumb.vue
+++ b/app/assets/javascripts/registry/explorer/components/registry_breadcrumb.vue
@@ -30,7 +30,7 @@ export default {
       return {
         tagName,
         className,
-        text: this.$route.meta.nameGenerator(this.$route),
+        text: this.$route.meta.nameGenerator(this.$store.state),
         path: { to: this.$route.name },
       };
     },
@@ -48,7 +48,7 @@ export default {
     ></li>
     <li v-if="!isRootRoute">
       <router-link ref="rootRouteLink" :to="rootRoute.path">
-        {{ rootRoute.meta.nameGenerator(rootRoute) }}
+        {{ rootRoute.meta.nameGenerator($store.state) }}
       </router-link>
       <component :is="divider.tagName" v-safe-html="divider.innerHTML" :class="divider.classList" />
     </li>
diff --git a/app/assets/javascripts/registry/explorer/pages/details.vue b/app/assets/javascripts/registry/explorer/pages/details.vue
index e110c9c9c70..a60ef5c4982 100644
--- a/app/assets/javascripts/registry/explorer/pages/details.vue
+++ b/app/assets/javascripts/registry/explorer/pages/details.vue
@@ -11,7 +11,6 @@ import TagsList from '../components/details_page/tags_list.vue';
 import TagsLoader from '../components/details_page/tags_loader.vue';
 import EmptyTagsState from '../components/details_page/empty_tags_state.vue';
 
-import { decodeAndParse } from '../utils';
 import {
   ALERT_SUCCESS_TAG,
   ALERT_DANGER_TAG,
@@ -43,12 +42,9 @@ export default {
     };
   },
   computed: {
-    ...mapState(['tagsPagination', 'isLoading', 'config', 'tags']),
-    queryParameters() {
-      return decodeAndParse(this.$route.params.id);
-    },
+    ...mapState(['tagsPagination', 'isLoading', 'config', 'tags', 'imageDetails']),
     showPartialCleanupWarning() {
-      return this.queryParameters.cleanup_policy_started_at && !this.dismissPartialCleanupWarning;
+      return this.imageDetails?.cleanup_policy_started_at && !this.dismissPartialCleanupWarning;
     },
     tracking() {
       return {
@@ -61,15 +57,20 @@ export default {
         return this.tagsPagination.page;
       },
       set(page) {
-        this.requestTagsList({ pagination: { page }, params: this.$route.params.id });
+        this.requestTagsList({ page });
       },
     },
   },
   mounted() {
-    this.requestTagsList({ params: this.$route.params.id });
+    this.requestImageDetailsAndTagsList(this.$route.params.id);
   },
   methods: {
-    ...mapActions(['requestTagsList', 'requestDeleteTag', 'requestDeleteTags']),
+    ...mapActions([
+      'requestTagsList',
+      'requestDeleteTag',
+      'requestDeleteTags',
+      'requestImageDetailsAndTagsList',
+    ]),
     deleteTags(toBeDeleted) {
       this.itemsToBeDeleted = this.tags.filter(tag => toBeDeleted[tag.name]);
       this.track('click_button');
@@ -78,7 +79,7 @@ export default {
     handleSingleDelete() {
       const [itemToDelete] = this.itemsToBeDeleted;
       this.itemsToBeDeleted = [];
-      return this.requestDeleteTag({ tag: itemToDelete, params: this.$route.params.id })
+      return this.requestDeleteTag({ tag: itemToDelete })
         .then(() => {
           this.deleteAlertType = ALERT_SUCCESS_TAG;
         })
@@ -92,7 +93,6 @@ export default {
 
       return this.requestDeleteTags({
         ids: itemsToBeDeleted.map(x => x.name),
-        params: this.$route.params.id,
       })
         .then(() => {
           this.deleteAlertType = ALERT_SUCCESS_TAGS;
@@ -132,7 +132,7 @@ export default {
       @dismiss="dismissPartialCleanupWarning = true"
     />
 
-    <details-header :image-name="queryParameters.name" />
+    <details-header :image-name="imageDetails.name" />
 
     <tags-loader v-if="isLoading" />
     <template v-else>
diff --git a/app/assets/javascripts/registry/explorer/router.js b/app/assets/javascripts/registry/explorer/router.js
index f570987023b..dcf1c77329d 100644
--- a/app/assets/javascripts/registry/explorer/router.js
+++ b/app/assets/javascripts/registry/explorer/router.js
@@ -2,7 +2,6 @@ import Vue from 'vue';
 import VueRouter from 'vue-router';
 import List from './pages/list.vue';
 import Details from './pages/details.vue';
-import { decodeAndParse } from './utils';
 import { CONTAINER_REGISTRY_TITLE } from './constants/index';
 
 Vue.use(VueRouter);
@@ -26,7 +25,7 @@ export default function createRouter(base) {
         path: '/:id',
         component: Details,
         meta: {
-          nameGenerator: route => decodeAndParse(route.params.id).name,
+          nameGenerator: ({ imageDetails }) => imageDetails?.name,
         },
       },
     ],
diff --git a/app/assets/javascripts/registry/explorer/stores/actions.js b/app/assets/javascripts/registry/explorer/stores/actions.js
index b9b0e1704d8..3d5b9a36543 100644
--- a/app/assets/javascripts/registry/explorer/stores/actions.js
+++ b/app/assets/javascripts/registry/explorer/stores/actions.js
@@ -9,7 +9,7 @@ import {
   FETCH_TAGS_LIST_ERROR_MESSAGE,
   FETCH_IMAGE_DETAILS_ERROR_MESSAGE,
 } from '../constants/index';
-import { decodeAndParse } from '../utils';
+import { pathGenerator } from '../utils';
 
 export const setInitialState = ({ commit }, data) => commit(types.SET_INITIAL_STATE, data);
 export const setShowGarbageCollectionTip = ({ commit }, data) =>
@@ -45,13 +45,13 @@ export const requestImagesList = (
     });
 };
 
-export const requestTagsList = ({ commit, dispatch }, { pagination = {}, params }) => {
+export const requestTagsList = ({ commit, dispatch, state: { imageDetails } }, pagination = {}) => {
   commit(types.SET_MAIN_LOADING, true);
-  const { tags_path } = decodeAndParse(params);
+  const tagsPath = pathGenerator(imageDetails);
 
   const { page = DEFAULT_PAGE, perPage = DEFAULT_PAGE_SIZE } = pagination;
   return axios
-    .get(tags_path, { params: { page, per_page: perPage } })
+    .get(tagsPath, { params: { page, per_page: perPage } })
     .then(({ data, headers }) => {
       dispatch('receiveTagsListSuccess', { data, headers });
     })
@@ -76,30 +76,30 @@ export const requestImageDetailsAndTagsList = ({ dispatch, commit }, id) => {
     });
 };
 
-export const requestDeleteTag = ({ commit, dispatch, state }, { tag, params }) => {
+export const requestDeleteTag = ({ commit, dispatch, state }, { tag }) => {
   commit(types.SET_MAIN_LOADING, true);
   return axios
     .delete(tag.destroy_path)
     .then(() => {
       dispatch('setShowGarbageCollectionTip', true);
-      return dispatch('requestTagsList', { pagination: state.tagsPagination, params });
+
+      return dispatch('requestTagsList', state.tagsPagination);
     })
     .finally(() => {
       commit(types.SET_MAIN_LOADING, false);
     });
 };
 
-export const requestDeleteTags = ({ commit, dispatch, state }, { ids, params }) => {
+export const requestDeleteTags = ({ commit, dispatch, state }, { ids }) => {
   commit(types.SET_MAIN_LOADING, true);
-  const { tags_path } = decodeAndParse(params);
 
-  const url = tags_path.replace('?format=json', '/bulk_destroy');
+  const tagsPath = pathGenerator(state.imageDetails, '/bulk_destroy');
 
   return axios
-    .delete(url, { params: { ids } })
+    .delete(tagsPath, { params: { ids } })
     .then(() => {
       dispatch('setShowGarbageCollectionTip', true);
-      return dispatch('requestTagsList', { pagination: state.tagsPagination, params });
+      return dispatch('requestTagsList', state.tagsPagination);
     })
     .finally(() => {
       commit(types.SET_MAIN_LOADING, false);
diff --git a/app/assets/javascripts/registry/explorer/utils.js b/app/assets/javascripts/registry/explorer/utils.js
index 7c6348151c1..a3478756c9b 100644
--- a/app/assets/javascripts/registry/explorer/utils.js
+++ b/app/assets/javascripts/registry/explorer/utils.js
@@ -1,9 +1,6 @@
-export const decodeAndParse = param => JSON.parse(window.atob(param));
-
-// eslint-disable-next-line @gitlab/require-i18n-strings
-export const pathGenerator = (imageDetails, ending = 'tags?format=json') => {
+export const pathGenerator = (imageDetails, ending = '?format=json') => {
   // this method is a temporary workaround, to be removed with graphql implementation
   // https://gitlab.com/gitlab-org/gitlab/-/issues/276432
   const basePath = imageDetails.path.replace(`/${imageDetails.name}`, '');
-  return `/${basePath}/registry/repository/${imageDetails.id}/${ending}`;
+  return `/${basePath}/registry/repository/${imageDetails.id}/tags${ending}`;
 };