Extract image list to own component

- new component
- wire component
- unit tests

app/assets/javascripts/registry/explorer/components/image_list.vue

+<script>
+import { GlPagination, GlTooltipDirective, GlDeprecatedButton, GlIcon } from '@gitlab/ui';
+import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
+
+import {
+  ASYNC_DELETE_IMAGE_ERROR_MESSAGE,
+  LIST_DELETE_BUTTON_DISABLED,
+  REMOVE_REPOSITORY_LABEL,
+  ROW_SCHEDULED_FOR_DELETION,
+} from '../constants';
+
+export default {
+  name: 'ImageList',
+  components: {
+    GlPagination,
+    ClipboardButton,
+    GlDeprecatedButton,
+    GlIcon,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  props: {
+    images: {
+      type: Array,
+      required: true,
+    },
+    pagination: {
+      type: Object,
+      required: true,
+    },
+  },
+  i18n: {
+    LIST_DELETE_BUTTON_DISABLED,
+    REMOVE_REPOSITORY_LABEL,
+    ROW_SCHEDULED_FOR_DELETION,
+    ASYNC_DELETE_IMAGE_ERROR_MESSAGE,
+  },
+  computed: {
+    currentPage: {
+      get() {
+        return this.pagination.page;
+      },
+      set(page) {
+        this.$emit('pageChange', page);
+      },
+    },
+  },
+  methods: {
+    encodeListItem(item) {
+      const params = JSON.stringify({ name: item.path, tags_path: item.tags_path, id: item.id });
+      return window.btoa(params);
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="gl-display-flex gl-flex-direction-column">
+    <div
+      v-for="(listItem, index) in images"
+      :key="index"
+      v-gl-tooltip="{
+        placement: 'left',
+        disabled: !listItem.deleting,
+        title: $options.i18n.ROW_SCHEDULED_FOR_DELETION,
+      }"
+      data-testid="rowItem"
+    >
+      <div
+        class="gl-display-flex gl-justify-content-space-between gl-align-items-center gl-py-2 gl-px-1 border-bottom"
+        :class="{ 'border-top': index === 0, 'disabled-content': listItem.deleting }"
+      >
+        <div class="gl-display-flex gl-align-items-center">
+          <router-link
+            data-testid="detailsLink"
+            :to="{ name: 'details', params: { id: encodeListItem(listItem) } }"
+          >
+            {{ listItem.path }}
+          </router-link>
+          <clipboard-button
+            v-if="listItem.location"
+            :disabled="listItem.deleting"
+            :text="listItem.location"
+            :title="listItem.location"
+            css-class="btn-default btn-transparent btn-clipboard"
+          />
+          <gl-icon
+            v-if="listItem.failedDelete"
+            v-gl-tooltip
+            :title="$options.i18n.ASYNC_DELETE_IMAGE_ERROR_MESSAGE"
+            name="warning"
+            class="text-warning align-middle"
+          />
+        </div>
+        <div
+          v-gl-tooltip="{ disabled: listItem.destroy_path }"
+          class="d-none d-sm-block"
+          :title="$options.i18n.LIST_DELETE_BUTTON_DISABLED"
+        >
+          <gl-deprecated-button
+            v-gl-tooltip
+            data-testid="deleteImageButton"
+            :disabled="!listItem.destroy_path || listItem.deleting"
+            :title="$options.i18n.REMOVE_REPOSITORY_LABEL"
+            :aria-label="$options.i18n.REMOVE_REPOSITORY_LABEL"
+            class="btn-inverted"
+            variant="danger"
+            @click="$emit('delete', listItem)"
+          >
+            <gl-icon name="remove" />
+          </gl-deprecated-button>
+        </div>
+      </div>
+    </div>
+    <gl-pagination
+      v-model="currentPage"
+      :per-page="pagination.perPage"
+      :total-items="pagination.total"
+      align="center"
+      class="w-100 gl-mt-2"
+    />
+  </div>
+</template>

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

@@ -37,6 +37,15 @@ export const DELETE_IMAGE_SUCCESS_MESSAGE = s__(
   'ContainerRegistry|%{title} was successfully scheduled for deletion',
 );
 
+export const IMAGE_REPOSITORY_LIST_LABEL = s__('ContainerRegistry|Image Repositories');
+
+export const SEARCH_PLACEHOLDER_TEXT = s__('ContainerRegistry|Filter by name');
+
+export const EMPTY_RESULT_TITLE = s__('ContainerRegistry|Sorry, your filter produced no results.');
+export const EMPTY_RESULT_MESSAGE = s__(
+  'ContainerRegistry|To widen your search, change or remove the filters above.',
+);
+
 // Image details page
 
 export const DETAILS_PAGE_TITLE = s__('ContainerRegistry|%{imageName} tags');

app/assets/javascripts/registry/explorer/pages/list.vue

@@ -2,53 +2,52 @@
 import { mapState, mapActions } from 'vuex';
 import {
   GlEmptyState,
-  GlPagination,
   GlTooltipDirective,
-  GlDeprecatedButton,
-  GlIcon,
   GlModal,
   GlSprintf,
   GlLink,
   GlAlert,
   GlSkeletonLoader,
+  GlSearchBoxByClick,
 } from '@gitlab/ui';
 import Tracking from '~/tracking';
-import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
+
 import ProjectEmptyState from '../components/project_empty_state.vue';
 import GroupEmptyState from '../components/group_empty_state.vue';
 import ProjectPolicyAlert from '../components/project_policy_alert.vue';
 import QuickstartDropdown from '../components/quickstart_dropdown.vue';
+import ImageList from '../components/image_list.vue';
+
 import {
   DELETE_IMAGE_SUCCESS_MESSAGE,
   DELETE_IMAGE_ERROR_MESSAGE,
-  ASYNC_DELETE_IMAGE_ERROR_MESSAGE,
   CONTAINER_REGISTRY_TITLE,
   CONNECTION_ERROR_TITLE,
   CONNECTION_ERROR_MESSAGE,
   LIST_INTRO_TEXT,
-  LIST_DELETE_BUTTON_DISABLED,
-  REMOVE_REPOSITORY_LABEL,
   REMOVE_REPOSITORY_MODAL_TEXT,
-  ROW_SCHEDULED_FOR_DELETION,
+  REMOVE_REPOSITORY_LABEL,
+  SEARCH_PLACEHOLDER_TEXT,
+  IMAGE_REPOSITORY_LIST_LABEL,
+  EMPTY_RESULT_TITLE,
+  EMPTY_RESULT_MESSAGE,
 } from '../constants';
 
 export default {
   name: 'RegistryListApp',
   components: {
     GlEmptyState,
-    GlPagination,
     ProjectEmptyState,
     GroupEmptyState,
     ProjectPolicyAlert,
-    ClipboardButton,
     QuickstartDropdown,
-    GlDeprecatedButton,
-    GlIcon,
+    ImageList,
     GlModal,
     GlSprintf,
     GlLink,
     GlAlert,
     GlSkeletonLoader,
+    GlSearchBoxByClick,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -60,20 +59,23 @@ export default {
     height: 40,
   },
   i18n: {
-    containerRegistryTitle: CONTAINER_REGISTRY_TITLE,
-    connectionErrorTitle: CONNECTION_ERROR_TITLE,
-    connectionErrorMessage: CONNECTION_ERROR_MESSAGE,
-    introText: LIST_INTRO_TEXT,
-    deleteButtonDisabled: LIST_DELETE_BUTTON_DISABLED,
-    removeRepositoryLabel: REMOVE_REPOSITORY_LABEL,
-    removeRepositoryModalText: REMOVE_REPOSITORY_MODAL_TEXT,
-    rowScheduledForDeletion: ROW_SCHEDULED_FOR_DELETION,
-    asyncDeleteErrorMessage: ASYNC_DELETE_IMAGE_ERROR_MESSAGE,
+    CONTAINER_REGISTRY_TITLE,
+    CONNECTION_ERROR_TITLE,
+    CONNECTION_ERROR_MESSAGE,
+    LIST_INTRO_TEXT,
+    REMOVE_REPOSITORY_MODAL_TEXT,
+    REMOVE_REPOSITORY_LABEL,
+    SEARCH_PLACEHOLDER_TEXT,
+    IMAGE_REPOSITORY_LIST_LABEL,
+    EMPTY_RESULT_TITLE,
+    EMPTY_RESULT_MESSAGE,
   },
   data() {
     return {
       itemToDelete: {},
       deleteAlertType: null,
+      search: null,
+      isEmpty: false,
     };
   },
   computed: {
@@ -83,14 +85,6 @@ export default {
         label: 'registry_repository_delete',
       };
     },
-    currentPage: {
-      get() {
-        return this.pagination.page;
-      },
-      set(page) {
-        this.requestImagesList({ page });
-      },
-    },
     showQuickStartDropdown() {
       return Boolean(!this.isLoading && !this.config?.isGroupPage && this.images?.length);
     },
@@ -110,8 +104,11 @@ export default {
     ...mapActions(['requestImagesList', 'requestDeleteImage']),
     loadImageList(fromName) {
       if (!fromName || !this.images?.length) {
-        this.requestImagesList();
+        return this.requestImagesList().then(() => {
+          this.isEmpty = this.images.length === 0;
+        });
       }
+      return Promise.resolve();
     },
     deleteImage(item) {
       this.track('click_button');
@@ -128,10 +125,6 @@ export default {
           this.deleteAlertType = 'danger';
         });
     },
-    encodeListItem(item) {
-      const params = JSON.stringify({ name: item.path, tags_path: item.tags_path, id: item.id });
-      return window.btoa(params);
-    },
     dismissDeleteAlert() {
       this.deleteAlertType = null;
       this.itemToDelete = {};
@@ -160,12 +153,12 @@ export default {
 
     <gl-empty-state
       v-if="config.characterError"
-      :title="$options.i18n.connectionErrorTitle"
+      :title="$options.i18n.CONNECTION_ERROR_TITLE"
       :svg-path="config.containersErrorImage"
     >
       <template #description>
         <p>
-          <gl-sprintf :message="$options.i18n.connectionErrorMessage">
+          <gl-sprintf :message="$options.i18n.CONNECTION_ERROR_MESSAGE">
             <template #docLink="{content}">
               <gl-link :href="`${config.helpPagePath}#docker-connection-error`" target="_blank">
                 {{ content }}
@@ -179,11 +172,11 @@ export default {
     <template v-else>
       <div>
         <div class="d-flex justify-content-between align-items-center">
-          <h4>{{ $options.i18n.containerRegistryTitle }}</h4>
+          <h4>{{ $options.i18n.CONTAINER_REGISTRY_TITLE }}</h4>
           <quickstart-dropdown v-if="showQuickStartDropdown" class="d-none d-sm-block" />
         </div>
         <p>
-          <gl-sprintf :message="$options.i18n.introText">
+          <gl-sprintf :message="$options.i18n.LIST_INTRO_TEXT">
             <template #docLink="{content}">
               <gl-link :href="config.helpPagePath" target="_blank">
                 {{ content }}
@@ -207,73 +200,40 @@ export default {
         </gl-skeleton-loader>
       </div>
       <template v-else>
-        <div v-if="images.length" ref="imagesList" class="d-flex flex-column">
-          <div
-            v-for="(listItem, index) in images"
-            :key="index"
-            ref="rowItem"
-            v-gl-tooltip="{
-              placement: 'left',
-              disabled: !listItem.deleting,
-              title: $options.i18n.rowScheduledForDeletion,
-            }"
-          >
-            <div
-              class="d-flex justify-content-between align-items-center py-2 px-1 border-bottom"
-              :class="{ 'border-top': index === 0, 'disabled-content': listItem.deleting }"
-            >
-              <div class="d-felx align-items-center">
-                <router-link
-                  ref="detailsLink"
-                  :to="{ name: 'details', params: { id: encodeListItem(listItem) } }"
-                >
-                  {{ listItem.path }}
-                </router-link>
-                <clipboard-button
-                  v-if="listItem.location"
-                  ref="clipboardButton"
-                  :disabled="listItem.deleting"
-                  :text="listItem.location"
-                  :title="listItem.location"
-                  css-class="btn-default btn-transparent btn-clipboard"
-                />
-                <gl-icon
-                  v-if="listItem.failedDelete"
-                  v-gl-tooltip
-                  :title="$options.i18n.asyncDeleteErrorMessage"
-                  name="warning"
-                  class="text-warning align-middle"
-                />
-              </div>
-              <div
-                v-gl-tooltip="{ disabled: listItem.destroy_path }"
-                class="d-none d-sm-block"
-                :title="$options.i18n.deleteButtonDisabled"
-              >
-                <gl-deprecated-button
-                  ref="deleteImageButton"
-                  v-gl-tooltip
-                  :disabled="!listItem.destroy_path || listItem.deleting"
-                  :title="$options.i18n.removeRepositoryLabel"
-                  :aria-label="$options.i18n.removeRepositoryLabel"
-                  class="btn-inverted"
-                  variant="danger"
-                  @click="deleteImage(listItem)"
-                >
-                  <gl-icon name="remove" />
-                </gl-deprecated-button>
-              </div>
+        <template v-if="!isEmpty">
+          <div class="gl-display-flex gl-p-1" data-testid="listHeader">
+            <div class="gl-flex-fill-1">
+              <h5>{{ $options.i18n.IMAGE_REPOSITORY_LIST_LABEL }}</h5>
+            </div>
+            <div>
+              <gl-search-box-by-click
+                v-model="search"
+                :placeholder="$options.i18n.SEARCH_PLACEHOLDER_TEXT"
+                @submit="requestImagesList({ name: $event })"
+              />
             </div>
           </div>
-          <gl-pagination
-            v-model="currentPage"
-            :per-page="pagination.perPage"
-            :total-items="pagination.total"
-            align="center"
-            class="w-100 mt-2"
+
+          <image-list
+            v-if="images.length"
+            :images="images"
+            :pagination="pagination"
+            @pageChange="requestImagesList({ pagination: { page: $event }, name: search })"
+            @delete="deleteImage"
           />
-        </div>
 
+          <gl-empty-state
+            v-else
+            :svg-path="config.noContainersImage"
+            data-testid="emptySearch"
+            :title="$options.i18n.EMPTY_RESULT_TITLE"
+            class="container-message"
+          >
+            <template #description>
+              {{ $options.i18n.EMPTY_RESULT_MESSAGE }}
+            </template>
+          </gl-empty-state>
+        </template>
         <template v-else>
           <project-empty-state v-if="!config.isGroupPage" />
           <group-empty-state v-else />
@@ -287,9 +247,9 @@ export default {
         @ok="handleDeleteImage"
         @cancel="track('cancel_delete')"
       >
-        <template #modal-title>{{ $options.i18n.removeRepositoryLabel }}</template>
+        <template #modal-title>{{ $options.i18n.REMOVE_REPOSITORY_LABEL }}</template>
         <p>
-          <gl-sprintf :message="$options.i18n.removeRepositoryModalText">
+          <gl-sprintf :message="$options.i18n.REMOVE_REPOSITORY_MODAL_TEXT">
             <template #title>
               <b>{{ itemToDelete.path }}</b>
             </template>

app/assets/javascripts/registry/explorer/stores/actions.js

@@ -23,12 +23,15 @@ export const receiveTagsListSuccess = ({ commit }, { data, headers }) => {
   commit(types.SET_TAGS_PAGINATION, headers);
 };
 
-export const requestImagesList = ({ commit, dispatch, state }, pagination = {}) => {
+export const requestImagesList = (
+  { commit, dispatch, state },
+  { pagination = {}, name = null } = {},
+) => {
   commit(types.SET_MAIN_LOADING, true);
   const { page = DEFAULT_PAGE, perPage = DEFAULT_PAGE_SIZE } = pagination;
 
   return axios
-    .get(state.config.endpoint, { params: { page, per_page: perPage } })
+    .get(state.config.endpoint, { params: { page, per_page: perPage, name } })
     .then(({ data, headers }) => {
       dispatch('receiveImagesListSuccess', { data, headers });
     })

changelogs/unreleased/216122-use-search-to-quickly-find-and-discover-images-hosted-in-the-gitla.yml

+---
+title: Add search bar to container registry image list
+merge_request: 31322
+author:
+type: added

locale/gitlab.pot

@@ -5698,12 +5698,18 @@ msgstr ""
 msgid "ContainerRegistry|Expiration schedule:"
 msgstr ""
 
+msgid "ContainerRegistry|Filter by name"
+msgstr ""
+
 msgid "ContainerRegistry|If you are not already logged in, you need to authenticate to the Container Registry by using your GitLab username and password. If you have %{twofaDocLinkStart}Two-Factor Authentication%{twofaDocLinkEnd} enabled, use a %{personalAccessTokensDocLinkStart}Personal Access Token%{personalAccessTokensDocLinkEnd} instead of a password."
 msgstr ""
 
 msgid "ContainerRegistry|Image ID"
 msgstr ""
 
+msgid "ContainerRegistry|Image Repositories"
+msgstr ""
+
 msgid "ContainerRegistry|Keep and protect the images that matter most."
 msgstr ""
 
@@ -5772,6 +5778,9 @@ msgstr ""
 msgid "ContainerRegistry|Something went wrong while updating the expiration policy."
 msgstr ""
 
+msgid "ContainerRegistry|Sorry, your filter produced no results."
+msgstr ""
+
 msgid "ContainerRegistry|Tag"
 msgstr ""
 
@@ -5823,6 +5832,9 @@ msgstr ""
 msgid "ContainerRegistry|This image repository is scheduled for deletion"
 msgstr ""
 
+msgid "ContainerRegistry|To widen your search, change or remove the filters above."
+msgstr ""
+
 msgid "ContainerRegistry|We are having trouble connecting to Docker, which could be due to an issue with your project name or path. %{docLinkStart}More Information%{docLinkEnd}"
 msgstr ""
 

spec/frontend/registry/explorer/components/image_list_spec.js

+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]]);
+    });
+  });
+});

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,
+};

spec/frontend/registry/explorer/pages/list_spec.js

 import { shallowMount } from '@vue/test-utils';
-import { GlPagination, GlSkeletonLoader, GlSprintf, GlAlert } from '@gitlab/ui';
+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 ImageList from '~/registry/explorer/components/image_list.vue';
 import { createStore } from '~/registry/explorer/stores/';
 import {
   SET_MAIN_LOADING,
@@ -16,9 +18,11 @@ import {
 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, RouterLink } from '../stubs';
+import { GlModal, GlEmptyState } from '../stubs';
 import { $toast } from '../../shared/mocks';
 
 describe('List Page', () => {
@@ -26,20 +30,21 @@ describe('List Page', () => {
   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"]');
 
   const mountComponent = ({ mocks } = {}) => {
     wrapper = shallowMount(component, {
@@ -48,7 +53,6 @@ describe('List Page', () => {
         GlModal,
         GlEmptyState,
         GlSprintf,
-        RouterLink,
       },
       mocks: {
         $toast,
@@ -164,6 +168,7 @@ describe('List Page', () => {
     beforeEach(() => {
       store.commit(SET_IMAGES_LIST_SUCCESS, []);
       mountComponent();
+      return waitForPromises();
     });
 
     it('quick start is not visible', () => {
@@ -191,54 +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', () => {
-    beforeEach(() => {
-      mountComponent();
-    });
-
-    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',
@@ -248,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);
@@ -261,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);
@@ -272,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');
     });
   });
 });