From b0be59eb04622045a10a881fe3478289850747ec Mon Sep 17 00:00:00 2001
From: "opensearch-trigger-bot[bot]"
 <98922864+opensearch-trigger-bot[bot]@users.noreply.github.com>
Date: Wed, 18 Sep 2024 11:03:27 -0700
Subject: [PATCH] [Look&Feel] Updated Discover No Results panel (#7891) (#8208)

* Empty Prompt changes



Update src/plugins/discover/public/application/components/no_results/no_results.tsx




Updated Discover No Results panel



* Changeset file for PR #7891 created/updated

* Changes for Cypress tests



* Added localization



---------



(cherry picked from commit 5d1c21bd923fc18ac08fb223e3abf6bea9141c05)

Signed-off-by: Dan Dong <danieldong51@gmail.com>
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>
---
 changelogs/fragments/7891.yml                 |   2 +
 .../components/no_results/no_results.tsx      | 304 ++++++++----------
 2 files changed, 143 insertions(+), 163 deletions(-)
 create mode 100644 changelogs/fragments/7891.yml

diff --git a/changelogs/fragments/7891.yml b/changelogs/fragments/7891.yml
new file mode 100644
index 000000000000..6300c0905a55
--- /dev/null
+++ b/changelogs/fragments/7891.yml
@@ -0,0 +1,2 @@
+refactor:
+- [Look&Feel] Updated Discover No Results panel ([#7891](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/7891))
\ No newline at end of file
diff --git a/src/plugins/discover/public/application/components/no_results/no_results.tsx b/src/plugins/discover/public/application/components/no_results/no_results.tsx
index 90804ba23260..2c64bd6a0412 100644
--- a/src/plugins/discover/public/application/components/no_results/no_results.tsx
+++ b/src/plugins/discover/public/application/components/no_results/no_results.tsx
@@ -28,19 +28,11 @@
  * under the License.
  */
 
-import React, { Fragment } from 'react';
-import { FormattedMessage, I18nProvider } from '@osd/i18n/react';
+import React from 'react';
+import { I18nProvider } from '@osd/i18n/react';
 
-import {
-  EuiCallOut,
-  EuiCode,
-  EuiDescriptionList,
-  EuiLink,
-  EuiPanel,
-  EuiSpacer,
-  EuiText,
-} from '@elastic/eui';
-import { getServices } from '../../../opensearch_dashboards_services';
+import { EuiEmptyPrompt, EuiPanel, EuiText } from '@elastic/eui';
+import { i18n } from '@osd/i18n';
 
 interface Props {
   timeFieldName?: string;
@@ -48,164 +40,150 @@ interface Props {
 }
 
 export const DiscoverNoResults = ({ timeFieldName, queryLanguage }: Props) => {
-  let timeFieldMessage;
-
-  if (timeFieldName) {
-    timeFieldMessage = (
-      <Fragment>
-        <EuiSpacer size="xl" />
-
-        <EuiText size="s">
-          <h2 data-test-subj="discoverNoResultsTimefilter">
-            <FormattedMessage
-              id="discover.noResults.expandYourTimeRangeTitle"
-              defaultMessage="Expand your time range"
-            />
-          </h2>
-
-          <p>
-            <FormattedMessage
-              id="discover.noResults.queryMayNotMatchTitle"
-              defaultMessage="One or more of the indices you&rsquo;re looking at contains a date field. Your query may
-                  not match anything in the current time range, or there may not be any data at all in
-                  the currently selected time range. You can try changing the time range to one which contains data."
-            />
-          </p>
-        </EuiText>
-      </Fragment>
-    );
-  }
-
-  let luceneQueryMessage;
-
-  if (queryLanguage === 'lucene') {
-    const searchExamples = [
-      {
-        description: <EuiCode>200</EuiCode>,
-        title: (
-          <EuiText size="s">
-            <strong>
-              <FormattedMessage
-                id="discover.noResults.searchExamples.anyField200StatusCodeExampleTitle"
-                defaultMessage="Find requests that contain the number 200, in any field"
-              />
-            </strong>
-          </EuiText>
-        ),
-      },
-      {
-        description: <EuiCode>status:200</EuiCode>,
-        title: (
-          <EuiText size="s">
-            <strong>
-              <FormattedMessage
-                id="discover.noResults.searchExamples.statusField200StatusCodeExampleTitle"
-                defaultMessage="Find 200 in the status field"
-              />
-            </strong>
-          </EuiText>
-        ),
-      },
-      {
-        description: <EuiCode>status:[400 TO 499]</EuiCode>,
-        title: (
-          <EuiText size="s">
-            <strong>
-              <FormattedMessage
-                id="discover.noResults.searchExamples.400to499StatusCodeExampleTitle"
-                defaultMessage="Find all status codes between 400-499"
-              />
-            </strong>
-          </EuiText>
-        ),
-      },
-      {
-        description: <EuiCode>status:[400 TO 499] AND extension:PHP</EuiCode>,
-        title: (
-          <EuiText size="s">
-            <strong>
-              <FormattedMessage
-                id="discover.noResults.searchExamples.400to499StatusCodeWithPhpExtensionExampleTitle"
-                defaultMessage="Find status codes 400-499 with the extension php"
-              />
-            </strong>
-          </EuiText>
-        ),
-      },
-      {
-        description: <EuiCode>status:[400 TO 499] AND (extension:php OR extension:html)</EuiCode>,
-        title: (
-          <EuiText size="s">
-            <strong>
-              <FormattedMessage
-                id="discover.noResults.searchExamples.400to499StatusCodeWithPhpOrHtmlExtensionExampleTitle"
-                defaultMessage="Find status codes 400-499 with the extension php or html"
-              />
-            </strong>
-          </EuiText>
-        ),
-      },
-    ];
-
-    luceneQueryMessage = (
-      <Fragment>
-        <EuiSpacer size="xl" />
-
-        <EuiText size="s">
-          <h3>
-            <FormattedMessage
-              id="discover.noResults.searchExamples.refineYourQueryTitle"
-              defaultMessage="Refine your query"
-            />
-          </h3>
-
-          <p>
-            <FormattedMessage
-              id="discover.noResults.searchExamples.howTosearchForWebServerLogsDescription"
-              defaultMessage="The search bar at the top uses OpenSearch&rsquo;s support for Lucene {queryStringSyntaxLink}.
-                Here are some examples of how you can search for web server logs that have been parsed into a few fields."
-              values={{
-                queryStringSyntaxLink: (
-                  <EuiLink
-                    target="_blank"
-                    href={getServices().docLinks.links.opensearch.queryDSL.base}
-                  >
-                    <FormattedMessage
-                      id="discover.noResults.searchExamples.queryStringSyntaxLinkText"
-                      defaultMessage="Query String syntax"
-                    />
-                  </EuiLink>
-                ),
-              }}
-            />
-          </p>
-        </EuiText>
-
-        <EuiSpacer size="m" />
-
-        <EuiDescriptionList type="column" listItems={searchExamples} />
-
-        <EuiSpacer size="xl" />
-      </Fragment>
-    );
-  }
+  // Commented out due to no usage in code
+  // See: https://github.com/opensearch-project/OpenSearch-Dashboards/issues/8149
+  //
+  // let luceneQueryMessage;
+  //
+  // if (queryLanguage === 'lucene') {
+  //   const searchExamples = [
+  //     {
+  //       description: <EuiCode>200</EuiCode>,
+  //       title: (
+  //         <EuiText size="s">
+  //           <strong>
+  //             <FormattedMessage
+  //               id="discover.noResults.searchExamples.anyField200StatusCodeExampleTitle"
+  //               defaultMessage="Find requests that contain the number 200, in any field"
+  //             />
+  //           </strong>
+  //         </EuiText>
+  //       ),
+  //     },
+  //     {
+  //       description: <EuiCode>status:200</EuiCode>,
+  //       title: (
+  //         <EuiText size="s">
+  //           <strong>
+  //             <FormattedMessage
+  //               id="discover.noResults.searchExamples.statusField200StatusCodeExampleTitle"
+  //               defaultMessage="Find 200 in the status field"
+  //             />
+  //           </strong>
+  //         </EuiText>
+  //       ),
+  //     },
+  //     {
+  //       description: <EuiCode>status:[400 TO 499]</EuiCode>,
+  //       title: (
+  //         <EuiText size="s">
+  //           <strong>
+  //             <FormattedMessage
+  //               id="discover.noResults.searchExamples.400to499StatusCodeExampleTitle"
+  //               defaultMessage="Find all status codes between 400-499"
+  //             />
+  //           </strong>
+  //         </EuiText>
+  //       ),
+  //     },
+  //     {
+  //       description: <EuiCode>status:[400 TO 499] AND extension:PHP</EuiCode>,
+  //       title: (
+  //         <EuiText size="s">
+  //           <strong>
+  //             <FormattedMessage
+  //               id="discover.noResults.searchExamples.400to499StatusCodeWithPhpExtensionExampleTitle"
+  //               defaultMessage="Find status codes 400-499 with the extension php"
+  //             />
+  //           </strong>
+  //         </EuiText>
+  //       ),
+  //     },
+  //     {
+  //       description: <EuiCode>status:[400 TO 499] AND (extension:php OR extension:html)</EuiCode>,
+  //       title: (
+  //         <EuiText size="s">
+  //           <strong>
+  //             <FormattedMessage
+  //               id="discover.noResults.searchExamples.400to499StatusCodeWithPhpOrHtmlExtensionExampleTitle"
+  //               defaultMessage="Find status codes 400-499 with the extension php or html"
+  //             />
+  //           </strong>
+  //         </EuiText>
+  //       ),
+  //     },
+  //   ];
+  //
+  //   luceneQueryMessage = (
+  //     <Fragment>
+  //       <EuiSpacer size="xl" />
+  //
+  //       <EuiText size="s">
+  //         <h3>
+  //           <FormattedMessage
+  //             id="discover.noResults.searchExamples.refineYourQueryTitle"
+  //             defaultMessage="Refine your query"
+  //           />
+  //         </h3>
+  //
+  //         <p>
+  //           <FormattedMessage
+  //             id="discover.noResults.searchExamples.howTosearchForWebServerLogsDescription"
+  //             defaultMessage="The search bar at the top uses OpenSearch&rsquo;s support for Lucene {queryStringSyntaxLink}.
+  //               Here are some examples of how you can search for web server logs that have been parsed into a few fields."
+  //             values={{
+  //               queryStringSyntaxLink: (
+  //                 <EuiLink
+  //                   target="_blank"
+  //                   href={getServices().docLinks.links.opensearch.queryDSL.base}
+  //                 >
+  //                   <FormattedMessage
+  //                     id="discover.noResults.searchExamples.queryStringSyntaxLinkText"
+  //                     defaultMessage="Query String syntax"
+  //                   />
+  //                 </EuiLink>
+  //               ),
+  //             }}
+  //           />
+  //         </p>
+  //       </EuiText>
+  //
+  //       <EuiSpacer size="m" />
+  //
+  //       <EuiDescriptionList type="column" listItems={searchExamples} />
+  //
+  //       <EuiSpacer size="xl" />
+  //     </Fragment>
+  //   );
+  // }
 
   return (
     <I18nProvider>
       <EuiPanel hasBorder={false} hasShadow={false} color="transparent">
-        <EuiCallOut
+        <EuiEmptyPrompt
+          iconType="alert"
+          iconColor="default"
+          data-test-subj="discoverNoResults"
           title={
-            <FormattedMessage
-              id="discover.noResults.searchExamples.noResultsMatchSearchCriteriaTitle"
-              defaultMessage="No results match your search criteria"
-            />
+            <EuiText size="s">
+              <h2>
+                {i18n.translate('discover.emptyPrompt.title', {
+                  defaultMessage: 'No Results',
+                })}
+              </h2>
+            </EuiText>
+          }
+          body={
+            <EuiText size="s" data-test-subj="discoverNoResultsTimefilter">
+              <p>
+                {i18n.translate('discover.emptyPrompt.body', {
+                  defaultMessage:
+                    'Try selecting a different data source, expanding your time range or modifying the query & filters.',
+                })}
+              </p>
+            </EuiText>
           }
-          color="warning"
-          iconType="help"
-          data-test-subj="discoverNoResults"
         />
-        {timeFieldMessage}
-        {luceneQueryMessage}
       </EuiPanel>
     </I18nProvider>
   );