From 52c36b95bfb78305e335e8cf2814718e99cc2a46 Mon Sep 17 00:00:00 2001
From: abbyhu2000 <abigailhu2000@gmail.com>
Date: Tue, 24 Sep 2024 18:52:48 +0000
Subject: [PATCH] Revert "[Look&Feel] Updated Discover No Results panel (#7891)
 (#8224)"

This reverts commit 10bb541a7f9321d49aac875a62c5ff5d257c9bd1.
---
 changelogs/fragments/7891.yml                 |   2 -
 .../components/no_results/no_results.tsx      | 304 ++++++++++--------
 2 files changed, 163 insertions(+), 143 deletions(-)
 delete mode 100644 changelogs/fragments/7891.yml

diff --git a/changelogs/fragments/7891.yml b/changelogs/fragments/7891.yml
deleted file mode 100644
index 6300c0905a55..000000000000
--- a/changelogs/fragments/7891.yml
+++ /dev/null
@@ -1,2 +0,0 @@
-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 2c64bd6a0412..90804ba23260 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,11 +28,19 @@
  * under the License.
  */
 
-import React from 'react';
-import { I18nProvider } from '@osd/i18n/react';
+import React, { Fragment } from 'react';
+import { FormattedMessage, I18nProvider } from '@osd/i18n/react';
 
-import { EuiEmptyPrompt, EuiPanel, EuiText } from '@elastic/eui';
-import { i18n } from '@osd/i18n';
+import {
+  EuiCallOut,
+  EuiCode,
+  EuiDescriptionList,
+  EuiLink,
+  EuiPanel,
+  EuiSpacer,
+  EuiText,
+} from '@elastic/eui';
+import { getServices } from '../../../opensearch_dashboards_services';
 
 interface Props {
   timeFieldName?: string;
@@ -40,150 +48,164 @@ interface Props {
 }
 
 export const DiscoverNoResults = ({ timeFieldName, queryLanguage }: Props) => {
-  // 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>
-  //   );
-  // }
+  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>
+    );
+  }
 
   return (
     <I18nProvider>
       <EuiPanel hasBorder={false} hasShadow={false} color="transparent">
-        <EuiEmptyPrompt
-          iconType="alert"
-          iconColor="default"
-          data-test-subj="discoverNoResults"
+        <EuiCallOut
           title={
-            <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>
+            <FormattedMessage
+              id="discover.noResults.searchExamples.noResultsMatchSearchCriteriaTitle"
+              defaultMessage="No results match your search criteria"
+            />
           }
+          color="warning"
+          iconType="help"
+          data-test-subj="discoverNoResults"
         />
+        {timeFieldMessage}
+        {luceneQueryMessage}
       </EuiPanel>
     </I18nProvider>
   );