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

package/package.json

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

@@ -80,6 +80,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 +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;
@@ -111,6 +112,7 @@ export const WfoStructuredSearchTable = <T extends object>({
   tableColumnConfig,
   defaultHiddenColumns = [],
   defaultShowMatchDetails = false,
+  defaultAdvancedNestedSearch = true,
   queryText,
   localStorageKey,
   exportDataIsLoading,
@@ -148,6 +150,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 +163,10 @@ export const WfoStructuredSearchTable = <T extends object>({
     setShowMatchDetails(defaultShowMatchDetails);
   }, [defaultShowMatchDetails]);
 
+  useEffect(() => {
+    setAdvancedNestedSearch(defaultAdvancedNestedSearch);
+  }, [defaultAdvancedNestedSearch]);
+
   useEffect(() => {
     if (filterString) {
       setIsFilterBuilderVisible(true);
@@ -199,10 +206,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 +218,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 +237,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 +292,7 @@ export const WfoStructuredSearchTable = <T extends object>({
             handleSearch={handleSearch}
             onToggleFilterBuilder={setIsFilterBuilderVisible}
             prefilledFieldOptions={prefilledFieldOptions}
+            useAdvancedNestedSearch={advancedNestedSearch}
           />
         </>
       )}
@@ -290,6 +311,7 @@ export const WfoStructuredSearchTable = <T extends object>({
         dataSorting={dataSorting}
         data={data}
         isLoading={isLoading}
+        loadingSkeletonRowCount={pageSize}
         {...tableProps}
       />
 
@@ -323,6 +345,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 +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>
                 </>
               )}

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

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

@@ -13,6 +13,7 @@ import { DEFAULT_PAGE_SIZES } from '../utils/constants';
 import { getPageCount } from '../utils/tableUtils';
 import { WfoTableDataRows } from './WfoTableDataRows';
 import { WfoTableHeaderRow } from './WfoTableHeaderRow';
+import { WfoTableSkeletonRows } from './WfoTableSkeletonRows';
 import { getWfoTableStyles } from './styles';
 import { getColumnWidthsFromConfig, getSortedVisibleColumns, usePageIndexBoundsGuard } from './utils';
 
@@ -78,6 +79,7 @@ export type WfoTableProps<T extends object> = {
   hiddenColumns?: TableColumnKeys<T>;
   columnOrder?: TableColumnKeys<T>;
   isLoading?: boolean;
+  loadingSkeletonRowCount?: number;
   dataSorting?: WfoDataSorting<T>[];
   rowExpandingConfiguration?: {
     uniqueRowId: keyof WfoTableColumnConfig<T>;
@@ -106,6 +108,7 @@ export const WfoTable = <T extends object>({
   hiddenColumns = [],
   columnOrder = [],
   isLoading = false,
+  loadingSkeletonRowCount,
   dataSorting = [],
   rowExpandingConfiguration,
   showExpandedRows = false,
@@ -125,6 +128,8 @@ export const WfoTable = <T extends object>({
   const dataLength = data.length;
   usePageIndexBoundsGuard({ dataLength, isLoading, pagination });
 
+  const showLoadingSkeleton = !!loadingSkeletonRowCount && isLoading && dataLength === 0;
+
   const parentRef = useRef<HTMLDivElement>(null);
 
   const columnConfigWithFiller: WfoTableColumnConfig<T> =
@@ -192,6 +197,77 @@ export const WfoTable = <T extends object>({
   const virtualTrHeight = virtualItems[0]?.start ?? 0;
   const bottomSpacerHeight = totalSize - lastVirtualItemEnd;
 
+  const WfoTableBody = () => {
+    if (showLoadingSkeleton) {
+      return (
+        <tbody css={bodyLoadingStyle} aria-busy={true}>
+          <WfoTableSkeletonRows
+            rowCount={loadingSkeletonRowCount}
+            columnConfig={configWithLocalWidths}
+            hiddenColumns={hiddenColumns}
+            columnOrder={columnOrder}
+          />
+        </tbody>
+      );
+    }
+
+    if (dataLength === 0) {
+      return (
+        <tbody css={isLoading && bodyLoadingStyle}>
+          <tr css={rowStyle}>
+            <td colSpan={sortedVisibleColumns.length} css={[cellStyle, emptyTableMessageStyle]}>
+              {isLoading ? t('loading') : t('noItemsFound')}
+            </td>
+          </tr>
+        </tbody>
+      );
+    }
+
+    if (isVirtualized && height) {
+      return (
+        <tbody>
+          <tr
+            style={{
+              height: virtualTrHeight,
+            }}
+          />
+
+          {virtualItems.map((virtualRow) => (
+            <WfoTableDataRows
+              key={virtualRow.key}
+              data={[data[virtualRow.index]]}
+              columnConfig={configWithLocalWidths}
+              hiddenColumns={hiddenColumns}
+              columnOrder={columnOrder}
+              rowExpandingConfiguration={rowExpandingConfiguration}
+              showExpandedRows={showExpandedRows}
+              onRowClick={onRowClick}
+            />
+          ))}
+          <tr
+            style={{
+              height: bottomSpacerHeight,
+            }}
+          />
+        </tbody>
+      );
+    }
+
+    return (
+      <tbody css={isLoading && bodyLoadingStyle}>
+        <WfoTableDataRows
+          data={data}
+          columnConfig={configWithLocalWidths}
+          hiddenColumns={hiddenColumns}
+          columnOrder={columnOrder}
+          rowExpandingConfiguration={rowExpandingConfiguration}
+          showExpandedRows={showExpandedRows}
+          onRowClick={onRowClick}
+        />
+      </tbody>
+    );
+  };
+
   return (
     <>
       <div
@@ -214,52 +290,7 @@ export const WfoTable = <T extends object>({
               />
             </thead>
           }
-          {dataLength === 0 ?
-            <tbody css={isLoading && bodyLoadingStyle}>
-              <tr css={rowStyle}>
-                <td colSpan={sortedVisibleColumns.length} css={[cellStyle, emptyTableMessageStyle]}>
-                  {isLoading ? t('loading') : t('noItemsFound')}
-                </td>
-              </tr>
-            </tbody>
-          : isVirtualized && height ?
-            <tbody>
-              <tr
-                style={{
-                  height: virtualTrHeight,
-                }}
-              />
-
-              {virtualItems.map((virtualRow) => (
-                <WfoTableDataRows
-                  key={virtualRow.key}
-                  data={[data[virtualRow.index]]}
-                  columnConfig={configWithLocalWidths}
-                  hiddenColumns={hiddenColumns}
-                  columnOrder={columnOrder}
-                  rowExpandingConfiguration={rowExpandingConfiguration}
-                  showExpandedRows={showExpandedRows}
-                  onRowClick={onRowClick}
-                />
-              ))}
-              <tr
-                style={{
-                  height: bottomSpacerHeight,
-                }}
-              />
-            </tbody>
-          : <tbody css={isLoading && bodyLoadingStyle}>
-              <WfoTableDataRows
-                data={data}
-                columnConfig={configWithLocalWidths}
-                hiddenColumns={hiddenColumns}
-                columnOrder={columnOrder}
-                rowExpandingConfiguration={rowExpandingConfiguration}
-                showExpandedRows={showExpandedRows}
-                onRowClick={onRowClick}
-              />
-            </tbody>
-          }
+          {<WfoTableBody />}
         </table>
       </div>
       {pagination && (

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

@@ -0,0 +1,52 @@
+import React from 'react';
+
+import { EuiSkeletonText } from '@elastic/eui';
+
+import { useWithOrchestratorTheme } from '@/hooks';
+import { toOptionalArrayEntry } from '@/utils';
+
+import { ColumnType, WfoTableProps } from './WfoTable';
+import { getWfoTableStyles } from './styles';
+import { getSortedVisibleColumns } from './utils';
+
+export type WfoTableSkeletonRowsProps<T extends object> = Pick<
+  WfoTableProps<T>,
+  'columnConfig' | 'hiddenColumns' | 'columnOrder'
+> & {
+  rowCount: number;
+};
+
+export const WfoTableSkeletonRows = <T extends object>({
+  rowCount,
+  columnConfig,
+  hiddenColumns = [],
+  columnOrder = [],
+}: WfoTableSkeletonRowsProps<T>) => {
+  const { cellStyle, cellContentStyle, rowStyle, setWidth } = useWithOrchestratorTheme(getWfoTableStyles);
+
+  const sortedVisibleColumns = getSortedVisibleColumns(columnConfig, columnOrder, hiddenColumns);
+
+  return (
+    <>
+      {[...Array(rowCount)].map((_, rowIndex) => (
+        <tr key={`skeleton-row-${rowIndex}`} css={rowStyle}>
+          {sortedVisibleColumns.map(([key, columnConfig]) => (
+            <td
+              key={key}
+              css={[
+                ...toOptionalArrayEntry(cellStyle, !columnConfig.disableDefaultCellStyle),
+                setWidth(columnConfig.width),
+              ]}
+            >
+              {columnConfig.columnType === ColumnType.DATA && (
+                <div css={cellContentStyle}>
+                  <EuiSkeletonText lines={1} size="m" isLoading />
+                </div>
+              )}
+            </td>
+          ))}
+        </tr>
+      ))}
+    </>
+  );
+};

package/src/components/WfoTable/WfoTable/index.ts

@@ -11,6 +11,7 @@ export * from './WfoMultilineCell';
 export * from './WfoTable';
 export * from './WfoTableHeaderCell';
 export * from './WfoTableDataRows';
+export * from './WfoTableSkeletonRows';
 
 export * from './WfoTruncateCell';
 export * from './WfoDataCell';

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

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 
 import { useTranslations } from 'next-intl';
 
-import { EuiForm, EuiFormRow, EuiHorizontalRule, EuiSelect, EuiSpacer, EuiSwitch } from '@elastic/eui';
+import { EuiForm, EuiFormRow, EuiHorizontalRule, EuiSelect, EuiSpacer, EuiSwitch, useEuiScrollBar } from '@elastic/eui';
 
 import { WfoSettingsModal } from '@/components';
 import { getWfoTableSettingsModalStyles } from '@/components/WfoTable/WfoTableSettingsModal/styles';
@@ -37,7 +37,8 @@ export const TableSettingsModal = <T,>({
   extraSettings,
 }: TableSettingsModalProps<T>) => {
   const t = useTranslations('main');
-  const { formRowStyle, selectFieldStyle } = useWithOrchestratorTheme(getWfoTableSettingsModalStyles);
+  const { formRowStyle, columnsListStyle, selectFieldStyle } = useWithOrchestratorTheme(getWfoTableSettingsModalStyles);
+  const scrollBarStyle = useEuiScrollBar();
 
   const [columns, setColumns] = useState(tableConfig.columns);
   const [selectedPageSize, setSelectedPageSize] = useState(tableConfig.selectedPageSize);
@@ -72,22 +73,24 @@ export const TableSettingsModal = <T,>({
       }
     >
       <EuiForm>
-        {columns.map(({ field, name, isVisible }) => (
-          <div key={field.toString()}>
-            <EuiFormRow display="columnCompressed" label={name} css={formRowStyle}>
-              <EuiSwitch
-                showLabel={false}
-                label={name}
-                checked={isVisible}
-                onChange={() => {
-                  handleUpdateColumnVisibility(field);
-                }}
-                compressed
-              />
-            </EuiFormRow>
-            <EuiHorizontalRule margin="xs" />
-          </div>
-        ))}
+        <div css={[columnsListStyle, scrollBarStyle]}>
+          {columns.map(({ field, name, isVisible }) => (
+            <div key={field.toString()}>
+              <EuiFormRow display="columnCompressed" label={name} css={formRowStyle}>
+                <EuiSwitch
+                  showLabel={false}
+                  label={name}
+                  checked={isVisible}
+                  onChange={() => {
+                    handleUpdateColumnVisibility(field);
+                  }}
+                  compressed
+                />
+              </EuiFormRow>
+              <EuiHorizontalRule margin="xs" />
+            </div>
+          ))}
+        </div>
         <EuiSpacer size="xs" />
 
         <EuiFormRow css={formRowStyle} hasEmptyLabelSpace label={t('numberOfRows')} display="columnCompressed">

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

@@ -1,3 +1,4 @@
+import { transparentize } from '@elastic/eui';
 import { css } from '@emotion/react';
 
 import { WfoThemeHelpers } from '@/hooks';
@@ -13,8 +14,24 @@ export const getWfoTableSettingsModalStyles = (wfoThemeHelpers: WfoThemeHelpers)
     },
   });
 
+  const { theme } = wfoThemeHelpers;
+
+  const columnsListStyle = css({
+    maxHeight: theme.base * 16,
+    overflowY: 'auto',
+    paddingLeft: theme.base / 4,
+    marginBottom: theme.base / 2,
+    backgroundImage: `linear-gradient(to top, ${theme.colors.textGhost} ${theme.base}px, transparent),
+      radial-gradient(farthest-side at 50% 100%, ${transparentize(theme.colors.shadow, 0.24)}, transparent)`,
+    backgroundPosition: `center bottom, center bottom -${theme.base / 2}px`,
+    backgroundSize: `100% ${theme.base * 2}px, 100% ${theme.base}px`,
+    backgroundRepeat: 'no-repeat',
+    backgroundAttachment: 'local, scroll',
+  });
+
   return {
     formRowStyle,
+    columnsListStyle,
     selectFieldStyle: formFieldBaseStyle,
   };
 };

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

@@ -4,6 +4,7 @@ export type StoredTableConfig<T> = {
   hiddenColumns: TableColumnKeys<T>;
   selectedPageSize: number;
   showMatchDetails?: boolean;
+  advancedNestedSearch?: boolean;
 };
 
 export const isValidLocalStorageTableConfig = <T>(object: StoredTableConfig<T>): object is StoredTableConfig<T> =>

package/src/configuration/version.ts

@@ -1 +1 @@
-export const ORCHESTRATOR_UI_LIBRARY_VERSION = '8.8.1';
+export const ORCHESTRATOR_UI_LIBRARY_VERSION = '8.8.2';

package/src/hooks/useGetPydanticFormsConfig.tsx

@@ -163,11 +163,13 @@ const useGetComponentMatcherExtender = (): ComponentMatcherExtender => {
             isControlledElement: true,
           },
           matcher(field) {
+            const fieldOptions = field.arrayItem?.options;
+
             return (
               field.type === PydanticFormFieldType.ARRAY
-              && _.isArray(field.options)
-              && field.options?.length > 0
-              && field.options?.length <= 5
+              && _.isArray(fieldOptions)
+              && fieldOptions?.length > 0
+              && fieldOptions?.length <= 5
             );
           },
           validator: zodValidationPresets.multiSelect,