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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orchestrator-ui/orchestrator-ui-components",
-  "version": "8.5.0",
+  "version": "8.6.0",
   "license": "Apache-2.0",
   "description": "Library of UI Components used to display the workflow orchestrator frontend",
   "author": {

package/src/components/WfoAutoExpandableTextArea/WfoAutoExpandableTextArea.tsx

@@ -0,0 +1,54 @@
+import React, { useCallback, useEffect, useRef } from 'react';
+
+import { EuiTextArea, EuiTextAreaProps } from '@elastic/eui';
+
+import { useWithOrchestratorTheme } from '@/hooks';
+
+import { getStyles } from './styles';
+
+export const WfoAutoExpandableTextArea = ({ inputRef, onChange, ...restProps }: EuiTextAreaProps) => {
+  const { autoExpandableTextAreaStyles } = useWithOrchestratorTheme(getStyles);
+  const textAreaRef = useRef<HTMLTextAreaElement | null>(null);
+
+  const adjustTextAreaHeight = (textArea: HTMLTextAreaElement | null) => {
+    if (!textArea) {
+      return;
+    }
+    textArea.style.height = 'auto';
+    textArea.style.height = `${textArea.scrollHeight}px`;
+  };
+
+  useEffect(() => {
+    adjustTextAreaHeight(textAreaRef.current);
+  }, [restProps.value]);
+
+  const handleInputRef = useCallback(
+    (node: HTMLTextAreaElement | null) => {
+      textAreaRef.current = node;
+      adjustTextAreaHeight(node);
+
+      if (typeof inputRef === 'function') {
+        inputRef(node);
+      } else if (inputRef) {
+        (inputRef as React.MutableRefObject<HTMLTextAreaElement | null>).current = node;
+      }
+    },
+    [inputRef],
+  );
+
+  return (
+    <EuiTextArea
+      css={autoExpandableTextAreaStyles}
+      rows={1}
+      fullWidth={true}
+      isClearable={true}
+      resize={'none'}
+      {...restProps}
+      inputRef={handleInputRef}
+      onChange={(event) => {
+        adjustTextAreaHeight(event.target);
+        onChange?.(event);
+      }}
+    />
+  );
+};

package/src/components/WfoAutoExpandableTextArea/index.ts

@@ -0,0 +1 @@
+export { WfoAutoExpandableTextArea } from './WfoAutoExpandableTextArea';

package/src/components/WfoAutoExpandableTextArea/styles.ts

@@ -0,0 +1,18 @@
+import { css } from '@emotion/react';
+
+import { WfoThemeHelpers } from '@/hooks';
+
+export const getStyles = ({ theme, toSecondaryColor }: WfoThemeHelpers) => {
+  const autoExpandableTextAreaStyles = css({
+    width: '100%',
+    maxInlineSize: '100%',
+    height: 'auto',
+    overflowY: 'hidden',
+    resize: 'none',
+    border: `thin solid ${toSecondaryColor(theme.colors.borderBasePlain)}`,
+  });
+
+  return {
+    autoExpandableTextAreaStyles,
+  };
+};

package/src/components/WfoPageTemplate/paths.ts

@@ -3,6 +3,7 @@ export const PATH_START_NEW_WORKFLOW = '/workflows/new';
 export const PATH_START_NEW_TASK = '/tasks/new';
 export const PATH_WORKFLOWS = '/workflows';
 export const PATH_SUBSCRIPTIONS = '/subscriptions';
+export const PATH_SUBSCRIPTIONS_BETA = '/beta-subscriptions';
 export const PATH_METADATA = '/metadata';
 export const PATH_METADATA_PRODUCTS = '/metadata/products';
 export const PATH_METADATA_PRODUCT_BLOCKS = '/metadata/productblocks';

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

@@ -12,7 +12,7 @@ export const WfoAddGroupAction = ({ disabled, handleOnClick }: ActionProps) => {
   const t = useTranslations('search.page');
   const { addGroupStyles, addRulePlusStyles } = useWithOrchestratorTheme(getWfoStructuredSearchTableStyles);
   return disabled ? null : (
-      <EuiFlexItem css={addGroupStyles} onClick={() => handleOnClick()}>
+      <EuiFlexItem grow={true} css={addGroupStyles} onClick={() => handleOnClick()}>
         <span css={addRulePlusStyles}>+</span>&nbsp;{t('addGroup')}
       </EuiFlexItem>
     );

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

@@ -8,6 +8,9 @@ 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

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { FieldSelectorProps } from 'react-querybuilder';
 
 import { useTranslations } from 'next-intl';
@@ -7,16 +7,21 @@ import type { EuiComboBoxOptionOption } from '@elastic/eui';
 import { EuiComboBox } from '@elastic/eui';
 
 import { usePathAutocomplete } from '@/hooks';
-import { EntityKind, PathInfo } from '@/types';
+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>[] = [];
 
@@ -40,14 +45,26 @@ export const WfoFieldSelector = ({ handleOnChange, disabled, rule, context }: Fi
     error: errorMessage,
   } = usePathAutocomplete(selectedValue, EntityKind.SUBSCRIPTION);
 
-  const options = getOptionsFromPathInfo(paths);
+  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, matchingPath);
+    context?.onFieldSelected?.(selectedValue, operators);
   };
 
   const handleFieldSelection = (selectedOptions: EuiComboBoxOptionOption<string>[]) => {
@@ -59,6 +76,42 @@ export const WfoFieldSelector = ({ handleOnChange, disabled, rule, context }: Fi
     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')}
@@ -73,6 +126,7 @@ export const WfoFieldSelector = ({ handleOnChange, disabled, rule, context }: Fi
           setSelectedValue(inputValue);
         }
       }}
+      inputRef={setSearchInput}
       singleSelection={{ asPlainText: true }}
       isLoading={isLoading}
       isClearable

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 { 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,9 @@ interface WfoFilterBuilderProps {
   queryBuilderRuleGroup?: RuleGroupType;
   onUpdateQueryBuilder: (ruleGroup: RuleGroupType | false) => void;
   handleSearch: (searchParams?: SearchParams) => void;
+  isFilterBuilderVisible: boolean;
+  onToggleFilterBuilder: (isVisible: boolean) => void;
+  prefilledFieldOptions: FieldToOperatorMap;
 }
 
 const initialRuleGroup: RuleGroupType = {
@@ -65,6 +69,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 +81,12 @@ export const WfoFilterBuilder = ({
   queryBuilderRuleGroup = initialRuleGroup,
   onUpdateQueryBuilder,
   handleSearch,
+  prefilledFieldOptions,
+  isFilterBuilderVisible,
+  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,34 +94,32 @@ export const WfoFilterBuilder = ({
   };
 
   const t = useTranslations('common');
-  const { queryBuilderContainerStyles, toggleButtonStyles, textAreaStyles } = useWithOrchestratorTheme(
+  const { queryBuilderContainerStyles, toggleButtonStyles } = useWithOrchestratorTheme(
     getWfoStructuredSearchTableStyles,
   );
-  const [isFilterBuilderVisible, setIsFilterBuilderVisible] = useState<boolean>(false);
-  const [fieldPathInfoMap, setFieldPathInfoMap] = useState<FieldPathInfoMap>(new Map());
+  const [fieldToOperatorMap, setFieldToOperatorMap] = useState<FieldToOperatorMap>(prefilledFieldOptions);
 
-  const handleFieldSelected = (field: string, pathInfo: PathInfo | undefined) => {
-    if (pathInfo) {
-      setFieldPathInfoMap((previousMap) => {
-        return new Map(previousMap).set(field, pathInfo);
-      });
-    }
+  const handleFieldSelected = (field: string, operators: string[]) => {
+    setFieldToOperatorMap((previousMap) => {
+      return new Map(previousMap).set(field, operators);
+    });
   };
 
   return (
-    <EuiFlexGroup css={queryBuilderContainerStyles}>
+    <EuiFlexGroup css={isFilterBuilderVisible ? queryBuilderContainerStyles : undefined}>
       {(isFilterBuilderVisible && (
         <EuiFlexGroup direction={'column'}>
           <EuiFlexItem>
             <QueryBuilder
               query={queryBuilderRuleGroup}
+              enableMountQueryChange={false}
               onQueryChange={(ruleGroup: RuleGroupType) => {
                 onUpdateQueryBuilder(ruleGroup);
               }}
-              context={{ onFieldSelected: handleFieldSelected, fieldPathInfoMap }}
+              context={{ onFieldSelected: handleFieldSelected, prefilledFieldOptions }}
               getOperators={(field) => {
-                const pathInfo = fieldPathInfoMap.get(field);
-                return getOperatorsFromPathInfo(pathInfo);
+                const operators = fieldToOperatorMap.get(field);
+                return mapOperatorsToRQBOperatorOptions(operators);
               }}
               controlElements={{
                 fieldSelector: WfoFieldSelector,
@@ -118,27 +128,26 @@ export const WfoFilterBuilder = ({
                 ruleGroup: WfoRuleGroup,
                 rule: WfoRule,
                 combinatorSelector: WfoCombinatorSelector,
+                inlineCombinator: WfoInlineCombinator,
                 addRuleAction: null,
                 addGroupAction: null,
                 removeGroupAction: null,
                 removeRuleAction: WfoRemoveRuleAction,
               }}
               addRuleToNewGroups
+              onAddGroup={onAddGroupHandler}
               maxLevels={5}
+              showCombinatorsBetweenRules
             />
           </EuiFlexItem>
           <EuiFlexItem>
-            <EuiTextArea
-              css={textAreaStyles}
+            <WfoAutoExpandableTextArea
               id={'searchbox-textarea'}
-              value={filterString}
+              value={filterString ?? ''}
               onChange={(e) => {
                 const filterString = e.target.value;
                 onUpdateFilterString(filterString);
               }}
-              fullWidth={true}
-              isClearable={true}
-              resize={'vertical'}
               isInvalid={!isValidFilterString}
             />
           </EuiFlexItem>
@@ -164,7 +173,7 @@ export const WfoFilterBuilder = ({
                 // we call with ruleGroup: false explictly to
                 // avoid state not having caught up yet when searching
                 handleSearch({ ruleGroup: false });
-                setIsFilterBuilderVisible(false);
+                onToggleFilterBuilder(false);
               }}
             />
           </EuiFlexGroup>
@@ -172,7 +181,7 @@ export const WfoFilterBuilder = ({
       )) || (
         <EuiButton
           css={toggleButtonStyles}
-          onClick={() => setIsFilterBuilderVisible(true)}
+          onClick={() => onToggleFilterBuilder(true)}
           id={'button-toggle-filter-builder'}
           data-test-id={'button-toggle-filter-builder'}
           fill

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/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

@@ -20,6 +20,7 @@ export const WfoRuleGroup = (props: RuleGroupProps) => {
     ruleGroupContainerWhiteStyles,
     innerGroupContainerWhiteStyles,
     innerGroupContainerBlueStyles,
+    ruleGroupBodyGridStyles,
   } = useWithOrchestratorTheme(getWfoStructuredSearchTableStyles);
   const getGroupContainerStyles = () => {
     if (ruleGroupProps.path.length % 2) {
@@ -32,16 +33,18 @@ export const WfoRuleGroup = (props: RuleGroupProps) => {
   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

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>
+    </>
+  );
+};