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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orchestrator-ui/orchestrator-ui-components",
-  "version": "8.7.3",
+  "version": "8.8.2",
   "license": "Apache-2.0",
   "description": "Library of UI Components used to display the workflow orchestrator frontend",
   "author": {
@@ -51,7 +51,7 @@
     "next-query-params": "^5.0.0",
     "object-hash": "^3.0.0",
     "prism-themes": "^1.9.0",
-    "pydantic-forms": "^3.0.1",
+    "pydantic-forms": "^3.1.0",
     "react-diff-view": "^3.2.0",
     "react-draggable": "^4.4.6",
     "react-querybuilder": "^8.18.0",
@@ -59,7 +59,8 @@
     "react-select": "^5.8.0",
     "scroll-into-view": "^1.16.2",
     "unidiff": "^1.0.4",
-    "use-query-params": "^2.2.2"
+    "use-query-params": "^2.2.2",
+    "zod": "^4.4.3"
   },
   "devDependencies": {
     "@elastic/eui": "^113.0.0",

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/WfoPydanticForm/fields/WfoMultiCheckboxField.tsx

@@ -24,7 +24,8 @@ export const WfoMultiCheckboxField: PydanticFormControlledElement = ({ pydanticF
 
   const [checkboxIdToSelectedMap, setCheckboxIdToSelectedMap] = useState<Record<string, boolean>>({});
 
-  const { options, id } = pydanticFormField;
+  const { arrayItem, id } = pydanticFormField;
+  const options = arrayItem?.options || [];
 
   const checkboxes = options?.map((option, index) => ({
     label: option.label,

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { FC, useEffect, useRef, useState } from 'react';
 import { FieldSelectorProps } from 'react-querybuilder';
 
 import { useTranslations } from 'next-intl';
@@ -7,7 +7,7 @@ import type { EuiComboBoxOptionOption } from '@elastic/eui';
 import { EuiComboBox } from '@elastic/eui';
 
 import { usePathAutocomplete } from '@/hooks';
-import { EntityKind, FieldToOperatorMap, PathInfo } from '@/types';
+import { EntityKind, PathInfo, WfoQueryBuilderContext } from '@/types';
 
 // react-querybuilder applies the `.rule` class to the rule container and `.rule-value` to
 // the value-editor cell (see `standardClassnames` in @react-querybuilder/core). We hop from
@@ -30,9 +30,13 @@ const focusValueEditorAfterRender = (searchInput: HTMLInputElement | null) => {
   });
 };
 
-export const WfoFieldSelector = ({ handleOnChange, disabled, rule, context }: FieldSelectorProps) => {
+interface WfoFieldSelectorProps extends Omit<FieldSelectorProps, 'context'> {
+  context: WfoQueryBuilderContext;
+}
+
+export const WfoFieldSelector: FC<WfoFieldSelectorProps> = ({ handleOnChange, disabled, rule, context }) => {
   const { field } = rule;
-  const prefilledFieldOptions: FieldToOperatorMap = context.prefilledFieldOptions;
+  const { useAdvancedNestedSearch, prefilledFieldOptions, onFieldSelected } = context;
   const [selectedValue, setSelectedValue] = useState<string>(field);
   const [searchInput, setSearchInput] = useState<HTMLInputElement | null>(null);
   const optionsRef = useRef<EuiComboBoxOptionOption<string>[]>([]);
@@ -43,13 +47,13 @@ export const WfoFieldSelector = ({ handleOnChange, disabled, rule, context }: Fi
     label: path,
   });
 
+  const isSelectablePath = (path: string) => useAdvancedNestedSearch || !path.includes('.');
+
   const getOptionsFromPathInfo = (pathInfos: PathInfo[]): EuiComboBoxOptionOption<string>[] => {
     const pathOptions: EuiComboBoxOptionOption<string>[] = [];
 
     pathInfos.forEach((pathInfo) => {
-      pathOptions.push(getOption(pathInfo.path));
-      // Adds more specific paths
-      pathInfo.availablePaths?.forEach((path) => {
+      [pathInfo.path, ...(pathInfo.availablePaths ?? [])].filter(isSelectablePath).forEach((path) => {
         pathOptions.push(getOption(path));
       });
     });
@@ -85,7 +89,7 @@ export const WfoFieldSelector = ({ handleOnChange, disabled, rule, context }: Fi
       ?? paths.find((path) => path.availablePaths?.includes(selectedValue));
     const operators = matchingPath?.operators ?? prefilledFieldOptions.get(selectedValue) ?? [];
 
-    context?.onFieldSelected?.(selectedValue, operators, matchingPath);
+    onFieldSelected(selectedValue, operators, matchingPath);
   };
 
   const handleFieldSelection = (selectedOptions: EuiComboBoxOptionOption<string>[]) => {

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

@@ -1,5 +1,11 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { FullOperator, QueryBuilder, type RuleGroupType, generateID } from 'react-querybuilder';
+import React, { type ComponentType, useEffect, useMemo, useRef, useState } from 'react';
+import {
+  type FieldSelectorProps,
+  FullOperator,
+  QueryBuilder,
+  type RuleGroupType,
+  generateID,
+} from 'react-querybuilder';
 import 'react-querybuilder/dist/query-builder.css';
 
 import { useTranslations } from 'next-intl';
@@ -10,7 +16,7 @@ import { SearchParams, WfoAutoExpandableTextArea, WfoTextAnchor } from '@/compon
 import { WfoCombinatorSelector } from '@/components/WfoTable/WfoStructuredSearchTable/WfoCombinatorSelector';
 import { useFieldsPathInfo, useWithOrchestratorTheme } from '@/hooks';
 import { EntityKind, OperatorDisplay } from '@/types';
-import type { FieldToOperatorMap, PathInfo } from '@/types';
+import type { FieldToOperatorMap, PathInfo, WfoQueryBuilderContext } from '@/types';
 
 import { WfoFieldSelector } from './WfoFieldSelector';
 import { WfoInlineCombinator } from './WfoInlineCombinator';
@@ -65,6 +71,7 @@ interface WfoFilterBuilderProps {
   handleSearch: (searchParams?: SearchParams) => void;
   onToggleFilterBuilder: (isVisible: boolean) => void;
   prefilledFieldOptions: FieldToOperatorMap;
+  useAdvancedNestedSearch?: boolean;
 }
 
 const initialRuleGroup: RuleGroupType = {
@@ -87,6 +94,7 @@ export const WfoFilterBuilder = ({
   handleSearch,
   prefilledFieldOptions,
   onToggleFilterBuilder,
+  useAdvancedNestedSearch = true,
 }: WfoFilterBuilderProps) => {
   const mapOperatorsToRQBOperatorOptions = (operators?: string[]): FullOperator[] => {
     return (operators ?? []).map((operator) => {
@@ -143,6 +151,14 @@ export const WfoFilterBuilder = ({
   );
   const resolvedFieldsPathInfo = useFieldsPathInfo(unresolvedFields, EntityKind.SUBSCRIPTION);
 
+  const queryBuilderContext: WfoQueryBuilderContext = {
+    onFieldSelected: handleFieldSelected,
+    prefilledFieldOptions,
+    fieldPathInfoMap,
+    onValueEditorEnter: handleValueEditorEnter,
+    useAdvancedNestedSearch,
+  };
+
   useEffect(() => {
     resolvedFieldsPathInfo.forEach((pathInfo, field) => {
       if (pathInfo && !fieldPathInfoMap.has(field)) {
@@ -162,18 +178,15 @@ export const WfoFilterBuilder = ({
               latestRuleGroupRef.current = ruleGroup;
               onUpdateQueryBuilder(ruleGroup);
             }}
-            context={{
-              onFieldSelected: handleFieldSelected,
-              prefilledFieldOptions,
-              fieldPathInfoMap,
-              onValueEditorEnter: handleValueEditorEnter,
-            }}
+            context={queryBuilderContext}
             getOperators={(field) => {
               const operators = fieldToOperatorMap.get(field);
               return mapOperatorsToRQBOperatorOptions(operators);
             }}
             controlElements={{
-              fieldSelector: WfoFieldSelector,
+              // WfoFieldSelector requires the context this QueryBuilder always provides,
+              // while react-querybuilder declares it optional — hence the cast.
+              fieldSelector: WfoFieldSelector as ComponentType<FieldSelectorProps>,
               operatorSelector: WfoOperatorSelector,
               valueEditor: WfoValueEditor,
               ruleGroup: WfoRuleGroup,

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,8 @@ export type WfoStructuredSearchTableProps<T extends object> = Omit<
   tableColumnConfig: WfoStructuredSearchTableColumnConfig<T>;
   rowExpandingConfiguration: WfoTableProps<T>['rowExpandingConfiguration'];
   defaultHiddenColumns?: TableColumnKeys<T>;
+  defaultShowMatchDetails?: boolean;
+  defaultAdvancedNestedSearch?: boolean;
   queryText?: string;
   localStorageKey: string;
   exportDataIsLoading?: boolean;
@@ -91,7 +102,7 @@ export type WfoStructuredSearchTableProps<T extends object> = Omit<
   onUpdateQueryBuilder: (ruleGroup: RuleGroupType | false) => void;
   handleSearch: (searchParams?: SearchParams) => void;
   pageSize: number;
-  setPageSize: React.Dispatch<React.SetStateAction<number>>;
+  setPageSize: (updatedPageSize: number) => void;
   totalItems: number | false;
   hasNextPage: boolean;
   prefilledFieldOptions: FieldToOperatorMap;
@@ -100,6 +111,8 @@ export type WfoStructuredSearchTableProps<T extends object> = Omit<
 export const WfoStructuredSearchTable = <T extends object>({
   tableColumnConfig,
   defaultHiddenColumns = [],
+  defaultShowMatchDetails = false,
+  defaultAdvancedNestedSearch = true,
   queryText,
   localStorageKey,
   exportDataIsLoading,
@@ -136,6 +149,8 @@ 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 [advancedNestedSearch, setAdvancedNestedSearch] = useState(defaultAdvancedNestedSearch);
   const t = useTranslations('common');
 
   useEffect(() => {
@@ -144,6 +159,14 @@ export const WfoStructuredSearchTable = <T extends object>({
     }
   }, [defaultHiddenColumns]);
 
+  useEffect(() => {
+    setShowMatchDetails(defaultShowMatchDetails);
+  }, [defaultShowMatchDetails]);
+
+  useEffect(() => {
+    setAdvancedNestedSearch(defaultAdvancedNestedSearch);
+  }, [defaultAdvancedNestedSearch]);
+
   useEffect(() => {
     if (filterString) {
       setIsFilterBuilderVisible(true);
@@ -182,6 +205,30 @@ export const WfoStructuredSearchTable = <T extends object>({
     setTableConfigToLocalStorage(localStorageKey, {
       hiddenColumns: updatedHiddenColumns,
       selectedPageSize: updatedTableConfig.selectedPageSize,
+      showMatchDetails,
+      advancedNestedSearch,
+    });
+  };
+
+  // The toggles apply live, so persist them 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,
+      advancedNestedSearch,
+    });
+  };
+
+  const handleToggleAdvancedNestedSearch = (checked: boolean) => {
+    setAdvancedNestedSearch(checked);
+    setTableConfigToLocalStorage(localStorageKey, {
+      hiddenColumns,
+      selectedPageSize: pageSize ?? DEFAULT_PAGE_SIZE,
+      showMatchDetails,
+      advancedNestedSearch: checked,
     });
   };
 
@@ -189,6 +236,8 @@ export const WfoStructuredSearchTable = <T extends object>({
     const defaultTableConfig = getDefaultTableConfig<T>(localStorageKey);
     setHiddenColumns(defaultTableConfig.hiddenColumns);
     setPageSize(defaultTableConfig.selectedPageSize);
+    setShowMatchDetails(defaultTableConfig.showMatchDetails ?? false);
+    setAdvancedNestedSearch(defaultTableConfig.advancedNestedSearch ?? false);
     setShowTableSettingsModal(false);
     clearTableConfigFromLocalStorage(localStorageKey);
   };
@@ -243,6 +292,7 @@ export const WfoStructuredSearchTable = <T extends object>({
             handleSearch={handleSearch}
             onToggleFilterBuilder={setIsFilterBuilderVisible}
             prefilledFieldOptions={prefilledFieldOptions}
+            useAdvancedNestedSearch={advancedNestedSearch}
           />
         </>
       )}
@@ -255,11 +305,13 @@ export const WfoStructuredSearchTable = <T extends object>({
         columnConfig={tableColumnsWithControlColumns}
         hiddenColumns={hiddenColumns}
         rowExpandingConfiguration={rowExpandingConfiguration}
+        showExpandedRows={showMatchDetails}
         onUpdateDataSorting={onUpdateDataSorting}
         onUpdateDataSearch={handleColumnFilterSearch}
         dataSorting={dataSorting}
         data={data}
         isLoading={isLoading}
+        loadingSkeletonRowCount={pageSize}
         {...tableProps}
       />
 
@@ -284,6 +336,24 @@ 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('advancedNestedSearch')} display="columnCompressed">
+                <EuiSwitch
+                  showLabel={false}
+                  label={t('advancedNestedSearch')}
+                  checked={advancedNestedSearch}
+                  onChange={(event) => handleToggleAdvancedNestedSearch(event.target.checked)}
+                  compressed
+                />
+              </EuiFormRow>
               <EuiFormRow label={t('retrieval')} display="columnCompressed">
                 <EuiSelect
                   options={[
@@ -301,7 +371,7 @@ export const WfoStructuredSearchTable = <T extends object>({
                 <>
                   <EuiSpacer size="m" />
                   <EuiButton isLoading={exportDataIsLoading} onClick={() => onExportData()} fullWidth>
-                    {t('export')}
+                    {totalItems ? t('exportRows', { numberOfRows: totalItems }) : t('export')}
                   </EuiButton>
                 </>
               )}