[Discover] Improve empty state page (#103602)

Co-authored-by: Tim Roes <tim.roes@elastic.co>
elastic · Jul 21, 2021 · 09c49f5 · 09c49f5
1 parent 856ec00
commit 09c49f5
Show file tree

Hide file tree

Showing 10 changed files with 287 additions and 165 deletions.
diff --git a/src/plugins/discover/public/application/apps/main/components/layout/discover_layout.tsx b/src/plugins/discover/public/application/apps/main/components/layout/discover_layout.tsx
@@ -211,7 +211,14 @@ export function DiscoverLayout({
     savedSearchRefetch$.next('reset');
   }, [savedSearchRefetch$]);
 
-  const contentCentered = resultState === 'uninitialized';
+  const onDisableFilters = useCallback(() => {
+    const disabledFilters = filterManager
+      .getFilters()
+      .map((filter) => ({ ...filter, meta: { ...filter.meta, disabled: true } }));
+    filterManager.setFilters(disabledFilters);
+  }, [filterManager]);
+
+  const contentCentered = resultState === 'uninitialized' || resultState === 'none';
   const showTimeCol = useMemo(
     () => !uiSettings.get(DOC_HIDE_TIME_COLUMN_SETTING, false) && !!indexPattern.timeFieldName,
     [uiSettings, indexPattern.timeFieldName]
@@ -284,14 +291,19 @@ export function DiscoverLayout({
                 hasShadow={false}
                 className={classNames('dscPageContent', {
                   'dscPageContent--centered': contentCentered,
+                  'dscPageContent--emptyPrompt': resultState === 'none',
                 })}
               >
                 {resultState === 'none' && (
                   <DiscoverNoResults
                     timeFieldName={timeField}
-                    queryLanguage={state.query?.language ?? ''}
                     data={data}
                     error={fetchState.fetchError}
+                    hasQuery={!!state.query?.query}
+                    hasFilters={
+                      state.filters && state.filters.filter((f) => !f.meta.disabled).length > 0
+                    }
+                    onDisableFilters={onDisableFilters}
                   />
                 )}
                 {resultState === 'uninitialized' && (

diff --git a/src/plugins/discover/public/application/apps/main/components/no_results/_no_results.scss b/src/plugins/discover/public/application/apps/main/components/no_results/_no_results.scss
@@ -1,3 +1,8 @@
 .dscNoResults {
-  padding: $euiSize;
+  padding: $euiSizeL;
 }
+
+.dscPageContent--emptyPrompt {
+  // override EUI specificity
+  max-width: $euiSizeXXL * 19 !important; // sass-lint:disable-line no-important
+}
diff --git a/...er/public/application/apps/main/components/no_results/assets/no_results_illustration.scss b/...er/public/application/apps/main/components/no_results/assets/no_results_illustration.scss
@@ -0,0 +1,19 @@
+.dscNoResultsIllustration__decor {
+  fill: lightOrDarkTheme(#E6EBF2, #294492);
+}
+
+.dscNoResultsIllustration__fly {
+  fill: lightOrDarkTheme(#294492, #E6EBF2);
+}
+
+@include euiBreakpoint('xs', 's') {
+  .dscNoResults__illustration > svg {
+    width: $euiSize * 12;
+    height: auto;
+    margin: 0 auto;
+  }
+
+  .dscNoResults__title {
+    text-align: center;
+  }
+}
diff --git a/...ver/public/application/apps/main/components/no_results/assets/no_results_illustration.tsx b/...ver/public/application/apps/main/components/no_results/assets/no_results_illustration.tsx
diff --git a/src/plugins/discover/public/application/apps/main/components/no_results/no_results.test.tsx b/src/plugins/discover/public/application/apps/main/components/no_results/no_results.test.tsx
@@ -30,13 +30,15 @@ beforeEach(() => {
   jest.clearAllMocks();
 });
 
-function mountAndFindSubjects(props: DiscoverNoResultsProps) {
-  const component = mountWithIntl(<DiscoverNoResults {...props} />);
+function mountAndFindSubjects(props: Omit<DiscoverNoResultsProps, 'onDisableFilters'>) {
+  const component = mountWithIntl(<DiscoverNoResults onDisableFilters={() => {}} {...props} />);
   return {
-    mainMsg: findTestSubject(component, 'discoverNoResults').length > 0,
-    timeFieldMsg: findTestSubject(component, 'discoverNoResultsTimefilter').length > 0,
-    luceneMsg: findTestSubject(component, 'discoverNoResultsLucene').length > 0,
-    errorMsg: findTestSubject(component, 'discoverNoResultsError').length > 0,
+    mainMsg: findTestSubject(component, 'discoverNoResults').exists(),
+    timeFieldMsg: findTestSubject(component, 'discoverNoResultsTimefilter').exists(),
+    errorMsg: findTestSubject(component, 'discoverNoResultsError').exists(),
+    adjustSearch: findTestSubject(component, 'discoverNoResultsAdjustSearch').exists(),
+    adjustFilters: findTestSubject(component, 'discoverNoResultsAdjustFilters').exists(),
+    disableFiltersButton: findTestSubject(component, 'discoverNoResultsDisableFilters').exists(),
   };
 }
 
@@ -47,8 +49,10 @@ describe('DiscoverNoResults', () => {
         const result = mountAndFindSubjects({});
         expect(result).toMatchInlineSnapshot(`
           Object {
+            "adjustFilters": false,
+            "adjustSearch": false,
+            "disableFiltersButton": false,
             "errorMsg": false,
-            "luceneMsg": false,
             "mainMsg": true,
             "timeFieldMsg": false,
           }
@@ -62,26 +66,27 @@ describe('DiscoverNoResults', () => {
         });
         expect(result).toMatchInlineSnapshot(`
           Object {
+            "adjustFilters": false,
+            "adjustSearch": false,
+            "disableFiltersButton": false,
             "errorMsg": false,
-            "luceneMsg": false,
             "mainMsg": true,
             "timeFieldMsg": true,
           }
         `);
       });
     });
 
-    describe('queryLanguage', () => {
-      test('supports lucene and renders doc link', () => {
-        const result = mountAndFindSubjects({ queryLanguage: 'lucene' });
-        expect(result).toMatchInlineSnapshot(`
-          Object {
-            "errorMsg": false,
-            "luceneMsg": true,
-            "mainMsg": true,
-            "timeFieldMsg": false,
-          }
-        `);
+    describe('filter/query', () => {
+      test('shows "adjust search" message when having query', () => {
+        const result = mountAndFindSubjects({ hasQuery: true });
+        expect(result).toHaveProperty('adjustSearch', true);
+      });
+
+      test('shows "adjust filters" message when having filters', () => {
+        const result = mountAndFindSubjects({ hasFilters: true });
+        expect(result).toHaveProperty('adjustFilters', true);
+        expect(result).toHaveProperty('disableFiltersButton', true);
       });
     });
 
@@ -91,12 +96,13 @@ describe('DiscoverNoResults', () => {
         const result = mountAndFindSubjects({
           timeFieldName: 'awesome_time_field',
           error,
-          queryLanguage: 'lucene',
         });
         expect(result).toMatchInlineSnapshot(`
           Object {
+            "adjustFilters": false,
+            "adjustSearch": false,
+            "disableFiltersButton": false,
             "errorMsg": true,
-            "luceneMsg": false,
             "mainMsg": false,
             "timeFieldMsg": false,
           }

diff --git a/src/plugins/discover/public/application/apps/main/components/no_results/no_results.tsx b/src/plugins/discover/public/application/apps/main/components/no_results/no_results.tsx
@@ -8,42 +8,62 @@
 
 import React, { Fragment } from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { EuiButton, EuiCallOut, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
-import { getServices } from '../../../../../kibana_services';
+import {
+  EuiButton,
+  EuiCallOut,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiSpacer,
+  EuiTitle,
+} from '@elastic/eui';
 import { DataPublicPluginStart } from '../../../../../../../data/public';
-import { getLuceneQueryMessage, getTimeFieldMessage } from './no_results_helper';
+import { AdjustSearch, getTimeFieldMessage } from './no_results_helper';
 import './_no_results.scss';
+import { NoResultsIllustration } from './assets/no_results_illustration';
 
 export interface DiscoverNoResultsProps {
   timeFieldName?: string;
-  queryLanguage?: string;
   error?: Error;
   data?: DataPublicPluginStart;
+  hasQuery?: boolean;
+  hasFilters?: boolean;
+  onDisableFilters: () => void;
 }
 
 export function DiscoverNoResults({
   timeFieldName,
-  queryLanguage,
   error,
   data,
+  hasFilters,
+  hasQuery,
+  onDisableFilters,
 }: DiscoverNoResultsProps) {
   const callOut = !error ? (
     <EuiFlexItem grow={false} className="dscNoResults">
-      <EuiCallOut
-        title={
+      <EuiTitle className="dscNoResults__title">
+        <h2 data-test-subj="discoverNoResults">
           <FormattedMessage
             id="discover.noResults.searchExamples.noResultsMatchSearchCriteriaTitle"
             defaultMessage="No results match your search criteria"
           />
-        }
-        color="warning"
-        iconType="help"
-        data-test-subj="discoverNoResults"
-      />
-      {timeFieldName ? getTimeFieldMessage() : null}
-      {queryLanguage === 'lucene'
-        ? getLuceneQueryMessage(getServices().docLinks.links.query.luceneQuerySyntax)
-        : null}
+        </h2>
+      </EuiTitle>
+      <EuiSpacer size="m" />
+      <EuiFlexGroup gutterSize="xl" alignItems="center" direction="rowReverse" wrap>
+        <EuiFlexItem className="dscNoResults__illustration" grow={1}>
+          <NoResultsIllustration />
+        </EuiFlexItem>
+        <EuiFlexItem grow={2}>
+          {!!timeFieldName && getTimeFieldMessage()}
+          {(hasFilters || hasQuery) && (
+            <AdjustSearch
+              hasFilters={hasFilters}
+              hasQuery={hasQuery}
+              onDisableFilters={onDisableFilters}
+            />
+          )}
+        </EuiFlexItem>
+      </EuiFlexGroup>
     </EuiFlexItem>
   ) : (
     <EuiFlexItem grow={true} className="dscNoResults">