From 0335282a2d2b823f2d68a1c6ee9b1c7bf2031228 Mon Sep 17 00:00:00 2001
From: Jackie Han <jkhanjob@gmail.com>
Date: Mon, 29 Apr 2024 15:33:58 -0700
Subject: [PATCH] clean selected field values when switching data source on
 create page (#742)

* clean selected field values when switching data source on create page

Signed-off-by: Jackie Han <jkhanjob@gmail.com>

* update snapshot for create page

Signed-off-by: Jackie Han <jkhanjob@gmail.com>

---------

Signed-off-by: Jackie Han <jkhanjob@gmail.com>
---
 .../components/Datasource/DataSource.tsx       | 10 ++++++++--
 .../containers/DefineDetector.tsx              | 18 ++++++++++--------
 .../__snapshots__/DefineDetector.test.tsx.snap | 14 +++++++-------
 3 files changed, 25 insertions(+), 17 deletions(-)

diff --git a/public/pages/DefineDetector/components/Datasource/DataSource.tsx b/public/pages/DefineDetector/components/Datasource/DataSource.tsx
index 4fbc882d..904e1b0b 100644
--- a/public/pages/DefineDetector/components/Datasource/DataSource.tsx
+++ b/public/pages/DefineDetector/components/Datasource/DataSource.tsx
@@ -10,7 +10,7 @@
  */
 
 import { EuiComboBox, EuiCallOut, EuiSpacer } from '@elastic/eui';
-import { Field, FieldProps, FormikProps } from 'formik';
+import { Field, FieldProps, FormikProps, useFormikContext } from 'formik';
 import { debounce, get } from 'lodash';
 import React, { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
@@ -58,7 +58,13 @@ export function DataSource(props: DataSourceProps) {
   );
   const [queryText, setQueryText] = useState('');
   const opensearchState = useSelector((state: AppState) => state.opensearch);
+  const { setFieldValue } = useFormikContext();
+
   useEffect(() => {
+    setFieldValue('index', []);
+    setFieldValue('timeField', undefined);
+    setFieldValue('filters', []);
+
     const getInitialIndices = async () => {
       await dispatch(getIndices(queryText, dataSourceId));
     };
@@ -102,7 +108,7 @@ export function DataSource(props: DataSourceProps) {
   const visibleAliases = get(opensearchState, 'aliases', []) as IndexAlias[];
 
   return (
-    <ContentPanel title="Data Source" titleSize="s">
+    <ContentPanel title="Select Data" titleSize="s">
       {props.isEdit && isDifferentIndex() ? (
         <div>
           <EuiCallOut
diff --git a/public/pages/DefineDetector/containers/DefineDetector.tsx b/public/pages/DefineDetector/containers/DefineDetector.tsx
index 13de30cc..66a357fd 100644
--- a/public/pages/DefineDetector/containers/DefineDetector.tsx
+++ b/public/pages/DefineDetector/containers/DefineDetector.tsx
@@ -165,14 +165,16 @@ export const DefineDetector = (props: DefineDetectorProps) => {
 
   // If no detector found with ID, redirect it to list
   useEffect(() => {
-    const { history, location } = props;
-    const updatedParams = {
-      dataSourceId: MDSCreateState.selectedDataSourceId,
-    };
-    history.replace({
-      ...location,
-      search: queryString.stringify(updatedParams),
-    });
+    if (dataSourceEnabled) {
+      const { history, location } = props;
+      const updatedParams = {
+        dataSourceId: MDSCreateState.selectedDataSourceId,
+      };
+      history.replace({
+        ...location,
+        search: queryString.stringify(updatedParams),
+      });
+    }
     if (props.isEdit && hasError) {
       core.notifications.toasts.addDanger(
         'Unable to find the detector for editing'
diff --git a/public/pages/DefineDetector/containers/__tests__/__snapshots__/DefineDetector.test.tsx.snap b/public/pages/DefineDetector/containers/__tests__/__snapshots__/DefineDetector.test.tsx.snap
index 7c86c166..93f0c0c4 100644
--- a/public/pages/DefineDetector/containers/__tests__/__snapshots__/DefineDetector.test.tsx.snap
+++ b/public/pages/DefineDetector/containers/__tests__/__snapshots__/DefineDetector.test.tsx.snap
@@ -198,7 +198,7 @@ exports[`<DefineDetector /> Full creating detector definition renders the compon
             class="euiTitle euiTitle--small"
             data-test-subj="contentPanelTitle"
           >
-            Data Source
+            Select Data
           </h3>
           <div
             class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
@@ -528,11 +528,11 @@ exports[`<DefineDetector /> Full creating detector definition renders the compon
                       data-test-subj="comboBoxInput"
                       tabindex="-1"
                     >
-                      <span
-                        class="euiComboBoxPill euiComboBoxPill--plainText"
+                      <p
+                        class="euiComboBoxPlaceholder"
                       >
-                        timestamp
-                      </span>
+                        Find timestamp
+                      </p>
                       <div
                         class="euiComboBox__input"
                         style="font-size: 14px; display: inline-block;"
@@ -1175,7 +1175,7 @@ exports[`<DefineDetector /> empty creating detector definition renders the compo
             class="euiTitle euiTitle--small"
             data-test-subj="contentPanelTitle"
           >
-            Data Source
+            Select Data
           </h3>
           <div
             class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
@@ -2152,7 +2152,7 @@ exports[`<DefineDetector /> empty editing detector definition renders the compon
             class="euiTitle euiTitle--small"
             data-test-subj="contentPanelTitle"
           >
-            Data Source
+            Select Data
           </h3>
           <div
             class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"