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>