clean selected field values when switching data source on create page

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

Author: jackiehanyang

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'