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

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

@@ -0,0 +1,50 @@
+import { css } from '@emotion/react';
+
+import { WfoTheme } from '@/hooks';
+
+export const getToolProgressStyles = ({ theme }: WfoTheme) => {
+    const containerStyle = css({
+        border: `${theme.border.width.thin} solid ${theme.colors.lightShade}`,
+        borderRadius: theme.border.radius.medium,
+        backgroundColor: theme.colors.emptyShade,
+        transition: `all ${theme.animation.normal} ease`,
+    });
+
+    const containerClickableStyle = css({
+        cursor: 'pointer',
+        '&:hover': {
+            borderColor: theme.colors.primary,
+            backgroundColor: theme.colors.lightestShade,
+        },
+    });
+
+    const headerStyle = css({
+        padding: `${theme.size.base} ${theme.size.l}`,
+    });
+
+    const nameStyle = css({
+        fontSize: theme.size.m,
+        fontWeight: theme.font.weight.medium,
+    });
+
+    const expandedContentStyle = css({
+        borderTop: `${theme.border.width.thin} solid ${theme.colors.lightShade}`,
+        padding: `${theme.size.base} ${theme.size.l}`,
+    });
+
+    const iconSize = 18;
+
+    const iconStyle = css({
+        color: theme.colors.subduedText,
+    });
+
+    return {
+        containerStyle,
+        containerClickableStyle,
+        headerStyle,
+        nameStyle,
+        expandedContentStyle,
+        iconSize,
+        iconStyle,
+    };
+};

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

@@ -2,28 +2,44 @@ import React from 'react';
 
 import { useTranslations } from 'next-intl';
 
-import { useCoAgent } from '@copilotkit/react-core';
+import {
+    CatchAllActionRenderProps,
+    useCoAgent,
+    useCoAgentStateRender,
+    useCopilotAction,
+} from '@copilotkit/react-core';
 import { CopilotSidebar } from '@copilotkit/react-ui';
 import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiText } from '@elastic/eui';
 
 import { WfoSearchResults } from '@/components/WfoSearchPage/WfoSearchResults';
-import { AnySearchParameters, AnySearchResult, PathFilter } from '@/types';
-
-import { FilterDisplay } from '../FilterDisplay';
+import { AnySearchParameters, SearchResult } from '@/types';
+
+import { ExportButton, ExportData } from '../ExportButton';
+import { ToolProgress } from '../ToolProgress';
+
+type SearchResultsData = {
+    action: string;
+    query_id: string;
+    results_url: string;
+    total_count: number;
+    message: string;
+    results: SearchResult[];
+};
 
 type SearchState = {
-    parameters: AnySearchParameters;
-    results: AnySearchResult[];
+    run_id: string | null;
+    query_id: string | null;
+    parameters: AnySearchParameters | null;
+    results_data: SearchResultsData | null;
+    export_data: ExportData | null;
 };
 
 const initialState: SearchState = {
-    parameters: {
-        action: 'select',
-        entity_type: 'SUBSCRIPTION',
-        filters: [] as PathFilter[],
-        query: null,
-    },
-    results: [],
+    run_id: null,
+    query_id: null,
+    parameters: null,
+    results_data: null,
+    export_data: null,
 };
 
 export function WfoAgent() {
@@ -34,23 +50,38 @@ export function WfoAgent() {
         name: 'query_agent',
         initialState,
     });
-    const { parameters, results } = state;
-
-    const hasStarted = !!(
-        state.parameters &&
-        Array.isArray(state.parameters.filters) &&
-        state.parameters.filters.length > 0
-    );
-
-    const isLoadingResults =
-        hasStarted && (!state.results || state.results.length === 0);
+    const { results_data } = state;
+
+    // Automatically render all tool calls
+    useCopilotAction({
+        name: '*',
+        render: ({
+            name,
+            status,
+            args,
+            result,
+        }: CatchAllActionRenderProps<[]>) => {
+            return (
+                <ToolProgress
+                    name={name}
+                    status={status}
+                    args={args}
+                    result={result}
+                />
+            );
+        },
+    });
 
-    const displayParameters = parameters && {
-        ...parameters,
-        filters: Array.isArray(parameters.filters)
-            ? { op: 'AND' as const, children: parameters.filters }
-            : parameters.filters,
-    };
+    // Render export button from state
+    useCoAgentStateRender<SearchState>({
+        name: 'query_agent',
+        render: ({ state }) => {
+            if (!state?.export_data || state.export_data.action !== 'export') {
+                return null;
+            }
+            return <ExportButton exportData={state.export_data} />;
+        },
+    });
 
     return (
         <EuiFlexGroup gutterSize="l" alignItems="stretch">
@@ -60,29 +91,25 @@ export function WfoAgent() {
                 </EuiText>
 
                 <EuiSpacer size="m" />
-                <EuiText size="s">
-                    <h2>{tPage('filledParameters')}</h2>
-                </EuiText>
-                <EuiSpacer size="s" />
-                {displayParameters && (
-                    <FilterDisplay parameters={displayParameters} />
-                )}
-
-                <EuiSpacer size="m" />
-                <EuiText size="s">
-                    <h2>
-                        {tPage('results')}{' '}
-                        {results ? `(${results.length})` : ''}
-                    </h2>
-                </EuiText>
-                <EuiSpacer size="s" />
 
-                <WfoSearchResults
-                    results={results ?? []}
-                    loading={isLoadingResults}
-                    selectedRecordIndex={-1}
-                    onRecordSelect={() => {}}
-                />
+                {results_data && results_data.action === 'view_results' && (
+                    <>
+                        {results_data.message && (
+                            <>
+                                <EuiText size="s">
+                                    <p>{results_data.message}</p>
+                                </EuiText>
+                                <EuiSpacer size="s" />
+                            </>
+                        )}
+                        <WfoSearchResults
+                            results={results_data.results}
+                            loading={false}
+                            selectedRecordIndex={-1}
+                            onRecordSelect={() => {}}
+                        />
+                    </>
+                )}
             </EuiFlexItem>
 
             <EuiFlexItem grow={1}>

package/src/components/WfoAgent/index.ts

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

package/src/components/WfoSearchPage/WfoSearch/WfoSearch.tsx

@@ -19,8 +19,6 @@ import { WfoSubscription } from '@/components';
 import { WfoBadge } from '@/components/WfoBadges';
 import {
     ENTITY_TABS,
-    findResultIndexById,
-    getRecordId,
     isSubscriptionSearchResult,
 } from '@/components/WfoSearchPage/utils';
 import { TreeProvider } from '@/contexts';
@@ -172,9 +170,8 @@ export const WfoSearch = () => {
     useEffect(() => {
         if (results.data.length > 0) {
             if (selectedRecordId) {
-                const foundIndex = findResultIndexById(
-                    results.data,
-                    selectedRecordId,
+                const foundIndex = results.data.findIndex(
+                    (result) => result.entity_id === selectedRecordId,
                 );
 
                 if (foundIndex !== -1) {
@@ -368,9 +365,9 @@ export const WfoSearch = () => {
                                         setSelectedRecordIndex(index);
                                         const record = results.data[index];
                                         if (record) {
-                                            const recordId =
-                                                getRecordId(record);
-                                            setSelectedRecordId(recordId);
+                                            setSelectedRecordId(
+                                                record.entity_id,
+                                            );
                                         }
                                     }}
                                 />
@@ -395,8 +392,7 @@ export const WfoSearch = () => {
                                                 subscriptionId={
                                                     results.data[
                                                         selectedRecordIndex
-                                                    ].subscription
-                                                        .subscription_id
+                                                    ].entity_id
                                                 }
                                             />
                                         </TreeProvider>

package/src/components/WfoSearchPage/WfoSearchResults/WfoSearchResultItem.tsx

@@ -13,14 +13,14 @@ import {
 
 import { WfoBadge } from '@/components/WfoBadges';
 import { useOrchestratorTheme } from '@/hooks';
-import { AnySearchResult } from '@/types';
+import { SearchResult } from '@/types';
 
-import { getDescription, getDetailUrl } from '../utils';
+import { getDetailUrl } from '../utils';
 import { WfoHighlightedText } from './WfoHighlightedText';
 import { WfoPathBreadcrumb } from './WfoPathBreadcrumb';
 
 interface WfoSearchResultItemProps {
-    result: AnySearchResult;
+    result: SearchResult;
     index: number;
     isSelected?: boolean;
     onSelect?: () => void;
@@ -79,7 +79,7 @@ export const WfoSearchResultItem: FC<WfoSearchResultItemProps> = ({
                                         fontWeight: theme.font.weight.semiBold,
                                     }}
                                 >
-                                    {getDescription(result)}
+                                    {result.entity_title}
                                 </EuiText>
                             </EuiFlexItem>
                             {matchingField && (

package/src/components/WfoSearchPage/WfoSearchResults/WfoSearchResults.tsx

@@ -1,16 +1,15 @@
-import React, { useState } from 'react';
+import React from 'react';
 
 import { EuiFlexGroup, EuiPanel } from '@elastic/eui';
 
-import { AnySearchResult } from '@/types';
+import { SearchResult } from '@/types';
 
 import { WfoSearchEmptyState } from './WfoSearchEmptyState';
 import { WfoSearchLoadingState } from './WfoSearchLoadingState';
 import { WfoSearchResultItem } from './WfoSearchResultItem';
-import { WfoSubscriptionDetailModal } from './WfoSubscriptionDetailModal';
 
 interface WfoSearchResultsProps {
-    results: AnySearchResult[];
+    results: SearchResult[];
     loading: boolean;
     selectedRecordIndex?: number;
     onRecordSelect?: (index: number) => void;
@@ -22,15 +21,6 @@ export const WfoSearchResults = ({
     selectedRecordIndex = 0,
     onRecordSelect,
 }: WfoSearchResultsProps) => {
-    const [modalData, setModalData] = useState<{
-        subscription: unknown;
-        matchingField?: unknown;
-    } | null>(null);
-
-    const handleCloseModal = () => {
-        setModalData(null);
-    };
-
     if (loading) {
         return <WfoSearchLoadingState />;
     }
@@ -40,26 +30,20 @@ export const WfoSearchResults = ({
     }
 
     return (
-        <>
-            <EuiPanel paddingSize="m" hasShadow={false}>
-                <EuiFlexGroup direction="column" gutterSize="s">
-                    {results.map((result, idx) => (
-                        <WfoSearchResultItem
-                            key={idx}
-                            result={result}
-                            index={idx}
-                            isSelected={idx === selectedRecordIndex}
-                            onSelect={() => onRecordSelect?.(idx)}
-                        />
-                    ))}
-                </EuiFlexGroup>
-            </EuiPanel>
-            <WfoSubscriptionDetailModal
-                isVisible={!!modalData}
-                onClose={handleCloseModal}
-                subscriptionData={modalData?.subscription}
-                matchingField={modalData?.matchingField}
-            />
-        </>
+        <EuiPanel paddingSize="m" hasShadow={false}>
+            <EuiFlexGroup direction="column" gutterSize="s">
+                {results.map((result, idx) => (
+                    <WfoSearchResultItem
+                        key={idx}
+                        result={result}
+                        index={idx}
+                        isSelected={idx === selectedRecordIndex}
+                        onSelect={() => {
+                            onRecordSelect?.(idx);
+                        }}
+                    />
+                ))}
+            </EuiFlexGroup>
+        </EuiPanel>
     );
 };

package/src/components/WfoSearchPage/WfoSearchResults/index.ts

@@ -7,4 +7,3 @@ export * from './WfoSearchMetadataHeader';
 export * from './WfoSearchPaginationInfo';
 export * from './WfoHighlightedText';
 export * from './WfoPathBreadcrumb';
-export * from './WfoSubscriptionDetailModal';

package/src/components/WfoSearchPage/utils.ts

@@ -1,36 +1,19 @@
-import {
-    AnySearchResult,
-    Condition,
-    EntityKind,
-    Group,
-    ProcessSearchResult,
-    ProductSearchResult,
-    SubscriptionSearchResult,
-    WorkflowSearchResult,
-} from '@/types';
+import { Condition, EntityKind, Group, SearchResult } from '@/types';
 
-export function isSubscriptionSearchResult(
-    item: AnySearchResult,
-): item is SubscriptionSearchResult {
-    return 'subscription' in item && typeof item.subscription === 'object';
+export function isSubscriptionSearchResult(item: SearchResult): boolean {
+    return item.entity_type === 'SUBSCRIPTION';
 }
 
-export function isProcessSearchResult(
-    item: AnySearchResult,
-): item is ProcessSearchResult {
-    return 'process' in item && typeof item.process === 'object';
+export function isProcessSearchResult(item: SearchResult): boolean {
+    return item.entity_type === 'PROCESS';
 }
 
-export function isProductSearchResult(
-    item: AnySearchResult,
-): item is ProductSearchResult {
-    return 'product' in item && typeof item.product === 'object';
+export function isProductSearchResult(item: SearchResult): boolean {
+    return item.entity_type === 'PRODUCT';
 }
 
-export function isWorkflowSearchResult(
-    item: AnySearchResult,
-): item is WorkflowSearchResult {
-    return 'workflow' in item && typeof item.workflow === 'object';
+export function isWorkflowSearchResult(item: SearchResult): boolean {
+    return item.entity_type === 'WORKFLOW';
 }
 
 export const isCondition = (item: Group | Condition): item is Condition => {
@@ -48,92 +31,9 @@ export const getEndpointPath = (entityType: EntityKind): string => {
     return ENDPOINT_PATHS[entityType] || ENDPOINT_PATHS.SUBSCRIPTION;
 };
 
-export const getDisplayText = (item: AnySearchResult): string => {
-    if (isSubscriptionSearchResult(item)) {
-        return item.subscription.description || 'Subscription';
-    }
-    if (isProcessSearchResult(item)) {
-        return item.process.workflowName;
-    }
-    if (isProductSearchResult(item)) {
-        return item.product.name;
-    }
-    if (isWorkflowSearchResult(item)) {
-        return item.workflow.name;
-    }
-    return 'Unknown result type';
-};
-
-export const getRecordId = (result: AnySearchResult): string => {
-    if (isSubscriptionSearchResult(result)) {
-        return result.subscription.subscription_id;
-    }
-    if (isProductSearchResult(result)) {
-        return result.product.product_id;
-    }
-    if (isProcessSearchResult(result)) {
-        return result.process.processId;
-    }
-    if (isWorkflowSearchResult(result)) {
-        return result.workflow.name;
-    }
-    return '';
-};
-
-export const findResultIndexById = (
-    results: AnySearchResult[],
-    recordId: string,
-): number => {
-    return results.findIndex((result) => {
-        if (isSubscriptionSearchResult(result)) {
-            return result.subscription.subscription_id === recordId;
-        }
-        if (isProductSearchResult(result)) {
-            return result.product.product_id === recordId;
-        }
-        if (isProcessSearchResult(result)) {
-            return result.process.processId === recordId;
-        }
-        if (isWorkflowSearchResult(result)) {
-            return result.workflow.name === recordId;
-        }
-        return false;
-    });
-};
-
-export const getDetailUrl = (
-    result: AnySearchResult,
-    baseUrl: string,
-): string => {
-    if (isSubscriptionSearchResult(result)) {
-        return `${baseUrl}/subscriptions/${result.subscription.subscription_id}`;
-    }
-    if (isProductSearchResult(result)) {
-        return `${baseUrl}/products/${result.product.product_id}`;
-    }
-    if (isProcessSearchResult(result)) {
-        return `${baseUrl}/processes/${result.process.processId}`;
-    }
-    if (isWorkflowSearchResult(result)) {
-        return `${baseUrl}/workflows/${result.workflow.name}`;
-    }
-    return '#';
-};
-
-export const getDescription = (result: AnySearchResult): string => {
-    if (isSubscriptionSearchResult(result)) {
-        return result.subscription.description;
-    }
-    if (isProductSearchResult(result)) {
-        return result.product.description || result.product.name;
-    }
-    if (isWorkflowSearchResult(result)) {
-        return result.workflow.description || result.workflow.name;
-    }
-    if (isProcessSearchResult(result)) {
-        return result.process.workflowName;
-    }
-    return 'Unknown';
+export const getDetailUrl = (result: SearchResult, baseUrl: string): string => {
+    const endpointPath = getEndpointPath(result.entity_type);
+    return `${baseUrl}/${endpointPath}/${result.entity_id}`;
 };
 
 export const ENTITY_TABS = [

package/src/configuration/version.ts

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

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

@@ -475,7 +475,6 @@
         "title": "Search results",
         "page": {
             "filledParameters": "Filled parameters",
-            "results": "Results",
             "emptyGroup": "Empty group",
             "searchQuery": "Search query",
             "activeFilters": "Active filters",
@@ -484,7 +483,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 +520,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/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;