Update successful delete flash copy

- new copy
- interpolate with repo name
- unit test
- pot file

app/assets/javascripts/registry/list/components/collapsible_container.vue

@@ -14,7 +14,7 @@ import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import Icon from '~/vue_shared/components/icon.vue';
 import TableRegistry from './table_registry.vue';
 import { DELETE_REPO_ERROR_MESSAGE } from '../constants';
-import { __ } from '~/locale';
+import { __, sprintf } from '~/locale';
 
 export default {
   name: 'CollapsibeContainerRegisty',
@@ -55,6 +55,11 @@ export default {
     canDeleteRepo() {
       return this.repo.canDelete && !this.isDeleteDisabled;
     },
+    deleteImageConfirmationMessage() {
+      return sprintf(__('Image %{imageName} was scheduled for deletion from the registry.'), {
+        imageName: this.repo.name,
+      });
+    },
   },
   methods: {
     ...mapActions(['fetchRepos', 'fetchList', 'deleteItem']),
@@ -69,7 +74,7 @@ export default {
       this.track('confirm_delete');
       return this.deleteItem(this.repo)
         .then(() => {
-          createFlash(__('This container registry has been scheduled for deletion.'), 'notice');
+          createFlash(this.deleteImageConfirmationMessage, 'notice');
           this.fetchRepos();
         })
         .catch(() => createFlash(DELETE_REPO_ERROR_MESSAGE));

locale/gitlab.pot

@@ -9760,6 +9760,9 @@ msgstr ""
 msgid "Iglu registry URL (optional)"
 msgstr ""
 
+msgid "Image %{imageName} was scheduled for deletion from the registry."
+msgstr ""
+
 msgid "ImageDiffViewer|2-up"
 msgstr ""
 
@@ -18635,9 +18638,6 @@ msgstr ""
 msgid "This commit was signed with an <strong>unverified</strong> signature."
 msgstr ""
 
-msgid "This container registry has been scheduled for deletion."
-msgstr ""
-
 msgid "This date is after the due date, so this epic won't appear in the roadmap."
 msgstr ""
 

spec/frontend/registry/list/components/collapsible_container_spec.js

@@ -89,19 +89,31 @@ describe('collapsible registry container', () => {
   });
 
   describe('delete repo', () => {
+    beforeEach(() => {
+      const deleteItem = jest.fn().mockResolvedValue();
+      const fetchRepos = jest.fn().mockResolvedValue();
+      wrapper.setMethods({ deleteItem, fetchRepos });
+    });
+
     it('should be possible to delete a repo', () => {
       const deleteBtn = findDeleteBtn();
       expect(deleteBtn.exists()).toBe(true);
     });
 
     it('should call deleteItem when confirming deletion', () => {
-      const deleteItem = jest.fn().mockResolvedValue();
-      const fetchRepos = jest.fn().mockResolvedValue();
-      wrapper.setMethods({ deleteItem, fetchRepos });
       wrapper.vm.handleDeleteRepository();
       expect(wrapper.vm.deleteItem).toHaveBeenCalledWith(wrapper.vm.repo);
     });
 
+    it('should show a flash with a success notice', () =>
+      wrapper.vm.handleDeleteRepository().then(() => {
+        expect(wrapper.vm.deleteImageConfirmationMessage).toContain(wrapper.vm.repo.name);
+        expect(createFlash).toHaveBeenCalledWith(
+          wrapper.vm.deleteImageConfirmationMessage,
+          'notice',
+        );
+      }));
+
     it('should show an error when there is API error', () => {
       const deleteItem = jest.fn().mockRejectedValue('error');
       wrapper.setMethods({ deleteItem });