@orchestrator-ui/orchestrator-ui-components 6.4.0 → 6.6.1

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,87 @@ 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) => {
+                closePopover();
+                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 set subscription in sync.', error);
+            });
+    };
+
+    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 +191,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 +229,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 +249,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/configuration/version.ts

@@ -1 +1 @@
-export const ORCHESTRATOR_UI_LIBRARY_VERSION = '6.4.0';
+export const ORCHESTRATOR_UI_LIBRARY_VERSION = '6.6.1';

package/src/hooks/useSearchPagination.ts

@@ -5,15 +5,15 @@ import { Query } from '@elastic/eui';
 import { buildSearchParams } from '@/components/WfoSearchPage/utils';
 import { useSearchWithPaginationMutation } from '@/rtk/endpoints';
 import {
-    AnySearchResult,
     EntityKind,
     Group,
     PaginatedSearchResults,
+    SearchResult,
 } from '@/types';
 
 interface PageHistoryItem {
     page: number;
-    results: AnySearchResult[];
+    results: SearchResult[];
     cursor: number | null;
 }
 

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",
@@ -475,7 +477,6 @@
         "title": "Search results",
         "page": {
             "filledParameters": "Filled parameters",
-            "results": "Results",
             "emptyGroup": "Empty group",
             "searchQuery": "Search query",
             "activeFilters": "Active filters",
@@ -484,7 +485,7 @@
             "action": "Action",
             "copilot": {
                 "title": "Database assistant",
-                "initial": "Ask me things such as:\n• *Find active subscriptions for Surf*\n• *Show terminated workflows”*\n\nThe filled template and results will appear on the left."
+                "initial": "Ask me things such as:\n• *Find active subscriptions*\n• *Show terminated workflows”*\n\nThe filled template and results will appear on the left."
             }
         }
     },
@@ -521,7 +522,6 @@
             "resultsOnPage": "{resultCount} result(s) on this page",
             "searchResultsPagination": "Search results pagination",
             "viewDetails": "View details",
-            "closeButton": "Close",
             "selectOrEnterValue": "Select or type value",
             "enterValue": "Enter value",
             "fromNumber": "From",

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/endpoints/agentExport.ts

@@ -0,0 +1,23 @@
+import { BaseQueryTypes, orchestratorApi } from '@/rtk';
+import { GraphQLPageInfo } from '@/types';
+
+export type AgentExportResponse = {
+    page: object[];
+    pageInfo?: GraphQLPageInfo;
+};
+
+const agentExportApi = orchestratorApi.injectEndpoints({
+    endpoints: (builder) => ({
+        getAgentExport: builder.query<AgentExportResponse, string>({
+            query: (downloadUrl) => ({
+                url: downloadUrl,
+                method: 'GET',
+            }),
+            extraOptions: {
+                baseQueryType: BaseQueryTypes.fetch,
+            },
+        }),
+    }),
+});
+
+export const { useLazyGetAgentExportQuery } = agentExportApi;

package/src/types/search.ts

@@ -1,85 +1,23 @@
 export type EntityKind = 'SUBSCRIPTION' | 'PRODUCT' | 'WORKFLOW' | 'PROCESS';
 
-export interface SubscriptionMatchingField {
+export interface MatchingField {
     text: string;
     path: string;
     highlight_indices: [number, number][];
 }
 
-export interface SubscriptionSearchResult {
+export interface SearchResult {
+    entity_id: string;
+    entity_type: EntityKind;
+    entity_title: string;
     score: number;
     perfect_match: number;
-    matching_field?: SubscriptionMatchingField | null;
-    subscription: {
-        subscription_id: string;
-        description: string;
-        product: {
-            name: string;
-            description: string;
-        };
-    };
+    matching_field?: MatchingField | null;
 }
 
-export interface ProcessSearchResult {
-    score: number;
-    perfect_match: number;
-    matching_field?: SubscriptionMatchingField | null;
-    process: {
-        processId: string;
-        workflowName: string;
-        workflowId: string;
-        status: string;
-        isTask: boolean;
-        createdBy?: string | null;
-        startedAt: string;
-        lastModifiedAt: string;
-        lastStep?: string | null;
-        failedReason?: string | null;
-        subscriptionIds?: string[] | null;
-    };
-}
-
-export interface ProductSearchResult {
-    score: number;
-    perfect_match: number;
-    matching_field?: SubscriptionMatchingField | null;
-    product: {
-        product_id: string;
-        name: string;
-        product_type: string;
-        tag?: string | null;
-        description?: string | null;
-        status?: string | null;
-        created_at?: string | null;
-    };
-}
-
-export interface WorkflowSearchResult {
-    score: number;
-    perfect_match: number;
-    matching_field?: SubscriptionMatchingField | null;
-    workflow: {
-        name: string;
-        products: {
-            product_type: string;
-            product_id: string;
-            name: string;
-        }[];
-        description?: string | null;
-        created_at?: string | null;
-    };
-}
-
-/** Union of all search results */
-export type AnySearchResult =
-    | SubscriptionSearchResult
-    | ProcessSearchResult
-    | ProductSearchResult
-    | WorkflowSearchResult;
-
 /** Paginated search results */
 export type PaginatedSearchResults = {
-    data: AnySearchResult[];
+    data: SearchResult[];
     page_info: {
         has_next_page: boolean;
         next_page_cursor: number | null;
@@ -138,7 +76,7 @@ type ActionType = 'select';
 type BaseSearchParameters = {
     query?: string | null;
 
-    filters?: PathFilter[] | null;
+    filters?: PathFilter[] | Group | null;
 
     action: ActionType;
 };

package/src/components/WfoAgent/FilterDisplay/index.ts

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