Display selected clusters correctly on edit page (#1011)

* clusters show up on edit page

Signed-off-by: Amit Galitzky <[email protected]>

* update release notes

Signed-off-by: Amit Galitzky <[email protected]>

---------

Signed-off-by: Amit Galitzky <[email protected]>

Author: amitgalitz

public/pages/DefineDetector/components/Datasource/DataSource.tsx

@@ -46,8 +46,7 @@ import { INITIAL_MODEL_CONFIGURATION_VALUES } from '../../../ConfigureModel/util
 import { FILTER_TYPES } from '../../../../models/interfaces';
 import { useLocation } from 'react-router-dom';
 import _ from 'lodash';
-import { cleanString } from '../../../../../../../src/plugins/vis_type_vega/public/expressions/helpers';
-import { L } from '../../../../../../../src/plugins/maps_legacy/public/lazy_load_bundle/lazy';
+import { getClusterOptionLabel } from '../../utils/helpers';
 
 interface DataSourceProps {
   formikProps: FormikProps<DetectorDefinitionFormikValues>;
@@ -59,7 +58,7 @@ interface DataSourceProps {
   oldFilterQuery: any;
 }
 
-interface ClusterOption {
+export interface ClusterOption {
   label: string;
   cluster: string;
   localcluster: string;
@@ -81,7 +80,7 @@ export function DataSource(props: DataSourceProps) {
   useEffect(() => {
     const getInitialClusters = async () => {
       await dispatch(getClustersInfo(dataSourceId));
-      setFieldValue('clusters', props.formikProps.values.clusters);
+      handleClusterUpdate(opensearchState.clusters);
     };
     getInitialClusters();
   }, [dataSourceId]);
@@ -141,7 +140,7 @@ export function DataSource(props: DataSourceProps) {
     return clustersString;
   };
 
-  useEffect(() => {
+  const handleClusterUpdate = (clusters: ClusterInfo[]) => {
     if (opensearchState.clusters && opensearchState.clusters.length > 0) {
       const localCluster: ClusterInfo[] = getLocalCluster(
         opensearchState.clusters
@@ -156,10 +155,11 @@ export function DataSource(props: DataSourceProps) {
         setFieldValue('clusters', getVisibleClusterOptions(localCluster));
       }
     }
-  }, [opensearchState.clusters]);
+  };
 
-  const getClusterOptionLabel = (clusterInfo: ClusterInfo) =>
-    `${clusterInfo.name} ${clusterInfo.localCluster ? '(Local)' : '(Remote)'}`;
+  useEffect(() => {
+    handleClusterUpdate(opensearchState.clusters);
+  }, [opensearchState.clusters]);
 
   useEffect(() => {
     setIndexNames(props.formikProps.values.index);

public/pages/DefineDetector/containers/DefineDetector.tsx

@@ -17,7 +17,7 @@ import React, {
   useState,
 } from 'react';
 import { RouteComponentProps, useLocation } from 'react-router';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { Dispatch } from 'redux';
 import { FormikProps, Formik } from 'formik';
 import { get, isEmpty } from 'lodash';
@@ -69,6 +69,7 @@ import {
   isDataSourceCompatible,
 } from '../../../pages/utils/helpers';
 import queryString from 'querystring';
+import { AppState } from '../../../redux/reducers';
 
 interface DefineDetectorRouterProps {
   detectorId?: string;
@@ -89,7 +90,7 @@ export const DefineDetector = (props: DefineDetectorProps) => {
   const MDSQueryParams = getDataSourceFromURL(location);
   const dataSourceId = MDSQueryParams.dataSourceId;
   const dataSourceEnabled = getDataSourceEnabled().enabled;
-
+  const opensearchState = useSelector((state: AppState) => state.opensearch);
   const core = React.useContext(CoreServicesContext) as CoreStart;
   const dispatch = useDispatch<Dispatch<APIAction>>();
   useHideSideNavBar(true, false);
@@ -345,7 +346,7 @@ export const DefineDetector = (props: DefineDetectorProps) => {
       initialValues={
         props.initialValues
           ? props.initialValues
-          : detectorDefinitionToFormik(detector)
+          : detectorDefinitionToFormik(detector, opensearchState.clusters)
       }
       enableReinitialize={true}
       onSubmit={() => {}}

public/pages/DefineDetector/containers/__tests__/DefineDetector.test.tsx

@@ -26,32 +26,40 @@ import {
   INITIAL_DETECTOR_DEFINITION_VALUES,
   testDetectorDefinitionValues,
 } from '../../utils/constants';
+import { getRandomDetector } from '../../../../redux/reducers/__tests__/utils';
+import { useFetchDetectorInfo } from '../../../CreateDetectorSteps/hooks/useFetchDetectorInfo';
 
 jest.mock('../../../../services', () => {
   const originalModule = jest.requireActual('../../../../services');
 
   return {
     ...originalModule,
     getDataSourceEnabled: () => ({
-      enabled: false  
+      enabled: false,
     }),
     getUISettings: () => ({
       get: (flag) => {
         if (flag === 'home:useNewHomePage') {
-          return false; 
+          return false;
         }
         return originalModule.getUISettings().get(flag);
-      }
+      },
     }),
     getNavigationUI: () => ({
-      HeaderControl: null 
+      HeaderControl: null,
     }),
     getApplication: () => ({
-      setAppRightControls: null, 
-    })
+      setAppRightControls: null,
+    }),
   };
 });
 
+jest.mock('../../../CreateDetectorSteps/hooks/useFetchDetectorInfo', () => ({
+  // Within each test, the mock implementation for useFetchDetectorInfo is set using jest.Mock.
+  // This ensures that the hook returns the desired values for each test case.
+  useFetchDetectorInfo: jest.fn(),
+}));
+
 const renderWithRouterEmpty = (isEdit: boolean = false) => ({
   ...render(
     <Provider store={configureStore(httpClientMock)}>
@@ -98,6 +106,28 @@ const renderWithRouterFull = (isEdit: boolean = false) => ({
   ),
 });
 
+const renderWithRouterFullAndEdit = (isEdit: boolean = true) => ({
+  ...render(
+    <Provider store={configureStore(httpClientMock)}>
+      <Router>
+        <Switch>
+          <Route
+            render={(props: RouteComponentProps) => (
+              <CoreServicesContext.Provider value={coreServicesMock}>
+                <DefineDetector
+                  setActionMenu={jest.fn()}
+                  isEdit={isEdit}
+                  {...props}
+                />
+              </CoreServicesContext.Provider>
+            )}
+          />
+        </Switch>
+      </Router>
+    </Provider>
+  ),
+});
+
 describe('<DefineDetector /> Full', () => {
   beforeEach(() => {
     jest.clearAllMocks();
@@ -106,12 +136,32 @@ describe('<DefineDetector /> Full', () => {
   });
   describe('creating detector definition', () => {
     test('renders the component', () => {
+      const detectorInfo = {
+        detector: getRandomDetector(true),
+        hasError: false,
+        isLoadingDetector: true,
+        errorMessage: undefined,
+      };
+
+      (useFetchDetectorInfo as jest.Mock).mockImplementation(
+        () => detectorInfo
+      );
       const { container, getByText } = renderWithRouterFull(false);
       getByText('Define detector');
       expect(container.firstChild).toMatchSnapshot();
     });
 
     test('duplicate name', async () => {
+      const detectorInfo = {
+        detector: getRandomDetector(true),
+        hasError: false,
+        isLoadingDetector: true,
+        errorMessage: undefined,
+      };
+
+      (useFetchDetectorInfo as jest.Mock).mockImplementation(
+        () => detectorInfo
+      );
       httpClientMock.get = jest.fn().mockResolvedValue({
         ok: true,
         response: {
@@ -130,6 +180,31 @@ describe('<DefineDetector /> Full', () => {
   });
 });
 
+describe('<DefineDetector /> FullEdit', () => {
+  beforeEach(() => {
+    console.error = jest.fn();
+    console.warn = jest.fn();
+  });
+  describe('editing detector page', () => {
+    test('renders the component', () => {
+      const detectorInfo = {
+        detector: getRandomDetector(true, '', ['opensearch:index-1']),
+        hasError: false,
+        isLoadingDetector: true,
+        errorMessage: undefined,
+      };
+
+      (useFetchDetectorInfo as jest.Mock).mockImplementation(
+        () => detectorInfo
+      );
+      const { container, getByText } = renderWithRouterFullAndEdit(true);
+      getByText('Edit detector settings');
+      getByText('opensearch (Remote)');
+      expect(container.firstChild).toMatchSnapshot();
+    });
+  });
+});
+
 describe('<DefineDetector /> empty', () => {
   beforeEach(() => {
     jest.clearAllMocks();