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

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

@@ -0,0 +1,193 @@
+import React, { FC } from 'react';
+
+import { EuiIcon } from '@elastic/eui';
+
+import { WfoBadge, WfoToolTip } from '@/components';
+import { useOrchestratorTheme } from '@/hooks';
+
+import { getTypeColor } from '../utils';
+
+interface WfoPathChipsProps {
+    fullPath: string;
+    label: string;
+    fieldType?: string;
+    isAnyPath?: boolean;
+}
+
+export const WfoPathChips: FC<WfoPathChipsProps> = ({
+    fullPath,
+    label,
+    fieldType,
+    isAnyPath = false,
+}) => {
+    const { theme } = useOrchestratorTheme();
+
+    // For "Any path" case, just show the label
+    if (isAnyPath) {
+        return (
+            <WfoToolTip tooltipContent={label}>
+                <div
+                    style={{
+                        display: 'flex',
+                        justifyContent: 'space-between',
+                        alignItems: 'center',
+                        padding: `${theme.size.xs} ${theme.size.s} ${theme.size.xs} 0`,
+                        textDecoration: 'none',
+                        width: '100%',
+                        boxSizing: 'border-box',
+                        minHeight: theme.size.xl,
+                    }}
+                >
+                    <div
+                        style={{
+                            display: 'flex',
+                            gap: theme.size.xs,
+                            alignItems: 'center',
+                            flexWrap: 'nowrap',
+                            textDecoration: 'none',
+                            marginRight: theme.size.s,
+                            flex: 1,
+                            overflow: 'visible',
+                        }}
+                    >
+                        <div
+                            style={{
+                                textDecoration: 'none',
+                                borderBottom: 'none',
+                            }}
+                        >
+                            <WfoBadge
+                                color="primary"
+                                textColor={theme.colors.ghost}
+                                size="xs"
+                            >
+                                <span
+                                    style={{
+                                        textDecoration: 'none',
+                                        borderBottom: 'none',
+                                        outline: 'none',
+                                        textDecorationLine: 'none',
+                                        textDecorationColor: 'transparent',
+                                    }}
+                                >
+                                    {label}
+                                </span>
+                            </WfoBadge>
+                        </div>
+                    </div>
+                    {fieldType && (
+                        <div style={{ flexShrink: 0 }}>
+                            <WfoBadge
+                                color={getTypeColor(fieldType, theme)}
+                                textColor={theme.colors.ink}
+                                size="xs"
+                            >
+                                <span style={{ textDecoration: 'none' }}>
+                                    {fieldType}
+                                </span>
+                            </WfoBadge>
+                        </div>
+                    )}
+                </div>
+            </WfoToolTip>
+        );
+    }
+
+    // Extract the last two meaningful segments from the full path
+    const completePath = fullPath || label;
+    const allSegments = completePath
+        .split('.')
+        .filter(
+            (segment) =>
+                segment && !segment.match(/^\d+$/) && !segment.includes('('),
+        );
+
+    // Only show the last two segments
+    const pathSegments = allSegments.slice(-2);
+
+    return (
+        <WfoToolTip tooltipContent={completePath}>
+            <div
+                style={{
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    padding: `${theme.size.xs} ${theme.size.s} ${theme.size.xs} 0`,
+                    textDecoration: 'none',
+                    width: '100%',
+                    boxSizing: 'border-box',
+                    minHeight: theme.size.xl,
+                }}
+            >
+                <div
+                    style={{
+                        display: 'flex',
+                        gap: theme.size.xs,
+                        alignItems: 'center',
+                        flexWrap: 'nowrap',
+                        textDecoration: 'none',
+                        marginRight: theme.size.s,
+                        flex: 1,
+                        overflow: 'visible',
+                    }}
+                >
+                    {pathSegments.map((segment, index) =>
+                        [
+                            <div
+                                key={`segment-${index}`}
+                                style={{
+                                    textDecoration: 'none',
+                                    borderBottom: 'none',
+                                }}
+                            >
+                                <WfoBadge
+                                    color="primary"
+                                    textColor={theme.colors.ghost}
+                                    size="xs"
+                                >
+                                    <span
+                                        style={{
+                                            textDecoration: 'none',
+                                            borderBottom: 'none',
+                                            outline: 'none',
+                                            textDecorationLine: 'none',
+                                            textDecorationColor: 'transparent',
+                                        }}
+                                    >
+                                        {segment}
+                                    </span>
+                                </WfoBadge>
+                            </div>,
+                            index < pathSegments.length - 1 && (
+                                <EuiIcon
+                                    key={`arrow-${index}`}
+                                    type="arrowRight"
+                                    size="s"
+                                    color={theme.colors.mediumShade}
+                                    title=""
+                                    style={{
+                                        flexShrink: 0,
+                                        marginTop: '1px',
+                                    }}
+                                />
+                            ),
+                        ].filter(Boolean),
+                    )}
+                </div>
+                {fieldType && (
+                    <div style={{ flexShrink: 0 }}>
+                        <WfoBadge
+                            color={getTypeColor(fieldType, theme)}
+                            textColor={theme.colors.ink}
+                            size="xs"
+                        >
+                            <span style={{ textDecoration: 'none' }}>
+                                {fieldType}
+                            </span>
+                        </WfoBadge>
+                    </div>
+                )}
+            </div>
+        </WfoToolTip>
+    );
+};

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

@@ -0,0 +1,54 @@
+import React, { FC } from 'react';
+
+import { useTranslations } from 'next-intl';
+
+import { EuiComboBox } from '@elastic/eui';
+
+import { PathSelectorProps } from './types';
+
+export const WfoPathSelector: FC<PathSelectorProps> = ({
+    selectedFieldName,
+    pathOptions,
+    onPathSelection,
+    onClear,
+    renderOption,
+}) => {
+    const t = useTranslations('search.page');
+
+    return (
+        <EuiComboBox
+            placeholder={t('selectSpecificPathPlaceholder')}
+            options={pathOptions}
+            selectedOptions={[
+                {
+                    label: `${selectedFieldName}:`,
+                    value: selectedFieldName,
+                },
+            ]}
+            onChange={(selected) => {
+                if (selected[0]?.value) {
+                    const selectedOption = pathOptions.find(
+                        (option) => option.value === selected[0].value,
+                    );
+                    if (selectedOption) {
+                        onPathSelection(selectedOption);
+                    }
+                } else if (selected.length === 0) {
+                    onClear();
+                }
+            }}
+            singleSelection={{ asPlainText: true }}
+            isClearable
+            renderOption={renderOption}
+            rowHeight={40}
+            autoFocus={true}
+            fullWidth={true}
+            style={{
+                minWidth: '500px',
+                maxWidth: '100%',
+                textDecoration: 'none',
+            }}
+            className="wfo-path-selector"
+        />
+    );
+};

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

@@ -0,0 +1,107 @@
+import React, { FC } from 'react';
+
+import { useTranslations } from 'next-intl';
+
+import { EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
+
+import { WfoBadge, WfoToolTip } from '@/components';
+import { useOrchestratorTheme } from '@/hooks';
+
+import { getTypeColor } from '../utils';
+import { PathOptionRenderProps, PathSelectionOptionRenderProps } from './types';
+
+export const WfoRenderPathOption: FC<PathOptionRenderProps> = ({
+    option,
+    contentClassName,
+    paths,
+}) => {
+    const t = useTranslations('search.page');
+    const { theme } = useOrchestratorTheme();
+    const pathInfo = option.value
+        ? paths.find(({ path }) => path === option.value)
+        : null;
+
+    if (!pathInfo) return <>{option.label}</>;
+
+    return (
+        <EuiFlexGroup
+            alignItems="center"
+            gutterSize="s"
+            responsive={false}
+            className={contentClassName}
+            title=""
+        >
+            <EuiFlexItem grow={true}>
+                <EuiText size="s">
+                    {pathInfo.displayLabel || pathInfo.path}
+                </EuiText>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+                <EuiFlexGroup
+                    gutterSize="xs"
+                    alignItems="center"
+                    responsive={false}
+                >
+                    {pathInfo.group === 'leaf' &&
+                        pathInfo.pathCount &&
+                        pathInfo.pathCount > 1 && (
+                            <EuiFlexItem grow={false}>
+                                <WfoBadge
+                                    color="default"
+                                    textColor={theme.colors.ink}
+                                    size="xs"
+                                >
+                                    {t('pathsCount', {
+                                        count: pathInfo.pathCount,
+                                    })}
+                                </WfoBadge>
+                            </EuiFlexItem>
+                        )}
+                    {(!pathInfo.pathCount || pathInfo.pathCount <= 1) &&
+                        pathInfo.ui_types?.map((type, index) => (
+                            <EuiFlexItem key={index} grow={false}>
+                                <WfoBadge
+                                    color={getTypeColor(type, theme)}
+                                    textColor={theme.colors.ink}
+                                    size="xs"
+                                >
+                                    {type}
+                                </WfoBadge>
+                            </EuiFlexItem>
+                        ))}
+                </EuiFlexGroup>
+            </EuiFlexItem>
+        </EuiFlexGroup>
+    );
+};
+
+export const WfoRenderPathSelectionOption: FC<
+    PathSelectionOptionRenderProps
+> = ({ option, contentClassName, fieldType }) => {
+    const { theme } = useOrchestratorTheme();
+
+    return (
+        <WfoToolTip tooltipContent={option.fullPath || option.label}>
+            <EuiFlexGroup
+                alignItems="center"
+                gutterSize="s"
+                responsive={false}
+                className={contentClassName}
+                title=""
+            >
+                <EuiFlexItem grow={true}>
+                    <EuiText size="s">{option.label}</EuiText>
+                </EuiFlexItem>
+                <EuiFlexItem grow={false}>
+                    <WfoBadge
+                        color={getTypeColor(fieldType, theme)}
+                        textColor={theme.colors.ink}
+                        size="xs"
+                    >
+                        {fieldType}
+                    </WfoBadge>
+                </EuiFlexItem>
+            </EuiFlexGroup>
+        </WfoToolTip>
+    );
+};

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

@@ -0,0 +1,75 @@
+import React, { FC } from 'react';
+
+import { EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
+
+import { useOrchestratorTheme } from '@/hooks';
+
+import { SelectedPathDisplayProps } from './types';
+import { getFieldNameFromFullPath } from './utils';
+
+export const WfoSelectedPathDisplay: FC<SelectedPathDisplayProps> = ({
+    condition,
+    onEdit,
+}) => {
+    const { theme } = useOrchestratorTheme();
+
+    const isFullPath = condition.path.includes('.');
+
+    return (
+        <div
+            onClick={onEdit}
+            style={{
+                cursor: 'pointer',
+                border: `1px solid ${theme.colors.lightShade}`,
+                borderRadius: theme.border.radius.medium,
+                padding: `${theme.size.s} ${theme.size.m}`,
+                backgroundColor: theme.colors.emptyShade,
+                minHeight: '40px',
+                display: 'flex',
+                alignItems: 'center',
+            }}
+        >
+            <EuiFlexGroup
+                alignItems="center"
+                gutterSize="s"
+                responsive={false}
+                justifyContent="spaceBetween"
+            >
+                <EuiFlexItem grow={true}>
+                    {isFullPath ? (
+                        <EuiFlexGroup
+                            gutterSize="none"
+                            alignItems="center"
+                            responsive={false}
+                        >
+                            <EuiFlexItem grow={false}>
+                                <EuiText size="s" color={theme.colors.text}>
+                                    {getFieldNameFromFullPath(condition.path)}:
+                                </EuiText>
+                            </EuiFlexItem>
+                            <EuiFlexItem grow={false}>
+                                <EuiText
+                                    size="s"
+                                    style={{
+                                        backgroundColor:
+                                            theme.colors.lightestShade,
+                                        color: theme.colors.primary,
+                                        padding: `${theme.size.xxs} ${theme.size.xs}`,
+                                        borderRadius: theme.border.radius.small,
+                                        marginLeft: theme.size.xs,
+                                    }}
+                                >
+                                    {condition.path}
+                                </EuiText>
+                            </EuiFlexItem>
+                        </EuiFlexGroup>
+                    ) : (
+                        <EuiText size="s" color={theme.colors.text}>
+                            {condition.path}
+                        </EuiText>
+                    )}
+                </EuiFlexItem>
+            </EuiFlexGroup>
+        </div>
+    );
+};

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

@@ -0,0 +1,11 @@
+export { ConditionRow } from './WfoConditionRow';
+export { WfoFieldSelector } from './WfoFieldSelector';
+export { WfoPathSelector } from './WfoPathSelector';
+export { WfoSelectedPathDisplay } from './WfoSelectedPathDisplay';
+export { WfoOperatorSelector } from './WfoOperatorSelector';
+export {
+    WfoRenderPathOption,
+    WfoRenderPathSelectionOption,
+} from './WfoRenderFunctions';
+export * from './types';
+export * from './utils';

package/src/components/WfoSearchPage/WfoConditionRow/types.ts

@@ -0,0 +1,84 @@
+import { Condition, EntityKind, PathInfo } from '@/types';
+
+export interface ConditionRowProps {
+    condition: Condition;
+    entityType: EntityKind;
+    onChange: (condition: Condition) => void;
+    onRemove: () => void;
+}
+
+export interface FieldSelectorProps {
+    pathOptions: Array<{
+        label: string;
+        options: Array<{
+            label: string;
+            value: string;
+            'data-type': string;
+            'data-operators': string;
+        }>;
+    }>;
+    loading: boolean;
+    error: string | null;
+    searchValue: string;
+    onFieldSelection: (fieldName: string) => void;
+    onSearchChange: (value: string) => void;
+    onClear: () => void;
+    renderPathOption: (
+        option: { label: string; value?: string },
+        searchValue: string,
+        contentClassName?: string,
+    ) => JSX.Element;
+}
+
+export interface PathSelectorProps {
+    selectedFieldName: string;
+    pathOptions: Array<{
+        label: string;
+        value: string;
+        fullPath: string;
+        isAnyPath?: boolean;
+    }>;
+    onPathSelection: (option: {
+        label: string;
+        value: string;
+        fullPath: string;
+        isAnyPath?: boolean;
+    }) => void;
+    onClear: () => void;
+    renderOption?: (
+        option: {
+            label: string;
+            value?: string;
+            fullPath?: string;
+            isAnyPath?: boolean;
+        },
+        searchValue: string,
+        contentClassName?: string,
+    ) => JSX.Element;
+}
+
+export interface SelectedPathDisplayProps {
+    condition: Condition;
+    selectedPathInfo: PathInfo | null;
+    onEdit: () => void;
+}
+
+export interface OperatorSelectorProps {
+    selectedPathInfo: PathInfo | null;
+    condition: Condition;
+    onOperatorChange: (op: string) => void;
+}
+
+export interface PathOptionRenderProps {
+    option: { label: string; value?: string };
+    searchValue: string;
+    contentClassName?: string;
+    paths: PathInfo[];
+}
+
+export interface PathSelectionOptionRenderProps {
+    option: { label: string; value?: string; fullPath?: string };
+    searchValue: string;
+    contentClassName?: string;
+    fieldType: string;
+}

package/src/components/WfoSearchPage/WfoConditionRow/utils.ts

@@ -0,0 +1,63 @@
+import { PathInfo } from '@/types';
+
+export const createOptionsFromPaths = (paths: PathInfo[], group: string) =>
+    paths
+        .filter(({ group: pathGroup }) => pathGroup === group)
+        .map(({ displayLabel, path, type, operators }) => ({
+            label: displayLabel || path,
+            value: path,
+            'data-type': type,
+            'data-operators': operators?.join(', ') || '',
+        }));
+
+export const shouldHideValueInput = (
+    selectedPathInfo: PathInfo | null,
+    operatorSelected: boolean,
+): boolean => {
+    if (!selectedPathInfo || !operatorSelected) return true;
+
+    if (selectedPathInfo.group === 'component') return true;
+    if (selectedPathInfo.type === 'boolean') return true;
+
+    return false;
+};
+
+export const isFullPathSelected = (
+    path: string,
+    selectedPathInfo: PathInfo | null,
+): boolean => {
+    return !!(
+        path &&
+        (path.includes('.') ||
+            (selectedPathInfo && selectedPathInfo.group === 'component') ||
+            (!path.includes('.') && selectedPathInfo))
+    );
+};
+
+export const getFieldNameFromPath = (
+    path: string,
+    isComponent: boolean,
+): string => {
+    return isComponent ? path : path.split('.').pop() || path;
+};
+
+export const getFieldNameFromFullPath = (fullPath: string): string => {
+    const parts = fullPath.split('.');
+    return parts[parts.length - 1] || fullPath;
+};
+
+export const getPathSelectionOptions = (
+    selectedFieldName: string,
+    paths: PathInfo[],
+) => {
+    if (!selectedFieldName) return [];
+
+    const fieldInfo = paths.find(({ path }) => path === selectedFieldName);
+    if (!fieldInfo || !fieldInfo.availablePaths) return [];
+
+    return fieldInfo.availablePaths.map((fullPath) => ({
+        label: fullPath,
+        value: fullPath,
+        fullPath: fullPath,
+    }));
+};