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

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

@@ -10,98 +10,62 @@ 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;
+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}</>;
+  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>
+  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}>
-                <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>
+              <WfoBadge color="default" textColor={theme.colors.textInk} 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.textInk} size="xs">
+                  {type}
+                </WfoBadge>
+              </EuiFlexItem>
+            ))}
         </EuiFlexGroup>
-    );
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
 };
 
-export const WfoRenderPathSelectionOption: FC<
-    PathSelectionOptionRenderProps
-> = ({ option, contentClassName, fieldType }) => {
-    const { theme } = useOrchestratorTheme();
+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>
-    );
+  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.textInk} size="xs">
+            {fieldType}
+          </WfoBadge>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </WfoToolTip>
+  );
 };

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

@@ -7,72 +7,55 @@ import { useOrchestratorTheme } from '@/hooks';
 import { SelectedPathDisplayProps } from './types';
 import { getFieldNameFromFullPath } from './utils';
 
-export const WfoSelectedPathDisplay: FC<SelectedPathDisplayProps> = ({
-    condition,
-    onEdit,
-}) => {
-    const { theme } = useOrchestratorTheme();
+export const WfoSelectedPathDisplay: FC<SelectedPathDisplayProps> = ({ condition, onEdit }) => {
+  const { theme } = useOrchestratorTheme();
 
-    const isFullPath = condition.path.includes('.');
+  const isFullPath = condition.path.includes('.');
 
-    return (
-        <div
-            onClick={onEdit}
-            style={{
-                cursor: 'pointer',
-                border: `1px solid ${theme.colors.borderBaseSubdued}`,
-                borderRadius: theme.border.radius.medium,
-                padding: `${theme.size.s} ${theme.size.m}`,
-                backgroundColor: theme.colors.backgroundBaseNeutral,
-                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.textParagraph}
-                                >
-                                    {getFieldNameFromFullPath(condition.path)}:
-                                </EuiText>
-                            </EuiFlexItem>
-                            <EuiFlexItem grow={false}>
-                                <EuiText
-                                    size="s"
-                                    style={{
-                                        backgroundColor:
-                                            theme.colors.backgroundBasePlain,
-                                        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.textParagraph}>
-                            {condition.path}
-                        </EuiText>
-                    )}
-                </EuiFlexItem>
+  return (
+    <div
+      onClick={onEdit}
+      style={{
+        cursor: 'pointer',
+        border: `1px solid ${theme.colors.borderBaseSubdued}`,
+        borderRadius: theme.border.radius.medium,
+        padding: `${theme.size.s} ${theme.size.m}`,
+        backgroundColor: theme.colors.backgroundBaseNeutral,
+        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.textParagraph}>
+                  {getFieldNameFromFullPath(condition.path)}:
+                </EuiText>
+              </EuiFlexItem>
+              <EuiFlexItem grow={false}>
+                <EuiText
+                  size="s"
+                  style={{
+                    backgroundColor: theme.colors.backgroundBasePlain,
+                    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>
-        </div>
-    );
+          : <EuiText size="s" color={theme.colors.textParagraph}>
+              {condition.path}
+            </EuiText>
+          }
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </div>
+  );
 };

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

@@ -3,9 +3,6 @@ export { WfoFieldSelector } from './WfoFieldSelector';
 export { WfoPathSelector } from './WfoPathSelector';
 export { WfoSelectedPathDisplay } from './WfoSelectedPathDisplay';
 export { WfoOperatorSelector } from './WfoOperatorSelector';
-export {
-    WfoRenderPathOption,
-    WfoRenderPathSelectionOption,
-} from './WfoRenderFunctions';
+export { WfoRenderPathOption, WfoRenderPathSelectionOption } from './WfoRenderFunctions';
 export * from './types';
 export * from './utils';

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

@@ -1,84 +1,79 @@
 import { Condition, EntityKind, PathInfo } from '@/types';
 
 export interface ConditionRowProps {
-    condition: Condition;
-    entityType: EntityKind;
-    onChange: (condition: Condition) => void;
-    onRemove: () => void;
+  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;
-        }>;
+  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;
+  }>;
+  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;
+  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;
+  condition: Condition;
+  selectedPathInfo: PathInfo | null;
+  onEdit: () => void;
 }
 
 export interface OperatorSelectorProps {
-    selectedPathInfo: PathInfo | null;
-    condition: Condition;
-    onOperatorChange: (op: string) => void;
+  selectedPathInfo: PathInfo | null;
+  condition: Condition;
+  onOperatorChange: (op: string) => void;
 }
 
 export interface PathOptionRenderProps {
-    option: { label: string; value?: string };
-    searchValue: string;
-    contentClassName?: string;
-    paths: PathInfo[];
+  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;
+  option: { label: string; value?: string; fullPath?: string };
+  searchValue: string;
+  contentClassName?: string;
+  fieldType: string;
 }

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

@@ -1,63 +1,51 @@
 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;
+  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 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 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;
+  const parts = fullPath.split('.');
+  return parts[parts.length - 1] || fullPath;
 };
 
-export const getPathSelectionOptions = (
-    selectedFieldName: string,
-    paths: PathInfo[],
-) => {
-    if (!selectedFieldName) return [];
+export const getPathSelectionOptions = (selectedFieldName: string, paths: PathInfo[]) => {
+  if (!selectedFieldName) return [];
 
-    const fieldInfo = paths.find(({ path }) => path === selectedFieldName);
-    if (!fieldInfo || !fieldInfo.availablePaths) return [];
+  const fieldInfo = paths.find(({ path }) => path === selectedFieldName);
+  if (!fieldInfo || !fieldInfo.availablePaths) return [];
 
-    return fieldInfo.availablePaths.map((fullPath) => ({
-        label: fullPath,
-        value: fullPath,
-        fullPath: fullPath,
-    }));
+  return fieldInfo.availablePaths.map((fullPath) => ({
+    label: fullPath,
+    value: fullPath,
+    fullPath: fullPath,
+  }));
 };