diff --git a/packages/orchestrator-ui-components/src/components/WfoSubscription/WfoSubscriptionProductBlock/WfoProductBlockKeyValueRow.tsx b/packages/orchestrator-ui-components/src/components/WfoSubscription/WfoSubscriptionProductBlock/WfoProductBlockKeyValueRow.tsx index 50ace4bc1..07d18ad9b 100644 --- a/packages/orchestrator-ui-components/src/components/WfoSubscription/WfoSubscriptionProductBlock/WfoProductBlockKeyValueRow.tsx +++ b/packages/orchestrator-ui-components/src/components/WfoSubscription/WfoSubscriptionProductBlock/WfoProductBlockKeyValueRow.tsx @@ -2,8 +2,9 @@ import React, { FC } from 'react'; import { EuiBadge } from '@elastic/eui'; -import { useValueOverride } from '@/contexts'; +import { ValueOverrideFunction, useValueOverride } from '@/contexts'; import { useWithOrchestratorTheme } from '@/hooks'; +import { useAppSelector } from '@/rtk/hooks'; import { FieldValue } from '@/types'; import { camelToHuman } from '@/utils'; @@ -20,6 +21,34 @@ export const WfoProductBlockKeyValueRow: FC< useWithOrchestratorTheme(getStyles); const { valueOverride } = useValueOverride(); + // START ------ Get data from store + const valueOverride2 = useAppSelector( + (state) => + state.orchestratorComponentOverride?.subscriptionDetail + ?.valueOverrides, + ); + + // Should be placed in a hook + const getRenderedValue = ( + fieldValue: FieldValue, + ): React.ReactNode | null => { + if (!valueOverride2) { + return null; + } + + const renderFunctionForField: ValueOverrideFunction | undefined = + valueOverride2[fieldValue.field]; + + // This check is needed because TS does not infer the type correctly + if (renderFunctionForField) { + return renderFunctionForField(fieldValue); + } + + return null; + }; + + /////// END + const { field, value } = fieldValue; const WfoProductBlockValue: FC<{ value: FieldValue['value'] }> = ({ @@ -41,6 +70,12 @@ export const WfoProductBlockKeyValueRow: FC< )} + {/* Todo Temporary copy of previous col to compare solutions */} + + {getRenderedValue?.(fieldValue) ?? ( + + )} + ); }; diff --git a/packages/orchestrator-ui-components/src/rtk/slices/index.ts b/packages/orchestrator-ui-components/src/rtk/slices/index.ts index e0f8a0cc9..7b3ad0b9f 100644 --- a/packages/orchestrator-ui-components/src/rtk/slices/index.ts +++ b/packages/orchestrator-ui-components/src/rtk/slices/index.ts @@ -1,3 +1,4 @@ +export * from './customApis'; +export * from './orchestratorComponentOverride'; export * from './toastMessages'; export * from './orchestratorConfig'; -export * from './customApis'; diff --git a/packages/orchestrator-ui-components/src/rtk/slices/orchestratorComponentOverride.ts b/packages/orchestrator-ui-components/src/rtk/slices/orchestratorComponentOverride.ts new file mode 100644 index 000000000..e877586cf --- /dev/null +++ b/packages/orchestrator-ui-components/src/rtk/slices/orchestratorComponentOverride.ts @@ -0,0 +1,21 @@ +import { Slice, createSlice } from '@reduxjs/toolkit'; + +import { ValueOverrideConfiguration } from '@/contexts'; + +export type OrchestratorComponentOverride = { + subscriptionDetail?: { + valueOverrides?: ValueOverrideConfiguration; + }; +}; + +type OrchestratorComponentOverrideSlice = Slice; + +export const getOrchestratorComponentOverrideSlice = ( + config: OrchestratorComponentOverride, +): OrchestratorComponentOverrideSlice => { + return createSlice({ + name: 'orchestratorComponentOverride', + initialState: config, + reducers: {}, + }); +}; diff --git a/packages/orchestrator-ui-components/src/rtk/store.ts b/packages/orchestrator-ui-components/src/rtk/store.ts index c6ad5d719..50b2d13c5 100644 --- a/packages/orchestrator-ui-components/src/rtk/store.ts +++ b/packages/orchestrator-ui-components/src/rtk/store.ts @@ -4,6 +4,10 @@ import type { Dispatch, UnknownAction } from '@reduxjs/toolkit'; import { CombinedState } from '@reduxjs/toolkit/query'; import { CustomApiConfig, getCustomApiSlice } from '@/rtk/slices'; +import { + OrchestratorComponentOverride, + getOrchestratorComponentOverrideSlice, +} from '@/rtk/slices/orchestratorComponentOverride'; import type { OrchestratorConfig } from '@/types'; import { orchestratorApi } from './api'; @@ -17,14 +21,23 @@ export type RootState = { >; toastMessages: ReturnType; orchestratorConfig: OrchestratorConfig; + orchestratorComponentOverride?: OrchestratorComponentOverride; customApis: CustomApiConfig[]; }; -export const getOrchestratorStore = ( - orchestratorConfig: OrchestratorConfig, - customApis: CustomApiConfig[], -): EnhancedStore => { +export type InitialOrchestratorStoreConfig = Pick< + RootState, + 'orchestratorConfig' | 'customApis' | 'orchestratorComponentOverride' +>; + +export const getOrchestratorStore = ({ + orchestratorConfig, + orchestratorComponentOverride = {}, + customApis, +}: InitialOrchestratorStoreConfig): EnhancedStore => { const configSlice = getOrchestratorConfigSlice(orchestratorConfig); + const orchestratorComponentOverrideSlice = + getOrchestratorComponentOverrideSlice(orchestratorComponentOverride); const customApisSlice = getCustomApiSlice(customApis); const orchestratorStore = configureStore({ @@ -32,6 +45,8 @@ export const getOrchestratorStore = ( [orchestratorApi.reducerPath]: orchestratorApi.reducer, toastMessages: toastMessagesReducer, orchestratorConfig: configSlice.reducer, + orchestratorComponentOverride: + orchestratorComponentOverrideSlice.reducer, customApis: customApisSlice?.reducer, }, middleware: (getDefaultMiddleware) => diff --git a/packages/orchestrator-ui-components/src/rtk/storeProvider.tsx b/packages/orchestrator-ui-components/src/rtk/storeProvider.tsx index e8cf59274..52af106f9 100644 --- a/packages/orchestrator-ui-components/src/rtk/storeProvider.tsx +++ b/packages/orchestrator-ui-components/src/rtk/storeProvider.tsx @@ -3,22 +3,29 @@ import type { ReactNode } from 'react'; import { Provider } from 'react-redux'; import { CustomApiConfig } from '@/rtk/slices/customApis'; +import { OrchestratorComponentOverride } from '@/rtk/slices/orchestratorComponentOverride'; import type { OrchestratorConfig } from '@/types'; import { getOrchestratorStore } from './store'; export type StoreProviderProps = { initialOrchestratorConfig: OrchestratorConfig; + orchestratorComponentOverride?: OrchestratorComponentOverride; customApis?: CustomApiConfig[]; children: ReactNode; }; export const StoreProvider = ({ initialOrchestratorConfig, + orchestratorComponentOverride, customApis = [], children, }: StoreProviderProps) => { - const store = getOrchestratorStore(initialOrchestratorConfig, customApis); + const store = getOrchestratorStore({ + orchestratorConfig: initialOrchestratorConfig, + orchestratorComponentOverride, + customApis, + }); const [orchestratorStore] = useState(store); return {children};