Hide search bar when registry is empty

Changelog: changed

app/assets/javascripts/packages_and_registries/infrastructure_registry/list/components/infrastructure_title.vue

@@ -21,13 +21,17 @@ export default {
     },
   },
   computed: {
-    showModuleCount() {
-      return Number.isInteger(this.count);
+    hasModules() {
+      return Number.isInteger(this.count) && this.count > 0;
     },
     moduleAmountText() {
       return n__(`%d Module`, `%d Modules`, this.count);
     },
     infoMessages() {
+      if (!this.hasModules) {
+        return [];
+      }
+
       return [{ text: this.$options.i18n.LIST_INTRO_TEXT, link: this.helpUrl }];
     },
   },
@@ -43,11 +47,7 @@ export default {
 <template>
   <title-area :title="$options.i18n.LIST_TITLE_TEXT" :info-messages="infoMessages">
     <template #metadata-amount>
-      <metadata-item
-        v-if="showModuleCount"
-        icon="infrastructure-registry"
-        :text="moduleAmountText"
-      />
+      <metadata-item v-if="hasModules" icon="infrastructure-registry" :text="moduleAmountText" />
     </template>
   </title-area>
 </template>

app/assets/javascripts/packages_and_registries/infrastructure_registry/list/components/packages_list_app.vue

@@ -99,7 +99,7 @@ export default {
 <template>
   <div>
     <infrastructure-title :help-url="packageHelpUrl" :count="packagesCount" />
-    <infrastructure-search @update="requestPackagesList" />
+    <infrastructure-search v-if="packagesCount > 0" @update="requestPackagesList" />
 
     <package-list @page:changed="onPageChanged" @package:delete="onPackageDeleteRequest">
       <template #empty-state>

spec/frontend/packages_and_registries/infrastructure_registry/components/list/components/__snapshots__/packages_list_app_spec.js.snap

@@ -3,6 +3,7 @@
 exports[`packages_list_app renders 1`] = `
 <div>
   <infrastructure-title-stub
+    count="1"
     helpurl="foo"
   />
    

spec/frontend/packages_and_registries/infrastructure_registry/components/list/components/infrastructure_title_spec.js

@@ -10,7 +10,9 @@ describe('Infrastructure Title', () => {
   const findTitleArea = () => wrapper.find(TitleArea);
   const findMetadataItem = () => wrapper.find(MetadataItem);
 
-  const mountComponent = (propsData = { helpUrl: 'foo' }) => {
+  const exampleProps = { helpUrl: 'http://example.gitlab.com/help' };
+
+  const mountComponent = (propsData = exampleProps) => {
     wrapper = shallowMount(component, {
       store,
       propsData,
@@ -26,23 +28,36 @@ describe('Infrastructure Title', () => {
   });
 
   describe('title area', () => {
-    it('exists', () => {
+    beforeEach(() => {
       mountComponent();
+    });
 
+    it('exists', () => {
       expect(findTitleArea().exists()).toBe(true);
     });
 
-    it('has the correct props', () => {
-      mountComponent();
+    it('has the correct title', () => {
+      expect(findTitleArea().props('title')).toBe('Infrastructure Registry');
+    });
+
+    describe('with no modules', () => {
+      it('has no info message', () => {
+        expect(findTitleArea().props('infoMessages')).toStrictEqual([]);
+      });
+    });
+
+    describe('with at least one module', () => {
+      beforeEach(() => {
+        mountComponent({ ...exampleProps, count: 1 });
+      });
 
-      expect(findTitleArea().props()).toMatchObject({
-        title: 'Infrastructure Registry',
-        infoMessages: [
+      it('has an info message', () => {
+        expect(findTitleArea().props('infoMessages')).toStrictEqual([
           {
             text: 'Publish and share your modules. %{docLinkStart}More information%{docLinkEnd}',
-            link: 'foo',
+            link: exampleProps.helpUrl,
           },
-        ],
+        ]);
       });
     });
   });
@@ -51,15 +66,15 @@ describe('Infrastructure Title', () => {
     count        | exist    | text
     ${null}      | ${false} | ${''}
     ${undefined} | ${false} | ${''}
-    ${0}         | ${true}  | ${'0 Modules'}
+    ${0}         | ${false} | ${''}
     ${1}         | ${true}  | ${'1 Module'}
     ${2}         | ${true}  | ${'2 Modules'}
   `('when count is $count metadata item', ({ count, exist, text }) => {
     beforeEach(() => {
-      mountComponent({ count, helpUrl: 'foo' });
+      mountComponent({ ...exampleProps, count });
     });
 
-    it(`is ${exist} that it exists`, () => {
+    it(exist ? 'exists' : 'does not exist', () => {
       expect(findMetadataItem().exists()).toBe(exist);
     });
 

spec/frontend/packages_and_registries/infrastructure_registry/components/list/components/packages_list_app_spec.js

@@ -35,7 +35,7 @@ describe('packages_list_app', () => {
   const findListComponent = () => wrapper.find(PackageList);
   const findInfrastructureSearch = () => wrapper.find(InfrastructureSearch);
 
-  const createStore = (filter = []) => {
+  const createStore = ({ filter = [], packageCount = 0 } = {}) => {
     store = new Vuex.Store({
       state: {
         isLoading: false,
@@ -46,6 +46,9 @@ describe('packages_list_app', () => {
           packageHelpUrl: 'foo',
         },
         filter,
+        pagination: {
+          total: packageCount,
+        },
       },
     });
     store.dispatch = jest.fn();
@@ -68,6 +71,7 @@ describe('packages_list_app', () => {
   beforeEach(() => {
     createStore();
     jest.spyOn(packageUtils, 'getQueryParams').mockReturnValue({});
+    mountComponent();
   });
 
   afterEach(() => {
@@ -75,30 +79,26 @@ describe('packages_list_app', () => {
   });
 
   it('renders', () => {
+    createStore({ packageCount: 1 });
     mountComponent();
+
     expect(wrapper.element).toMatchSnapshot();
   });
 
-  it('call requestPackagesList on page:changed', () => {
-    mountComponent();
-    store.dispatch.mockClear();
-
+  it('calls requestPackagesList on page:changed', () => {
     const list = findListComponent();
     list.vm.$emit('page:changed', 1);
     expect(store.dispatch).toHaveBeenCalledWith('requestPackagesList', { page: 1 });
   });
 
-  it('call requestDeletePackage on package:delete', () => {
-    mountComponent();
-
+  it('calls requestDeletePackage on package:delete', () => {
     const list = findListComponent();
     list.vm.$emit('package:delete', 'foo');
+
     expect(store.dispatch).toHaveBeenCalledWith('requestDeletePackage', 'foo');
   });
 
-  it('does call requestPackagesList only one time on render', () => {
-    mountComponent();
-
+  it('calls requestPackagesList only once on render', () => {
     expect(store.dispatch).toHaveBeenCalledTimes(3);
     expect(store.dispatch).toHaveBeenNthCalledWith(1, 'setSorting', expect.any(Object));
     expect(store.dispatch).toHaveBeenNthCalledWith(2, 'setFilter', expect.any(Array));
@@ -113,9 +113,12 @@ describe('packages_list_app', () => {
       orderBy: 'created',
     };
 
-    it('calls setSorting with the query string based sorting', () => {
+    beforeEach(() => {
+      createStore();
       jest.spyOn(packageUtils, 'getQueryParams').mockReturnValue(defaultQueryParamsMock);
+    });
 
+    it('calls setSorting with the query string based sorting', () => {
       mountComponent();
 
       expect(store.dispatch).toHaveBeenNthCalledWith(1, 'setSorting', {
@@ -125,8 +128,6 @@ describe('packages_list_app', () => {
     });
 
     it('calls setFilter with the query string based filters', () => {
-      jest.spyOn(packageUtils, 'getQueryParams').mockReturnValue(defaultQueryParamsMock);
-
       mountComponent();
 
       expect(store.dispatch).toHaveBeenNthCalledWith(2, 'setFilter', [
@@ -150,8 +151,6 @@ describe('packages_list_app', () => {
 
   describe('empty state', () => {
     it('generate the correct empty list link', () => {
-      mountComponent();
-
       const link = findListComponent().find(GlLink);
 
       expect(link.attributes('href')).toBe(emptyListHelpUrl);
@@ -159,8 +158,6 @@ describe('packages_list_app', () => {
     });
 
     it('includes the right content on the default tab', () => {
-      mountComponent();
-
       const heading = findEmptyState().find('h1');
 
       expect(heading.text()).toBe('There are no packages yet');
@@ -169,7 +166,7 @@ describe('packages_list_app', () => {
 
   describe('filter without results', () => {
     beforeEach(() => {
-      createStore([{ type: 'something' }]);
+      createStore({ filter: [{ type: 'something' }] });
       mountComponent();
     });
 
@@ -181,20 +178,30 @@ describe('packages_list_app', () => {
     });
   });
 
-  describe('Search', () => {
-    it('exists', () => {
-      mountComponent();
-
-      expect(findInfrastructureSearch().exists()).toBe(true);
+  describe('search', () => {
+    describe('with no packages', () => {
+      it('does not exist', () => {
+        expect(findInfrastructureSearch().exists()).toBe(false);
+      });
     });
 
-    it('on update fetches data from the store', () => {
-      mountComponent();
-      store.dispatch.mockClear();
+    describe('with packages', () => {
+      beforeEach(() => {
+        createStore({ packageCount: 1 });
+        mountComponent();
+      });
 
-      findInfrastructureSearch().vm.$emit('update');
+      it('exists', () => {
+        expect(findInfrastructureSearch().exists()).toBe(true);
+      });
 
-      expect(store.dispatch).toHaveBeenCalledWith('requestPackagesList');
+      it('on update fetches data from the store', () => {
+        store.dispatch.mockClear();
+
+        findInfrastructureSearch().vm.$emit('update');
+
+        expect(store.dispatch).toHaveBeenCalledWith('requestPackagesList');
+      });
     });
   });