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

package/src/components/WfoSearchPage/WfoConditionRow/WfoConditionRow.tsx

@@ -0,0 +1,388 @@
+import React, { FC, useState } from 'react';
+
+import { useTranslations } from 'next-intl';
+
+import {
+    EuiButtonIcon,
+    EuiFlexGroup,
+    EuiFlexItem,
+    EuiFormRow,
+    EuiPanel,
+} from '@elastic/eui';
+
+import { WfoBadge } from '@/components';
+import { useOrchestratorTheme } from '@/hooks';
+import { usePathAutocomplete } from '@/hooks/usePathAutoComplete';
+import { Condition, EntityKind, PathInfo } from '@/types';
+
+import { ValueControl } from '../WfoValueControl';
+import { getTypeColor } from '../utils';
+import { WfoFieldSelector } from './WfoFieldSelector';
+import { WfoOperatorSelector } from './WfoOperatorSelector';
+import { WfoPathChips } from './WfoPathChips';
+import { WfoPathSelector } from './WfoPathSelector';
+import { WfoRenderPathOption } from './WfoRenderFunctions';
+import { WfoSelectedPathDisplay } from './WfoSelectedPathDisplay';
+import {
+    createOptionsFromPaths,
+    getPathSelectionOptions,
+    isFullPathSelected,
+    shouldHideValueInput,
+} from './utils';
+
+interface ConditionRowProps {
+    condition: Condition;
+    entityType: EntityKind;
+    onChange: (condition: Condition) => void;
+    onRemove: () => void;
+}
+
+export const ConditionRow: FC<ConditionRowProps> = ({
+    condition,
+    entityType,
+    onChange,
+    onRemove,
+}) => {
+    const t = useTranslations('search.page');
+    const { theme } = useOrchestratorTheme();
+    const [searchValue, setSearchValue] = useState(condition.path);
+    const [showPathSelection, setShowPathSelection] = useState(false);
+    const [selectedFieldName, setSelectedFieldName] = useState<string>('');
+    const { paths, loading, error } = usePathAutocomplete(
+        searchValue,
+        entityType,
+    );
+
+    const selectedPathInfo: PathInfo | null = (() => {
+        if (!condition.path) return null;
+
+        const exactMatch = paths.find(({ path, fullPath }) =>
+            fullPath ? fullPath === condition.path : path === condition.path,
+        );
+        if (exactMatch) return exactMatch;
+
+        if (condition.path.includes('.')) {
+            const fieldName = condition.path.split('.').pop();
+            if (fieldName) {
+                const fieldMatch = paths.find(
+                    ({ path, availablePaths }) =>
+                        path === fieldName &&
+                        availablePaths &&
+                        availablePaths.includes(condition.path),
+                );
+                if (fieldMatch) return fieldMatch;
+            }
+        } else {
+            const fieldMatch = paths.find(
+                ({ path }) => path === condition.path,
+            );
+            if (fieldMatch) return fieldMatch;
+        }
+
+        return null;
+    })();
+
+    const handleFieldSelection = (fieldName: string) => {
+        const fieldInfo = paths.find(({ path }) => path === fieldName);
+
+        if (fieldInfo && fieldInfo.group === 'component') {
+            onChange({
+                path: fieldName,
+                value_kind: fieldInfo.type,
+                condition: { op: '', value: undefined },
+            });
+            return;
+        }
+
+        if (
+            fieldInfo &&
+            fieldInfo.availablePaths &&
+            fieldInfo.availablePaths.length === 1
+        ) {
+            const singlePath = fieldInfo.availablePaths[0];
+            onChange({
+                path: singlePath,
+                value_kind: fieldInfo.type,
+                condition: { op: '', value: undefined },
+            });
+            return;
+        }
+
+        setSelectedFieldName(fieldName);
+        setShowPathSelection(true);
+    };
+
+    const handlePathSelection = (selectedOption: {
+        label: string;
+        value: string;
+        fullPath: string;
+        isAnyPath?: boolean;
+    }) => {
+        const fieldInfo = paths.find(({ path }) => path === selectedFieldName);
+        if (fieldInfo) {
+            if (selectedOption.isAnyPath) {
+                onChange({
+                    path: selectedFieldName,
+                    value_kind: fieldInfo.type,
+                    condition: { op: '', value: undefined },
+                });
+            } else {
+                onChange({
+                    path: selectedOption.value,
+                    value_kind: fieldInfo.type,
+                    condition: { op: '', value: undefined },
+                });
+            }
+        }
+        setShowPathSelection(false);
+        setSelectedFieldName('');
+    };
+
+    const handleOperatorChange = (op: string) => {
+        const value: unknown = undefined;
+
+        if (selectedPathInfo?.type === 'boolean') {
+            const actualOp = 'eq';
+            const booleanValue = op === 'eq' ? true : false;
+
+            onChange({
+                ...condition,
+                value_kind: selectedPathInfo?.type,
+                condition: { op: actualOp, value: booleanValue },
+            });
+            return;
+        }
+
+        onChange({
+            ...condition,
+            value_kind: selectedPathInfo?.type,
+            condition: { op, value },
+        });
+    };
+
+    const handleValueChange = (value: unknown) => {
+        onChange({
+            ...condition,
+            value_kind: selectedPathInfo?.type,
+            condition: { ...condition.condition, value },
+        });
+    };
+
+    const leavesOptions = createOptionsFromPaths(paths, 'leaf');
+    const componentsOptions = createOptionsFromPaths(paths, 'component');
+
+    const pathOptions = [
+        ...(leavesOptions.length > 0
+            ? [
+                  {
+                      label: t('fieldsGroupLabel'),
+                      options: leavesOptions,
+                  },
+              ]
+            : []),
+        ...(componentsOptions.length > 0
+            ? [
+                  {
+                      label: t('componentsGroupLabel'),
+                      options: componentsOptions,
+                  },
+              ]
+            : []),
+    ];
+
+    const hideValueInput = shouldHideValueInput(
+        selectedPathInfo,
+        !!condition.condition.op,
+    );
+    const fullPathSelected = isFullPathSelected(
+        condition.path,
+        selectedPathInfo,
+    );
+    const pathSelectionOptions = (() => {
+        const baseOptions = getPathSelectionOptions(selectedFieldName, paths);
+
+        // Add "Any path" option at the top if there are multiple paths
+        const fieldInfo = paths.find(({ path }) => path === selectedFieldName);
+        if (fieldInfo?.availablePaths && fieldInfo.availablePaths.length > 1) {
+            return [
+                {
+                    label: t('anyPathOption'),
+                    value: selectedFieldName,
+                    fullPath: selectedFieldName,
+                    isAnyPath: true,
+                },
+                ...baseOptions,
+            ];
+        }
+
+        return baseOptions;
+    })();
+
+    // Create render functions with theme
+    const renderPathOption = (
+        option: { label: string; value?: string },
+        searchValue: string,
+        contentClassName?: string,
+    ) => (
+        <WfoRenderPathOption
+            option={option}
+            searchValue={searchValue}
+            contentClassName={contentClassName}
+            paths={paths}
+        />
+    );
+
+    const renderPathSelectionOption = (option: {
+        label: string;
+        value?: string;
+        fullPath?: string;
+        isAnyPath?: boolean;
+    }) => {
+        // Get the field type from the selected field info
+        const fieldInfo = paths.find(({ path }) => path === selectedFieldName);
+        const fieldType = fieldInfo?.type || 'string';
+
+        return (
+            <WfoPathChips
+                fullPath={option.fullPath || ''}
+                label={option.label}
+                fieldType={fieldType}
+                isAnyPath={option.isAnyPath}
+            />
+        );
+    };
+
+    return (
+        <EuiPanel paddingSize="m" color="subdued">
+            <EuiFlexGroup direction="column" gutterSize="m">
+                <EuiFlexItem>
+                    <EuiFormRow
+                        label={t('fieldLabel')}
+                        error={error}
+                        isInvalid={!!error}
+                    >
+                        <EuiFlexGroup gutterSize="s" alignItems="center">
+                            <EuiFlexItem>
+                                {showPathSelection ? (
+                                    <WfoPathSelector
+                                        selectedFieldName={selectedFieldName}
+                                        pathOptions={pathSelectionOptions}
+                                        onPathSelection={handlePathSelection}
+                                        onClear={() => {
+                                            setShowPathSelection(false);
+                                            setSelectedFieldName('');
+                                        }}
+                                        renderOption={renderPathSelectionOption}
+                                    />
+                                ) : condition.path && fullPathSelected ? (
+                                    <WfoSelectedPathDisplay
+                                        condition={condition}
+                                        selectedPathInfo={selectedPathInfo}
+                                        onEdit={() => {
+                                            onChange({
+                                                path: '',
+                                                value_kind: undefined,
+                                                condition: {
+                                                    op: '',
+                                                    value: undefined,
+                                                },
+                                            });
+                                        }}
+                                    />
+                                ) : (
+                                    <WfoFieldSelector
+                                        pathOptions={pathOptions}
+                                        loading={loading}
+                                        error={error}
+                                        searchValue={searchValue}
+                                        onFieldSelection={handleFieldSelection}
+                                        onSearchChange={setSearchValue}
+                                        onClear={() => {
+                                            onChange({
+                                                path: '',
+                                                value_kind: undefined,
+                                                condition: {
+                                                    op: '',
+                                                    value: undefined,
+                                                },
+                                            });
+                                        }}
+                                        renderPathOption={renderPathOption}
+                                    />
+                                )}
+                            </EuiFlexItem>
+                            {condition.path &&
+                                selectedPathInfo?.ui_types &&
+                                selectedPathInfo.ui_types.length > 0 && (
+                                    <EuiFlexItem grow={false}>
+                                        <EuiFlexGroup
+                                            gutterSize="xs"
+                                            alignItems="center"
+                                            responsive={false}
+                                        >
+                                            {selectedPathInfo.ui_types.map(
+                                                (type, index) => (
+                                                    <EuiFlexItem
+                                                        key={index}
+                                                        grow={false}
+                                                    >
+                                                        <WfoBadge
+                                                            color={getTypeColor(
+                                                                type,
+                                                                theme,
+                                                            )}
+                                                            textColor={
+                                                                theme.colors.ink
+                                                            }
+                                                            size="s"
+                                                        >
+                                                            {type}
+                                                        </WfoBadge>
+                                                    </EuiFlexItem>
+                                                ),
+                                            )}
+                                        </EuiFlexGroup>
+                                    </EuiFlexItem>
+                                )}
+                        </EuiFlexGroup>
+                    </EuiFormRow>
+                </EuiFlexItem>
+
+                <EuiFlexItem>
+                    <EuiFlexGroup gutterSize="s" alignItems="flexEnd">
+                        <EuiFlexItem>
+                            <WfoOperatorSelector
+                                selectedPathInfo={selectedPathInfo}
+                                condition={condition}
+                                onOperatorChange={handleOperatorChange}
+                            />
+                        </EuiFlexItem>
+
+                        {!hideValueInput && (
+                            <EuiFlexItem>
+                                <EuiFormRow label={t('valueLabel')}>
+                                    <ValueControl
+                                        pathInfo={selectedPathInfo}
+                                        operator={condition.condition.op}
+                                        value={condition.condition.value}
+                                        onChange={handleValueChange}
+                                    />
+                                </EuiFormRow>
+                            </EuiFlexItem>
+                        )}
+
+                        <EuiFlexItem grow={false}>
+                            <EuiButtonIcon
+                                iconType="trash"
+                                color="danger"
+                                onClick={onRemove}
+                                aria-label={t('removeConditionAriaLabel')}
+                                size="m"
+                            />
+                        </EuiFlexItem>
+                    </EuiFlexGroup>
+                </EuiFlexItem>
+            </EuiFlexGroup>
+        </EuiPanel>
+    );
+};

package/src/components/WfoSearchPage/WfoConditionRow/WfoFieldSelector.tsx

@@ -0,0 +1,43 @@
+import React, { FC } from 'react';
+
+import { useTranslations } from 'next-intl';
+
+import { EuiComboBox } from '@elastic/eui';
+
+import { FieldSelectorProps } from './types';
+
+export const WfoFieldSelector: FC<FieldSelectorProps> = ({
+    pathOptions,
+    loading,
+    error,
+    onFieldSelection,
+    onSearchChange,
+    onClear,
+    renderPathOption,
+}) => {
+    const t = useTranslations('search.page');
+
+    const handleSelectionChange = (selected: Array<{ value?: string }>) => {
+        if (selected[0]?.value) {
+            onFieldSelection(selected[0].value);
+        } else {
+            onClear();
+        }
+    };
+
+    return (
+        <EuiComboBox
+            placeholder={t('searchFieldsPlaceholder')}
+            options={pathOptions}
+            selectedOptions={[]}
+            onChange={handleSelectionChange}
+            onSearchChange={onSearchChange}
+            singleSelection={{ asPlainText: true }}
+            isLoading={loading}
+            isClearable
+            isInvalid={!!error}
+            renderOption={renderPathOption}
+            rowHeight={30}
+        />
+    );
+};

package/src/components/WfoSearchPage/WfoConditionRow/WfoOperatorSelector.tsx

@@ -0,0 +1,100 @@
+import React, { FC } from 'react';
+
+import { useTranslations } from 'next-intl';
+
+import {
+    EuiButton,
+    EuiFlexGroup,
+    EuiFlexItem,
+    EuiFormRow,
+    EuiText,
+} from '@elastic/eui';
+
+import { WfoToolTip } from '@/components';
+import { useOrchestratorTheme } from '@/hooks';
+
+import { getButtonColor, getButtonFill, getOperatorDisplay } from '../utils';
+import { OperatorSelectorProps } from './types';
+
+export const WfoOperatorSelector: FC<OperatorSelectorProps> = ({
+    selectedPathInfo,
+    condition,
+    onOperatorChange,
+}) => {
+    const t = useTranslations('search.page');
+    const { theme } = useOrchestratorTheme();
+
+    return (
+        <EuiFormRow label={t('operatorLabel')}>
+            <EuiFlexGroup gutterSize="xs" wrap>
+                {selectedPathInfo?.operators?.map((operator) => {
+                    const { symbol, description } = getOperatorDisplay(
+                        operator,
+                        selectedPathInfo,
+                    );
+
+                    const tooltipContent =
+                        operator === 'like' ? (
+                            <div>
+                                <strong>{description}</strong>
+                                <br />
+                                <br />
+                                <strong>Wildcards:</strong>
+                                <br />• <code>%</code> matches any number of
+                                characters
+                                <br />• <code>_</code> matches exactly one
+                                character
+                                <br />
+                                <br />
+                                <strong>Examples:</strong>
+                                <br />• <code>%test%</code> finds anything
+                                containing "test"
+                                <br />• <code>test%</code> finds anything
+                                starting with "test"
+                                <br />• <code>test_</code> finds "test" + one
+                                character
+                            </div>
+                        ) : (
+                            description
+                        );
+
+                    return (
+                        <EuiFlexItem key={operator} grow={false}>
+                            <WfoToolTip tooltipContent={tooltipContent}>
+                                <EuiButton
+                                    size="s"
+                                    color={getButtonColor(
+                                        operator,
+                                        selectedPathInfo,
+                                        condition,
+                                    )}
+                                    fill={getButtonFill(
+                                        operator,
+                                        selectedPathInfo,
+                                        condition,
+                                    )}
+                                    onClick={() => onOperatorChange(operator)}
+                                    style={{
+                                        minWidth: theme.size.xxl,
+                                        fontSize: theme.size.base,
+                                        fontWeight: theme.font.weight.bold,
+                                    }}
+                                >
+                                    {symbol}
+                                </EuiButton>
+                            </WfoToolTip>
+                        </EuiFlexItem>
+                    );
+                })}
+                {(!selectedPathInfo ||
+                    selectedPathInfo.operators.length === 0) && (
+                    <EuiFlexItem grow={false}>
+                        <EuiText size="s" color={theme.colors.textSubdued}>
+                            {t('selectFieldFirst')}
+                        </EuiText>
+                    </EuiFlexItem>
+                )}
+            </EuiFlexGroup>
+        </EuiFormRow>
+    );
+};