diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_errors.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_errors.tsx index a00fa978b5cc9..253cbe51cfbd4 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_errors.tsx +++ b/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; 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 ( 1 ? ( + errors.length > 1 ? ( @@ -64,7 +67,7 @@ export function WorkspaceErrors(props: Props) { )} } - title={

{props.title}

} + title={

{title}

} iconColor="danger" iconType="warning" data-test-subj="lnsWorkspaceErrors" diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx index 68c63f1da52dd..6c4a94d77a871 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx +++ b/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; } { const [isRenderComplete, setIsRenderComplete] = useState(Boolean(errors?.length)); - const [hasDynamicError, setDynamicError] = useState(false); + const [hasRequestError, setHasRequestError] = useState(false); const nodeRef = useRef(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 (
; + return ( + setHasRequestError(true)} + /> + ); }} />