[Discover][Unified Search] Clicking on an individual error should foc…

…us the error on the monaco editor. (#148171) ## Summary Completes part of #136950. Closes #147986 ### Basic case: https://user-images.githubusercontent.com/22456368/209937498-c007be4e-4ced-46c4-bac5-5786b3d88074.mov ### Case with updating query, not running it, and clicking on errors: https://user-images.githubusercontent.com/22456368/209937718-a55e13fd-5a7c-4ec2-ac6f-bfce9578d75a.mov ### Fixed bug related to clearing the previous errors: #### Before: https://user-images.githubusercontent.com/22456368/209938380-3fcd04a6-8c49-4bc7-82f8-9e2cccf7e369.mov #### After https://user-images.githubusercontent.com/22456368/209938517-53101589-206e-4c26-be59-6ddb499c6183.mov Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
elastic · Jan 3, 2023 · fa3972b · fa3972b
1 parent 595ba8f
commit fa3972b
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 9 deletions.
diff --git a/src/plugins/discover/public/application/main/hooks/use_data_state.ts b/src/plugins/discover/public/application/main/hooks/use_data_state.ts
@@ -15,7 +15,7 @@ export function useDataState<T extends DataMsg>(data$: BehaviorSubject<T>) {
   useEffect(() => {
     const subscription = data$.subscribe((next) => {
       if (next.fetchStatus !== fetchState.fetchStatus) {
-        setFetchState({ ...fetchState, ...next });
+        setFetchState({ ...fetchState, ...next, ...(next.error ? {} : { error: undefined }) });
       }
     });
     return () => subscription.unsubscribe();

diff --git a/...ns/unified_search/public/query_string_input/text_based_languages_editor/editor_footer.tsx b/...ns/unified_search/public/query_string_input/text_based_languages_editor/editor_footer.tsx
@@ -21,20 +21,27 @@ import {
   EuiDescriptionListDescription,
 } from '@elastic/eui';
 import { Interpolation, Theme, css } from '@emotion/react';
+import { css as classNameCss } from '@emotion/css';
+
+import type { MonacoError } from './helpers';
 
 const isMac = navigator.platform.toLowerCase().indexOf('mac') >= 0;
 const COMMAND_KEY = isMac ? '⌘' : '^';
 
 interface EditorFooterProps {
   lines: number;
   containerCSS: Interpolation<Theme>;
-  errors?: Array<{ startLineNumber: number; message: string }>;
+  errors?: MonacoError[];
+  onErrorClick: (error: MonacoError) => void;
+  refreshErrors: () => void;
 }
 
 export const EditorFooter = memo(function EditorFooter({
   lines,
   containerCSS,
   errors,
+  onErrorClick,
+  refreshErrors,
 }: EditorFooterProps) {
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
   return (
@@ -75,7 +82,10 @@ export const EditorFooter = memo(function EditorFooter({
                             text-decoration: underline;
                           }
                         `}
-                        onClick={() => setIsPopoverOpen(!isPopoverOpen)}
+                        onClick={() => {
+                          refreshErrors();
+                          setIsPopoverOpen(!isPopoverOpen);
+                        }}
                       >
                         <p>
                           {i18n.translate(
@@ -104,7 +114,15 @@ export const EditorFooter = memo(function EditorFooter({
                       <EuiDescriptionList>
                         {errors.map((error, index) => {
                           return (
-                            <EuiDescriptionListDescription key={index}>
+                            <EuiDescriptionListDescription
+                              key={index}
+                              className={classNameCss`
+                                &:hover {
+                                  cursor: pointer;
+                                }
+                              `}
+                              onClick={() => onErrorClick(error)}
+                            >
                               <EuiFlexGroup gutterSize="xl" alignItems="flexStart">
                                 <EuiFlexItem grow={false}>
                                   <EuiFlexGroup gutterSize="s" alignItems="center">

diff --git a/src/plugins/unified_search/public/query_string_input/text_based_languages_editor/helpers.ts b/src/plugins/unified_search/public/query_string_input/text_based_languages_editor/helpers.ts
@@ -11,6 +11,15 @@ import useDebounce from 'react-use/lib/useDebounce';
 import { monaco } from '@kbn/monaco';
 import { i18n } from '@kbn/i18n';
 
+export interface MonacoError {
+  message: string;
+  startColumn: number;
+  startLineNumber: number;
+  endColumn: number;
+  endLineNumber: number;
+  severity: monaco.MarkerSeverity;
+}
+
 export const useDebounceWithOptions = (
   fn: Function,
   { skipFirstRender }: { skipFirstRender: boolean } = { skipFirstRender: false },
@@ -33,7 +42,7 @@ export const useDebounceWithOptions = (
   );
 };
 
-export const parseErrors = (errors: Error[], code: string) => {
+export const parseErrors = (errors: Error[], code: string): MonacoError[] => {
   return errors.map((error) => {
     if (error.message.includes('line')) {
       const text = error.message.split('line')[1];

diff --git a/src/plugins/unified_search/public/query_string_input/text_based_languages_editor/index.tsx b/src/plugins/unified_search/public/query_string_input/text_based_languages_editor/index.tsx
@@ -43,6 +43,7 @@ import {
   parseErrors,
   getInlineEditorText,
   getDocumentationSections,
+  MonacoError,
 } from './helpers';
 import { EditorFooter } from './editor_footer';
 import { ResizableButton } from './resizable_button';
@@ -103,9 +104,7 @@ export const TextBasedLanguagesEditor = memo(function TextBasedLanguagesEditor({
   const [isCompactFocused, setIsCompactFocused] = useState(isCodeEditorExpanded);
   const [isCodeEditorExpandedFocused, setIsCodeEditorExpandedFocused] = useState(false);
   const [isWordWrapped, setIsWordWrapped] = useState(true);
-  const [editorErrors, setEditorErrors] = useState<
-    Array<{ startLineNumber: number; message: string }>
-  >([]);
+  const [editorErrors, setEditorErrors] = useState<MonacoError[]>([]);
   const [documentationSections, setDocumentationSections] =
     useState<LanguageDocumentationSections>();
   const kibana = useKibana<IUnifiedSearchPluginServices>();
@@ -241,6 +240,19 @@ export const TextBasedLanguagesEditor = memo(function TextBasedLanguagesEditor({
     [errors]
   );
 
+  const onErrorClick = useCallback(({ startLineNumber, startColumn }: MonacoError) => {
+    if (!editor1.current) {
+      return;
+    }
+
+    editor1.current.focus();
+    editor1.current.setPosition({
+      lineNumber: startLineNumber,
+      column: startColumn,
+    });
+    editor1.current.revealLine(startLineNumber);
+  }, []);
+
   // Clean up the monaco editor and DOM on unmount
   useEffect(() => {
     const model = editorModel;
@@ -512,6 +524,8 @@ export const TextBasedLanguagesEditor = memo(function TextBasedLanguagesEditor({
                         lines={lines}
                         containerCSS={styles.bottomContainer}
                         errors={editorErrors}
+                        onErrorClick={onErrorClick}
+                        refreshErrors={onTextLangQuerySubmit}
                       />
                     )}
                   </div>
@@ -577,7 +591,13 @@ export const TextBasedLanguagesEditor = memo(function TextBasedLanguagesEditor({
         )}
       </EuiFlexGroup>
       {isCodeEditorExpanded && (
-        <EditorFooter lines={lines} containerCSS={styles.bottomContainer} errors={editorErrors} />
+        <EditorFooter
+          lines={lines}
+          containerCSS={styles.bottomContainer}
+          errors={editorErrors}
+          onErrorClick={onErrorClick}
+          refreshErrors={onTextLangQuerySubmit}
+        />
       )}
       {isCodeEditorExpanded && (
         <ResizableButton