102 Adds slice for RTK (WIP with console errors)

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<
                     <WfoProductBlockValue value={value} />
                 )}
             </td>
+            {/* Todo Temporary copy of previous col to compare solutions */}
+            <td css={rightColumnStyle}>
+                {getRenderedValue?.(fieldValue) ?? (
+                    <WfoProductBlockValue value={value} />
+                )}
+            </td>
         </tr>
     );
 };

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';

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<OrchestratorComponentOverride>;
+
+export const getOrchestratorComponentOverrideSlice = (
+    config: OrchestratorComponentOverride,
+): OrchestratorComponentOverrideSlice => {
+    return createSlice({
+        name: 'orchestratorComponentOverride',
+        initialState: config,
+        reducers: {},
+    });
+};

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,21 +21,32 @@ export type RootState = {
     >;
     toastMessages: ReturnType<typeof toastMessagesReducer>;
     orchestratorConfig: OrchestratorConfig;
+    orchestratorComponentOverride?: OrchestratorComponentOverride;
     customApis: CustomApiConfig[];
 };
 
-export const getOrchestratorStore = (
-    orchestratorConfig: OrchestratorConfig,
-    customApis: CustomApiConfig[],
-): EnhancedStore<RootState> => {
+export type InitialOrchestratorStoreConfig = Pick<
+    RootState,
+    'orchestratorConfig' | 'customApis' | 'orchestratorComponentOverride'
+>;
+
+export const getOrchestratorStore = ({
+    orchestratorConfig,
+    orchestratorComponentOverride = {},
+    customApis,
+}: InitialOrchestratorStoreConfig): EnhancedStore<RootState> => {
     const configSlice = getOrchestratorConfigSlice(orchestratorConfig);
+    const orchestratorComponentOverrideSlice =
+        getOrchestratorComponentOverrideSlice(orchestratorComponentOverride);
     const customApisSlice = getCustomApiSlice(customApis);
 
     const orchestratorStore = configureStore({
         reducer: {
             [orchestratorApi.reducerPath]: orchestratorApi.reducer,
             toastMessages: toastMessagesReducer,
             orchestratorConfig: configSlice.reducer,
+            orchestratorComponentOverride:
+                orchestratorComponentOverrideSlice.reducer,
             customApis: customApisSlice?.reducer,
         },
         middleware: (getDefaultMiddleware) =>

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 <Provider store={orchestratorStore}>{children}</Provider>;