Merge branch 'Add-an-illustration-in-the-search-result-page' into 'master'

Add illustration to search result empty state

See merge request !163849



Merged-by: Natalia Tepluhina <ntepluhina@gitlab.com>
Approved-by: Sunjung Park <spark@gitlab.com>
Approved-by: Vanessa Otto <votto@gitlab.com>
Approved-by: Natalia Tepluhina <ntepluhina@gitlab.com>
Reviewed-by: Vanessa Otto <votto@gitlab.com>
Co-authored-by: jimender2 <35303639+jimender2@users.noreply.github.com>

app/assets/javascripts/ci/catalog/components/list/empty_state.vue

 <script>
+import FILTERED_SVG_URL from '@gitlab/svgs/dist/illustrations/empty-state/empty-search-md.svg?url';
+
 import { GlEmptyState, GlLink, GlSprintf } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import { COMPONENTS_DOCS_URL } from '~/ci/catalog/constants';
@@ -19,10 +21,12 @@ export default {
     },
   },
   computed: {
-    searchTitle() {
-      return this.isQueryTooSmall
-        ? this.$options.i18n.searchTooSmall.title
-        : this.$options.i18n.search.title;
+    searchLabels() {
+      const key = this.isQueryTooSmall ? 'searchTooSmall' : 'search';
+      return {
+        title: this.$options.i18n[key].title,
+        description: this.$options.i18n[key].description,
+      };
     },
     isSearching() {
       return this.searchTerm?.length > 0;
@@ -39,22 +43,30 @@ export default {
       ),
     },
     search: {
-      title: s__('CiCatalog|No result found'),
+      title: s__('CiCatalog|No components match your search criteria'),
       description: s__(
-        'CiCatalog|Edit your search and try again. Or %{linkStart}learn to create a component repository%{linkEnd}.',
+        'CiCatalog|Edit your search and try again, or %{linkStart}learn how to create a component project%{linkEnd}.',
       ),
     },
     searchTooSmall: {
-      title: s__('CiCatalog|Search must be at least 3 characters'),
+      title: s__('CiCatalog|Search incomplete'),
+      description: s__('CiCatalog|Search keyword must have at least 3 characters'),
     },
   },
+  FILTERED_SVG_URL,
+  svgHeight: 145,
 };
 </script>
 <template>
   <div>
-    <gl-empty-state v-if="isSearching" :title="searchTitle">
+    <gl-empty-state
+      v-if="isSearching"
+      :title="searchLabels.title"
+      :svg-path="$options.FILTERED_SVG_URL"
+      :svg-height="$options.svgHeight"
+    >
       <template #description>
-        <gl-sprintf :message="$options.i18n.search.description">
+        <gl-sprintf :message="searchLabels.description">
           <template #link="{ content }">
             <gl-link :href="$options.COMPONENTS_DOCS_URL" target="_blank">{{ content }}</gl-link>
           </template>

locale/gitlab.pot

@@ -11513,7 +11513,7 @@ msgstr ""
 msgid "CiCatalog|Discover CI/CD components that can improve your pipeline with additional functionality."
 msgstr ""
-msgid "CiCatalog|Edit your search and try again. Or %{linkStart}learn to create a component repository%{linkEnd}."
+msgid "CiCatalog|Edit your search and try again, or %{linkStart}learn how to create a component project%{linkEnd}."
 msgstr ""
 msgid "CiCatalog|Get started with the CI/CD Catalog"
@@ -11531,10 +11531,10 @@ msgstr ""
 msgid "CiCatalog|No component available"
 msgstr ""
-msgid "CiCatalog|No release available"
+msgid "CiCatalog|No components match your search criteria"
 msgstr ""
-msgid "CiCatalog|No result found"
+msgid "CiCatalog|No release available"
 msgstr ""
 msgid "CiCatalog|Partner"
@@ -11558,7 +11558,10 @@ msgstr ""
 msgid "CiCatalog|Remove from the CI/CD catalog"
 msgstr ""
-msgid "CiCatalog|Search must be at least 3 characters"
+msgid "CiCatalog|Search incomplete"
+msgstr ""
+
+msgid "CiCatalog|Search keyword must have at least 3 characters"
 msgstr ""
 msgid "CiCatalog|Set component project as a CI/CD Catalog project. %{linkStart}What is the CI/CD Catalog?%{linkEnd}"

spec/frontend/ci/catalog/components/list/empty_state_spec.js

@@ -8,15 +8,16 @@ describe('EmptyState', () => {
 
   const findEmptyState = () => wrapper.findComponent(GlEmptyState);
   const findComponentsDocLink = () => wrapper.findComponent(GlLink);
+  const findDescription = () => wrapper.findComponent(GlSprintf);
 
-  const createComponent = ({ props = {} } = {}) => {
+  const createComponent = ({ props = {}, stubGlSprintf = false } = {}) => {
     wrapper = shallowMountExtended(EmptyState, {
       propsData: {
         ...props,
       },
       stubs: {
         GlEmptyState,
-        GlSprintf,
+        GlSprintf: stubGlSprintf ? GlSprintf : true,
       },
     });
   };
@@ -44,18 +45,6 @@ describe('EmptyState', () => {
       });
     });
 
-    it('renders the search description', () => {
-      expect(findEmptyState().text()).toContain(
-        'Edit your search and try again. Or learn to create a component repository.',
-      );
-    });
-
-    it('renders the link to the components documentation', () => {
-      const docsLink = findComponentsDocLink();
-      expect(docsLink.exists()).toBe(true);
-      expect(docsLink.attributes().href).toBe(COMPONENTS_DOCS_URL);
-    });
-
     describe('and it is less than 3 characters', () => {
       beforeEach(() => {
         createComponent({
@@ -64,7 +53,13 @@ describe('EmptyState', () => {
       });
 
       it('render the too few chars empty state title', () => {
-        expect(findEmptyState().props().title).toBe('Search must be at least 3 characters');
+        expect(findEmptyState().props().title).toBe('Search incomplete');
+      });
+
+      it('renders the too small search description', () => {
+        expect(findDescription().attributes().message).toContain(
+          'Search keyword must have at least 3 characters',
+        );
       });
     });
 
@@ -75,8 +70,24 @@ describe('EmptyState', () => {
         });
       });
 
-      it('renders the search empty state title', () => {
-        expect(findEmptyState().props().title).toBe('No result found');
+      it('renders the search empty state title and description', () => {
+        expect(findEmptyState().props().title).toBe('No components match your search criteria');
+      });
+
+      it('renders the search empty description', () => {
+        expect(findDescription().attributes().message).toContain(
+          'Edit your search and try again, or %{linkStart}learn how to create a component project%{linkEnd}.',
+        );
+      });
+
+      it('renders the link to the components documentation', () => {
+        createComponent({
+          props: { searchTerm: 'my component' },
+          stubGlSprintf: true,
+        });
+        const docsLink = findComponentsDocLink();
+        expect(docsLink.exists()).toBe(true);
+        expect(docsLink.attributes().href).toBe(COMPONENTS_DOCS_URL);
       });
     });
   });