@orchestrator-ui/orchestrator-ui-components 7.4.0 → 7.5.0

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

@@ -6,251 +6,201 @@ import { useRouter } from 'next/router';
 import { EuiButton, EuiButtonIcon, EuiTitle } from '@elastic/eui';
 
 import { WfoPopover } from '@/components';
-import {
-    PATH_START_NEW_TASK,
-    PATH_START_NEW_WORKFLOW,
-    WfoInSyncField,
-} from '@/components';
+import { PATH_START_NEW_TASK, PATH_START_NEW_WORKFLOW, WfoInSyncField } from '@/components';
 import { WfoSubscriptionActionsMenuItem } from '@/components/WfoSubscription/WfoSubscriptionActions/WfoSubscriptionActionsMenuItem';
 import { PolicyResource } from '@/configuration/policy-resources';
 import { usePolicy } from '@/hooks';
 import { WfoDotsHorizontal } from '@/icons/WfoDotsHorizontal';
-import {
-    useGetSubscriptionActionsQuery,
-    useGetSubscriptionDetailQuery,
-    useStartProcessMutation,
-} from '@/rtk';
+import { useGetSubscriptionActionsQuery, useGetSubscriptionDetailQuery, useStartProcessMutation } from '@/rtk';
 import { WorkflowTarget } from '@/types';
 
 type MenuBlockProps = {
-    title: string;
+  title: string;
 };
 const MenuBlock: FC<MenuBlockProps> = ({ title }) => (
-    <EuiTitle size="xxxs">
-        <h3>{title}</h3>
-    </EuiTitle>
+  <EuiTitle size="xxxs">
+    <h3>{title}</h3>
+  </EuiTitle>
 );
 
 export type WfoSubscriptionActionsProps = {
-    subscriptionId: string;
-    isLoading?: boolean;
-    compactMode?: boolean;
+  subscriptionId: string;
+  isLoading?: boolean;
+  compactMode?: boolean;
 };
 
 export const WfoSubscriptionActions: FC<WfoSubscriptionActionsProps> = ({
-    subscriptionId,
-    isLoading,
-    compactMode = false,
+  subscriptionId,
+  isLoading,
+  compactMode = false,
 }) => {
-    const t = useTranslations('subscriptions.detail.actions');
-    const [isPopoverOpen, setPopover] = useState<boolean>(false);
-    const router = useRouter();
-    const disableQuery = isLoading || (!isPopoverOpen && compactMode);
-    const {
-        data: subscriptionActions,
-        isLoading: subscriptionActionsIsLoading,
-    } = useGetSubscriptionActionsQuery(
-        { subscriptionId },
-        { skip: disableQuery },
-    );
-    const [startProcess] = useStartProcessMutation();
+  const t = useTranslations('subscriptions.detail.actions');
+  const [isPopoverOpen, setPopover] = useState<boolean>(false);
+  const router = useRouter();
+  const disableQuery = isLoading || (!isPopoverOpen && compactMode);
+  const { data: subscriptionActions, isLoading: subscriptionActionsIsLoading } = useGetSubscriptionActionsQuery(
+    { subscriptionId },
+    { skip: disableQuery },
+  );
+  const [startProcess] = useStartProcessMutation();
+
+  const { data: subscriptionDetail } = useGetSubscriptionDetailQuery(
+    {
+      subscriptionId,
+    },
+    { skip: !isPopoverOpen && compactMode },
+  );
+
+  const { isAllowed } = usePolicy();
+
+  const onButtonClick = () => setPopover(!isPopoverOpen);
+  const closePopover = () => setPopover(false);
+
+  const button =
+    compactMode ?
+      <EuiButtonIcon
+        iconType={() => <WfoDotsHorizontal />}
+        onClick={onButtonClick}
+        aria-label="Row context menu"
+        isLoading={isLoading}
+      />
+    : <EuiButton iconType="arrowDown" iconSide="right" onClick={onButtonClick} isLoading={isLoading}>
+        {t('actions')}
+      </EuiButton>;
+
+  const { SUBSCRIPTION_VALIDATE, SUBSCRIPTION_RECONCILE, SUBSCRIPTION_MODIFY, SUBSCRIPTION_TERMINATE, SET_IN_SYNC } =
+    PolicyResource;
+
+  const redirectToUrl = (actionName: string, isTask: boolean = false) => {
+    const path = isTask ? PATH_START_NEW_TASK : PATH_START_NEW_WORKFLOW;
+
+    const url = {
+      pathname: `${path}/${actionName}`,
+      query: {
+        subscriptionId,
+      },
+    };
+    router.push(url);
+  };
 
-    const { data: subscriptionDetail } = useGetSubscriptionDetailQuery(
+  const silentlyStartAction = (actionName: string) => {
+    startProcess({
+      workflowName: actionName,
+      userInputs: [
         {
-            subscriptionId,
+          subscription_id: subscriptionId,
         },
-        { skip: !isPopoverOpen && compactMode },
-    );
-
-    const { isAllowed } = usePolicy();
-
-    const onButtonClick = () => setPopover(!isPopoverOpen);
-    const closePopover = () => setPopover(false);
-
-    const button = compactMode ? (
-        <EuiButtonIcon
-            iconType={() => <WfoDotsHorizontal />}
-            onClick={onButtonClick}
-            aria-label="Row context menu"
-            isLoading={isLoading}
-        />
-    ) : (
-        <EuiButton
-            iconType="arrowDown"
-            iconSide="right"
-            onClick={onButtonClick}
-            isLoading={isLoading}
-        >
-            {t('actions')}
-        </EuiButton>
-    );
-
-    const {
-        SUBSCRIPTION_VALIDATE,
-        SUBSCRIPTION_RECONCILE,
-        SUBSCRIPTION_MODIFY,
-        SUBSCRIPTION_TERMINATE,
-        SET_IN_SYNC,
-    } = PolicyResource;
-
-    const redirectToUrl = (actionName: string, isTask: boolean = false) => {
-        const path = isTask ? PATH_START_NEW_TASK : PATH_START_NEW_WORKFLOW;
-
-        const url = {
-            pathname: `${path}/${actionName}`,
-            query: {
-                subscriptionId,
-            },
-        };
-        router.push(url);
-    };
-
-    const silentlyStartAction = (actionName: string) => {
-        startProcess({
-            workflowName: actionName,
-            userInputs: [
-                {
-                    subscription_id: subscriptionId,
-                },
-            ],
-        })
-            .unwrap()
-            .catch((error) => {
-                console.error(`Failed to start action:`, error);
-            })
-            .finally(() => {
-                closePopover();
-            });
-    };
-
-    const handleActionClick = (
-        actionName: string,
-        compactMode: boolean,
-        isTask: boolean = false,
-    ) => {
-        if (compactMode) {
-            silentlyStartAction(actionName);
-        } else {
-            redirectToUrl(actionName, isTask);
-        }
-    };
-
-    const compactItems = (
+      ],
+    })
+      .unwrap()
+      .catch((error) => {
+        console.error(`Failed to start action:`, error);
+      })
+      .finally(() => {
+        closePopover();
+      });
+  };
+
+  const handleActionClick = (actionName: string, compactMode: boolean, isTask: boolean = false) => {
+    if (compactMode) {
+      silentlyStartAction(actionName);
+    } else {
+      redirectToUrl(actionName, isTask);
+    }
+  };
+
+  const compactItems = (
+    <>
+      {isAllowed(SUBSCRIPTION_VALIDATE + subscriptionId) && subscriptionActions?.validate && (
         <>
-            {isAllowed(SUBSCRIPTION_VALIDATE + subscriptionId) &&
-                subscriptionActions?.validate && (
-                    <>
-                        {!compactMode && <MenuBlock title={t('tasks')} />}
-                        {subscriptionActions.validate.map(
-                            (subscriptionAction, index) => (
-                                <WfoSubscriptionActionsMenuItem
-                                    key={`s_${index}`}
-                                    subscriptionAction={subscriptionAction}
-                                    target={WorkflowTarget.VALIDATE}
-                                    setPopover={setPopover}
-                                    onClick={() =>
-                                        handleActionClick(
-                                            subscriptionAction.name,
-                                            compactMode,
-                                            true,
-                                        )
-                                    }
-                                />
-                            ),
-                        )}
-                    </>
-                )}
-
-            {isAllowed(SUBSCRIPTION_RECONCILE + subscriptionId) &&
-                (subscriptionActions?.reconcile?.length ?? 0) > 0 && (
-                    <>
-                        {!compactMode && <MenuBlock title={t('reconcile')} />}
-                        {subscriptionActions?.reconcile.map(
-                            (subscriptionAction, index) => (
-                                <WfoSubscriptionActionsMenuItem
-                                    key={`r_${index}`}
-                                    subscriptionAction={subscriptionAction}
-                                    target={WorkflowTarget.RECONCILE}
-                                    setPopover={setPopover}
-                                    onClick={() =>
-                                        handleActionClick(
-                                            subscriptionAction.name,
-                                            compactMode,
-                                            false,
-                                        )
-                                    }
-                                />
-                            ),
-                        )}
-                    </>
-                )}
-
-            {isAllowed(SET_IN_SYNC) && compactMode && subscriptionDetail && (
-                <div>
-                    <WfoInSyncField
-                        compactMode={true}
-                        subscriptionDetail={subscriptionDetail?.subscription}
-                        setPopover={setPopover}
-                    />
-                </div>
-            )}
+          {!compactMode && <MenuBlock title={t('tasks')} />}
+          {subscriptionActions.validate.map((subscriptionAction, index) => (
+            <WfoSubscriptionActionsMenuItem
+              key={`s_${index}`}
+              subscriptionAction={subscriptionAction}
+              target={WorkflowTarget.VALIDATE}
+              setPopover={setPopover}
+              onClick={() => handleActionClick(subscriptionAction.name, compactMode, true)}
+            />
+          ))}
         </>
-    );
+      )}
 
-    const fullItems = (
+      {isAllowed(SUBSCRIPTION_RECONCILE + subscriptionId) && (subscriptionActions?.reconcile?.length ?? 0) > 0 && (
         <>
-            {isAllowed(SUBSCRIPTION_MODIFY + subscriptionId) &&
-                subscriptionActions?.modify && (
-                    <>
-                        <MenuBlock title={t('modify')} />
-                        {subscriptionActions.modify.map(
-                            (subscriptionAction, index) => (
-                                <WfoSubscriptionActionsMenuItem
-                                    key={`m_${index}`}
-                                    subscriptionAction={subscriptionAction}
-                                    target={WorkflowTarget.MODIFY}
-                                    setPopover={setPopover}
-                                    onClick={() => {
-                                        redirectToUrl(subscriptionAction.name);
-                                    }}
-                                />
-                            ),
-                        )}
-                    </>
-                )}
-            {compactItems}
-            {isAllowed(SUBSCRIPTION_TERMINATE + subscriptionId) &&
-                subscriptionActions?.terminate && (
-                    <>
-                        <MenuBlock title={t('terminate')} />
-                        {subscriptionActions.terminate.map(
-                            (subscriptionAction, index) => (
-                                <WfoSubscriptionActionsMenuItem
-                                    key={`t_${index}`}
-                                    subscriptionAction={subscriptionAction}
-                                    target={WorkflowTarget.TERMINATE}
-                                    setPopover={setPopover}
-                                    onClick={() => {
-                                        redirectToUrl(subscriptionAction.name);
-                                    }}
-                                />
-                            ),
-                        )}
-                    </>
-                )}
+          {!compactMode && <MenuBlock title={t('reconcile')} />}
+          {subscriptionActions?.reconcile.map((subscriptionAction, index) => (
+            <WfoSubscriptionActionsMenuItem
+              key={`r_${index}`}
+              subscriptionAction={subscriptionAction}
+              target={WorkflowTarget.RECONCILE}
+              setPopover={setPopover}
+              onClick={() => handleActionClick(subscriptionAction.name, compactMode, false)}
+            />
+          ))}
         </>
-    );
-
-    const MenuItemsList = () => (compactMode ? compactItems : fullItems);
-
-    return (
-        <WfoPopover
-            id={'subscriptionActionPopover'}
-            isLoading={subscriptionActionsIsLoading || isLoading || false}
-            button={button}
-            PopoverContent={MenuItemsList}
-            isPopoverOpen={isPopoverOpen}
-            closePopover={() => setPopover(false)}
-        />
-    );
+      )}
+
+      {isAllowed(SET_IN_SYNC) && compactMode && subscriptionDetail && (
+        <div>
+          <WfoInSyncField
+            compactMode={true}
+            subscriptionDetail={subscriptionDetail?.subscription}
+            setPopover={setPopover}
+          />
+        </div>
+      )}
+    </>
+  );
+
+  const fullItems = (
+    <>
+      {isAllowed(SUBSCRIPTION_MODIFY + subscriptionId) && subscriptionActions?.modify && (
+        <>
+          <MenuBlock title={t('modify')} />
+          {subscriptionActions.modify.map((subscriptionAction, index) => (
+            <WfoSubscriptionActionsMenuItem
+              key={`m_${index}`}
+              subscriptionAction={subscriptionAction}
+              target={WorkflowTarget.MODIFY}
+              setPopover={setPopover}
+              onClick={() => {
+                redirectToUrl(subscriptionAction.name);
+              }}
+            />
+          ))}
+        </>
+      )}
+      {compactItems}
+      {isAllowed(SUBSCRIPTION_TERMINATE + subscriptionId) && subscriptionActions?.terminate && (
+        <>
+          <MenuBlock title={t('terminate')} />
+          {subscriptionActions.terminate.map((subscriptionAction, index) => (
+            <WfoSubscriptionActionsMenuItem
+              key={`t_${index}`}
+              subscriptionAction={subscriptionAction}
+              target={WorkflowTarget.TERMINATE}
+              setPopover={setPopover}
+              onClick={() => {
+                redirectToUrl(subscriptionAction.name);
+              }}
+            />
+          ))}
+        </>
+      )}
+    </>
+  );
+
+  const MenuItemsList = () => (compactMode ? compactItems : fullItems);
+
+  return (
+    <WfoPopover
+      id={'subscriptionActionPopover'}
+      isLoading={subscriptionActionsIsLoading || isLoading || false}
+      button={button}
+      PopoverContent={MenuItemsList}
+      isPopoverOpen={isPopoverOpen}
+      closePopover={() => setPopover(false)}
+    />
+  );
 };

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

@@ -7,110 +7,90 @@ import { EuiContextMenuItem, EuiToolTip } from '@elastic/eui';
 import { flattenArrayProps } from '@/components';
 import { WfoSubscriptionActionExpandableMenuItem } from '@/components/WfoSubscription/WfoSubscriptionActions/WfoSubscriptionActionExpandableMenuItem';
 import { getSubscriptionActionStyles } from '@/components/WfoSubscription/WfoSubscriptionActions/styles';
-import {
-    useCheckEngineStatus,
-    useOrchestratorTheme,
-    useWithOrchestratorTheme,
-} from '@/hooks';
+import { useCheckEngineStatus, useOrchestratorTheme, useWithOrchestratorTheme } from '@/hooks';
 import { WfoXCircleFill } from '@/icons';
 import { SubscriptionAction, WorkflowTarget } from '@/types';
 
 import { WfoTargetTypeIcon } from '../WfoTargetTypeIcon';
 
 interface MenuItemProps {
-    subscriptionAction: SubscriptionAction;
-    target: WorkflowTarget;
-    setPopover: (isOpen: boolean) => void;
-    onClick: () => void;
+  subscriptionAction: SubscriptionAction;
+  target: WorkflowTarget;
+  setPopover: (isOpen: boolean) => void;
+  onClick: () => void;
 }
 
 export const WfoSubscriptionActionsMenuItem: FC<MenuItemProps> = ({
-    subscriptionAction,
-    onClick,
-    target,
-    setPopover,
+  subscriptionAction,
+  onClick,
+  target,
+  setPopover,
 }) => {
-    const {
-        linkMenuItemStyle,
-        tooltipMenuItemStyle,
-        disabledIconStyle,
-        iconStyle,
-        secondaryIconStyle,
-    } = useWithOrchestratorTheme(getSubscriptionActionStyles);
+  const { linkMenuItemStyle, tooltipMenuItemStyle, disabledIconStyle, iconStyle, secondaryIconStyle } =
+    useWithOrchestratorTheme(getSubscriptionActionStyles);
 
-    const { isEngineRunningNow } = useCheckEngineStatus();
-    const t = useTranslations('subscriptions.detail.actions');
-    const { theme } = useOrchestratorTheme();
+  const { isEngineRunningNow } = useCheckEngineStatus();
+  const t = useTranslations('subscriptions.detail.actions');
+  const { theme } = useOrchestratorTheme();
 
-    const linkIt = (actionItem: React.ReactNode) => {
-        const handleLinkClick = async (e: React.MouseEvent) => {
-            e.preventDefault();
-            setPopover(false);
+  const linkIt = (actionItem: React.ReactNode) => {
+    const handleLinkClick = async (e: React.MouseEvent) => {
+      e.preventDefault();
+      setPopover(false);
 
-            if (await isEngineRunningNow()) {
-                onClick();
-            }
-        };
-
-        return (
-            <div css={linkMenuItemStyle} onClick={handleLinkClick}>
-                {actionItem}
-            </div>
-        );
+      if (await isEngineRunningNow()) {
+        onClick();
+      }
     };
 
-    const tooltipIt = (actionItem: React.ReactNode) => {
-        if (!subscriptionAction.reason) return actionItem;
-        const tooltipContent = t(
-            subscriptionAction.reason,
-            flattenArrayProps(subscriptionAction),
-        );
-
-        return (
-            <div css={tooltipMenuItemStyle}>
-                <EuiToolTip position="top" content={tooltipContent}>
-                    <WfoSubscriptionActionExpandableMenuItem
-                        subscriptionAction={subscriptionAction}
-                        onClickLockedRelation={() => setPopover(false)}
-                    >
-                        {actionItem}
-                    </WfoSubscriptionActionExpandableMenuItem>
-                </EuiToolTip>
-            </div>
-        );
-    };
+    return (
+      <div css={linkMenuItemStyle} onClick={handleLinkClick}>
+        {actionItem}
+      </div>
+    );
+  };
 
-    const getIcon = () =>
-        subscriptionAction.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 tooltipIt = (actionItem: React.ReactNode) => {
+    if (!subscriptionAction.reason) return actionItem;
+    const tooltipContent = t(subscriptionAction.reason, flattenArrayProps(subscriptionAction));
 
-    const ActionItem = () => (
-        <EuiContextMenuItem
-            icon={getIcon()}
-            disabled={!!subscriptionAction.reason}
-            css={{
-                whiteSpace: 'nowrap',
-            }}
-        >
-            {subscriptionAction.description}
-        </EuiContextMenuItem>
+    return (
+      <div css={tooltipMenuItemStyle}>
+        <EuiToolTip position="top" content={tooltipContent}>
+          <WfoSubscriptionActionExpandableMenuItem
+            subscriptionAction={subscriptionAction}
+            onClickLockedRelation={() => setPopover(false)}
+          >
+            {actionItem}
+          </WfoSubscriptionActionExpandableMenuItem>
+        </EuiToolTip>
+      </div>
     );
+  };
+
+  const getIcon = () =>
+    subscriptionAction.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={!!subscriptionAction.reason}
+      css={{
+        whiteSpace: 'nowrap',
+      }}
+    >
+      {subscriptionAction.description}
+    </EuiContextMenuItem>
+  );
 
-    return subscriptionAction?.reason
-        ? tooltipIt(<ActionItem />)
-        : linkIt(<ActionItem />);
+  return subscriptionAction?.reason ? tooltipIt(<ActionItem />) : linkIt(<ActionItem />);
 };