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

package/package.json

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

package/src/components/WfoAgent/ExportButton/ExportButton.tsx

@@ -0,0 +1,96 @@
+import React from 'react';
+
+import { useTranslations } from 'next-intl';
+
+import { EuiIcon, EuiLoadingSpinner } from '@elastic/eui';
+
+import { useShowToastMessage, useWithOrchestratorTheme } from '@/hooks';
+import { useLazyGetAgentExportQuery } from '@/rtk/endpoints/agentExport';
+import { GraphQLPageInfo } from '@/types';
+import { getCsvFileNameWithDate } from '@/utils';
+import { csvDownloadHandler } from '@/utils/csvDownload';
+
+import { getExportButtonStyles } from './styles';
+
+export type ExportData = {
+    action: string;
+    download_url: string;
+    message: string;
+};
+
+export type ExportButtonProps = {
+    exportData: ExportData;
+};
+
+type ExportApiResponse = {
+    page: object[];
+    pageInfo?: GraphQLPageInfo;
+};
+
+export function ExportButton({ exportData }: ExportButtonProps) {
+    const { showToastMessage } = useShowToastMessage();
+    const tError = useTranslations('errors');
+    const [triggerExport, { isFetching }] = useLazyGetAgentExportQuery();
+
+    const {
+        containerStyle,
+        buttonWrapperStyle,
+        titleStyle,
+        fileRowStyle,
+        fileInfoStyle,
+        filenameStyle,
+        downloadButtonStyle,
+    } = useWithOrchestratorTheme(getExportButtonStyles);
+
+    const filename = getCsvFileNameWithDate('export');
+
+    const onDownloadClick = async () => {
+        const data = await triggerExport(exportData.download_url).unwrap();
+
+        const keyOrder = data.page.length > 0 ? Object.keys(data.page[0]) : [];
+
+        const handleExport = csvDownloadHandler(
+            async () => data,
+            (data: ExportApiResponse) => data.page,
+            (data: ExportApiResponse) =>
+                data.pageInfo ?? {
+                    totalItems: data.page.length,
+                    startCursor: 0,
+                    endCursor: data.page.length - 1,
+                    hasNextPage: false,
+                    hasPreviousPage: false,
+                    sortFields: [],
+                    filterFields: [],
+                },
+            keyOrder,
+            filename,
+            showToastMessage,
+            tError,
+        );
+
+        await handleExport();
+    };
+
+    return (
+        <div css={containerStyle}>
+            <div css={buttonWrapperStyle}>
+                {exportData.message && (
+                    <div css={titleStyle}>{exportData.message}</div>
+                )}
+                <div css={fileRowStyle} onClick={onDownloadClick}>
+                    <div css={fileInfoStyle}>
+                        <EuiIcon type="document" size="m" />
+                        <span css={filenameStyle}>{filename}</span>
+                    </div>
+                    <div css={downloadButtonStyle}>
+                        {isFetching ? (
+                            <EuiLoadingSpinner size="m" />
+                        ) : (
+                            <EuiIcon type="download" size="m" />
+                        )}
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}

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

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

package/src/components/WfoAgent/ExportButton/styles.ts

@@ -0,0 +1,69 @@
+import { css } from '@emotion/react';
+
+import { WfoTheme } from '@/hooks';
+
+export const getExportButtonStyles = ({ theme }: WfoTheme) => {
+    const containerStyle = css({
+        marginTop: theme.size.xl,
+        marginBottom: theme.size.xl,
+        width: '100%',
+    });
+
+    const buttonWrapperStyle = css({
+        backgroundColor: theme.colors.lightestShade,
+        padding: `${theme.size.xl} ${theme.size.xl}`,
+        border: `${theme.border.width.thin} solid transparent`,
+        display: 'flex',
+        flexDirection: 'column',
+        gap: theme.size.l,
+    });
+
+    const titleStyle = css({
+        fontSize: theme.size.m,
+        fontWeight: theme.font.weight.semiBold,
+        color: theme.colors.darkestShade,
+    });
+
+    const fileRowStyle = css({
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        gap: theme.size.m,
+        border: `${theme.border.width.thin} solid ${theme.colors.lightShade}`,
+        borderRadius: theme.border.radius.medium,
+        padding: `${theme.size.m} ${theme.size.l}`,
+        backgroundColor: theme.colors.emptyShade,
+        cursor: 'pointer',
+    });
+
+    const fileInfoStyle = css({
+        display: 'flex',
+        alignItems: 'center',
+        gap: theme.size.m,
+        flex: 1,
+        color: theme.colors.darkestShade,
+    });
+
+    const filenameStyle = css({
+        fontSize: theme.size.m,
+        fontWeight: theme.font.weight.medium,
+        color: theme.colors.darkestShade,
+    });
+
+    const downloadButtonStyle = css({
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        color: theme.colors.darkestShade,
+    });
+
+    return {
+        containerStyle,
+        buttonWrapperStyle,
+        titleStyle,
+        fileRowStyle,
+        fileInfoStyle,
+        filenameStyle,
+        downloadButtonStyle,
+    };
+};

package/src/components/WfoAgent/ToolProgress/DiscoverFilterPathsDisplay.tsx

@@ -0,0 +1,114 @@
+import React from 'react';
+
+import { EuiSpacer, EuiText } from '@elastic/eui';
+
+import { WfoBadge } from '@/components/WfoBadges';
+import { WfoPathBreadcrumb } from '@/components/WfoSearchPage/WfoSearchResults/WfoPathBreadcrumb';
+
+interface DiscoverFilterPathsResult {
+    status?: string;
+    leaves?: Array<{
+        paths?: string[];
+        name?: string;
+    }>;
+}
+
+type DiscoverFilterPathsDisplayProps = {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    result?: any;
+    parameters: {
+        field_names?: string[];
+        entity_type?: string;
+    };
+};
+
+export const DiscoverFilterPathsDisplay = ({
+    parameters,
+    result,
+}: DiscoverFilterPathsDisplayProps) => {
+    const { field_names = [] } = parameters;
+
+    const foundFields: [string, DiscoverFilterPathsResult][] = result
+        ? Object.entries(
+              result as Record<string, DiscoverFilterPathsResult>,
+          ).filter(([, fieldResult]) => fieldResult.status !== 'NOT_FOUND')
+        : [];
+
+    // Count total paths across all found fields
+    const totalPaths = foundFields.reduce((count, [, fieldResult]) => {
+        const pathCount =
+            fieldResult.leaves?.reduce((leafCount: number, leaf) => {
+                return leafCount + (leaf.paths?.length || 1);
+            }, 0) || 0;
+        return count + pathCount;
+    }, 0);
+
+    return (
+        <div>
+            {field_names.length > 0 && (
+                <>
+                    <EuiText size="xs" color="subdued">
+                        Looking for{' '}
+                        {field_names.map((name, idx) => (
+                            <React.Fragment key={name}>
+                                {idx > 0 && ', '}
+                                <WfoBadge color="hollow" textColor="default">
+                                    {name}
+                                </WfoBadge>
+                            </React.Fragment>
+                        ))}
+                    </EuiText>
+                    <EuiSpacer size="s" />
+                </>
+            )}
+
+            {result && totalPaths > 0 && (
+                <div>
+                    <EuiText size="xs" color="subdued">
+                        <strong>
+                            Found {totalPaths} path
+                            {totalPaths > 1 ? 's' : ''}:
+                        </strong>
+                    </EuiText>
+                    <EuiSpacer size="xs" />
+                    {foundFields.map(([fieldName, fieldResult]) => (
+                        <div key={fieldName} style={{ marginBottom: '8px' }}>
+                            {fieldResult.leaves &&
+                                fieldResult.leaves.length > 0 &&
+                                fieldResult.leaves.map(
+                                    (leaf, leafIdx: number) => {
+                                        const paths =
+                                            leaf.paths ||
+                                            (leaf.name ? [leaf.name] : []);
+                                        return (
+                                            <React.Fragment key={leafIdx}>
+                                                {paths.map(
+                                                    (
+                                                        path: string,
+                                                        pathIdx: number,
+                                                    ) => (
+                                                        <div
+                                                            key={pathIdx}
+                                                            style={{
+                                                                marginBottom:
+                                                                    '4px',
+                                                            }}
+                                                        >
+                                                            <WfoPathBreadcrumb
+                                                                path={path}
+                                                                size="s"
+                                                            />
+                                                        </div>
+                                                    ),
+                                                )}
+                                            </React.Fragment>
+                                        );
+                                    },
+                                )}
+                        </div>
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+};

package/src/components/WfoAgent/ToolProgress/RunSearchDisplay.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+import { EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
+
+import { WfoBadge } from '@/components/WfoBadges';
+
+type RunSearchDisplayProps = {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    result?: any;
+    parameters: {
+        limit?: number;
+    };
+};
+
+export const RunSearchDisplay = ({ parameters }: RunSearchDisplayProps) => {
+    const { limit = 10 } = parameters;
+
+    return (
+        <div>
+            <EuiFlexGroup gutterSize="s" alignItems="center">
+                <EuiFlexItem grow={false}>
+                    <EuiText size="xs" color="subdued">
+                        <strong>Results Limit</strong>
+                    </EuiText>
+                </EuiFlexItem>
+                <EuiFlexItem grow={false}>
+                    <WfoBadge textColor="default" color="hollow">
+                        {limit}
+                    </WfoBadge>
+                </EuiFlexItem>
+            </EuiFlexGroup>
+        </div>
+    );
+};

package/src/components/WfoAgent/{FilterDisplay/FilterDisplay.tsx → ToolProgress/SetFilterTreeDisplay.tsx}

@@ -2,13 +2,7 @@ import React from 'react';
 
 import { useTranslations } from 'next-intl';
 
-import {
-    EuiFlexGroup,
-    EuiFlexItem,
-    EuiPanel,
-    EuiSpacer,
-    EuiText,
-} from '@elastic/eui';
+import { EuiText } from '@elastic/eui';
 
 import { WfoBadge } from '@/components/WfoBadges';
 import { WfoPathBreadcrumb } from '@/components/WfoSearchPage/WfoSearchResults/WfoPathBreadcrumb';
@@ -16,22 +10,13 @@ import {
     getOperatorDisplay,
     isCondition,
 } from '@/components/WfoSearchPage/utils';
-import { useWithOrchestratorTheme } from '@/index';
-import { AnySearchParameters, Condition, Group, PathDataType } from '@/types';
+import { useWithOrchestratorTheme } from '@/hooks';
+import { Condition, Group, PathDataType } from '@/types';
 
-import { getFilterDisplayStyles } from './styles';
+import { getFilterDisplayStyles } from './SetFilterTreeDisplay.styles';
 
 const DEPTH_INDENT = 16;
 
-type FilterDisplayProps = {
-    parameters: {
-        action?: AnySearchParameters['action'] | string;
-        entity_type?: AnySearchParameters['entity_type'] | string;
-        filters?: Group | null;
-        query?: string | null;
-    };
-};
-
 interface BetweenValue {
     start?: string | number;
     end?: string | number;
@@ -39,9 +24,17 @@ interface BetweenValue {
     to?: string | number;
 }
 
-export function FilterDisplay({ parameters }: FilterDisplayProps) {
-    const t = useTranslations('agent.page');
+type SetFilterTreeDisplayProps = {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    result?: any;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    parameters: any;
+};
 
+export const SetFilterTreeDisplay = ({
+    parameters,
+}: SetFilterTreeDisplayProps) => {
+    const t = useTranslations('agent.page');
     const {
         wrapStyle,
         columnGroupWrapStyle,
@@ -50,15 +43,9 @@ export function FilterDisplay({ parameters }: FilterDisplayProps) {
         operatorStyle,
         valueStyle,
     } = useWithOrchestratorTheme(getFilterDisplayStyles);
-    const { action, entity_type, filters, query } = parameters ?? {};
 
-    if (!parameters || Object.keys(parameters).length === 0) return null;
-
-    const sectionTitle = (text: string) => (
-        <EuiText size="xs" color="subdued">
-            <strong>{text}</strong>
-        </EuiText>
-    );
+    // Parameters might be the Group directly, or wrapped in a filters property
+    const filters = (parameters?.filters || parameters) as Group;
 
     const formatFilterValue = (condition: Condition['condition']): string => {
         if ('value' in condition && condition.value !== undefined) {
@@ -136,47 +123,13 @@ export function FilterDisplay({ parameters }: FilterDisplayProps) {
         );
     };
 
-    return (
-        <EuiPanel hasBorder paddingSize="m">
-            <EuiFlexGroup gutterSize="m" wrap responsive>
-                <EuiFlexItem grow={false}>
-                    {sectionTitle(t('action'))}
-                    <EuiSpacer size="xs" />
-                    <WfoBadge textColor="default" color="hollow">
-                        {action || 'N/A'}
-                    </WfoBadge>
-                </EuiFlexItem>
-
-                <EuiFlexItem grow={false}>
-                    {sectionTitle(t('entityType'))}
-                    <EuiSpacer size="xs" />
-                    <WfoBadge textColor="default" color="hollow">
-                        {entity_type || 'N/A'}
-                    </WfoBadge>
-                </EuiFlexItem>
-
-                {query ? (
-                    <EuiFlexItem grow={false}>
-                        {sectionTitle(t('searchQuery'))}
-                        <EuiSpacer size="xs" />
-                        <EuiText size="s">
-                            <em>"{query}"</em>
-                        </EuiText>
-                    </EuiFlexItem>
-                ) : null}
-            </EuiFlexGroup>
-
-            <EuiSpacer size="m" />
-            {sectionTitle(t('activeFilters'))}
-            <EuiSpacer size="s" />
+    if (!filters || !filters.children || filters.children.length === 0) {
+        return (
+            <EuiText size="s" color="subdued">
+                <em>{t('noFiltersApplied')}</em>
+            </EuiText>
+        );
+    }
 
-            {filters && filters.children && filters.children.length > 0 ? (
-                renderFilterGroup(filters)
-            ) : (
-                <EuiText size="s" color="subdued">
-                    <em>{t('noFiltersApplied')}</em>
-                </EuiText>
-            )}
-        </EuiPanel>
-    );
-}
+    return <div>{renderFilterGroup(filters)}</div>;
+};

package/src/components/WfoAgent/ToolProgress/StartNewSearchDisplay.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+
+import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiText } from '@elastic/eui';
+
+import { WfoBadge } from '@/components/WfoBadges';
+
+type StartNewSearchDisplayProps = {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    result?: any;
+    parameters: {
+        entity_type?: string;
+        action?: string;
+        query?: string;
+    };
+};
+
+export const StartNewSearchDisplay = ({
+    parameters,
+}: StartNewSearchDisplayProps) => {
+    const { entity_type, action, query } = parameters;
+
+    return (
+        <div>
+            <EuiFlexGroup gutterSize="s" wrap>
+                {entity_type && (
+                    <EuiFlexItem grow={false}>
+                        <EuiText size="xs" color="subdued">
+                            <strong>Entity Type</strong>
+                        </EuiText>
+                        <EuiSpacer size="xs" />
+                        <WfoBadge textColor="default" color="hollow">
+                            {entity_type}
+                        </WfoBadge>
+                    </EuiFlexItem>
+                )}
+                {action && (
+                    <EuiFlexItem grow={false}>
+                        <EuiText size="xs" color="subdued">
+                            <strong>Action</strong>
+                        </EuiText>
+                        <EuiSpacer size="xs" />
+                        <WfoBadge textColor="default" color="hollow">
+                            {action}
+                        </WfoBadge>
+                    </EuiFlexItem>
+                )}
+            </EuiFlexGroup>
+            {query && (
+                <>
+                    <EuiSpacer size="s" />
+                    <EuiText size="xs" color="subdued">
+                        <strong>Query</strong>
+                    </EuiText>
+                    <EuiSpacer size="xs" />
+                    <EuiText size="s">
+                        <em>"{query}"</em>
+                    </EuiText>
+                </>
+            )}
+        </div>
+    );
+};

package/src/components/WfoAgent/ToolProgress/ToolProgress.tsx

@@ -0,0 +1,138 @@
+import React, { useState } from 'react';
+
+import { EuiFlexGroup, EuiFlexItem, EuiLoadingSpinner } from '@elastic/eui';
+
+import { useWithOrchestratorTheme } from '@/hooks';
+import { useOrchestratorTheme } from '@/hooks/useOrchestratorTheme';
+import {
+    WfoCheckmarkCircleFill,
+    WfoChevronDown,
+    WfoChevronUp,
+    WfoXCircleFill,
+} from '@/icons';
+import { WfoWrench } from '@/icons/heroicons';
+
+import { DiscoverFilterPathsDisplay } from './DiscoverFilterPathsDisplay';
+import { RunSearchDisplay } from './RunSearchDisplay';
+import { SetFilterTreeDisplay } from './SetFilterTreeDisplay';
+import { StartNewSearchDisplay } from './StartNewSearchDisplay';
+import { getToolProgressStyles } from './styles';
+
+type ToolProgressProps = {
+    name: string;
+    status: 'executing' | 'inProgress' | 'complete' | 'failed';
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    args?: any;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    result?: any;
+};
+
+// Mapping of tool names to their display components
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const TOOL_DISPLAY_COMPONENTS: Record<string, React.ComponentType<any>> = {
+    set_filter_tree: SetFilterTreeDisplay,
+    start_new_search: StartNewSearchDisplay,
+    run_search: RunSearchDisplay,
+    discover_filter_paths: DiscoverFilterPathsDisplay,
+};
+
+export const ToolProgress = ({
+    name,
+    status,
+    args,
+    result,
+}: ToolProgressProps) => {
+    const [isExpanded, setIsExpanded] = useState(false);
+
+    const {
+        containerStyle,
+        containerClickableStyle,
+        headerStyle,
+        nameStyle,
+        expandedContentStyle,
+        iconSize,
+        iconStyle,
+    } = useWithOrchestratorTheme(getToolProgressStyles);
+
+    const { theme } = useOrchestratorTheme();
+
+    const renderStatus = () => {
+        if (status === 'complete') {
+            return (
+                <WfoCheckmarkCircleFill
+                    color={theme.colors.success}
+                    width={iconSize}
+                    height={iconSize}
+                />
+            );
+        }
+        if (status === 'inProgress' || status === 'executing') {
+            return <EuiLoadingSpinner size="s" />;
+        }
+        if (status === 'failed') {
+            return (
+                <WfoXCircleFill
+                    color={theme.colors.danger}
+                    width={iconSize}
+                    height={iconSize}
+                />
+            );
+        }
+        return null;
+    };
+
+    const DisplayComponent = TOOL_DISPLAY_COMPONENTS[name];
+    const hasArgs = DisplayComponent && args;
+
+    return (
+        <div css={containerStyle}>
+            <div
+                css={hasArgs && containerClickableStyle}
+                onClick={() => hasArgs && setIsExpanded(!isExpanded)}
+            >
+                <EuiFlexGroup
+                    gutterSize="m"
+                    alignItems="center"
+                    css={headerStyle}
+                >
+                    <EuiFlexItem grow={false}>
+                        <div css={iconStyle}>
+                            <WfoWrench width={iconSize} height={iconSize} />
+                        </div>
+                    </EuiFlexItem>
+                    <EuiFlexItem grow={true}>
+                        <span css={nameStyle}>{name}</span>
+                    </EuiFlexItem>
+                    <EuiFlexItem
+                        grow={false}
+                        style={{ minWidth: `${iconSize}px` }}
+                    >
+                        {renderStatus()}
+                    </EuiFlexItem>
+                    <EuiFlexItem
+                        grow={false}
+                        style={{ minWidth: `${iconSize}px` }}
+                    >
+                        {hasArgs &&
+                            (isExpanded ? (
+                                <WfoChevronUp
+                                    width={iconSize}
+                                    height={iconSize}
+                                />
+                            ) : (
+                                <WfoChevronDown
+                                    width={iconSize}
+                                    height={iconSize}
+                                />
+                            ))}
+                    </EuiFlexItem>
+                </EuiFlexGroup>
+            </div>
+            {hasArgs && isExpanded && (
+                <div css={expandedContentStyle}>
+                    <DisplayComponent parameters={args} result={result} />
+                </div>
+            )}
+        </div>
+    );
+};

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

@@ -0,0 +1 @@
+export { ToolProgress } from './ToolProgress';