Remove menu when is not possible to delete

Remove the menu when the only action is not available

Changelog: fixed

app/assets/javascripts/packages_and_registries/container_registry/explorer/components/details_page/details_header.vue

@@ -143,6 +143,7 @@ export default {
     </template>
     <template #right-actions>
       <gl-dropdown
+        v-if="!deleteButtonDisabled"
         icon="ellipsis_v"
         text="More actions"
         :text-sr-only="true"
@@ -150,11 +151,7 @@ export default {
         no-caret
         right
       >
-        <gl-dropdown-item
-          variant="danger"
-          :disabled="deleteButtonDisabled"
-          @click="$emit('delete')"
-        >
+        <gl-dropdown-item variant="danger" @click="$emit('delete')">
           {{ __('Delete image repository') }}
         </gl-dropdown-item>
       </gl-dropdown>

spec/frontend/packages_and_registries/container_registry/explorer/components/details_page/details_header_spec.js

-import { GlDropdownItem, GlIcon } from '@gitlab/ui';
+import { GlDropdownItem, GlIcon, GlDropdown } from '@gitlab/ui';
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import VueApollo from 'vue-apollo';
-import { GlDropdown } from 'jest/packages_and_registries/container_registry/explorer/stubs';
 import { useFakeDate } from 'helpers/fake_date';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
@@ -51,6 +50,7 @@ describe('Details Header', () => {
   const findCleanup = () => findByTestId('cleanup');
   const findDeleteButton = () => wrapper.findComponent(GlDropdownItem);
   const findInfoIcon = () => wrapper.findComponent(GlIcon);
+  const findMenu = () => wrapper.findComponent(GlDropdown);
 
   const waitForMetadataItems = async () => {
     // Metadata items are printed by a loop in the title-area and it takes two ticks for them to be available
@@ -139,51 +139,53 @@ describe('Details Header', () => {
     });
   });
 
-  describe('delete button', () => {
-    it('exists', () => {
-      mountComponent();
+  describe('menu', () => {
+    it.each`
+      canDelete | disabled | isVisible
+      ${true}   | ${false} | ${true}
+      ${true}   | ${true}  | ${false}
+      ${false}  | ${false} | ${false}
+      ${false}  | ${true}  | ${false}
+    `(
+      'when canDelete is $canDelete and disabled is $disabled is $isVisible that the menu is visible',
+      ({ canDelete, disabled, isVisible }) => {
+        mountComponent({ propsData: { image: { ...defaultImage, canDelete }, disabled } });
 
-      expect(findDeleteButton().exists()).toBe(true);
-    });
+        expect(findMenu().exists()).toBe(isVisible);
+      },
+    );
 
-    it('has the correct text', () => {
-      mountComponent();
+    describe('delete button', () => {
+      it('exists', () => {
+        mountComponent();
 
-      expect(findDeleteButton().text()).toBe('Delete image repository');
-    });
+        expect(findDeleteButton().exists()).toBe(true);
+      });
 
-    it('has the correct props', () => {
-      mountComponent();
+      it('has the correct text', () => {
+        mountComponent();
 
-      expect(findDeleteButton().attributes()).toMatchObject(
-        expect.objectContaining({
-          variant: 'danger',
-        }),
-      );
-    });
+        expect(findDeleteButton().text()).toBe('Delete image repository');
+      });
 
-    it('emits the correct event', () => {
-      mountComponent();
+      it('has the correct props', () => {
+        mountComponent();
 
-      findDeleteButton().vm.$emit('click');
+        expect(findDeleteButton().attributes()).toMatchObject(
+          expect.objectContaining({
+            variant: 'danger',
+          }),
+        );
+      });
 
-      expect(wrapper.emitted('delete')).toEqual([[]]);
-    });
+      it('emits the correct event', () => {
+        mountComponent();
 
-    it.each`
-      canDelete | disabled | isDisabled
-      ${true}   | ${false} | ${undefined}
-      ${true}   | ${true}  | ${'true'}
-      ${false}  | ${false} | ${'true'}
-      ${false}  | ${true}  | ${'true'}
-    `(
-      'when canDelete is $canDelete and disabled is $disabled is $isDisabled that the button is disabled',
-      ({ canDelete, disabled, isDisabled }) => {
-        mountComponent({ propsData: { image: { ...defaultImage, canDelete }, disabled } });
+        findDeleteButton().vm.$emit('click');
 
-        expect(findDeleteButton().attributes('disabled')).toBe(isDisabled);
-      },
-    );
+        expect(wrapper.emitted('delete')).toEqual([[]]);
+      });
+    });
   });
 
   describe('metadata items', () => {