Conditionally render icon text

- source
- tests

app/assets/javascripts/registry/explorer/components/list_page/image_list_row.vue

@@ -10,6 +10,7 @@ import {
   LIST_DELETE_BUTTON_DISABLED,
   REMOVE_REPOSITORY_LABEL,
   ROW_SCHEDULED_FOR_DELETION,
+  CLEANUP_TIMED_OUT_ERROR_MESSAGE,
 } from '../../constants/index';
 
 export default {
@@ -34,7 +35,6 @@ export default {
     LIST_DELETE_BUTTON_DISABLED,
     REMOVE_REPOSITORY_LABEL,
     ROW_SCHEDULED_FOR_DELETION,
-    ASYNC_DELETE_IMAGE_ERROR_MESSAGE,
   },
   computed: {
     encodedItem() {
@@ -56,6 +56,14 @@ export default {
         this.item.tags_count,
       );
     },
+    warningIconText() {
+      if (this.item.failedDelete) {
+        return ASYNC_DELETE_IMAGE_ERROR_MESSAGE;
+      } else if (this.item.cleanup_policy_started_at) {
+        return CLEANUP_TIMED_OUT_ERROR_MESSAGE;
+      }
+      return null;
+    },
   },
 };
 </script>
@@ -86,8 +94,9 @@ export default {
         category="tertiary"
       />
       <gl-icon
-        v-if="item.failedDelete"
-        v-gl-tooltip="{ title: $options.i18n.ASYNC_DELETE_IMAGE_ERROR_MESSAGE }"
+        v-if="warningIconText"
+        v-gl-tooltip="{ title: warningIconText }"
+        data-testid="warning-icon"
         name="warning"
         class="gl-text-orange-500"
       />

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

@@ -13,3 +13,6 @@ export const DELETE_ALERT_TITLE = s__('ContainerRegistry|Some tags were not dele
 export const DELETE_ALERT_LINK_TEXT = s__(
   'ContainerRegistry|The cleanup policy timed out before it could delete all tags. An administrator can %{adminLinkStart}manually run cleanup now%{adminLinkEnd} or you can wait for the cleanup policy to automatically run again. %{docLinkStart}More information%{docLinkEnd}',
 );
+export const CLEANUP_TIMED_OUT_ERROR_MESSAGE = s__(
+  'ContainerRegistry|Cleanup timed out before it could delete all tags',
+);

locale/gitlab.pot

@@ -6888,6 +6888,9 @@ msgstr ""
 msgid "ContainerRegistry|Cleanup policy:"
 msgstr ""
 
+msgid "ContainerRegistry|Cleanup timed out before it could delete all tags"
+msgstr ""
+
 msgid "ContainerRegistry|Configuration digest: %{digest}"
 msgstr ""
 

spec/frontend/registry/explorer/components/list_page/image_list_row_spec.js

@@ -9,6 +9,8 @@ import {
   ROW_SCHEDULED_FOR_DELETION,
   LIST_DELETE_BUTTON_DISABLED,
   REMOVE_REPOSITORY_LABEL,
+  ASYNC_DELETE_IMAGE_ERROR_MESSAGE,
+  CLEANUP_TIMED_OUT_ERROR_MESSAGE,
 } from '~/registry/explorer/constants';
 import { RouterLink } from '../../stubs';
 import { imagesListResponse } from '../../mock_data';
@@ -21,6 +23,7 @@ describe('Image List Row', () => {
   const findTagsCount = () => wrapper.find('[data-testid="tagsCount"]');
   const findDeleteBtn = () => wrapper.find(DeleteButton);
   const findClipboardButton = () => wrapper.find(ClipboardButton);
+  const findWarningIcon = () => wrapper.find('[data-testid="warning-icon"]');
 
   const mountComponent = props => {
     wrapper = shallowMount(Component, {
@@ -74,6 +77,26 @@ describe('Image List Row', () => {
       expect(button.props('text')).toBe(item.location);
       expect(button.props('title')).toBe(item.location);
     });
+
+    describe('warning icon', () => {
+      it.each`
+        failedDelete | cleanup_policy_started_at | shown    | title
+        ${true}      | ${true}                   | ${true}  | ${ASYNC_DELETE_IMAGE_ERROR_MESSAGE}
+        ${false}     | ${true}                   | ${true}  | ${CLEANUP_TIMED_OUT_ERROR_MESSAGE}
+        ${false}     | ${false}                  | ${false} | ${''}
+      `(
+        'when failedDelete is $failedDelete and cleanup_policy_started_at is $cleanup_policy_started_at',
+        ({ cleanup_policy_started_at, failedDelete, shown, title }) => {
+          mountComponent({ item: { ...item, failedDelete, cleanup_policy_started_at } });
+          const icon = findWarningIcon();
+          expect(icon.exists()).toBe(shown);
+          if (shown) {
+            const tooltip = getBinding(icon.element, 'gl-tooltip');
+            expect(tooltip.value.title).toBe(title);
+          }
+        },
+      );
+    });
   });
 
   describe('delete button', () => {