Updated with custom empty message

Displays a custom empty message when no filter results
Updated tests

ee/app/assets/javascripts/packages/list/components/packages_list_app.vue

@@ -18,12 +18,15 @@ export default {
   },
   computed: {
     ...mapState({
-      resourceId: state => state.config.resourceId,
       emptyListIllustration: state => state.config.emptyListIllustration,
       emptyListHelpUrl: state => state.config.emptyListHelpUrl,
-      totalItems: state => state.pagination.total,
+      filterQuery: state => state.filterQuery,
     }),
     emptyListText() {
+      if (this.filterQuery) {
+        return s__('PackageRegistry|To widen your search, change or remove the filters above.');
+      }
+
       return sprintf(
         s__(
           'PackageRegistry|Learn how to %{noPackagesLinkStart}publish and share your packages%{noPackagesLinkEnd} with GitLab.',
@@ -57,6 +60,10 @@ export default {
       this.requestPackagesList();
     },
     emptyStateTitle({ title, type }) {
+      if (this.filterQuery) {
+        return s__('PackageRegistry|Sorry, your filter produced no results');
+      }
+
       if (type) {
         return sprintf(s__('PackageRegistry|There are no %{packageType} packages yet'), {
           packageType: title,

ee/app/assets/javascripts/packages/list/stores/state.js

@@ -43,4 +43,8 @@ export default () => ({
     sort: 'desc',
     orderBy: 'created_at',
   },
+  /**
+   * The search query that is used to filter packages by name
+   */
+  filterQuery: '',
 });

ee/spec/frontend/packages/list/components/packages_list_app_spec.js

@@ -17,9 +17,25 @@ describe('packages_list_app', () => {
   const GlLoadingIcon = { name: 'gl-loading-icon', template: '<div>loading</div>' };
 
   const emptyListHelpUrl = 'helpUrl';
+  const findEmptyState = () => wrapper.find(GlEmptyState);
   const findListComponent = () => wrapper.find(PackageList);
   const findTabComponent = (index = 0) => wrapper.findAll(GlTab).at(index);
 
+  const createStore = (filterQuery = '') => {
+    store = new Vuex.Store({
+      state: {
+        isLoading: false,
+        config: {
+          resourceId: 'project_id',
+          emptyListIllustration: 'helpSvg',
+          emptyListHelpUrl,
+        },
+        filterQuery,
+      },
+    });
+    store.dispatch = jest.fn();
+  };
+
   const mountComponent = () => {
     wrapper = shallowMount(PackageListApp, {
       localVue,
@@ -35,17 +51,7 @@ describe('packages_list_app', () => {
   };
 
   beforeEach(() => {
-    store = new Vuex.Store({
-      state: {
-        isLoading: false,
-        config: {
-          resourceId: 'project_id',
-          emptyListIllustration: 'helpSvg',
-          emptyListHelpUrl,
-        },
-      },
-    });
-    store.dispatch = jest.fn();
+    createStore();
     mountComponent();
   });
 
@@ -73,7 +79,7 @@ describe('packages_list_app', () => {
     });
 
     it('includes the right content on the default tab', () => {
-      const heading = findListComponent().find('h4');
+      const heading = findEmptyState().find('h4');
 
       expect(heading.text()).toBe('There are no packages yet');
     });
@@ -110,4 +116,18 @@ describe('packages_list_app', () => {
       expect(store.dispatch).toHaveBeenCalledWith('requestPackagesList');
     });
   });
+
+  describe('filter without results', () => {
+    beforeEach(() => {
+      createStore('foo');
+      mountComponent();
+    });
+
+    it('should show specific empty message', () => {
+      expect(findEmptyState().text()).toContain('Sorry, your filter produced no results');
+      expect(findEmptyState().text()).toContain(
+        'To widen your search, change or remove the filters above',
+      );
+    });
+  });
 });

locale/gitlab.pot

@@ -14017,6 +14017,9 @@ msgstr ""
 msgid "PackageRegistry|Remove package"
 msgstr ""
 
+msgid "PackageRegistry|Sorry, your filter produced no results"
+msgstr ""
+
 msgid "PackageRegistry|There are no %{packageType} packages yet"
 msgstr ""
 
@@ -14026,6 +14029,9 @@ msgstr ""
 msgid "PackageRegistry|There was a problem fetching the details for this package."
 msgstr ""
 
+msgid "PackageRegistry|To widen your search, change or remove the filters above."
+msgstr ""
+
 msgid "PackageRegistry|Unable to load package"
 msgstr ""