From ccd10cc49f8282cc5a64b7ddd9268aff55f3e7ee Mon Sep 17 00:00:00 2001
From: Ricardo van der Heijden
 <20791917+ricardovdheijden@users.noreply.github.com>
Date: Wed, 27 Mar 2024 14:19:47 +0100
Subject: [PATCH] 102 Adds slice for RTK (WIP with console errors)

---
 .../WfoProductBlockKeyValueRow.tsx            | 37 ++++++++++++++++++-
 .../src/rtk/slices/index.ts                   |  3 +-
 .../slices/orchestratorComponentOverride.ts   | 21 +++++++++++
 .../src/rtk/store.ts                          | 23 ++++++++++--
 .../src/rtk/storeProvider.tsx                 |  9 ++++-
 5 files changed, 86 insertions(+), 7 deletions(-)
 create mode 100644 packages/orchestrator-ui-components/src/rtk/slices/orchestratorComponentOverride.ts

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