UI state management

- To have a way to keep the UI state of the editor so that
  when users switch views the UI keeps its state.

src/brokers/add-broker/components/AddBrokerForm/BrokerProperties.tsx

@@ -1,3 +1,8 @@
+import {
+  ArtemisReducerOperations,
+  BrokerCreationFormDispatch,
+  BrokerCreationFormState,
+} from '../../../utils';
 import { GetConfigurationPage } from '../../../../configuration/broker-models';
 import {
   Accordion,
@@ -11,7 +16,7 @@ import {
   SplitItem,
   Title,
 } from '@patternfly/react-core';
-import { FC, useState } from 'react';
+import { FC, useContext, useState } from 'react';
 
 export type BrokerIDProp = {
   brokerId: number;
@@ -87,14 +92,29 @@ export const BrokerProperties: FC<BrokerIDProp> = ({
 }) => {
   console.log('configuring broker ', crName, 'in namespace', targetNs);
 
-  const [currentConfigItem, setCurrentConfigItem] = useState('');
+  const configId = 'broker-props-' + brokerId + '-' + crName + '-' + targetNs;
+
+  const { editorActiveProperties } = useContext(BrokerCreationFormState);
+  const dispatch = useContext(BrokerCreationFormDispatch);
+
+  const currentConfigItem = editorActiveProperties.activeProperties?.get(
+    configId,
+  )
+    ? editorActiveProperties.activeProperties?.get(configId)
+    : '';
 
   const onSelectBrokerConfigItem = (
     selectedItem: any,
     selectedItemProps: any,
   ) => {
     console.log('new selection selected', selectedItem);
-    setCurrentConfigItem(selectedItemProps.itemId);
+    dispatch({
+      operation: ArtemisReducerOperations.setEditorActiveProperty,
+      payload: {
+        itemId: configId,
+        value: selectedItemProps.itemId,
+      },
+    });
   };
 
   const brokerConfigItems = [

src/brokers/utils/add-broker.test.ts

@@ -1,4 +1,4 @@
-import { SelectOptionObject } from '@patternfly/react-core';
+import { SelectOptionObject, getUniqueId } from '@patternfly/react-core';
 import {
   ArtemisReducerOperations,
   EditorType,
@@ -802,4 +802,88 @@ describe('test the creation broker reducer', () => {
     });
     expect(stateExposeModeIngress.cr.spec.acceptors[0].expose).toBe(true);
   });
+
+  it('test updateEditorState', () => {
+    const initialState = newArtemisCRState('namespace');
+    const itemId0 = getUniqueId('str');
+    const state1 = artemisCrReducer(initialState, {
+      operation: ArtemisReducerOperations.setEditorActiveProperty,
+      payload: {
+        itemId: itemId0,
+        value: 'some state',
+      },
+    });
+
+    const itemId1 = getUniqueId('str1');
+    const state2 = artemisCrReducer(state1, {
+      operation: ArtemisReducerOperations.setEditorActiveProperty,
+      payload: {
+        itemId: itemId1,
+        value: true,
+      },
+    });
+
+    expect(state2.editorActiveProperties.activeProperties.get(itemId0)).toEqual(
+      'some state',
+    );
+    expect(state2.editorActiveProperties.activeProperties.get(itemId1)).toBe(
+      true,
+    );
+
+    const itemId2 = getUniqueId('str2');
+    const state3 = artemisCrReducer(state2, {
+      operation: ArtemisReducerOperations.setEditorActiveProperty,
+      payload: {
+        itemId: itemId2,
+        value: 'some new state',
+      },
+    });
+
+    const itemId3 = getUniqueId('str3');
+    const state4 = artemisCrReducer(state3, {
+      operation: ArtemisReducerOperations.setEditorActiveProperty,
+      payload: {
+        itemId: itemId3,
+        value: false,
+      },
+    });
+    expect(state4.editorActiveProperties.activeProperties.get(itemId2)).toEqual(
+      'some new state',
+    );
+    expect(state4.editorActiveProperties.activeProperties.get(itemId3)).toBe(
+      false,
+    );
+
+    const itemId4 = getUniqueId('str4');
+
+    let state5 = artemisCrReducer(state4, {
+      operation: ArtemisReducerOperations.setEditorActiveProperty,
+      payload: {
+        itemId: itemId4,
+        value: 'another state',
+      },
+    });
+
+    const itemId5 = getUniqueId('str5');
+
+    state5 = artemisCrReducer(state5, {
+      operation: ArtemisReducerOperations.setEditorActiveProperty,
+      payload: {
+        itemId: itemId5,
+        value: true,
+      },
+    });
+    expect(state5.editorActiveProperties.activeProperties.get(itemId2)).toEqual(
+      'some new state',
+    );
+    expect(state5.editorActiveProperties.activeProperties.get(itemId4)).toBe(
+      'another state',
+    );
+    expect(state5.editorActiveProperties.activeProperties.get(itemId5)).toEqual(
+      true,
+    );
+    expect(state5.editorActiveProperties.activeProperties.get(itemId1)).toBe(
+      true,
+    );
+  });
 });

src/brokers/utils/add-broker.ts

@@ -1,4 +1,7 @@
-import { AddBrokerResourceValues as FormState } from './import-types';
+import {
+  EditorActiveProperties,
+  AddBrokerResourceValues as FormState,
+} from './import-types';
 import {
   K8sResourceKind,
   K8sResourceCommon as ArtemisCR,
@@ -44,6 +47,9 @@ export const getArtemisCRState = (name: string, ns: string): FormState => {
     formState = {};
     formState.shouldShowYAMLMessage = true;
     formState.editorType = EditorType.BROKER;
+    formState.editorActiveProperties = {
+      activeProperties: new Map<string, any>(),
+    };
     artemisCRStateMap.set(key, formState);
   }
   formState.cr = initialCr(ns, name);
@@ -52,7 +58,7 @@ export const getArtemisCRState = (name: string, ns: string): FormState => {
 };
 
 export const newArtemisCRState = (namespace: string): FormState => {
-  const initialCr: ArtemisCR = {
+  const initCr: ArtemisCR = {
     apiVersion: 'broker.amq.io/v1beta1',
     kind: 'ActiveMQArtemis',
     metadata: {
@@ -77,7 +83,10 @@ export const newArtemisCRState = (namespace: string): FormState => {
   return {
     shouldShowYAMLMessage: true,
     editorType: EditorType.BROKER,
-    cr: initialCr,
+    cr: initCr,
+    editorActiveProperties: {
+      activeProperties: new Map<string, any>(),
+    },
   };
 };
 
@@ -189,6 +198,8 @@ export enum ArtemisReducerOperations {
   updateAnnotationIssuer,
   /** Updates the configuration's factory Class */
   updateConnectorFactoryClass,
+  /** updates the current state item */
+  setEditorActiveProperty,
 }
 
 type ArtemisReducerActionBase = {
@@ -236,7 +247,8 @@ type ArtemisReducerActions =
   | SetReplicasNumberAction
   | UpdateAcceptorFactoryClassAction
   | UpdateAnnotationIssuerAction
-  | UpdateConnectorFactoryClassAction;
+  | UpdateConnectorFactoryClassAction
+  | UpdateEditorStateAction;
 
 interface UpdateAnnotationIssuerAction extends ArtemisReducerActionBase {
   operation: ArtemisReducerOperations.updateAnnotationIssuer;
@@ -395,6 +407,11 @@ type FactoryClassPayload = {
   class: 'invm' | 'netty';
 };
 
+type EditorActivePropertyPayload = {
+  itemId: string;
+  value: any;
+};
+
 type SetModelPayload = {
   model: ArtemisCR;
 };
@@ -409,6 +426,10 @@ interface UpdateConnectorFactoryClassAction extends ArtemisReducerActionBase {
   payload: FactoryClassPayload;
 }
 
+interface UpdateEditorStateAction extends ArtemisReducerActionBase {
+  operation: ArtemisReducerOperations.setEditorActiveProperty;
+  payload: EditorActivePropertyPayload;
+}
 interface SetModelAction extends ArtemisReducerActionBase {
   operation: ArtemisReducerOperations.setModel;
   payload: SetModelPayload;
@@ -808,6 +829,13 @@ export const artemisCrReducer: React.Reducer<
         action.payload.class,
       );
       break;
+    case ArtemisReducerOperations.setEditorActiveProperty:
+      setEditorActiveProperty(
+        formState.editorActiveProperties,
+        action.payload.itemId,
+        action.payload.value,
+      );
+      break;
     case ArtemisReducerOperations.setModel:
       setModel(formState, action.payload.model);
       break;
@@ -1542,6 +1570,14 @@ const updateConfigFactoryClass = (
   }
 };
 
+const setEditorActiveProperty = (
+  state: EditorActiveProperties,
+  itemId: string,
+  value: any,
+): void => {
+  state.activeProperties.set(itemId, value);
+};
+
 const setModel = (formState: FormState, model: ArtemisCR): void => {
   formState.cr = model;
 };

src/brokers/utils/import-types.ts

@@ -1,8 +1,12 @@
 import { K8sResourceCommon } from '../../utils';
 import { EditorType } from './add-broker';
 
+export interface EditorActiveProperties {
+  activeProperties?: Map<string, any>;
+}
 export interface AddBrokerResourceValues {
   shouldShowYAMLMessage?: boolean;
   editorType?: EditorType;
   cr?: K8sResourceCommon;
+  editorActiveProperties?: EditorActiveProperties;
 }

src/configuration/acceptors-config.tsx

@@ -571,16 +571,24 @@ export const AcceptorConfigSection: FC<AcceptorConfigSectionProps> = ({
   configName,
 }) => {
   const { t } = useTranslation();
-  const { cr } = useContext(BrokerCreationFormState);
+  const { cr, editorActiveProperties } = useContext(BrokerCreationFormState);
   const dispatch = useContext(BrokerCreationFormDispatch);
 
-  const [isConfigExpanded, setIsConfigExpanded] = useState(false);
+  const configId = 'acceptor-config-' + configType + '-' + configName;
 
+  const isConfigExpanded =
+    editorActiveProperties.activeProperties?.get(configId);
   const [isActionOpen, setIsActionOpen] = useState(false);
   const [isNaming, setIsNaming] = useState(false);
 
   const onToggleAcceptorConfig = (expanded: boolean) => {
-    setIsConfigExpanded(expanded);
+    dispatch({
+      operation: ArtemisReducerOperations.setEditorActiveProperty,
+      payload: {
+        itemId: configId,
+        value: expanded,
+      },
+    });
   };
 
   const onSelectAction = (_event: any) => {