[Lens][Expressions] Fixes react Error When Rendering Recoverable Error (

#196285) ## Summary 1. Fixes #159146 2. Makes sure that the `data-render-error` disappears once the expression renderer is recovered (ie. when user fixes the query) - before once the error appears, it stays there forever. <img width="651" alt="Screenshot 2024-10-15 at 13 11 14" src="https://github.com/user-attachments/assets/9fc3639a-723f-4ab2-9508-85caa4052ab9">
elastic · Oct 17, 2024 · 8cfa396 · 8cfa396
1 parent 8b005d0
commit 8cfa396
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 21 deletions.
diff --git a/...lugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_errors.tsx b/...lugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_errors.tsx
@@ -20,24 +20,27 @@ import { getLongMessage } from '../../../user_messages_utils';
 interface Props {
   errors: Array<string | UserMessage>;
   title: string;
+  onRender?: () => void;
 }
 
-export function WorkspaceErrors(props: Props) {
+export function WorkspaceErrors({ errors, title, onRender }: Props) {
   const [activePage, setActivePage] = useState(0);
 
-  const activeError = props.errors.length ? props.errors[activePage] : '';
+  const activeError = errors.length ? errors[activePage] : '';
+
+  React.useEffect(() => onRender?.(), [onRender]);
 
   return (
     <EuiEmptyPrompt
       actions={
-        props.errors.length > 1 ? (
+        errors.length > 1 ? (
           <EuiFlexGroup
             justifyContent="spaceAround"
             data-test-subj="lnsWorkspaceErrorsPaginationControl"
           >
             <EuiFlexItem grow={false}>
               <EuiPagination
-                pageCount={props.errors.length}
+                pageCount={errors.length}
                 activePage={activePage}
                 onPageClick={setActivePage}
               />
@@ -64,7 +67,7 @@ export function WorkspaceErrors(props: Props) {
           )}
         </div>
       }
-      title={<h2>{props.title}</h2>}
+      title={<h2>{title}</h2>}
       iconColor="danger"
       iconType="warning"
       data-test-subj="lnsWorkspaceErrors"

diff --git a/...plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx b/...plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx
@@ -676,13 +676,13 @@ export const InnerWorkspacePanel = React.memo(function InnerWorkspacePanel({
 
 function useReportingState(errors: UserMessage[]): {
   isRenderComplete: boolean;
-  hasDynamicError: boolean;
+  hasRequestError: boolean;
+  setHasRequestError: (state: boolean) => void;
   setIsRenderComplete: (state: boolean) => void;
-  setDynamicError: (state: boolean) => void;
   nodeRef: React.RefObject<HTMLDivElement>;
 } {
   const [isRenderComplete, setIsRenderComplete] = useState(Boolean(errors?.length));
-  const [hasDynamicError, setDynamicError] = useState(false);
+  const [hasRequestError, setHasRequestError] = useState(false);
   const nodeRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -691,9 +691,13 @@ function useReportingState(errors: UserMessage[]): {
     }
   }, [isRenderComplete, errors]);
 
-  return { isRenderComplete, setIsRenderComplete, hasDynamicError, setDynamicError, nodeRef };
+  return { isRenderComplete, setIsRenderComplete, hasRequestError, setHasRequestError, nodeRef };
 }
 
+const dataLoadingErrorTitle = i18n.translate('xpack.lens.editorFrame.dataFailure', {
+  defaultMessage: `An error occurred when loading data`,
+});
+
 export const VisualizationWrapper = ({
   expression,
   lensInspector,
@@ -730,13 +734,14 @@ export const VisualizationWrapper = ({
 
   const searchContext = useLensSelector(selectExecutionContextSearch);
   // Used for reporting
-  const { isRenderComplete, hasDynamicError, setIsRenderComplete, setDynamicError, nodeRef } =
+  const { isRenderComplete, hasRequestError, setIsRenderComplete, setHasRequestError, nodeRef } =
     useReportingState(errors);
 
   const onRenderHandler = useCallback(() => {
+    setHasRequestError(false);
     setIsRenderComplete(true);
     onRender$();
-  }, [setIsRenderComplete, onRender$]);
+  }, [onRender$, setHasRequestError, setIsRenderComplete]);
 
   const searchSessionId = useLensSelector(selectSearchSessionId);
 
@@ -759,17 +764,13 @@ export const VisualizationWrapper = ({
     );
   }
 
-  const dataLoadingErrorTitle = i18n.translate('xpack.lens.editorFrame.dataFailure', {
-    defaultMessage: `An error occurred when loading data`,
-  });
-
   return (
     <div
       className="lnsExpressionRenderer"
       data-shared-items-container
       data-render-complete={isRenderComplete}
       data-shared-item=""
-      data-render-error={hasDynamicError ? dataLoadingErrorTitle : undefined}
+      data-render-error={hasRequestError ? dataLoadingErrorTitle : undefined}
       ref={nodeRef}
     >
       <ExpressionRendererComponent
@@ -795,11 +796,13 @@ export const VisualizationWrapper = ({
             ? [errorMessage]
             : [];
 
-          if (!hasDynamicError) {
-            setDynamicError(true);
-          }
-
-          return <WorkspaceErrors errors={visibleErrorMessages} title={dataLoadingErrorTitle} />;
+          return (
+            <WorkspaceErrors
+              errors={visibleErrorMessages}
+              title={dataLoadingErrorTitle}
+              onRender={() => setHasRequestError(true)}
+            />
+          );
         }}
       />
     </div>