Hide delete button when no tag can be deleted

- update source
- update tests

app/assets/javascripts/registry/explorer/components/details_page/tags_list.vue

@@ -33,6 +33,9 @@ export default {
     hasSelectedItems() {
       return this.tags.some(tag => this.selectedItems[tag.name]);
     },
+    showMultiDeleteButton() {
+      return this.tags.some(tag => tag.destroy_path) && this.isDesktop;
+    },
   },
   methods: {
     updateSelectedItems(name) {
@@ -50,7 +53,7 @@ export default {
       </h5>
 
       <gl-button
-        v-if="isDesktop"
+        v-if="showMultiDeleteButton"
         :disabled="!hasSelectedItems"
         category="secondary"
         variant="danger"

app/assets/javascripts/registry/explorer/constants/details.js

@@ -45,7 +45,7 @@ export const ADMIN_GARBAGE_COLLECTION_TIP = s__(
 );
 
 export const REMOVE_TAG_BUTTON_DISABLE_TOOLTIP = s__(
-  'ContainerRegistry|Missing or insufficient permission, delete button disabled',
+  'ContainerRegistry|Deletion disabled due to missing or insufficient permissions.',
 );
 
 // Parameters

locale/gitlab.pot

@@ -6276,6 +6276,9 @@ msgstr ""
 msgid "ContainerRegistry|Delete selected"
 msgstr ""
 
+msgid "ContainerRegistry|Deletion disabled due to missing or insufficient permissions."
+msgstr ""
+
 msgid "ContainerRegistry|Digest: %{imageId}"
 msgstr ""
 

spec/frontend/registry/explorer/components/details_page/tags_list_spec.js

@@ -8,6 +8,7 @@ import { tagsListResponse } from '../../mock_data';
 describe('Tags List', () => {
   let wrapper;
   const tags = [...tagsListResponse.data];
+  const readOnlyTags = tags.map(t => ({ ...t, destroy_path: undefined }));
 
   const findTagsListRow = () => wrapper.findAll(TagsListRow);
   const findDeleteButton = () => wrapper.find(GlButton);
@@ -39,17 +40,20 @@ describe('Tags List', () => {
   });
 
   describe('delete button', () => {
-    it('is not shown on mobile view', () => {
-      mountComponent({ tags, isDesktop: false });
-
-      expect(findDeleteButton().exists()).toBe(false);
-    });
-
-    it('is shown on desktop view', () => {
-      mountComponent();
-
-      expect(findDeleteButton().exists()).toBe(true);
-    });
+    it.each`
+      inputTags       | isDesktop | isVisible
+      ${tags}         | ${true}   | ${true}
+      ${tags}         | ${false}  | ${false}
+      ${readOnlyTags} | ${true}   | ${false}
+      ${readOnlyTags} | ${false}  | ${false}
+    `(
+      'is $isVisible that delete button exists when tags is $inputTags and isDesktop is $isDesktop',
+      ({ inputTags, isDesktop, isVisible }) => {
+        mountComponent({ tags: inputTags, isDesktop });
+
+        expect(findDeleteButton().exists()).toBe(isVisible);
+      },
+    );
 
     it('has the correct text', () => {
       mountComponent();