Add latest changes from gitlab-org/gitlab@13-8-stable-eev13.8.0-rc42

25 files changed, 381 insertions, 203 deletions

diff --git a/spec/frontend/registry/explorer/components/__snapshots__/registry_breadcrumb_spec.js.snap b/spec/frontend/registry/explorer/components/__snapshots__/registry_breadcrumb_spec.js.snap
index feae2f629b7..4be4fce1abf 100644
--- a/spec/frontend/registry/explorer/components/__snapshots__/registry_breadcrumb_spec.js.snap
+++ b/spec/frontend/registry/explorer/components/__snapshots__/registry_breadcrumb_spec.js.snap
@@ -1,28 +1,71 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Registry Breadcrumb when is rootRoute renders 1`] = `
-<ul>
-  <li
-    class="foo bar"
+exports[`Registry Breadcrumb when is not rootRoute renders 1`] = `
+<div
+  class="gl-breadcrumbs"
+>
+  <ol
+    class="breadcrumb gl-breadcrumb-list"
   >
-    baz
-  </li>
-  <li
-    class="foo bar"
+     
+    <li
+      class="breadcrumb-item gl-breadcrumb-item"
+    >
+      <a
+        class=""
+        href="/"
+        target="_self"
+      />
+    </li>
+     
+    <span
+      class="gl-breadcrumb-separator"
+      data-testid="separator"
+    >
+      <svg
+        aria-hidden="true"
+        class="gl-icon s8"
+        data-testid="angle-right-icon"
+      >
+        <use
+          href="#angle-right"
+        />
+      </svg>
+    </span>
+    <li
+      class="breadcrumb-item gl-breadcrumb-item"
+    >
+      <a
+        class=""
+        href="#"
+        target="_self"
+      />
+    </li>
+     
+    <!---->
+  </ol>
+</div>
+`;
+
+exports[`Registry Breadcrumb when is rootRoute renders 1`] = `
+<div
+  class="gl-breadcrumbs"
+>
+  <ol
+    class="breadcrumb gl-breadcrumb-list"
   >
-    foo
-  </li>
-   
-  <!---->
-   
-  <li>
-    <a
-      class="foo"
+     
+    <li
+      class="breadcrumb-item gl-breadcrumb-item"
     >
-      <a>
-        
-      </a>
-    </a>
-  </li>
-</ul>
+      <a
+        class=""
+        href="/"
+        target="_self"
+      />
+    </li>
+     
+    <!---->
+  </ol>
+</div>
 `;
diff --git a/spec/frontend/registry/explorer/components/delete_button_spec.js b/spec/frontend/registry/explorer/components/delete_button_spec.js
index a79ca77a464..cd43e97009b 100644
--- a/spec/frontend/registry/explorer/components/delete_button_spec.js
+++ b/spec/frontend/registry/explorer/components/delete_button_spec.js
@@ -13,7 +13,7 @@ describe('delete_button', () => {
 
   const findButton = () => wrapper.find(GlButton);
 
-  const mountComponent = props => {
+  const mountComponent = (props) => {
     wrapper = shallowMount(component, {
       propsData: {
         ...defaultProps,
diff --git a/spec/frontend/registry/explorer/components/details_page/delete_alert_spec.js b/spec/frontend/registry/explorer/components/details_page/delete_alert_spec.js
index 5d54986978b..6a7fbbe367a 100644
--- a/spec/frontend/registry/explorer/components/details_page/delete_alert_spec.js
+++ b/spec/frontend/registry/explorer/components/details_page/delete_alert_spec.js
@@ -15,7 +15,7 @@ describe('Delete alert', () => {
   const findAlert = () => wrapper.find(GlAlert);
   const findLink = () => wrapper.find(GlLink);
 
-  const mountComponent = propsData => {
+  const mountComponent = (propsData) => {
     wrapper = shallowMount(component, { stubs: { GlSprintf }, propsData });
   };
 
diff --git a/spec/frontend/registry/explorer/components/details_page/delete_modal_spec.js b/spec/frontend/registry/explorer/components/details_page/delete_modal_spec.js
index c77f7a54d34..636e0a285a6 100644
--- a/spec/frontend/registry/explorer/components/details_page/delete_modal_spec.js
+++ b/spec/frontend/registry/explorer/components/details_page/delete_modal_spec.js
@@ -13,7 +13,7 @@ describe('Delete Modal', () => {
   const findModal = () => wrapper.find(GlModal);
   const findDescription = () => wrapper.find('[data-testid="description"]');
 
-  const mountComponent = propsData => {
+  const mountComponent = (propsData) => {
     wrapper = shallowMount(component, {
       propsData,
       stubs: {
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/components/details_page/tags_list_row_spec.js b/spec/frontend/registry/explorer/components/details_page/tags_list_row_spec.js
index 94944643e8b..c2efc71c159 100644
--- a/spec/frontend/registry/explorer/components/details_page/tags_list_row_spec.js
+++ b/spec/frontend/registry/explorer/components/details_page/tags_list_row_spec.js
@@ -312,11 +312,7 @@ describe('tags list row', () => {
         });
 
         it(`is ${clipboard} that clipboard button exist`, () => {
-          expect(
-            finderFunction()
-              .find(ClipboardButton)
-              .exists(),
-          ).toBe(clipboard);
+          expect(finderFunction().find(ClipboardButton).exists()).toBe(clipboard);
         });
       });
     });
diff --git a/spec/frontend/registry/explorer/components/details_page/tags_list_spec.js b/spec/frontend/registry/explorer/components/details_page/tags_list_spec.js
index 035b59731c9..413795a7a57 100644
--- a/spec/frontend/registry/explorer/components/details_page/tags_list_spec.js
+++ b/spec/frontend/registry/explorer/components/details_page/tags_list_spec.js
@@ -8,7 +8,7 @@ import { tagsMock } from '../../mock_data';
 describe('Tags List', () => {
   let wrapper;
   const tags = [...tagsMock];
-  const readOnlyTags = tags.map(t => ({ ...t, canDelete: false }));
+  const readOnlyTags = tags.map((t) => ({ ...t, canDelete: false }));
 
   const findTagsListRow = () => wrapper.findAll(TagsListRow);
   const findDeleteButton = () => wrapper.find(GlButton);
@@ -78,18 +78,14 @@ describe('Tags List', () => {
 
     it('is enabled when at least one item is selected', async () => {
       mountComponent();
-      findTagsListRow()
-        .at(0)
-        .vm.$emit('select');
+      findTagsListRow().at(0).vm.$emit('select');
       await wrapper.vm.$nextTick();
       expect(findDeleteButton().attributes('disabled')).toBe(undefined);
     });
 
     it('click event emits a deleted event with selected items', () => {
       mountComponent();
-      findTagsListRow()
-        .at(0)
-        .vm.$emit('select');
+      findTagsListRow().at(0).vm.$emit('select');
 
       findDeleteButton().vm.$emit('click');
       expect(wrapper.emitted('delete')).toEqual([[{ 'beta-24753': true }]]);
@@ -116,22 +112,14 @@ describe('Tags List', () => {
     describe('events', () => {
       it('select event update the selected items', async () => {
         mountComponent();
-        findTagsListRow()
-          .at(0)
-          .vm.$emit('select');
+        findTagsListRow().at(0).vm.$emit('select');
         await wrapper.vm.$nextTick();
-        expect(
-          findTagsListRow()
-            .at(0)
-            .attributes('selected'),
-        ).toBe('true');
+        expect(findTagsListRow().at(0).attributes('selected')).toBe('true');
       });
 
       it('delete event emit a delete event', () => {
         mountComponent();
-        findTagsListRow()
-          .at(0)
-          .vm.$emit('delete');
+        findTagsListRow().at(0).vm.$emit('delete');
         expect(wrapper.emitted('delete')).toEqual([[{ 'beta-24753': true }]]);
       });
     });
diff --git a/spec/frontend/registry/explorer/components/details_page/tags_loader_spec.js b/spec/frontend/registry/explorer/components/details_page/tags_loader_spec.js
index b27d3e2c042..40d84d9d4a5 100644
--- a/spec/frontend/registry/explorer/components/details_page/tags_loader_spec.js
+++ b/spec/frontend/registry/explorer/components/details_page/tags_loader_spec.js
@@ -32,11 +32,7 @@ describe('TagsLoader component', () => {
 
   it('has the correct props', () => {
     mountComponent();
-    expect(
-      findGlSkeletonLoaders()
-        .at(0)
-        .props(),
-    ).toMatchObject({
+    expect(findGlSkeletonLoaders().at(0).props()).toMatchObject({
       width: component.loader.width,
       height: component.loader.height,
     });
diff --git a/spec/frontend/registry/explorer/components/list_page/__snapshots__/project_empty_state_spec.js.snap b/spec/frontend/registry/explorer/components/list_page/__snapshots__/project_empty_state_spec.js.snap
index bab6b25cc15..46b07b4c2d6 100644
--- a/spec/frontend/registry/explorer/components/list_page/__snapshots__/project_empty_state_spec.js.snap
+++ b/spec/frontend/registry/explorer/components/list_page/__snapshots__/project_empty_state_spec.js.snap
@@ -56,7 +56,7 @@ exports[`Registry Project Empty state to match the default snapshot 1`] = `
   </p>
    
   <gl-form-input-group-stub
-    class="gl-mb-4 "
+    class="gl-mb-4"
     predefinedoptions="[object Object]"
     value=""
   >
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 b9839d92f1d..a06c4795b2e 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
@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import { GlIcon, GlSprintf } from '@gitlab/ui';
+import { GlIcon, GlSprintf, GlSkeletonLoader } from '@gitlab/ui';
 import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
@@ -23,12 +23,13 @@ describe('Image List Row', () => {
   const [item] = imagesListResponse;
 
   const findDetailsLink = () => wrapper.find('[data-testid="details-link"]');
-  const findTagsCount = () => wrapper.find('[data-testid="tagsCount"]');
+  const findTagsCount = () => wrapper.find('[data-testid="tags-count"]');
   const findDeleteBtn = () => wrapper.find(DeleteButton);
   const findClipboardButton = () => wrapper.find(ClipboardButton);
   const findWarningIcon = () => wrapper.find('[data-testid="warning-icon"]');
+  const findSkeletonLoader = () => wrapper.find(GlSkeletonLoader);
 
-  const mountComponent = props => {
+  const mountComponent = (props) => {
     wrapper = shallowMount(Component, {
       stubs: {
         RouterLink,
@@ -164,6 +165,20 @@ describe('Image List Row', () => {
       expect(icon.props('name')).toBe('tag');
     });
 
+    describe('loading state', () => {
+      it('shows a loader when metadataLoading is true', () => {
+        mountComponent({ metadataLoading: true });
+
+        expect(findSkeletonLoader().exists()).toBe(true);
+      });
+
+      it('hides the tags count while loading', () => {
+        mountComponent({ metadataLoading: true });
+
+        expect(findTagsCount().exists()).toBe(false);
+      });
+    });
+
     describe('tags count text', () => {
       it('with one tag in the image', () => {
         mountComponent({ item: { ...item, tagsCount: 1 } });
diff --git a/spec/frontend/registry/explorer/components/list_page/image_list_spec.js b/spec/frontend/registry/explorer/components/list_page/image_list_spec.js
index 54befc9973a..61c362f4d78 100644
--- a/spec/frontend/registry/explorer/components/list_page/image_list_spec.js
+++ b/spec/frontend/registry/explorer/components/list_page/image_list_spec.js
@@ -11,11 +11,12 @@ describe('Image List', () => {
   const findRow = () => wrapper.findAll(ImageListRow);
   const findPagination = () => wrapper.find(GlKeysetPagination);
 
-  const mountComponent = (pageInfo = defaultPageInfo) => {
+  const mountComponent = (props) => {
     wrapper = shallowMount(Component, {
       propsData: {
         images: imagesListResponse,
-        pageInfo,
+        pageInfo: defaultPageInfo,
+        ...props,
       },
     });
   };
@@ -35,11 +36,14 @@ describe('Image List', () => {
     it('when delete event is emitted on the row it emits up a delete event', () => {
       mountComponent();
 
-      findRow()
-        .at(0)
-        .vm.$emit('delete', 'foo');
+      findRow().at(0).vm.$emit('delete', 'foo');
       expect(wrapper.emitted('delete')).toEqual([['foo']]);
     });
+
+    it('passes down the metadataLoading prop', () => {
+      mountComponent({ metadataLoading: true });
+      expect(findRow().at(0).props('metadataLoading')).toBe(true);
+    });
   });
 
   describe('pagination', () => {
@@ -57,7 +61,7 @@ describe('Image List', () => {
     `(
       'when hasNextPage is $hasNextPage and hasPreviousPage is $hasPreviousPage: is $isVisible that the component is visible',
       ({ hasNextPage, hasPreviousPage, isVisible }) => {
-        mountComponent({ hasNextPage, hasPreviousPage });
+        mountComponent({ pageInfo: { ...defaultPageInfo, hasNextPage, hasPreviousPage } });
 
         expect(findPagination().exists()).toBe(isVisible);
         expect(findPagination().props('hasPreviousPage')).toBe(hasPreviousPage);
@@ -66,7 +70,7 @@ describe('Image List', () => {
     );
 
     it('emits "prev-page" when the user clicks the back page button', () => {
-      mountComponent({ hasPreviousPage: true });
+      mountComponent();
 
       findPagination().vm.$emit('prev');
 
@@ -74,7 +78,7 @@ describe('Image List', () => {
     });
 
     it('emits "next-page" when the user clicks the forward page button', () => {
-      mountComponent({ hasNextPage: true });
+      mountComponent();
 
       findPagination().vm.$emit('next');
 
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 3c997093d46..58439c185e3 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
@@ -41,9 +41,12 @@ describe('registry_header', () => {
 
   describe('header', () => {
     it('has a title', () => {
-      mountComponent();
+      mountComponent({ metadataLoading: true });
 
-      expect(findTitleArea().props('title')).toBe(CONTAINER_REGISTRY_TITLE);
+      expect(findTitleArea().props()).toMatchObject({
+        title: CONTAINER_REGISTRY_TITLE,
+        metadataLoading: true,
+      });
     });
 
     it('has a commands slot', () => {
diff --git a/spec/frontend/registry/explorer/components/registry_breadcrumb_spec.js b/spec/frontend/registry/explorer/components/registry_breadcrumb_spec.js
index fb0b98ba004..487f33594c1 100644
--- a/spec/frontend/registry/explorer/components/registry_breadcrumb_spec.js
+++ b/spec/frontend/registry/explorer/components/registry_breadcrumb_spec.js
@@ -1,4 +1,4 @@
-import { shallowMount } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 
 import component from '~/registry/explorer/components/registry_breadcrumb.vue';
 
@@ -6,45 +6,13 @@ describe('Registry Breadcrumb', () => {
   let wrapper;
   const nameGenerator = jest.fn();
 
-  const crumb = {
-    className: 'foo bar',
-    tagName: 'div',
-    innerHTML: 'baz',
-    querySelector: jest.fn(),
-    children: [
-      {
-        tagName: 'a',
-        className: 'foo',
-      },
-    ],
-  };
-
-  const querySelectorReturnValue = {
-    classList: ['js-divider'],
-    tagName: 'svg',
-    innerHTML: 'foo',
-  };
-
-  const crumbs = [crumb, { ...crumb, innerHTML: 'foo' }, { ...crumb, className: 'baz' }];
-
   const routes = [
-    { name: 'foo', meta: { nameGenerator, root: true } },
-    { name: 'baz', meta: { nameGenerator } },
+    { name: 'list', path: '/', meta: { nameGenerator, root: true } },
+    { name: 'details', path: '/:id', meta: { nameGenerator } },
   ];
 
-  const findDivider = () => wrapper.find('.js-divider');
-  const findRootRoute = () => wrapper.find({ ref: 'rootRouteLink' });
-  const findChildRoute = () => wrapper.find({ ref: 'childRouteLink' });
-  const findLastCrumb = () => wrapper.find({ ref: 'lastCrumb' });
-
-  const mountComponent = $route => {
-    wrapper = shallowMount(component, {
-      propsData: {
-        crumbs,
-      },
-      stubs: {
-        'router-link': { name: 'router-link', template: '<a><slot></slot></a>', props: ['to'] },
-      },
+  const mountComponent = ($route) => {
+    wrapper = mount(component, {
       mocks: {
         $route,
         $router: {
@@ -58,7 +26,6 @@ describe('Registry Breadcrumb', () => {
 
   beforeEach(() => {
     nameGenerator.mockClear();
-    crumb.querySelector = jest.fn();
   });
 
   afterEach(() => {
@@ -75,8 +42,11 @@ describe('Registry Breadcrumb', () => {
       expect(wrapper.element).toMatchSnapshot();
     });
 
-    it('contains a router-link for the child route', () => {
-      expect(findChildRoute().exists()).toBe(true);
+    it('contains only a single router-link to list', () => {
+      const links = wrapper.findAll('a');
+
+      expect(links).toHaveLength(1);
+      expect(links.at(0).attributes('href')).toBe('/');
     });
 
     it('the link text is calculated by nameGenerator', () => {
@@ -86,52 +56,23 @@ describe('Registry Breadcrumb', () => {
 
   describe('when is not rootRoute', () => {
     beforeEach(() => {
-      crumb.querySelector.mockReturnValue(querySelectorReturnValue);
       mountComponent(routes[1]);
     });
 
-    it('renders a divider', () => {
-      expect(findDivider().exists()).toBe(true);
+    it('renders', () => {
+      expect(wrapper.element).toMatchSnapshot();
     });
 
-    it('contains a router-link for the root route', () => {
-      expect(findRootRoute().exists()).toBe(true);
-    });
+    it('contains two router-links to list and details', () => {
+      const links = wrapper.findAll('a');
 
-    it('contains a router-link for the child route', () => {
-      expect(findChildRoute().exists()).toBe(true);
+      expect(links).toHaveLength(2);
+      expect(links.at(0).attributes('href')).toBe('/');
+      expect(links.at(1).attributes('href')).toBe('#');
     });
 
     it('the link text is calculated by nameGenerator', () => {
       expect(nameGenerator).toHaveBeenCalledTimes(2);
     });
   });
-
-  describe('last crumb', () => {
-    const lastChildren = crumb.children[0];
-    beforeEach(() => {
-      nameGenerator.mockReturnValue('foo');
-      mountComponent(routes[0]);
-    });
-
-    it('has the same tag as the last children of the crumbs', () => {
-      expect(findLastCrumb().element.tagName).toBe(lastChildren.tagName.toUpperCase());
-    });
-
-    it('has the same classes as the last children of the crumbs', () => {
-      expect(
-        findLastCrumb()
-          .classes()
-          .join(' '),
-      ).toEqual(lastChildren.className);
-    });
-
-    it('has a link to the current route', () => {
-      expect(findChildRoute().props('to')).toEqual({ to: routes[0].name });
-    });
-
-    it('the link has the correct text', () => {
-      expect(findChildRoute().text()).toEqual('foo');
-    });
-  });
 });
diff --git a/spec/frontend/registry/explorer/mock_data.js b/spec/frontend/registry/explorer/mock_data.js
index 72a9bff8a47..b0fc009872c 100644
--- a/spec/frontend/registry/explorer/mock_data.js
+++ b/spec/frontend/registry/explorer/mock_data.js
@@ -8,7 +8,6 @@ export const imagesListResponse = [
     location: '0.0.0.0:5000/gitlab-org/gitlab-test/rails-12009',
     canDelete: true,
     createdAt: '2020-11-03T13:29:21Z',
-    tagsCount: 18,
     expirationPolicyStartedAt: null,
   },
   {
@@ -20,7 +19,6 @@ export const imagesListResponse = [
     location: '0.0.0.0:5000/gitlab-org/gitlab-test/rails-20572',
     canDelete: true,
     createdAt: '2020-09-21T06:57:43Z',
-    tagsCount: 1,
     expirationPolicyStartedAt: null,
   },
 ];
@@ -117,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',
   },
 };
@@ -158,7 +161,7 @@ export const tagsMock = [
   },
 ];
 
-export const graphQLImageDetailsMock = override => ({
+export const graphQLImageDetailsMock = (override) => ({
   data: {
     containerRepository: {
       ...containerRepositoryMock,
@@ -209,3 +212,26 @@ export const dockerCommands = {
   dockerPushCommand: 'barbar',
   dockerLoginCommand: 'bazbaz',
 };
+
+export const graphQLProjectImageRepositoriesDetailsMock = {
+  data: {
+    project: {
+      containerRepositories: {
+        nodes: [
+          {
+            id: 'gid://gitlab/ContainerRepository/26',
+            tagsCount: 4,
+            __typename: 'ContainerRepository',
+          },
+          {
+            id: 'gid://gitlab/ContainerRepository/11',
+            tagsCount: 1,
+            __typename: 'ContainerRepository',
+          },
+        ],
+        __typename: 'ContainerRepositoryConnection',
+      },
+      __typename: 'Project',
+    },
+  },
+};
diff --git a/spec/frontend/registry/explorer/pages/details_spec.js b/spec/frontend/registry/explorer/pages/details_spec.js
index d307dfe590c..1746a6a63b6 100644
--- a/spec/frontend/registry/explorer/pages/details_spec.js
+++ b/spec/frontend/registry/explorer/pages/details_spec.js
@@ -1,7 +1,7 @@
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import { GlKeysetPagination } from '@gitlab/ui';
 import VueApollo from 'vue-apollo';
-import createMockApollo from 'jest/helpers/mock_apollo_helper';
+import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import Tracking from '~/tracking';
 import component from '~/registry/explorer/pages/details.vue';
@@ -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,
@@ -46,7 +48,7 @@ describe('Details Page', () => {
     updateName: jest.fn(),
   };
 
-  const cleanTags = tagsMock.map(t => {
+  const cleanTags = tagsMock.map((t) => {
     const result = { ...t };
     // eslint-disable-next-line no-underscore-dangle
     delete result.__typename;
@@ -58,7 +60,7 @@ describe('Details Page', () => {
     await wrapper.vm.$nextTick();
   };
 
-  const tagsArrayToSelectedTags = tags =>
+  const tagsArrayToSelectedTags = (tags) =>
     tags.reduce((acc, c) => {
       acc[c.name] = true;
       return acc;
@@ -334,7 +336,7 @@ describe('Details Page', () => {
           findDeleteModal().vm.$emit('confirmDelete');
 
           expect(mutationResolver).toHaveBeenCalledWith(
-            expect.objectContaining({ tagNames: tagsMock.map(t => t.name) }),
+            expect.objectContaining({ tagNames: tagsMock.map((t) => t.name) }),
           );
         });
       });
@@ -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();
diff --git a/spec/frontend/registry/explorer/pages/list_spec.js b/spec/frontend/registry/explorer/pages/list_spec.js
index 7d32a667011..c4556934934 100644
--- a/spec/frontend/registry/explorer/pages/list_spec.js
+++ b/spec/frontend/registry/explorer/pages/list_spec.js
@@ -1,8 +1,9 @@
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import VueApollo from 'vue-apollo';
 import { GlSkeletonLoader, GlSprintf, GlAlert, GlSearchBoxByClick } from '@gitlab/ui';
-import createMockApollo from 'jest/helpers/mock_apollo_helper';
+import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
+import getContainerRepositoriesQuery from 'shared_queries/container_registry/get_container_repositories.query.graphql';
 import Tracking from '~/tracking';
 import component from '~/registry/explorer/pages/list.vue';
 import CliCommands from '~/registry/explorer/components/list_page/cli_commands.vue';
@@ -19,8 +20,7 @@ import {
   SEARCH_PLACEHOLDER_TEXT,
 } from '~/registry/explorer/constants';
 
-import getProjectContainerRepositoriesQuery from '~/registry/explorer/graphql/queries/get_project_container_repositories.query.graphql';
-import getGroupContainerRepositoriesQuery from '~/registry/explorer/graphql/queries/get_group_container_repositories.query.graphql';
+import getContainerRepositoriesDetails from '~/registry/explorer/graphql/queries/get_container_repositories_details.query.graphql';
 import deleteContainerRepositoryMutation from '~/registry/explorer/graphql/mutations/delete_container_repository.mutation.graphql';
 
 import {
@@ -31,6 +31,8 @@ import {
   graphQLEmptyImageListMock,
   graphQLEmptyGroupImageListMock,
   pageInfo,
+  graphQLProjectImageRepositoriesDetailsMock,
+  dockerCommands,
 } from '../mock_data';
 import { GlModal, GlEmptyState } from '../stubs';
 import { $toast } from '../../shared/mocks';
@@ -58,6 +60,7 @@ describe('List Page', () => {
   const findEmptySearchMessage = () => wrapper.find('[data-testid="emptySearch"]');
 
   const waitForApolloRequestRender = async () => {
+    jest.runOnlyPendingTimers();
     await waitForPromises();
     await wrapper.vm.$nextTick();
   };
@@ -65,15 +68,15 @@ describe('List Page', () => {
   const mountComponent = ({
     mocks,
     resolver = jest.fn().mockResolvedValue(graphQLImageListMock),
-    groupResolver = jest.fn().mockResolvedValue(graphQLImageListMock),
+    detailsResolver = jest.fn().mockResolvedValue(graphQLProjectImageRepositoriesDetailsMock),
     mutationResolver = jest.fn().mockResolvedValue(graphQLImageDeleteMock),
-    config = {},
+    config = { isGroupPage: false },
   } = {}) => {
     localVue.use(VueApollo);
 
     const requestHandlers = [
-      [getProjectContainerRepositoriesQuery, resolver],
-      [getGroupContainerRepositoriesQuery, groupResolver],
+      [getContainerRepositoriesQuery, resolver],
+      [getContainerRepositoriesDetails, detailsResolver],
       [deleteContainerRepositoryMutation, mutationResolver],
     ];
 
@@ -99,6 +102,7 @@ describe('List Page', () => {
       provide() {
         return {
           config,
+          ...dockerCommands,
         };
       },
     });
@@ -116,6 +120,7 @@ describe('List Page', () => {
     expect(findRegistryHeader().exists()).toBe(true);
     expect(findRegistryHeader().props()).toMatchObject({
       imagesCount: 2,
+      metadataLoading: false,
     });
   });
 
@@ -124,6 +129,7 @@ describe('List Page', () => {
       characterError: true,
       containersErrorImage: 'foo',
       helpPagePath: 'bar',
+      isGroupPage: false,
     };
 
     it('should show an empty state', () => {
@@ -170,6 +176,12 @@ describe('List Page', () => {
 
       expect(findCliCommands().exists()).toBe(false);
     });
+
+    it('title has the metadataLoading props set to true', () => {
+      mountComponent();
+
+      expect(findRegistryHeader().props('metadataLoading')).toBe(true);
+    });
   });
 
   describe('list is empty', () => {
@@ -192,15 +204,16 @@ describe('List Page', () => {
         expect(findProjectEmptyState().exists()).toBe(true);
       });
     });
+
     describe('group page', () => {
-      const groupResolver = jest.fn().mockResolvedValue(graphQLEmptyGroupImageListMock);
+      const resolver = jest.fn().mockResolvedValue(graphQLEmptyGroupImageListMock);
 
       const config = {
         isGroupPage: true,
       };
 
       it('group empty state is visible', async () => {
-        mountComponent({ groupResolver, config });
+        mountComponent({ resolver, config });
 
         await waitForApolloRequestRender();
 
@@ -208,7 +221,7 @@ describe('List Page', () => {
       });
 
       it('cli commands is not visible', async () => {
-        mountComponent({ groupResolver, config });
+        mountComponent({ resolver, config });
 
         await waitForApolloRequestRender();
 
@@ -216,7 +229,7 @@ describe('List Page', () => {
       });
 
       it('list header is not visible', async () => {
-        mountComponent({ groupResolver, config });
+        mountComponent({ resolver, config });
 
         await waitForApolloRequestRender();
 
@@ -253,6 +266,39 @@ describe('List Page', () => {
         expect(header.text()).toBe(IMAGE_REPOSITORY_LIST_LABEL);
       });
 
+      describe('additional metadata', () => {
+        it('is called on component load', async () => {
+          const detailsResolver = jest
+            .fn()
+            .mockResolvedValue(graphQLProjectImageRepositoriesDetailsMock);
+          mountComponent({ detailsResolver });
+
+          jest.runOnlyPendingTimers();
+          await waitForPromises();
+
+          expect(detailsResolver).toHaveBeenCalled();
+        });
+
+        it('does not block the list ui to show', async () => {
+          const detailsResolver = jest.fn().mockRejectedValue();
+          mountComponent({ detailsResolver });
+
+          await waitForApolloRequestRender();
+
+          expect(findImageList().exists()).toBe(true);
+        });
+
+        it('loading state is passed to list component', async () => {
+          // this is a promise that never resolves, to trick apollo to think that this request is still loading
+          const detailsResolver = jest.fn().mockImplementation(() => new Promise(() => {}));
+
+          mountComponent({ detailsResolver });
+          await waitForApolloRequestRender();
+
+          expect(findImageList().props('metadataLoading')).toBe(true);
+        });
+      });
+
       describe('delete image', () => {
         const deleteImage = async () => {
           await wrapper.vm.$nextTick();
@@ -274,7 +320,7 @@ describe('List Page', () => {
 
           const updatedImage = findImageList()
             .props('images')
-            .find(i => i.id === deletedContainerRepository.id);
+            .find((i) => i.id === deletedContainerRepository.id);
 
           expect(updatedImage.status).toBe(deletedContainerRepository.status);
         });
@@ -350,9 +396,15 @@ describe('List Page', () => {
 
       it('when search result is empty displays an empty search message', async () => {
         const resolver = jest.fn().mockResolvedValue(graphQLImageListMock);
-        mountComponent({ resolver });
+        const detailsResolver = jest
+          .fn()
+          .mockResolvedValue(graphQLProjectImageRepositoriesDetailsMock);
+        mountComponent({ resolver, detailsResolver });
+
+        await waitForApolloRequestRender();
 
         resolver.mockResolvedValue(graphQLEmptyImageListMock);
+        detailsResolver.mockResolvedValue(graphQLEmptyImageListMock);
 
         await doSearch();
 
@@ -363,28 +415,42 @@ describe('List Page', () => {
     describe('pagination', () => {
       it('prev-page event triggers a fetchMore request', async () => {
         const resolver = jest.fn().mockResolvedValue(graphQLImageListMock);
-        mountComponent({ resolver });
+        const detailsResolver = jest
+          .fn()
+          .mockResolvedValue(graphQLProjectImageRepositoriesDetailsMock);
+        mountComponent({ resolver, detailsResolver });
 
         await waitForApolloRequestRender();
 
         findImageList().vm.$emit('prev-page');
+        await wrapper.vm.$nextTick();
 
         expect(resolver).toHaveBeenCalledWith(
-          expect.objectContaining({ first: null, before: pageInfo.startCursor }),
+          expect.objectContaining({ before: pageInfo.startCursor }),
+        );
+        expect(detailsResolver).toHaveBeenCalledWith(
+          expect.objectContaining({ before: pageInfo.startCursor }),
         );
       });
 
       it('next-page event triggers a fetchMore request', async () => {
         const resolver = jest.fn().mockResolvedValue(graphQLImageListMock);
-        mountComponent({ resolver });
+        const detailsResolver = jest
+          .fn()
+          .mockResolvedValue(graphQLProjectImageRepositoriesDetailsMock);
+        mountComponent({ resolver, detailsResolver });
 
         await waitForApolloRequestRender();
 
         findImageList().vm.$emit('next-page');
+        await wrapper.vm.$nextTick();
 
         expect(resolver).toHaveBeenCalledWith(
           expect.objectContaining({ after: pageInfo.endCursor }),
         );
+        expect(detailsResolver).toHaveBeenCalledWith(
+          expect.objectContaining({ after: pageInfo.endCursor }),
+        );
       });
     });
   });
@@ -411,7 +477,7 @@ describe('List Page', () => {
       mountComponent();
     });
 
-    const testTrackingCall = action => {
+    const testTrackingCall = (action) => {
       expect(Tracking.event).toHaveBeenCalledWith(undefined, action, {
         label: 'registry_repository_delete',
       });
diff --git a/spec/frontend/registry/settings/components/__snapshots__/settings_form_spec.js.snap b/spec/frontend/registry/settings/components/__snapshots__/settings_form_spec.js.snap
index d7f89ce070e..7a52b4a5d0f 100644
--- a/spec/frontend/registry/settings/components/__snapshots__/settings_form_spec.js.snap
+++ b/spec/frontend/registry/settings/components/__snapshots__/settings_form_spec.js.snap
@@ -32,7 +32,7 @@ exports[`Settings Form Keep N matches snapshot 1`] = `
 exports[`Settings Form Keep Regex matches snapshot 1`] = `
 <expiration-input-stub
   data-testid="keep-regex-input"
-  description="Tags with names that match this regex pattern are kept. %{linkStart}More information%{linkEnd}"
+  description="Tags with names that match this regex pattern are kept. %{linkStart}View regex examples.%{linkEnd}"
   error=""
   label="Keep tags matching:"
   name="keep-regex"
@@ -54,7 +54,7 @@ exports[`Settings Form OlderThan matches snapshot 1`] = `
 exports[`Settings Form Remove regex matches snapshot 1`] = `
 <expiration-input-stub
   data-testid="remove-regex-input"
-  description="Tags with names that match this regex pattern are removed. %{linkStart}More information%{linkEnd}"
+  description="Tags with names that match this regex pattern are removed. %{linkStart}View regex examples.%{linkEnd}"
   error=""
   label="Remove tags matching:"
   name="remove-regex"
diff --git a/spec/frontend/registry/settings/components/expiration_dropdown_spec.js b/spec/frontend/registry/settings/components/expiration_dropdown_spec.js
index e0cac317ad6..f777f7ec9de 100644
--- a/spec/frontend/registry/settings/components/expiration_dropdown_spec.js
+++ b/spec/frontend/registry/settings/components/expiration_dropdown_spec.js
@@ -8,14 +8,17 @@ describe('ExpirationDropdown', () => {
   const defaultProps = {
     name: 'foo',
     label: 'label-bar',
-    formOptions: [{ key: 'foo', label: 'bar' }, { key: 'baz', label: 'zab' }],
+    formOptions: [
+      { key: 'foo', label: 'bar' },
+      { key: 'baz', label: 'zab' },
+    ],
   };
 
   const findFormSelect = () => wrapper.find(GlFormSelect);
   const findFormGroup = () => wrapper.find(GlFormGroup);
   const findOptions = () => wrapper.findAll('[data-testid="option"]');
 
-  const mountComponent = props => {
+  const mountComponent = (props) => {
     wrapper = shallowMount(component, {
       stubs: {
         GlFormGroup,
diff --git a/spec/frontend/registry/settings/components/expiration_input_spec.js b/spec/frontend/registry/settings/components/expiration_input_spec.js
index 849f85aa265..383158067dc 100644
--- a/spec/frontend/registry/settings/components/expiration_input_spec.js
+++ b/spec/frontend/registry/settings/components/expiration_input_spec.js
@@ -22,7 +22,7 @@ describe('ExpirationInput', () => {
   const findDescription = () => wrapper.find('[data-testid="description"]');
   const findDescriptionLink = () => wrapper.find(GlLink);
 
-  const mountComponent = props => {
+  const mountComponent = (props) => {
     wrapper = shallowMount(component, {
       stubs: {
         GlSprintf,
diff --git a/spec/frontend/registry/settings/components/expiration_run_text_spec.js b/spec/frontend/registry/settings/components/expiration_run_text_spec.js
index c594b1f449d..d74ee2d1c18 100644
--- a/spec/frontend/registry/settings/components/expiration_run_text_spec.js
+++ b/spec/frontend/registry/settings/components/expiration_run_text_spec.js
@@ -11,7 +11,7 @@ describe('ExpirationToggle', () => {
   const findInput = () => wrapper.find(GlFormInput);
   const findFormGroup = () => wrapper.find(GlFormGroup);
 
-  const mountComponent = propsData => {
+  const mountComponent = (propsData) => {
     wrapper = shallowMount(component, {
       stubs: {
         GlFormGroup,
diff --git a/spec/frontend/registry/settings/components/expiration_toggle_spec.js b/spec/frontend/registry/settings/components/expiration_toggle_spec.js
index 99ff7a7f77a..ce016e852ee 100644
--- a/spec/frontend/registry/settings/components/expiration_toggle_spec.js
+++ b/spec/frontend/registry/settings/components/expiration_toggle_spec.js
@@ -13,7 +13,7 @@ describe('ExpirationToggle', () => {
   const findToggle = () => wrapper.find(GlToggle);
   const findDescription = () => wrapper.find('[data-testid="description"]');
 
-  const mountComponent = propsData => {
+  const mountComponent = (propsData) => {
     wrapper = shallowMount(component, {
       stubs: {
         GlFormGroup,
diff --git a/spec/frontend/registry/settings/components/registry_settings_app_spec.js b/spec/frontend/registry/settings/components/registry_settings_app_spec.js
index c31c7bdf99b..32d4f16221d 100644
--- a/spec/frontend/registry/settings/components/registry_settings_app_spec.js
+++ b/spec/frontend/registry/settings/components/registry_settings_app_spec.js
@@ -1,7 +1,7 @@
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import VueApollo from 'vue-apollo';
 import { GlAlert, GlSprintf, GlLink } from '@gitlab/ui';
-import createMockApollo from 'jest/helpers/mock_apollo_helper';
+import createMockApollo from 'helpers/mock_apollo_helper';
 import component from '~/registry/settings/components/registry_settings_app.vue';
 import expirationPolicyQuery from '~/registry/settings/graphql/queries/get_expiration_policy.query.graphql';
 import SettingsForm from '~/registry/settings/components/settings_form.vue';
@@ -59,7 +59,7 @@ describe('Registry Settings App', () => {
       apolloProvider: fakeApollo,
     });
 
-    return requestHandlers.map(request => request[1]);
+    return requestHandlers.map((request) => request[1]);
   };
 
   afterEach(() => {
diff --git a/spec/frontend/registry/settings/components/settings_form_spec.js b/spec/frontend/registry/settings/components/settings_form_spec.js
index b89269c0ae4..626f4fcc9f5 100644
--- a/spec/frontend/registry/settings/components/settings_form_spec.js
+++ b/spec/frontend/registry/settings/components/settings_form_spec.js
@@ -1,6 +1,6 @@
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import VueApollo from 'vue-apollo';
-import createMockApollo from 'jest/helpers/mock_apollo_helper';
+import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import Tracking from '~/tracking';
 import component from '~/registry/settings/components/settings_form.vue';
@@ -103,7 +103,7 @@ describe('Settings Form', () => {
       },
     });
 
-    return requestHandlers.map(resolvers => resolvers[1]);
+    return requestHandlers.map((resolvers) => resolvers[1]);
   };
 
   beforeEach(() => {
diff --git a/spec/frontend/registry/settings/mock_data.js b/spec/frontend/registry/settings/mock_data.js
index 7cc645fcf55..9778f409010 100644
--- a/spec/frontend/registry/settings/mock_data.js
+++ b/spec/frontend/registry/settings/mock_data.js
@@ -8,7 +8,7 @@ export const containerExpirationPolicyData = () => ({
   nextRunAt: '2020-11-19T07:37:03.941Z',
 });
 
-export const expirationPolicyPayload = override => ({
+export const expirationPolicyPayload = (override) => ({
   data: {
     project: {
       containerExpirationPolicy: {
diff --git a/spec/frontend/registry/settings/utils_spec.js b/spec/frontend/registry/settings/utils_spec.js
index f92d51db307..7bc627908af 100644
--- a/spec/frontend/registry/settings/utils_spec.js
+++ b/spec/frontend/registry/settings/utils_spec.js
@@ -11,7 +11,10 @@ describe('Utils', () => {
         [{ variable: 1 }, { variable: 2 }],
         olderThanTranslationGenerator,
       );
-      expect(result).toEqual([{ variable: 1, label: '1 day' }, { variable: 2, label: '2 days' }]);
+      expect(result).toEqual([
+        { variable: 1, label: '1 day' },
+        { variable: 2, label: '2 days' },
+      ]);
     });
   });