Merge branch...

Merge branch '33661-alert-admin-that-untagged-images-are-ready-for-deletion-removal-from-storage' into 'master'

Alert admin that garbage collection must be ran after delete

See merge request gitlab-org/gitlab!27658

app/assets/javascripts/registry/explorer/index.js

 import Vue from 'vue';
+import { GlToast } from '@gitlab/ui';
 import Translate from '~/vue_shared/translate';
 import RegistryExplorer from './pages/index.vue';
 import RegistryBreadcrumb from './components/registry_breadcrumb.vue';
@@ -6,6 +7,7 @@ import { createStore } from './stores';
 import createRouter from './router';
 
 Vue.use(Translate);
+Vue.use(GlToast);
 
 export default () => {
   const el = document.getElementById('js-container-registry');

app/assets/javascripts/registry/explorer/pages/details.vue

@@ -31,6 +31,10 @@ import {
   LIST_LABEL_IMAGE_ID,
   LIST_LABEL_SIZE,
   LIST_LABEL_LAST_UPDATED,
+  DELETE_TAG_SUCCESS_MESSAGE,
+  DELETE_TAG_ERROR_MESSAGE,
+  DELETE_TAGS_SUCCESS_MESSAGE,
+  DELETE_TAGS_ERROR_MESSAGE,
 } from '../constants';
 
 export default {
@@ -176,17 +180,37 @@ export default {
     },
     handleSingleDelete(itemToDelete) {
       this.itemsToBeDeleted = [];
-      this.requestDeleteTag({ tag: itemToDelete, params: this.$route.params.id });
+      return this.requestDeleteTag({ tag: itemToDelete, params: this.$route.params.id })
+        .then(() =>
+          this.$toast.show(DELETE_TAG_SUCCESS_MESSAGE, {
+            type: 'success',
+          }),
+        )
+        .catch(() =>
+          this.$toast.show(DELETE_TAG_ERROR_MESSAGE, {
+            type: 'error',
+          }),
+        );
     },
     handleMultipleDelete() {
       const { itemsToBeDeleted } = this;
       this.itemsToBeDeleted = [];
       this.selectedItems = [];
 
-      this.requestDeleteTags({
+      return this.requestDeleteTags({
         ids: itemsToBeDeleted.map(x => this.tags[x].name),
         params: this.$route.params.id,
-      });
+      })
+        .then(() =>
+          this.$toast.show(DELETE_TAGS_SUCCESS_MESSAGE, {
+            type: 'success',
+          }),
+        )
+        .catch(() =>
+          this.$toast.show(DELETE_TAGS_ERROR_MESSAGE, {
+            type: 'error',
+          }),
+        );
     },
     onDeletionConfirmed() {
       this.track('confirm_delete');

app/assets/javascripts/registry/explorer/pages/index.vue

 <script>
-export default {};
+import { GlAlert, GlSprintf, GlLink } from '@gitlab/ui';
+import { mapState, mapActions, mapGetters } from 'vuex';
+import { s__ } from '~/locale';
+
+export default {
+  components: {
+    GlAlert,
+    GlSprintf,
+    GlLink,
+  },
+  i18n: {
+    garbageCollectionTipText: s__(
+      'ContainerRegistry|This Registry contains deleted image tag data. Remember to run  %{docLinkStart}garbage collection%{docLinkEnd} to remove the stale data from storage.',
+    ),
+  },
+  computed: {
+    ...mapState(['config']),
+    ...mapGetters(['showGarbageCollection']),
+  },
+  methods: {
+    ...mapActions(['setShowGarbageCollectionTip']),
+  },
+};
 </script>
 
 <template>
   <div>
+    <gl-alert
+      v-if="showGarbageCollection"
+      variant="tip"
+      class="my-2"
+      @dismiss="setShowGarbageCollectionTip(false)"
+    >
+      <gl-sprintf :message="$options.i18n.garbageCollectionTipText">
+        <template #docLink="{content}">
+          <gl-link :href="config.garbageCollectionHelpPagePath" target="_blank">
+            {{ content }}
+          </gl-link>
+        </template>
+      </gl-sprintf>
+    </gl-alert>
+
     <transition name="slide">
-      <router-view />
+      <router-view ref="router-view" />
     </transition>
   </div>
 </template>

app/assets/javascripts/registry/explorer/pages/list.vue

@@ -12,11 +12,13 @@ import {
   GlSkeletonLoader,
 } from '@gitlab/ui';
 import Tracking from '~/tracking';
+import { s__ } from '~/locale';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import ProjectEmptyState from '../components/project_empty_state.vue';
 import GroupEmptyState from '../components/group_empty_state.vue';
 import ProjectPolicyAlert from '../components/project_policy_alert.vue';
 import QuickstartDropdown from '../components/quickstart_dropdown.vue';
+import { DELETE_IMAGE_SUCCESS_MESSAGE, DELETE_IMAGE_ERROR_MESSAGE } from '../constants';
 
 export default {
   name: 'RegistryListApp',
@@ -44,6 +46,23 @@ export default {
     width: 1000,
     height: 40,
   },
+  i18n: {
+    containerRegistryTitle: s__('ContainerRegistry|Container Registry'),
+    connectionErrorTitle: s__('ContainerRegistry|Docker connection error'),
+    connectionErrorMessage: s__(
+      `ContainerRegistry|We are having trouble connecting to Docker, which could be due to an issue with your project name or path. %{docLinkStart}More Information%{docLinkEnd}`,
+    ),
+    introText: s__(
+      `ContainerRegistry|With the Docker Container Registry integrated into GitLab, every project can have its own space to store its Docker images. %{docLinkStart}More Information%{docLinkEnd}`,
+    ),
+    deleteButtonDisabled: s__(
+      'ContainerRegistry|Missing or insufficient permission, delete button disabled',
+    ),
+    removeRepositoryLabel: s__('ContainerRegistry|Remove repository'),
+    removeRepositoryModalText: s__(
+      'ContainerRegistry|You are about to remove repository %{title}. Once you confirm, this repository will be permanently deleted.',
+    ),
+  },
   data() {
     return {
       itemToDelete: {},
@@ -76,10 +95,22 @@ export default {
       this.itemToDelete = item;
       this.$refs.deleteModal.show();
     },
-    handleDeleteRepository() {
+    handleDeleteImage() {
       this.track('confirm_delete');
-      this.requestDeleteImage(this.itemToDelete.destroy_path);
-      this.itemToDelete = {};
+      return this.requestDeleteImage(this.itemToDelete.destroy_path)
+        .then(() =>
+          this.$toast.show(DELETE_IMAGE_SUCCESS_MESSAGE, {
+            type: 'success',
+          }),
+        )
+        .catch(() =>
+          this.$toast.show(DELETE_IMAGE_ERROR_MESSAGE, {
+            type: 'error',
+          }),
+        )
+        .finally(() => {
+          this.itemToDelete = {};
+        });
     },
     encodeListItem(item) {
       const params = JSON.stringify({ name: item.path, tags_path: item.tags_path, id: item.id });
@@ -95,18 +126,12 @@ export default {
 
     <gl-empty-state
       v-if="config.characterError"
-      :title="s__('ContainerRegistry|Docker connection error')"
+      :title="$options.i18n.connectionErrorTitle"
       :svg-path="config.containersErrorImage"
     >
       <template #description>
         <p>
-          <gl-sprintf
-            :message="
-              s__(`ContainerRegistry|We are having trouble connecting to Docker, which could be due to an
-            issue with your project name or path.
-            %{docLinkStart}More Information%{docLinkEnd}`)
-            "
-          >
+          <gl-sprintf :message="$options.i18n.connectionErrorMessage">
             <template #docLink="{content}">
               <gl-link :href="`${config.helpPagePath}#docker-connection-error`" target="_blank">
                 {{ content }}
@@ -120,17 +145,11 @@ export default {
     <template v-else>
       <div>
         <div class="d-flex justify-content-between align-items-center">
-          <h4>{{ s__('ContainerRegistry|Container Registry') }}</h4>
+          <h4>{{ $options.i18n.containerRegistryTitle }}</h4>
           <quickstart-dropdown v-if="showQuickStartDropdown" class="d-none d-sm-block" />
         </div>
         <p>
-          <gl-sprintf
-            :message="
-              s__(`ContainerRegistry|With the Docker Container Registry integrated into GitLab, every
-            project can have its own space to store its Docker images.
-            %{docLinkStart}More Information%{docLinkEnd}`)
-            "
-          >
+          <gl-sprintf :message="$options.i18n.introText">
             <template #docLink="{content}">
               <gl-link :href="config.helpPagePath" target="_blank">
                 {{ content }}
@@ -180,16 +199,14 @@ export default {
             <div
               v-gl-tooltip="{ disabled: listItem.destroy_path }"
               class="d-none d-sm-block"
-              :title="
-                s__('ContainerRegistry|Missing or insufficient permission, delete button disabled')
-              "
+              :title="$options.i18n.deleteButtonDisabled"
             >
               <gl-button
                 ref="deleteImageButton"
                 v-gl-tooltip
                 :disabled="!listItem.destroy_path"
-                :title="s__('ContainerRegistry|Remove repository')"
-                :aria-label="s__('ContainerRegistry|Remove repository')"
+                :title="$options.i18n.removeRepositoryLabel"
+                :aria-label="$options.i18n.removeRepositoryLabel"
                 class="btn-inverted"
                 variant="danger"
                 @click="deleteImage(listItem)"
@@ -217,16 +234,12 @@ export default {
         ref="deleteModal"
         modal-id="delete-image-modal"
         ok-variant="danger"
-        @ok="handleDeleteRepository"
+        @ok="handleDeleteImage"
         @cancel="track('cancel_delete')"
       >
-        <template #modal-title>{{ s__('ContainerRegistry|Remove repository') }}</template>
+        <template #modal-title>{{ $options.i18n.removeRepositoryLabel }}</template>
         <p>
-          <gl-sprintf
-            :message=" s__(
-                'ContainerRegistry|You are about to remove repository %{title}. Once you confirm, this repository will be permanently deleted.',
-              ),"
-          >
+          <gl-sprintf :message="$options.i18n.removeRepositoryModalText">
             <template #title>
               <b>{{ itemToDelete.path }}</b>
             </template>

app/assets/javascripts/registry/explorer/stores/actions.js

@@ -6,16 +6,12 @@ import {
   DEFAULT_PAGE,
   DEFAULT_PAGE_SIZE,
   FETCH_TAGS_LIST_ERROR_MESSAGE,
-  DELETE_TAG_SUCCESS_MESSAGE,
-  DELETE_TAG_ERROR_MESSAGE,
-  DELETE_TAGS_SUCCESS_MESSAGE,
-  DELETE_TAGS_ERROR_MESSAGE,
-  DELETE_IMAGE_ERROR_MESSAGE,
-  DELETE_IMAGE_SUCCESS_MESSAGE,
 } from '../constants';
 import { decodeAndParse } from '../utils';
 
 export const setInitialState = ({ commit }, data) => commit(types.SET_INITIAL_STATE, data);
+export const setShowGarbageCollectionTip = ({ commit }, data) =>
+  commit(types.SET_SHOW_GARBAGE_COLLECTION_TIP, data);
 
 export const receiveImagesListSuccess = ({ commit }, { data, headers }) => {
   commit(types.SET_IMAGES_LIST_SUCCESS, data);
@@ -67,11 +63,10 @@ export const requestDeleteTag = ({ commit, dispatch, state }, { tag, params }) =
   return axios
     .delete(tag.destroy_path)
     .then(() => {
-      createFlash(DELETE_TAG_SUCCESS_MESSAGE, 'success');
+      dispatch('setShowGarbageCollectionTip', true);
       return dispatch('requestTagsList', { pagination: state.tagsPagination, params });
     })
     .catch(() => {
-      createFlash(DELETE_TAG_ERROR_MESSAGE);
       commit(types.SET_MAIN_LOADING, false);
     });
 };
@@ -85,11 +80,10 @@ export const requestDeleteTags = ({ commit, dispatch, state }, { ids, params })
   return axios
     .delete(url, { params: { ids } })
     .then(() => {
-      createFlash(DELETE_TAGS_SUCCESS_MESSAGE, 'success');
+      dispatch('setShowGarbageCollectionTip', true);
       return dispatch('requestTagsList', { pagination: state.tagsPagination, params });
     })
     .catch(() => {
-      createFlash(DELETE_TAGS_ERROR_MESSAGE);
       commit(types.SET_MAIN_LOADING, false);
     });
 };
@@ -100,11 +94,8 @@ export const requestDeleteImage = ({ commit, dispatch, state }, destroyPath) =>
   return axios
     .delete(destroyPath)
     .then(() => {
+      dispatch('setShowGarbageCollectionTip', true);
       dispatch('requestImagesList', { pagination: state.pagination });
-      createFlash(DELETE_IMAGE_SUCCESS_MESSAGE, 'success');
-    })
-    .catch(() => {
-      createFlash(DELETE_IMAGE_ERROR_MESSAGE);
     })
     .finally(() => {
       commit(types.SET_MAIN_LOADING, false);

app/assets/javascripts/registry/explorer/stores/getters.js

@@ -18,3 +18,7 @@ export const dockerLoginCommand = state => {
   /* eslint-disable @gitlab/require-i18n-strings */
   return `docker login ${state.config.registryHostUrlWithPort}`;
 };
+
+export const showGarbageCollection = state => {
+  return state.showGarbageCollectionTip && state.config.isAdmin;
+};

app/assets/javascripts/registry/explorer/stores/mutation_types.js

@@ -5,3 +5,4 @@ export const SET_PAGINATION = 'SET_PAGINATION';
 export const SET_MAIN_LOADING = 'SET_MAIN_LOADING';
 export const SET_TAGS_PAGINATION = 'SET_TAGS_PAGINATION';
 export const SET_TAGS_LIST_SUCCESS = 'SET_TAGS_LIST_SUCCESS';
+export const SET_SHOW_GARBAGE_COLLECTION_TIP = 'SET_SHOW_GARBAGE_COLLECTION_TIP';

app/assets/javascripts/registry/explorer/stores/mutations.js

@@ -7,6 +7,7 @@ export default {
       ...config,
       expirationPolicy: config.expirationPolicy ? JSON.parse(config.expirationPolicy) : undefined,
       isGroupPage: config.isGroupPage !== undefined,
+      isAdmin: config.isAdmin !== undefined,
     };
   },
 
@@ -22,6 +23,10 @@ export default {
     state.isLoading = isLoading;
   },
 
+  [types.SET_SHOW_GARBAGE_COLLECTION_TIP](state, showGarbageCollectionTip) {
+    state.showGarbageCollectionTip = showGarbageCollectionTip;
+  },
+
   [types.SET_PAGINATION](state, headers) {
     const normalizedHeaders = normalizeHeaders(headers);
     state.pagination = parseIntPagination(normalizedHeaders);

app/assets/javascripts/registry/explorer/stores/state.js

 export default () => ({
   isLoading: false,
+  showGarbageCollectionTip: false,
   config: {},
   images: [],
   tags: [],

app/views/groups/registry/repositories/index.html.haml

@@ -12,6 +12,8 @@
           "no_containers_image" => image_path('illustrations/docker-empty-state.svg'),
           "containers_error_image" => image_path('illustrations/docker-error-state.svg'),
           "registry_host_url_with_port" => escape_once(registry_config.host_port),
+          "garbage_collection_help_page_path" => help_page_path('administration/packages/container_registry', anchor: 'container-registry-garbage-collection'),
+          "is_admin": current_user&.admin,
           is_group_page: true,
           character_error: @character_error.to_s } }
       - else

app/views/projects/registry/repositories/index.html.haml

@@ -16,6 +16,8 @@
           "repository_url" => escape_once(@project.container_registry_url),
           "registry_host_url_with_port" => escape_once(registry_config.host_port),
           "expiration_policy_help_page_path" => help_page_path('user/packages/container_registry/index', anchor: 'expiration-policy'),
+          "garbage_collection_help_page_path" => help_page_path('administration/packages/container_registry', anchor: 'container-registry-garbage-collection'),
+          "is_admin": current_user&.admin,
           character_error: @character_error.to_s } }
       - else
         #js-vue-registry-images{ data: { endpoint: project_container_registry_index_path(@project, format: :json),

locale/gitlab.pot

@@ -5431,6 +5431,9 @@ msgstr ""
 msgid "ContainerRegistry|There are no container images stored for this project"
 msgstr ""
 
+msgid "ContainerRegistry|This Registry contains deleted image tag data. Remember to run  %{docLinkStart}garbage collection%{docLinkEnd} to remove the stale data from storage."
+msgstr ""
+
 msgid "ContainerRegistry|This image has no active tags"
 msgstr ""
 

spec/frontend/registry/explorer/pages/details_spec.js

@@ -5,8 +5,15 @@ import stubChildren from 'helpers/stub_children';
 import component from '~/registry/explorer/pages/details.vue';
 import store from '~/registry/explorer/stores/';
 import { SET_MAIN_LOADING } from '~/registry/explorer/stores/mutation_types/';
+import {
+  DELETE_TAG_SUCCESS_MESSAGE,
+  DELETE_TAG_ERROR_MESSAGE,
+  DELETE_TAGS_SUCCESS_MESSAGE,
+  DELETE_TAGS_ERROR_MESSAGE,
+} from '~/registry/explorer/constants';
 import { tagsListResponse } from '../mock_data';
 import { GlModal } from '../stubs';
+import { $toast } from '../../shared/mocks';
 
 describe('Details Page', () => {
   let wrapper;
@@ -40,6 +47,7 @@ describe('Details Page', () => {
             id: routeId,
           },
         },
+        $toast,
       },
     });
     dispatchSpy = jest.spyOn(store, 'dispatch');
@@ -249,13 +257,11 @@ describe('Details Page', () => {
         });
       });
 
-      it('when only one element is selected', () => {
-        const deleteModal = findDeleteModal();
-
-        wrapper.setData({ itemsToBeDeleted: [0] });
-        deleteModal.vm.$emit('ok');
+      describe('when only one element is selected', () => {
+        it('execute the delete and remove selection', () => {
+          wrapper.setData({ itemsToBeDeleted: [0] });
+          findDeleteModal().vm.$emit('ok');
 
-        return wrapper.vm.$nextTick().then(() => {
           expect(store.dispatch).toHaveBeenCalledWith('requestDeleteTag', {
             tag: store.state.tags[0],
             params: wrapper.vm.$route.params.id,
@@ -264,15 +270,33 @@ describe('Details Page', () => {
           expect(wrapper.vm.itemsToBeDeleted).toEqual([]);
           expect(findCheckedCheckboxes()).toHaveLength(0);
         });
+
+        it('show success toast on successful delete', () => {
+          return wrapper.vm.handleSingleDelete(0).then(() => {
+            expect(wrapper.vm.$toast.show).toHaveBeenCalledWith(DELETE_TAG_SUCCESS_MESSAGE, {
+              type: 'success',
+            });
+          });
+        });
+
+        it('show error toast on erred delete', () => {
+          dispatchSpy.mockRejectedValue();
+          return wrapper.vm.handleSingleDelete(0).then(() => {
+            expect(wrapper.vm.$toast.show).toHaveBeenCalledWith(DELETE_TAG_ERROR_MESSAGE, {
+              type: 'error',
+            });
+          });
+        });
       });
 
-      it('when multiple elements are selected', () => {
-        const deleteModal = findDeleteModal();
+      describe('when multiple elements are selected', () => {
+        beforeEach(() => {
+          wrapper.setData({ itemsToBeDeleted: [0, 1] });
+        });
 
-        wrapper.setData({ itemsToBeDeleted: [0, 1] });
-        deleteModal.vm.$emit('ok');
+        it('execute the delete and remove selection', () => {
+          findDeleteModal().vm.$emit('ok');
 
-        return wrapper.vm.$nextTick().then(() => {
           expect(store.dispatch).toHaveBeenCalledWith('requestDeleteTags', {
             ids: store.state.tags.map(t => t.name),
             params: wrapper.vm.$route.params.id,
@@ -281,6 +305,23 @@ describe('Details Page', () => {
           expect(wrapper.vm.itemsToBeDeleted).toEqual([]);
           expect(findCheckedCheckboxes()).toHaveLength(0);
         });
+
+        it('show success toast on successful delete', () => {
+          return wrapper.vm.handleMultipleDelete(0).then(() => {
+            expect(wrapper.vm.$toast.show).toHaveBeenCalledWith(DELETE_TAGS_SUCCESS_MESSAGE, {
+              type: 'success',
+            });
+          });
+        });
+
+        it('show error toast on erred delete', () => {
+          dispatchSpy.mockRejectedValue();
+          return wrapper.vm.handleMultipleDelete(0).then(() => {
+            expect(wrapper.vm.$toast.show).toHaveBeenCalledWith(DELETE_TAGS_ERROR_MESSAGE, {
+              type: 'error',
+            });
+          });
+        });
       });
     });
 

spec/frontend/registry/explorer/pages/index_spec.js

+import { shallowMount } from '@vue/test-utils';
+import { GlAlert, GlSprintf, GlLink } from '@gitlab/ui';
+import component from '~/registry/explorer/pages/index.vue';
+import store from '~/registry/explorer/stores/';
+
+describe('List Page', () => {
+  let wrapper;
+  let dispatchSpy;
+
+  const findRouterView = () => wrapper.find({ ref: 'router-view' });
+  const findAlert = () => wrapper.find(GlAlert);
+  const findLink = () => wrapper.find(GlLink);
+
+  const mountComponent = () => {
+    wrapper = shallowMount(component, {
+      store,
+      stubs: {
+        RouterView: true,
+        GlSprintf,
+      },
+    });
+  };
+
+  beforeEach(() => {
+    dispatchSpy = jest.spyOn(store, 'dispatch');
+    mountComponent();
+  });
+
+  it('has a router view', () => {
+    expect(findRouterView().exists()).toBe(true);
+  });
+
+  describe('garbageCollectionTip alert', () => {
+    beforeEach(() => {
+      store.dispatch('setInitialState', { isAdmin: true, garbageCollectionHelpPagePath: 'foo' });
+      store.dispatch('setShowGarbageCollectionTip', true);
+    });
+
+    afterEach(() => {
+      store.dispatch('setInitialState', {});
+      store.dispatch('setShowGarbageCollectionTip', false);
+    });
+
+    it('is visible when the user is an admin and the user performed a delete action', () => {
+      expect(findAlert().exists()).toBe(true);
+    });
+
+    it('on dismiss disappears ', () => {
+      findAlert().vm.$emit('dismiss');
+      expect(dispatchSpy).toHaveBeenCalledWith('setShowGarbageCollectionTip', false);
+      return wrapper.vm.$nextTick().then(() => {
+        expect(findAlert().exists()).toBe(false);
+      });
+    });
+
+    it('contains a link to the docs', () => {
+      const link = findLink();
+      expect(link.exists()).toBe(true);
+      expect(link.attributes('href')).toBe(store.state.config.garbageCollectionHelpPagePath);
+    });
+  });
+});

spec/frontend/registry/explorer/pages/list_spec.js

@@ -8,8 +8,13 @@ import GroupEmptyState from '~/registry/explorer/components/group_empty_state.vu
 import ProjectEmptyState from '~/registry/explorer/components/project_empty_state.vue';
 import store from '~/registry/explorer/stores/';
 import { SET_MAIN_LOADING } from '~/registry/explorer/stores/mutation_types/';
+import {
+  DELETE_IMAGE_SUCCESS_MESSAGE,
+  DELETE_IMAGE_ERROR_MESSAGE,
+} from '~/registry/explorer/constants';
 import { imagesListResponse } from '../mock_data';
 import { GlModal, GlEmptyState } from '../stubs';
+import { $toast } from '../../shared/mocks';
 
 const localVue = createLocalVue();
 localVue.use(VueRouter);
@@ -40,6 +45,9 @@ describe('List Page', () => {
         GlEmptyState,
         GlSprintf,
       },
+      mocks: {
+        $toast,
+      },
     });
     dispatchSpy = jest.spyOn(store, 'dispatch');
     store.dispatch('receiveImagesListSuccess', imagesListResponse);
@@ -174,11 +182,29 @@ describe('List Page', () => {
           const itemToDelete = wrapper.vm.images[0];
           wrapper.setData({ itemToDelete });
           findDeleteModal().vm.$emit('ok');
-          return wrapper.vm.$nextTick().then(() => {
-            expect(store.dispatch).toHaveBeenCalledWith(
-              'requestDeleteImage',
-              itemToDelete.destroy_path,
-            );
+          expect(store.dispatch).toHaveBeenCalledWith(
+            'requestDeleteImage',
+            itemToDelete.destroy_path,
+          );
+        });
+
+        it('should show a success toast when delete request is successful', () => {
+          dispatchSpy.mockResolvedValue();
+          return wrapper.vm.handleDeleteImage().then(() => {
+            expect(wrapper.vm.$toast.show).toHaveBeenCalledWith(DELETE_IMAGE_SUCCESS_MESSAGE, {
+              type: 'success',
+            });
+            expect(wrapper.vm.itemToDelete).toEqual({});
+          });
+        });
+
+        it('should show a error toast when delete request fails', () => {
+          dispatchSpy.mockRejectedValue();
+          return wrapper.vm.handleDeleteImage().then(() => {
+            expect(wrapper.vm.$toast.show).toHaveBeenCalledWith(DELETE_IMAGE_ERROR_MESSAGE, {
+              type: 'error',
+            });
+            expect(wrapper.vm.itemToDelete).toEqual({});
           });
         });
       });
@@ -227,7 +253,7 @@ describe('List Page', () => {
 
       beforeEach(() => {
         jest.spyOn(Tracking, 'event');
-        dispatchSpy.mockReturnValue();
+        dispatchSpy.mockResolvedValue();
       });
 
       it('send an event when delete button is clicked', () => {
@@ -235,13 +261,14 @@ describe('List Page', () => {
         deleteBtn.vm.$emit('click');
         testTrackingCall('click_button');
       });
+
       it('send an event when cancel is pressed on modal', () => {
         const deleteModal = findDeleteModal();
         deleteModal.vm.$emit('cancel');
         testTrackingCall('cancel_delete');
       });
+
       it('send an event when confirm is clicked on modal', () => {
-        dispatchSpy.mockReturnValue();
         const deleteModal = findDeleteModal();
         deleteModal.vm.$emit('ok');
         testTrackingCall('confirm_delete');

spec/frontend/registry/explorer/stores/actions_spec.js

@@ -38,6 +38,17 @@ describe('Actions RegistryExplorer Store', () => {
     );
   });
 
+  it('setShowGarbageCollectionTip', done => {
+    testAction(
+      actions.setShowGarbageCollectionTip,
+      true,
+      null,
+      [{ type: types.SET_SHOW_GARBAGE_COLLECTION_TIP, payload: true }],
+      [],
+      done,
+    );
+  });
+
   describe('receives api responses', () => {
     const response = {
       data: [1, 2, 3],
@@ -182,19 +193,20 @@ describe('Actions RegistryExplorer Store', () => {
         },
         [{ type: types.SET_MAIN_LOADING, payload: true }],
         [
+          {
+            type: 'setShowGarbageCollectionTip',
+            payload: true,
+          },
           {
             type: 'requestTagsList',
             payload: { pagination: {}, params },
           },
         ],
-        () => {
-          expect(createFlash).toHaveBeenCalled();
-          done();
-        },
+        done,
       );
     });
 
-    it('should show flash message on error', done => {
+    it('should turn off loading on error', done => {
       testAction(
         actions.requestDeleteTag,
         {
@@ -208,10 +220,7 @@ describe('Actions RegistryExplorer Store', () => {
           { type: types.SET_MAIN_LOADING, payload: false },
         ],
         [],
-        () => {
-          expect(createFlash).toHaveBeenCalled();
-          done();
-        },
+        done,
       );
     });
   });
@@ -234,19 +243,20 @@ describe('Actions RegistryExplorer Store', () => {
         },
         [{ type: types.SET_MAIN_LOADING, payload: true }],
         [
+          {
+            type: 'setShowGarbageCollectionTip',
+            payload: true,
+          },
           {
             type: 'requestTagsList',
             payload: { pagination: {}, params },
           },
         ],
-        () => {
-          expect(createFlash).toHaveBeenCalled();
-          done();
-        },
+        done,
       );
     });
 
-    it('should show flash message on error', done => {
+    it('should turn off loading on error', done => {
       mock.onDelete(url).replyOnce(500);
 
       testAction(
@@ -263,17 +273,14 @@ describe('Actions RegistryExplorer Store', () => {
           { type: types.SET_MAIN_LOADING, payload: false },
         ],
         [],
-        () => {
-          expect(createFlash).toHaveBeenCalled();
-          done();
-        },
+        done,
       );
     });
   });
 
   describe('request delete single image', () => {
+    const deletePath = 'delete/path';
     it('successfully performs the delete request', done => {
-      const deletePath = 'delete/path';
       mock.onDelete(deletePath).replyOnce(200);
 
       testAction(
@@ -287,33 +294,33 @@ describe('Actions RegistryExplorer Store', () => {
           { type: types.SET_MAIN_LOADING, payload: false },
         ],
         [
+          {
+            type: 'setShowGarbageCollectionTip',
+            payload: true,
+          },
           {
             type: 'requestImagesList',
             payload: { pagination: {} },
           },
         ],
-        () => {
-          expect(createFlash).toHaveBeenCalled();
-          done();
-        },
+        done,
       );
     });
 
-    it('should show flash message on error', done => {
+    it('should turn off loading on error', done => {
+      mock.onDelete(deletePath).replyOnce(400);
       testAction(
         actions.requestDeleteImage,
-        null,
+        deletePath,
         {},
         [
           { type: types.SET_MAIN_LOADING, payload: true },
           { type: types.SET_MAIN_LOADING, payload: false },
         ],
         [],
-        () => {
-          expect(createFlash).toHaveBeenCalled();
-          done();
-        },
-      );
+      ).catch(() => {
+        done();
+      });
     });
   });
 });

spec/frontend/registry/explorer/stores/getters_spec.js

@@ -49,4 +49,22 @@ describe('Getters RegistryExplorer  store', () => {
       expect(getters[getter](state)).toBe(expectedPieces.join(' '));
     });
   });
+
+  describe('showGarbageCollection', () => {
+    it.each`
+      result   | showGarbageCollectionTip | isAdmin
+      ${true}  | ${true}                  | ${true}
+      ${false} | ${true}                  | ${false}
+      ${false} | ${false}                 | ${true}
+    `(
+      'return $result when showGarbageCollectionTip $showGarbageCollectionTip and isAdmin is $isAdmin',
+      ({ result, showGarbageCollectionTip, isAdmin }) => {
+        state = {
+          config: { isAdmin },
+          showGarbageCollectionTip,
+        };
+        expect(getters.showGarbageCollection(state)).toBe(result);
+      },
+    );
+  });
 });

spec/frontend/registry/explorer/stores/mutations_spec.js

@@ -10,7 +10,12 @@ describe('Mutations Registry Explorer Store', () => {
 
   describe('SET_INITIAL_STATE', () => {
     it('should set the initial state', () => {
-      const payload = { endpoint: 'foo', isGroupPage: true, expirationPolicy: { foo: 'bar' } };
+      const payload = {
+        endpoint: 'foo',
+        isGroupPage: true,
+        expirationPolicy: { foo: 'bar' },
+        isAdmin: true,
+      };
       const expectedState = { ...mockState, config: payload };
       mutations[types.SET_INITIAL_STATE](mockState, {
         ...payload,
@@ -50,6 +55,15 @@ describe('Mutations Registry Explorer Store', () => {
     });
   });
 
+  describe('SET_SHOW_GARBAGE_COLLECTION_TIP', () => {
+    it('should set the showGarbageCollectionTip', () => {
+      const expectedState = { ...mockState, showGarbageCollectionTip: true };
+      mutations[types.SET_SHOW_GARBAGE_COLLECTION_TIP](mockState, true);
+
+      expect(mockState).toEqual(expectedState);
+    });
+  });
+
   describe('SET_PAGINATION', () => {
     const generatePagination = () => [
       {

spec/frontend/registry/shared/mocks.js

+// eslint-disable-next-line import/prefer-default-export
+export const $toast = {
+  show: jest.fn(),
+};