[8.x] [Lens][Expressions] Fixes react Error When Rendering Recoverabl…

…e Error (#196285) (#196714)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[Lens][Expressions] Fixes react Error When Rendering Recoverable
Error (#196285)](#196285)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Marta
Bondyra","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-10-17T14:22:01Z","message":"[Lens][Expressions]
Fixes react Error When Rendering Recoverable Error (#196285)\n\n##
Summary\r\n\r\n1. Fixes
https://github.com/elastic/kibana/issues/159146\r\n2. Makes sure that
the `data-render-error` disappears once the\r\nexpression renderer is
recovered (ie. when user fixes the query) -\r\nbefore once the error
appears, it stays there forever.\r\n\r\n\r\n<img width=\"651\"
alt=\"Screenshot 2024-10-15 at 13 11
14\"\r\nsrc=\"https://github.com/user-attachments/assets/9fc3639a-723f-4ab2-9508-85caa4052ab9\">","sha":"8cfa396f463b10006f247f91c10c591ac19f6dc2","branchLabelMapping":{"^v9.0.0$":"main","^v8.17.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","Team:Visualizations","Feature:Lens","v9.0.0","backport:prev-minor","v8.17.0"],"title":"[Lens][Expressions]
Fixes react Error When Rendering Recoverable
Error","number":196285,"url":"https://github.com/elastic/kibana/pull/196285","mergeCommit":{"message":"[Lens][Expressions]
Fixes react Error When Rendering Recoverable Error (#196285)\n\n##
Summary\r\n\r\n1. Fixes
https://github.com/elastic/kibana/issues/159146\r\n2. Makes sure that
the `data-render-error` disappears once the\r\nexpression renderer is
recovered (ie. when user fixes the query) -\r\nbefore once the error
appears, it stays there forever.\r\n\r\n\r\n<img width=\"651\"
alt=\"Screenshot 2024-10-15 at 13 11
14\"\r\nsrc=\"https://github.com/user-attachments/assets/9fc3639a-723f-4ab2-9508-85caa4052ab9\">","sha":"8cfa396f463b10006f247f91c10c591ac19f6dc2"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/196285","number":196285,"mergeCommit":{"message":"[Lens][Expressions]
Fixes react Error When Rendering Recoverable Error (#196285)\n\n##
Summary\r\n\r\n1. Fixes
https://github.com/elastic/kibana/issues/159146\r\n2. Makes sure that
the `data-render-error` disappears once the\r\nexpression renderer is
recovered (ie. when user fixes the query) -\r\nbefore once the error
appears, it stays there forever.\r\n\r\n\r\n<img width=\"651\"
alt=\"Screenshot 2024-10-15 at 13 11
14\"\r\nsrc=\"https://github.com/user-attachments/assets/9fc3639a-723f-4ab2-9508-85caa4052ab9\">","sha":"8cfa396f463b10006f247f91c10c591ac19f6dc2"}},{"branch":"8.x","label":"v8.17.0","branchLabelMappingKey":"^v8.17.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Marta Bondyra <[email protected]>

x-pack/plugins/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"

x-pack/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>