clean selected field values when switching data source on create page (#742) (#743)

* 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>
(cherry picked from commit 0335282)

Co-authored-by: Jackie Han <jkhanjob@gmail.com>

Author: opensearch-trigger-bot[bot]

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

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'

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"