@orchestrator-ui/orchestrator-ui-components 1.7.0 → 1.9.0

package/src/components/WfoSubscription/WfoSubscriptionProductBlock/styles.ts

@@ -0,0 +1,48 @@
+import { EuiThemeComputed } from '@elastic/eui/src/services/theme/types';
+import { css } from '@emotion/react';
+
+export const getStyles = (theme: EuiThemeComputed) => {
+    const iconStyle = css({
+        width: 45,
+        height: 45,
+        backgroundColor: 'rgb(193,221,241,1)',
+        paddingTop: 13,
+        paddingLeft: 15,
+        borderRadius: 7,
+    });
+
+    const panelStyle = css({
+        backgroundColor: theme.colors.lightestShade,
+    });
+
+    const rowStyle = css({
+        '&:first-child': {
+            borderTop: `solid 1px ${theme.colors.lightShade}`,
+        },
+    });
+
+    const leftColumnStyle = css({
+        verticalAlign: 'top',
+        width: 250,
+        paddingLeft: 0,
+        paddingTop: 10,
+        paddingBottom: 10,
+        borderBottom: `solid 1px ${theme.colors.lightShade}`,
+    });
+
+    const rightColumnStyle = css({
+        verticalAlign: 'top',
+        paddingLeft: 0,
+        paddingTop: 10,
+        paddingBottom: 10,
+        borderBottom: `solid 1px ${theme.colors.lightShade}`,
+    });
+
+    return {
+        iconStyle,
+        panelStyle,
+        leftColumnStyle,
+        rightColumnStyle,
+        rowStyle,
+    };
+};

package/src/components/WfoSubscription/index.ts

@@ -1,5 +1,7 @@
 export * from './utils';
 
+export * from './overrides';
+
 export * from './SubscriptionKeyValueBlock';
 export * from './WfoInSyncField';
 export * from './WfoProcessesTimeline';

package/src/components/WfoSubscription/overrides/index.ts

@@ -0,0 +1 @@
+export * from './useSubscriptionDetailValueOverride';

package/src/components/WfoSubscription/overrides/useSubscriptionDetailValueOverride.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+
+import { ValueOverrideFunction } from '@/rtk';
+import { useAppSelector } from '@/rtk/hooks';
+import { FieldValue } from '@/types';
+
+export const useSubscriptionDetailValueOverride = () => {
+    const valueOverrideConfiguration = useAppSelector(
+        (state) =>
+            state.orchestratorComponentOverride?.subscriptionDetail
+                ?.valueOverrides,
+    );
+
+    const getOverriddenValue = (
+        fieldValue: FieldValue,
+    ): React.ReactNode | null => {
+        if (!valueOverrideConfiguration) {
+            return null;
+        }
+
+        const renderFunctionForField: ValueOverrideFunction | undefined =
+            valueOverrideConfiguration[fieldValue.field];
+
+        // This check is needed because TS does not infer the type correctly
+        if (renderFunctionForField) {
+            return renderFunctionForField(fieldValue);
+        }
+
+        return null;
+    };
+
+    return {
+        getOverriddenValue,
+    };
+};

package/src/components/WfoSubscription/styles.ts

@@ -43,48 +43,6 @@ export const getStyles = (theme: EuiThemeComputed) => {
         border: 0,
     });
 
-    const productBlockIconStyle = css({
-        width: 45,
-        height: 45,
-        backgroundColor: 'rgb(193,221,241,1)',
-        paddingTop: 13,
-        paddingLeft: 15,
-        borderRadius: 7,
-    });
-
-    const productBlockPanelStyle = css({
-        backgroundColor: theme.colors.lightestShade,
-    });
-
-    const productBlockLeftCol = {
-        width: 250,
-        paddingLeft: 0,
-        paddingTop: 10,
-        paddingBottom: 10,
-        borderBottom: `solid 1px ${theme.colors.lightShade}`,
-    };
-
-    const productBlockLeftColStyle = css({ ...productBlockLeftCol });
-
-    const productBlockFirstLeftColStyle = css({
-        borderTop: `solid 1px ${theme.colors.lightShade}`,
-        ...productBlockLeftCol,
-    });
-
-    const productBlockRightCol = {
-        paddingLeft: 0,
-        paddingTop: 10,
-        paddingBottom: 10,
-        borderBottom: `solid 1px ${theme.colors.lightShade}`,
-    };
-
-    const productBlockRightColStyle = css({ ...productBlockRightCol });
-
-    const productBlockFirstRightColStyle = css({
-        borderTop: `solid 1px ${theme.colors.lightShade}`,
-        ...productBlockRightCol,
-    });
-
     return {
         contentCellStyle,
         headerCellStyle,
@@ -94,11 +52,5 @@ export const getStyles = (theme: EuiThemeComputed) => {
         emptyCellStyle,
         lastContentCellStyle,
         lastHeaderCellStyle,
-        productBlockIconStyle,
-        productBlockPanelStyle,
-        productBlockLeftColStyle,
-        productBlockFirstLeftColStyle,
-        productBlockRightColStyle,
-        productBlockFirstRightColStyle,
     };
 };

package/src/components/index.ts

@@ -1,4 +1,5 @@
 export * from './WfoBadges';
+export * from './WfoExpandableField';
 export * from './WfoPageTemplate/WfoBreadcrumbs';
 export * from './WfoFilterTabs';
 export * from './WfoKeyValueTable';

package/src/rtk/slices/index.ts

@@ -1,3 +1,4 @@
+export * from './customApis';
+export * from './orchestratorComponentOverride';
 export * from './toastMessages';
 export * from './orchestratorConfig';
-export * from './customApis';

package/src/rtk/slices/orchestratorComponentOverride.ts

@@ -0,0 +1,26 @@
+import { ReactNode } from 'react';
+
+import { Slice, createSlice } from '@reduxjs/toolkit';
+
+import { FieldValue } from '@/types';
+
+export type ValueOverrideFunction = (fieldValue: FieldValue) => ReactNode;
+export type ValueOverrideConfiguration = Record<string, ValueOverrideFunction>;
+
+export type OrchestratorComponentOverride = {
+    subscriptionDetail?: {
+        valueOverrides?: ValueOverrideConfiguration;
+    };
+};
+
+type OrchestratorComponentOverrideSlice = Slice<OrchestratorComponentOverride>;
+
+export const getOrchestratorComponentOverrideSlice = (
+    config: OrchestratorComponentOverride,
+): OrchestratorComponentOverrideSlice => {
+    return createSlice({
+        name: 'orchestratorComponentOverride',
+        initialState: config,
+        reducers: {},
+    });
+};

package/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,10 +45,14 @@ export const getOrchestratorStore = (
             [orchestratorApi.reducerPath]: orchestratorApi.reducer,
             toastMessages: toastMessagesReducer,
             orchestratorConfig: configSlice.reducer,
+            orchestratorComponentOverride:
+                orchestratorComponentOverrideSlice.reducer,
             customApis: customApisSlice?.reducer,
         },
         middleware: (getDefaultMiddleware) =>
-            getDefaultMiddleware().concat(orchestratorApi.middleware),
+            getDefaultMiddleware({
+                serializableCheck: false,
+            }).concat(orchestratorApi.middleware),
     });
 
     return orchestratorStore;

package/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>;

package/src/types/types.ts

@@ -11,11 +11,6 @@ export type FieldValue = {
     value: string | number | boolean;
 };
 
-export type KeyValue = {
-    key: string;
-    value: string | number | boolean | undefined;
-};
-
 export enum EngineStatus {
     RUNNING = 'RUNNING',
     PAUSING = 'PAUSING',
@@ -245,8 +240,6 @@ export interface TaskDefinition {
     createdAt: string;
 }
 
-export type Field<Type> = keyof Type;
-
 //// Utility types
 
 export enum SortOrder {