From 7aa554ab6a889c0d535ad30f4c15f16f787ef69f Mon Sep 17 00:00:00 2001
From: Joshua Li <joshuali925@gmail.com>
Date: Tue, 10 Sep 2024 15:47:33 -0700
Subject: [PATCH] fix(log explorer): show PPL errors in toasts correctly
 (#2154)

Signed-off-by: Joshua Li <joshuali925@gmail.com>
---
 .../event_analytics/explorer/explorer.tsx     |   5 +-
 .../explorer/query_assist/input.tsx           | 104 +++++++++---------
 .../event_analytics/hooks/use_fetch_events.ts |   2 +-
 3 files changed, 53 insertions(+), 58 deletions(-)

diff --git a/public/components/event_analytics/explorer/explorer.tsx b/public/components/event_analytics/explorer/explorer.tsx
index af7d6e448..29cee4d7e 100644
--- a/public/components/event_analytics/explorer/explorer.tsx
+++ b/public/components/event_analytics/explorer/explorer.tsx
@@ -811,8 +811,9 @@ export const Explorer = ({
     if (availability !== true) {
       await updateQueryInStore(searchedQuery);
     }
-    await fetchData(undefined, undefined, setSummaryStatus);
-    setEventsLoading(false);
+    await fetchData(undefined, undefined, setSummaryStatus).finally(() => {
+      setEventsLoading(false);
+    });
   };
 
   const handleQueryChange = async (newQuery: string) => setTempQuery(newQuery);
diff --git a/public/components/event_analytics/explorer/query_assist/input.tsx b/public/components/event_analytics/explorer/query_assist/input.tsx
index fb20511f6..aefe79f7a 100644
--- a/public/components/event_analytics/explorer/query_assist/input.tsx
+++ b/public/components/event_analytics/explorer/query_assist/input.tsx
@@ -7,8 +7,6 @@ import {
   EuiSmallButton,
   EuiComboBoxOptionOption,
   EuiCompressedFieldText,
-  EuiFlexGroup,
-  EuiFlexItem,
   EuiIcon,
   EuiInputPopover,
   EuiListGroup,
@@ -325,62 +323,58 @@ export const QueryAssistInput: React.FC<React.PropsWithChildren<Props>> = (props
 
   return (
     <>
-      <EuiFlexGroup gutterSize="none" alignItems="center" justifyContent="center">
-        <EuiFlexItem grow={false}>
-          <EuiIcon
-            className="euiFieldText"
-            style={{ padding: 8 }}
-            size="original"
-            type={chatLogo}
-          />
-        </EuiFlexItem>
-        <EuiFlexItem>
-          <EuiInputPopover
-            input={
-              <EuiCompressedFieldText
-                inputRef={inputRef}
-                placeholder="Ask me a question"
-                disabled={loading}
-                value={props.nlqInput}
-                onChange={(e) => {
-                  props.setNlqInput(e.target.value);
-                  dismissCallOut();
-                }}
-                onKeyDown={(e) => {
-                  // listen to enter key manually. the cursor jumps to CodeEditor with EuiForm's onSubmit
-                  if (e.key === 'Enter') runAndSummarize();
-                }}
-                fullWidth
-                onFocus={() => {
-                  props.setNeedsUpdate(false);
-                  props.setLastFocusedInput('nlq_input');
-                  if (props.nlqInput.length === 0) setIsPopoverOpen(true);
-                }}
+      <EuiInputPopover
+        input={
+          <EuiCompressedFieldText
+            inputRef={inputRef}
+            placeholder="Ask me a question"
+            disabled={loading}
+            value={props.nlqInput}
+            onChange={(e) => {
+              props.setNlqInput(e.target.value);
+              dismissCallOut();
+            }}
+            prepend={
+              <EuiIcon
+                className="euiFieldText"
+                style={{ padding: 8 }}
+                size="original"
+                type={chatLogo}
               />
             }
-            disableFocusTrap
-            fullWidth={true}
-            isOpen={isPopoverOpen}
-            closePopover={() => {
-              setIsPopoverOpen(false);
+            onKeyDown={(e) => {
+              // listen to enter key manually. the cursor jumps to CodeEditor with EuiForm's onSubmit
+              if (e.key === 'Enter') runAndSummarize();
             }}
-          >
-            <EuiListGroup flush={true} bordered={false} wrapText={true} maxWidth={false}>
-              {HARDCODED_SUGGESTIONS[selectedIndex]?.map((question, i) => (
-                <EuiListGroupItem
-                  key={i}
-                  onClick={() => {
-                    props.setNlqInput(question);
-                    inputRef.current?.focus();
-                    setIsPopoverOpen(false);
-                  }}
-                  label={question}
-                />
-              ))}
-            </EuiListGroup>
-          </EuiInputPopover>
-        </EuiFlexItem>
-      </EuiFlexGroup>
+            fullWidth
+            onFocus={() => {
+              props.setNeedsUpdate(false);
+              props.setLastFocusedInput('nlq_input');
+              if (props.nlqInput.length === 0) setIsPopoverOpen(true);
+            }}
+          />
+        }
+        disableFocusTrap
+        fullWidth={true}
+        isOpen={isPopoverOpen}
+        closePopover={() => {
+          setIsPopoverOpen(false);
+        }}
+      >
+        <EuiListGroup flush={true} bordered={false} wrapText={true} maxWidth={false}>
+          {HARDCODED_SUGGESTIONS[selectedIndex]?.map((question, i) => (
+            <EuiListGroupItem
+              key={i}
+              onClick={() => {
+                props.setNlqInput(question);
+                inputRef.current?.focus();
+                setIsPopoverOpen(false);
+              }}
+              label={question}
+            />
+          ))}
+        </EuiListGroup>
+      </EuiInputPopover>
       {props.callOut}
       <EuiSpacer size="s" />
       {props.children}
diff --git a/public/components/event_analytics/hooks/use_fetch_events.ts b/public/components/event_analytics/hooks/use_fetch_events.ts
index 98894bfdc..f6fe9a808 100644
--- a/public/components/event_analytics/hooks/use_fetch_events.ts
+++ b/public/components/event_analytics/hooks/use_fetch_events.ts
@@ -52,7 +52,7 @@ export const useFetchEvents = ({ pplService, requestParams }: IFetchEventsParams
   ) => {
     setIsEventsLoading(true);
     return pplService
-      .fetch({ query, format }, errorHandler)
+      .fetch({ query, format }, undefined, errorHandler)
       .then((res: any) => handler(res))
       .catch((err: any) => {
         console.error(err);