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

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

@@ -3,31 +3,22 @@ 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,
   DEFAULT_PAGE_SIZES,
   TableColumnKeys,
-  TableSettingsColumnConfig,
   TableSettingsConfig,
   TableSettingsModal,
+  WfoDataSearch,
   WfoDataSorting,
   WfoErrorWithMessage,
   WfoInformationModal,
   WfoKeyValueTable,
   WfoKeyValueTableDataType,
   clearTableConfigFromLocalStorage,
+  getTableSettingsColumns,
   setTableConfigToLocalStorage,
 } from '@/components';
 import { getRowDetailData } from '@/components/WfoTable/WfoAdvancedTable/getRowDetailData';
@@ -39,12 +30,14 @@ import {
 import { useOrchestratorTheme, useWithOrchestratorTheme } 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 { getWfoStructuredSearchTableStyles } from './styles';
+import { buildColumnFilter } from './utils';
 
 export type WfoStructuredSearchTableDataColumnConfigItem<
   T extends object,
@@ -85,6 +78,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 +89,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 +116,7 @@ export const WfoStructuredSearchTable = <T extends object>({
   queryBuilderRuleGroup,
   onUpdateQueryBuilder,
   onUpdateDataSorting,
+  getColumnSearchFieldName,
   handleSearch,
   pageSize,
   setPageSize,
@@ -128,12 +126,13 @@ export const WfoStructuredSearchTable = <T extends object>({
   hasNextPage,
   data,
   isLoading,
+  prefilledFieldOptions,
   ...tableProps
 }: WfoStructuredSearchTableProps<T>) => {
   const { theme } = useOrchestratorTheme();
-  const { formFieldBaseStyle } = useWithOrchestratorTheme(getFormFieldsBaseStyle);
-
+  const { toggleButtonStyles } = useWithOrchestratorTheme(getWfoStructuredSearchTableStyles);
   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 +144,12 @@ export const WfoStructuredSearchTable = <T extends object>({
     }
   }, [defaultHiddenColumns]);
 
+  useEffect(() => {
+    if (filterString) {
+      setIsFilterBuilderVisible(true);
+    }
+  }, [filterString]);
+
   const detailsIconColumn: WfoStructuredSearchTableColumnConfig<T> = {
     viewDetails: {
       columnType: ColumnType.CONTROL,
@@ -162,17 +167,7 @@ export const WfoStructuredSearchTable = <T extends object>({
     ...tableColumnConfig,
   };
 
-  const tableSettingsColumns: TableSettingsColumnConfig<T>[] = Object.entries(tableColumnConfig).map(
-    ([key, { label }]): TableSettingsColumnConfig<T> => {
-      const field = key as keyof T;
-
-      return {
-        field,
-        name: label,
-        isVisible: hiddenColumns.indexOf(field) === -1,
-      };
-    },
-  );
+  const tableSettingsColumns = getTableSettingsColumns(tableColumnConfig, hiddenColumns);
 
   const rowDetailData: WfoKeyValueTableDataType[] | undefined =
     rowDetailModalData && getRowDetailData(rowDetailModalData, tableColumnConfig);
@@ -198,10 +193,47 @@ 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 });
+  };
+
   return (
     <>
-      <EuiFlexGroup alignItems="center">
-        <EuiFlexItem>
+      <EuiFlexGroup alignItems="center" gutterSize="s">
+        {!isFilterBuilderVisible && (
+          <EuiFlexItem grow={false}>
+            <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>
+          </EuiFlexItem>
+        )}
+        <WfoSearchFieldWithActions
+          queryText={queryText}
+          onChangeQueryText={onChangeQueryText}
+          onSearchQueryText={onSearchQueryText}
+          onShowInformation={() => setShowInformationModal(true)}
+          onShowTableSettings={() => setShowTableSettingsModal(true)}
+        />
+      </EuiFlexGroup>
+
+      {isFilterBuilderVisible && (
+        <>
+          <EuiSpacer size="s" />
           <WfoFilterBuilder
             filterString={filterString}
             onUpdateFilterString={onUpdateFilterString}
@@ -209,64 +241,11 @@ export const WfoStructuredSearchTable = <T extends object>({
             queryBuilderRuleGroup={queryBuilderRuleGroup}
             onUpdateQueryBuilder={onUpdateQueryBuilder}
             handleSearch={handleSearch}
+            onToggleFilterBuilder={setIsFilterBuilderVisible}
+            prefilledFieldOptions={prefilledFieldOptions}
           />
-        </EuiFlexItem>
-      </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>
+        </>
+      )}
 
       {error && <WfoErrorWithMessage error={error} />}
 
@@ -277,6 +256,7 @@ export const WfoStructuredSearchTable = <T extends object>({
         hiddenColumns={hiddenColumns}
         rowExpandingConfiguration={rowExpandingConfiguration}
         onUpdateDataSorting={onUpdateDataSorting}
+        onUpdateDataSearch={handleColumnFilterSearch}
         dataSorting={dataSorting}
         data={data}
         isLoading={isLoading}
@@ -302,6 +282,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/WfoValueEditor.tsx

@@ -137,23 +137,53 @@ const DatePicker = ({ handleOnChange, rangeIndex, value: currentValue }: WfoRang
   );
 };
 
-export const WfoValueEditor = ({ field: fieldName, context, handleOnChange, operator, value }: ValueEditorProps) => {
+export const WfoValueEditor = ({
+  field: fieldName,
+  context,
+  handleOnChange,
+  operator,
+  value,
+  className,
+}: ValueEditorProps) => {
   const fieldPathInfoMap = context?.fieldPathInfoMap;
 
   const fieldInfo = fieldPathInfoMap && fieldPathInfoMap.has(fieldName) ? fieldPathInfoMap.get(fieldName) : undefined;
   const uiFieldType = fieldInfo?.ui_types[0] || UiFieldType.text;
 
-  if (uiFieldType === UiFieldType.boolean) {
-    return <BooleanEditor handleOnChange={handleOnChange} value={value} />;
-  }
+  const getEditor = () => {
+    if (uiFieldType === UiFieldType.boolean) {
+      return <BooleanEditor handleOnChange={handleOnChange} value={value} />;
+    }
 
-  if (uiFieldType === UiFieldType.datetime) {
-    return <WfoRangeEditor handleOnChange={handleOnChange} operator={operator} Element={DatePicker} value={value} />;
-  }
+    if (uiFieldType === UiFieldType.datetime) {
+      return <WfoRangeEditor handleOnChange={handleOnChange} operator={operator} Element={DatePicker} value={value} />;
+    }
 
-  if (uiFieldType === UiFieldType.number) {
-    return <WfoRangeEditor handleOnChange={handleOnChange} operator={operator} Element={NumberEditor} value={value} />;
-  }
+    if (uiFieldType === UiFieldType.number) {
+      return (
+        <WfoRangeEditor handleOnChange={handleOnChange} operator={operator} Element={NumberEditor} value={value} />
+      );
+    }
+
+    return <TextEditor handleOnChange={handleOnChange} value={value} />;
+  };
 
-  return <TextEditor handleOnChange={handleOnChange} value={value} />;
+  const handleWrapperKeyDown: KeyboardEventHandler<HTMLDivElement> = (event) => {
+    if (event.key !== 'Enter') return;
+    // Restrict to the editor inputs: the editors' own Enter handlers have already run
+    // (bubble phase) and committed the value via blur, so the search sees it. Enter on
+    // the boolean buttons means "select" — its click fires only after this keydown, so
+    // searching there would use the pre-toggle value.
+    if (!(event.target instanceof HTMLInputElement)) return;
+    context?.onValueEditorEnter?.();
+  };
+
+  // react-querybuilder delivers the standard `rule-value` class via this prop; the wrapper
+  // makes it queryable in the DOM (WfoFieldSelector relies on it to move focus here).
+  // `display: contents` keeps the children direct participants in the rule's flex row.
+  return (
+    <div className={className} style={{ display: 'contents' }} onKeyDown={handleWrapperKeyDown}>
+      {getEditor()}
+    </div>
+  );
 };

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',
   });
 
@@ -92,11 +107,12 @@ export const getWfoStructuredSearchTableStyles = ({ theme, toSecondaryColor }: W
   });
   const expandingRowBodyStyles = css({
     display: 'flex',
-    gap: theme.base,
-    fontWeight: theme.font.weight.bold,
-    span: {
-      fontWeight: 'bold',
-    },
+    justifyContent: 'space-between',
+    // Size to the visible scroll viewport (minus the td padding) instead of
+    // the full table width, and keep it pinned there on horizontal scroll
+    position: 'sticky',
+    left: theme.base / 2,
+    width: `calc(100cqw - ${theme.base}px)`,
   });
 
   const addRulePlusStyles = css({
@@ -119,17 +135,49 @@ 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',
+    },
+  });
+
+  const hideExpandedRowStyle = css({
+    display: 'none',
+  });
+  const dotStyles = css({
+    padding: theme.base / 4,
+  });
+
+  const expandingRowFieldStyles = css({
+    display: 'flex',
+    padding: theme.base / 4,
+    alignItems: 'center',
+  });
+
   return {
     toggleButtonStyles,
     queryBuilderContainerStyles,
-    textAreaStyles,
     buttonGroupStyles,
     ruleContainerStyles,
     ruleGroupContainerBlueStyles,
@@ -142,5 +190,10 @@ export const getWfoStructuredSearchTableStyles = ({ theme, toSecondaryColor }: W
     addRulePlusStyles,
     addRuleContainerStyles,
     addGroupStyles,
+    inlineCombinatorStyles,
+    ruleGroupBodyGridStyles,
+    hideExpandedRowStyle,
+    expandingRowFieldStyles,
+    dotStyles,
   };
 };

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/WfoTable/WfoTable.tsx

@@ -82,6 +82,7 @@ export type WfoTableProps<T extends object> = {
   rowExpandingConfiguration?: {
     uniqueRowId: keyof WfoTableColumnConfig<T>;
     uniqueRowIdToExpandedRowMap: Record<string, ReactNode>;
+    shouldOnlyShowOnHover?: boolean;
   };
   pagination?: Pagination;
   overrideHeader?: (

package/src/components/WfoTable/WfoTable/WfoTableDataRows.tsx

@@ -27,8 +27,15 @@ export const WfoTableDataRows = <T extends object>({
   onRowClick,
   className,
 }: WfoTableDataRowsProps<T>) => {
-  const { cellStyle, cellContentStyle, rowStyle, dataRowStyle, clickableStyle, setWidth } =
-    useWithOrchestratorTheme(getWfoTableStyles);
+  const {
+    cellStyle,
+    cellContentStyle,
+    rowStyle,
+    dataRowStyle,
+    clickableStyle,
+    setWidth,
+    toggleExpandedRowOnHoverStyle,
+  } = useWithOrchestratorTheme(getWfoTableStyles);
 
   const sortedVisibleColumns = getSortedVisibleColumns(columnConfig, columnOrder, hiddenColumns);
 
@@ -37,8 +44,13 @@ export const WfoTableDataRows = <T extends object>({
       {data.map((row, index) => (
         <Fragment key={`table-data-row-${index}`}>
           <tr
-            className={`${className} ${DATA_ROW_CLASS}`}
-            css={[rowStyle, dataRowStyle, onRowClick && clickableStyle]}
+            className={className ? `${className} ${DATA_ROW_CLASS}` : DATA_ROW_CLASS}
+            css={[
+              rowStyle,
+              dataRowStyle,
+              onRowClick && clickableStyle,
+              rowExpandingConfiguration?.shouldOnlyShowOnHover && toggleExpandedRowOnHoverStyle,
+            ]}
             onClick={() => onRowClick?.(row)}
           >
             {sortedVisibleColumns.map(([key, columnConfig]) => {

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

@@ -31,6 +31,9 @@ export const getWfoTableStyles = ({ theme, isDarkModeActive }: WfoThemeHelpers)
 
   const tableContainerStyle = css({
     overflowX: 'auto',
+    // Query container so descendants (e.g. expanded rows) can size to the
+    // visible table width with cqw units instead of the full table width
+    containerType: 'inline-size',
   });
 
   const tableStyle = css({
@@ -157,6 +160,10 @@ export const getWfoTableStyles = ({ theme, isDarkModeActive }: WfoThemeHelpers)
     '.eui-xScroll': { display: 'flex', justifyContent: 'flex-start' },
   });
 
+  const toggleExpandedRowOnHoverStyle = css({
+    '&:hover + tr, &:focus-within + tr': { display: 'table-row' },
+  });
+
   return {
     tableContainerStyle,
     tableStyle,
@@ -174,5 +181,6 @@ export const getWfoTableStyles = ({ theme, isDarkModeActive }: WfoThemeHelpers)
     dragAndDropStyle,
     paginationStyle,
     setWidth,
+    toggleExpandedRowOnHoverStyle,
   };
 };