add EuiDescriptionList and adjust copy

elastic · Jul 14, 2021 · 57032cb · 57032cb
1 parent bd340df
commit 57032cb
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 23 deletions.
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
@@ -40,7 +40,7 @@ export function DiscoverNoResults({
 }: DiscoverNoResultsProps) {
   const callOut = !error ? (
     <EuiFlexItem grow={false} className="dscNoResults">
-      <EuiFlexGroup gutterSize="xl" alignItems="center" direction="rowReverse" wrap>
+      <EuiFlexGroup gutterSize="xl" alignItems="stretch" direction="rowReverse" wrap>
         <EuiFlexItem grow={1}>
           <NoResultsIllustration />
         </EuiFlexItem>
@@ -53,6 +53,7 @@ export function DiscoverNoResults({
               />
             </h2>
           </EuiTitle>
+          <EuiSpacer />
           {!!timeFieldName && getTimeFieldMessage()}
           {timeFieldName && (hasFilters || hasQuery) && <EuiSpacer size="m" />}
           {(hasFilters || hasQuery) && (

diff --git a/...plugins/discover/public/application/apps/main/components/no_results/no_results_helper.tsx b/...plugins/discover/public/application/apps/main/components/no_results/no_results_helper.tsx
@@ -8,28 +8,34 @@
 
 import React, { Fragment, ReactNode } from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { EuiButton, EuiLink, EuiSpacer, EuiText, EuiTitle } from '@elastic/eui';
+import {
+  // EuiButton,
+  EuiDescriptionList,
+  EuiDescriptionListTitle,
+  EuiLink,
+  // EuiSpacer,
+  // EuiText,
+  EuiDescriptionListDescription,
+  // EuiTitle,
+} from '@elastic/eui';
 
 export function getTimeFieldMessage() {
   return (
     <Fragment>
-      {/* <EuiTitle size="xs">
-        <h3 data-test-subj="discoverNoResultsTimefilter">
+      <EuiDescriptionList>
+        <EuiDescriptionListTitle data-test-subj="discoverNoResultsTimefilter">
           <FormattedMessage
             id="discover.noResults.expandYourTimeRangeTitle"
             defaultMessage="Expand your time range"
           />
-        </h3>
-      </EuiTitle> */}
-      <EuiSpacer size="m" />
-      <EuiText grow={false}>
-        <p>
+        </EuiDescriptionListTitle>
+        <EuiDescriptionListDescription>
           <FormattedMessage
             id="discover.noResults.queryMayNotMatchTitle"
             defaultMessage="You are searching time series data and no matches were found in the specified time range. Try searching over a larger period of time."
           />
-        </p>
-      </EuiText>
+        </EuiDescriptionListDescription>
+      </EuiDescriptionList>
     </Fragment>
   );
 }
@@ -45,44 +51,56 @@ export function AdjustSearch({ hasFilters, hasQuery, onDisableFilters }: AdjustS
   if (hasFilters) {
     if (hasQuery) {
       content = (
-        <EuiText grow={false}>
-          You have narrowed your search results. Try searching for a different combination of terms
-          or{' '}
+        <EuiDescriptionListDescription>
+          You have entered a query and have narrowed your search results. Try searching for a
+          different combination of terms or{' '}
           <EuiLink onClick={onDisableFilters}>
             <FormattedMessage
               id="discover.noResults.disableFilters"
-              defaultMessage="removing filters"
+              defaultMessage="temporarily disabling filters"
             />
           </EuiLink>{' '}
           to reveal more matches.
-        </EuiText>
+        </EuiDescriptionListDescription>
       );
     } else {
       content = (
-        <EuiText grow={false}>
+        <EuiDescriptionListDescription>
           You have narrowed your search results. Try{' '}
           <EuiLink data-test-subj="discoverNoResultsDisableFilters" onClick={onDisableFilters}>
             <FormattedMessage
               id="discover.noResults.disableFilters"
-              defaultMessage="removing filters"
+              defaultMessage="temporarily disabling filters"
             />
           </EuiLink>{' '}
           to reveal more matches.
-        </EuiText>
+        </EuiDescriptionListDescription>
       );
     }
   } else {
     content = (
-      <EuiText grow={false}>
+      <EuiDescriptionListDescription>
         <p>
           <FormattedMessage
             id="discover.noResults.queryOnlyDescription"
-            defaultMessage="You have narrowed your search results. Try searching for a different combination of terms
+            defaultMessage="Try searching for a different combination of terms
             to reveal more matches."
           />
         </p>
-      </EuiText>
+      </EuiDescriptionListDescription>
     );
   }
-  return <Fragment>{content}</Fragment>;
+  return (
+    <Fragment>
+      <EuiDescriptionList>
+        <EuiDescriptionListTitle data-test-subj="discoverNoResultsAdjustSearch">
+          <FormattedMessage
+            id="discover.noResults.adjustSearch"
+            defaultMessage="Adjust your search"
+          />
+        </EuiDescriptionListTitle>
+        {content}
+      </EuiDescriptionList>
+    </Fragment>
+  );
 }