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

package/package.json

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

package/src/components/WfoBadges/WfoWorkflowTargetBadge/WfoWorkflowTargetBadge.tsx

@@ -13,11 +13,11 @@ export const WfoWorkflowTargetBadge: FC<WfoWorkflowTargetBadgeProps> = ({ target
   const { theme, toSecondaryColor } = useOrchestratorTheme();
   if (!target) return null;
 
-  const getBadgeColorFromTarget = (_target: string) => {
+  const getBadgeColorFromTarget = (_target: WorkflowTarget) => {
     const { primary, danger, textDanger, textPrimary, success, textSuccess, warning, textWarning, accent, textAccent } =
       theme.colors;
 
-    switch (_target?.toLowerCase()) {
+    switch (_target) {
       case WorkflowTarget.CREATE:
         return {
           badgeColor: toSecondaryColor(success),

package/src/components/WfoContentHeader/WfoContentHeader.tsx

@@ -19,7 +19,7 @@ export const WfoContentHeader: FC<WfoContentHeaderProps> = ({ title, subtitle, c
         </WfoRenderElementOrString>
         {subtitle && (
           <div>
-            <EuiSpacer size="m" />
+            <EuiSpacer size="s" />
             <WfoRenderElementOrString>{subtitle}</WfoRenderElementOrString>
           </div>
         )}

package/src/components/WfoInlineNoteEdit/WfoProcessListNoteEdit.spec.tsx

@@ -0,0 +1,35 @@
+/**
+ * Regression tests for the note column going stale while paginating: the table reuses row
+ * components across pages, and EuiInlineEditText only follows its value prop while the value
+ * is truthy. A row whose note is empty must therefore still pass a truthy value (the
+ * invisible character), otherwise the cell keeps showing the previous page's note.
+ */
+import React from 'react';
+
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+
+import { WfoProcessListNoteEdit } from './WfoProcessListNoteEdit';
+
+jest.mock('@/rtk', () => ({
+  ...jest.requireActual('@/rtk'),
+  usePatchProcessMutation: () => [jest.fn()],
+}));
+
+describe('WfoProcessListNoteEdit', () => {
+  it('stops showing the previous note when the reused row has no note', () => {
+    const { rerender } = render(<WfoProcessListNoteEdit processId="process-1" note="Note from page one" />);
+    expect(screen.getByText('Note from page one')).toBeInTheDocument();
+
+    rerender(<WfoProcessListNoteEdit processId="process-2" note={null} />);
+    expect(screen.queryByText('Note from page one')).not.toBeInTheDocument();
+  });
+
+  it('shows the new note when the reused row has a different note', () => {
+    const { rerender } = render(<WfoProcessListNoteEdit processId="process-1" note="Note from page one" />);
+
+    rerender(<WfoProcessListNoteEdit processId="process-2" note="Note from page two" />);
+    expect(screen.getByText('Note from page two')).toBeInTheDocument();
+    expect(screen.queryByText('Note from page one')).not.toBeInTheDocument();
+  });
+});

package/src/components/WfoInlineNoteEdit/WfoProcessListNoteEdit.tsx

@@ -1,8 +1,9 @@
 import type { FC } from 'react';
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 
 import { usePatchProcessMutation } from '@/rtk';
 import { ProcessDetail } from '@/types';
+import { INVISIBLE_CHARACTER } from '@/utils';
 
 import { WfoInlineEdit } from '../WfoInlineEdit';
 
@@ -13,13 +14,6 @@ interface WfoProcessDetailNoteEditProps {
 
 export const WfoProcessListNoteEdit: FC<WfoProcessDetailNoteEditProps> = ({ processId, note }) => {
   const [patchProcess] = usePatchProcessMutation();
-  const [noteValue, setNoteValue] = useState(note);
-
-  useEffect(() => {
-    if (note !== noteValue) {
-      setNoteValue(note);
-    }
-  }, [note, noteValue]);
 
   const onSaveNote = async (note: string) => {
     const noteModifyPayload = { id: processId, note: note };
@@ -27,5 +21,9 @@ export const WfoProcessListNoteEdit: FC<WfoProcessDetailNoteEditProps> = ({ proc
     return note;
   };
 
-  return <WfoInlineEdit value={noteValue?.trim() || ''} onSave={onSaveNote} />;
+  // An empty note must still be passed as a non-empty string (the invisible character):
+  // EuiInlineEditText only follows its value prop while the value is truthy, so an empty
+  // string would freeze the cell on the note of whichever row rendered here before it,
+  // e.g. when the table rows are reused while paginating.
+  return <WfoInlineEdit value={note?.trim() ? note : INVISIBLE_CHARACTER} onSave={onSaveNote} />;
 };

package/src/components/WfoProcessList/WfoProcessListDeltaPopover.tsx

@@ -28,7 +28,7 @@ export const WfoProcessListDeltaPopover: FC<WfoProcessListDeltaPopoverProps> = (
 
   const { data, isFetching } = useGetRawProcessDetailQuery({ processId }, { skip: !isPopoverOpen });
 
-  if (workflowTarget.toUpperCase() !== WorkflowTarget.MODIFY.toUpperCase()) {
+  if (workflowTarget !== WorkflowTarget.MODIFY) {
     return null;
   }
 

package/src/components/WfoProcessList/WfoProcessesList.tsx

@@ -241,15 +241,17 @@ export const WfoProcessesList = ({
   const getProcessListForExport = () =>
     getProcessListTrigger(getQueryVariablesForExport(processListQueryVars)).unwrap();
 
+  const tableConfig = mapSortableAndFilterableValuesToTableColumnConfig(
+    tableColumns,
+    pageInfo?.sortFields,
+    pageInfo?.filterFields,
+  );
+
   return (
     <WfoAdvancedTable<ProcessListItem>
       queryString={queryString}
       data={mapGraphQlProcessListResultToProcessListItems(processes || [])}
-      tableColumnConfig={mapSortableAndFilterableValuesToTableColumnConfig(
-        tableColumns,
-        pageInfo?.sortFields,
-        pageInfo?.filterFields,
-      )}
+      tableColumnConfig={tableConfig}
       dataSorting={[dataSorting]}
       pagination={pagination}
       isLoading={isFetching}

package/src/components/WfoSubscription/WfoProcessesTimeline.tsx

@@ -1,9 +1,9 @@
-import React from 'react';
+import React, { useState } from 'react';
 
 import { useTranslations } from 'next-intl';
 import Link from 'next/link';
 
-import { EuiComment, EuiCommentList, EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiText } from '@elastic/eui';
+import { EuiComment, EuiCommentList, EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiSwitch, EuiText } from '@elastic/eui';
 
 import {
   PATH_TASKS,
@@ -15,7 +15,7 @@ import {
   sortProcessesByDate,
 } from '@/components';
 import { useWithOrchestratorTheme } from '@/hooks';
-import { SortOrder, SubscriptionDetailProcess } from '@/types';
+import { SortOrder, SubscriptionDetailProcess, WorkflowTarget } from '@/types';
 import { parseDate, parseDateToLocaleDateTimeString, upperCaseFirstChar } from '@/utils';
 
 import { WfoProcessStatusBadge } from '../WfoBadges';
@@ -122,8 +122,9 @@ export const WfoProcessesTimeline = ({ subscriptionDetailProcesses }: WfoProcess
       value: SortOrder.DESC,
     },
   ];
-
-  const [selectedOption, setSelectedOption] = React.useState(options[0]);
+  const { processToggleStyles } = useWithOrchestratorTheme(getSubscriptionDetailStyles);
+  const [selectedOption, setSelectedOption] = useState(options[0]);
+  const [hideValidateTasks, setHideValidateTasks] = useState<boolean>(true);
 
   const handleOnSelectOption = (option: WfoRadioDropdownOption<SortOrder>) => {
     setSelectedOption(option);
@@ -135,11 +136,24 @@ export const WfoProcessesTimeline = ({ subscriptionDetailProcesses }: WfoProcess
     <>
       <EuiSpacer size={'m'} />
       {!subscriptionDetailProcesses && <WfoLoading />}
-      <WfoRadioDropdown options={options} onUpdateOption={handleOnSelectOption} selectedOption={selectedOption} />
+      <EuiFlexGroup alignItems={'center'} css={processToggleStyles}>
+        <EuiSwitch
+          showLabel={true}
+          label={t('hideValidateTasks')}
+          type="button"
+          checked={hideValidateTasks}
+          onChange={() => setHideValidateTasks((value) => !value)}
+        />
+        <WfoRadioDropdown options={options} onUpdateOption={handleOnSelectOption} selectedOption={selectedOption} />
+      </EuiFlexGroup>
+
       {sortedProcesses && (
         <EuiCommentList aria-label="Processes">
           {sortedProcesses
-            .filter((process) => !process.isTask)
+            .filter(
+              (process) =>
+                !process.isTask || (process.workflowTarget === WorkflowTarget.VALIDATE && !hideValidateTasks),
+            )
             .map((subscriptionDetailProcess, index) => (
               <WfoRenderSubscriptionProcess key={index} subscriptionDetailProcess={subscriptionDetailProcess} />
             ))}

package/src/components/WfoSubscription/WfoSubscriptionActions/WfoSubscriptionActions.tsx

@@ -18,7 +18,7 @@ import { PolicyResource } from '@/configuration/policy-resources';
 import { useOrchestratorTheme, usePolicy } from '@/hooks';
 import { WfoDotsHorizontal } from '@/icons/WfoDotsHorizontal';
 import { useGetSubscriptionActionsQuery, useGetSubscriptionDetailQuery, useStartProcessMutation } from '@/rtk';
-import { WorkflowTarget } from '@/types';
+import { SubscriptionAction, WorkflowTarget } from '@/types';
 
 type MenuBlockProps = {
   title: string;
@@ -129,12 +129,28 @@ export const WfoSubscriptionActions: FC<WfoSubscriptionActionsProps> = ({
     }
   };
 
+  const getActionItems = (workflowTarget: WorkflowTarget): SubscriptionAction[] => {
+    // Core versions 5.2 and lower return subscriptionActions result with lowercase keynames. Higher version return them uppercased to align
+    // with all the other places they are used. We support both for now. The lowercase keys are deliberately not part of the
+    // SubscriptionActions type, so the fallback is a runtime-only check behind a cast.
+    const actionsByTarget = subscriptionActions as unknown as
+      | Record<string, SubscriptionAction[] | undefined>
+      | undefined;
+
+    return actionsByTarget?.[workflowTarget] ?? actionsByTarget?.[workflowTarget.toLowerCase()] ?? [];
+  };
+
+  const validateActionItems = getActionItems(WorkflowTarget.VALIDATE);
+  const reconcileActionItems = getActionItems(WorkflowTarget.RECONCILE);
+  const modifyActionItems = getActionItems(WorkflowTarget.MODIFY);
+  const terminateActionItems = getActionItems(WorkflowTarget.TERMINATE);
+
   const compactItems = (
     <>
-      {isAllowed(SUBSCRIPTION_VALIDATE + subscriptionId) && subscriptionActions?.validate && (
+      {isAllowed(SUBSCRIPTION_VALIDATE + subscriptionId) && validateActionItems.length > 0 && (
         <>
           {!compactMode && <MenuBlock title={t('tasks')} />}
-          {subscriptionActions.validate.map((subscriptionAction, index) => (
+          {validateActionItems.map((subscriptionAction, index) => (
             <WfoSubscriptionActionsMenuItem
               key={`s_${index}`}
               subscriptionAction={subscriptionAction}
@@ -148,10 +164,10 @@ export const WfoSubscriptionActions: FC<WfoSubscriptionActionsProps> = ({
         </>
       )}
 
-      {isAllowed(SUBSCRIPTION_RECONCILE + subscriptionId) && (subscriptionActions?.reconcile?.length ?? 0) > 0 && (
+      {isAllowed(SUBSCRIPTION_RECONCILE + subscriptionId) && reconcileActionItems.length > 0 && (
         <>
           {!compactMode && <MenuBlock title={t('reconcile')} />}
-          {subscriptionActions?.reconcile.map((subscriptionAction, index) => (
+          {reconcileActionItems.map((subscriptionAction, index) => (
             <WfoSubscriptionActionsMenuItem
               key={`r_${index}`}
               subscriptionAction={
@@ -183,10 +199,10 @@ export const WfoSubscriptionActions: FC<WfoSubscriptionActionsProps> = ({
 
   const fullItems = (
     <>
-      {isAllowed(SUBSCRIPTION_MODIFY + subscriptionId) && subscriptionActions?.modify && (
+      {isAllowed(SUBSCRIPTION_MODIFY + subscriptionId) && modifyActionItems.length > 0 && (
         <>
           <MenuBlock title={t('modify')} />
-          {subscriptionActions.modify.map((subscriptionAction, index) => (
+          {modifyActionItems.map((subscriptionAction, index) => (
             <WfoSubscriptionActionsMenuItem
               key={`m_${index}`}
               subscriptionAction={subscriptionAction}
@@ -201,10 +217,10 @@ export const WfoSubscriptionActions: FC<WfoSubscriptionActionsProps> = ({
         </>
       )}
       {compactItems}
-      {isAllowed(SUBSCRIPTION_TERMINATE + subscriptionId) && subscriptionActions?.terminate && (
+      {isAllowed(SUBSCRIPTION_TERMINATE + subscriptionId) && terminateActionItems.length > 0 && (
         <>
           <MenuBlock title={t('terminate')} />
-          {subscriptionActions.terminate.map((subscriptionAction, index) => (
+          {terminateActionItems.map((subscriptionAction, index) => (
             <WfoSubscriptionActionsMenuItem
               key={`t_${index}`}
               subscriptionAction={subscriptionAction}

package/src/components/WfoSubscription/WfoSubscriptionGeneralSections/WfoSubscriptionDetailSection.tsx

@@ -67,7 +67,7 @@ export const WfoSubscriptionDetailSection = ({ subscriptionDetail }: WfoSubscrip
       key: t('lastRunValidation'),
       value: (() => {
         const lastValidate = processes?.page
-          ?.filter((process) => process.workflowTarget.toLowerCase() === WorkflowTarget.VALIDATE.toLowerCase())
+          ?.filter((process) => process.workflowTarget === WorkflowTarget.VALIDATE)
           .slice(-1)[0];
 
         if (!lastValidate) {

package/src/components/WfoSubscription/styles.ts

@@ -54,6 +54,11 @@ export const getSubscriptionDetailStyles = ({ theme, isDarkModeActive }: WfoThem
     flexDirection: 'column',
     alignItems: 'flex-start',
   });
+
+  const processToggleStyles = css({
+    justifySelf: 'flex-end',
+  });
+
   return {
     rowStyle,
     labelCellStyle,
@@ -66,5 +71,6 @@ export const getSubscriptionDetailStyles = ({ theme, isDarkModeActive }: WfoThem
     productBlockTreeWidth,
     customerDescriptionsCustomerNameStyle,
     customerDescriptionsFormStyle,
+    processToggleStyles,
   };
 };

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

@@ -59,8 +59,7 @@ export const flattenSubscriptionActionProps = (action?: SubscriptionAction | nul
 };
 
 export const getWorkflowTargetColor = (workflowTarget: WorkflowTarget, theme: EuiThemeComputed) => {
-  // Data returned from graphql can't always be depended on to be lowercase
-  switch (workflowTarget.toLocaleLowerCase()) {
+  switch (workflowTarget) {
     case WorkflowTarget.CREATE:
       return theme.colors.textSuccess;
     case WorkflowTarget.MODIFY:
@@ -78,8 +77,7 @@ export const getWorkflowTargetColor = (workflowTarget: WorkflowTarget, theme: Eu
 };
 
 export const getWorkflowTargetIconContent = (workflowTarget: WorkflowTarget) => {
-  // Data returned from graphql can't always be depended on to be lowercase
-  switch (workflowTarget.toLocaleLowerCase()) {
+  switch (workflowTarget) {
     case WorkflowTarget.CREATE:
       return 'C';
     case WorkflowTarget.SYSTEM:

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

@@ -19,7 +19,6 @@ export const WfoExpandingSearchRow = ({ score, matchingFields }: WfoExpandingSea
 
   if (!matchingFields || matchingFields.length === 0) return null;
 
-  // Note: The row is shown on hover by the row above is as configured in the table component expandableRow config
   return (
     <tr css={hideExpandedRowStyle}>
       <td colSpan={999} css={expandingSearchRowStyles}>

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