@orchestrator-ui/orchestrator-ui-components 8.7.2 → 8.8.1

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

@@ -0,0 +1,130 @@
+/**
+ * Regression test for the URL-restore render loop: a controlled QueryBuilder wired like
+ * WfoSearchPocPage + WfoFilterBuilder, restoring `lldp == true` from CEL while the path
+ * info of `lldp` resolves asynchronously (boolean ui type + operator list).
+ *
+ * The rule group is deliberately created with parseCEL directly — without the rule ids
+ * parseCelToRuleGroup adds — so every query prop change remounts the rules. The editors
+ * must not dispatch a query change on mount for a value the rule already holds, or the
+ * remount + mount-commit combination feeds back into an endless update cycle.
+ */
+import React, { useEffect, useState } from 'react';
+import type { FieldSelectorProps, FullOperator, RuleGroupType } from 'react-querybuilder';
+import { QueryBuilder, formatQuery } from 'react-querybuilder';
+import { parseCEL } from 'react-querybuilder/parseCEL';
+
+import '@testing-library/jest-dom';
+import { act, render, screen } from '@testing-library/react';
+
+import type { PathInfo } from '@/types';
+
+import { WfoOperatorSelector } from './WfoOperatorSelector';
+import { WfoValueEditor } from './WfoValueEditor';
+
+jest.mock('@/hooks', () => ({
+  useWithOrchestratorTheme: () => ({}),
+}));
+
+jest.mock('next-intl', () => ({
+  useTranslations: () => (key: string) => key,
+}));
+
+const LLDP_PATH_INFO = {
+  path: 'lldp',
+  type: 'boolean',
+  operators: ['eq', 'neq'],
+  value_schema: {},
+  group: 'leaf',
+  ui_types: ['boolean'],
+} as unknown as PathInfo;
+
+const SEARCH_OPERATOR_TO_RQB_OPERATOR_MAP: Record<string, string> = {
+  eq: '=',
+  neq: '!=',
+};
+
+const mapOperators = (operators?: string[]): FullOperator[] =>
+  (operators ?? []).map((operator) => {
+    const rqbOperator = SEARCH_OPERATOR_TO_RQB_OPERATOR_MAP[operator] ?? operator;
+    return { name: rqbOperator, label: rqbOperator, value: rqbOperator };
+  });
+
+const FieldSelectorStub = ({ value }: FieldSelectorProps) => <span data-testid="field">{value}</span>;
+
+// Circuit breaker: records query updates and stops propagating them after a threshold
+// so a render loop terminates and can be inspected instead of hanging the test.
+const queryChangeLog: string[] = [];
+
+const Harness = ({ initialCel = 'lldp == true' }: { initialCel?: string }) => {
+  // Page-like state: rule group parsed from the URL's CEL string (rules have no ids).
+  const [query, setQuery] = useState<RuleGroupType>(() => parseCEL(initialCel));
+  const [, setFilterString] = useState<string>(initialCel);
+
+  // WfoFilterBuilder-like state, with the async field resolution simulated: the maps
+  // are empty on mount and get lldp's path info after a tick.
+  const [fieldToOperatorMap, setFieldToOperatorMap] = useState<Map<string, string[]>>(new Map());
+  const [fieldPathInfoMap, setFieldPathInfoMap] = useState<Map<string, PathInfo>>(new Map());
+
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      setFieldToOperatorMap(new Map([['lldp', LLDP_PATH_INFO.operators]]));
+      setFieldPathInfoMap(new Map([['lldp', LLDP_PATH_INFO]]));
+    }, 0);
+    return () => clearTimeout(timeout);
+  }, []);
+
+  return (
+    <QueryBuilder
+      query={query}
+      enableMountQueryChange={false}
+      onQueryChange={(ruleGroup: RuleGroupType) => {
+        queryChangeLog.push(JSON.stringify(ruleGroup));
+        if (queryChangeLog.length > 20) return;
+        // Mirrors WfoSearchPocPage.onUpdateQueryBuilder
+        setQuery({ ...ruleGroup });
+        setFilterString(formatQuery({ ...ruleGroup }, { format: 'cel', fallbackExpression: '' }));
+      }}
+      context={{
+        fieldPathInfoMap,
+        onFieldSelected: () => {},
+      }}
+      getOperators={(field) => mapOperators(fieldToOperatorMap.get(field))}
+      controlElements={{
+        fieldSelector: FieldSelectorStub,
+        operatorSelector: WfoOperatorSelector,
+        valueEditor: WfoValueEditor,
+        valueSourceSelector: null,
+      }}
+      resetOnFieldChange={false}
+    />
+  );
+};
+
+describe('URL restore with async path info resolution', () => {
+  it('settles without a render loop once the path info resolves', async () => {
+    render(<Harness />);
+
+    // Flush the simulated resolution plus any follow-up effect cascades.
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 50));
+    });
+
+    expect(screen.getByTestId('field')).toHaveTextContent('lldp');
+    // The resolved boolean ui type must render the boolean editor for the restored rule
+    expect(screen.getByRole('button', { name: 'True' })).toBeInTheDocument();
+    // Nothing about the restored rule changed, so no query updates should have fired
+    expect(queryChangeLog).toEqual([]);
+  });
+
+  it('does not flash a value source selector while a literal is half-typed', async () => {
+    // 'fals' parses as an identifier, giving the rule valueSource 'field'; without the
+    // valueSourceSelector override the default selector appears next to the editor.
+    render(<Harness initialCel="lldp == fals" />);
+
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 50));
+    });
+
+    expect(document.querySelector('[data-testid="value-source-selector"]')).not.toBeInTheDocument();
+  });
+});

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

@@ -3,7 +3,16 @@ import type { RuleGroupType } from 'react-querybuilder';
 
 import { useTranslations } from 'next-intl';
 
-import { EuiButton, EuiFlexGroup, EuiFlexItem, EuiFormRow, EuiSelect, EuiSpacer, EuiText } from '@elastic/eui';
+import {
+  EuiButton,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiFormRow,
+  EuiSelect,
+  EuiSpacer,
+  EuiSwitch,
+  EuiText,
+} from '@elastic/eui';
 
 import {
   DEFAULT_PAGE_SIZE,
@@ -70,6 +79,7 @@ export type WfoStructuredSearchTableProps<T extends object> = Omit<
   tableColumnConfig: WfoStructuredSearchTableColumnConfig<T>;
   rowExpandingConfiguration: WfoTableProps<T>['rowExpandingConfiguration'];
   defaultHiddenColumns?: TableColumnKeys<T>;
+  defaultShowMatchDetails?: boolean;
   queryText?: string;
   localStorageKey: string;
   exportDataIsLoading?: boolean;
@@ -100,6 +110,7 @@ export type WfoStructuredSearchTableProps<T extends object> = Omit<
 export const WfoStructuredSearchTable = <T extends object>({
   tableColumnConfig,
   defaultHiddenColumns = [],
+  defaultShowMatchDetails = false,
   queryText,
   localStorageKey,
   exportDataIsLoading,
@@ -136,6 +147,7 @@ export const WfoStructuredSearchTable = <T extends object>({
   const [showTableSettingsModal, setShowTableSettingsModal] = useState(false);
   const [rowDetailModalData, setRowDetailModalData] = useState<T | undefined>(undefined);
   const [showInformationModal, setShowInformationModal] = useState(false);
+  const [showMatchDetails, setShowMatchDetails] = useState(defaultShowMatchDetails);
   const t = useTranslations('common');
 
   useEffect(() => {
@@ -144,6 +156,10 @@ export const WfoStructuredSearchTable = <T extends object>({
     }
   }, [defaultHiddenColumns]);
 
+  useEffect(() => {
+    setShowMatchDetails(defaultShowMatchDetails);
+  }, [defaultShowMatchDetails]);
+
   useEffect(() => {
     if (filterString) {
       setIsFilterBuilderVisible(true);
@@ -182,6 +198,18 @@ export const WfoStructuredSearchTable = <T extends object>({
     setTableConfigToLocalStorage(localStorageKey, {
       hiddenColumns: updatedHiddenColumns,
       selectedPageSize: updatedTableConfig.selectedPageSize,
+      showMatchDetails,
+    });
+  };
+
+  // The toggle applies live, so persist it immediately alongside the currently committed
+  // hidden columns and page size instead of waiting for the modal's "Update" action.
+  const handleToggleShowMatchDetails = (checked: boolean) => {
+    setShowMatchDetails(checked);
+    setTableConfigToLocalStorage(localStorageKey, {
+      hiddenColumns,
+      selectedPageSize: pageSize ?? DEFAULT_PAGE_SIZE,
+      showMatchDetails: checked,
     });
   };
 
@@ -189,6 +217,7 @@ export const WfoStructuredSearchTable = <T extends object>({
     const defaultTableConfig = getDefaultTableConfig<T>(localStorageKey);
     setHiddenColumns(defaultTableConfig.hiddenColumns);
     setPageSize(defaultTableConfig.selectedPageSize);
+    setShowMatchDetails(defaultTableConfig.showMatchDetails ?? false);
     setShowTableSettingsModal(false);
     clearTableConfigFromLocalStorage(localStorageKey);
   };
@@ -255,6 +284,7 @@ export const WfoStructuredSearchTable = <T extends object>({
         columnConfig={tableColumnsWithControlColumns}
         hiddenColumns={hiddenColumns}
         rowExpandingConfiguration={rowExpandingConfiguration}
+        showExpandedRows={showMatchDetails}
         onUpdateDataSorting={onUpdateDataSorting}
         onUpdateDataSearch={handleColumnFilterSearch}
         dataSorting={dataSorting}
@@ -284,6 +314,15 @@ export const WfoStructuredSearchTable = <T extends object>({
           onResetToDefaults={handleResetToDefaults}
           extraSettings={
             <>
+              <EuiFormRow label={t('showMatchDetails')} display="columnCompressed">
+                <EuiSwitch
+                  showLabel={false}
+                  label={t('showMatchDetails')}
+                  checked={showMatchDetails}
+                  onChange={(event) => handleToggleShowMatchDetails(event.target.checked)}
+                  compressed
+                />
+              </EuiFormRow>
               <EuiFormRow label={t('retrieval')} display="columnCompressed">
                 <EuiSelect
                   options={[

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

@@ -0,0 +1,60 @@
+import React from 'react';
+import type { ValueEditorProps } from 'react-querybuilder';
+
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+
+import type { PathInfo } from '@/types';
+
+import { WfoValueEditor } from './WfoValueEditor';
+
+jest.mock('@/hooks', () => ({
+  useWithOrchestratorTheme: () => ({}),
+}));
+
+jest.mock('next-intl', () => ({
+  useTranslations: () => (key: string) => key,
+}));
+
+const BOOLEAN_PATH_INFO = { ui_types: ['boolean'] } as PathInfo;
+
+const renderBooleanValueEditor = (value: unknown, handleOnChange = jest.fn()) => {
+  render(
+    <WfoValueEditor
+      {...({
+        field: 'lldp',
+        operator: '=',
+        value,
+        handleOnChange,
+        className: 'rule-value',
+        context: { fieldPathInfoMap: new Map([['lldp', BOOLEAN_PATH_INFO]]) },
+      } as unknown as ValueEditorProps)}
+    />,
+  );
+  return handleOnChange;
+};
+
+describe('WfoValueEditor boolean editor', () => {
+  it('commits the default true on mount for a freshly selected field without a value', () => {
+    const handleOnChange = renderBooleanValueEditor('');
+
+    expect(handleOnChange).toHaveBeenCalledWith(true);
+    expect(screen.getByRole('button', { name: 'True', pressed: true })).toBeInTheDocument();
+  });
+
+  it('does not re-commit a restored boolean value', () => {
+    const handleOnChange = renderBooleanValueEditor(false);
+
+    expect(handleOnChange).not.toHaveBeenCalled();
+    expect(screen.getByRole('button', { name: 'False', pressed: true })).toBeInTheDocument();
+  });
+
+  it('does not overwrite a half-typed literal from the filter string textarea', () => {
+    // While the user edits `lldp == false` in the textarea, intermediate states like
+    // `lldp == fals` parse to a non-boolean value. Committing a normalized boolean here
+    // would echo back into the filter string and snap the textarea back mid-edit.
+    const handleOnChange = renderBooleanValueEditor('fals');
+
+    expect(handleOnChange).not.toHaveBeenCalled();
+  });
+});

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

@@ -24,12 +24,30 @@ enum UiFieldType {
   datetime = 'datetime',
 }
 
-const BooleanEditor = ({ handleOnChange, value: currentValue = true }: EditorInputFieldProps<boolean>) => {
-  const [value, setValue] = useState<string>(currentValue.toString());
+// The value is only a boolean for rules committed by this editor; a rule parsed from a
+// CEL string can carry anything, e.g. a half-typed literal ('fals') or a quoted string.
+const BooleanEditor = ({
+  handleOnChange,
+  value: currentValue,
+}: EditorInputFieldProps<boolean | string | undefined>) => {
+  // A restored query (URL / filter string) delivers a real boolean; anything else —
+  // a freshly selected field ('') or a value left behind by another editor — means
+  // there is no boolean value yet and the editor starts at its default, true.
+  const initialValue = typeof currentValue === 'boolean' ? currentValue : true;
+  const [value, setValue] = useState<string>(initialValue.toString());
 
   useEffect(() => {
-    handleOnChange(true);
-    // Sets the initial value to true so we allow empty dep array here
+    // Commit the default only for a rule without a value yet (a freshly selected field)
+    // so it is complete without user interaction. Any other value belongs to someone
+    // else and is left alone: a boolean restored from CEL has nothing to commit (and
+    // committing anyway loops when the query update remounts this editor), and the
+    // half-typed literal of a CEL string being edited in the textarea ('fals') must not
+    // be overwritten — the commit would echo a normalized boolean back into the filter
+    // string, snapping the textarea back mid-edit.
+    if (currentValue === undefined || currentValue === '') {
+      handleOnChange(initialValue);
+    }
+    // Only on mount: currentValue is this editor's own output after that
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 

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

@@ -2,7 +2,7 @@ import { css } from '@emotion/react';
 
 import { WfoThemeHelpers } from '@/hooks';
 
-export const getWfoStructuredSearchTableStyles = ({ theme }: WfoThemeHelpers) => {
+export const getWfoStructuredSearchTableStyles = ({ theme, isDarkModeActive }: WfoThemeHelpers) => {
   const queryBuilderContainerStyles = css({
     backgroundColor: theme.colors.backgroundBaseSubdued,
     padding: theme.base / 2,
@@ -63,7 +63,7 @@ export const getWfoStructuredSearchTableStyles = ({ theme }: WfoThemeHelpers) =>
   const ruleGroupContainerBlueStyles = css({
     ...ruleGroupContainerBase,
     borderRadius: theme.border.radius.small,
-    backgroundColor: '#E9F1F9',
+    backgroundColor: isDarkModeActive ? theme.colors.backgroundLightPrimary : '#E9F1F9',
   });
 
   const ruleGroupContainerWhiteStyles = css({
@@ -83,7 +83,7 @@ export const getWfoStructuredSearchTableStyles = ({ theme }: WfoThemeHelpers) =>
     ...ruleGroupContainerBase,
     borderBottomLeftRadius: theme.border.radius.small,
     borderTopLeftRadius: theme.border.radius.small,
-    backgroundColor: '#E9F1F9',
+    backgroundColor: isDarkModeActive ? theme.colors.backgroundLightPrimary : '#E9F1F9',
   });
 
   const removeGroupActionStyles = css({
@@ -99,11 +99,10 @@ export const getWfoStructuredSearchTableStyles = ({ theme }: WfoThemeHelpers) =>
   });
 
   const expandingSearchRowStyles = css({
-    padding: theme.base / 2,
-    height: theme.base * 2,
+    padding: `${theme.base / 4}px ${theme.base / 2}px`,
     borderRadius: theme.border.radius.medium,
-    border: 'thin solid FEF7E0',
-    backgroundColor: '#FEF7E0',
+    border: `thin solid ${theme.colors.highlight}`,
+    backgroundColor: theme.colors.highlight,
   });
   const expandingRowBodyStyles = css({
     display: 'flex',
@@ -166,12 +165,12 @@ export const getWfoStructuredSearchTableStyles = ({ theme }: WfoThemeHelpers) =>
     display: 'none',
   });
   const dotStyles = css({
-    padding: theme.base / 4,
+    padding: `${theme.base / 8}px ${theme.base / 4}px`,
   });
 
   const expandingRowFieldStyles = css({
     display: 'flex',
-    padding: theme.base / 4,
+    padding: `${theme.base / 8}px ${theme.base / 4}px`,
     alignItems: 'center',
   });
 

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

@@ -0,0 +1,56 @@
+import type { RuleGroupType, RuleType } from 'react-querybuilder';
+import { formatQuery } from 'react-querybuilder';
+
+import { collectRuleFields, parseCelToRuleGroup } from './utils';
+
+describe('parseCelToRuleGroup', () => {
+  it('assigns ids to the parsed group and rules so rule identity stays stable', () => {
+    const ruleGroup = parseCelToRuleGroup('lldp == true && port.speed > 1000');
+
+    expect(ruleGroup?.id).toBeTruthy();
+    expect(ruleGroup?.rules).toHaveLength(2);
+    ruleGroup?.rules.forEach((rule) => {
+      expect((rule as RuleType).id).toBeTruthy();
+    });
+  });
+
+  it('returns undefined for strings that do not parse to rules', () => {
+    expect(parseCelToRuleGroup('')).toBeUndefined();
+    expect(parseCelToRuleGroup('not valid cel ===')).toBeUndefined();
+  });
+
+  it('drops the field value source parseCEL assigns to bare identifiers, keeping values quoted', () => {
+    // parseCEL reads the bare identifier as a field reference (valueSource 'field').
+    // Left in place, formatQuery would render the value unquoted: `lldp == fals`.
+    const ruleGroup = parseCelToRuleGroup('lldp == fals');
+
+    expect(ruleGroup).toBeDefined();
+    expect((ruleGroup?.rules[0] as RuleType).valueSource).toBeUndefined();
+    expect(formatQuery(ruleGroup as RuleGroupType, { format: 'cel', fallbackExpression: '' })).toBe('lldp == "fals"');
+  });
+});
+
+describe('collectRuleFields', () => {
+  it('collects unique fields from rules, including nested groups', () => {
+    const ruleGroup: RuleGroupType = {
+      combinator: 'and',
+      rules: [
+        { field: 'lldp', operator: '=', value: true },
+        { field: 'subscription.status', operator: '=', value: 'active' },
+        {
+          combinator: 'or',
+          rules: [
+            { field: 'lldp', operator: '=', value: false },
+            { field: 'port.speed', operator: '>', value: 1000 },
+          ],
+        },
+      ],
+    };
+
+    expect(collectRuleFields(ruleGroup)).toEqual(['lldp', 'subscription.status', 'port.speed']);
+  });
+
+  it('returns an empty list for a group without rules', () => {
+    expect(collectRuleFields({ combinator: 'and', rules: [] })).toEqual([]);
+  });
+});

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

@@ -1,13 +1,52 @@
 import type { RuleGroupType } from 'react-querybuilder';
+import { prepareRuleGroup } from 'react-querybuilder';
 import { parseCEL } from 'react-querybuilder/parseCEL';
 
+/** Collects the unique field names used by the rules of a rule group, including nested groups. */
+export const collectRuleFields = (ruleGroup: RuleGroupType): string[] => {
+  const fields = ruleGroup.rules.flatMap((rule) => {
+    if (typeof rule === 'string') {
+      return [];
+    }
+    if ('rules' in rule) {
+      return collectRuleFields(rule);
+    }
+    return [rule.field];
+  });
+  return [...new Set(fields)];
+};
+
+// The filter builder has no field-to-field comparisons: a 'field' value source only
+// appears when parseCEL reads a bare identifier (e.g. the half-typed literal in
+// `lldp == fals`) as a field reference. If it stays on the rule it survives later field
+// and value edits (resetOnFieldChange is off and the value editors only set the value),
+// and formatQuery renders the value of such a rule unquoted — producing invalid CEL like
+// `subscription.end_date == 2026-07-05T22:00:00.000Z` once a string value is committed.
+const dropFieldValueSources = (ruleGroup: RuleGroupType): RuleGroupType => ({
+  ...ruleGroup,
+  rules: ruleGroup.rules.map((rule) => {
+    if (typeof rule === 'string' || 'rules' in rule) {
+      return typeof rule === 'string' ? rule : dropFieldValueSources(rule);
+    }
+    if (rule.valueSource === 'field') {
+      const ruleWithoutValueSource = { ...rule };
+      delete ruleWithoutValueSource.valueSource;
+      return ruleWithoutValueSource;
+    }
+    return rule;
+  }),
+});
+
 export const parseCelToRuleGroup = (celString: string): RuleGroupType | undefined => {
   if (!celString) {
     return undefined;
   }
   try {
     const ruleGroup = parseCEL(celString);
-    return ruleGroup?.rules?.length > 0 ? ruleGroup : undefined;
+    // prepareRuleGroup assigns the rule ids parseCEL leaves out. Without stable ids the
+    // QueryBuilder regenerates them on every query prop change, remounting all rules —
+    // which loses editor state and can loop with editors that commit a value on mount.
+    return ruleGroup?.rules?.length > 0 ? prepareRuleGroup(dropFieldValueSources(ruleGroup)) : undefined;
   } catch {
     return undefined;
   }

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

@@ -82,8 +82,9 @@ export type WfoTableProps<T extends object> = {
   rowExpandingConfiguration?: {
     uniqueRowId: keyof WfoTableColumnConfig<T>;
     uniqueRowIdToExpandedRowMap: Record<string, ReactNode>;
-    shouldOnlyShowOnHover?: boolean;
   };
+  // When true, every row's expanded detail row is revealed at once (otherwise all are hidden)
+  showExpandedRows?: boolean;
   pagination?: Pagination;
   overrideHeader?: (
     tableHeaderEntries: Array<[string, WfoTableControlColumnConfigItem<T> | WfoTableDataColumnConfigItem<T, keyof T>]>,
@@ -107,6 +108,7 @@ export const WfoTable = <T extends object>({
   isLoading = false,
   dataSorting = [],
   rowExpandingConfiguration,
+  showExpandedRows = false,
   pagination,
   overrideHeader,
   onUpdateDataSorting,
@@ -236,6 +238,7 @@ export const WfoTable = <T extends object>({
                   hiddenColumns={hiddenColumns}
                   columnOrder={columnOrder}
                   rowExpandingConfiguration={rowExpandingConfiguration}
+                  showExpandedRows={showExpandedRows}
                   onRowClick={onRowClick}
                 />
               ))}
@@ -252,6 +255,7 @@ export const WfoTable = <T extends object>({
                 hiddenColumns={hiddenColumns}
                 columnOrder={columnOrder}
                 rowExpandingConfiguration={rowExpandingConfiguration}
+                showExpandedRows={showExpandedRows}
                 onRowClick={onRowClick}
               />
             </tbody>

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

@@ -11,7 +11,14 @@ import { getSortedVisibleColumns } from './utils';
 
 export type WfoTableDataRowsProps<T extends object> = Pick<
   WfoTableProps<T>,
-  'data' | 'columnConfig' | 'hiddenColumns' | 'columnOrder' | 'rowExpandingConfiguration' | 'onRowClick' | 'className'
+  | 'data'
+  | 'columnConfig'
+  | 'hiddenColumns'
+  | 'columnOrder'
+  | 'rowExpandingConfiguration'
+  | 'showExpandedRows'
+  | 'onRowClick'
+  | 'className'
 >;
 
 export const DATA_ROW_CLASS = 'data-row';
@@ -24,6 +31,7 @@ export const WfoTableDataRows = <T extends object>({
   hiddenColumns = [],
   columnOrder = [],
   rowExpandingConfiguration,
+  showExpandedRows,
   onRowClick,
   className,
 }: WfoTableDataRowsProps<T>) => {
@@ -34,6 +42,7 @@ export const WfoTableDataRows = <T extends object>({
     dataRowStyle,
     clickableStyle,
     setWidth,
+    showExpandedRowStyle,
     toggleExpandedRowOnHoverStyle,
   } = useWithOrchestratorTheme(getWfoTableStyles);
 
@@ -49,7 +58,7 @@ export const WfoTableDataRows = <T extends object>({
               rowStyle,
               dataRowStyle,
               onRowClick && clickableStyle,
-              rowExpandingConfiguration?.shouldOnlyShowOnHover && toggleExpandedRowOnHoverStyle,
+              rowExpandingConfiguration && (showExpandedRows ? showExpandedRowStyle : toggleExpandedRowOnHoverStyle),
             ]}
             onClick={() => onRowClick?.(row)}
           >