@orchestrator-ui/orchestrator-ui-components 8.5.0 → 8.7.0

package/src/components/WfoTable/WfoStructuredSearchTable/WfoFilterBuilder.tsx

@@ -1,17 +1,19 @@
-import React, { useState } from 'react';
-import { FullOperator, QueryBuilder, type RuleGroupType } from 'react-querybuilder';
+import React, { useRef, useState } from 'react';
+import { FullOperator, QueryBuilder, type RuleGroupType, generateID } from 'react-querybuilder';
 import 'react-querybuilder/dist/query-builder.css';
 
 import { useTranslations } from 'next-intl';
 
-import { EuiButton, EuiFlexGroup, EuiFlexItem, EuiTextArea } from '@elastic/eui';
+import { EuiButton, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 
-import { SearchParams, WfoTextAnchor } from '@/components';
+import { SearchParams, WfoAutoExpandableTextArea, WfoTextAnchor } from '@/components';
 import { WfoCombinatorSelector } from '@/components/WfoTable/WfoStructuredSearchTable/WfoCombinatorSelector';
 import { useWithOrchestratorTheme } from '@/hooks';
-import { OperatorDisplay, PathInfo } from '@/types';
+import { OperatorDisplay } from '@/types';
+import type { FieldToOperatorMap } from '@/types';
 
 import { WfoFieldSelector } from './WfoFieldSelector';
+import { WfoInlineCombinator } from './WfoInlineCombinator';
 import { WfoOperatorSelector } from './WfoOperatorSelector';
 import { WfoRemoveRuleAction } from './WfoRemoveRuleAction';
 import { WfoRule } from './WfoRule';
@@ -48,7 +50,6 @@ const OPERATOR_MAP: Record<string, OperatorDisplay> = {
 /* TODO: Add the missing operators
 ['has_component', 'not_has_component'];
  */
-type FieldPathInfoMap = Map<string, PathInfo>;
 
 interface WfoFilterBuilderProps {
   filterString?: string;
@@ -57,6 +58,8 @@ interface WfoFilterBuilderProps {
   queryBuilderRuleGroup?: RuleGroupType;
   onUpdateQueryBuilder: (ruleGroup: RuleGroupType | false) => void;
   handleSearch: (searchParams?: SearchParams) => void;
+  onToggleFilterBuilder: (isVisible: boolean) => void;
+  prefilledFieldOptions: FieldToOperatorMap;
 }
 
 const initialRuleGroup: RuleGroupType = {
@@ -65,6 +68,11 @@ const initialRuleGroup: RuleGroupType = {
   combinator: 'and',
 };
 
+const onAddGroupHandler = (ruleGroup: RuleGroupType): RuleGroupType => {
+  const [firstRule] = ruleGroup.rules;
+  return firstRule ? { ...ruleGroup, rules: [...ruleGroup.rules, { ...firstRule, id: generateID() }] } : ruleGroup;
+};
+
 export const WfoFilterBuilder = ({
   filterString,
   onUpdateFilterString,
@@ -72,9 +80,11 @@ export const WfoFilterBuilder = ({
   queryBuilderRuleGroup = initialRuleGroup,
   onUpdateQueryBuilder,
   handleSearch,
+  prefilledFieldOptions,
+  onToggleFilterBuilder,
 }: WfoFilterBuilderProps) => {
-  const getOperatorsFromPathInfo = (fieldInfo?: PathInfo): FullOperator[] => {
-    return (fieldInfo?.operators ?? []).map((operator) => {
+  const mapOperatorsToRQBOperatorOptions = (operators?: string[]): FullOperator[] => {
+    return (operators ?? []).map((operator) => {
       const { symbol, description } = OPERATOR_MAP[operator] || { symbol: operator, description: operator };
       const rqbOperator = SEARCH_OPERATOR_TO_RQB_OPERATOR_MAP[operator] ?? operator;
       return { name: rqbOperator, label: `${symbol} ${description}`, value: rqbOperator };
@@ -82,108 +92,113 @@ export const WfoFilterBuilder = ({
   };
 
   const t = useTranslations('common');
-  const { queryBuilderContainerStyles, toggleButtonStyles, textAreaStyles } = useWithOrchestratorTheme(
-    getWfoStructuredSearchTableStyles,
-  );
-  const [isFilterBuilderVisible, setIsFilterBuilderVisible] = useState<boolean>(false);
-  const [fieldPathInfoMap, setFieldPathInfoMap] = useState<FieldPathInfoMap>(new Map());
-
-  const handleFieldSelected = (field: string, pathInfo: PathInfo | undefined) => {
-    if (pathInfo) {
-      setFieldPathInfoMap((previousMap) => {
-        return new Map(previousMap).set(field, pathInfo);
-      });
-    }
+  const { queryBuilderContainerStyles } = useWithOrchestratorTheme(getWfoStructuredSearchTableStyles);
+  const [fieldToOperatorMap, setFieldToOperatorMap] = useState<FieldToOperatorMap>(prefilledFieldOptions);
+
+  // Enter in a value editor commits its value on blur, and that state update has not
+  // flushed yet when the search runs in the same keydown. onQueryChange fires
+  // synchronously during the blur, so this ref always holds the freshest rule group,
+  // which is passed to handleSearch explicitly (same pattern as the remove-filter link).
+  const latestRuleGroupRef = useRef<RuleGroupType | undefined>(queryBuilderRuleGroup);
+  latestRuleGroupRef.current = queryBuilderRuleGroup;
+
+  const handleValueEditorEnter = () => {
+    handleSearch({ ruleGroup: latestRuleGroupRef.current });
+  };
+
+  const handleFieldSelected = (field: string, operators: string[]) => {
+    setFieldToOperatorMap((previousMap) => {
+      return new Map(previousMap).set(field, operators);
+    });
   };
 
   return (
     <EuiFlexGroup css={queryBuilderContainerStyles}>
-      {(isFilterBuilderVisible && (
-        <EuiFlexGroup direction={'column'}>
-          <EuiFlexItem>
-            <QueryBuilder
-              query={queryBuilderRuleGroup}
-              onQueryChange={(ruleGroup: RuleGroupType) => {
-                onUpdateQueryBuilder(ruleGroup);
-              }}
-              context={{ onFieldSelected: handleFieldSelected, fieldPathInfoMap }}
-              getOperators={(field) => {
-                const pathInfo = fieldPathInfoMap.get(field);
-                return getOperatorsFromPathInfo(pathInfo);
-              }}
-              controlElements={{
-                fieldSelector: WfoFieldSelector,
-                operatorSelector: WfoOperatorSelector,
-                valueEditor: WfoValueEditor,
-                ruleGroup: WfoRuleGroup,
-                rule: WfoRule,
-                combinatorSelector: WfoCombinatorSelector,
-                addRuleAction: null,
-                addGroupAction: null,
-                removeGroupAction: null,
-                removeRuleAction: WfoRemoveRuleAction,
-              }}
-              addRuleToNewGroups
-              maxLevels={5}
-            />
-          </EuiFlexItem>
-          <EuiFlexItem>
-            <EuiTextArea
-              css={textAreaStyles}
-              id={'searchbox-textarea'}
-              value={filterString}
-              onChange={(e) => {
-                const filterString = e.target.value;
-                onUpdateFilterString(filterString);
-              }}
-              fullWidth={true}
-              isClearable={true}
-              resize={'vertical'}
-              isInvalid={!isValidFilterString}
-            />
-          </EuiFlexItem>
-
-          <EuiFlexGroup direction={'rowReverse'} alignItems={'center'}>
-            <EuiButton
-              onClick={() => {
+      <EuiFlexGroup direction={'column'}>
+        <EuiFlexItem>
+          <QueryBuilder
+            query={queryBuilderRuleGroup}
+            enableMountQueryChange={false}
+            onQueryChange={(ruleGroup: RuleGroupType) => {
+              latestRuleGroupRef.current = ruleGroup;
+              onUpdateQueryBuilder(ruleGroup);
+            }}
+            context={{
+              onFieldSelected: handleFieldSelected,
+              prefilledFieldOptions,
+              onValueEditorEnter: handleValueEditorEnter,
+            }}
+            getOperators={(field) => {
+              const operators = fieldToOperatorMap.get(field);
+              return mapOperatorsToRQBOperatorOptions(operators);
+            }}
+            controlElements={{
+              fieldSelector: WfoFieldSelector,
+              operatorSelector: WfoOperatorSelector,
+              valueEditor: WfoValueEditor,
+              ruleGroup: WfoRuleGroup,
+              rule: WfoRule,
+              combinatorSelector: WfoCombinatorSelector,
+              inlineCombinator: WfoInlineCombinator,
+              addRuleAction: null,
+              addGroupAction: null,
+              removeGroupAction: null,
+              removeRuleAction: WfoRemoveRuleAction,
+            }}
+            addRuleToNewGroups
+            onAddGroup={onAddGroupHandler}
+            maxLevels={5}
+            showCombinatorsBetweenRules
+            resetOnFieldChange={false}
+          />
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <WfoAutoExpandableTextArea
+            id={'searchbox-textarea'}
+            value={filterString ?? ''}
+            onChange={(e) => {
+              const filterString = e.target.value;
+              onUpdateFilterString(filterString);
+            }}
+            onKeyDown={(event) => {
+              // Enter applies the filter like the Apply button (and like it, does nothing
+              // while the filter string is invalid); Shift+Enter inserts a newline.
+              if (event.key !== 'Enter' || event.shiftKey) return;
+              event.preventDefault();
+              if (isValidFilterString) {
                 handleSearch();
-              }}
-              id={'button-apply-filter'}
-              data-test-id={'button-apply-filter'}
-              fill
-              type="submit"
-              aria-label={t('applyFilter')}
-              disabled={!isValidFilterString}
-            >
-              {t('applyFilter')}
-            </EuiButton>
-            <WfoTextAnchor
-              text={t('removeFilter')}
-              onClick={() => {
-                onUpdateQueryBuilder(false);
-                // we call with ruleGroup: false explictly to
-                // avoid state not having caught up yet when searching
-                handleSearch({ ruleGroup: false });
-                setIsFilterBuilderVisible(false);
-              }}
-            />
-          </EuiFlexGroup>
+              }
+            }}
+            isInvalid={!isValidFilterString}
+          />
+        </EuiFlexItem>
+
+        <EuiFlexGroup direction={'rowReverse'} alignItems={'center'}>
+          <EuiButton
+            onClick={() => {
+              handleSearch();
+            }}
+            id={'button-apply-filter'}
+            data-test-id={'button-apply-filter'}
+            fill
+            type="submit"
+            aria-label={t('applyFilter')}
+            disabled={!isValidFilterString}
+          >
+            {t('applyFilter')}
+          </EuiButton>
+          <WfoTextAnchor
+            text={t('removeFilter')}
+            onClick={() => {
+              onUpdateQueryBuilder(false);
+              // we call with ruleGroup: false explictly to
+              // avoid state not having caught up yet when searching
+              handleSearch({ ruleGroup: false });
+              onToggleFilterBuilder(false);
+            }}
+          />
         </EuiFlexGroup>
-      )) || (
-        <EuiButton
-          css={toggleButtonStyles}
-          onClick={() => setIsFilterBuilderVisible(true)}
-          id={'button-toggle-filter-builder'}
-          data-test-id={'button-toggle-filter-builder'}
-          fill
-          type="submit"
-          iconType="filter"
-          iconSide="left"
-          aria-label={t('createFilter')}
-        >
-          {t('createFilter')}
-        </EuiButton>
-      )}
+      </EuiFlexGroup>
     </EuiFlexGroup>
   );
 };

package/src/components/WfoTable/WfoStructuredSearchTable/WfoInlineCombinator.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { CombinatorSelectorProps } from 'react-querybuilder';
+
+import { getWfoStructuredSearchTableStyles } from '@/components/WfoTable/WfoStructuredSearchTable/styles';
+import { useWithOrchestratorTheme } from '@/hooks';
+
+import { WfoCombinatorSelector } from './WfoCombinatorSelector';
+
+export const WfoInlineCombinator = (props: CombinatorSelectorProps) => {
+  const { inlineCombinatorStyles } = useWithOrchestratorTheme(getWfoStructuredSearchTableStyles);
+
+  return (
+    <div css={inlineCombinatorStyles}>
+      <WfoCombinatorSelector {...props} />
+    </div>
+  );
+};

package/src/components/WfoTable/WfoStructuredSearchTable/WfoOperatorSelector.tsx

@@ -1,5 +1,6 @@
-import React, { useEffect, useMemo } from 'react';
+import React, { useEffect, useMemo, useRef } from 'react';
 import type { FullOperator, OperatorSelectorProps, OptionGroup } from 'react-querybuilder';
+import { defaultOperators } from 'react-querybuilder';
 
 import { EuiSelect } from '@elastic/eui';
 
@@ -7,6 +8,8 @@ const isOptionGroup = (operator: FullOperator | OptionGroup<FullOperator>): oper
   'options' in operator;
 
 export const WfoOperatorSelector = (props: OperatorSelectorProps) => {
+  const { value, handleOnChange } = props;
+
   const flatOptions = (props.options as Array<FullOperator | OptionGroup<FullOperator>>).flatMap((option) =>
     isOptionGroup(option) ? option.options : [option],
   );
@@ -16,17 +19,39 @@ export const WfoOperatorSelector = (props: OperatorSelectorProps) => {
     [flatOptions],
   );
 
+  const optionsKey = selectOptions.map((option) => option.value).join('|');
+  const previousOptionsKeyRef = useRef(optionsKey);
+
   useEffect(() => {
-    if (props.options && !props.value && selectOptions.length > 0) {
-      props.handleOnChange(selectOptions[0].value);
+    const optionsChanged = previousOptionsKeyRef.current !== optionsKey;
+    previousOptionsKeyRef.current = optionsKey;
+
+    // Reset to the first option only when the field's operator list changes — i.e. the
+    // user picked a (different) field, and resetOnFieldChange=false on QueryBuilder
+    // preserved an operator that is not valid for it. The `optionsChanged` guard keeps
+    // rules restored from CEL (URL or textarea) intact on mount: parseCEL can produce
+    // operators outside the prefilled operator lists (e.g. beginsWith), and resetting
+    // those here would silently rewrite the user's filter string.
+    if (!optionsChanged || selectOptions.length === 0) return;
+    const currentValueIsValid = selectOptions.some((option) => option.value === value);
+    if (!currentValueIsValid) {
+      handleOnChange(selectOptions[0].value);
     }
-  }, [props, props.options, props.value, selectOptions]);
+  }, [optionsKey, selectOptions, value, handleOnChange]);
+
+  // A restored operator that falls outside the field's list must still be visible in
+  // the dropdown; without it EuiSelect renders an empty selection for the rule.
+  const currentValueIsListed = !value || selectOptions.some((option) => option.value === value);
+  const displayOptions =
+    currentValueIsListed ? selectOptions : (
+      [...selectOptions, { value, text: defaultOperators.find((operator) => operator.name === value)?.label ?? value }]
+    );
 
   return (
     <EuiSelect
-      options={selectOptions}
-      value={props.value}
-      onChange={(e) => props.handleOnChange(e.target.value)}
+      options={displayOptions}
+      value={value}
+      onChange={(e) => handleOnChange(e.target.value)}
       disabled={props.disabled}
     />
   );

package/src/components/WfoTable/WfoStructuredSearchTable/WfoRemoveRuleAction.tsx

@@ -6,15 +6,15 @@ import { useTranslations } from 'next-intl';
 import { EuiFlexItem } from '@elastic/eui';
 
 import { useOrchestratorTheme } from '@/hooks';
-import { WfoXMarkSmall } from '@/icons/WfoXMarkSmall';
+import { WfoTrashFilled } from '@/icons';
 
 export const WfoRemoveRuleAction = (props: ActionProps) => {
   const { theme } = useOrchestratorTheme();
 
   const t = useTranslations('search.page');
   return (
-    <EuiFlexItem onClick={props.handleOnClick} css={{ cursor: 'pointer' }}>
-      <WfoXMarkSmall color={theme.colors.primary} aria-label={t('removeRule')} />
+    <EuiFlexItem onClick={props.handleOnClick} css={{ cursor: 'pointer', paddingRight: theme.size.s }}>
+      <WfoTrashFilled color={theme.colors.textPrimary} aria-label={t('removeRule')} />
     </EuiFlexItem>
   );
 };

package/src/components/WfoTable/WfoStructuredSearchTable/WfoRuleGroup.tsx

@@ -13,35 +13,39 @@ import { WfoRemoveGroupAction } from './WfoRemoveGroupAction';
 
 export const WfoRuleGroup = (props: RuleGroupProps) => {
   const ruleGroupProps = useRuleGroup(props);
-  const ruleId = ruleGroupProps.ruleGroup.id;
+  const rulePath = ruleGroupProps.path;
+  const isRootGroup: boolean = !rulePath || rulePath.length === 0;
 
   const {
     ruleGroupContainerBlueStyles,
     ruleGroupContainerWhiteStyles,
     innerGroupContainerWhiteStyles,
     innerGroupContainerBlueStyles,
+    ruleGroupBodyGridStyles,
   } = useWithOrchestratorTheme(getWfoStructuredSearchTableStyles);
   const getGroupContainerStyles = () => {
     if (ruleGroupProps.path.length % 2) {
-      return ruleId !== 'root' ? innerGroupContainerWhiteStyles : ruleGroupContainerWhiteStyles;
+      return !isRootGroup ? innerGroupContainerWhiteStyles : ruleGroupContainerWhiteStyles;
     } else {
-      return ruleId !== 'root' ? innerGroupContainerBlueStyles : ruleGroupContainerBlueStyles;
+      return !isRootGroup ? innerGroupContainerBlueStyles : ruleGroupContainerBlueStyles;
     }
   };
 
   const { addRule, path, schema, disabled, ruleGroup, addGroup } = ruleGroupProps;
 
   return (
-    <EuiFlexGroup gutterSize={'none'} alignItems="center">
+    <EuiFlexGroup gutterSize={'none'} responsive={false} alignItems="center">
       <EuiFlexItem>
-        <EuiFlexGroup direction="column" gutterSize="s" css={getGroupContainerStyles()}>
+        <EuiFlexGroup direction="column" css={getGroupContainerStyles()}>
           <EuiFlexItem>
             <EuiFlexGroup gutterSize="none">
               <RuleGroupHeaderComponents {...ruleGroupProps} />
             </EuiFlexGroup>
           </EuiFlexItem>
           <EuiFlexItem>
-            <RuleGroupBodyComponents {...ruleGroupProps} />
+            <div css={ruleGroupBodyGridStyles}>
+              <RuleGroupBodyComponents {...ruleGroupProps} />
+            </div>
           </EuiFlexItem>
           <EuiFlexItem>
             <WfoAddRuleAction
@@ -67,7 +71,7 @@ export const WfoRuleGroup = (props: RuleGroupProps) => {
           </EuiFlexItem>
         </EuiFlexGroup>
       </EuiFlexItem>
-      {ruleId !== 'root' && <WfoRemoveGroupAction onClick={ruleGroupProps.removeGroup} />}
+      {!isRootGroup && <WfoRemoveGroupAction onClick={ruleGroupProps.removeGroup} />}
     </EuiFlexGroup>
   );
 };

package/src/components/WfoTable/WfoStructuredSearchTable/WfoSearchFieldWithActions.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+
+import { useTranslations } from 'next-intl';
+
+import { EuiButtonIcon, EuiFieldSearch, EuiFlexItem, EuiFormRow } from '@elastic/eui';
+
+import { useWithOrchestratorTheme } from '@/hooks';
+import { getFormFieldsBaseStyle } from '@/theme';
+
+export type SearchFieldWithActionsProps = {
+  queryText?: string;
+  onChangeQueryText: (queryText: string) => void;
+  onSearchQueryText: (queryText: string) => void;
+  onShowInformation: () => void;
+  onShowTableSettings: () => void;
+};
+
+// Search field with the info and table-settings actions, rendered as EuiFlexItems inside an EuiFlexGroup.
+export const WfoSearchFieldWithActions = ({
+  queryText,
+  onChangeQueryText,
+  onSearchQueryText,
+  onShowInformation,
+  onShowTableSettings,
+}: SearchFieldWithActionsProps) => {
+  const t = useTranslations('common');
+  const { formFieldBaseStyle } = useWithOrchestratorTheme(getFormFieldsBaseStyle);
+
+  return (
+    <>
+      <EuiFlexItem>
+        <EuiFormRow fullWidth>
+          <EuiFieldSearch
+            css={formFieldBaseStyle}
+            value={queryText}
+            placeholder={`${t('search')}...`}
+            onChange={(e) => onChangeQueryText(e.target.value)}
+            onSearch={(queryText) => onSearchQueryText(queryText)}
+            fullWidth
+          />
+        </EuiFormRow>
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EuiButtonIcon
+          onClick={onShowInformation}
+          iconSize={'l'}
+          iconType={'info'}
+          aria-label={t('searchModalTitle')}
+        />
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EuiButtonIcon onClick={onShowTableSettings} iconSize={'l'} iconType={'gear'} aria-label={t('tableSettings')} />
+      </EuiFlexItem>
+    </>
+  );
+};