Add latest changes from gitlab-org/gitlab@13-0-stable-ee

10 files changed, 467 insertions, 212 deletions

diff --git a/spec/frontend/registry/explorer/components/image_list_spec.js b/spec/frontend/registry/explorer/components/image_list_spec.js
new file mode 100644
index 00000000000..12f0fbe0c87
--- /dev/null
+++ b/spec/frontend/registry/explorer/components/image_list_spec.js
@@ -0,0 +1,74 @@
+import { shallowMount } from '@vue/test-utils';
+import { GlPagination } from '@gitlab/ui';
+import Component from '~/registry/explorer/components/image_list.vue';
+import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
+import { RouterLink } from '../stubs';
+import { imagesListResponse, imagePagination } from '../mock_data';
+
+describe('Image List', () => {
+  let wrapper;
+
+  const firstElement = imagesListResponse.data[0];
+
+  const findDeleteBtn = () => wrapper.find('[data-testid="deleteImageButton"]');
+  const findRowItems = () => wrapper.findAll('[data-testid="rowItem"]');
+  const findDetailsLink = () => wrapper.find('[data-testid="detailsLink"]');
+  const findClipboardButton = () => wrapper.find(ClipboardButton);
+  const findPagination = () => wrapper.find(GlPagination);
+
+  const mountComponent = () => {
+    wrapper = shallowMount(Component, {
+      stubs: {
+        RouterLink,
+      },
+      propsData: {
+        images: imagesListResponse.data,
+        pagination: imagePagination,
+      },
+    });
+  };
+
+  beforeEach(() => {
+    mountComponent();
+  });
+
+  it('contains one list element for each image', () => {
+    expect(findRowItems().length).toBe(imagesListResponse.data.length);
+  });
+
+  it('contains a link to the details page', () => {
+    const link = findDetailsLink();
+    expect(link.html()).toContain(firstElement.path);
+    expect(link.props('to').name).toBe('details');
+  });
+
+  it('contains a clipboard button', () => {
+    const button = findClipboardButton();
+    expect(button.exists()).toBe(true);
+    expect(button.props('text')).toBe(firstElement.location);
+    expect(button.props('title')).toBe(firstElement.location);
+  });
+
+  it('should be possible to delete a repo', () => {
+    const deleteBtn = findDeleteBtn();
+    expect(deleteBtn.exists()).toBe(true);
+  });
+
+  describe('pagination', () => {
+    it('exists', () => {
+      expect(findPagination().exists()).toBe(true);
+    });
+
+    it('is wired to the correct pagination props', () => {
+      const pagination = findPagination();
+      expect(pagination.props('perPage')).toBe(imagePagination.perPage);
+      expect(pagination.props('totalItems')).toBe(imagePagination.total);
+      expect(pagination.props('value')).toBe(imagePagination.page);
+    });
+
+    it('emits a pageChange event when the page change', () => {
+      wrapper.setData({ currentPage: 2 });
+      expect(wrapper.emitted('pageChange')).toEqual([[2]]);
+    });
+  });
+});
diff --git a/spec/frontend/registry/explorer/mock_data.js b/spec/frontend/registry/explorer/mock_data.js
index 2d8cd4e42bc..f6beccda9b1 100644
--- a/spec/frontend/registry/explorer/mock_data.js
+++ b/spec/frontend/registry/explorer/mock_data.js
@@ -87,3 +87,11 @@ export const tagsListResponse = {
   ],
   headers,
 };
+
+export const imagePagination = {
+  perPage: 10,
+  page: 1,
+  total: 14,
+  totalPages: 2,
+  nextPage: 2,
+};
diff --git a/spec/frontend/registry/explorer/pages/details_spec.js b/spec/frontend/registry/explorer/pages/details_spec.js
index 15aa5008413..93098403a28 100644
--- a/spec/frontend/registry/explorer/pages/details_spec.js
+++ b/spec/frontend/registry/explorer/pages/details_spec.js
@@ -1,15 +1,21 @@
 import { mount } from '@vue/test-utils';
-import { GlTable, GlPagination, GlSkeletonLoader } from '@gitlab/ui';
+import { GlTable, GlPagination, GlSkeletonLoader, GlAlert, GlLink } from '@gitlab/ui';
 import Tracking from '~/tracking';
 import stubChildren from 'helpers/stub_children';
 import component from '~/registry/explorer/pages/details.vue';
-import store from '~/registry/explorer/stores/';
-import { SET_MAIN_LOADING } from '~/registry/explorer/stores/mutation_types/';
+import { createStore } from '~/registry/explorer/stores/';
+import {
+  SET_MAIN_LOADING,
+  SET_INITIAL_STATE,
+  SET_TAGS_LIST_SUCCESS,
+  SET_TAGS_PAGINATION,
+} from '~/registry/explorer/stores/mutation_types/';
 import {
   DELETE_TAG_SUCCESS_MESSAGE,
   DELETE_TAG_ERROR_MESSAGE,
   DELETE_TAGS_SUCCESS_MESSAGE,
   DELETE_TAGS_ERROR_MESSAGE,
+  ADMIN_GARBAGE_COLLECTION_TIP,
 } from '~/registry/explorer/constants';
 import { tagsListResponse } from '../mock_data';
 import { GlModal } from '../stubs';
@@ -18,6 +24,7 @@ import { $toast } from '../../shared/mocks';
 describe('Details Page', () => {
   let wrapper;
   let dispatchSpy;
+  let store;
 
   const findDeleteModal = () => wrapper.find(GlModal);
   const findPagination = () => wrapper.find(GlPagination);
@@ -30,6 +37,8 @@ describe('Details Page', () => {
   const findAllCheckboxes = () => wrapper.findAll('.js-row-checkbox');
   const findCheckedCheckboxes = () => findAllCheckboxes().filter(c => c.attributes('checked'));
   const findFirsTagColumn = () => wrapper.find('.js-tag-column');
+  const findFirstTagNameText = () => wrapper.find('[data-testid="rowNameText"]');
+  const findAlert = () => wrapper.find(GlAlert);
 
   const routeId = window.btoa(JSON.stringify({ name: 'foo', tags_path: 'bar' }));
 
@@ -55,13 +64,17 @@ describe('Details Page', () => {
   };
 
   beforeEach(() => {
+    store = createStore();
     dispatchSpy = jest.spyOn(store, 'dispatch');
-    store.dispatch('receiveTagsListSuccess', tagsListResponse);
+    dispatchSpy.mockResolvedValue();
+    store.commit(SET_TAGS_LIST_SUCCESS, tagsListResponse.data);
+    store.commit(SET_TAGS_PAGINATION, tagsListResponse.headers);
     jest.spyOn(Tracking, 'event');
   });
 
   afterEach(() => {
     wrapper.destroy();
+    wrapper = null;
   });
 
   describe('when isLoading is true', () => {
@@ -130,10 +143,6 @@ describe('Details Page', () => {
     });
 
     describe('row checkbox', () => {
-      beforeEach(() => {
-        mountComponent();
-      });
-
       it('if selected adds item to selectedItems', () => {
         findFirstRowItem('rowCheckbox').vm.$emit('change');
         return wrapper.vm.$nextTick().then(() => {
@@ -240,15 +249,24 @@ describe('Details Page', () => {
       });
     });
 
-    describe('tag cell', () => {
+    describe('name cell', () => {
+      it('tag column has a tooltip with the tag name', () => {
+        mountComponent();
+        expect(findFirstTagNameText().attributes('title')).toBe(tagsListResponse.data[0].name);
+      });
+
       describe('on desktop viewport', () => {
         beforeEach(() => {
           mountComponent();
         });
 
-        it('has class w-25', () => {
+        it('table header has class w-25', () => {
           expect(findFirsTagColumn().classes()).toContain('w-25');
         });
+
+        it('tag column has the mw-m class', () => {
+          expect(findFirstRowItem('rowName').classes()).toContain('mw-m');
+        });
       });
 
       describe('on mobile viewport', () => {
@@ -260,9 +278,28 @@ describe('Details Page', () => {
           });
         });
 
-        it('does not has class w-25', () => {
+        it('table header does not have class w-25', () => {
           expect(findFirsTagColumn().classes()).not.toContain('w-25');
         });
+
+        it('tag column has the gl-justify-content-end class', () => {
+          expect(findFirstRowItem('rowName').classes()).toContain('gl-justify-content-end');
+        });
+      });
+    });
+
+    describe('last updated cell', () => {
+      let timeCell;
+
+      beforeEach(() => {
+        timeCell = findFirstRowItem('rowTime');
+      });
+
+      it('displays the time in string format', () => {
+        expect(timeCell.text()).toBe('2 years ago');
+      });
+      it('has a tooltip timestamp', () => {
+        expect(timeCell.attributes('title')).toBe('Sep 19, 2017 1:45pm GMT+0000');
       });
     });
   });
@@ -328,25 +365,9 @@ describe('Details Page', () => {
           });
           // itemsToBeDeleted is not represented in the DOM, is used as parking variable between selected and deleted items
           expect(wrapper.vm.itemsToBeDeleted).toEqual([]);
+          expect(wrapper.vm.selectedItems).toEqual([]);
           expect(findCheckedCheckboxes()).toHaveLength(0);
         });
-
-        it('show success toast on successful delete', () => {
-          return wrapper.vm.handleSingleDelete(0).then(() => {
-            expect(wrapper.vm.$toast.show).toHaveBeenCalledWith(DELETE_TAG_SUCCESS_MESSAGE, {
-              type: 'success',
-            });
-          });
-        });
-
-        it('show error toast on erred delete', () => {
-          dispatchSpy.mockRejectedValue();
-          return wrapper.vm.handleSingleDelete(0).then(() => {
-            expect(wrapper.vm.$toast.show).toHaveBeenCalledWith(DELETE_TAG_ERROR_MESSAGE, {
-              type: 'error',
-            });
-          });
-        });
       });
 
       describe('when multiple elements are selected', () => {
@@ -365,23 +386,6 @@ describe('Details Page', () => {
           expect(wrapper.vm.itemsToBeDeleted).toEqual([]);
           expect(findCheckedCheckboxes()).toHaveLength(0);
         });
-
-        it('show success toast on successful delete', () => {
-          return wrapper.vm.handleMultipleDelete(0).then(() => {
-            expect(wrapper.vm.$toast.show).toHaveBeenCalledWith(DELETE_TAGS_SUCCESS_MESSAGE, {
-              type: 'success',
-            });
-          });
-        });
-
-        it('show error toast on erred delete', () => {
-          dispatchSpy.mockRejectedValue();
-          return wrapper.vm.handleMultipleDelete(0).then(() => {
-            expect(wrapper.vm.$toast.show).toHaveBeenCalledWith(DELETE_TAGS_ERROR_MESSAGE, {
-              type: 'error',
-            });
-          });
-        });
       });
     });
 
@@ -395,4 +399,108 @@ describe('Details Page', () => {
       });
     });
   });
+
+  describe('Delete alert', () => {
+    const config = {
+      garbageCollectionHelpPagePath: 'foo',
+    };
+
+    describe('when the user is an admin', () => {
+      beforeEach(() => {
+        store.commit(SET_INITIAL_STATE, { ...config, isAdmin: true });
+      });
+
+      afterEach(() => {
+        store.commit(SET_INITIAL_STATE, config);
+      });
+
+      describe.each`
+        deleteType                | successTitle                   | errorTitle
+        ${'handleSingleDelete'}   | ${DELETE_TAG_SUCCESS_MESSAGE}  | ${DELETE_TAG_ERROR_MESSAGE}
+        ${'handleMultipleDelete'} | ${DELETE_TAGS_SUCCESS_MESSAGE} | ${DELETE_TAGS_ERROR_MESSAGE}
+      `('behaves correctly on $deleteType', ({ deleteType, successTitle, errorTitle }) => {
+        describe('when delete is successful', () => {
+          beforeEach(() => {
+            dispatchSpy.mockResolvedValue();
+            mountComponent();
+            return wrapper.vm[deleteType]('foo');
+          });
+
+          it('alert exists', () => {
+            expect(findAlert().exists()).toBe(true);
+          });
+
+          it('alert body contains admin tip', () => {
+            expect(
+              findAlert()
+                .text()
+                .replace(/\s\s+/gm, ' '),
+            ).toBe(ADMIN_GARBAGE_COLLECTION_TIP.replace(/%{\w+}/gm, ''));
+          });
+
+          it('alert body contains link', () => {
+            const alertLink = findAlert().find(GlLink);
+            expect(alertLink.exists()).toBe(true);
+            expect(alertLink.attributes('href')).toBe(config.garbageCollectionHelpPagePath);
+          });
+
+          it('alert title is appropriate', () => {
+            expect(findAlert().attributes('title')).toBe(successTitle);
+          });
+        });
+
+        describe('when delete is not successful', () => {
+          beforeEach(() => {
+            mountComponent();
+            dispatchSpy.mockRejectedValue();
+            return wrapper.vm[deleteType]('foo');
+          });
+
+          it('alert exist and text is appropriate', () => {
+            expect(findAlert().exists()).toBe(true);
+            expect(findAlert().text()).toBe(errorTitle);
+          });
+        });
+      });
+    });
+
+    describe.each`
+      deleteType                | successTitle                   | errorTitle
+      ${'handleSingleDelete'}   | ${DELETE_TAG_SUCCESS_MESSAGE}  | ${DELETE_TAG_ERROR_MESSAGE}
+      ${'handleMultipleDelete'} | ${DELETE_TAGS_SUCCESS_MESSAGE} | ${DELETE_TAGS_ERROR_MESSAGE}
+    `(
+      'when the user is not an admin alert behaves correctly on $deleteType',
+      ({ deleteType, successTitle, errorTitle }) => {
+        beforeEach(() => {
+          store.commit('SET_INITIAL_STATE', { ...config });
+        });
+
+        describe('when delete is successful', () => {
+          beforeEach(() => {
+            dispatchSpy.mockResolvedValue();
+            mountComponent();
+            return wrapper.vm[deleteType]('foo');
+          });
+
+          it('alert exist and text is appropriate', () => {
+            expect(findAlert().exists()).toBe(true);
+            expect(findAlert().text()).toBe(successTitle);
+          });
+        });
+
+        describe('when delete is not successful', () => {
+          beforeEach(() => {
+            mountComponent();
+            dispatchSpy.mockRejectedValue();
+            return wrapper.vm[deleteType]('foo');
+          });
+
+          it('alert exist and text is appropriate', () => {
+            expect(findAlert().exists()).toBe(true);
+            expect(findAlert().text()).toBe(errorTitle);
+          });
+        });
+      },
+    );
+  });
 });
diff --git a/spec/frontend/registry/explorer/pages/index_spec.js b/spec/frontend/registry/explorer/pages/index_spec.js
index f52e7d67866..b558727ed5e 100644
--- a/spec/frontend/registry/explorer/pages/index_spec.js
+++ b/spec/frontend/registry/explorer/pages/index_spec.js
@@ -1,62 +1,26 @@
 import { shallowMount } from '@vue/test-utils';
-import { GlAlert, GlSprintf, GlLink } from '@gitlab/ui';
 import component from '~/registry/explorer/pages/index.vue';
 import store from '~/registry/explorer/stores/';
 
 describe('List Page', () => {
   let wrapper;
-  let dispatchSpy;
 
   const findRouterView = () => wrapper.find({ ref: 'router-view' });
-  const findAlert = () => wrapper.find(GlAlert);
-  const findLink = () => wrapper.find(GlLink);
 
   const mountComponent = () => {
     wrapper = shallowMount(component, {
       store,
       stubs: {
         RouterView: true,
-        GlSprintf,
       },
     });
   };
 
   beforeEach(() => {
-    dispatchSpy = jest.spyOn(store, 'dispatch');
     mountComponent();
   });
 
   it('has a router view', () => {
     expect(findRouterView().exists()).toBe(true);
   });
-
-  describe('garbageCollectionTip alert', () => {
-    beforeEach(() => {
-      store.dispatch('setInitialState', { isAdmin: true, garbageCollectionHelpPagePath: 'foo' });
-      store.dispatch('setShowGarbageCollectionTip', true);
-    });
-
-    afterEach(() => {
-      store.dispatch('setInitialState', {});
-      store.dispatch('setShowGarbageCollectionTip', false);
-    });
-
-    it('is visible when the user is an admin and the user performed a delete action', () => {
-      expect(findAlert().exists()).toBe(true);
-    });
-
-    it('on dismiss disappears ', () => {
-      findAlert().vm.$emit('dismiss');
-      expect(dispatchSpy).toHaveBeenCalledWith('setShowGarbageCollectionTip', false);
-      return wrapper.vm.$nextTick().then(() => {
-        expect(findAlert().exists()).toBe(false);
-      });
-    });
-
-    it('contains a link to the docs', () => {
-      const link = findLink();
-      expect(link.exists()).toBe(true);
-      expect(link.attributes('href')).toBe(store.state.config.garbageCollectionHelpPagePath);
-    });
-  });
 });
diff --git a/spec/frontend/registry/explorer/pages/list_spec.js b/spec/frontend/registry/explorer/pages/list_spec.js
index f69b849521d..97742b9e9b3 100644
--- a/spec/frontend/registry/explorer/pages/list_spec.js
+++ b/spec/frontend/registry/explorer/pages/list_spec.js
@@ -1,47 +1,53 @@
-import VueRouter from 'vue-router';
-import { shallowMount, createLocalVue } from '@vue/test-utils';
-import { GlPagination, GlSkeletonLoader, GlSprintf, GlAlert } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import { GlSkeletonLoader, GlSprintf, GlAlert, GlSearchBoxByClick } from '@gitlab/ui';
 import Tracking from '~/tracking';
+import waitForPromises from 'helpers/wait_for_promises';
 import component from '~/registry/explorer/pages/list.vue';
 import QuickstartDropdown from '~/registry/explorer/components/quickstart_dropdown.vue';
 import GroupEmptyState from '~/registry/explorer/components/group_empty_state.vue';
 import ProjectEmptyState from '~/registry/explorer/components/project_empty_state.vue';
 import ProjectPolicyAlert from '~/registry/explorer/components/project_policy_alert.vue';
-import store from '~/registry/explorer/stores/';
-import { SET_MAIN_LOADING } from '~/registry/explorer/stores/mutation_types/';
+import ImageList from '~/registry/explorer/components/image_list.vue';
+import { createStore } from '~/registry/explorer/stores/';
+import {
+  SET_MAIN_LOADING,
+  SET_IMAGES_LIST_SUCCESS,
+  SET_PAGINATION,
+  SET_INITIAL_STATE,
+} from '~/registry/explorer/stores/mutation_types/';
 import {
   DELETE_IMAGE_SUCCESS_MESSAGE,
   DELETE_IMAGE_ERROR_MESSAGE,
+  IMAGE_REPOSITORY_LIST_LABEL,
+  SEARCH_PLACEHOLDER_TEXT,
 } from '~/registry/explorer/constants';
 import { imagesListResponse } from '../mock_data';
 import { GlModal, GlEmptyState } from '../stubs';
 import { $toast } from '../../shared/mocks';
 
-const localVue = createLocalVue();
-localVue.use(VueRouter);
-
 describe('List Page', () => {
   let wrapper;
   let dispatchSpy;
+  let store;
 
-  const findDeleteBtn = () => wrapper.find({ ref: 'deleteImageButton' });
   const findDeleteModal = () => wrapper.find(GlModal);
   const findSkeletonLoader = () => wrapper.find(GlSkeletonLoader);
   const findImagesList = () => wrapper.find({ ref: 'imagesList' });
-  const findRowItems = () => wrapper.findAll({ ref: 'rowItem' });
+
   const findEmptyState = () => wrapper.find(GlEmptyState);
-  const findDetailsLink = () => wrapper.find({ ref: 'detailsLink' });
-  const findClipboardButton = () => wrapper.find({ ref: 'clipboardButton' });
-  const findPagination = () => wrapper.find(GlPagination);
+
   const findQuickStartDropdown = () => wrapper.find(QuickstartDropdown);
   const findProjectEmptyState = () => wrapper.find(ProjectEmptyState);
   const findGroupEmptyState = () => wrapper.find(GroupEmptyState);
   const findProjectPolicyAlert = () => wrapper.find(ProjectPolicyAlert);
   const findDeleteAlert = () => wrapper.find(GlAlert);
+  const findImageList = () => wrapper.find(ImageList);
+  const findListHeader = () => wrapper.find('[data-testid="listHeader"]');
+  const findSearchBox = () => wrapper.find(GlSearchBoxByClick);
+  const findEmptySearchMessage = () => wrapper.find('[data-testid="emptySearch"]');
 
-  beforeEach(() => {
+  const mountComponent = ({ mocks } = {}) => {
     wrapper = shallowMount(component, {
-      localVue,
       store,
       stubs: {
         GlModal,
@@ -50,10 +56,20 @@ describe('List Page', () => {
       },
       mocks: {
         $toast,
+        $route: {
+          name: 'foo',
+        },
+        ...mocks,
       },
     });
+  };
+
+  beforeEach(() => {
+    store = createStore();
     dispatchSpy = jest.spyOn(store, 'dispatch');
-    store.dispatch('receiveImagesListSuccess', imagesListResponse);
+    dispatchSpy.mockResolvedValue();
+    store.commit(SET_IMAGES_LIST_SUCCESS, imagesListResponse.data);
+    store.commit(SET_PAGINATION, imagesListResponse.headers);
   });
 
   afterEach(() => {
@@ -61,17 +77,38 @@ describe('List Page', () => {
   });
 
   describe('Expiration policy notification', () => {
+    beforeEach(() => {
+      mountComponent();
+    });
     it('shows up on project page', () => {
       expect(findProjectPolicyAlert().exists()).toBe(true);
     });
     it('does show up on group page', () => {
-      store.dispatch('setInitialState', { isGroupPage: true });
+      store.commit(SET_INITIAL_STATE, { isGroupPage: true });
       return wrapper.vm.$nextTick().then(() => {
         expect(findProjectPolicyAlert().exists()).toBe(false);
       });
     });
   });
 
+  describe('API calls', () => {
+    it.each`
+      imageList                  | name         | called
+      ${[]}                      | ${'foo'}     | ${['requestImagesList']}
+      ${imagesListResponse.data} | ${undefined} | ${['requestImagesList']}
+      ${imagesListResponse.data} | ${'foo'}     | ${undefined}
+    `(
+      'with images equal $imageList and name $name dispatch calls $called',
+      ({ imageList, name, called }) => {
+        store.commit(SET_IMAGES_LIST_SUCCESS, imageList);
+        dispatchSpy.mockClear();
+        mountComponent({ mocks: { $route: { name } } });
+
+        expect(dispatchSpy.mock.calls[0]).toEqual(called);
+      },
+    );
+  });
+
   describe('connection error', () => {
     const config = {
       characterError: true,
@@ -79,12 +116,13 @@ describe('List Page', () => {
       helpPagePath: 'bar',
     };
 
-    beforeAll(() => {
-      store.dispatch('setInitialState', config);
+    beforeEach(() => {
+      store.commit(SET_INITIAL_STATE, config);
+      mountComponent();
     });
 
-    afterAll(() => {
-      store.dispatch('setInitialState', {});
+    afterEach(() => {
+      store.commit(SET_INITIAL_STATE, {});
     });
 
     it('should show an empty state', () => {
@@ -106,9 +144,12 @@ describe('List Page', () => {
   });
 
   describe('isLoading is true', () => {
-    beforeAll(() => store.commit(SET_MAIN_LOADING, true));
+    beforeEach(() => {
+      store.commit(SET_MAIN_LOADING, true);
+      mountComponent();
+    });
 
-    afterAll(() => store.commit(SET_MAIN_LOADING, false));
+    afterEach(() => store.commit(SET_MAIN_LOADING, false));
 
     it('shows the skeleton loader', () => {
       expect(findSkeletonLoader().exists()).toBe(true);
@@ -125,7 +166,9 @@ describe('List Page', () => {
 
   describe('list is empty', () => {
     beforeEach(() => {
-      store.dispatch('receiveImagesListSuccess', { data: [] });
+      store.commit(SET_IMAGES_LIST_SUCCESS, []);
+      mountComponent();
+      return waitForPromises();
     });
 
     it('quick start is not visible', () => {
@@ -137,12 +180,13 @@ describe('List Page', () => {
     });
 
     describe('is group page is true', () => {
-      beforeAll(() => {
-        store.dispatch('setInitialState', { isGroupPage: true });
+      beforeEach(() => {
+        store.commit(SET_INITIAL_STATE, { isGroupPage: true });
+        mountComponent();
       });
 
-      afterAll(() => {
-        store.dispatch('setInitialState', { isGroupPage: undefined });
+      afterEach(() => {
+        store.commit(SET_INITIAL_STATE, { isGroupPage: undefined });
       });
 
       it('group empty state is visible', () => {
@@ -152,50 +196,39 @@ describe('List Page', () => {
       it('quick start is not visible', () => {
         expect(findQuickStartDropdown().exists()).toBe(false);
       });
+
+      it('list header is not visible', () => {
+        expect(findListHeader().exists()).toBe(false);
+      });
     });
   });
 
   describe('list is not empty', () => {
-    it('quick start is visible', () => {
-      expect(findQuickStartDropdown().exists()).toBe(true);
-    });
-
-    describe('listElement', () => {
-      let listElements;
-      let firstElement;
-
+    describe('unfiltered state', () => {
       beforeEach(() => {
-        listElements = findRowItems();
-        [firstElement] = store.state.images;
+        mountComponent();
       });
 
-      it('contains one list element for each image', () => {
-        expect(listElements.length).toBe(store.state.images.length);
+      it('quick start is visible', () => {
+        expect(findQuickStartDropdown().exists()).toBe(true);
       });
 
-      it('contains a link to the details page', () => {
-        const link = findDetailsLink();
-        expect(link.html()).toContain(firstElement.path);
-        expect(link.props('to').name).toBe('details');
+      it('list component is visible', () => {
+        expect(findImageList().exists()).toBe(true);
       });
 
-      it('contains a clipboard button', () => {
-        const button = findClipboardButton();
-        expect(button.exists()).toBe(true);
-        expect(button.props('text')).toBe(firstElement.location);
-        expect(button.props('title')).toBe(firstElement.location);
+      it('list header is  visible', () => {
+        const header = findListHeader();
+        expect(header.exists()).toBe(true);
+        expect(header.text()).toBe(IMAGE_REPOSITORY_LIST_LABEL);
       });
 
       describe('delete image', () => {
-        it('should be possible to delete a repo', () => {
-          const deleteBtn = findDeleteBtn();
-          expect(deleteBtn.exists()).toBe(true);
-        });
-
+        const itemToDelete = { path: 'bar' };
         it('should call deleteItem when confirming deletion', () => {
           dispatchSpy.mockResolvedValue();
-          findDeleteBtn().vm.$emit('click');
-          expect(wrapper.vm.itemToDelete).not.toEqual({});
+          findImageList().vm.$emit('delete', itemToDelete);
+          expect(wrapper.vm.itemToDelete).toEqual(itemToDelete);
           findDeleteModal().vm.$emit('ok');
           expect(store.dispatch).toHaveBeenCalledWith(
             'requestDeleteImage',
@@ -205,8 +238,8 @@ describe('List Page', () => {
 
         it('should show a success alert when delete request is successful', () => {
           dispatchSpy.mockResolvedValue();
-          findDeleteBtn().vm.$emit('click');
-          expect(wrapper.vm.itemToDelete).not.toEqual({});
+          findImageList().vm.$emit('delete', itemToDelete);
+          expect(wrapper.vm.itemToDelete).toEqual(itemToDelete);
           return wrapper.vm.handleDeleteImage().then(() => {
             const alert = findDeleteAlert();
             expect(alert.exists()).toBe(true);
@@ -218,8 +251,8 @@ describe('List Page', () => {
 
         it('should show an error alert when delete request fails', () => {
           dispatchSpy.mockRejectedValue();
-          findDeleteBtn().vm.$emit('click');
-          expect(wrapper.vm.itemToDelete).not.toEqual({});
+          findImageList().vm.$emit('delete', itemToDelete);
+          expect(wrapper.vm.itemToDelete).toEqual(itemToDelete);
           return wrapper.vm.handleDeleteImage().then(() => {
             const alert = findDeleteAlert();
             expect(alert.exists()).toBe(true);
@@ -229,71 +262,93 @@ describe('List Page', () => {
           });
         });
       });
+    });
 
-      describe('pagination', () => {
-        it('exists', () => {
-          expect(findPagination().exists()).toBe(true);
-        });
+    describe('search', () => {
+      it('has a search box element', () => {
+        mountComponent();
+        const searchBox = findSearchBox();
+        expect(searchBox.exists()).toBe(true);
+        expect(searchBox.attributes('placeholder')).toBe(SEARCH_PLACEHOLDER_TEXT);
+      });
 
-        it('is wired to the correct pagination props', () => {
-          const pagination = findPagination();
-          expect(pagination.props('perPage')).toBe(store.state.pagination.perPage);
-          expect(pagination.props('totalItems')).toBe(store.state.pagination.total);
-          expect(pagination.props('value')).toBe(store.state.pagination.page);
+      it('performs a search', () => {
+        mountComponent();
+        findSearchBox().vm.$emit('submit', 'foo');
+        expect(store.dispatch).toHaveBeenCalledWith('requestImagesList', {
+          name: 'foo',
         });
+      });
 
-        it('fetch the data from the API when the v-model changes', () => {
-          dispatchSpy.mockReturnValue();
-          wrapper.setData({ currentPage: 2 });
-          return wrapper.vm.$nextTick().then(() => {
-            expect(store.dispatch).toHaveBeenCalledWith('requestImagesList', { page: 2 });
-          });
+      it('when search result is empty displays an empty search message', () => {
+        mountComponent();
+        store.commit(SET_IMAGES_LIST_SUCCESS, []);
+        return wrapper.vm.$nextTick().then(() => {
+          expect(findEmptySearchMessage().exists()).toBe(true);
         });
       });
     });
 
-    describe('modal', () => {
-      it('exists', () => {
-        expect(findDeleteModal().exists()).toBe(true);
-      });
-
-      it('contains a description with the path of the item to delete', () => {
-        wrapper.setData({ itemToDelete: { path: 'foo' } });
-        return wrapper.vm.$nextTick().then(() => {
-          expect(findDeleteModal().html()).toContain('foo');
+    describe('pagination', () => {
+      it('pageChange event triggers the appropriate store function', () => {
+        mountComponent();
+        findImageList().vm.$emit('pageChange', 2);
+        expect(store.dispatch).toHaveBeenCalledWith('requestImagesList', {
+          pagination: { page: 2 },
+          name: wrapper.vm.search,
         });
       });
     });
+  });
 
-    describe('tracking', () => {
-      const testTrackingCall = action => {
-        expect(Tracking.event).toHaveBeenCalledWith(undefined, action, {
-          label: 'registry_repository_delete',
-        });
-      };
+  describe('modal', () => {
+    beforeEach(() => {
+      mountComponent();
+    });
 
-      beforeEach(() => {
-        jest.spyOn(Tracking, 'event');
-        dispatchSpy.mockResolvedValue();
-      });
+    it('exists', () => {
+      expect(findDeleteModal().exists()).toBe(true);
+    });
 
-      it('send an event when delete button is clicked', () => {
-        const deleteBtn = findDeleteBtn();
-        deleteBtn.vm.$emit('click');
-        testTrackingCall('click_button');
+    it('contains a description with the path of the item to delete', () => {
+      wrapper.setData({ itemToDelete: { path: 'foo' } });
+      return wrapper.vm.$nextTick().then(() => {
+        expect(findDeleteModal().html()).toContain('foo');
       });
+    });
+  });
 
-      it('send an event when cancel is pressed on modal', () => {
-        const deleteModal = findDeleteModal();
-        deleteModal.vm.$emit('cancel');
-        testTrackingCall('cancel_delete');
-      });
+  describe('tracking', () => {
+    beforeEach(() => {
+      mountComponent();
+    });
 
-      it('send an event when confirm is clicked on modal', () => {
-        const deleteModal = findDeleteModal();
-        deleteModal.vm.$emit('ok');
-        testTrackingCall('confirm_delete');
+    const testTrackingCall = action => {
+      expect(Tracking.event).toHaveBeenCalledWith(undefined, action, {
+        label: 'registry_repository_delete',
       });
+    };
+
+    beforeEach(() => {
+      jest.spyOn(Tracking, 'event');
+      dispatchSpy.mockResolvedValue();
+    });
+
+    it('send an event when delete button is clicked', () => {
+      findImageList().vm.$emit('delete', {});
+      testTrackingCall('click_button');
+    });
+
+    it('send an event when cancel is pressed on modal', () => {
+      const deleteModal = findDeleteModal();
+      deleteModal.vm.$emit('cancel');
+      testTrackingCall('cancel_delete');
+    });
+
+    it('send an event when confirm is clicked on modal', () => {
+      const deleteModal = findDeleteModal();
+      deleteModal.vm.$emit('ok');
+      testTrackingCall('confirm_delete');
     });
   });
 });
diff --git a/spec/frontend/registry/explorer/stores/actions_spec.js b/spec/frontend/registry/explorer/stores/actions_spec.js
index 58f61a0e8c2..15f9db90910 100644
--- a/spec/frontend/registry/explorer/stores/actions_spec.js
+++ b/spec/frontend/registry/explorer/stores/actions_spec.js
@@ -191,7 +191,10 @@ describe('Actions RegistryExplorer Store', () => {
         {
           tagsPagination: {},
         },
-        [{ type: types.SET_MAIN_LOADING, payload: true }],
+        [
+          { type: types.SET_MAIN_LOADING, payload: true },
+          { type: types.SET_MAIN_LOADING, payload: false },
+        ],
         [
           {
             type: 'setShowGarbageCollectionTip',
@@ -220,8 +223,7 @@ describe('Actions RegistryExplorer Store', () => {
           { type: types.SET_MAIN_LOADING, payload: false },
         ],
         [],
-        done,
-      );
+      ).catch(() => done());
     });
   });
 
@@ -241,7 +243,10 @@ describe('Actions RegistryExplorer Store', () => {
         {
           tagsPagination: {},
         },
-        [{ type: types.SET_MAIN_LOADING, payload: true }],
+        [
+          { type: types.SET_MAIN_LOADING, payload: true },
+          { type: types.SET_MAIN_LOADING, payload: false },
+        ],
         [
           {
             type: 'setShowGarbageCollectionTip',
@@ -273,8 +278,7 @@ describe('Actions RegistryExplorer Store', () => {
           { type: types.SET_MAIN_LOADING, payload: false },
         ],
         [],
-        done,
-      );
+      ).catch(() => done());
     });
   });
 
@@ -311,9 +315,7 @@ describe('Actions RegistryExplorer Store', () => {
           { type: types.SET_MAIN_LOADING, payload: false },
         ],
         [],
-      ).catch(() => {
-        done();
-      });
+      ).catch(() => done());
     });
   });
 });
diff --git a/spec/frontend/registry/explorer/stubs.js b/spec/frontend/registry/explorer/stubs.js
index 2c2c7587af9..0e178abfbed 100644
--- a/spec/frontend/registry/explorer/stubs.js
+++ b/spec/frontend/registry/explorer/stubs.js
@@ -9,3 +9,8 @@ export const GlEmptyState = {
   template: '<div><slot name="description"></slot></div>',
   name: 'GlEmptyStateSTub',
 };
+
+export const RouterLink = {
+  template: `<div><slot></slot></div>`,
+  props: ['to'],
+};
diff --git a/spec/frontend/registry/settings/store/getters_spec.js b/spec/frontend/registry/settings/store/getters_spec.js
index 944057ebc9f..b781d09466c 100644
--- a/spec/frontend/registry/settings/store/getters_spec.js
+++ b/spec/frontend/registry/settings/store/getters_spec.js
@@ -4,9 +4,12 @@ import { formOptions } from '../../shared/mock_data';
 
 describe('Getters registry settings store', () => {
   const settings = {
+    enabled: true,
     cadence: 'foo',
     keep_n: 'bar',
     older_than: 'baz',
+    name_regex: 'name-foo',
+    name_regex_keep: 'name-keep-bar',
   };
 
   describe.each`
@@ -29,6 +32,17 @@ describe('Getters registry settings store', () => {
     });
   });
 
+  describe('getSettings', () => {
+    it('returns the content of settings', () => {
+      const computedGetters = {
+        getCadence: settings.cadence,
+        getOlderThan: settings.older_than,
+        getKeepN: settings.keep_n,
+      };
+      expect(getters.getSettings({ settings }, computedGetters)).toEqual(settings);
+    });
+  });
+
   describe('getIsEdited', () => {
     it('returns false when original is equal to settings', () => {
       const same = { foo: 'bar' };
diff --git a/spec/frontend/registry/shared/components/__snapshots__/expiration_policy_fields_spec.js.snap b/spec/frontend/registry/shared/components/__snapshots__/expiration_policy_fields_spec.js.snap
index 6e7bc0491ce..a9034b81d2f 100644
--- a/spec/frontend/registry/shared/components/__snapshots__/expiration_policy_fields_spec.js.snap
+++ b/spec/frontend/registry/shared/components/__snapshots__/expiration_policy_fields_spec.js.snap
@@ -117,11 +117,11 @@ exports[`Expiration Policy Form renders 1`] = `
   <gl-form-group-stub
     id="expiration-policy-name-matching-group"
     invalid-feedback="The value of this input should be less than 255 characters"
-    label="Docker tags with names matching this regex pattern will expire:"
     label-align="right"
     label-cols="3"
     label-for="expiration-policy-name-matching"
   >
+     
     <gl-form-textarea-stub
       disabled="true"
       id="expiration-policy-name-matching"
@@ -130,5 +130,21 @@ exports[`Expiration Policy Form renders 1`] = `
       value=""
     />
   </gl-form-group-stub>
+  <gl-form-group-stub
+    id="expiration-policy-keep-name-group"
+    invalid-feedback="The value of this input should be less than 255 characters"
+    label-align="right"
+    label-cols="3"
+    label-for="expiration-policy-keep-name"
+  >
+     
+    <gl-form-textarea-stub
+      disabled="true"
+      id="expiration-policy-keep-name"
+      placeholder=""
+      trim=""
+      value=""
+    />
+  </gl-form-group-stub>
 </div>
 `;
diff --git a/spec/frontend/registry/shared/components/expiration_policy_fields_spec.js b/spec/frontend/registry/shared/components/expiration_policy_fields_spec.js
index 3782bfeaac4..4825351a6d3 100644
--- a/spec/frontend/registry/shared/components/expiration_policy_fields_spec.js
+++ b/spec/frontend/registry/shared/components/expiration_policy_fields_spec.js
@@ -40,12 +40,13 @@ describe('Expiration Policy Form', () => {
   });
 
   describe.each`
-    elementName        | modelName       | value    | disabledByToggle
-    ${'toggle'}        | ${'enabled'}    | ${true}  | ${'not disabled'}
-    ${'interval'}      | ${'older_than'} | ${'foo'} | ${'disabled'}
-    ${'schedule'}      | ${'cadence'}    | ${'foo'} | ${'disabled'}
-    ${'latest'}        | ${'keep_n'}     | ${'foo'} | ${'disabled'}
-    ${'name-matching'} | ${'name_regex'} | ${'foo'} | ${'disabled'}
+    elementName        | modelName            | value    | disabledByToggle
+    ${'toggle'}        | ${'enabled'}         | ${true}  | ${'not disabled'}
+    ${'interval'}      | ${'older_than'}      | ${'foo'} | ${'disabled'}
+    ${'schedule'}      | ${'cadence'}         | ${'foo'} | ${'disabled'}
+    ${'latest'}        | ${'keep_n'}          | ${'foo'} | ${'disabled'}
+    ${'name-matching'} | ${'name_regex'}      | ${'foo'} | ${'disabled'}
+    ${'keep-name'}     | ${'name_regex_keep'} | ${'bar'} | ${'disabled'}
   `(
     `${FORM_ELEMENTS_ID_PREFIX}-$elementName form element`,
     ({ elementName, modelName, value, disabledByToggle }) => {
@@ -118,21 +119,26 @@ describe('Expiration Policy Form', () => {
       ${'schedule'}
       ${'latest'}
       ${'name-matching'}
+      ${'keep-name'}
     `(`${FORM_ELEMENTS_ID_PREFIX}-$elementName is disabled`, ({ elementName }) => {
       expect(findFormElements(elementName).attributes('disabled')).toBe('true');
     });
   });
 
-  describe('form validation', () => {
+  describe.each`
+    modelName            | elementName        | stateVariable
+    ${'name_regex'}      | ${'name-matching'} | ${'nameRegexState'}
+    ${'name_regex_keep'} | ${'keep-name'}     | ${'nameKeepRegexState'}
+  `('regex textarea validation', ({ modelName, elementName, stateVariable }) => {
     describe(`when name regex is longer than ${NAME_REGEX_LENGTH}`, () => {
       const invalidString = new Array(NAME_REGEX_LENGTH + 2).join(',');
 
       beforeEach(() => {
-        mountComponent({ value: { name_regex: invalidString } });
+        mountComponent({ value: { [modelName]: invalidString } });
       });
 
-      it('nameRegexState is false', () => {
-        expect(wrapper.vm.nameRegexState).toBe(false);
+      it(`${stateVariable} is false`, () => {
+        expect(wrapper.vm.textAreaState[stateVariable]).toBe(false);
       });
 
       it('emit the @invalidated event', () => {
@@ -141,17 +147,20 @@ describe('Expiration Policy Form', () => {
     });
 
     it('if the user did not type validation is null', () => {
-      mountComponent({ value: { name_regex: '' } });
+      mountComponent({ value: { [modelName]: '' } });
       return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.vm.nameRegexState).toBe(null);
+        expect(wrapper.vm.textAreaState[stateVariable]).toBe(null);
         expect(wrapper.emitted('validated')).toBeTruthy();
       });
     });
 
     it(`if the user typed and is less than ${NAME_REGEX_LENGTH} state is true`, () => {
-      mountComponent({ value: { name_regex: 'foo' } });
+      mountComponent({ value: { [modelName]: 'foo' } });
       return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.vm.nameRegexState).toBe(true);
+        const formGroup = findFormGroup(elementName);
+        const formElement = findFormElements(elementName, formGroup);
+        expect(formGroup.attributes('state')).toBeTruthy();
+        expect(formElement.attributes('state')).toBeTruthy();
       });
     });
   });