From a602fa8924041a48bb71552c7282f0d3c63826c9 Mon Sep 17 00:00:00 2001
From: Walter Rafelsberger <walter.rafelsberger@elastic.co>
Date: Thu, 27 Oct 2022 18:01:28 +0200
Subject: [PATCH] Adds SavedObjectsWarning to analytics results pages.
 (#144109)

- Fixes the saved object sync warning that should be shown on the analytics result pages.
- Adds a check if the jobs description is an empty string to avoid unnecessary whitespace rendering.
---
 .../exploration_page_wrapper.tsx              |  2 +-
 .../outlier_exploration.tsx                   |  2 +-
 .../pages/analytics_exploration/page.tsx      | 27 ++++++++++++++++++-
 3 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/exploration_page_wrapper/exploration_page_wrapper.tsx b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/exploration_page_wrapper/exploration_page_wrapper.tsx
index 482c214f884a3..c10c3e67be443 100644
--- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/exploration_page_wrapper/exploration_page_wrapper.tsx
+++ b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/exploration_page_wrapper/exploration_page_wrapper.tsx
@@ -161,7 +161,7 @@ export const ExplorationPageWrapper: FC<Props> = ({
 
   return (
     <>
-      {typeof jobConfig?.description !== 'undefined' && (
+      {typeof jobConfig?.description !== 'undefined' && jobConfig?.description !== '' && (
         <>
           <EuiText>{jobConfig?.description}</EuiText>
           <EuiSpacer size="m" />
diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/outlier_exploration/outlier_exploration.tsx b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/outlier_exploration/outlier_exploration.tsx
index 93ceccf2756dc..67af8f7089210 100644
--- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/outlier_exploration/outlier_exploration.tsx
+++ b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/outlier_exploration/outlier_exploration.tsx
@@ -121,7 +121,7 @@ export const OutlierExploration: FC<ExplorationProps> = React.memo(({ jobId }) =
 
   return (
     <>
-      {typeof jobConfig?.description !== 'undefined' && (
+      {typeof jobConfig?.description !== 'undefined' && jobConfig?.description !== '' && (
         <>
           <EuiText>{jobConfig?.description}</EuiText>
           <EuiSpacer size="m" />
diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/page.tsx b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/page.tsx
index b8ed840397675..0550226599eb1 100644
--- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/page.tsx
+++ b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/page.tsx
@@ -25,6 +25,7 @@ import {
 } from '../components/analytics_selector';
 import { AnalyticsEmptyPrompt } from '../analytics_management/components/empty_prompt';
 import { useUrlState } from '../../../util/url_state';
+import { SavedObjectsWarning } from '../../../components/saved_objects_warning';
 
 export const Page: FC<{
   jobId: string;
@@ -41,7 +42,9 @@ export const Page: FC<{
   } = useMlApiContext();
   const helpLink = docLinks.links.ml.dataFrameAnalytics;
   const jobIdToUse = jobId ?? analyticsId?.job_id;
-  const analysisTypeToUse = analysisType || analyticsId?.analysis_type;
+  const [analysisTypeToUse, setAnalysisTypeToUse] = useState<
+    DataFrameAnalysisConfigType | undefined
+  >(analysisType || analyticsId?.analysis_type);
 
   const [, setGlobalState] = useUrlState('_g');
 
@@ -55,6 +58,25 @@ export const Page: FC<{
     }
   };
 
+  // The inner components of the results page don't have a concept of reloading the full page.
+  // Because we might want to refresh though if a user has to fix unsynced saved objects,
+  // we achieve this here by unmounting the inner pages first by setting `analysisTypeToUse`
+  // to `undefined`. The `useEffect()` below will then check if `analysisTypeToUse` doesn't
+  // match the passed in analyis type and will update it once again, the re-mounted
+  // page will then again fetch the most recent results.
+  const refresh = () => {
+    setAnalysisTypeToUse(undefined);
+  };
+
+  useEffect(
+    function checkRefresh() {
+      if (analysisTypeToUse !== analysisType || analyticsId?.analysis_type) {
+        setAnalysisTypeToUse(analysisType || analyticsId?.analysis_type);
+      }
+    },
+    [analyticsId, analysisType, analysisTypeToUse]
+  );
+
   useEffect(function checkJobs() {
     checkJobsExist();
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -126,6 +148,9 @@ export const Page: FC<{
           />
         </MlPageHeader>
       )}
+
+      <SavedObjectsWarning onCloseFlyout={refresh} />
+
       {jobIdToUse && analysisTypeToUse ? (
         <div data-test-subj="mlPageDataFrameAnalyticsExploration">
           {analysisTypeToUse === ANALYSIS_CONFIG_TYPE.OUTLIER_DETECTION && (