@orchestrator-ui/orchestrator-ui-components 8.4.5 → 8.6.0

package/src/components/WfoSubscription/utils/utils.ts

@@ -10,6 +10,7 @@ import {
   SortOrder,
   SubscriptionAction,
   SubscriptionDetailProcess,
+  SubscriptionRelation,
   WorkflowTarget,
 } from '@/types';
 
@@ -40,16 +41,21 @@ export const getProductBlockTitle = (instanceValues: FieldValue[]): string | num
   return title;
 };
 
-export const flattenArrayProps = (action: SubscriptionAction): TranslationValues => {
+const toLabel = (item: string | SubscriptionRelation): string =>
+  typeof item === 'object' ? (item.subscription_description ?? item.subscription_id) : item;
+
+export const flattenSubscriptionActionProps = (action?: SubscriptionAction | null): TranslationValues => {
+  if (!action) return {};
+
   const flatObject: TranslationValues = {};
   for (const [key, value] of Object.entries(action)) {
     if (Array.isArray(value)) {
-      flatObject[key] = value.join(', ');
-    } else {
+      flatObject[key] = value.map(toLabel).join(', ');
+    } else if (typeof value !== 'object' || value === null) {
       flatObject[key] = value;
     }
   }
-  return action ? flatObject : {};
+  return flatObject;
 };
 
 export const getWorkflowTargetColor = (workflowTarget: WorkflowTarget, theme: EuiThemeComputed) => {

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import type { ActionProps } from 'react-querybuilder';
+
+import { useTranslations } from 'next-intl';
+
+import { EuiFlexItem } from '@elastic/eui';
+
+import { getWfoStructuredSearchTableStyles } from '@/components/WfoTable/WfoStructuredSearchTable/styles';
+import { useWithOrchestratorTheme } from '@/hooks';
+
+export const WfoAddGroupAction = ({ disabled, handleOnClick }: ActionProps) => {
+  const t = useTranslations('search.page');
+  const { addGroupStyles, addRulePlusStyles } = useWithOrchestratorTheme(getWfoStructuredSearchTableStyles);
+  return disabled ? null : (
+      <EuiFlexItem grow={true} css={addGroupStyles} onClick={() => handleOnClick()}>
+        <span css={addRulePlusStyles}>+</span>&nbsp;{t('addGroup')}
+      </EuiFlexItem>
+    );
+};

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import type { ActionProps } from 'react-querybuilder';
+
+import { useTranslations } from 'next-intl';
+
+import { EuiFlexItem } from '@elastic/eui';
+
+import { useWithOrchestratorTheme } from '@/hooks';
+
+import { getWfoStructuredSearchTableStyles } from './styles';
+
+export const WfoAddRuleAction = (props: ActionProps) => {
+  const { addRulePlusStyles, addRuleContainerStyles } = useWithOrchestratorTheme(getWfoStructuredSearchTableStyles);
+
+  const t = useTranslations('search.page');
+
+  return (
+    <EuiFlexItem grow={false} onClick={() => props.handleOnClick()} css={addRuleContainerStyles}>
+      <span css={addRulePlusStyles}>+</span>
+      {t('addRule')}
+    </EuiFlexItem>
+  );
+};

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import type { CombinatorSelectorProps } from 'react-querybuilder';
+
+import { EuiButtonGroup } from '@elastic/eui';
+
+import { getWfoStructuredSearchTableStyles } from '@/components/WfoTable/WfoStructuredSearchTable/styles';
+import { useWithOrchestratorTheme } from '@/hooks';
+
+export const WfoCombinatorSelector = (props: CombinatorSelectorProps) => {
+  const { buttonGroupStyles } = useWithOrchestratorTheme(getWfoStructuredSearchTableStyles);
+
+  if (props.rules.length < 2) return null;
+
+  const options = props.options.map((option) => ({
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore This seems to be a typing error in the react-querybuilde library. Option.name does exist
+    id: option.name,
+    label: option.label,
+  }));
+
+  return (
+    <EuiButtonGroup
+      css={buttonGroupStyles}
+      legend="Combinator"
+      type="single"
+      options={options}
+      idSelected={props.value || options[0].id}
+      onChange={(id) => props.handleOnChange(id)}
+      buttonSize="m"
+      color="primary"
+    />
+  );
+};

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

@@ -0,0 +1,38 @@
+import React from 'react';
+
+import { useWithOrchestratorTheme } from '@/hooks';
+import type { MatchingField } from '@/types';
+
+import { getWfoStructuredSearchTableStyles } from './styles';
+
+interface WfoExpandingSearchRowProps {
+  score?: number;
+  perfectMatch?: number;
+  matchingField?: MatchingField | null;
+}
+
+export const WfoExpandingSearchRow = ({ score, matchingField }: WfoExpandingSearchRowProps) => {
+  const { expandingSearchRowStyles, expandingRowBodyStyles } = useWithOrchestratorTheme(
+    getWfoStructuredSearchTableStyles,
+  );
+
+  if (!matchingField) return null;
+
+  const { path, text } = matchingField;
+
+  return (
+    <tr>
+      <td colSpan={999} css={expandingSearchRowStyles}>
+        <div css={expandingRowBodyStyles}>
+          <div>
+            <span>{path}</span> {text}
+          </div>
+          <span>•</span>
+          <div>
+            <span>score</span> {score !== undefined && `${(score * 100).toFixed(1)}%`}
+          </div>
+        </div>
+      </td>
+    </tr>
+  );
+};

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

@@ -0,0 +1,138 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { FieldSelectorProps } from 'react-querybuilder';
+
+import { useTranslations } from 'next-intl';
+
+import type { EuiComboBoxOptionOption } from '@elastic/eui';
+import { EuiComboBox } from '@elastic/eui';
+
+import { usePathAutocomplete } from '@/hooks';
+import { EntityKind, FieldToOperatorMap, PathInfo } from '@/types';
+
+export const WfoFieldSelector = ({ handleOnChange, disabled, rule, context }: FieldSelectorProps) => {
+  const { field } = rule;
+  const prefilledFieldOptions: FieldToOperatorMap = context.prefilledFieldOptions;
+  const [selectedValue, setSelectedValue] = useState<string>(field);
+  const [searchInput, setSearchInput] = useState<HTMLInputElement | null>(null);
+  const optionsRef = useRef<EuiComboBoxOptionOption<string>[]>([]);
+  const handleFieldSelectionRef = useRef<(selected: EuiComboBoxOptionOption<string>[]) => void>(() => {});
+  const t = useTranslations('search.page');
+  const getOption = (path: string) => ({
+    value: path,
+    label: path,
+  });
+
+  const getOptionsFromPathInfo = (pathInfos: PathInfo[]): EuiComboBoxOptionOption<string>[] => {
+    const pathOptions: EuiComboBoxOptionOption<string>[] = [];
+
+    pathInfos.forEach((pathInfo) => {
+      pathOptions.push(getOption(pathInfo.path));
+      // Adds more specific paths
+      pathInfo.availablePaths?.forEach((path) => {
+        pathOptions.push(getOption(path));
+      });
+    });
+    return (
+      pathOptions.length > 0 ? pathOptions
+      : selectedValue ? [getOption(selectedValue)]
+      : []
+    );
+  };
+
+  const {
+    paths,
+    loading: isLoading,
+    error: errorMessage,
+  } = usePathAutocomplete(selectedValue, EntityKind.SUBSCRIPTION);
+
+  const prefilledOptions: EuiComboBoxOptionOption<string>[] = Array.from(prefilledFieldOptions.keys()).map(getOption);
+  const autocompleteOptions = getOptionsFromPathInfo(paths);
+  const placeholderOption: EuiComboBoxOptionOption<string> = {
+    label: '──────',
+    disabled: true,
+  };
+  const showPlaceholder = prefilledOptions.length > 0 && autocompleteOptions.length > 0;
+  const options: EuiComboBoxOptionOption<string>[] = [
+    ...prefilledOptions,
+    ...(showPlaceholder ? [placeholderOption] : []),
+    ...autocompleteOptions,
+  ];
+
+  const storeFieldOperators = (selectedValue: string) => {
+    const matchingPath =
+      paths.find((path) => path.path === selectedValue)
+      ?? paths.find((path) => path.availablePaths?.includes(selectedValue));
+    const operators = matchingPath?.operators ?? prefilledFieldOptions.get(selectedValue) ?? [];
+
+    context?.onFieldSelected?.(selectedValue, operators);
+  };
+
+  const handleFieldSelection = (selectedOptions: EuiComboBoxOptionOption<string>[]) => {
+    const selectedOption = selectedOptions[0];
+    const selectedValue = selectedOption?.value || '';
+    setSelectedValue(selectedValue);
+    storeFieldOperators(selectedValue);
+
+    handleOnChange(selectedValue);
+  };
+
+  // EuiComboBox only auto-selects on Enter/Tab when exactly one option matches the typed
+  // text. When several options share the typed prefix, the exact-match option is not picked
+  // unless the user arrow-navigates. Patch that with a native keydown listener on the input.
+  optionsRef.current = options;
+  handleFieldSelectionRef.current = handleFieldSelection;
+
+  useEffect(() => {
+    if (!searchInput) return;
+
+    const autoSelectExactMatchOption = (event: KeyboardEvent) => {
+      if (event.key !== 'Enter' && event.key !== 'Tab') return;
+      // Let EuiComboBox handle selection when an option is keyboard-highlighted.
+      if (searchInput.getAttribute('aria-activedescendant')) return;
+      const typed = searchInput.value.trim();
+      if (!typed) return;
+      const exactMatch = optionsRef.current.find(
+        (option) => !option.disabled && option.label.toLowerCase() === typed.toLowerCase(),
+      );
+      if (!exactMatch) return;
+      if (event.key === 'Enter') event.preventDefault();
+      handleFieldSelectionRef.current([exactMatch]);
+
+      // EuiComboBox keeps its own internal `searchValue` and `isListOpen` state. Clearing
+      // the value via the React-recognised native setter + input event suppresses EUI's
+      // "typed-but-not-selected" warning icon (the `markAsInvalid` branch in combo_box.js).
+      // The synthetic Escape closes the dropdown without disturbing focus.
+      const nativeInputValueSetter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set;
+      nativeInputValueSetter?.call(searchInput, '');
+      searchInput.dispatchEvent(new Event('input', { bubbles: true }));
+      searchInput.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+    };
+
+    searchInput.addEventListener('keydown', autoSelectExactMatchOption);
+    return () => searchInput.removeEventListener('keydown', autoSelectExactMatchOption);
+  }, [searchInput]);
+
+  return (
+    <EuiComboBox
+      placeholder={t('searchFieldsPlaceholder')}
+      options={options}
+      fullWidth={true}
+      selectedOptions={options.filter((option) => option.value === selectedValue)}
+      onChange={(selectedOptions) => {
+        handleFieldSelection(selectedOptions);
+      }}
+      onSearchChange={(inputValue) => {
+        if (inputValue.length > 0) {
+          setSelectedValue(inputValue);
+        }
+      }}
+      inputRef={setSearchInput}
+      singleSelection={{ asPlainText: true }}
+      isLoading={isLoading}
+      isClearable
+      isInvalid={!!errorMessage}
+      isDisabled={disabled}
+      rowHeight={30}
+    />
+  );
+};

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

@@ -0,0 +1,198 @@
+import React, { 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 } from '@elastic/eui';
+
+import { SearchParams, WfoAutoExpandableTextArea, WfoTextAnchor } from '@/components';
+import { WfoCombinatorSelector } from '@/components/WfoTable/WfoStructuredSearchTable/WfoCombinatorSelector';
+import { useWithOrchestratorTheme } from '@/hooks';
+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';
+import { WfoRuleGroup } from './WfoRuleGroup';
+import { WfoValueEditor } from './WfoValueEditor';
+import { getWfoStructuredSearchTableStyles } from './styles';
+
+// Maps PathInfo operator names to react-querybuilder's native operator names,
+// which is what parseCEL produces and formatQuery(cel) expects.
+const SEARCH_OPERATOR_TO_RQB_OPERATOR_MAP: Record<string, string> = {
+  eq: '=',
+  neq: '!=',
+  lt: '<',
+  lte: '<=',
+  gt: '>',
+  gte: '>=',
+  between: 'between',
+  like: 'contains',
+};
+
+const OPERATOR_MAP: Record<string, OperatorDisplay> = {
+  eq: { symbol: '=', description: 'equals' },
+  neq: { symbol: '≠', description: 'not equals' },
+  lt: { symbol: '<', description: 'less than' },
+  lte: { symbol: '≤', description: 'less than or equal to' },
+  gt: { symbol: '>', description: 'greater than' },
+  gte: { symbol: '≥', description: 'greater than or equal to' },
+  between: { symbol: '⟷', description: 'between (range)' },
+  has_component: { symbol: '✓', description: 'has component' },
+  not_has_component: { symbol: '✗', description: 'does not have component' },
+  like: { symbol: '∋', description: 'contains' },
+};
+
+/* TODO: Add the missing operators
+['has_component', 'not_has_component'];
+ */
+
+interface WfoFilterBuilderProps {
+  filterString?: string;
+  onUpdateFilterString: (filterString: string) => void;
+  isValidFilterString?: boolean;
+  queryBuilderRuleGroup?: RuleGroupType;
+  onUpdateQueryBuilder: (ruleGroup: RuleGroupType | false) => void;
+  handleSearch: (searchParams?: SearchParams) => void;
+  isFilterBuilderVisible: boolean;
+  onToggleFilterBuilder: (isVisible: boolean) => void;
+  prefilledFieldOptions: FieldToOperatorMap;
+}
+
+const initialRuleGroup: RuleGroupType = {
+  id: 'root',
+  rules: [{ id: 'rule-0', field: '~', operator: '=', value: '' }],
+  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,
+  isValidFilterString = true,
+  queryBuilderRuleGroup = initialRuleGroup,
+  onUpdateQueryBuilder,
+  handleSearch,
+  prefilledFieldOptions,
+  isFilterBuilderVisible,
+  onToggleFilterBuilder,
+}: WfoFilterBuilderProps) => {
+  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 };
+    });
+  };
+
+  const t = useTranslations('common');
+  const { queryBuilderContainerStyles, toggleButtonStyles } = useWithOrchestratorTheme(
+    getWfoStructuredSearchTableStyles,
+  );
+  const [fieldToOperatorMap, setFieldToOperatorMap] = useState<FieldToOperatorMap>(prefilledFieldOptions);
+
+  const handleFieldSelected = (field: string, operators: string[]) => {
+    setFieldToOperatorMap((previousMap) => {
+      return new Map(previousMap).set(field, operators);
+    });
+  };
+
+  return (
+    <EuiFlexGroup css={isFilterBuilderVisible ? queryBuilderContainerStyles : undefined}>
+      {(isFilterBuilderVisible && (
+        <EuiFlexGroup direction={'column'}>
+          <EuiFlexItem>
+            <QueryBuilder
+              query={queryBuilderRuleGroup}
+              enableMountQueryChange={false}
+              onQueryChange={(ruleGroup: RuleGroupType) => {
+                onUpdateQueryBuilder(ruleGroup);
+              }}
+              context={{ onFieldSelected: handleFieldSelected, prefilledFieldOptions }}
+              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
+            />
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <WfoAutoExpandableTextArea
+              id={'searchbox-textarea'}
+              value={filterString ?? ''}
+              onChange={(e) => {
+                const filterString = e.target.value;
+                onUpdateFilterString(filterString);
+              }}
+              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>
+        </EuiFlexGroup>
+      )) || (
+        <EuiButton
+          css={toggleButtonStyles}
+          onClick={() => onToggleFilterBuilder(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>
+  );
+};

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

@@ -0,0 +1,33 @@
+import React, { useEffect, useMemo } from 'react';
+import type { FullOperator, OperatorSelectorProps, OptionGroup } from 'react-querybuilder';
+
+import { EuiSelect } from '@elastic/eui';
+
+const isOptionGroup = (operator: FullOperator | OptionGroup<FullOperator>): operator is OptionGroup<FullOperator> =>
+  'options' in operator;
+
+export const WfoOperatorSelector = (props: OperatorSelectorProps) => {
+  const flatOptions = (props.options as Array<FullOperator | OptionGroup<FullOperator>>).flatMap((option) =>
+    isOptionGroup(option) ? option.options : [option],
+  );
+
+  const selectOptions = useMemo(
+    () => flatOptions.map((option) => ({ value: option.name, text: option.label })),
+    [flatOptions],
+  );
+
+  useEffect(() => {
+    if (props.options && !props.value && selectOptions.length > 0) {
+      props.handleOnChange(selectOptions[0].value);
+    }
+  }, [props, props.options, props.value, selectOptions]);
+
+  return (
+    <EuiSelect
+      options={selectOptions}
+      value={props.value}
+      onChange={(e) => props.handleOnChange(e.target.value)}
+      disabled={props.disabled}
+    />
+  );
+};

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

@@ -0,0 +1,64 @@
+import React, { useEffect, useState } from 'react';
+
+import { EuiFlexGroup } from '@elastic/eui';
+
+export interface WfoRangeElementProps {
+  handleOnChange: (value: string | number | undefined, rangeIndex?: number) => void;
+  value: string;
+  operator?: string;
+  rangeIndex?: number;
+}
+
+interface WfoRangeEditorProps {
+  handleOnChange: (value: string | number | undefined, rangeIndex?: number) => void;
+  operator: string;
+  value: string;
+  Element: React.ComponentType<WfoRangeElementProps>;
+}
+
+export const WfoRangeEditor = ({ handleOnChange, operator, Element, value: currentValue }: WfoRangeEditorProps) => {
+  const [currentOperator, setCurrentOperator] = useState(operator);
+  const startValue = currentValue ? currentValue?.toString().split(',') : [];
+  const [value, setValue] = useState<string[]>(startValue);
+
+  useEffect(() => {
+    if (operator !== currentOperator && (operator === 'between' || currentOperator === 'between')) {
+      setValue([]);
+      handleOnChange('');
+      setCurrentOperator(operator);
+    }
+  }, [currentOperator, handleOnChange, operator]);
+
+  const handleChange = (value: string | number | undefined, rangeIndex: number = 0) => {
+    if (operator === 'between') {
+      setValue((currentDates) => {
+        // remove value if set to undefined
+        if (value === null) {
+          return currentDates.filter((_, index) => index !== rangeIndex);
+        }
+        // add value at supplied index
+        currentDates[rangeIndex] = value as string;
+
+        // call the parent if 2 values are present
+        if (currentDates.length === 2) {
+          handleOnChange(`${currentDates[0]},${currentDates[1]}`);
+        }
+
+        return currentDates;
+      });
+    } else {
+      handleOnChange(value);
+    }
+  };
+
+  if (operator === 'between') {
+    return (
+      <EuiFlexGroup direction="row" gutterSize="s">
+        <Element handleOnChange={handleChange} rangeIndex={0} value={value[0]} />
+        <Element handleOnChange={handleChange} rangeIndex={1} value={value[1]} />
+      </EuiFlexGroup>
+    );
+  }
+
+  return <Element handleOnChange={handleOnChange} value={value[0]} />;
+};

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

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import { useTranslations } from 'next-intl';
+
+import { EuiFlexItem } from '@elastic/eui';
+
+import { getWfoStructuredSearchTableStyles } from '@/components/WfoTable/WfoStructuredSearchTable/styles';
+import { useWithOrchestratorTheme } from '@/hooks';
+import { useOrchestratorTheme } from '@/hooks';
+import { WfoTrashFilled } from '@/icons';
+
+export const WfoRemoveGroupAction = ({ onClick }: { onClick: () => void }) => {
+  const { removeGroupActionStyles } = useWithOrchestratorTheme(getWfoStructuredSearchTableStyles);
+  const { theme } = useOrchestratorTheme();
+  const t = useTranslations('search.page');
+  return (
+    <EuiFlexItem grow={0} css={removeGroupActionStyles} onClick={() => onClick()}>
+      <WfoTrashFilled color={theme.colors.textPrimary} aria-label={t('removeGroup')} />
+    </EuiFlexItem>
+  );
+};

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import type { ActionProps } from 'react-querybuilder';
+
+import { useTranslations } from 'next-intl';
+
+import { EuiFlexItem } from '@elastic/eui';
+
+import { useOrchestratorTheme } from '@/hooks';
+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', paddingRight: theme.size.s }}>
+      <WfoTrashFilled color={theme.colors.textPrimary} aria-label={t('removeRule')} />
+    </EuiFlexItem>
+  );
+};

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { RuleProps } from 'react-querybuilder';
+import { Rule } from 'react-querybuilder';
+
+import { getWfoStructuredSearchTableStyles } from '@/components/WfoTable/WfoStructuredSearchTable/styles';
+import { useWithOrchestratorTheme } from '@/hooks';
+
+export const WfoRule = (props: RuleProps) => {
+  const { ruleContainerStyles } = useWithOrchestratorTheme(getWfoStructuredSearchTableStyles);
+
+  return (
+    <div css={ruleContainerStyles}>
+      <Rule {...props} />
+    </div>
+  );
+};