diff --git a/src/brokers/add-broker/components/AddBrokerForm/BrokerProperties.tsx b/src/brokers/add-broker/components/AddBrokerForm/BrokerProperties.tsx index 1ed30a12..826ff3dc 100644 --- a/src/brokers/add-broker/components/AddBrokerForm/BrokerProperties.tsx +++ b/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 = ({ }) => { 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 = [ diff --git a/src/brokers/utils/add-broker.test.ts b/src/brokers/utils/add-broker.test.ts index dfc0bd25..c7d1c1c7 100644 --- a/src/brokers/utils/add-broker.test.ts +++ b/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, + ); + }); }); diff --git a/src/brokers/utils/add-broker.ts b/src/brokers/utils/add-broker.ts index 3060bb2b..a0927dd6 100644 --- a/src/brokers/utils/add-broker.ts +++ b/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(), + }; 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(), + }, }; }; @@ -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; }; diff --git a/src/brokers/utils/import-types.ts b/src/brokers/utils/import-types.ts index f7ca0666..ca920b73 100644 --- a/src/brokers/utils/import-types.ts +++ b/src/brokers/utils/import-types.ts @@ -1,8 +1,12 @@ import { K8sResourceCommon } from '../../utils'; import { EditorType } from './add-broker'; +export interface EditorActiveProperties { + activeProperties?: Map; +} export interface AddBrokerResourceValues { shouldShowYAMLMessage?: boolean; editorType?: EditorType; cr?: K8sResourceCommon; + editorActiveProperties?: EditorActiveProperties; } diff --git a/src/configuration/acceptors-config.tsx b/src/configuration/acceptors-config.tsx index 212b81f7..1da6f156 100644 --- a/src/configuration/acceptors-config.tsx +++ b/src/configuration/acceptors-config.tsx @@ -571,16 +571,24 @@ export const AcceptorConfigSection: FC = ({ 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) => {