Merge branch '336933-improve-the-process-of-deleting-image-tags' into 'master'

Fix row alignment when delete is disabled

See merge request gitlab-org/gitlab!72125

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

@@ -181,13 +181,14 @@ export default {
     </template>
     <template #right-action>
       <gl-dropdown
-        v-if="!isDeleteDisabled"
+        :disabled="isDeleteDisabled"
         icon="ellipsis_v"
         :text="$options.i18n.MORE_ACTIONS_TEXT"
         :text-sr-only="true"
         category="tertiary"
         no-caret
         right
+        :class="{ 'gl-opacity-0 gl-pointer-events-none': isDeleteDisabled }"
         data-testid="additional-actions"
         data-qa-selector="more_actions_menu"
       >

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

@@ -283,18 +283,20 @@ describe('tags list row', () => {
     });
 
     it.each`
-      canDelete | digest   | disabled | visible
-      ${true}   | ${null}  | ${true}  | ${false}
-      ${false}  | ${'foo'} | ${true}  | ${false}
-      ${false}  | ${null}  | ${true}  | ${false}
-      ${true}   | ${'foo'} | ${true}  | ${false}
-      ${true}   | ${'foo'} | ${false} | ${true}
+      canDelete | digest   | disabled | buttonDisabled
+      ${true}   | ${null}  | ${true}  | ${true}
+      ${false}  | ${'foo'} | ${true}  | ${true}
+      ${false}  | ${null}  | ${true}  | ${true}
+      ${true}   | ${'foo'} | ${true}  | ${true}
+      ${true}   | ${'foo'} | ${false} | ${false}
     `(
       'is $visible that is visible when canDelete is $canDelete and digest is $digest and disabled is $disabled',
-      ({ canDelete, digest, disabled, visible }) => {
+      ({ canDelete, digest, disabled, buttonDisabled }) => {
         mountComponent({ ...defaultProps, tag: { ...tag, canDelete, digest }, disabled });
 
-        expect(findAdditionalActionsMenu().exists()).toBe(visible);
+        expect(findAdditionalActionsMenu().props('disabled')).toBe(buttonDisabled);
+        expect(findAdditionalActionsMenu().classes('gl-opacity-0')).toBe(buttonDisabled);
+        expect(findAdditionalActionsMenu().classes('gl-pointer-events-none')).toBe(buttonDisabled);
       },
     );