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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@orchestrator-ui/orchestrator-ui-components",
-    "version": "1.7.0",
+    "version": "1.8.0",
     "license": "Apache-2.0",
     "description": "Library of UI Components used to display the workflow orchestrator frontend",
     "author": {

package/src/components/WfoExpandableField/WfoExpandableField.tsx

@@ -0,0 +1,46 @@
+import React, { FC, ReactNode } from 'react';
+
+import { EuiButtonIcon } from '@elastic/eui';
+
+import { useOrchestratorTheme } from '@/hooks';
+import { WfoMinusCircleFill, WfoPlusCircleFill } from '@/icons';
+
+import { getStyles } from './styles';
+
+export type WfoExpandableFieldProps = {
+    isExpanded: boolean;
+    title: ReactNode;
+    onExpandedChange: (isExpanded: boolean) => void;
+    children: ReactNode;
+};
+
+export const WfoExpandableField: FC<WfoExpandableFieldProps> = ({
+    isExpanded,
+    title,
+    onExpandedChange,
+    children,
+}) => {
+    const { theme } = useOrchestratorTheme();
+    const { titleRowStyle, titleStyle } = getStyles(theme);
+
+    return (
+        <>
+            <div css={titleRowStyle}>
+                <EuiButtonIcon
+                    aria-label={isExpanded ? 'Collapse' : 'Expand'}
+                    iconType={() =>
+                        isExpanded ? (
+                            <WfoMinusCircleFill color={theme.colors.primary} />
+                        ) : (
+                            <WfoPlusCircleFill color={theme.colors.primary} />
+                        )
+                    }
+                    onClick={() => onExpandedChange(!isExpanded)}
+                />
+                <div css={titleStyle}>{title}</div>
+            </div>
+
+            {isExpanded && children}
+        </>
+    );
+};

package/src/components/WfoExpandableField/index.ts

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

package/src/components/WfoExpandableField/styles.ts

@@ -0,0 +1,18 @@
+import { EuiThemeComputed } from '@elastic/eui';
+import { css } from '@emotion/react';
+
+export const getStyles = (theme: EuiThemeComputed) => {
+    const titleRowStyle = css({
+        display: 'flex',
+        alignItems: 'center',
+    });
+
+    const titleStyle = css({
+        marginLeft: theme.size.s,
+    });
+
+    return {
+        titleRowStyle,
+        titleStyle,
+    };
+};

package/src/components/WfoSubscription/WfoSubscriptionProductBlock/WfoProductBlockKeyValueRow.tsx

@@ -0,0 +1,46 @@
+import React, { FC } from 'react';
+
+import { EuiBadge } from '@elastic/eui';
+
+import { useSubscriptionDetailValueOverride } from '@/components';
+import { useWithOrchestratorTheme } from '@/hooks';
+import { FieldValue } from '@/types';
+import { camelToHuman } from '@/utils';
+
+import { getStyles } from './styles';
+
+export type WfoProductBlockKeyValueRowProps = {
+    fieldValue: FieldValue;
+};
+
+export const WfoProductBlockKeyValueRow: FC<
+    WfoProductBlockKeyValueRowProps
+> = ({ fieldValue }) => {
+    const { leftColumnStyle, rightColumnStyle, rowStyle } =
+        useWithOrchestratorTheme(getStyles);
+    const { getOverriddenValue } = useSubscriptionDetailValueOverride();
+
+    const { field, value } = fieldValue;
+
+    const WfoProductBlockValue: FC<{ value: FieldValue['value'] }> = ({
+        value,
+    }) =>
+        typeof value === 'boolean' ? (
+            <EuiBadge>{value.toString()}</EuiBadge>
+        ) : (
+            <>{value}</>
+        );
+
+    return (
+        <tr css={rowStyle}>
+            <td css={leftColumnStyle}>
+                <b>{camelToHuman(field)}</b>
+            </td>
+            <td css={rightColumnStyle}>
+                {getOverriddenValue(fieldValue) ?? (
+                    <WfoProductBlockValue value={value} />
+                )}
+            </td>
+        </tr>
+    );
+};

package/src/components/WfoSubscription/{WfoSubscriptionProductBlock.tsx → WfoSubscriptionProductBlock/WfoSubscriptionProductBlock.tsx}

@@ -6,7 +6,6 @@ import { useRouter } from 'next/router';
 import {
     EuiBadge,
     EuiButtonEmpty,
-    EuiCodeBlock,
     EuiFlexGroup,
     EuiFlexItem,
     EuiIcon,
@@ -15,15 +14,19 @@ import {
     EuiText,
 } from '@elastic/eui';
 
-import { useOrchestratorTheme, useWithOrchestratorTheme } from '../../hooks';
-import { FieldValue, InUseByRelation } from '../../types';
-import { camelToHuman } from '../../utils';
-import { PATH_SUBSCRIPTIONS } from '../WfoPageTemplate';
-import { getStyles } from './styles';
+import {
+    PATH_SUBSCRIPTIONS,
+    WfoJsonCodeBlock,
+    WfoProductBlockKeyValueRow,
+} from '@/components';
+import { useOrchestratorTheme, useWithOrchestratorTheme } from '@/hooks';
+import { FieldValue, InUseByRelation } from '@/types';
+
 import {
     getFieldFromProductBlockInstanceValues,
     getProductBlockTitle,
-} from './utils';
+} from '../utils';
+import { getStyles } from './styles';
 
 interface WfoSubscriptionProductBlockProps {
     ownerSubscriptionId: string;
@@ -47,32 +50,22 @@ export const WfoSubscriptionProductBlock = ({
     const t = useTranslations('subscriptions.detail');
     const { theme } = useOrchestratorTheme();
     const {
-        productBlockIconStyle,
-        productBlockPanelStyle,
-        productBlockLeftColStyle,
-        productBlockFirstLeftColStyle,
-        productBlockRightColStyle,
-        productBlockFirstRightColStyle,
+        iconStyle,
+        panelStyle,
+        leftColumnStyle,
+        rightColumnStyle,
+        rowStyle,
     } = useWithOrchestratorTheme(getStyles);
 
     const [hideDetails, setHideDetails] = useState(true);
 
-    const isFirstBlock = (index: number): boolean => {
-        if (!hideDetails) return false;
-        return index === 0;
-    };
-
     return (
         <>
             <EuiSpacer size={'m'}></EuiSpacer>
-            <EuiPanel
-                color="transparent"
-                hasShadow={false}
-                css={productBlockPanelStyle}
-            >
+            <EuiPanel color="transparent" hasShadow={false} css={panelStyle}>
                 <EuiFlexGroup>
                     <EuiFlexItem grow={false}>
-                        <div css={productBlockIconStyle}>
+                        <div css={iconStyle}>
                             <EuiIcon
                                 type="filebeatApp"
                                 color={theme.colors.primary}
@@ -115,31 +108,19 @@ export const WfoSubscriptionProductBlock = ({
                         <tbody>
                             {!hideDetails && (
                                 <>
-                                    <tr key={-3}>
-                                        <td
-                                            valign={'top'}
-                                            css={productBlockFirstLeftColStyle}
-                                        >
+                                    <tr key={-3} css={rowStyle}>
+                                        <td css={leftColumnStyle}>
                                             <b>{t('subscriptionInstanceId')}</b>
                                         </td>
-                                        <td
-                                            valign={'top'}
-                                            css={productBlockFirstRightColStyle}
-                                        >
+                                        <td css={rightColumnStyle}>
                                             {subscriptionInstanceId}
                                         </td>
                                     </tr>
-                                    <tr key={-2}>
-                                        <td
-                                            valign={'top'}
-                                            css={productBlockFirstLeftColStyle}
-                                        >
+                                    <tr key={-2} css={rowStyle}>
+                                        <td css={leftColumnStyle}>
                                             <b>{t('ownerSubscriptionId')}</b>
                                         </td>
-                                        <td
-                                            valign={'top'}
-                                            css={productBlockFirstRightColStyle}
-                                        >
+                                        <td css={rightColumnStyle}>
                                             {subscriptionId ===
                                             ownerSubscriptionId ? (
                                                 <>
@@ -157,24 +138,15 @@ export const WfoSubscriptionProductBlock = ({
                                             )}
                                         </td>
                                     </tr>
-                                    <tr key={-1}>
-                                        <td
-                                            valign={'top'}
-                                            css={productBlockLeftColStyle}
-                                        >
+                                    <tr key={-1} css={rowStyle}>
+                                        <td css={leftColumnStyle}>
                                             <b>{t('inUseByRelations')}</b>
                                         </td>
-                                        <td
-                                            valign={'top'}
-                                            css={productBlockRightColStyle}
-                                        >
-                                            <EuiCodeBlock language="json">
-                                                {JSON.stringify(
-                                                    inUseByRelations,
-                                                    null,
-                                                    4,
-                                                )}
-                                            </EuiCodeBlock>
+                                        <td css={rightColumnStyle}>
+                                            <WfoJsonCodeBlock
+                                                data={inUseByRelations}
+                                                isBasicStyle
+                                            />
                                         </td>
                                     </tr>
                                 </>
@@ -188,39 +160,10 @@ export const WfoSubscriptionProductBlock = ({
                                         ),
                                 )
                                 .map((productBlockInstanceValue, index) => (
-                                    <tr key={index}>
-                                        <td
-                                            valign={'top'}
-                                            css={
-                                                isFirstBlock(index)
-                                                    ? productBlockFirstLeftColStyle
-                                                    : productBlockLeftColStyle
-                                            }
-                                        >
-                                            <b>
-                                                {camelToHuman(
-                                                    productBlockInstanceValue.field,
-                                                )}
-                                            </b>
-                                        </td>
-                                        <td
-                                            valign={'top'}
-                                            css={
-                                                isFirstBlock(index)
-                                                    ? productBlockFirstRightColStyle
-                                                    : productBlockRightColStyle
-                                            }
-                                        >
-                                            {typeof productBlockInstanceValue.value ===
-                                            'boolean' ? (
-                                                <EuiBadge>
-                                                    {productBlockInstanceValue.value.toString()}
-                                                </EuiBadge>
-                                            ) : (
-                                                productBlockInstanceValue.value
-                                            )}
-                                        </td>
-                                    </tr>
+                                    <WfoProductBlockKeyValueRow
+                                        fieldValue={productBlockInstanceValue}
+                                        key={index}
+                                    />
                                 ))}
                         </tbody>
                     </table>

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

@@ -0,0 +1,2 @@
+export * from './WfoSubscriptionProductBlock';
+export * from './WfoProductBlockKeyValueRow';

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 {