Utilize EuiEmptyPrompt to represent empty state (#320)

* Utilize EuiEmptyPrompt to represent empty state Signed-off-by: Nicholas Ung <nicholasung22@gmail.com> * Update icon and text for empty prompts Signed-off-by: Nicholas Ung <nicholasung22@gmail.com> * Update public/components/query_compare/search_result/result_components/result_components.tsx Co-authored-by: Josh Romero <rmerqg@amazon.com> Signed-off-by: Nicholas Ung <nicholasung22@gmail.com> --------- Signed-off-by: Nicholas Ung <nicholasung22@gmail.com> Co-authored-by: Josh Romero <rmerqg@amazon.com>
opensearch-project · Oct 17, 2023 · 53d6fe3 · 53d6fe3
1 parent b9a71a4
commit 53d6fe3
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 7 deletions.
diff --git a/public/components/query_compare/search_result/result_components/result_components.tsx b/public/components/query_compare/search_result/result_components/result_components.tsx
@@ -4,7 +4,7 @@
  */
 
 import React, { useEffect, useState } from 'react';
-import { EuiSplitPanel, EuiTitle, EuiFlexGroup, EuiPanel } from '@elastic/eui';
+import { EuiSplitPanel, EuiEmptyPrompt, EuiPanel } from '@elastic/eui';
 
 import { QueryError, SearchResults } from '../../../../types/index';
 import { ResultPanel } from './result_panel';
@@ -26,11 +26,13 @@ const InitialState = () => {
       grow={true}
       style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}
     >
-      <EuiFlexGroup justifyContent="center">
-        <EuiTitle>
-          <h2>Add queries to compare search results.</h2>
-        </EuiTitle>
-      </EuiFlexGroup>
+      <EuiEmptyPrompt
+        iconType="search"
+        title={<h2>No results</h2>}
+        body={
+            <p>Add at least one query to display search results.</p>
+        }
+      />
     </EuiPanel>
   );
 };

diff --git a/public/components/query_compare/search_result/result_components/result_panel.tsx b/public/components/query_compare/search_result/result_components/result_panel.tsx
@@ -11,6 +11,7 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiHorizontalRule,
+  EuiEmptyPrompt,
 } from '@elastic/eui';
 
 import { ResultGridComponent } from './result_grid';
@@ -70,7 +71,15 @@ export const ResultPanel = ({ resultNumber, queryResult, queryError }: ResultPan
       ) : (
         <>
           <EuiHorizontalRule margin="s" />
-          <EuiText>No results.</EuiText>
+          <EuiEmptyPrompt
+            iconType="search"
+            title={<h2>No results</h2>}
+            body={
+              <>
+                <p>Add a second query to display search comparison results.</p>
+              </>
+            }
+          />
         </>
       )}
     </EuiSplitPanel.Inner>