From 53d6fe37aa068ed34d08b95a75846bc1f54f107e Mon Sep 17 00:00:00 2001
From: Nicholas Ung <nicholasung22@gmail.com>
Date: Tue, 17 Oct 2023 10:13:36 -0700
Subject: [PATCH] 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>
---
 .../result_components/result_components.tsx        | 14 ++++++++------
 .../result_components/result_panel.tsx             | 11 ++++++++++-
 2 files changed, 18 insertions(+), 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
index 0cba158..8844caf 100644
--- 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
index 2731274..f942f41 100644
--- 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>