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

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.9.0';

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,

package/src/hooks/useSearch.ts

@@ -25,7 +25,7 @@ export const useSearch = (
 ) => {
   const [results, setResults] = useState<PaginatedSearchResults>({ ...emptyResult });
 
-  const [triggerSearch, { isLoading, isError }] = useLazySearchQuery();
+  const [triggerSearch, { isFetching, isError }] = useLazySearchQuery();
 
   useEffect(() => {
     const queryText = typeof query === 'string' ? query : query.text?.trim() || '';
@@ -75,7 +75,7 @@ export const useSearch = (
 
   return {
     results,
-    loading: isLoading,
+    loading: isFetching,
     error: isError ? 'Search failed' : null,
     setResults,
   };

package/src/hooks/useStoredTableConfig.ts

@@ -24,6 +24,7 @@ export const useStoredTableConfig = <T>(localeStorageKey: string) => {
         tableConfig.hiddenColumns = storedConfig.hiddenColumns;
         tableConfig.selectedPageSize = storedConfig.selectedPageSize;
         tableConfig.showMatchDetails = storedConfig.showMatchDetails;
+        tableConfig.advancedNestedSearch = storedConfig.advancedNestedSearch;
       }
       return tableConfig;
     } catch {

package/src/messages/en-GB.json

@@ -1,11 +1,13 @@
 {
   "common": {
+    "advancedNestedSearch": "Advanced nested search",
     "applyFilter": "Apply filter",
     "createFilter": "Create a filter",
     "deselect": "Deselect",
     "editColumns": "Edit columns",
     "errorMessage": "An error occurred",
     "export": "Export",
+    "exportRows": "Export {numberOfRows, plural, one {# row} other {# rows}}",
     "insyncFalse": "out-of-sync",
     "insyncTrue": "in-sync",
     "loadMore": "Load more",
@@ -337,6 +339,25 @@
       "fromDate": "From date",
       "fromNumber": "From",
       "groupLabel": "Group",
+      "help": {
+        "addGroupDescription": "adds a new group with two rules inside. A group has its own AND/OR choice.",
+        "addRuleDescription": "adds a new rule to the current group. A rule consists of a field, an operator and a value.",
+        "advancedNestedSearchDescription": "when enabled, the field dropdown in the filter also offers the full nested paths. When disabled, only the paths that match the table columns are shown.",
+        "advancedNestedSearchLabel": "Advanced nested search",
+        "exportDescription": "downloads a CSV file with only the rows that match the current filter.",
+        "filterIntro": "Use 'Create a filter' to build a structured filter out of rules.",
+        "filterTitle": "Filter rules and grouping",
+        "matchingRowDescription": "Hover over a row to reveal an extra row with information about the matched item: the fields that matched the search text and the confidence of the match.",
+        "matchingRowTitle": "Matching row",
+        "quickFilterDescription": "You can also click a column header and enter a value there - this adds a new rule for that column to the filter.",
+        "quickFilterTitle": "Quick filter from a column header",
+        "retrievalDescription": "choose how results are retrieved: Auto, Fuzzy, Semantic or Hybrid.",
+        "searchFieldDescription": "Searches across all available fields - no filter applied.",
+        "searchFieldTitle": "Default Search box behavior",
+        "showMatchDetailsDescription": "always show the matching rows instead of only on hover.",
+        "tableSettingsTitle": "Table settings (gear button)",
+        "title": "How search works"
+      },
       "hideFilters": "Hide filters",
       "loadingSearchResults": "Loading search results...",
       "maxNestingDepth": "Maximum nesting depth reached",

package/src/messages/nl-NL.json

@@ -1,11 +1,13 @@
 {
   "common": {
+    "advancedNestedSearch": "Geavanceerd genest zoeken",
     "applyFilter": "Pas filter toe",
     "createFilter": "Filter",
     "deselect": "Deselecteer",
     "editColumns": "Wijzig kolommen",
     "errorMessage": "Er is een fout opgetreden",
     "export": "Exporteren",
+    "exportRows": "Exporteer {numberOfRows, plural, one {# rij} other {# rijen}}",
     "insyncFalse": "out-of-sync",
     "insyncTrue": "in-sync",
     "loadMore": "Meer laden",
@@ -62,7 +64,7 @@
     "metadataProductblocks": "Product blocks",
     "metadataProducts": "Products",
     "metadataResourceTypes": "Resource types",
-    "metadataScheduledTasks": "Scheduled tasks",
+    "metadataScheduledTasks": "Geplande taken",
     "metadataTasks": "Taken",
     "metadataWorkflows": "Workflows",
     "minimumOrchestratorCoreVersion": "Minimale versie van orchestrator-core",
@@ -337,6 +339,25 @@
       "fromDate": "Vanaf datum",
       "fromNumber": "Van",
       "groupLabel": "Groep",
+      "help": {
+        "addGroupDescription": "voegt een nieuwe groep toe met daarin twee regels. Een groep heeft een eigen AND/OR-keuze.",
+        "addRuleDescription": "voegt een nieuwe regel toe aan de huidige groep. Een regel bestaat uit een veld, een operator en een waarde.",
+        "advancedNestedSearchDescription": "indien ingeschakeld biedt de veldkeuzelijst in het filter ook de volledige geneste paden. Indien uitgeschakeld worden alleen de paden getoond die overeenkomen met de tabelkolommen.",
+        "advancedNestedSearchLabel": "Geavanceerd genest zoeken",
+        "exportDescription": "downloadt een CSV-bestand met alleen de rijen die voldoen aan het huidige filter.",
+        "filterIntro": "Bouw met 'Filter' een gestructureerd filter op uit regels.",
+        "filterTitle": "Filterregels en groepen",
+        "matchingRowDescription": "Beweeg de muis over een rij om een extra rij te tonen met informatie over het gevonden item: de velden die overeenkomen met de zoektekst en de betrouwbaarheid van de match.",
+        "matchingRowTitle": "Matching rij",
+        "quickFilterDescription": "Je kunt ook op een tabel header klikken en daar een waarde invoeren - dit voegt een nieuwe regel voor die kolom aan het filter toe.",
+        "quickFilterTitle": "Snel filteren via een tabel header",
+        "retrievalDescription": "kies hoe resultaten worden opgehaald: Auto, Fuzzy, Semantic of Hybride.",
+        "searchFieldDescription": "Doorzoekt alle beschikbare velden - geen filter toegepast.",
+        "searchFieldTitle": "Standaardgedrag van het zoekveld",
+        "showMatchDetailsDescription": "toon de matching rijen altijd in plaats van alleen bij hover.",
+        "tableSettingsTitle": "Tabelinstellingen (tandwielknop)",
+        "title": "Hoe zoeken werkt"
+      },
       "hideFilters": "Verberg filters",
       "loadingSearchResults": "Zoekresultaten laden...",
       "maxNestingDepth": "Maximale nesting-diepte bereikt",

package/src/pages/WfoSearchPocPage.tsx

@@ -33,6 +33,7 @@ import {
 } from '@/components';
 import { parseCelToRuleGroup } from '@/components/WfoTable/WfoStructuredSearchTable/utils';
 import { ColumnType, WfoTableProps } from '@/components/WfoTable/WfoTable';
+import { mapSortableAndFilterableValuesToTableColumnConfig } from '@/components/WfoTable/WfoTable/utils';
 import { useStoredTableConfig } from '@/hooks';
 import { SearchPayload, useLazySearchQuery, useSearchQuery } from '@/rtk';
 import {
@@ -179,8 +180,7 @@ export const WfoSearchPocPage = () => {
   );
   const [isValidFilterString, setIsValidFilterString] = useState<boolean>(true);
   const [tableDefaults, setTableDefaults] = useState<StoredTableConfig<SubscriptionListItem>>();
-  const [pageSize, setPageSize] = useState<number>(tableDefaults?.selectedPageSize || DEFAULT_PAGE_SIZE);
-  const [limit, setLimit] = useState<number>(pageSize);
+  const [pageSize, setPageSize] = useState<number>(DEFAULT_PAGE_SIZE);
   const [pageCursor, setPageCursor] = useState<{ cursor: string; searchKey: string } | undefined>(undefined);
   const [dataSorting, setDataSorting] = useState<WfoDataSorting<SubscriptionListItem>>({
     field: 'subscriptionId',
@@ -214,7 +214,7 @@ export const WfoSearchPocPage = () => {
     };
     return {
       query: committedSearchQuery,
-      limit,
+      limit: pageSize,
       entity_type: EntityKind.SUBSCRIPTION,
       response_columns: Array.from(resultColumToPropertyMap.keys()),
       order_by,
@@ -222,17 +222,19 @@ export const WfoSearchPocPage = () => {
       ...(filters && { filters }),
       ...(cursor && { cursor }),
     };
-  }, [committedSearchQuery, committedRuleGroup, selectedTab, retrieverType, limit, dataSorting, cursor]);
+  }, [committedSearchQuery, committedRuleGroup, selectedTab, retrieverType, pageSize, dataSorting, cursor]);
 
   const { data, isFetching } = useSearchQuery(searchPayload);
 
   const [getSubscriptionListTrigger] = useLazySearchQuery();
-  const getSubscriptionListForExport = () => getSubscriptionListTrigger(searchPayload).unwrap();
+  const getSubscriptionListForExport = (exportLimit: number) =>
+    getSubscriptionListTrigger({ ...searchPayload, limit: exportLimit, cursor: undefined }).unwrap();
 
   useEffect(() => {
     const storedConfig = getStoredTableConfig();
     if (storedConfig) {
       setTableDefaults(storedConfig);
+      setPageSize(storedConfig.selectedPageSize);
     }
   }, [getStoredTableConfig]);
 
@@ -249,8 +251,6 @@ export const WfoSearchPocPage = () => {
       renderData: (value) => <WfoFirstPartUUID UUID={value} />,
       renderDetails: (value) => value,
       renderTooltip: (value) => value,
-      isSortable: true,
-      isFilterable: true,
     },
     description: {
       columnType: ColumnType.DATA,
@@ -258,44 +258,37 @@ export const WfoSearchPocPage = () => {
       width: '500px',
       renderData: (value, record) => <Link href={`/subscriptions/${record.subscriptionId}`}>{value}</Link>,
       renderTooltip: (value) => value,
-      isFilterable: true,
     },
     status: {
       columnType: ColumnType.DATA,
       label: t('status'),
       width: '120px',
       renderData: (value) => <WfoSubscriptionStatusBadge status={value} />,
-      isFilterable: true,
     },
     insync: {
       columnType: ColumnType.DATA,
       label: t('insync'),
       width: '75px',
       renderData: (value) => <WfoInsyncIcon inSync={value} />,
-      isFilterable: true,
     },
     productName: {
       columnType: ColumnType.DATA,
       width: '260px',
       label: t('product'),
-      isFilterable: true,
     },
     tag: {
       columnType: ColumnType.DATA,
       label: t('tag'),
       width: '100px',
-      isFilterable: true,
     },
     customerFullname: {
       columnType: ColumnType.DATA,
       label: t('customerFullname'),
-      isFilterable: true,
     },
     customerShortcode: {
       columnType: ColumnType.DATA,
       label: t('customerShortcode'),
       width: '150px',
-      isFilterable: true,
     },
     startDate: {
       columnType: ColumnType.DATA,
@@ -305,7 +298,6 @@ export const WfoSearchPocPage = () => {
       renderDetails: parseDateToLocaleDateTimeString,
       clipboardText: parseDateToLocaleDateTimeString,
       renderTooltip: (cellValue) => cellValue?.toString(),
-      isFilterable: true,
     },
     endDate: {
       columnType: ColumnType.DATA,
@@ -315,7 +307,6 @@ export const WfoSearchPocPage = () => {
       renderDetails: parseDateToLocaleDateTimeString,
       clipboardText: parseDateToLocaleDateTimeString,
       renderTooltip: (cellValue) => cellValue?.toString(),
-      isFilterable: true,
     },
     note: {
       columnType: ColumnType.DATA,
@@ -332,7 +323,6 @@ export const WfoSearchPocPage = () => {
           />
         );
       },
-      isFilterable: true,
     },
     metadata: {
       columnType: ColumnType.DATA,
@@ -341,10 +331,18 @@ export const WfoSearchPocPage = () => {
       renderData: (value) => <WfoInlineJson data={value} />,
       renderDetails: (value) => value && <WfoJsonCodeBlock data={value} isBasicStyle />,
       renderTooltip: (value) => value && <WfoJsonCodeBlock data={value} isBasicStyle={false} />,
-      isFilterable: true,
     },
   };
 
+  const sortableAndFilterableFieldNames = Object.keys(tableColumnConfig).filter((fieldName) => fieldName !== 'actions');
+  const isSortingAllowed = queryText === '';
+  const tableColumnConfigWithSortingAndFiltering =
+    mapSortableAndFilterableValuesToTableColumnConfig<SubscriptionListItem>(
+      tableColumnConfig,
+      isSortingAllowed ? sortableAndFilterableFieldNames : [],
+      sortableAndFilterableFieldNames,
+    );
+
   const handleApplyFilter = (searchParams?: SearchParams) => {
     const ruleGroupParam = searchParams?.ruleGroup;
     // Use an explicitly passed rule group when provided (e.g. a column-header search), a cleared filter
@@ -382,7 +380,6 @@ export const WfoSearchPocPage = () => {
 
   const handleChangeTab = (updatedTab: WfoSubscriptionListTab) => {
     setActiveTab(updatedTab);
-    setLimit(pageSize);
     setPageCursor(undefined);
   };
 
@@ -468,7 +465,7 @@ export const WfoSearchPocPage = () => {
   const nextPageCursor = data?.page_info?.next_page_cursor ?? undefined;
 
   const exportData = async () => {
-    const exportResult = await getSubscriptionListForExport();
+    const exportResult = await getSubscriptionListForExport(totalItems || pageSize);
     const { items: exportItems } = getDataFromResponse<SubscriptionListItem>(
       exportResult,
       resultColumToPropertyMap,
@@ -489,7 +486,14 @@ export const WfoSearchPocPage = () => {
 
   const onUpdateDataSorting = ({ field, sortOrder }: WfoDataSorting<SubscriptionListItem>) => {
     setDataSorting({ field, sortOrder });
-    setLimit(pageSize);
+    setPageCursor(undefined);
+  };
+
+  const onUpdatePageSize = (updatedPageSize: number) => {
+    if (updatedPageSize === pageSize) {
+      return;
+    }
+    setPageSize(updatedPageSize);
     setPageCursor(undefined);
   };
 
@@ -508,6 +512,7 @@ export const WfoSearchPocPage = () => {
         rowExpandingConfiguration={rowExpandingConfiguration}
         defaultHiddenColumns={tableDefaults?.hiddenColumns}
         defaultShowMatchDetails={tableDefaults?.showMatchDetails}
+        defaultAdvancedNestedSearch={tableDefaults?.advancedNestedSearch}
         filterString={filterString}
         handleSearch={handleApplyFilter}
         isLoading={isFetching}
@@ -523,11 +528,11 @@ export const WfoSearchPocPage = () => {
         queryBuilderRuleGroup={queryBuilderRuleGroup}
         queryText={queryText}
         retrieverType={retrieverType}
-        tableColumnConfig={tableColumnConfig}
+        tableColumnConfig={tableColumnConfigWithSortingAndFiltering}
         getColumnSearchFieldName={(field) => getKeyByValueFromMap(resultColumToPropertyMap, field)}
         pageSize={pageSize}
         onUpdateDataSorting={onUpdateDataSorting}
-        setPageSize={setPageSize}
+        setPageSize={onUpdatePageSize}
         totalItems={totalItems}
         hasNextPage={hasNextPage}
         prefilledFieldOptions={prefilledFieldOptions}