Add latest changes from gitlab-org/gitlab@master

3 files changed, 122 insertions, 23 deletions

diff --git a/spec/frontend/registry/explorer/components/details_page/details_header_spec.js b/spec/frontend/registry/explorer/components/details_page/details_header_spec.js
index f642c66832b..337235e3de5 100644
--- a/spec/frontend/registry/explorer/components/details_page/details_header_spec.js
+++ b/spec/frontend/registry/explorer/components/details_page/details_header_spec.js
@@ -3,7 +3,18 @@ import { GlSprintf } from '@gitlab/ui';
 import { useFakeDate } from 'helpers/fake_date';
 import TitleArea from '~/vue_shared/components/registry/title_area.vue';
 import component from '~/registry/explorer/components/details_page/details_header.vue';
-import { DETAILS_PAGE_TITLE } from '~/registry/explorer/constants';
+import {
+  DETAILS_PAGE_TITLE,
+  UNSCHEDULED_STATUS,
+  SCHEDULED_STATUS,
+  ONGOING_STATUS,
+  UNFINISHED_STATUS,
+  CLEANUP_DISABLED_TEXT,
+  CLEANUP_DISABLED_TOOLTIP,
+  CLEANUP_SCHEDULED_TOOLTIP,
+  CLEANUP_ONGOING_TOOLTIP,
+  CLEANUP_UNFINISHED_TOOLTIP,
+} from '~/registry/explorer/constants';
 
 describe('Details Header', () => {
   let wrapper;
@@ -11,15 +22,22 @@ describe('Details Header', () => {
   const defaultImage = {
     name: 'foo',
     updatedAt: '2020-11-03T13:29:21Z',
+    tagsCount: 10,
     project: {
       visibility: 'public',
+      containerExpirationPolicy: {
+        enabled: false,
+      },
     },
   };
 
   // set the date to Dec 4, 2020
   useFakeDate(2020, 11, 4);
+  const findByTestId = (testId) => wrapper.find(`[data-testid="${testId}"]`);
 
-  const findLastUpdatedAndVisibility = () => wrapper.find('[data-testid="updated-and-visibility"]');
+  const findLastUpdatedAndVisibility = () => findByTestId('updated-and-visibility');
+  const findTagsCount = () => findByTestId('tags-count');
+  const findCleanup = () => findByTestId('cleanup');
 
   const waitForMetadataItems = async () => {
     // Metadata items are printed by a loop in the title-area and it takes two ticks for them to be available
@@ -54,25 +72,96 @@ describe('Details Header', () => {
     expect(wrapper.text()).toContain('foo');
   });
 
-  it('has a metadata item with last updated text', async () => {
-    mountComponent();
-    await waitForMetadataItems();
+  describe('metadata items', () => {
+    describe('tags count', () => {
+      it('when there is more than one tag has the correct text', async () => {
+        mountComponent();
+        await waitForMetadataItems();
 
-    expect(findLastUpdatedAndVisibility().props('text')).toBe('Last updated 1 month ago');
-  });
+        expect(findTagsCount().props('text')).toBe('10 tags');
+      });
+
+      it('when there is one tag has the correct text', async () => {
+        mountComponent({ ...defaultImage, tagsCount: 1 });
+        await waitForMetadataItems();
+
+        expect(findTagsCount().props('text')).toBe('1 tag');
+      });
+
+      it('has the correct icon', async () => {
+        mountComponent();
+        await waitForMetadataItems();
+
+        expect(findTagsCount().props('icon')).toBe('tag');
+      });
+    });
 
-  describe('visibility icon', () => {
-    it('shows an eye when the project is public', async () => {
-      mountComponent();
-      await waitForMetadataItems();
+    describe('cleanup metadata item', () => {
+      it('has the correct icon', async () => {
+        mountComponent();
+        await waitForMetadataItems();
 
-      expect(findLastUpdatedAndVisibility().props('icon')).toBe('eye');
+        expect(findCleanup().props('icon')).toBe('expire');
+      });
+
+      it('when the expiration policy is disabled', async () => {
+        mountComponent();
+        await waitForMetadataItems();
+
+        expect(findCleanup().props()).toMatchObject({
+          text: CLEANUP_DISABLED_TEXT,
+          textTooltip: CLEANUP_DISABLED_TOOLTIP,
+        });
+      });
+
+      it.each`
+        status                | text                             | tooltip
+        ${UNSCHEDULED_STATUS} | ${'Cleanup will run in 1 month'} | ${''}
+        ${SCHEDULED_STATUS}   | ${'Cleanup pending'}             | ${CLEANUP_SCHEDULED_TOOLTIP}
+        ${ONGOING_STATUS}     | ${'Cleanup in progress'}         | ${CLEANUP_ONGOING_TOOLTIP}
+        ${UNFINISHED_STATUS}  | ${'Cleanup incomplete'}          | ${CLEANUP_UNFINISHED_TOOLTIP}
+      `(
+        'when the status is $status the text is $text and the tooltip is $tooltip',
+        async ({ status, text, tooltip }) => {
+          mountComponent({
+            ...defaultImage,
+            expirationPolicyCleanupStatus: status,
+            project: {
+              containerExpirationPolicy: { enabled: true, nextRunAt: '2021-01-03T14:29:21Z' },
+            },
+          });
+          await waitForMetadataItems();
+
+          expect(findCleanup().props()).toMatchObject({
+            text,
+            textTooltip: tooltip,
+          });
+        },
+      );
     });
-    it('shows an eye slashed when the project is not public', async () => {
-      mountComponent({ ...defaultImage, project: { visibility: 'private' } });
-      await waitForMetadataItems();
 
-      expect(findLastUpdatedAndVisibility().props('icon')).toBe('eye-slash');
+    describe('visibility and updated at ', () => {
+      it('has last updated text', async () => {
+        mountComponent();
+        await waitForMetadataItems();
+
+        expect(findLastUpdatedAndVisibility().props('text')).toBe('Last updated 1 month ago');
+      });
+
+      describe('visibility icon', () => {
+        it('shows an eye when the project is public', async () => {
+          mountComponent();
+          await waitForMetadataItems();
+
+          expect(findLastUpdatedAndVisibility().props('icon')).toBe('eye');
+        });
+        it('shows an eye slashed when the project is not public', async () => {
+          mountComponent({ ...defaultImage, project: { visibility: 'private' } });
+          await waitForMetadataItems();
+
+          expect(findLastUpdatedAndVisibility().props('icon')).toBe('eye-slash');
+        });
+      });
     });
   });
 });
diff --git a/spec/frontend/registry/explorer/mock_data.js b/spec/frontend/registry/explorer/mock_data.js
index c63d5f0c90f..b0fc009872c 100644
--- a/spec/frontend/registry/explorer/mock_data.js
+++ b/spec/frontend/registry/explorer/mock_data.js
@@ -115,8 +115,13 @@ export const containerRepositoryMock = {
   updatedAt: '2020-11-03T13:29:21Z',
   tagsCount: 13,
   expirationPolicyStartedAt: null,
+  expirationPolicyCleanupStatus: 'UNSCHEDULED',
   project: {
     visibility: 'public',
+    containerExpirationPolicy: {
+      enabled: false,
+      nextRunAt: '2020-11-27T08:59:27Z',
+    },
     __typename: 'Project',
   },
 };
diff --git a/spec/frontend/registry/explorer/pages/details_spec.js b/spec/frontend/registry/explorer/pages/details_spec.js
index 70c8cf98876..b3b3c3008f5 100644
--- a/spec/frontend/registry/explorer/pages/details_spec.js
+++ b/spec/frontend/registry/explorer/pages/details_spec.js
@@ -15,6 +15,8 @@ import EmptyTagsState from '~/registry/explorer/components/details_page/empty_ta
 import getContainerRepositoryDetailsQuery from '~/registry/explorer/graphql/queries/get_container_repository_details.query.graphql';
 import deleteContainerRepositoryTagsMutation from '~/registry/explorer/graphql/mutations/delete_container_repository_tags.mutation.graphql';
 
+import { UNFINISHED_STATUS } from '~/registry/explorer/constants/index';
+
 import {
   graphQLImageDetailsMock,
   graphQLImageDetailsEmptyTagsMock,
@@ -353,10 +355,13 @@ describe('Details Page', () => {
       mountComponent();
 
       await waitForApolloRequestRender();
-      expect(findDetailsHeader().props('image')).toMatchObject({
-        name: containerRepositoryMock.name,
-        project: {
-          visibility: containerRepositoryMock.project.visibility,
+      expect(findDetailsHeader().props()).toMatchObject({
+        metadataLoading: false,
+        image: {
+          name: containerRepositoryMock.name,
+          project: {
+            visibility: containerRepositoryMock.project.visibility,
+          },
         },
       });
     });
@@ -398,13 +403,13 @@ describe('Details Page', () => {
       cleanupPoliciesHelpPagePath: 'bar',
     };
 
-    describe('when expiration_policy_started is not null', () => {
+    describe(`when expirationPolicyCleanupStatus is ${UNFINISHED_STATUS}`, () => {
       let resolver;
 
       beforeEach(() => {
         resolver = jest.fn().mockResolvedValue(
           graphQLImageDetailsMock({
-            expirationPolicyStartedAt: Date.now().toString(),
+            expirationPolicyCleanupStatus: UNFINISHED_STATUS,
           }),
         );
       });
@@ -439,7 +444,7 @@ describe('Details Page', () => {
       });
     });
 
-    describe('when expiration_policy_started is null', () => {
+    describe(`when expirationPolicyCleanupStatus is not ${UNFINISHED_STATUS}`, () => {
       it('the component is hidden', async () => {
         mountComponent();
         await waitForApolloRequestRender();