Add latest changes from gitlab-org/gitlab@13-5-stable-eev13.5.0-rc42

4 files changed, 173 insertions, 76 deletions

diff --git a/spec/frontend/registry/explorer/components/details_page/partial_cleanup_alert_spec.js b/spec/frontend/registry/explorer/components/details_page/partial_cleanup_alert_spec.js
new file mode 100644
index 00000000000..17821d8be31
--- /dev/null
+++ b/spec/frontend/registry/explorer/components/details_page/partial_cleanup_alert_spec.js
@@ -0,0 +1,71 @@
+import { shallowMount } from '@vue/test-utils';
+import { GlAlert, GlSprintf } from '@gitlab/ui';
+import component from '~/registry/explorer/components/details_page/partial_cleanup_alert.vue';
+import { DELETE_ALERT_TITLE, DELETE_ALERT_LINK_TEXT } from '~/registry/explorer/constants';
+
+describe('Partial Cleanup alert', () => {
+  let wrapper;
+
+  const findAlert = () => wrapper.find(GlAlert);
+  const findRunLink = () => wrapper.find('[data-testid="run-link"');
+  const findHelpLink = () => wrapper.find('[data-testid="help-link"');
+
+  const mountComponent = () => {
+    wrapper = shallowMount(component, {
+      stubs: { GlSprintf },
+      propsData: {
+        runCleanupPoliciesHelpPagePath: 'foo',
+        cleanupPoliciesHelpPagePath: 'bar',
+      },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  it(`gl-alert has the correct properties`, () => {
+    mountComponent();
+
+    expect(findAlert().props()).toMatchObject({
+      title: DELETE_ALERT_TITLE,
+      variant: 'warning',
+    });
+  });
+
+  it('has the right text', () => {
+    mountComponent();
+
+    expect(wrapper.text()).toMatchInterpolatedText(DELETE_ALERT_LINK_TEXT);
+  });
+
+  it('contains run link', () => {
+    mountComponent();
+
+    const link = findRunLink();
+    expect(link.exists()).toBe(true);
+    expect(link.attributes()).toMatchObject({
+      href: 'foo',
+      target: '_blank',
+    });
+  });
+
+  it('contains help link', () => {
+    mountComponent();
+
+    const link = findHelpLink();
+    expect(link.exists()).toBe(true);
+    expect(link.attributes()).toMatchObject({
+      href: 'bar',
+      target: '_blank',
+    });
+  });
+
+  it('GlAlert dismiss event triggers a dismiss event', () => {
+    mountComponent();
+
+    findAlert().vm.$emit('dismiss');
+    expect(wrapper.emitted('dismiss')).toEqual([[]]);
+  });
+});
diff --git a/spec/frontend/registry/explorer/components/list_page/image_list_row_spec.js b/spec/frontend/registry/explorer/components/list_page/image_list_row_spec.js
index c5b4b3fa5d8..ce446e6d93e 100644
--- a/spec/frontend/registry/explorer/components/list_page/image_list_row_spec.js
+++ b/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', () => {
diff --git a/spec/frontend/registry/explorer/components/list_page/registry_header_spec.js b/spec/frontend/registry/explorer/components/list_page/registry_header_spec.js
index 7a27f8fa431..3c997093d46 100644
--- a/spec/frontend/registry/explorer/components/list_page/registry_header_spec.js
+++ b/spec/frontend/registry/explorer/components/list_page/registry_header_spec.js
@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import { GlSprintf, GlLink } from '@gitlab/ui';
+import { GlSprintf } from '@gitlab/ui';
 import Component from '~/registry/explorer/components/list_page/registry_header.vue';
 import TitleArea from '~/vue_shared/components/registry/title_area.vue';
 import {
@@ -19,12 +19,8 @@ describe('registry_header', () => {
 
   const findTitleArea = () => wrapper.find(TitleArea);
   const findCommandsSlot = () => wrapper.find('[data-testid="commands-slot"]');
-  const findInfoArea = () => wrapper.find('[data-testid="info-area"]');
-  const findIntroText = () => wrapper.find('[data-testid="default-intro"]');
   const findImagesCountSubHeader = () => wrapper.find('[data-testid="images-count"]');
   const findExpirationPolicySubHeader = () => wrapper.find('[data-testid="expiration-policy"]');
-  const findDisabledExpirationPolicyMessage = () =>
-    wrapper.find('[data-testid="expiration-disabled-message"]');
 
   const mountComponent = (propsData, slots) => {
     wrapper = shallowMount(Component, {
@@ -123,44 +119,18 @@ describe('registry_header', () => {
     });
   });
 
-  describe('info area', () => {
-    it('exists', () => {
-      mountComponent();
-
-      expect(findInfoArea().exists()).toBe(true);
-    });
-
+  describe('info messages', () => {
     describe('default message', () => {
-      beforeEach(() => {
-        return mountComponent({ helpPagePath: 'bar' });
-      });
-
-      it('exists', () => {
-        expect(findIntroText().exists()).toBe(true);
-      });
-
-      it('has the correct copy', () => {
-        expect(findIntroText().text()).toMatchInterpolatedText(LIST_INTRO_TEXT);
-      });
+      it('is correctly bound to title_area props', () => {
+        mountComponent({ helpPagePath: 'foo' });
 
-      it('has the correct link', () => {
-        expect(
-          findIntroText()
-            .find(GlLink)
-            .attributes('href'),
-        ).toBe('bar');
+        expect(findTitleArea().props('infoMessages')).toEqual([
+          { text: LIST_INTRO_TEXT, link: 'foo' },
+        ]);
       });
     });
 
     describe('expiration policy info message', () => {
-      describe('when there are no images', () => {
-        it('is hidden', () => {
-          mountComponent();
-
-          expect(findDisabledExpirationPolicyMessage().exists()).toBe(false);
-        });
-      });
-
       describe('when there are images', () => {
         describe('when expiration policy is disabled', () => {
           beforeEach(() => {
@@ -170,43 +140,27 @@ describe('registry_header', () => {
               imagesCount: 1,
             });
           });
-          it('message exist', () => {
-            expect(findDisabledExpirationPolicyMessage().exists()).toBe(true);
-          });
-          it('has the correct copy', () => {
-            expect(findDisabledExpirationPolicyMessage().text()).toMatchInterpolatedText(
-              EXPIRATION_POLICY_DISABLED_MESSAGE,
-            );
-          });
 
-          it('has the correct link', () => {
-            expect(
-              findDisabledExpirationPolicyMessage()
-                .find(GlLink)
-                .attributes('href'),
-            ).toBe('foo');
+          it('the prop is correctly bound', () => {
+            expect(findTitleArea().props('infoMessages')).toEqual([
+              { text: LIST_INTRO_TEXT, link: '' },
+              { text: EXPIRATION_POLICY_DISABLED_MESSAGE, link: 'foo' },
+            ]);
           });
         });
 
-        describe('when expiration policy is enabled', () => {
+        describe.each`
+          desc                                                   | props
+          ${'when there are no images'}                          | ${{ expirationPolicy: { enabled: false }, imagesCount: 0 }}
+          ${'when expiration policy is enabled'}                 | ${{ expirationPolicy: { enabled: true }, imagesCount: 1 }}
+          ${'when the expiration policy is completely disabled'} | ${{ expirationPolicy: { enabled: false }, imagesCount: 1, hideExpirationPolicyData: true }}
+        `('$desc', ({ props }) => {
           it('message does not exist', () => {
-            mountComponent({
-              expirationPolicy: { enabled: true },
-              imagesCount: 1,
-            });
-
-            expect(findDisabledExpirationPolicyMessage().exists()).toBe(false);
-          });
-        });
-        describe('when the expiration policy is completely disabled', () => {
-          it('message does not exist', () => {
-            mountComponent({
-              expirationPolicy: { enabled: true },
-              imagesCount: 1,
-              hideExpirationPolicyData: true,
-            });
+            mountComponent(props);
 
-            expect(findDisabledExpirationPolicyMessage().exists()).toBe(false);
+            expect(findTitleArea().props('infoMessages')).toEqual([
+              { text: LIST_INTRO_TEXT, link: '' },
+            ]);
           });
         });
       });
diff --git a/spec/frontend/registry/explorer/pages/details_spec.js b/spec/frontend/registry/explorer/pages/details_spec.js
index 66e8a4aea0d..86b52c4f06a 100644
--- a/spec/frontend/registry/explorer/pages/details_spec.js
+++ b/spec/frontend/registry/explorer/pages/details_spec.js
@@ -3,6 +3,7 @@ import { GlPagination } from '@gitlab/ui';
 import Tracking from '~/tracking';
 import component from '~/registry/explorer/pages/details.vue';
 import DeleteAlert from '~/registry/explorer/components/details_page/delete_alert.vue';
+import PartialCleanupAlert from '~/registry/explorer/components/details_page/partial_cleanup_alert.vue';
 import DetailsHeader from '~/registry/explorer/components/details_page/details_header.vue';
 import TagsLoader from '~/registry/explorer/components/details_page/tags_loader.vue';
 import TagsList from '~/registry/explorer/components/details_page/tags_list.vue';
@@ -30,8 +31,10 @@ describe('Details Page', () => {
   const findDeleteAlert = () => wrapper.find(DeleteAlert);
   const findDetailsHeader = () => wrapper.find(DetailsHeader);
   const findEmptyTagsState = () => wrapper.find(EmptyTagsState);
+  const findPartialCleanupAlert = () => wrapper.find(PartialCleanupAlert);
 
-  const routeId = window.btoa(JSON.stringify({ name: 'foo', tags_path: 'bar' }));
+  const routeIdGenerator = override =>
+    window.btoa(JSON.stringify({ name: 'foo', tags_path: 'bar', ...override }));
 
   const tagsArrayToSelectedTags = tags =>
     tags.reduce((acc, c) => {
@@ -39,7 +42,7 @@ describe('Details Page', () => {
       return acc;
     }, {});
 
-  const mountComponent = options => {
+  const mountComponent = ({ options, routeParams } = {}) => {
     wrapper = shallowMount(component, {
       store,
       stubs: {
@@ -48,7 +51,7 @@ describe('Details Page', () => {
       mocks: {
         $route: {
           params: {
-            id: routeId,
+            id: routeIdGenerator(routeParams),
           },
         },
       },
@@ -224,7 +227,7 @@ describe('Details Page', () => {
           findDeleteModal().vm.$emit('confirmDelete');
           expect(dispatchSpy).toHaveBeenCalledWith('requestDeleteTag', {
             tag: store.state.tags[0],
-            params: routeId,
+            params: routeIdGenerator(),
           });
         });
       });
@@ -239,7 +242,7 @@ describe('Details Page', () => {
           findDeleteModal().vm.$emit('confirmDelete');
           expect(dispatchSpy).toHaveBeenCalledWith('requestDeleteTags', {
             ids: store.state.tags.map(t => t.name),
-            params: routeId,
+            params: routeIdGenerator(),
           });
         });
       });
@@ -273,11 +276,57 @@ describe('Details Page', () => {
     it('has the correct props', () => {
       store.commit(SET_INITIAL_STATE, { ...config });
       mountComponent({
-        data: () => ({
-          deleteAlertType,
-        }),
+        options: {
+          data: () => ({
+            deleteAlertType,
+          }),
+        },
       });
       expect(findDeleteAlert().props()).toEqual({ ...config, deleteAlertType });
     });
   });
+
+  describe('Partial Cleanup Alert', () => {
+    const config = {
+      runCleanupPoliciesHelpPagePath: 'foo',
+      cleanupPoliciesHelpPagePath: 'bar',
+    };
+
+    describe('when expiration_policy_started is not null', () => {
+      const routeParams = { cleanup_policy_started_at: Date.now().toString() };
+
+      it('exists', () => {
+        mountComponent({ routeParams });
+
+        expect(findPartialCleanupAlert().exists()).toBe(true);
+      });
+
+      it('has the correct props', () => {
+        store.commit(SET_INITIAL_STATE, { ...config });
+
+        mountComponent({ routeParams });
+
+        expect(findPartialCleanupAlert().props()).toEqual({ ...config });
+      });
+
+      it('dismiss hides the component', async () => {
+        mountComponent({ routeParams });
+
+        expect(findPartialCleanupAlert().exists()).toBe(true);
+        findPartialCleanupAlert().vm.$emit('dismiss');
+
+        await wrapper.vm.$nextTick();
+
+        expect(findPartialCleanupAlert().exists()).toBe(false);
+      });
+    });
+
+    describe('when expiration_policy_started is null', () => {
+      it('the component is hidden', () => {
+        mountComponent();
+
+        expect(findPartialCleanupAlert().exists()).toBe(false);
+      });
+    });
+  });
 });