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

package/src/components/WfoSearchPage/WfoValueControl/WfoValueControl.tsx

@@ -0,0 +1,247 @@
+import React, { FC } from 'react';
+
+import moment from 'moment';
+import { useTranslations } from 'next-intl';
+
+import {
+    EuiComboBox,
+    EuiDatePicker,
+    EuiFieldNumber,
+    EuiFieldText,
+    EuiFlexGroup,
+    EuiFlexItem,
+    EuiFormHelpText,
+    EuiIcon,
+    EuiText,
+} from '@elastic/eui';
+
+import { useOrchestratorTheme } from '@/hooks';
+import { PathInfo } from '@/types';
+
+interface ValueControlProps {
+    pathInfo: PathInfo | null;
+    operator: string;
+    value: unknown;
+    onChange: (value: unknown) => void;
+}
+
+export const ValueControl: FC<ValueControlProps> = ({
+    pathInfo,
+    operator,
+    value,
+    onChange,
+}) => {
+    const t = useTranslations('search.page');
+    const { theme } = useOrchestratorTheme();
+
+    if (!pathInfo || !operator) return null;
+
+    const schema = pathInfo.value_schema[operator];
+    if (!schema || schema.kind === 'none') return null;
+
+    if (pathInfo.type === 'string') {
+        if (operator === 'like') {
+            const handleLikeChange = (newValue: string) => {
+                onChange(newValue);
+            };
+
+            const ensureWildcards = (inputValue: string) => {
+                if (!inputValue) return inputValue;
+                if (!inputValue.includes('%') && !inputValue.includes('_')) {
+                    return `%${inputValue}%`;
+                }
+                return inputValue;
+            };
+
+            const currentValue = String(value || '');
+            const hasWildcards =
+                currentValue.includes('%') || currentValue.includes('_');
+
+            return (
+                <>
+                    <EuiFieldText
+                        placeholder="Enter pattern (% = any chars, _ = single char)"
+                        value={currentValue}
+                        onChange={(event) =>
+                            handleLikeChange(event.target.value)
+                        }
+                        onBlur={(event) => {
+                            const finalValue = ensureWildcards(
+                                event.target.value,
+                            );
+                            if (finalValue !== event.target.value) {
+                                handleLikeChange(finalValue);
+                            }
+                        }}
+                        prepend={<EuiIcon type="search" />}
+                    />
+                    <EuiFormHelpText>
+                        {hasWildcards ? (
+                            <span>
+                                <EuiIcon
+                                    type="checkInCircleFilled"
+                                    color="success"
+                                    size="s"
+                                />{' '}
+                                Pattern with wildcards:{' '}
+                                <strong>{currentValue}</strong>
+                            </span>
+                        ) : (
+                            <span>
+                                Will search for:{' '}
+                                <strong>%{currentValue || 'your-text'}%</strong>{' '}
+                                (auto-wrapped with wildcards)
+                            </span>
+                        )}
+                    </EuiFormHelpText>
+                </>
+            );
+        }
+
+        if (pathInfo.example_values && pathInfo.example_values.length > 0) {
+            const options = pathInfo.example_values.map((val) => ({
+                label: val,
+                value: val,
+            }));
+            return (
+                <EuiComboBox
+                    placeholder={t('selectOrEnterValue')}
+                    options={options}
+                    selectedOptions={
+                        value
+                            ? [{ label: String(value), value: String(value) }]
+                            : []
+                    }
+                    onChange={(selected) => onChange(selected[0]?.value || '')}
+                    singleSelection={{ asPlainText: true }}
+                    isClearable
+                />
+            );
+        }
+        return (
+            <EuiFieldText
+                placeholder={t('enterValue')}
+                value={String(value || '')}
+                onChange={(event) => onChange(event.target.value)}
+            />
+        );
+    }
+
+    if (pathInfo.type === 'number') {
+        if (operator === 'between') {
+            const betweenValue = (value as {
+                start: number | string;
+                end: number | string;
+            }) || { start: '', end: '' };
+            return (
+                <EuiFlexGroup gutterSize="s" alignItems="center">
+                    <EuiFlexItem>
+                        <EuiFieldNumber
+                            placeholder={t('fromNumber')}
+                            value={betweenValue.start}
+                            onChange={(event) =>
+                                onChange({
+                                    ...betweenValue,
+                                    start: parseFloat(event.target.value) || '',
+                                })
+                            }
+                        />
+                    </EuiFlexItem>
+                    <EuiFlexItem grow={false}>
+                        <EuiText size="s" color={theme.colors.textSubdued}>
+                            to
+                        </EuiText>
+                    </EuiFlexItem>
+                    <EuiFlexItem>
+                        <EuiFieldNumber
+                            placeholder={t('toNumber')}
+                            value={betweenValue.end}
+                            onChange={(event) =>
+                                onChange({
+                                    ...betweenValue,
+                                    end: parseFloat(event.target.value) || '',
+                                })
+                            }
+                        />
+                    </EuiFlexItem>
+                </EuiFlexGroup>
+            );
+        }
+        return (
+            <EuiFieldNumber
+                placeholder={t('enterNumber')}
+                value={
+                    value !== undefined && value !== null ? Number(value) : ''
+                }
+                onChange={(event) =>
+                    onChange(parseFloat(event.target.value) || '')
+                }
+            />
+        );
+    }
+
+    if (pathInfo.type === 'datetime') {
+        if (operator === 'between') {
+            const betweenValue = (value as {
+                start: string | null;
+                end: string | null;
+            }) || { start: null, end: null };
+            return (
+                <EuiFlexGroup gutterSize="s" alignItems="center">
+                    <EuiFlexItem>
+                        <EuiDatePicker
+                            selected={
+                                betweenValue.start
+                                    ? moment(betweenValue.start)
+                                    : null
+                            }
+                            onChange={(date) =>
+                                onChange({
+                                    ...betweenValue,
+                                    start: date?.toISOString(),
+                                })
+                            }
+                            showTimeSelect
+                            dateFormat="yyyy-MM-dd HH:mm"
+                            placeholderText={t('fromDate')}
+                        />
+                    </EuiFlexItem>
+                    <EuiFlexItem grow={false}>
+                        <EuiText size="s" color={theme.colors.textSubdued}>
+                            {t('valueControlTo')}
+                        </EuiText>
+                    </EuiFlexItem>
+                    <EuiFlexItem>
+                        <EuiDatePicker
+                            selected={
+                                betweenValue.end
+                                    ? moment(betweenValue.end)
+                                    : null
+                            }
+                            onChange={(date) =>
+                                onChange({
+                                    ...betweenValue,
+                                    end: date?.toISOString(),
+                                })
+                            }
+                            showTimeSelect
+                            dateFormat="yyyy-MM-dd HH:mm"
+                            placeholderText={t('toDate')}
+                        />
+                    </EuiFlexItem>
+                </EuiFlexGroup>
+            );
+        }
+        return (
+            <EuiDatePicker
+                selected={value ? moment(String(value)) : null}
+                onChange={(date) => onChange(date?.toISOString())}
+                showTimeSelect
+                dateFormat="yyyy-MM-dd HH:mm"
+                placeholderText={t('selectDateAndTime')}
+            />
+        );
+    }
+
+    return null;
+};

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

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

package/src/components/WfoSearchPage/constants.ts

@@ -0,0 +1,17 @@
+export const DEFAULT_PAGE_SIZE = 5;
+export const DEFAULT_DEBOUNCE_DELAY = 300;
+export const SMALL_RESULT_THRESHOLD = 10;
+
+export const LAYOUT_RATIOS = {
+    RESULTS_GROW: 2,
+    DETAIL_GROW: 3,
+} as const;
+
+export const VALID_ENTITY_TYPES = [
+    'SUBSCRIPTION',
+    'PRODUCT',
+    'WORKFLOW',
+    'PROCESS',
+] as const;
+
+export const DEFAULT_ENTITY_TAB = 'SUBSCRIPTION';

package/src/components/WfoSearchPage/index.ts

@@ -0,0 +1,6 @@
+export * from './WfoSearch';
+export * from './WfoSearchResults';
+export * from './WfoFilterGroup';
+export * from './WfoConditionRow';
+export * from './WfoValueControl';
+export * from './utils';

package/src/components/WfoSearchPage/utils.ts

@@ -0,0 +1,271 @@
+import {
+    AnySearchResult,
+    Condition,
+    EntityKind,
+    Group,
+    ProcessSearchResult,
+    ProductSearchResult,
+    SubscriptionSearchResult,
+    WorkflowSearchResult,
+} from '@/types';
+
+export function isSubscriptionSearchResult(
+    item: AnySearchResult,
+): item is SubscriptionSearchResult {
+    return 'subscription' in item && typeof item.subscription === 'object';
+}
+
+export function isProcessSearchResult(
+    item: AnySearchResult,
+): item is ProcessSearchResult {
+    return 'process' in item && typeof item.process === 'object';
+}
+
+export function isProductSearchResult(
+    item: AnySearchResult,
+): item is ProductSearchResult {
+    return 'product' in item && typeof item.product === 'object';
+}
+
+export function isWorkflowSearchResult(
+    item: AnySearchResult,
+): item is WorkflowSearchResult {
+    return 'workflow' in item && typeof item.workflow === 'object';
+}
+
+export const isCondition = (item: Group | Condition): item is Condition => {
+    return 'path' in item && 'condition' in item;
+};
+
+const ENDPOINT_PATHS: Record<EntityKind, string> = {
+    PROCESS: 'processes',
+    PRODUCT: 'products',
+    WORKFLOW: 'workflows',
+    SUBSCRIPTION: 'subscriptions',
+};
+
+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 ENTITY_TABS = [
+    { id: 'SUBSCRIPTION' as const, label: 'Subscriptions' },
+    { id: 'PRODUCT' as const, label: 'Products' },
+    { id: 'WORKFLOW' as const, label: 'Workflows' },
+    { id: 'PROCESS' as const, label: 'Processes' },
+];
+
+interface ThemeColors {
+    success: string;
+    primary: string;
+    warning: string;
+    accent: string;
+    textSubdued: string;
+}
+
+interface Theme {
+    colors: ThemeColors;
+}
+
+const TYPE_COLOR_MAP: Record<string, keyof ThemeColors> = {
+    string: 'success',
+    number: 'primary',
+    boolean: 'warning',
+    datetime: 'accent',
+    component: 'primary',
+};
+
+export const getTypeColor = (type: string, theme: Theme): string => {
+    const colorKey = TYPE_COLOR_MAP[type.toLowerCase()];
+    return colorKey ? theme.colors[colorKey] : theme.colors.textSubdued;
+};
+
+interface PathInfo {
+    type?: string;
+    [key: string]: unknown;
+}
+
+interface OperatorDisplay {
+    symbol: string;
+    description: string;
+}
+
+const OPERATOR_MAP: Record<string, OperatorDisplay> = {
+    eq: { symbol: '=', description: 'equals' },
+    neq: { symbol: '≠', description: 'not equals' },
+    lt: { symbol: '<', description: 'less than' },
+    lte: { symbol: '≤', description: 'less than or equal to' },
+    gt: { symbol: '>', description: 'greater than' },
+    gte: { symbol: '≥', description: 'greater than or equal to' },
+    between: { symbol: '⟷', description: 'between (range)' },
+    has_component: { symbol: '✓', description: 'has component' },
+    not_has_component: { symbol: '✗', description: 'does not have component' },
+};
+
+const BOOLEAN_OPERATOR_MAP: Record<string, OperatorDisplay> = {
+    eq: { symbol: '✓', description: 'is true' },
+    neq: { symbol: '✗', description: 'is false' },
+};
+
+export const getOperatorDisplay = (
+    op: string,
+    selectedPathInfo?: PathInfo,
+): OperatorDisplay => {
+    if (selectedPathInfo?.type === 'boolean' && BOOLEAN_OPERATOR_MAP[op]) {
+        return BOOLEAN_OPERATOR_MAP[op];
+    }
+    return OPERATOR_MAP[op] || { symbol: op, description: op };
+};
+
+export const getButtonColor = (
+    op: string,
+    pathInfo: PathInfo | null,
+    condition: Condition,
+): 'primary' | 'text' => {
+    if (pathInfo?.type === 'boolean') {
+        const isSelected =
+            op === 'eq'
+                ? condition.condition.value === true
+                : condition.condition.value === false;
+        return isSelected ? 'primary' : 'text';
+    }
+    return condition.condition.op === op ? 'primary' : 'text';
+};
+
+export const getButtonFill = (
+    op: string,
+    pathInfo: PathInfo | null,
+    condition: Condition,
+): boolean => {
+    if (pathInfo?.type === 'boolean') {
+        return op === 'eq'
+            ? condition.condition.value === true
+            : condition.condition.value === false;
+    }
+    return condition.condition.op === op;
+};
+
+export const isFilterValid = (group: Group): boolean => {
+    return group.children.every((child) => {
+        if (isCondition(child)) {
+            return (
+                child.path &&
+                child.condition.op &&
+                child.condition.value !== undefined
+            );
+        }
+        return isFilterValid(child);
+    });
+};
+
+interface SearchQuery {
+    text?: string;
+}
+
+export const buildSearchParams = (
+    debouncedQuery: SearchQuery | string,
+    selectedEntityTab: EntityKind,
+    filterGroup: Group,
+    pageSize: number,
+) => {
+    const queryText =
+        typeof debouncedQuery === 'string'
+            ? debouncedQuery
+            : debouncedQuery?.text?.trim() || '';
+
+    return {
+        action: 'select' as const,
+        entity_type: selectedEntityTab,
+        query: queryText || '',
+        filters: filterGroup?.children.length > 0 ? filterGroup : undefined,
+        limit: pageSize,
+    };
+};

package/src/components/index.ts

@@ -36,3 +36,5 @@ export * from './WfoInlineNoteEdit';
 export * from './WfoTableCodeBlock';
 export * from './WfoInlineEdit';
 export * from './WfoPydanticForm';
+export * from './WfoSearchPage';
+export * from './WfoAgent';

package/src/configuration/version.ts

@@ -1 +1 @@
-export const ORCHESTRATOR_UI_LIBRARY_VERSION = '5.9.0';
+export const ORCHESTRATOR_UI_LIBRARY_VERSION = '6.1.0';

package/src/hooks/useDebounce.ts

@@ -0,0 +1,21 @@
+import { useEffect, useState } from 'react';
+
+export function useDebounce<T>(value: T, delay: number): T {
+    const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+    useEffect(() => {
+        if (delay <= 0) {
+            setDebouncedValue(value);
+            return;
+        }
+        const handler = setTimeout(() => {
+            setDebouncedValue(value);
+        }, delay);
+
+        return () => {
+            clearTimeout(handler);
+        };
+    }, [value, delay]);
+
+    return debouncedValue;
+}