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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orchestrator-ui/orchestrator-ui-components",
-  "version": "8.8.1",
+  "version": "8.9.0",
   "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/WfoProductStatusBadge/WfoProductStatusBadge.tsx

@@ -8,16 +8,13 @@ export type WfoProductStatusBadgeProps = {
   status: ProductLifecycleStatus;
 };
 
-const normalizedStatus = (status: ProductLifecycleStatus): string => status.toLowerCase().replace(/_/g, ' ');
-
 export const WfoProductStatusBadge: FC<WfoProductStatusBadgeProps> = ({ status }) => {
   const { theme, toSecondaryColor } = useOrchestratorTheme();
 
-  const productLifeCycleStatus = normalizedStatus(status);
   const getBadgeColorFromStatus = () => {
     const { primary, borderBaseSubdued, textPrimary, textParagraph, success, textSuccess } = theme.colors;
 
-    switch (productLifeCycleStatus) {
+    switch (status) {
       case ProductLifecycleStatus.ACTIVE:
         return {
           badgeColor: toSecondaryColor(success),
@@ -41,7 +38,7 @@ export const WfoProductStatusBadge: FC<WfoProductStatusBadgeProps> = ({ status }
 
   return (
     <WfoBadge textColor={textColor} color={badgeColor}>
-      {productLifeCycleStatus}
+      {status}
     </WfoBadge>
   );
 };

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/WfoStartButton/WfoStartButtonComboBox.tsx

@@ -1,12 +1,11 @@
 import React, { useState } from 'react';
 
-import { capitalize } from 'lodash';
-
 import { EuiButton, EuiButtonEmpty, EuiFlexGroup, EuiPopover, EuiSelectable, EuiSpacer } from '@elastic/eui';
 
 import { useGetOrchestratorConfig, useOrchestratorTheme, useWithOrchestratorTheme } from '@/hooks';
 import { WfoChevronDown, WfoPlusCircleFill } from '@/icons';
 import { ProductLifecycleStatus, StartComboBoxOption } from '@/types';
+import { getProductLifecycleStatus } from '@/utils';
 
 import { getStyles } from './styles';
 
@@ -16,12 +15,8 @@ export type WfoStartButtonComboBoxProps = {
   onOptionChange: (selectedOption: StartComboBoxOption) => void;
   isProcess: boolean;
   className?: string;
-  selectedProductStatus?: ProductLifecycleStatus | string;
-  setSelectedProductStatus?: (status: ProductLifecycleStatus | string) => void;
-};
-
-const formatProductStatusLabel = (productStatus: string) => {
-  return capitalize(productStatus.replace(/_/g, ' '));
+  selectedProductStatus?: ProductLifecycleStatus;
+  setSelectedProductStatus?: (status: ProductLifecycleStatus) => void;
 };
 
 export const WfoStartButtonComboBox = ({
@@ -67,7 +62,7 @@ export const WfoStartButtonComboBox = ({
                 iconType={() => <WfoChevronDown height={18} width={18} color="currentColor" />}
                 onClick={() => setFilterPopoverOpen((v) => !v)}
               >
-                <b>{formatProductStatusLabel(selectedProductStatus ?? ProductLifecycleStatus.ACTIVE)}</b>
+                <b>{selectedProductStatus ?? ProductLifecycleStatus.ACTIVE}</b>
               </EuiButtonEmpty>
             }
             isOpen={isFilterPopoverOpen}
@@ -80,11 +75,11 @@ export const WfoStartButtonComboBox = ({
                   key={productStatus}
                   size="xs"
                   onClick={() => {
-                    setSelectedProductStatus(productStatus.toUpperCase());
+                    setSelectedProductStatus(getProductLifecycleStatus(productStatus));
                     setFilterPopoverOpen(false);
                   }}
                 >
-                  {formatProductStatusLabel(productStatus ?? ProductLifecycleStatus.ACTIVE)}
+                  {productStatus ?? ProductLifecycleStatus.ACTIVE}
                 </EuiButtonEmpty>
               </div>
             ))}

package/src/components/WfoStartButton/WfoStartWorkflowComboBox.tsx

@@ -14,7 +14,7 @@ export const WfoStartWorkflowButtonComboBox = () => {
   const router = useRouter();
   const t = useTranslations('common');
   const { isEngineRunningNow } = useCheckEngineStatus();
-  const [selectedProductStatus, setSelectedProductStatus] = React.useState<ProductLifecycleStatus | string>(
+  const [selectedProductStatus, setSelectedProductStatus] = React.useState<ProductLifecycleStatus>(
     ProductLifecycleStatus.ACTIVE,
   );
 

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

@@ -12,13 +12,14 @@ import {
   WfoInSyncField,
   WfoPopover,
 } from '@/components';
+import { getActionItemsByTarget } from '@/components/WfoSubscription';
 import { WfoSubscriptionActionsMenuItem } from '@/components/WfoSubscription/WfoSubscriptionActions/WfoSubscriptionActionsMenuItem';
 import { useActiveProcess } from '@/components/WfoSubscription/WfoSubscriptionActions/utils';
 import { PolicyResource } from '@/configuration/policy-resources';
 import { useOrchestratorTheme, usePolicy } from '@/hooks';
 import { WfoDotsHorizontal } from '@/icons/WfoDotsHorizontal';
 import { useGetSubscriptionActionsQuery, useGetSubscriptionDetailQuery, useStartProcessMutation } from '@/rtk';
-import { SubscriptionAction, WorkflowTarget } from '@/types';
+import { WorkflowTarget } from '@/types';
 
 type MenuBlockProps = {
   title: string;
@@ -129,21 +130,10 @@ 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 validateActionItems = getActionItemsByTarget(WorkflowTarget.VALIDATE, subscriptionActions);
+  const reconcileActionItems = getActionItemsByTarget(WorkflowTarget.RECONCILE, subscriptionActions);
+  const modifyActionItems = getActionItemsByTarget(WorkflowTarget.MODIFY, subscriptionActions);
+  const terminateActionItems = getActionItemsByTarget(WorkflowTarget.TERMINATE, subscriptionActions);
 
   const compactItems = (
     <>

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

@@ -5,11 +5,13 @@ import {
   ProcessStatus,
   ProductBlockInstance,
   SubscriptionAction,
+  SubscriptionActions,
   SubscriptionDetailProcess,
   WorkflowTarget,
 } from '../../../types';
 import {
   flattenSubscriptionActionProps,
+  getActionItemsByTarget,
   getFieldFromProductBlockInstanceValues,
   getLastUncompletedProcess,
   getLatestTaskDate,
@@ -470,6 +472,61 @@ describe('mapProductBlockInstancesToEuiSelectableOptions', () => {
   });
 });
 
+describe('getActionItemsByTarget', () => {
+  const modifyAction: SubscriptionAction = {
+    name: 'modify_note',
+    description: 'Modify note',
+  };
+  const terminateAction: SubscriptionAction = {
+    name: 'terminate',
+    description: 'Terminate subscription',
+  };
+
+  const subscriptionActions: SubscriptionActions = {
+    [WorkflowTarget.MODIFY]: [modifyAction],
+    [WorkflowTarget.TERMINATE]: [terminateAction],
+    [WorkflowTarget.SYSTEM]: [],
+    [WorkflowTarget.VALIDATE]: [],
+    [WorkflowTarget.RECONCILE]: [],
+  };
+
+  it('returns actions for the given target with uppercase keys', () => {
+    expect(getActionItemsByTarget(WorkflowTarget.MODIFY, subscriptionActions)).toEqual([modifyAction]);
+    expect(getActionItemsByTarget(WorkflowTarget.TERMINATE, subscriptionActions)).toEqual([terminateAction]);
+  });
+
+  it('falls back to lowercase keys returned by core versions 5.2 and lower', () => {
+    const lowercaseActions = {
+      modify: [modifyAction],
+      terminate: [terminateAction],
+    } as unknown as SubscriptionActions;
+
+    expect(getActionItemsByTarget(WorkflowTarget.MODIFY, lowercaseActions)).toEqual([modifyAction]);
+    expect(getActionItemsByTarget(WorkflowTarget.TERMINATE, lowercaseActions)).toEqual([terminateAction]);
+  });
+
+  it('prefers the uppercase key when both casings are present', () => {
+    const mixedActions = {
+      [WorkflowTarget.MODIFY]: [modifyAction],
+      modify: [terminateAction],
+    } as unknown as SubscriptionActions;
+
+    expect(getActionItemsByTarget(WorkflowTarget.MODIFY, mixedActions)).toEqual([modifyAction]);
+  });
+
+  it('returns an empty array when the target is missing in either casing', () => {
+    const actionsWithoutValidate = {
+      [WorkflowTarget.MODIFY]: [modifyAction],
+    } as unknown as SubscriptionActions;
+
+    expect(getActionItemsByTarget(WorkflowTarget.VALIDATE, actionsWithoutValidate)).toEqual([]);
+  });
+
+  it('returns an empty array when subscriptionActions is undefined', () => {
+    expect(getActionItemsByTarget(WorkflowTarget.MODIFY, undefined)).toEqual([]);
+  });
+});
+
 describe('parseErrorDetail', () => {
   it('parses a single UUID inside brackets', () => {
     const input = "Subscription 123 has still failed processes with id's: ['11111111-1111-1111-1111-111111111111']";

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

@@ -9,6 +9,7 @@ import {
   ProductBlockInstance,
   SortOrder,
   SubscriptionAction,
+  SubscriptionActions,
   SubscriptionDetailProcess,
   SubscriptionRelation,
   WorkflowTarget,
@@ -189,3 +190,17 @@ export const mapProductBlockInstancesToEuiSelectableOptions = (
     },
   }));
 };
+
+export const getActionItemsByTarget = (
+  workflowTarget: WorkflowTarget,
+  subscriptionActions?: SubscriptionActions,
+): SubscriptionAction[] => {
+  // https://github.com/workfloworchestrator/orchestrator-core/issues/1820 will align the WorkflowTarget enum and make it
+  // uppercase. 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()] ?? [];
+};

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

@@ -0,0 +1,59 @@
+import React from 'react';
+
+import { useTranslations } from 'next-intl';
+
+import { EuiText } from '@elastic/eui';
+
+import { WfoInformationModal } from '@/components';
+
+export type WfoSearchHelpModalProps = {
+  onClose: () => void;
+};
+
+export const WfoSearchHelpModal = ({ onClose }: WfoSearchHelpModalProps) => {
+  const t = useTranslations('search.page');
+  const tCommon = useTranslations('common');
+
+  return (
+    <WfoInformationModal title={t('help.title')} onClose={onClose}>
+      <EuiText size="s">
+        <p>
+          <strong>{t('help.searchFieldTitle')}</strong> - {t('help.searchFieldDescription')}
+        </p>
+
+        <h4>{t('help.filterTitle')}</h4>
+        <p>{t('help.filterIntro')}</p>
+        <ul>
+          <li>
+            <strong>{t('addRule')}</strong> - {t('help.addRuleDescription')}
+          </li>
+          <li>
+            <strong>{t('addGroup')}</strong> - {t('help.addGroupDescription')}
+          </li>
+        </ul>
+
+        <h4>{t('help.quickFilterTitle')}</h4>
+        <p>{t('help.quickFilterDescription')}</p>
+
+        <h4>{t('help.matchingRowTitle')}</h4>
+        <p>{t('help.matchingRowDescription')}</p>
+
+        <h4>{t('help.tableSettingsTitle')}</h4>
+        <ul>
+          <li>
+            <strong>{tCommon('showMatchDetails')}</strong> - {t('help.showMatchDetailsDescription')}
+          </li>
+          <li>
+            <strong>{tCommon('retrieval')}</strong> - {t('help.retrievalDescription')}
+          </li>
+          <li>
+            <strong>{tCommon('export')}</strong> - {t('help.exportDescription')}
+          </li>
+          <li>
+            <strong>{t('help.advancedNestedSearchLabel')}</strong> - {t('help.advancedNestedSearchDescription')}
+          </li>
+        </ul>
+      </EuiText>
+    </WfoInformationModal>
+  );
+};

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

@@ -3,16 +3,7 @@ import type { RuleGroupType } from 'react-querybuilder';
 
 import { useTranslations } from 'next-intl';
 
-import {
-  EuiButton,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiFormRow,
-  EuiSelect,
-  EuiSpacer,
-  EuiSwitch,
-  EuiText,
-} from '@elastic/eui';
+import { EuiButton, EuiFlexGroup, EuiFlexItem, EuiFormRow, EuiSelect, EuiSpacer, EuiSwitch } from '@elastic/eui';
 
 import {
   DEFAULT_PAGE_SIZE,
@@ -45,6 +36,7 @@ import { getDefaultTableConfig } from '@/utils';
 import { ColumnType, WfoTable, WfoTableProps } from '../WfoTable';
 import { WfoFilterBuilder } from './WfoFilterBuilder';
 import { WfoSearchFieldWithActions } from './WfoSearchFieldWithActions';
+import { WfoSearchHelpModal } from './WfoSearchHelpModal';
 import { getWfoStructuredSearchTableStyles } from './styles';
 import { buildColumnFilter } from './utils';
 
@@ -80,6 +72,7 @@ export type WfoStructuredSearchTableProps<T extends object> = Omit<
   rowExpandingConfiguration: WfoTableProps<T>['rowExpandingConfiguration'];
   defaultHiddenColumns?: TableColumnKeys<T>;
   defaultShowMatchDetails?: boolean;
+  defaultAdvancedNestedSearch?: boolean;
   queryText?: string;
   localStorageKey: string;
   exportDataIsLoading?: boolean;
@@ -101,7 +94,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;
@@ -111,6 +104,7 @@ export const WfoStructuredSearchTable = <T extends object>({
   tableColumnConfig,
   defaultHiddenColumns = [],
   defaultShowMatchDetails = false,
+  defaultAdvancedNestedSearch = true,
   queryText,
   localStorageKey,
   exportDataIsLoading,
@@ -148,6 +142,7 @@ export const WfoStructuredSearchTable = <T extends object>({
   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(() => {
@@ -160,6 +155,10 @@ export const WfoStructuredSearchTable = <T extends object>({
     setShowMatchDetails(defaultShowMatchDetails);
   }, [defaultShowMatchDetails]);
 
+  useEffect(() => {
+    setAdvancedNestedSearch(defaultAdvancedNestedSearch);
+  }, [defaultAdvancedNestedSearch]);
+
   useEffect(() => {
     if (filterString) {
       setIsFilterBuilderVisible(true);
@@ -199,10 +198,11 @@ export const WfoStructuredSearchTable = <T extends object>({
       hiddenColumns: updatedHiddenColumns,
       selectedPageSize: updatedTableConfig.selectedPageSize,
       showMatchDetails,
+      advancedNestedSearch,
     });
   };
 
-  // The toggle applies live, so persist it immediately alongside the currently committed
+  // 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);
@@ -210,6 +210,17 @@ export const WfoStructuredSearchTable = <T extends object>({
       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,
     });
   };
 
@@ -218,6 +229,7 @@ export const WfoStructuredSearchTable = <T extends object>({
     setHiddenColumns(defaultTableConfig.hiddenColumns);
     setPageSize(defaultTableConfig.selectedPageSize);
     setShowMatchDetails(defaultTableConfig.showMatchDetails ?? false);
+    setAdvancedNestedSearch(defaultTableConfig.advancedNestedSearch ?? false);
     setShowTableSettingsModal(false);
     clearTableConfigFromLocalStorage(localStorageKey);
   };
@@ -272,6 +284,7 @@ export const WfoStructuredSearchTable = <T extends object>({
             handleSearch={handleSearch}
             onToggleFilterBuilder={setIsFilterBuilderVisible}
             prefilledFieldOptions={prefilledFieldOptions}
+            useAdvancedNestedSearch={advancedNestedSearch}
           />
         </>
       )}
@@ -290,6 +303,7 @@ export const WfoStructuredSearchTable = <T extends object>({
         dataSorting={dataSorting}
         data={data}
         isLoading={isLoading}
+        loadingSkeletonRowCount={pageSize}
         {...tableProps}
       />
 
@@ -323,6 +337,15 @@ export const WfoStructuredSearchTable = <T extends object>({
                   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={[
@@ -340,7 +363,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>
                 </>
               )}
@@ -349,13 +372,7 @@ export const WfoStructuredSearchTable = <T extends object>({
         />
       )}
 
-      {showInformationModal && (
-        <WfoInformationModal title={t('searchModalTitle')} onClose={() => setShowInformationModal(false)}>
-          <EuiText>
-            <p>TODO: Info about searching</p>
-          </EuiText>
-        </WfoInformationModal>
-      )}
+      {showInformationModal && <WfoSearchHelpModal onClose={() => setShowInformationModal(false)} />}
 
       {rowDetailData && (
         <WfoInformationModal title={'TODO: Information modal title'} onClose={() => setRowDetailModalData(undefined)}>

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

@@ -10,6 +10,7 @@ import { EuiButtonGroup, EuiDatePicker, EuiFieldNumber, EuiFieldText } from '@el
 import { WfoRangeEditor } from '@/components/WfoTable/WfoStructuredSearchTable/WfoRangeEditor';
 import { getWfoStructuredSearchTableStyles } from '@/components/WfoTable/WfoStructuredSearchTable/styles';
 import { useWithOrchestratorTheme } from '@/hooks';
+import type { WfoQueryBuilderContext } from '@/types';
 
 export interface EditorInputFieldProps<T = string> {
   handleOnChange: ValueEditorProps['handleOnChange'];
@@ -176,7 +177,8 @@ export const WfoValueEditor = ({
     return TextEditor;
   };
 
-  const fieldPathInfoMap = context?.fieldPathInfoMap;
+  const queryBuilderContext: WfoQueryBuilderContext | undefined = context;
+  const fieldPathInfoMap = queryBuilderContext?.fieldPathInfoMap;
 
   const fieldInfo = fieldPathInfoMap && fieldPathInfoMap.has(fieldName) ? fieldPathInfoMap.get(fieldName) : undefined;
   const uiFieldType = fieldInfo?.ui_types?.[0] || UiFieldType.text;
@@ -198,7 +200,7 @@ export const WfoValueEditor = ({
     // 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?.();
+    queryBuilderContext?.onValueEditorEnter();
   };
 
   // react-querybuilder delivers the standard `rule-value` class via this prop; the wrapper