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

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

@@ -3,17 +3,7 @@ import type { RuleGroupType } from 'react-querybuilder';
 
 import { useTranslations } from 'next-intl';
 
-import {
-  EuiButton,
-  EuiButtonIcon,
-  EuiFieldSearch,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiFormRow,
-  EuiSelect,
-  EuiSpacer,
-  EuiText,
-} from '@elastic/eui';
+import { EuiButton, EuiFlexGroup, EuiFlexItem, EuiFormRow, EuiSelect, EuiSpacer, EuiText } from '@elastic/eui';
 
 import {
   DEFAULT_PAGE_SIZE,
@@ -22,6 +12,7 @@ import {
   TableSettingsColumnConfig,
   TableSettingsConfig,
   TableSettingsModal,
+  WfoDataSearch,
   WfoDataSorting,
   WfoErrorWithMessage,
   WfoInformationModal,
@@ -36,15 +27,16 @@ import {
   WfoTableControlColumnConfigItem,
   WfoTableDataColumnConfigItem,
 } from '@/components/WfoTable/WfoTable';
-import { useOrchestratorTheme, useWithOrchestratorTheme } from '@/hooks';
+import { useOrchestratorTheme } from '@/hooks';
 import { WfoArrowsExpand } from '@/icons';
 import { WfoGraphqlError } from '@/rtk';
-import { getFormFieldsBaseStyle } from '@/theme';
-import { RetrieverType } from '@/types';
+import { FieldToOperatorMap, RetrieverType } from '@/types';
 import { getDefaultTableConfig } from '@/utils';
 
 import { ColumnType, WfoTable, WfoTableProps } from '../WfoTable';
 import { WfoFilterBuilder } from './WfoFilterBuilder';
+import { WfoSearchFieldWithActions } from './WfoSearchFieldWithActions';
+import { buildColumnFilter } from './utils';
 
 export type WfoStructuredSearchTableDataColumnConfigItem<
   T extends object,
@@ -85,6 +77,9 @@ export type WfoStructuredSearchTableProps<T extends object> = Omit<
   onSearchQueryText: (queryString: string) => void;
   onShowMore: () => void;
   onUpdateDataSorting: (updateSorting: WfoDataSorting<T>) => void;
+  // Resolves a column key to its search field path (e.g. "status" -> "subscription.status"), used
+  // when a column header search adds a condition to the filter query.
+  getColumnSearchFieldName?: (field: keyof T) => string;
   onExportData?: () => void;
   retrieverType: RetrieverType;
   onUpdateRetrieverType: (newRetrieverType: RetrieverType) => void;
@@ -93,11 +88,12 @@ export type WfoStructuredSearchTableProps<T extends object> = Omit<
   isValidFilterString?: boolean;
   queryBuilderRuleGroup?: RuleGroupType;
   onUpdateQueryBuilder: (ruleGroup: RuleGroupType | false) => void;
-  handleSearch: () => void;
+  handleSearch: (searchParams?: SearchParams) => void;
   pageSize: number;
   setPageSize: React.Dispatch<React.SetStateAction<number>>;
   totalItems: number | false;
   hasNextPage: boolean;
+  prefilledFieldOptions: FieldToOperatorMap;
 };
 
 export const WfoStructuredSearchTable = <T extends object>({
@@ -119,6 +115,7 @@ export const WfoStructuredSearchTable = <T extends object>({
   queryBuilderRuleGroup,
   onUpdateQueryBuilder,
   onUpdateDataSorting,
+  getColumnSearchFieldName,
   handleSearch,
   pageSize,
   setPageSize,
@@ -128,12 +125,13 @@ export const WfoStructuredSearchTable = <T extends object>({
   hasNextPage,
   data,
   isLoading,
+  prefilledFieldOptions,
   ...tableProps
 }: WfoStructuredSearchTableProps<T>) => {
   const { theme } = useOrchestratorTheme();
-  const { formFieldBaseStyle } = useWithOrchestratorTheme(getFormFieldsBaseStyle);
 
   const [hiddenColumns, setHiddenColumns] = useState<TableColumnKeys<T>>(defaultHiddenColumns);
+  const [isFilterBuilderVisible, setIsFilterBuilderVisible] = useState(false);
   const [showTableSettingsModal, setShowTableSettingsModal] = useState(false);
   const [rowDetailModalData, setRowDetailModalData] = useState<T | undefined>(undefined);
   const [showInformationModal, setShowInformationModal] = useState(false);
@@ -145,6 +143,12 @@ export const WfoStructuredSearchTable = <T extends object>({
     }
   }, [defaultHiddenColumns]);
 
+  useEffect(() => {
+    if (filterString) {
+      setIsFilterBuilderVisible(true);
+    }
+  }, [filterString]);
+
   const detailsIconColumn: WfoStructuredSearchTableColumnConfig<T> = {
     viewDetails: {
       columnType: ColumnType.CONTROL,
@@ -198,75 +202,48 @@ export const WfoStructuredSearchTable = <T extends object>({
     clearTableConfigFromLocalStorage(localStorageKey);
   };
 
+  const handleColumnFilterSearch = ({ field, searchText }: WfoDataSearch<T>) => {
+    const columnFilter = buildColumnFilter(field, searchText, filterString, getColumnSearchFieldName);
+    if (!columnFilter) {
+      return;
+    }
+    onUpdateFilterString(columnFilter.filterString);
+    handleSearch({ ruleGroup: columnFilter.ruleGroup });
+  };
+
+  const filterBuilder = (
+    <WfoFilterBuilder
+      filterString={filterString}
+      onUpdateFilterString={onUpdateFilterString}
+      isValidFilterString={isValidFilterString}
+      queryBuilderRuleGroup={queryBuilderRuleGroup}
+      onUpdateQueryBuilder={onUpdateQueryBuilder}
+      handleSearch={handleSearch}
+      isFilterBuilderVisible={isFilterBuilderVisible}
+      onToggleFilterBuilder={setIsFilterBuilderVisible}
+      prefilledFieldOptions={prefilledFieldOptions}
+    />
+  );
+
   return (
     <>
-      <EuiFlexGroup alignItems="center">
-        <EuiFlexItem>
-          <WfoFilterBuilder
-            filterString={filterString}
-            onUpdateFilterString={onUpdateFilterString}
-            isValidFilterString={isValidFilterString}
-            queryBuilderRuleGroup={queryBuilderRuleGroup}
-            onUpdateQueryBuilder={onUpdateQueryBuilder}
-            handleSearch={handleSearch}
-          />
-        </EuiFlexItem>
+      <EuiFlexGroup alignItems="center" gutterSize="s">
+        {!isFilterBuilderVisible && <EuiFlexItem grow={false}>{filterBuilder}</EuiFlexItem>}
+        <WfoSearchFieldWithActions
+          queryText={queryText}
+          onChangeQueryText={onChangeQueryText}
+          onSearchQueryText={onSearchQueryText}
+          onShowInformation={() => setShowInformationModal(true)}
+          onShowTableSettings={() => setShowTableSettingsModal(true)}
+        />
       </EuiFlexGroup>
 
-      <EuiFlexGroup alignItems="center">
-        <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}>
-          <EuiSelect
-            options={[
-              {
-                value: RetrieverType.Auto,
-                text: t('retrieverAuto'),
-              },
-              {
-                value: RetrieverType.Fuzzy,
-                text: t('retrieverFuzzy'),
-              },
-              {
-                value: RetrieverType.Semantic,
-                text: t('retrieverSemantic'),
-              },
-              {
-                value: RetrieverType.Hybrid,
-                text: t('retrieverHybrid'),
-              },
-            ]}
-            value={retrieverType}
-            onChange={(e) => onUpdateRetrieverType(e.target.value as RetrieverType)}
-            compressed
-            prepend={t('retrieval')}
-          />
-        </EuiFlexItem>
-        <EuiFlexItem grow={false}>
-          <EuiButtonIcon
-            onClick={() => setShowInformationModal(true)}
-            iconSize={'l'}
-            iconType={'info'}
-            aria-label={t('searchModalTitle')}
-          />
-        </EuiFlexItem>
-        <EuiButton onClick={() => setShowTableSettingsModal(true)}>{t('editColumns')}</EuiButton>
-        {onExportData && (
-          <EuiButton isLoading={exportDataIsLoading} onClick={() => onExportData()}>
-            {t('export')}
-          </EuiButton>
-        )}
-      </EuiFlexGroup>
+      {isFilterBuilderVisible && (
+        <>
+          <EuiSpacer size="s" />
+          {filterBuilder}
+        </>
+      )}
 
       {error && <WfoErrorWithMessage error={error} />}
 
@@ -277,6 +254,7 @@ export const WfoStructuredSearchTable = <T extends object>({
         hiddenColumns={hiddenColumns}
         rowExpandingConfiguration={rowExpandingConfiguration}
         onUpdateDataSorting={onUpdateDataSorting}
+        onUpdateDataSearch={handleColumnFilterSearch}
         dataSorting={dataSorting}
         data={data}
         isLoading={isLoading}
@@ -302,6 +280,31 @@ export const WfoStructuredSearchTable = <T extends object>({
           onClose={() => setShowTableSettingsModal(false)}
           onUpdateTableConfig={handleUpdateTableConfig}
           onResetToDefaults={handleResetToDefaults}
+          extraSettings={
+            <>
+              <EuiFormRow label={t('retrieval')} display="columnCompressed">
+                <EuiSelect
+                  options={[
+                    { value: RetrieverType.Auto, text: t('retrieverAuto') },
+                    { value: RetrieverType.Fuzzy, text: t('retrieverFuzzy') },
+                    { value: RetrieverType.Semantic, text: t('retrieverSemantic') },
+                    { value: RetrieverType.Hybrid, text: t('retrieverHybrid') },
+                  ]}
+                  value={retrieverType}
+                  onChange={(e) => onUpdateRetrieverType(e.target.value as RetrieverType)}
+                  compressed
+                />
+              </EuiFormRow>
+              {onExportData && (
+                <>
+                  <EuiSpacer size="m" />
+                  <EuiButton isLoading={exportDataIsLoading} onClick={() => onExportData()} fullWidth>
+                    {t('export')}
+                  </EuiButton>
+                </>
+              )}
+            </>
+          }
         />
       )}
 

package/src/components/WfoTable/WfoStructuredSearchTable/styles.ts

@@ -2,7 +2,7 @@ import { css } from '@emotion/react';
 
 import { WfoThemeHelpers } from '@/hooks';
 
-export const getWfoStructuredSearchTableStyles = ({ theme, toSecondaryColor }: WfoThemeHelpers) => {
+export const getWfoStructuredSearchTableStyles = ({ theme }: WfoThemeHelpers) => {
   const queryBuilderContainerStyles = css({
     backgroundColor: theme.colors.backgroundBaseSubdued,
     padding: theme.base / 2,
@@ -13,20 +13,35 @@ export const getWfoStructuredSearchTableStyles = ({ theme, toSecondaryColor }: W
   const toggleButtonStyles = css({
     backgroundColor: 'primary',
     padding: theme.base * 0.75,
-    marginLeft: theme.base,
-  });
-
-  const textAreaStyles = css({
-    width: '100%',
-    maxInlineSize: '100%',
-    height: '42px',
-    border: `this solid ${toSecondaryColor(theme.colors.borderBasePlain)}`,
   });
 
   const buttonGroupStyles = css({
-    backgroundColor: theme.colors.textGhost,
-    height: '100%',
-    borderRadius: theme.border.radius.small,
+    alignSelf: 'center',
+    backgroundColor: 'transparent',
+    height: theme.base * 2,
+    '.euiButtonGroup__buttons': {
+      backgroundColor: 'transparent',
+      height: theme.base * 2,
+      minHeight: theme.base * 2,
+    },
+    'button.euiButtonGroupButton': {
+      height: theme.base * 2,
+      minHeight: theme.base * 2,
+      blockSize: theme.base * 2,
+      borderRadius: 0,
+      transition: 'none',
+    },
+    'button.euiButtonGroupButton:not(.euiButtonGroupButton-isSelected)': {
+      backgroundColor: theme.colors.backgroundBasePlain,
+    },
+    'button.euiButtonGroupButton:first-of-type': {
+      borderTopLeftRadius: theme.base,
+      borderBottomLeftRadius: theme.base,
+    },
+    'button.euiButtonGroupButton:last-of-type': {
+      borderTopRightRadius: theme.base,
+      borderBottomRightRadius: theme.base,
+    },
   });
 
   const ruleContainerStyles = css({
@@ -42,7 +57,7 @@ export const getWfoStructuredSearchTableStyles = ({ theme, toSecondaryColor }: W
 
   const ruleGroupContainerBase = {
     padding: theme.base / 2,
-    marginTop: theme.base / 4,
+    border: `1px solid ${theme.colors.borderBaseSubdued}`,
   };
 
   const ruleGroupContainerBlueStyles = css({
@@ -74,12 +89,12 @@ export const getWfoStructuredSearchTableStyles = ({ theme, toSecondaryColor }: W
   const removeGroupActionStyles = css({
     backgroundColor: theme.colors.backgroundLightPrimary,
     width: '40px',
-    marginTop: theme.base / 4,
     height: 'stretch',
     alignItems: 'center',
     justifyContent: 'center',
     borderBottomRightRadius: theme.border.radius.small,
     borderTopRightRadius: theme.border.radius.small,
+    border: `thin solid ${theme.colors.borderBasePlain}`,
     cursor: 'pointer',
   });
 
@@ -119,17 +134,36 @@ export const getWfoStructuredSearchTableStyles = ({ theme, toSecondaryColor }: W
     border: `thin dashed ${theme.colors.backgroundFilledPrimary}`,
     borderRadius: theme.border.radius.medium,
     alignItems: 'center',
-    padding: theme.base,
+    paddingBlock: theme.base / 3,
+    paddingInline: theme.base,
     color: theme.colors.primary,
     justifyContent: 'center',
     flexDirection: 'row',
     cursor: 'pointer',
   });
 
+  const inlineCombinatorStyles = css({
+    alignSelf: 'start',
+    transform: `translateY(calc(-50% - ${theme.base / 8}px))`,
+  });
+
+  const ruleGroupBodyGridStyles = css({
+    display: 'grid',
+    gridTemplateColumns: 'auto 1fr',
+    columnGap: theme.base / 2,
+    rowGap: theme.base / 4,
+    alignItems: 'center',
+    '& > :first-child': {
+      gridColumn: '1 / -1',
+    },
+    '& > :first-child:not(:only-child)': {
+      gridColumn: '2 / -1',
+    },
+  });
+
   return {
     toggleButtonStyles,
     queryBuilderContainerStyles,
-    textAreaStyles,
     buttonGroupStyles,
     ruleContainerStyles,
     ruleGroupContainerBlueStyles,
@@ -142,5 +176,7 @@ export const getWfoStructuredSearchTableStyles = ({ theme, toSecondaryColor }: W
     addRulePlusStyles,
     addRuleContainerStyles,
     addGroupStyles,
+    inlineCombinatorStyles,
+    ruleGroupBodyGridStyles,
   };
 };

package/src/components/WfoTable/WfoStructuredSearchTable/utils.ts

@@ -0,0 +1,45 @@
+import type { RuleGroupType } from 'react-querybuilder';
+import { parseCEL } from 'react-querybuilder/parseCEL';
+
+export const parseCelToRuleGroup = (celString: string): RuleGroupType | undefined => {
+  if (!celString) {
+    return undefined;
+  }
+  try {
+    const ruleGroup = parseCEL(celString);
+    return ruleGroup?.rules?.length > 0 ? ruleGroup : undefined;
+  } catch {
+    return undefined;
+  }
+};
+
+/**
+ * Builds a CEL filter that appends a single column condition (`field == "value"`) to the current
+ * filter and returns it together with its parsed rule group. The column name is resolved via
+ * getColumnSearchFieldName, falling back to the field key. Returns undefined when the input can't
+ * produce a valid filter (empty/quoted search text, or a filter that doesn't parse back to rules).
+ */
+export const buildColumnFilter = <T>(
+  field: keyof T,
+  searchText: string,
+  currentFilter?: string,
+  getColumnSearchFieldName?: (field: keyof T) => string,
+): { filterString: string; ruleGroup: RuleGroupType } | undefined => {
+  // A double quote in the value would break the `== "..."` CEL literal and parseCEL has no escaping.
+  if (!searchText || searchText.includes('"')) {
+    return undefined;
+  }
+
+  const searchFieldName = getColumnSearchFieldName?.(field) ?? String(field);
+  const columnFilterCondition = `${searchFieldName} == "${searchText}"`;
+  const trimmedCurrentFilter = currentFilter?.trim();
+  const filterString =
+    trimmedCurrentFilter ? `(${trimmedCurrentFilter}) && ${columnFilterCondition}` : columnFilterCondition;
+
+  const ruleGroup = parseCelToRuleGroup(filterString);
+  if (!ruleGroup) {
+    return undefined;
+  }
+
+  return { filterString, ruleGroup };
+};

package/src/components/WfoTable/WfoTableSettingsModal/WfoTableSettingsModal.tsx

@@ -25,6 +25,7 @@ export type TableSettingsModalProps<T> = {
   onClose: () => void;
   onUpdateTableConfig: (updatedTableConfig: TableSettingsConfig<T>) => void;
   onResetToDefaults: () => void;
+  extraSettings?: React.ReactNode;
 };
 
 export const TableSettingsModal = <T,>({
@@ -33,6 +34,7 @@ export const TableSettingsModal = <T,>({
   onUpdateTableConfig,
   onResetToDefaults,
   onClose,
+  extraSettings,
 }: TableSettingsModalProps<T>) => {
   const t = useTranslations('main');
   const { formRowStyle, selectFieldStyle } = useWithOrchestratorTheme(getWfoTableSettingsModalStyles);
@@ -97,6 +99,13 @@ export const TableSettingsModal = <T,>({
             options={options}
           />
         </EuiFormRow>
+
+        {extraSettings && (
+          <>
+            <EuiSpacer size="xs" />
+            {extraSettings}
+          </>
+        )}
       </EuiForm>
     </WfoSettingsModal>
   );

package/src/components/index.ts

@@ -1,3 +1,4 @@
+export * from './WfoAutoExpandableTextArea';
 export * from './WfoBadges';
 export * from './WfoBackendUnavailable';
 export * from './WfoAvailabilityCheck';

package/src/configuration/version.ts

@@ -1 +1 @@
-export const ORCHESTRATOR_UI_LIBRARY_VERSION = '8.5.0';
+export const ORCHESTRATOR_UI_LIBRARY_VERSION = '8.6.0';

package/src/messages/en-GB.json

@@ -36,6 +36,7 @@
     "deselect": "Deselect",
     "close": "Close",
     "editColumns": "Edit columns",
+    "tableSettings": "Table settings",
     "loading": "Loading",
     "newSubscription": "New subscription",
     "newTask": "New task",

package/src/messages/nl-NL.json

@@ -36,6 +36,7 @@
     "deselect": "Deselecteer",
     "close": "Sluiten",
     "editColumns": "Wijzig kolommen",
+    "tableSettings": "Tabel instellingen",
     "loading": "Laden",
     "newSubscription": "Nieuwe subscription",
     "newTask": "Nieuwe task",