@orchestrator-ui/orchestrator-ui-components 5.9.0 → 6.1.0

package/src/hooks/usePathAutoComplete.ts

@@ -0,0 +1,133 @@
+import { useEffect, useState } from 'react';
+
+import {
+    useSearchDefinitionsQuery,
+    useSearchPathsQuery,
+} from '@/rtk/endpoints';
+import { EntityKind, PathInfo, value_schema } from '@/types';
+
+import { useDebounce } from './useDebounce';
+
+const FALLBACK_DEFINITIONS: Record<
+    string,
+    {
+        operators: string[];
+        value_schema: Record<string, value_schema>;
+    }
+> = {
+    string: {
+        operators: ['eq', 'neq'],
+        value_schema: {
+            eq: { kind: 'string' },
+            neq: { kind: 'string' },
+        },
+    },
+    number: {
+        operators: ['eq', 'neq', 'lt', 'lte', 'gt', 'gte'],
+        value_schema: {
+            eq: { kind: 'number' },
+            neq: { kind: 'number' },
+            lt: { kind: 'number' },
+            lte: { kind: 'number' },
+            gt: { kind: 'number' },
+            gte: { kind: 'number' },
+        },
+    },
+    boolean: {
+        operators: ['eq', 'neq'],
+        value_schema: {
+            eq: { kind: 'boolean' },
+            neq: { kind: 'boolean' },
+        },
+    },
+    datetime: {
+        operators: ['eq', 'neq', 'lt', 'lte', 'gt', 'gte'],
+        value_schema: {
+            eq: { kind: 'datetime' },
+            neq: { kind: 'datetime' },
+            lt: { kind: 'datetime' },
+            lte: { kind: 'datetime' },
+            gt: { kind: 'datetime' },
+            gte: { kind: 'datetime' },
+        },
+    },
+};
+
+export const usePathAutocomplete = (prefix: string, entityType: EntityKind) => {
+    const [paths, setPaths] = useState<PathInfo[]>([]);
+    const debouncedPrefix = useDebounce(prefix, 300);
+
+    const { data: definitions = FALLBACK_DEFINITIONS, isError: defError } =
+        useSearchDefinitionsQuery();
+
+    const {
+        data: pathData,
+        isLoading,
+        isError,
+    } = useSearchPathsQuery(
+        { q: debouncedPrefix, entity_type: entityType },
+        { skip: debouncedPrefix.length < 1 },
+    );
+
+    useEffect(() => {
+        if (debouncedPrefix.length < 1) {
+            setPaths([]);
+            return;
+        }
+
+        if (!pathData) {
+            return;
+        }
+
+        const enrichedPaths: PathInfo[] = [];
+
+        // Process leaves first
+        (pathData.leaves || []).forEach((leaf) => {
+            const primaryType = leaf.ui_types[0] || 'string';
+            const typeDefinition = definitions[primaryType];
+
+            enrichedPaths.push({
+                path: leaf.name,
+                type: primaryType as
+                    | 'string'
+                    | 'number'
+                    | 'datetime'
+                    | 'boolean',
+                operators: typeDefinition?.operators || [],
+                value_schema: typeDefinition?.value_schema || {},
+                group: 'leaf',
+                displayLabel: leaf.name,
+                ui_types: leaf.ui_types,
+                availablePaths: leaf.paths || [],
+                pathCount: leaf.paths ? leaf.paths.length : 0,
+            });
+        });
+
+        (pathData.components || []).forEach((component) => {
+            const primaryType = component.ui_types[0] || 'string';
+            const typeDefinition = definitions[primaryType];
+
+            enrichedPaths.push({
+                path: component.name,
+                type: 'component',
+                operators: typeDefinition?.operators || [],
+                value_schema: typeDefinition?.value_schema || {},
+                group: 'component',
+                displayLabel: component.name,
+                ui_types: component.ui_types,
+                availablePaths: component.paths || [],
+                pathCount: component.paths ? component.paths.length : 0,
+            });
+        });
+
+        setPaths(enrichedPaths);
+    }, [pathData, definitions]);
+
+    const errorMessage = isError
+        ? 'Failed to load paths'
+        : defError
+          ? 'Failed to load definitions'
+          : null;
+
+    return { paths, loading: isLoading, error: errorMessage };
+};

package/src/hooks/useSearch.ts

@@ -0,0 +1,83 @@
+import { useEffect, useState } from 'react';
+
+import { Query } from '@elastic/eui';
+
+import { useSearchMutation } from '@/rtk/endpoints';
+import { EntityKind, Group, PaginatedSearchResults } from '@/types';
+
+export const useSearch = (
+    query: Query | string,
+    entityType: EntityKind,
+    filterGroup?: Group,
+    limit?: number,
+) => {
+    const [results, setResults] = useState<PaginatedSearchResults>({
+        data: [],
+        page_info: { has_next_page: false, next_page_cursor: null },
+        search_metadata: { search_type: null, description: null },
+    });
+
+    const [triggerSearch, { isLoading, isError }] = useSearchMutation();
+
+    useEffect(() => {
+        const queryText =
+            typeof query === 'string' ? query : query.text?.trim() || '';
+
+        const hasFilters = filterGroup && filterGroup.children.length > 0;
+
+        if (queryText.length < 2 && !hasFilters) {
+            setResults({
+                data: [],
+                page_info: { has_next_page: false, next_page_cursor: null },
+                search_metadata: { search_type: null, description: null },
+            });
+            return;
+        }
+
+        const performSearch = async () => {
+            try {
+                const result = await triggerSearch({
+                    action: 'select',
+                    entity_type: entityType,
+                    query: queryText,
+                    filters:
+                        filterGroup && filterGroup.children.length > 0
+                            ? filterGroup
+                            : undefined,
+                    limit: limit,
+                }).unwrap();
+
+                setResults({
+                    data: result.data || [],
+                    page_info: {
+                        has_next_page: result.page_info?.has_next_page || false,
+                        next_page_cursor:
+                            result.page_info?.next_page_cursor || null,
+                    },
+                    search_metadata: {
+                        search_type:
+                            result.search_metadata?.search_type || null,
+                        description:
+                            result.search_metadata?.description || null,
+                    },
+                });
+            } catch (error) {
+                console.error('Search error:', error);
+                setResults({
+                    data: [],
+                    page_info: { has_next_page: false, next_page_cursor: null },
+                    search_metadata: { search_type: null, description: null },
+                });
+            }
+        };
+
+        performSearch();
+    }, [query, entityType, filterGroup, limit, triggerSearch]);
+
+    return {
+        results,
+        loading: isLoading,
+        error: isError ? 'Search failed' : null,
+        setResults,
+    };
+};

package/src/hooks/useSearchPagination.ts

@@ -0,0 +1,148 @@
+import { useCallback, useState } from 'react';
+
+import { Query } from '@elastic/eui';
+
+import { buildSearchParams } from '@/components/WfoSearchPage/utils';
+import { useSearchWithPaginationMutation } from '@/rtk/endpoints';
+import {
+    AnySearchResult,
+    EntityKind,
+    Group,
+    PaginatedSearchResults,
+} from '@/types';
+
+interface PageHistoryItem {
+    page: number;
+    results: AnySearchResult[];
+    cursor: number | null;
+}
+
+interface UseSearchPaginationReturn {
+    currentPage: number;
+    pageHistory: PageHistoryItem[];
+    error: string | null;
+    isLoadingMore: boolean;
+    handleNextPage: (nextPageCursor: number) => Promise<void>;
+    handlePrevPage: () => void;
+    resetPagination: () => void;
+    setError: (error: string | null) => void;
+}
+
+export const useSearchPagination = (
+    debouncedQuery: Query | string,
+    selectedEntityTab: EntityKind,
+    filterGroup: Group,
+    pageSize: number,
+    results: PaginatedSearchResults,
+    setResults: (results: PaginatedSearchResults) => void,
+): UseSearchPaginationReturn => {
+    const [currentPage, setCurrentPage] = useState<number>(1);
+    const [pageHistory, setPageHistory] = useState<PageHistoryItem[]>([]);
+    const [error, setError] = useState<string | null>(null);
+    const [isLoadingMore, setIsLoadingMore] = useState<boolean>(false);
+
+    const [triggerSearchPagination] = useSearchWithPaginationMutation();
+
+    const handleNextPage = useCallback(
+        async (nextPageCursor: number) => {
+            if (!nextPageCursor || isLoadingMore) return;
+
+            setIsLoadingMore(true);
+
+            setPageHistory((prev) => [
+                ...prev.filter((p) => p.page !== currentPage),
+                {
+                    page: currentPage,
+                    results: results.data,
+                    cursor: results.page_info.next_page_cursor,
+                },
+            ]);
+
+            try {
+                setError(null);
+                const searchParams = buildSearchParams(
+                    debouncedQuery,
+                    selectedEntityTab,
+                    filterGroup,
+                    pageSize,
+                );
+
+                const res = await triggerSearchPagination({
+                    ...searchParams,
+                    cursor: nextPageCursor,
+                }).unwrap();
+
+                setResults({
+                    data: res.data || [],
+                    page_info: {
+                        has_next_page: res.page_info.has_next_page,
+                        next_page_cursor: res.page_info.next_page_cursor,
+                    },
+                    search_metadata: {
+                        search_type: res.search_metadata.search_type,
+                        description: res.search_metadata.description,
+                    },
+                });
+
+                setCurrentPage((prev) => prev + 1);
+            } catch (error) {
+                const errorMessage =
+                    error instanceof Error
+                        ? error.message
+                        : 'An unexpected error occurred while loading the next page';
+                setError(errorMessage);
+                console.error('Load next page error:', error);
+            } finally {
+                setIsLoadingMore(false);
+            }
+        },
+        [
+            currentPage,
+            results.data,
+            results.page_info.next_page_cursor,
+            isLoadingMore,
+            debouncedQuery,
+            selectedEntityTab,
+            filterGroup,
+            pageSize,
+            setResults,
+            triggerSearchPagination,
+        ],
+    );
+
+    const handlePrevPage = useCallback(() => {
+        const previousPage = pageHistory.find(
+            (p) => p.page === currentPage - 1,
+        );
+        if (previousPage) {
+            setResults({
+                data: previousPage.results,
+                page_info: {
+                    has_next_page: true,
+                    next_page_cursor: previousPage.cursor,
+                },
+                search_metadata: results.search_metadata,
+            });
+
+            setCurrentPage((prev) => prev - 1);
+
+            setPageHistory((prev) => prev.filter((p) => p.page < currentPage));
+        }
+    }, [currentPage, pageHistory, results.search_metadata, setResults]);
+
+    const resetPagination = useCallback(() => {
+        setCurrentPage(1);
+        setPageHistory([]);
+    }, []);
+
+    return {
+        currentPage,
+        pageHistory,
+        error,
+        isLoadingMore,
+        handleNextPage,
+        handlePrevPage,
+        resetPagination,
+        setError,
+    };
+};

package/src/hooks/useUrlParams.ts

@@ -0,0 +1,120 @@
+import { useCallback, useEffect, useState } from 'react';
+
+import { Query } from '@elastic/eui';
+
+import { EntityKind } from '@/types';
+
+import {
+    DEFAULT_ENTITY_TAB,
+    VALID_ENTITY_TYPES,
+} from '../components/WfoSearchPage/constants';
+
+interface UseUrlParamsReturn {
+    urlParams: URLSearchParams;
+    query: Query | string;
+    selectedEntityTab: EntityKind;
+    showFilters: boolean;
+    selectedRecordIndex: number;
+    selectedRecordId: string | null;
+    setQuery: (query: Query | string) => void;
+    setSelectedEntityTab: (tab: EntityKind) => void;
+    setShowFilters: (show: boolean) => void;
+    setSelectedRecordIndex: (index: number) => void;
+    setSelectedRecordId: (id: string | null) => void;
+}
+
+export const useUrlParams = (): UseUrlParamsReturn => {
+    const [urlParams, setUrlParams] = useState(() => {
+        if (typeof window !== 'undefined') {
+            return new URLSearchParams(window.location.search);
+        }
+        return new URLSearchParams();
+    });
+
+    const [query, setQuery] = useState<Query | string>(() => {
+        const queryParam = urlParams.get('q');
+        return queryParam || '';
+    });
+
+    const [selectedEntityTab, setSelectedEntityTab] = useState<EntityKind>(
+        () => {
+            const tabParam = urlParams.get('tab') as EntityKind;
+            return tabParam && VALID_ENTITY_TYPES.includes(tabParam)
+                ? tabParam
+                : DEFAULT_ENTITY_TAB;
+        },
+    );
+
+    const [showFilters, setShowFilters] = useState<boolean>(() => {
+        return urlParams.get('filters') === 'true';
+    });
+
+    const [selectedRecordIndex, setSelectedRecordIndex] = useState<number>(
+        () => {
+            const indexParam = urlParams.get('selected');
+            return indexParam ? parseInt(indexParam, 10) || 0 : 0;
+        },
+    );
+
+    const [selectedRecordId, setSelectedRecordId] = useState<string | null>(
+        () => {
+            return urlParams.get('id') || null;
+        },
+    );
+
+    const updateUrl = useCallback(() => {
+        const newParams = new URLSearchParams();
+
+        const queryText = typeof query === 'string' ? query : query.text || '';
+        if (queryText && queryText !== '*') {
+            newParams.set('q', queryText);
+        }
+
+        if (selectedEntityTab !== DEFAULT_ENTITY_TAB) {
+            newParams.set('tab', selectedEntityTab);
+        }
+
+        if (showFilters) {
+            newParams.set('filters', 'true');
+        }
+
+        if (selectedRecordIndex > 0) {
+            newParams.set('selected', selectedRecordIndex.toString());
+        }
+
+        if (selectedRecordId) {
+            newParams.set('id', selectedRecordId);
+        }
+
+        const newUrl = newParams.toString()
+            ? `${window.location.pathname}?${newParams.toString()}`
+            : window.location.pathname;
+
+        window.history.replaceState({}, '', newUrl);
+        setUrlParams(newParams);
+    }, [
+        query,
+        selectedEntityTab,
+        showFilters,
+        selectedRecordIndex,
+        selectedRecordId,
+    ]);
+
+    useEffect(() => {
+        updateUrl();
+    }, [updateUrl]);
+
+    return {
+        urlParams,
+        query,
+        selectedEntityTab,
+        showFilters,
+        selectedRecordIndex,
+        selectedRecordId,
+        setQuery,
+        setSelectedEntityTab,
+        setShowFilters,
+        setSelectedRecordIndex,
+        setSelectedRecordId,
+    };
+};

package/src/icons/WfoPencil.tsx

@@ -2,6 +2,13 @@ import React, { FC } from 'react';
 
 import { WfoIconProps } from './WfoIconProps';
 
+const Path = ({ color }: { color: string }) => (
+    <path
+        fill={color}
+        d="M13.3787,7.7928875 L16.2071,10.6213175 L7.82842,18.9999975 L5,18.9999975 L5,16.1715975 L13.3787,7.7928875 Z M18.4142,5.5857875 C19.1953,6.3668275 19.1953,7.6331575 18.4142,8.4142075 L17.6213,9.2071075 L14.7929,6.3786775 L15.5858,5.5857875 C16.3668,4.8047375 17.6332,4.8047375 18.4142,5.5857875 Z"
+    />
+);
+
 export const WfoPencil: FC<WfoIconProps> = ({
     width = 24,
     height = 24,
@@ -13,9 +20,21 @@ export const WfoPencil: FC<WfoIconProps> = ({
         height={height}
         viewBox="0 0 24 24"
     >
-        <path
-            fill={color}
-            d="M13.3787,7.7928875 L16.2071,10.6213175 L7.82842,18.9999975 L5,18.9999975 L5,16.1715975 L13.3787,7.7928875 Z M18.4142,5.5857875 C19.1953,6.3668275 19.1953,7.6331575 18.4142,8.4142075 L17.6213,9.2071075 L14.7929,6.3786775 L15.5858,5.5857875 C16.3668,4.8047375 17.6332,4.8047375 18.4142,5.5857875 Z"
-        />
+        <Path color={color} />
+    </svg>
+);
+
+export const WfoPencilCompact: FC<WfoIconProps> = ({
+    width = 24,
+    height = 24,
+    color = '#000000',
+}) => (
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={width}
+        height={height}
+        viewBox="5 5 14 14"
+    >
+        <Path color={color} />
     </svg>
 );

package/src/messages/en-GB.json

@@ -291,7 +291,8 @@
             "metadata": "Metadata",
             "note": "Note",
             "customerFullname": "Customer",
-            "customerShortcode": "Customer abbr"
+            "customerShortcode": "Customer abbr",
+            "actions": "Actions"
         },
         "detail": {
             "title": "Subscriptions",
@@ -465,5 +466,82 @@
         "softwareVersions": "Software Versions",
         "logout": "Logout",
         "aoStatusPage": "A&O application status page"
+    },
+    "agent": {
+        "title": "Search results",
+        "page": {
+            "filledParameters": "Filled parameters",
+            "results": "Results",
+            "emptyGroup": "Empty group",
+            "searchQuery": "Search query",
+            "activeFilters": "Active filters",
+            "noFiltersApplied": "No filters applied",
+            "entityType": "Entity type",
+            "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."
+            }
+        }
+    },
+    "search": {
+        "page": {
+            "selectFieldFirst": "Select a field first",
+            "maxNestingDepth": "Maximum nesting depth reached",
+            "addNestedGroup": "Add nested group",
+            "addCondition": "Add condition",
+            "addGroup": "Add group",
+            "removeGroup": "Remove group",
+            "emptyGroupDescription": "Add conditions or nested groups to build your filter.",
+            "emptyGroupTitle": "Empty group",
+            "fieldSearchPlaceholder": "Type to search fields...",
+            "removeConditionAriaLabel": "Remove condition",
+            "groupLabel": "Group",
+            "hideFilters": "Hide filters",
+            "showFilters": "Show filters",
+            "structuredFilters": "Structured filters",
+            "searchError": "Error",
+            "selectResultInstruction": "Detail content will be implemented here...",
+            "showingDetailsForResult": "Showing details for result #{resultNumber}",
+            "details": "Details",
+            "dismiss": "Dismiss",
+            "searchPlaceholder": "Search for {entityType}…",
+            "noResults": "No Results",
+            "noResultsMessage": "No {entityType} found matching your search criteria.",
+            "noResultsSuggestions": "Try adjusting your search terms, removing filters, or searching for different keywords.",
+            "noResultsFound": "No results found for your search.",
+            "loadingSearchResults": "Loading search results...",
+            "previousPage": "Previous page",
+            "page": "Page",
+            "nextPage": "Next page",
+            "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",
+            "toNumber": "To",
+            "fromDate": "From date",
+            "toDate": "To date",
+            "enterNumber": "Enter number",
+            "selectDateAndTime": "Select date",
+            "valueControlTo": "to",
+            "searchFieldsPlaceholder": "Search fields...",
+            "selectSpecificPathPlaceholder": "Select a specific path...",
+            "anyPathOption": "Any path",
+            "operatorLabel": "Operator",
+            "fieldLabel": "Field",
+            "valueLabel": "Value",
+            "fieldsGroupLabel": "Fields",
+            "componentsGroupLabel": "Components",
+            "pathsCount": "{count} paths"
+        },
+        "tabs": {
+            "subscriptions": "Subscriptions",
+            "products": "Products",
+            "workflows": "Workflows",
+            "processes": "Processes"
+        }
     }
 }

package/src/messages/nl-NL.json

@@ -288,7 +288,8 @@
             "note": "Notitie",
             "metadata": "Metadata",
             "customerFullname": "Klant",
-            "customerShortcode": "Klantafkorting"
+            "customerShortcode": "Klantafkorting",
+            "actions": "Acties"
         },
         "detail": {
             "title": "Subscriptions",

package/src/rtk/endpoints/index.ts

@@ -20,3 +20,4 @@ export * from './forms';
 export * from './deprecated';
 export * from './formFields';
 export * from './fileUpload';
+export * from './search';