@orchestrator-ui/orchestrator-ui-components 6.5.0 → 6.7.0

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

@@ -1,6 +1,8 @@
 import React, { FC, useState } from 'react';
 
 import { useTranslations } from 'next-intl';
+import Link from 'next/link';
+import { useRouter } from 'next/router';
 
 import {
     EuiButton,
@@ -12,14 +14,23 @@ import {
     EuiTitle,
 } from '@elastic/eui';
 
-import { WfoInSyncField } from '@/components';
+import {
+    PATH_START_NEW_TASK,
+    PATH_START_NEW_WORKFLOW,
+    PATH_TASKS,
+    PATH_WORKFLOWS,
+    WfoInSyncField,
+} from '@/components';
 import { WfoSubscriptionActionsMenuItem } from '@/components/WfoSubscription/WfoSubscriptionActions/WfoSubscriptionActionsMenuItem';
 import { PolicyResource } from '@/configuration/policy-resources';
-import { usePolicy } from '@/hooks';
+import { usePolicy, useShowToastMessage } from '@/hooks';
 import { WfoDotsHorizontal } from '@/icons/WfoDotsHorizontal';
-import { useGetSubscriptionDetailQuery } from '@/rtk';
-import { useGetSubscriptionActionsQuery } from '@/rtk/endpoints/subscriptionActions';
-import { WorkflowTarget } from '@/types';
+import {
+    useGetSubscriptionActionsQuery,
+    useGetSubscriptionDetailQuery,
+    useStartProcessMutation,
+} from '@/rtk';
+import { ToastTypes, WorkflowTarget } from '@/types';
 
 type MenuBlockProps = {
     title: string;
@@ -43,6 +54,7 @@ export const WfoSubscriptionActions: FC<WfoSubscriptionActionsProps> = ({
 }) => {
     const t = useTranslations('subscriptions.detail.actions');
     const [isPopoverOpen, setPopover] = useState(false);
+    const router = useRouter();
     const disableQuery = isLoading || (!isPopoverOpen && compactMode);
     const {
         data: subscriptionActions,
@@ -51,6 +63,8 @@ export const WfoSubscriptionActions: FC<WfoSubscriptionActionsProps> = ({
         { subscriptionId },
         { skip: disableQuery },
     );
+    const { showToastMessage } = useShowToastMessage();
+    const [startProcess] = useStartProcessMutation();
 
     const { data: subscriptionDetail } = useGetSubscriptionDetailQuery(
         {
@@ -89,23 +103,88 @@ export const WfoSubscriptionActions: FC<WfoSubscriptionActionsProps> = ({
         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,
+        isTask: boolean = false,
+    ) => {
+        startProcess({
+            workflowName: actionName,
+            userInputs: [
+                {
+                    subscription_id: subscriptionId,
+                },
+            ],
+        })
+            .unwrap()
+            .then((result) => {
+                const processUrl = `${isTask ? PATH_TASKS : PATH_WORKFLOWS}/${result.id}`;
+                showToastMessage(
+                    ToastTypes.SUCCESS,
+                    <Link href={processUrl}>{processUrl}</Link>,
+                    t('actionStarted'),
+                );
+            })
+            .catch((error) => {
+                showToastMessage(
+                    ToastTypes.ERROR,
+                    t('actionStartFailed'),
+                    t('actionStartFailed'),
+                );
+                console.error(`Failed to start action:`, error);
+            })
+            .finally(() => {
+                closePopover();
+            });
+    };
+
+    const handleActionClick = (
+        actionName: string,
+        compactMode: boolean,
+        isTask: boolean = false,
+    ) => {
+        if (compactMode) {
+            silentlyStartAction(actionName, isTask);
+        } else {
+            redirectToUrl(actionName, isTask);
+        }
+    };
+
     const compactItems = (
         <>
             {isAllowed(SUBSCRIPTION_VALIDATE + subscriptionId) &&
                 subscriptionActions?.validate && (
                     <>
                         {!compactMode && <MenuBlock title={t('tasks')} />}
-                        {subscriptionActions.validate.map((action, index) => (
-                            <WfoSubscriptionActionsMenuItem
-                                key={`s_${index}`}
-                                action={action}
-                                index={index}
-                                target={WorkflowTarget.VALIDATE}
-                                isTask
-                                subscriptionId={subscriptionId}
-                                setPopover={setPopover}
-                            />
-                        ))}
+                        {subscriptionActions.validate.map(
+                            (subscriptionAction, index) => (
+                                <WfoSubscriptionActionsMenuItem
+                                    key={`s_${index}`}
+                                    subscriptionAction={subscriptionAction}
+                                    target={WorkflowTarget.VALIDATE}
+                                    setPopover={setPopover}
+                                    onClick={() =>
+                                        handleActionClick(
+                                            subscriptionAction.name,
+                                            compactMode,
+                                            true,
+                                        )
+                                    }
+                                />
+                            ),
+                        )}
                     </>
                 )}
 
@@ -113,16 +192,23 @@ export const WfoSubscriptionActions: FC<WfoSubscriptionActionsProps> = ({
                 (subscriptionActions?.reconcile?.length ?? 0) > 0 && (
                     <>
                         {!compactMode && <MenuBlock title={t('reconcile')} />}
-                        {subscriptionActions?.reconcile.map((action, index) => (
-                            <WfoSubscriptionActionsMenuItem
-                                key={`r_${index}`}
-                                action={action}
-                                index={index}
-                                target={WorkflowTarget.RECONCILE}
-                                subscriptionId={subscriptionId}
-                                setPopover={setPopover}
-                            />
-                        ))}
+                        {subscriptionActions?.reconcile.map(
+                            (subscriptionAction, index) => (
+                                <WfoSubscriptionActionsMenuItem
+                                    key={`r_${index}`}
+                                    subscriptionAction={subscriptionAction}
+                                    target={WorkflowTarget.RECONCILE}
+                                    setPopover={setPopover}
+                                    onClick={() =>
+                                        handleActionClick(
+                                            subscriptionAction.name,
+                                            compactMode,
+                                            false,
+                                        )
+                                    }
+                                />
+                            ),
+                        )}
                     </>
                 )}
 
@@ -144,16 +230,19 @@ export const WfoSubscriptionActions: FC<WfoSubscriptionActionsProps> = ({
                 subscriptionActions?.modify && (
                     <>
                         <MenuBlock title={t('modify')} />
-                        {subscriptionActions.modify.map((action, index) => (
-                            <WfoSubscriptionActionsMenuItem
-                                key={`m_${index}`}
-                                action={action}
-                                index={index}
-                                target={WorkflowTarget.MODIFY}
-                                subscriptionId={subscriptionId}
-                                setPopover={setPopover}
-                            />
-                        ))}
+                        {subscriptionActions.modify.map(
+                            (subscriptionAction, index) => (
+                                <WfoSubscriptionActionsMenuItem
+                                    key={`m_${index}`}
+                                    subscriptionAction={subscriptionAction}
+                                    target={WorkflowTarget.MODIFY}
+                                    setPopover={setPopover}
+                                    onClick={() => {
+                                        redirectToUrl(subscriptionAction.name);
+                                    }}
+                                />
+                            ),
+                        )}
                     </>
                 )}
             {compactItems}
@@ -161,16 +250,19 @@ export const WfoSubscriptionActions: FC<WfoSubscriptionActionsProps> = ({
                 subscriptionActions?.terminate && (
                     <>
                         <MenuBlock title={t('terminate')} />
-                        {subscriptionActions.terminate.map((action, index) => (
-                            <WfoSubscriptionActionsMenuItem
-                                key={`t_${index}`}
-                                action={action}
-                                index={index}
-                                target={WorkflowTarget.TERMINATE}
-                                subscriptionId={subscriptionId}
-                                setPopover={setPopover}
-                            />
-                        ))}
+                        {subscriptionActions.terminate.map(
+                            (subscriptionAction, index) => (
+                                <WfoSubscriptionActionsMenuItem
+                                    key={`t_${index}`}
+                                    subscriptionAction={subscriptionAction}
+                                    target={WorkflowTarget.TERMINATE}
+                                    setPopover={setPopover}
+                                    onClick={() => {
+                                        redirectToUrl(subscriptionAction.name);
+                                    }}
+                                />
+                            ),
+                        )}
                     </>
                 )}
         </>

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

@@ -1,16 +1,10 @@
 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 {
@@ -24,21 +18,16 @@ import { SubscriptionAction, WorkflowTarget } from '@/types';
 import { WfoTargetTypeIcon } from '../WfoTargetTypeIcon';
 
 interface MenuItemProps {
-    key: string;
-    action: SubscriptionAction;
-    index: number;
+    subscriptionAction: SubscriptionAction;
     target: WorkflowTarget;
-    isTask?: boolean;
-    isDisabled?: boolean;
-    subscriptionId: string;
     setPopover: (isOpen: boolean) => void;
+    onClick: () => void;
 }
 
 export const WfoSubscriptionActionsMenuItem: FC<MenuItemProps> = ({
-    action,
+    subscriptionAction,
+    onClick,
     target,
-    isTask = false,
-    subscriptionId,
     setPopover,
 }) => {
     const {
@@ -50,41 +39,38 @@ export const WfoSubscriptionActionsMenuItem: FC<MenuItemProps> = ({
     } = 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);
+                onClick();
             }
         };
 
         return (
-            <Link href={url} onClick={handleLinkClick}>
-                <div css={linkMenuItemStyle}>{actionItem}</div>
-            </Link>
+            <div css={linkMenuItemStyle} onClick={handleLinkClick}>
+                {actionItem}
+            </div>
         );
     };
 
     const tooltipIt = (actionItem: React.ReactNode) => {
-        if (!action.reason) return actionItem;
-        const tooltipContent = t(action.reason, flattenArrayProps(action));
+        if (!subscriptionAction.reason) return actionItem;
+        const tooltipContent = t(
+            subscriptionAction.reason,
+            flattenArrayProps(subscriptionAction),
+        );
 
         return (
             <div css={tooltipMenuItemStyle}>
                 <EuiToolTip position="top" content={tooltipContent}>
                     <WfoSubscriptionActionExpandableMenuItem
-                        subscriptionAction={action}
+                        subscriptionAction={subscriptionAction}
                         onClickLockedRelation={() => setPopover(false)}
                     >
                         {actionItem}
@@ -95,7 +81,7 @@ export const WfoSubscriptionActionsMenuItem: FC<MenuItemProps> = ({
     };
 
     const getIcon = () =>
-        action.reason ? (
+        subscriptionAction.reason ? (
             <div css={disabledIconStyle}>
                 <WfoTargetTypeIcon target={target} disabled />
                 <div css={secondaryIconStyle}>
@@ -113,10 +99,18 @@ export const WfoSubscriptionActionsMenuItem: FC<MenuItemProps> = ({
         );
 
     const ActionItem = () => (
-        <EuiContextMenuItem icon={getIcon()} disabled={!!action.reason}>
-            {action.description}
+        <EuiContextMenuItem
+            icon={getIcon()}
+            disabled={!!subscriptionAction.reason}
+            css={{
+                whiteSpace: 'nowrap',
+            }}
+        >
+            {subscriptionAction.description}
         </EuiContextMenuItem>
     );
 
-    return action?.reason ? tooltipIt(<ActionItem />) : linkIt(<ActionItem />);
+    return subscriptionAction?.reason
+        ? tooltipIt(<ActionItem />)
+        : linkIt(<ActionItem />);
 };

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

@@ -35,6 +35,7 @@ export const getSubscriptionActionStyles = ({ theme }: WfoTheme) => {
         '&>:hover': {
             backgroundColor: theme.colors.lightestShade,
             borderRadius: theme.border.radius.medium,
+            cursor: 'pointer',
         },
         '.euiToolTipAnchor': {
             width: '100%',
@@ -60,7 +61,8 @@ export const getSubscriptionActionStyles = ({ theme }: WfoTheme) => {
     });
 
     const secondaryIconStyle = css({
-        transform: 'translate(-11px, -8px);',
+        position: 'absolute',
+        transform: 'translate(13px, -8px);',
     });
 
     const spinnerSecondaryIconStyle = css({

package/src/components/WfoSubscription/WfoTargetTypeIcon.tsx

@@ -1,6 +1,6 @@
 import React, { FC } from 'react';
 
-import { EuiAvatar } from '@elastic/eui';
+import { css } from '@emotion/css';
 
 import { useOrchestratorTheme } from '@/hooks';
 import { WorkflowTarget } from '@/types';
@@ -17,17 +17,48 @@ interface WfoInSyncCompactIconProps {
     isLoading?: boolean;
 }
 
+interface IconProps {
+    targetLetter: string;
+    backgroundColor: string;
+}
+const Icon = ({ targetLetter, backgroundColor }: IconProps) => {
+    const { theme } = useOrchestratorTheme();
+    const size = theme.size.l;
+    return (
+        <div
+            aria-label={targetLetter}
+            role="img"
+            title={targetLetter}
+            className={css({
+                backgroundColor: backgroundColor,
+                borderRadius: '50%',
+                color: theme.colors.ghost,
+                alignItems: 'center',
+                justifyContent: 'center',
+                fontWeight: 500,
+                fontSize: theme.size.m,
+                display: 'flex',
+                height: size,
+                width: size,
+            })}
+        >
+            {targetLetter}
+        </div>
+    );
+};
+
 export const WfoTargetTypeIcon: FC<WfoTargetTypeIconProps> = ({
     target,
     disabled = false,
 }) => {
     const { theme } = useOrchestratorTheme();
-
-    const color = disabled
+    const backGroundColor = disabled
         ? theme.colors.lightShade
         : getWorkflowTargetColor(target, theme);
-    const name = getWorkflowTargetIconContent(target);
-    return <EuiAvatar name={name} size="s" color={color} />;
+    const targetLetter = getWorkflowTargetIconContent(target);
+    return (
+        <Icon targetLetter={targetLetter} backgroundColor={backGroundColor} />
+    );
 };
 
 export const WfoInSyncCompactIcon: FC<WfoInSyncCompactIconProps> = ({
@@ -37,5 +68,5 @@ export const WfoInSyncCompactIcon: FC<WfoInSyncCompactIconProps> = ({
 
     const color = disabled ? theme.colors.lightShade : theme.colors.danger;
     const name = 'S';
-    return <EuiAvatar name={name} size="s" color={color} />;
+    return <Icon targetLetter={name} backgroundColor={color} />;
 };

package/src/components/WfoSubscriptionsList/WfoSubscriptionsList.tsx

@@ -167,6 +167,7 @@ export const WfoSubscriptionsList: FC<WfoSubscriptionsListProps> = ({
             note: {
                 columnType: ColumnType.DATA,
                 label: t('note'),
+                width: '300px',
                 renderData: (cellValue, row) => {
                     return (
                         <WfoSubscriptionNoteEdit

package/src/components/WfoWorkflowSteps/WfoStep/WfoStepForm.tsx

@@ -69,6 +69,7 @@ export const WfoStepForm = ({
         <EuiFlexItem css={{ margin: theme.size.m }}>
             <PydanticForm
                 formKey={processId}
+                formId="wfo-step-form"
                 config={{
                     apiProvider: getStepFormProvider(),
                     footerRenderer: () => (

package/src/components/index.ts

@@ -1,4 +1,6 @@
 export * from './WfoBadges';
+export * from './WfoBackendUnavailable';
+export * from './WfoAvailabilityCheck';
 export * from './WfoContentHeader';
 export * from './WfoExpandableField';
 export * from './WfoPageTemplate/WfoBreadcrumbs';

package/src/configuration/version.ts

@@ -1 +1 @@
-export const ORCHESTRATOR_UI_LIBRARY_VERSION = '6.5.0';
+export const ORCHESTRATOR_UI_LIBRARY_VERSION = '6.7.0';

package/src/hooks/index.ts

@@ -10,3 +10,4 @@ export * from './useWithOrchestratorTheme';
 export * from './useWfoErrorMonitoring';
 export * from './useWfoSession';
 export * from './useGetOrchestratorConfig';
+export * from './useBackendAvailability';

package/src/hooks/useBackendAvailability.ts

@@ -0,0 +1,72 @@
+import { GraphQLError } from 'graphql';
+
+import { SerializedError } from '@reduxjs/toolkit';
+import { FetchBaseQueryError } from '@reduxjs/toolkit/query';
+
+import {
+    useCheckAgentAvailabilityQuery,
+    useCheckSearchAvailabilityQuery,
+} from '@/rtk/endpoints/availability';
+
+export interface BackendFeatureStatus {
+    isAvailable: boolean;
+    isLoading: boolean;
+}
+
+type RTKQueryError = FetchBaseQueryError | SerializedError | GraphQLError[];
+
+const isNotFoundError = (error: RTKQueryError | undefined): boolean => {
+    if (error && 'status' in error) {
+        return error.status === 404;
+    }
+    return false;
+};
+
+export const useSearchAvailability = (): BackendFeatureStatus => {
+    const { isLoading, error } = useCheckSearchAvailabilityQuery();
+
+    if (isLoading) {
+        return {
+            isAvailable: false,
+            isLoading: true,
+        };
+    }
+
+    if (error) {
+        const isNotFound = isNotFoundError(error);
+        return {
+            isAvailable: !isNotFound,
+            isLoading: false,
+        };
+    }
+
+    return {
+        isAvailable: true,
+        isLoading: false,
+    };
+};
+
+export const useAgentAvailability = (): BackendFeatureStatus => {
+    const { isLoading: agentLoading, error: agentError } =
+        useCheckAgentAvailabilityQuery();
+
+    const { isLoading: searchLoading, error: searchError } =
+        useCheckSearchAvailabilityQuery();
+
+    if (agentLoading || searchLoading) {
+        return {
+            isAvailable: false,
+            isLoading: true,
+        };
+    }
+
+    const agentNotFound = agentError ? isNotFoundError(agentError) : false;
+    const searchNotFound = searchError ? isNotFoundError(searchError) : false;
+
+    const isAvailable = !agentNotFound && !searchNotFound;
+
+    return {
+        isAvailable,
+        isLoading: false,
+    };
+};

package/src/messages/en-GB.json

@@ -312,6 +312,8 @@
                 "tasks": "Tasks",
                 "terminate": "Terminate workflow",
                 "reconcile": "Reconcile workflow",
+                "actionStarted": "Action started",
+                "actionStartFailed": "Action failed",
                 "actions": "Actions",
                 "lockedBySubscriptions": "This action is locked by the following subscriptions:",
                 "notAvailable": "Not available",
@@ -473,6 +475,27 @@
     },
     "agent": {
         "title": "Search results",
+        "availability": {
+            "unavailable": {
+                "title": "Agent Service Not Available",
+                "instructions": {
+                    "setAgentEnvironment": {
+                        "before": "Set ",
+                        "after": " in your service environment variables"
+                    },
+                    "setSearchEnvironment": {
+                        "before": "Set ",
+                        "after": " (agent functionality requires search)"
+                    },
+                    "checkVersion": "Ensure your orchestrator-core version supports agent functionality",
+                    "configureOpenAI": "Configure your OpenAI API key if using OpenAI models",
+                    "restartService": "Restart your service",
+                    "checkDockerConfig": "If using Docker, make sure the environment variables are set in docker-compose.yml"
+                },
+                "documentation": "Please refer to the orchestrator documentation for detailed setup instructions.",
+                "retryButton": "Retry Connection"
+            }
+        },
         "page": {
             "filledParameters": "Filled parameters",
             "emptyGroup": "Empty group",
@@ -488,6 +511,22 @@
         }
     },
     "search": {
+        "availability": {
+            "unavailable": {
+                "title": "Search Service Not Available",
+                "instructions": {
+                    "setEnvironmentVariable": {
+                        "before": "Set ",
+                        "after": " in your service environment variables"
+                    },
+                    "checkVersion": "Ensure your orchestrator-core version supports search functionality",
+                    "restartService": "Restart your service",
+                    "checkDockerConfig": "If using Docker, make sure the environment variable is set in docker-compose.yml"
+                },
+                "documentation": "Please refer to the orchestrator documentation for detailed setup instructions.",
+                "retryButton": "Retry Connection"
+            }
+        },
         "page": {
             "selectFieldFirst": "Select a field first",
             "maxNestingDepth": "Maximum nesting depth reached",

package/src/messages/nl-NL.json

@@ -314,6 +314,8 @@
                 "reconcileSubscription": "Reconcile subscription",
                 "validateSubscription": "Validate subscription",
                 "actions": "Acties",
+                "actionStarted": "Actie gestart",
+                "actionStartFailed": "Actie mislukt",
                 "lockedBySubscriptions": "Deze actie is geblokkeerd door de volgende subscriptions:",
                 "subscription": {
                     "no_modify_deleted_related_objects": "Deze subscription kan niet worden gewijzigd omdat het verwijzingen bevat naar andere systemen die zijn verwijderd.",

package/src/rtk/api.ts

@@ -145,10 +145,12 @@ export const orchestratorApi = createApi({
 
         switch (baseQueryType) {
             case BaseQueryTypes.fetch: {
+                const baseUrl = customApi
+                    ? customApi.apiBaseUrl
+                    : orchestratorApiBaseUrl;
+
                 const fetchFn = fetchBaseQuery({
-                    baseUrl: customApi
-                        ? customApi.apiBaseUrl
-                        : orchestratorApiBaseUrl,
+                    baseUrl,
                     prepareHeaders,
                     paramsSerializer,
                     responseHandler: (response) =>