@orchestrator-ui/orchestrator-ui-components 6.2.1 → 6.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@orchestrator-ui/orchestrator-ui-components",
-    "version": "6.2.1",
+    "version": "6.3.1",
     "license": "Apache-2.0",
     "description": "Library of UI Components used to display the workflow orchestrator frontend",
     "author": {
@@ -92,8 +92,5 @@
     "type": "module",
     "main": "./dist/index.js",
     "browser": "./dist/index.js",
-    "types": "./dist/index.d.ts",
-    "overrides": {
-        "@monaco-editor/loader": "1.5.0"
-    }
+    "types": "./dist/index.d.ts"
 }

package/src/components/WfoPydanticForm/Footer.tsx

@@ -3,13 +3,14 @@
  *
  * Form footer component
  */
-import React from 'react';
+import React, { useContext } from 'react';
 
 import { useTranslations } from 'next-intl';
 import type { PydanticFormFooterProps } from 'pydantic-forms';
 
-import { EuiButton, EuiHorizontalRule } from '@elastic/eui';
+import { EuiButton, EuiFlexGroup, EuiHorizontalRule } from '@elastic/eui';
 
+import { ConfirmationDialogContext } from '@/contexts';
 import { useOrchestratorTheme } from '@/hooks';
 
 import { RenderFormErrors } from './RenderFormErrors';
@@ -22,10 +23,14 @@ export const Footer = ({
 }: PydanticFormFooterProps) => {
     const { theme } = useOrchestratorTheme();
     const t = useTranslations('pydanticForms.userInputForm');
+    const { showConfirmDialog } = useContext(ConfirmationDialogContext);
 
     const handlePrevious = () => {
         if (onCancel) {
-            onCancel();
+            showConfirmDialog({
+                question: t('previousQuestion'),
+                onConfirm: onCancel,
+            });
         }
     };
 
@@ -93,13 +98,24 @@ export const Footer = ({
         );
     };
 
+    const PreviousCancelButtonGroup = () => {
+        return (
+            <EuiFlexGroup gutterSize="xl">
+                <PreviousButton />
+                <CancelButton />
+            </EuiFlexGroup>
+        );
+    };
+
     return (
         <div data-testid="pydantic-form-footer">
             <RenderFormErrors />
             <EuiHorizontalRule />
             <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                 <div>
-                    {(hasPrevious && <PreviousButton />) || <CancelButton />}
+                    {(hasPrevious && <PreviousCancelButtonGroup />) || (
+                        <CancelButton />
+                    )}
                 </div>
 
                 <SubmitButton />

package/src/components/WfoPydanticForm/fields/WfoSummary.tsx

@@ -51,7 +51,7 @@ export const WfoSummary: PydanticFormElement = ({ pydanticFormField }) => {
             {extraColumnsData &&
                 extraColumnsData.map((_, idx) => (
                     <td className={`value`} key={idx}>
-                        {extraColumnsData[idx][index].toString()}
+                        {extraColumnsData[idx][index]?.toString()}
                     </td>
                 ))}
         </tr>

package/src/components/WfoSubscription/WfoInSyncField/WfoInSyncField.tsx

@@ -3,15 +3,27 @@ import React, { useContext, useEffect, useState } from 'react';
 import { useTranslations } from 'next-intl';
 import Link from 'next/link';
 
-import { EuiButton } from '@elastic/eui';
+import {
+    EuiButton,
+    EuiContextMenuItem,
+    EuiLoadingSpinner,
+    EuiToolTip,
+} from '@elastic/eui';
 
 import { WfoIsAllowedToRender } from '@/components';
 import { WfoInsyncIcon } from '@/components';
 import { PATH_TASKS, PATH_WORKFLOWS } from '@/components';
 import { WfoInSyncErrorToastMessage } from '@/components/WfoSubscription/WfoInSyncField/WfoInSyncErrorToastMessage';
+import { getSubscriptionActionStyles } from '@/components/WfoSubscription/WfoSubscriptionActions/styles';
+import { WfoInSyncCompactIcon } from '@/components/WfoSubscription/WfoTargetTypeIcon';
 import { PolicyResource } from '@/configuration/policy-resources';
 import { ConfirmationDialogContext } from '@/contexts';
-import { useOrchestratorTheme, useShowToastMessage } from '@/hooks';
+import {
+    useOrchestratorTheme,
+    useShowToastMessage,
+    useWithOrchestratorTheme,
+} from '@/hooks';
+import { WfoCheckmarkCircleFill } from '@/icons';
 import { useSetSubscriptionInSyncMutation } from '@/rtk/endpoints';
 import { SubscriptionDetail, ToastTypes } from '@/types';
 import { formatDate } from '@/utils';
@@ -20,11 +32,25 @@ import { getLastUncompletedProcess, getLatestTaskDate } from '../utils';
 
 interface WfoInSyncFieldProps {
     subscriptionDetail: SubscriptionDetail;
+    compactMode?: boolean;
+    setPopover?: (isOpen: boolean) => void;
 }
 
-export const WfoInSyncField = ({ subscriptionDetail }: WfoInSyncFieldProps) => {
+export const WfoInSyncField = ({
+    subscriptionDetail,
+    compactMode = false,
+    setPopover,
+}: WfoInSyncFieldProps) => {
     const t = useTranslations('subscriptions.detail');
     const { theme } = useOrchestratorTheme();
+    const {
+        clickableStyle,
+        linkMenuItemStyle,
+        disabledTextStyle,
+        disabledIconStyle,
+        secondaryIconStyle,
+        spinnerSecondaryIconStyle,
+    } = useWithOrchestratorTheme(getSubscriptionActionStyles);
     const [inSync, setInSync] = useState<boolean>(subscriptionDetail.insync);
     const lastTaskRunDate = getLatestTaskDate(
         subscriptionDetail.processes?.page,
@@ -71,20 +97,21 @@ export const WfoInSyncField = ({ subscriptionDetail }: WfoInSyncFieldProps) => {
             });
     };
 
+    const confirmSetInSync = () => {
+        showConfirmDialog({
+            question: t('setInSyncQuestion'),
+            onConfirm: () => {
+                setInSyncAction();
+                setPopover?.(false);
+            },
+        });
+    };
+
     const getProcessLink = () => {
         const processUrl = `${
             lastUncompletedProcess?.isTask ? PATH_TASKS : PATH_WORKFLOWS
         }/${lastUncompletedProcess?.processId}`;
 
-        const confirmSetInSync = () => {
-            showConfirmDialog({
-                question: t('setInSyncQuestion'),
-                onConfirm: () => {
-                    setInSyncAction();
-                },
-            });
-        };
-
         return (
             <>
                 <Link
@@ -111,13 +138,87 @@ export const WfoInSyncField = ({ subscriptionDetail }: WfoInSyncFieldProps) => {
         );
     };
 
-    return (
+    const allowInSyncButton = !inSync && lastUncompletedProcess;
+    const showDate = inSync && lastTaskRunDate;
+
+    const InSyncDetails = () => (
+        <>
+            <div css={{ display: 'flex' }}>
+                <div css={{ paddingRight: theme.base / 4, display: 'flex' }}>
+                    <WfoInsyncIcon inSync={inSync} />
+                </div>
+                {showDate && `(${formatDate(lastTaskRunDate)})`}
+                {!showDate && compactMode && t('subscriptionIsInSync')}
+            </div>
+        </>
+    );
+
+    const InSyncDetailsWithButton = () => (
         <>
-            <div css={{ paddingRight: theme.base / 4, display: 'flex' }}>
-                <WfoInsyncIcon inSync={inSync} />
+            <InSyncDetails />
+            {allowInSyncButton && getProcessLink()}
+        </>
+    );
+
+    const InSyncCompactMenuIcon = () => {
+        const LoadingSecondaryIcon = () => (
+            <div css={spinnerSecondaryIconStyle}>
+                <EuiLoadingSpinner size="s" />
             </div>
-            {inSync && lastTaskRunDate && `(${formatDate(lastTaskRunDate)})`}
-            {!inSync && lastUncompletedProcess && getProcessLink()}
+        );
+        if (!allowInSyncButton) {
+            return (
+                <div css={disabledIconStyle}>
+                    <WfoInSyncCompactIcon disabled />
+                    {isLoading ? (
+                        <LoadingSecondaryIcon />
+                    ) : (
+                        <div css={secondaryIconStyle}>
+                            <WfoCheckmarkCircleFill
+                                width={20}
+                                height={20}
+                                color={theme.colors.primary}
+                            />
+                        </div>
+                    )}
+                </div>
+            );
+        }
+        return (
+            <div css={disabledIconStyle}>
+                <WfoInSyncCompactIcon disabled={false} />
+                {isLoading && <LoadingSecondaryIcon />}
+            </div>
+        );
+    };
+
+    const InSyncCompactMenuItem = () => {
+        return (
+            <div css={[allowInSyncButton && clickableStyle, linkMenuItemStyle]}>
+                <EuiToolTip
+                    position="top"
+                    content={!allowInSyncButton && <InSyncDetails />}
+                >
+                    <EuiContextMenuItem
+                        css={!allowInSyncButton && disabledTextStyle}
+                        icon={<InSyncCompactMenuIcon />}
+                        onClick={confirmSetInSync}
+                        disabled={!allowInSyncButton}
+                    >
+                        {t('setInSync')}
+                    </EuiContextMenuItem>
+                </EuiToolTip>
+            </div>
+        );
+    };
+
+    return (
+        <>
+            {!compactMode ? (
+                <InSyncDetailsWithButton />
+            ) : (
+                <InSyncCompactMenuItem />
+            )}
         </>
     );
 };

package/src/components/WfoSubscription/WfoSubscriptionActions/WfoSubscriptionActions.tsx

@@ -1,47 +1,25 @@
 import React, { FC, useState } from 'react';
 
 import { useTranslations } from 'next-intl';
-import Link from 'next/link';
-import { useRouter } from 'next/router';
 
 import {
     EuiButton,
     EuiButtonIcon,
-    EuiContextMenuItem,
     EuiContextMenuPanel,
     EuiLoadingSpinner,
     EuiPanel,
     EuiPopover,
     EuiTitle,
-    EuiToolTip,
 } from '@elastic/eui';
 
-import { PATH_START_NEW_TASK, PATH_START_NEW_WORKFLOW } from '@/components';
+import { WfoInSyncField } from '@/components';
+import { WfoSubscriptionActionsMenuItem } from '@/components/WfoSubscription/WfoSubscriptionActions/WfoSubscriptionActionsMenuItem';
 import { PolicyResource } from '@/configuration/policy-resources';
-import {
-    useCheckEngineStatus,
-    useOrchestratorTheme,
-    usePolicy,
-    useWithOrchestratorTheme,
-} from '@/hooks';
-import { WfoXCircleFill } from '@/icons';
+import { usePolicy } from '@/hooks';
 import { WfoDotsHorizontal } from '@/icons/WfoDotsHorizontal';
+import { useGetSubscriptionDetailQuery } from '@/rtk';
 import { useGetSubscriptionActionsQuery } from '@/rtk/endpoints/subscriptionActions';
-import { SubscriptionAction, WorkflowTarget } from '@/types';
-
-import { WfoTargetTypeIcon } from '../WfoTargetTypeIcon';
-import { flattenArrayProps } from '../utils';
-import { WfoSubscriptionActionExpandableMenuItem } from './WfoSubscriptionActionExpandableMenuItem';
-import { getSubscriptionActionStyles } from './styles';
-
-type MenuItemProps = {
-    key: string;
-    action: SubscriptionAction;
-    index: number;
-    target: WorkflowTarget;
-    isTask?: boolean;
-    isDisabled?: boolean;
-};
+import { WorkflowTarget } from '@/types';
 
 type MenuBlockProps = {
     title: string;
@@ -63,16 +41,6 @@ export const WfoSubscriptionActions: FC<WfoSubscriptionActionsProps> = ({
     isLoading,
     compactMode = false,
 }) => {
-    const { theme } = useOrchestratorTheme();
-    const {
-        linkMenuItemStyle,
-        tooltipMenuItemStyle,
-        disabledIconStyle,
-        iconStyle,
-        secondaryIconStyle,
-    } = useWithOrchestratorTheme(getSubscriptionActionStyles);
-
-    const router = useRouter();
     const t = useTranslations('subscriptions.detail.actions');
     const [isPopoverOpen, setPopover] = useState(false);
     const disableQuery = isLoading || (!isPopoverOpen && compactMode);
@@ -83,86 +51,19 @@ export const WfoSubscriptionActions: FC<WfoSubscriptionActionsProps> = ({
         { subscriptionId },
         { skip: disableQuery },
     );
-    const { isEngineRunningNow } = useCheckEngineStatus();
+
+    const { data: subscriptionDetail } = useGetSubscriptionDetailQuery(
+        {
+            subscriptionId,
+        },
+        { skip: !isPopoverOpen && compactMode },
+    );
+
     const { isAllowed } = usePolicy();
 
     const onButtonClick = () => setPopover(!isPopoverOpen);
     const closePopover = () => setPopover(false);
 
-    const MenuItem: FC<MenuItemProps> = ({
-        action,
-        target,
-        isTask = false,
-    }) => {
-        const linkIt = (actionItem: React.ReactNode) => {
-            const path = isTask ? PATH_START_NEW_TASK : PATH_START_NEW_WORKFLOW;
-            const url = {
-                pathname: `${path}/${action.name}`,
-                query: { subscriptionId },
-            };
-
-            const handleLinkClick = async (e: React.MouseEvent) => {
-                e.preventDefault();
-                setPopover(false);
-                if (await isEngineRunningNow()) {
-                    router.push(url);
-                }
-            };
-
-            return (
-                <Link href={url} onClick={handleLinkClick}>
-                    <div css={linkMenuItemStyle}>{actionItem}</div>
-                </Link>
-            );
-        };
-
-        const tooltipIt = (actionItem: React.ReactNode) => {
-            if (!action.reason) return actionItem;
-            const tooltipContent = t(action.reason, flattenArrayProps(action));
-
-            return (
-                <div css={tooltipMenuItemStyle}>
-                    <EuiToolTip position="top" content={tooltipContent}>
-                        <WfoSubscriptionActionExpandableMenuItem
-                            subscriptionAction={action}
-                            onClickLockedRelation={() => setPopover(false)}
-                        >
-                            {actionItem}
-                        </WfoSubscriptionActionExpandableMenuItem>
-                    </EuiToolTip>
-                </div>
-            );
-        };
-
-        const getIcon = () =>
-            action.reason ? (
-                <div css={disabledIconStyle}>
-                    <WfoTargetTypeIcon target={target} disabled />
-                    <div css={secondaryIconStyle}>
-                        <WfoXCircleFill
-                            width={20}
-                            height={20}
-                            color={theme.colors.danger}
-                        />
-                    </div>
-                </div>
-            ) : (
-                <div css={iconStyle}>
-                    <WfoTargetTypeIcon target={target} />
-                </div>
-            );
-
-        const ActionItem = () => (
-            <EuiContextMenuItem icon={getIcon()} disabled={!!action.reason}>
-                {action.description}
-            </EuiContextMenuItem>
-        );
-
-        return action?.reason
-            ? tooltipIt(<ActionItem />)
-            : linkIt(<ActionItem />);
-    };
-
     const button = compactMode ? (
         <EuiButtonIcon
             iconType={() => <WfoDotsHorizontal />}
@@ -186,6 +87,7 @@ export const WfoSubscriptionActions: FC<WfoSubscriptionActionsProps> = ({
         SUBSCRIPTION_RECONCILE,
         SUBSCRIPTION_MODIFY,
         SUBSCRIPTION_TERMINATE,
+        SET_IN_SYNC,
     } = PolicyResource;
     const compactItems = (
         <>
@@ -194,12 +96,14 @@ export const WfoSubscriptionActions: FC<WfoSubscriptionActionsProps> = ({
                     <>
                         {!compactMode && <MenuBlock title={t('tasks')} />}
                         {subscriptionActions.validate.map((action, index) => (
-                            <MenuItem
+                            <WfoSubscriptionActionsMenuItem
                                 key={`s_${index}`}
                                 action={action}
                                 index={index}
                                 target={WorkflowTarget.VALIDATE}
                                 isTask
+                                subscriptionId={subscriptionId}
+                                setPopover={setPopover}
                             />
                         ))}
                     </>
@@ -210,15 +114,27 @@ export const WfoSubscriptionActions: FC<WfoSubscriptionActionsProps> = ({
                     <>
                         {!compactMode && <MenuBlock title={t('reconcile')} />}
                         {subscriptionActions?.reconcile.map((action, index) => (
-                            <MenuItem
+                            <WfoSubscriptionActionsMenuItem
                                 key={`r_${index}`}
                                 action={action}
                                 index={index}
                                 target={WorkflowTarget.RECONCILE}
+                                subscriptionId={subscriptionId}
+                                setPopover={setPopover}
                             />
                         ))}
                     </>
                 )}
+
+            {isAllowed(SET_IN_SYNC) && compactMode && subscriptionDetail && (
+                <div>
+                    <WfoInSyncField
+                        compactMode={true}
+                        subscriptionDetail={subscriptionDetail?.subscription}
+                        setPopover={setPopover}
+                    />
+                </div>
+            )}
         </>
     );
 
@@ -229,11 +145,13 @@ export const WfoSubscriptionActions: FC<WfoSubscriptionActionsProps> = ({
                     <>
                         <MenuBlock title={t('modify')} />
                         {subscriptionActions.modify.map((action, index) => (
-                            <MenuItem
+                            <WfoSubscriptionActionsMenuItem
                                 key={`m_${index}`}
                                 action={action}
                                 index={index}
                                 target={WorkflowTarget.MODIFY}
+                                subscriptionId={subscriptionId}
+                                setPopover={setPopover}
                             />
                         ))}
                     </>
@@ -244,11 +162,13 @@ export const WfoSubscriptionActions: FC<WfoSubscriptionActionsProps> = ({
                     <>
                         <MenuBlock title={t('terminate')} />
                         {subscriptionActions.terminate.map((action, index) => (
-                            <MenuItem
+                            <WfoSubscriptionActionsMenuItem
                                 key={`t_${index}`}
                                 action={action}
                                 index={index}
                                 target={WorkflowTarget.TERMINATE}
+                                subscriptionId={subscriptionId}
+                                setPopover={setPopover}
                             />
                         ))}
                     </>

package/src/components/WfoSubscription/WfoSubscriptionActions/WfoSubscriptionActionsMenuItem.tsx

@@ -0,0 +1,122 @@
+import React, { FC } from 'react';
+
+import { useTranslations } from 'next-intl';
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+
+import { EuiContextMenuItem, EuiToolTip } from '@elastic/eui';
+
+import { flattenArrayProps } from '@/components';
+import {
+    PATH_START_NEW_TASK,
+    PATH_START_NEW_WORKFLOW,
+} from '@/components/WfoPageTemplate';
+import { WfoSubscriptionActionExpandableMenuItem } from '@/components/WfoSubscription/WfoSubscriptionActions/WfoSubscriptionActionExpandableMenuItem';
+import { getSubscriptionActionStyles } from '@/components/WfoSubscription/WfoSubscriptionActions/styles';
+import {
+    useCheckEngineStatus,
+    useOrchestratorTheme,
+    useWithOrchestratorTheme,
+} from '@/hooks';
+import { WfoXCircleFill } from '@/icons';
+import { SubscriptionAction, WorkflowTarget } from '@/types';
+
+import { WfoTargetTypeIcon } from '../WfoTargetTypeIcon';
+
+interface MenuItemProps {
+    key: string;
+    action: SubscriptionAction;
+    index: number;
+    target: WorkflowTarget;
+    isTask?: boolean;
+    isDisabled?: boolean;
+    subscriptionId: string;
+    setPopover: (isOpen: boolean) => void;
+}
+
+export const WfoSubscriptionActionsMenuItem: FC<MenuItemProps> = ({
+    action,
+    target,
+    isTask = false,
+    subscriptionId,
+    setPopover,
+}) => {
+    const {
+        linkMenuItemStyle,
+        tooltipMenuItemStyle,
+        disabledIconStyle,
+        iconStyle,
+        secondaryIconStyle,
+    } = useWithOrchestratorTheme(getSubscriptionActionStyles);
+
+    const { isEngineRunningNow } = useCheckEngineStatus();
+    const router = useRouter();
+    const t = useTranslations('subscriptions.detail.actions');
+    const { theme } = useOrchestratorTheme();
+
+    const linkIt = (actionItem: React.ReactNode) => {
+        const path = isTask ? PATH_START_NEW_TASK : PATH_START_NEW_WORKFLOW;
+        const url = {
+            pathname: `${path}/${action.name}`,
+            query: { subscriptionId },
+        };
+
+        const handleLinkClick = async (e: React.MouseEvent) => {
+            e.preventDefault();
+            setPopover(false);
+            if (await isEngineRunningNow()) {
+                router.push(url);
+            }
+        };
+
+        return (
+            <Link href={url} onClick={handleLinkClick}>
+                <div css={linkMenuItemStyle}>{actionItem}</div>
+            </Link>
+        );
+    };
+
+    const tooltipIt = (actionItem: React.ReactNode) => {
+        if (!action.reason) return actionItem;
+        const tooltipContent = t(action.reason, flattenArrayProps(action));
+
+        return (
+            <div css={tooltipMenuItemStyle}>
+                <EuiToolTip position="top" content={tooltipContent}>
+                    <WfoSubscriptionActionExpandableMenuItem
+                        subscriptionAction={action}
+                        onClickLockedRelation={() => setPopover(false)}
+                    >
+                        {actionItem}
+                    </WfoSubscriptionActionExpandableMenuItem>
+                </EuiToolTip>
+            </div>
+        );
+    };
+
+    const getIcon = () =>
+        action.reason ? (
+            <div css={disabledIconStyle}>
+                <WfoTargetTypeIcon target={target} disabled />
+                <div css={secondaryIconStyle}>
+                    <WfoXCircleFill
+                        width={20}
+                        height={20}
+                        color={theme.colors.danger}
+                    />
+                </div>
+            </div>
+        ) : (
+            <div css={iconStyle}>
+                <WfoTargetTypeIcon target={target} />
+            </div>
+        );
+
+    const ActionItem = () => (
+        <EuiContextMenuItem icon={getIcon()} disabled={!!action.reason}>
+            {action.description}
+        </EuiContextMenuItem>
+    );
+
+    return action?.reason ? tooltipIt(<ActionItem />) : linkIt(<ActionItem />);
+};

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

@@ -36,6 +36,9 @@ export const getSubscriptionActionStyles = ({ theme }: WfoTheme) => {
             backgroundColor: theme.colors.lightestShade,
             borderRadius: theme.border.radius.medium,
         },
+        '.euiToolTipAnchor': {
+            width: '100%',
+        },
     });
 
     const tooltipMenuItemStyle = css([
@@ -60,6 +63,14 @@ export const getSubscriptionActionStyles = ({ theme }: WfoTheme) => {
         transform: 'translate(-11px, -8px);',
     });
 
+    const spinnerSecondaryIconStyle = css({
+        transform: 'translate(-8px, -6px);',
+    });
+
+    const disabledTextStyle = css({
+        color: theme.colors.textDisabled,
+    });
+
     return {
         clickableStyle,
         expandableMenuItemStyle,
@@ -71,5 +82,7 @@ export const getSubscriptionActionStyles = ({ theme }: WfoTheme) => {
         disabledIconStyle,
         iconStyle,
         secondaryIconStyle,
+        disabledTextStyle,
+        spinnerSecondaryIconStyle,
     };
 };