@orchestrator-ui/orchestrator-ui-components 7.4.0 → 7.5.0

package/src/components/WfoAgent/ToolProgress/DiscoverFilterPathsDisplay.tsx

@@ -6,109 +6,94 @@ import { WfoBadge } from '@/components/WfoBadges';
 import { WfoPathBreadcrumb } from '@/components/WfoSearchPage/WfoSearchResults/WfoPathBreadcrumb';
 
 interface DiscoverFilterPathsResult {
-    status?: string;
-    leaves?: Array<{
-        paths?: string[];
-        name?: string;
-    }>;
+  status?: string;
+  leaves?: Array<{
+    paths?: string[];
+    name?: string;
+  }>;
 }
 
 type DiscoverFilterPathsDisplayProps = {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    result?: any;
-    parameters: {
-        field_names?: string[];
-        entity_type?: string;
-    };
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  result?: any;
+  parameters: {
+    field_names?: string[];
+    entity_type?: string;
+  };
 };
 
-export const DiscoverFilterPathsDisplay = ({
-    parameters,
-    result,
-}: DiscoverFilterPathsDisplayProps) => {
-    const { field_names = [] } = parameters;
+export const DiscoverFilterPathsDisplay = ({ parameters, result }: DiscoverFilterPathsDisplayProps) => {
+  const { field_names = [] } = parameters;
 
-    const foundFields: [string, DiscoverFilterPathsResult][] = result
-        ? Object.entries(
-              result as Record<string, DiscoverFilterPathsResult>,
-          ).filter(([, fieldResult]) => fieldResult.status !== 'NOT_FOUND')
-        : [];
+  const foundFields: [string, DiscoverFilterPathsResult][] =
+    result ?
+      Object.entries(result as Record<string, DiscoverFilterPathsResult>).filter(
+        ([, fieldResult]) => fieldResult.status !== 'NOT_FOUND',
+      )
+    : [];
 
-    // Count total paths across all found fields
-    const totalPaths = foundFields.reduce((count, [, fieldResult]) => {
-        const pathCount =
-            fieldResult.leaves?.reduce((leafCount: number, leaf) => {
-                return leafCount + (leaf.paths?.length || 1);
-            }, 0) || 0;
-        return count + pathCount;
-    }, 0);
+  // Count total paths across all found fields
+  const totalPaths = foundFields.reduce((count, [, fieldResult]) => {
+    const pathCount =
+      fieldResult.leaves?.reduce((leafCount: number, leaf) => {
+        return leafCount + (leaf.paths?.length || 1);
+      }, 0) || 0;
+    return count + pathCount;
+  }, 0);
 
-    return (
-        <div>
-            {field_names.length > 0 && (
-                <>
-                    <EuiText size="xs" color="subdued">
-                        Looking for{' '}
-                        {field_names.map((name, idx) => (
-                            <React.Fragment key={name}>
-                                {idx > 0 && ', '}
-                                <WfoBadge color="hollow" textColor="default">
-                                    {name}
-                                </WfoBadge>
-                            </React.Fragment>
-                        ))}
-                    </EuiText>
-                    <EuiSpacer size="s" />
-                </>
-            )}
+  return (
+    <div>
+      {field_names.length > 0 && (
+        <>
+          <EuiText size="xs" color="subdued">
+            Looking for{' '}
+            {field_names.map((name, idx) => (
+              <React.Fragment key={name}>
+                {idx > 0 && ', '}
+                <WfoBadge color="hollow" textColor="default">
+                  {name}
+                </WfoBadge>
+              </React.Fragment>
+            ))}
+          </EuiText>
+          <EuiSpacer size="s" />
+        </>
+      )}
 
-            {result && totalPaths > 0 && (
-                <div>
-                    <EuiText size="xs" color="subdued">
-                        <strong>
-                            Found {totalPaths} path
-                            {totalPaths > 1 ? 's' : ''}:
-                        </strong>
-                    </EuiText>
-                    <EuiSpacer size="xs" />
-                    {foundFields.map(([fieldName, fieldResult]) => (
-                        <div key={fieldName} style={{ marginBottom: '8px' }}>
-                            {fieldResult.leaves &&
-                                fieldResult.leaves.length > 0 &&
-                                fieldResult.leaves.map(
-                                    (leaf, leafIdx: number) => {
-                                        const paths =
-                                            leaf.paths ||
-                                            (leaf.name ? [leaf.name] : []);
-                                        return (
-                                            <React.Fragment key={leafIdx}>
-                                                {paths.map(
-                                                    (
-                                                        path: string,
-                                                        pathIdx: number,
-                                                    ) => (
-                                                        <div
-                                                            key={pathIdx}
-                                                            style={{
-                                                                marginBottom:
-                                                                    '4px',
-                                                            }}
-                                                        >
-                                                            <WfoPathBreadcrumb
-                                                                path={path}
-                                                                size="s"
-                                                            />
-                                                        </div>
-                                                    ),
-                                                )}
-                                            </React.Fragment>
-                                        );
-                                    },
-                                )}
+      {result && totalPaths > 0 && (
+        <div>
+          <EuiText size="xs" color="subdued">
+            <strong>
+              Found {totalPaths} path
+              {totalPaths > 1 ? 's' : ''}:
+            </strong>
+          </EuiText>
+          <EuiSpacer size="xs" />
+          {foundFields.map(([fieldName, fieldResult]) => (
+            <div key={fieldName} style={{ marginBottom: '8px' }}>
+              {fieldResult.leaves
+                && fieldResult.leaves.length > 0
+                && fieldResult.leaves.map((leaf, leafIdx: number) => {
+                  const paths = leaf.paths || (leaf.name ? [leaf.name] : []);
+                  return (
+                    <React.Fragment key={leafIdx}>
+                      {paths.map((path: string, pathIdx: number) => (
+                        <div
+                          key={pathIdx}
+                          style={{
+                            marginBottom: '4px',
+                          }}
+                        >
+                          <WfoPathBreadcrumb path={path} size="s" />
                         </div>
-                    ))}
-                </div>
-            )}
+                      ))}
+                    </React.Fragment>
+                  );
+                })}
+            </div>
+          ))}
         </div>
-    );
+      )}
+    </div>
+  );
 };

package/src/components/WfoAgent/ToolProgress/RunSearchDisplay.tsx

@@ -5,30 +5,30 @@ import { EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
 import { WfoBadge } from '@/components/WfoBadges';
 
 type RunSearchDisplayProps = {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    result?: any;
-    parameters: {
-        limit?: number;
-    };
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  result?: any;
+  parameters: {
+    limit?: number;
+  };
 };
 
 export const RunSearchDisplay = ({ parameters }: RunSearchDisplayProps) => {
-    const { limit = 10 } = parameters;
+  const { limit = 10 } = parameters;
 
-    return (
-        <div>
-            <EuiFlexGroup gutterSize="s" alignItems="center">
-                <EuiFlexItem grow={false}>
-                    <EuiText size="xs" color="subdued">
-                        <strong>Results Limit</strong>
-                    </EuiText>
-                </EuiFlexItem>
-                <EuiFlexItem grow={false}>
-                    <WfoBadge textColor="default" color="hollow">
-                        {limit}
-                    </WfoBadge>
-                </EuiFlexItem>
-            </EuiFlexGroup>
-        </div>
-    );
+  return (
+    <div>
+      <EuiFlexGroup gutterSize="s" alignItems="center">
+        <EuiFlexItem grow={false}>
+          <EuiText size="xs" color="subdued">
+            <strong>Results Limit</strong>
+          </EuiText>
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <WfoBadge textColor="default" color="hollow">
+            {limit}
+          </WfoBadge>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </div>
+  );
 };

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

@@ -3,60 +3,60 @@ import { css } from '@emotion/react';
 import { WfoThemeHelpers } from '@/hooks';
 
 export const getFilterDisplayStyles = ({ theme }: WfoThemeHelpers) => {
-    const wrapStyle = css({
-        display: 'flex',
-        flexWrap: 'wrap',
-        gap: theme.size.s,
-    });
-
-    const columnGroupWrapStyle = css({
-        display: 'flex',
-        flexDirection: 'column',
-        gap: theme.size.s,
-        alignItems: 'flex-start',
-    });
-
-    const chipStyle = css({
-        display: 'inline-flex',
-        alignItems: 'center',
-        borderRadius: theme.size.xl,
-        border: `1px solid ${theme.border.color}`,
-        backgroundColor: theme.colors.backgroundBasePlain,
-        padding: `${theme.size.s} ${theme.size.m}`,
-        lineHeight: 1.1,
-        gap: theme.size.s,
-    });
-
-    const groupStyle = css({
-        border: `1px solid ${theme.colors.borderBaseSubdued}`,
-        borderRadius: theme.border.radius.medium,
-        padding: theme.size.s,
-        margin: theme.size.xs,
-        backgroundColor: theme.colors.backgroundBasePlain,
-    });
-
-    const operatorStyle = css({
-        fontFamily: theme.font.familyCode,
-        padding: `${theme.size.xs}px ${theme.size.s}px`,
-        borderRadius: theme.size.s,
-        backgroundColor: theme.colors.primary,
-        color: theme.colors.ghost,
-        fontSize: theme.size.m,
-        fontWeight: theme.font.weight.bold,
-        margin: `${theme.size.xs} 0`,
-    });
-
-    const valueStyle = css({
-        fontWeight: theme.font.weight.semiBold,
-        color: theme.colors.warning,
-    });
-
-    return {
-        wrapStyle,
-        columnGroupWrapStyle,
-        chipStyle,
-        groupStyle,
-        operatorStyle,
-        valueStyle,
-    };
+  const wrapStyle = css({
+    display: 'flex',
+    flexWrap: 'wrap',
+    gap: theme.size.s,
+  });
+
+  const columnGroupWrapStyle = css({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: theme.size.s,
+    alignItems: 'flex-start',
+  });
+
+  const chipStyle = css({
+    display: 'inline-flex',
+    alignItems: 'center',
+    borderRadius: theme.size.xl,
+    border: `1px solid ${theme.border.color}`,
+    backgroundColor: theme.colors.backgroundBasePlain,
+    padding: `${theme.size.s} ${theme.size.m}`,
+    lineHeight: 1.1,
+    gap: theme.size.s,
+  });
+
+  const groupStyle = css({
+    border: `1px solid ${theme.colors.borderBaseSubdued}`,
+    borderRadius: theme.border.radius.medium,
+    padding: theme.size.s,
+    margin: theme.size.xs,
+    backgroundColor: theme.colors.backgroundBasePlain,
+  });
+
+  const operatorStyle = css({
+    fontFamily: theme.font.familyCode,
+    padding: `${theme.size.xs}px ${theme.size.s}px`,
+    borderRadius: theme.size.s,
+    backgroundColor: theme.colors.primary,
+    color: theme.colors.textGhost,
+    fontSize: theme.size.m,
+    fontWeight: theme.font.weight.bold,
+    margin: `${theme.size.xs} 0`,
+  });
+
+  const valueStyle = css({
+    fontWeight: theme.font.weight.semiBold,
+    color: theme.colors.warning,
+  });
+
+  return {
+    wrapStyle,
+    columnGroupWrapStyle,
+    chipStyle,
+    groupStyle,
+    operatorStyle,
+    valueStyle,
+  };
 };

package/src/components/WfoAgent/ToolProgress/SetFilterTreeDisplay.tsx

@@ -6,10 +6,7 @@ import { EuiText } from '@elastic/eui';
 
 import { WfoBadge } from '@/components/WfoBadges';
 import { WfoPathBreadcrumb } from '@/components/WfoSearchPage/WfoSearchResults/WfoPathBreadcrumb';
-import {
-    getOperatorDisplay,
-    isCondition,
-} from '@/components/WfoSearchPage/utils';
+import { getOperatorDisplay, isCondition } from '@/components/WfoSearchPage/utils';
 import { useWithOrchestratorTheme } from '@/hooks';
 import { Condition, Group, PathDataType } from '@/types';
 
@@ -18,118 +15,93 @@ import { getFilterDisplayStyles } from './SetFilterTreeDisplay.styles';
 const DEPTH_INDENT = 16;
 
 interface BetweenValue {
-    start?: string | number;
-    end?: string | number;
-    from?: string | number;
-    to?: string | number;
+  start?: string | number;
+  end?: string | number;
+  from?: string | number;
+  to?: string | number;
 }
 
 type SetFilterTreeDisplayProps = {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    result?: any;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    parameters: any;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  result?: any;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  parameters: any;
 };
 
-export const SetFilterTreeDisplay = ({
-    parameters,
-}: SetFilterTreeDisplayProps) => {
-    const t = useTranslations('agent.page');
-    const {
-        wrapStyle,
-        columnGroupWrapStyle,
-        chipStyle,
-        groupStyle,
-        operatorStyle,
-        valueStyle,
-    } = useWithOrchestratorTheme(getFilterDisplayStyles);
+export const SetFilterTreeDisplay = ({ parameters }: SetFilterTreeDisplayProps) => {
+  const t = useTranslations('agent.page');
+  const { wrapStyle, columnGroupWrapStyle, chipStyle, groupStyle, operatorStyle, valueStyle } =
+    useWithOrchestratorTheme(getFilterDisplayStyles);
 
-    // Parameters might be the Group directly, or wrapped in a filters property
-    const filters = (parameters?.filters || parameters) as Group;
+  // Parameters might be the Group directly, or wrapped in a filters property
+  const filters = (parameters?.filters || parameters) as Group;
 
-    const formatFilterValue = (condition: Condition['condition']): string => {
-        if ('value' in condition && condition.value !== undefined) {
-            if (
-                condition.op === 'between' &&
-                condition.value &&
-                typeof condition.value === 'object'
-            ) {
-                const { start, end, from, to } =
-                    condition.value as BetweenValue;
-                const fromVal = start || from;
-                const toVal = end || to;
-                return `${fromVal} … ${toVal}`;
-            }
-            return String(condition.value);
-        }
-        return '—';
-    };
+  const formatFilterValue = (condition: Condition['condition']): string => {
+    if ('value' in condition && condition.value !== undefined) {
+      if (condition.op === 'between' && condition.value && typeof condition.value === 'object') {
+        const { start, end, from, to } = condition.value as BetweenValue;
+        const fromVal = start || from;
+        const toVal = end || to;
+        return `${fromVal} … ${toVal}`;
+      }
+      return String(condition.value);
+    }
+    return '—';
+  };
 
-    const renderFilterGroup = (group: Group, depth = 0): React.ReactNode => {
-        if (!group.children || group.children.length === 0) {
-            return (
-                <EuiText size="s" color="subdued">
-                    <em>{t('emptyGroup')}</em>
-                </EuiText>
-            );
-        }
+  const renderFilterGroup = (group: Group, depth = 0): React.ReactNode => {
+    if (!group.children || group.children.length === 0) {
+      return (
+        <EuiText size="s" color="subdued">
+          <em>{t('emptyGroup')}</em>
+        </EuiText>
+      );
+    }
 
-        const areChildrenGroups =
-            group.children.length > 0 && !isCondition(group.children[0]);
+    const areChildrenGroups = group.children.length > 0 && !isCondition(group.children[0]);
 
-        return (
-            <div css={groupStyle} style={{ marginLeft: depth * DEPTH_INDENT }}>
-                <div css={operatorStyle}>{group.op}</div>
-                <div css={areChildrenGroups ? columnGroupWrapStyle : wrapStyle}>
-                    {group.children.map((child, i) => (
-                        <div key={i}>
-                            {isCondition(child) ? (
-                                <div css={chipStyle}>
-                                    <WfoPathBreadcrumb
-                                        path={child.path}
-                                        size="s"
-                                        showArrows={true}
-                                    />
-                                    <WfoBadge
-                                        textColor="default"
-                                        color="hollow"
-                                    >
-                                        {
-                                            getOperatorDisplay(
-                                                child.condition.op,
-                                                child.value_kind
-                                                    ? {
-                                                          path: child.path,
-                                                          type: child.value_kind as PathDataType,
-                                                          operators: [],
-                                                          value_schema: {},
-                                                          group: 'leaf' as const,
-                                                      }
-                                                    : undefined,
-                                            ).symbol
-                                        }
-                                    </WfoBadge>
-                                    <span css={valueStyle}>
-                                        {formatFilterValue(child.condition)}
-                                    </span>
-                                </div>
-                            ) : (
-                                renderFilterGroup(child, depth + 1)
-                            )}
-                        </div>
-                    ))}
+    return (
+      <div css={groupStyle} style={{ marginLeft: depth * DEPTH_INDENT }}>
+        <div css={operatorStyle}>{group.op}</div>
+        <div css={areChildrenGroups ? columnGroupWrapStyle : wrapStyle}>
+          {group.children.map((child, i) => (
+            <div key={i}>
+              {isCondition(child) ?
+                <div css={chipStyle}>
+                  <WfoPathBreadcrumb path={child.path} size="s" showArrows={true} />
+                  <WfoBadge textColor="default" color="hollow">
+                    {
+                      getOperatorDisplay(
+                        child.condition.op,
+                        child.value_kind ?
+                          {
+                            path: child.path,
+                            type: child.value_kind as PathDataType,
+                            operators: [],
+                            value_schema: {},
+                            group: 'leaf' as const,
+                          }
+                        : undefined,
+                      ).symbol
+                    }
+                  </WfoBadge>
+                  <span css={valueStyle}>{formatFilterValue(child.condition)}</span>
                 </div>
+              : renderFilterGroup(child, depth + 1)}
             </div>
-        );
-    };
+          ))}
+        </div>
+      </div>
+    );
+  };
 
-    if (!filters || !filters.children || filters.children.length === 0) {
-        return (
-            <EuiText size="s" color="subdued">
-                <em>{t('noFiltersApplied')}</em>
-            </EuiText>
-        );
-    }
+  if (!filters || !filters.children || filters.children.length === 0) {
+    return (
+      <EuiText size="s" color="subdued">
+        <em>{t('noFiltersApplied')}</em>
+      </EuiText>
+    );
+  }
 
-    return <div>{renderFilterGroup(filters)}</div>;
+  return <div>{renderFilterGroup(filters)}</div>;
 };