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

package/src/components/WfoWorkflowUserGuide/WfoWorkflowGuideExpandablePanel.tsx

@@ -29,6 +29,7 @@ interface WfoUserGuideToggleStripProps {
   ariaLabel: string;
   isBigScreen: boolean;
   noLeadingBorder?: boolean;
+  sticky?: boolean;
   children: ReactNode;
 }
 
@@ -37,37 +38,51 @@ const WfoWorkflowGuideToggleStrip = ({
   ariaLabel,
   isBigScreen,
   noLeadingBorder,
+  sticky,
   children,
 }: WfoUserGuideToggleStripProps) => {
   const {
     fullHeightStyle,
+    stickyStripContainerStyle,
+    stripIconStyle,
+    stickyPanelFillStyle,
     toggleStripContainerStyle,
     toggleStripContainerHorizontalStyle,
+    stickyHorizontalStripContainerStyle,
     toggleStripPanelStyle,
     noLeftBorderStyle,
     noBottomBorderStyle,
   } = useWithOrchestratorTheme(getStyles);
 
+  const containerStyle =
+    isBigScreen ?
+      sticky ? stickyStripContainerStyle
+      : toggleStripContainerStyle
+    : sticky ? stickyHorizontalStripContainerStyle
+    : toggleStripContainerHorizontalStyle;
+
   return (
-    <EuiFlexItem
-      grow={false}
-      onClick={onToggle}
-      aria-label={ariaLabel}
-      css={isBigScreen ? toggleStripContainerStyle : toggleStripContainerHorizontalStyle}
-    >
+    <EuiFlexItem grow={false} onClick={onToggle} aria-label={ariaLabel} css={containerStyle}>
       <EuiPanel
         hasShadow={false}
-        css={[toggleStripPanelStyle, noLeadingBorder && (isBigScreen ? noLeftBorderStyle : noBottomBorderStyle)]}
+        css={[
+          toggleStripPanelStyle,
+          sticky && stickyPanelFillStyle,
+          noLeadingBorder && (isBigScreen ? noLeftBorderStyle : noBottomBorderStyle),
+        ]}
       >
-        <EuiFlexGroup
-          direction={isBigScreen ? 'column' : 'row'}
-          alignItems="center"
-          gutterSize="s"
-          justifyContent="center"
-          css={fullHeightStyle}
-        >
-          {children}
-        </EuiFlexGroup>
+        {isBigScreen ?
+          <div css={stripIconStyle}>{children}</div>
+        : <EuiFlexGroup
+            direction="row"
+            alignItems="center"
+            gutterSize="s"
+            justifyContent="center"
+            css={fullHeightStyle}
+          >
+            {children}
+          </EuiFlexGroup>
+        }
       </EuiPanel>
     </EuiFlexItem>
   );
@@ -82,12 +97,13 @@ const WfoWorkflowGuideMarkdown = ({ workflowName, isBigScreen }: { workflowName:
 
   return (
     <div css={isBigScreen ? guideBodyStyle : guideStackedBodyStyle}>
-      {(isLoading && <EuiLoadingSpinner size="m" />)
-        || ((isError || !content) && <EuiText color="subdued">{t('noGuideAvailable')}</EuiText>) || (
-          <EuiPanel paddingSize="m" hasShadow css={isBigScreen ? guidePanelStyle : guideStackedPanelStyle}>
+      {(isLoading && <EuiLoadingSpinner size="m" />) || (
+        <EuiPanel paddingSize="m" hasShadow css={isBigScreen ? guidePanelStyle : guideStackedPanelStyle}>
+          {((isError || !content) && <EuiText color="subdued">{t('noGuideAvailable')}</EuiText>) || (
             <EuiMarkdownFormat>{content}</EuiMarkdownFormat>
-          </EuiPanel>
-        )}
+          )}
+        </EuiPanel>
+      )}
     </div>
   );
 };
@@ -97,14 +113,7 @@ export const WfoWorkflowGuideExpandablePanel = ({ workflowName, isExpanded, onTo
   const { fullHeightStyle, guideExpandedItemStyle, guideExpandedFillStyle } = useWithOrchestratorTheme(getStyles);
   const isBigScreen = useIsWithinBreakpoints(['xl', 'xxl']);
 
-  const OpenGuideButton = () => (
-    <EuiFlexItem grow={false}>
-      <EuiFlexGroup gutterSize="xs" alignItems="center" direction={isBigScreen ? 'column' : 'row'}>
-        <EuiIcon type={isBigScreen ? 'arrowLeft' : 'arrowDown'} size="xxl" color="primary" />
-        <EuiIcon type={'info'} size="xxl" color="primary" />
-      </EuiFlexGroup>
-    </EuiFlexItem>
-  );
+  const OpenGuideButton = () => <EuiIcon type={'info'} size="xxl" color="primary" />;
 
   const CloseGuideButton = () => (
     <EuiFlexItem grow={false}>
@@ -114,7 +123,7 @@ export const WfoWorkflowGuideExpandablePanel = ({ workflowName, isExpanded, onTo
 
   if (!isExpanded) {
     return (
-      <WfoWorkflowGuideToggleStrip onToggle={onToggle} ariaLabel={t('show')} isBigScreen={isBigScreen}>
+      <WfoWorkflowGuideToggleStrip onToggle={onToggle} ariaLabel={t('show')} isBigScreen={isBigScreen} sticky>
         <OpenGuideButton />
       </WfoWorkflowGuideToggleStrip>
     );

package/src/components/WfoWorkflowUserGuide/styles.ts

@@ -3,6 +3,11 @@ import { css } from '@emotion/react';
 import { WfoThemeHelpers } from '@/hooks';
 
 export const getStyles = ({ theme }: WfoThemeHelpers) => {
+  const navigationHeight = theme.base * 3;
+  const timelineStickyHeight = theme.base * 4;
+  const stripBottomGap = theme.base;
+  const stripMinHeight = theme.base * 40;
+
   const fullHeightStyle = css({
     height: '100%',
   });
@@ -12,25 +17,56 @@ export const getStyles = ({ theme }: WfoThemeHelpers) => {
     cursor: 'pointer',
   });
 
+  const stickyStripContainerStyle = css({
+    width: theme.base * 4,
+    cursor: 'pointer',
+    alignSelf: 'stretch',
+    position: 'sticky',
+    top: timelineStickyHeight,
+    minHeight: stripMinHeight,
+    maxHeight: `calc(100vh - ${navigationHeight + timelineStickyHeight + stripBottomGap}px)`,
+  });
+
+  const stripIconStyle = css({
+    display: 'flex',
+    justifyContent: 'center',
+  });
+
+  const stickyPanelFillStyle = css({
+    flexGrow: 1,
+  });
+
   const toggleStripContainerHorizontalStyle = css({
     width: '100%',
     height: theme.base * 4,
     cursor: 'pointer',
   });
 
+  const stickyHorizontalStripContainerStyle = css({
+    width: '100%',
+    height: theme.base * 4,
+    cursor: 'pointer',
+    position: 'sticky',
+    top: timelineStickyHeight,
+    zIndex: 2,
+  });
+
   const toggleStripPanelStyle = css({
     height: '100%',
     backgroundColor: theme.colors.backgroundBasePrimary,
-    border: `2px dashed ${theme.colors.backgroundLightPrimary}`,
-    transition: 'box-shadow 100ms ease-in-out, border-style 100ms ease-in-out',
+    border: `2px solid ${theme.colors.backgroundLightPrimary}`,
+    transition: 'border-color 100ms ease-in-out',
     '&:hover': {
-      borderStyle: 'solid',
-      boxShadow: `0 0 0 2px ${theme.colors.backgroundBasePrimary}`,
+      borderColor: theme.colors.borderBasePrimary,
     },
   });
 
   const guideExpandedItemStyle = css({
-    position: 'relative',
+    alignSelf: 'stretch',
+    position: 'sticky',
+    top: timelineStickyHeight,
+    minHeight: stripMinHeight,
+    maxHeight: `calc(100vh - ${navigationHeight + timelineStickyHeight + stripBottomGap}px)`,
   });
 
   const guideExpandedFillStyle = css({
@@ -41,8 +77,10 @@ export const getStyles = ({ theme }: WfoThemeHelpers) => {
   const guidePanelStyle = css({
     height: '100%',
     overflowY: 'auto',
-    border: `2px dashed ${theme.colors.backgroundLightPrimary}`,
+    border: `2px solid ${theme.colors.backgroundLightPrimary}`,
     borderRightWidth: 0,
+    borderTopRightRadius: 0,
+    borderBottomRightRadius: 0,
   });
 
   const guideBodyStyle = css({
@@ -54,10 +92,14 @@ export const getStyles = ({ theme }: WfoThemeHelpers) => {
 
   const noLeftBorderStyle = css({
     borderLeftWidth: 0,
+    borderTopLeftRadius: 0,
+    borderBottomLeftRadius: 0,
   });
 
   const noBottomBorderStyle = css({
     borderBottomWidth: 0,
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0,
   });
 
   const guideStackedBodyStyle = css({
@@ -66,14 +108,20 @@ export const getStyles = ({ theme }: WfoThemeHelpers) => {
   });
 
   const guideStackedPanelStyle = css({
-    border: `2px dashed ${theme.colors.backgroundLightPrimary}`,
+    border: `2px solid ${theme.colors.backgroundLightPrimary}`,
     borderTopWidth: 0,
+    borderTopLeftRadius: 0,
+    borderTopRightRadius: 0,
   });
 
   return {
     fullHeightStyle,
     toggleStripContainerStyle,
+    stickyStripContainerStyle,
+    stripIconStyle,
+    stickyPanelFillStyle,
     toggleStripContainerHorizontalStyle,
+    stickyHorizontalStripContainerStyle,
     toggleStripPanelStyle,
     noLeftBorderStyle,
     noBottomBorderStyle,

package/src/configuration/constants.ts

@@ -34,7 +34,7 @@ export const METADATA_PRODUCT_ENDPOINT = 'products';
 export const METADATA_PRODUCT_BLOCK_ENDPOINT = 'product_blocks';
 export const METADATA_RESOURCE_TYPE_ENDPOINT = 'resource_types';
 export const METADATA_WORKFLOWS_ENDPOINT = 'workflows';
-export const METADATA_SCHEDULES_ENDPOINT = 'schedules';
+export const METADATA_SCHEDULES_ENDPOINT = 'schedules/';
 
 //search
 export const SEARCH_QUERY_RESULTS_ENDPOINT = 'search/queries';

package/src/configuration/version.ts

@@ -1 +1 @@
-export const ORCHESTRATOR_UI_LIBRARY_VERSION = '8.7.3';
+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,

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

@@ -23,6 +23,8 @@ export const useStoredTableConfig = <T>(localeStorageKey: string) => {
       if (storedConfig) {
         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",
@@ -24,6 +26,7 @@
     "searchModalText": "<p>Different options are available from free text search covering all data columns, or column specific filtering. Note that: <p></p><ul><li>Hidden columns are included</li> <li>Searching is case-insensitive</li> <li>Ordering of words does not matter (unless it is a Phrase)</li> <li>TSV (text search vector) search only available for subscriptions table</li></ul></p> <p>For example:</p> <li><b>\"l2vpn\"</b> – free text search</li> <li><b>tag:l2vpn</b> – search in a specific column</li><li><b>tag:lp description:test</b> – search in multiple columns</li><li><b>tag:(lp|lr)</b> – multiselect within 1 column</li><li><b>-tag:lp</b> – negated filter</li><li><b>test*</b> – prefix filter</li> <p></p><p><b>Note:</b> Search words containing characters `|-*():\"` may not be valid, as they are part of the search query grammar</p><p>Invalid search strings are for example:</p><ul><li>2a10:e300:fff0::/48</li> <li>\"node123(planned)\"</li> <li>\"node123|planned\"</li></ul>",
     "searchModalTitle": "Search string options",
     "showAllColumnsInDetailView": "Show all columns in detail view",
+    "showMatchDetails": "Show match details",
     "tableSettings": "Table settings",
     "unauthorizedPage": "You are not authorized to see this page",
     "unknownError": "Unknown error"
@@ -520,7 +523,8 @@
       "title": "Subscriptions",
       "workflowsTab": {
         "startWithNewestLabel": "Start with newest first",
-        "startWithOldestLabel": "Start with oldest first"
+        "startWithOldestLabel": "Start with oldest first",
+        "hideValidateTasks": "Hide validation tasks"
       }
     },
     "index": {

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",
@@ -24,6 +26,7 @@
     "searchModalText": "<p>Er zijn verschillende opties beschikbaar: zoeken in vrije tekst voor alle datakolommen en specifiek per kolom te filteren. Houd er rekening mee dat: </p><p></p><ul><li>Verborgen kolommen zijn inbegrepen</li> <li>Zoeken is niet hoofdlettergevoelig</li> <li>De volgorde van woorden doet er niet toe (tenzij het een quote)</li> <li>TSV (text search vector) zoekactie alleen beschikbaar voor subscription tabel</li></ul><p>Bijvoorbeeld:</p> <li><b>\"l2vpn\"</b> – vrije tekst search</li> <li><b>tag:l2vpn</b> – zoeken in een specifieke kolom</li> <li><b>tag:lp beschrijving: test</b> – zoeken in meerdere kolommen</li><li><b>tag:(lp|lr)</b> – multi select binnen 1 kolom</li> <li><b>-tag:lp</b> – omgekeerd filteren</li> <li><b>test*</b> – prefix filter</li> <p></p><p><b>Opmerking:</b> Zoeken op woorden die tekens `|-*():\"` bevatten, zijn mogelijk niet geldig, omdat ze deel uitmaken van de grammatica van de zoekfunctie</p><p>Ongeldige zoekwoorden zijn bijvoorbeeld:</p><ul><li>2a10:e300:fff0::/48</li> <li>\"node123(gepland)\"</li> <li>\"node123|gepland\"</li></ul>",
     "searchModalTitle": "Zoekwoorden opties",
     "showAllColumnsInDetailView": "Toon alle kolommen in detailweergave",
+    "showMatchDetails": "Toon overeenkomstdetails",
     "tableSettings": "Tabel instellingen",
     "unauthorizedPage": "Niet geautoriseerd om deze pagina te bekijken",
     "unknownError": "Onbekende fout"
@@ -519,8 +522,9 @@
       "tag": "Tag",
       "title": "Subscriptions",
       "workflowsTab": {
-        "startWithNewestLabel": "Start met nieuwste eerst",
-        "startWithOldestLabel": "Start met oudste eerst"
+        "startWithNewestLabel": "Start met nieuwste",
+        "startWithOldestLabel": "Start met oudste",
+        "hideValidateTasks": "Verberg validatie taken"
       }
     },
     "index": {

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 {
@@ -88,7 +89,6 @@ const getDataFromResponse = <T extends object>(
       },
       {} as Record<string, ReactNode>,
     ),
-    shouldOnlyShowOnHover: true,
   };
 
   const items: T[] = responseColumns.map((responseColumn) => {
@@ -180,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',
@@ -215,7 +214,7 @@ export const WfoSearchPocPage = () => {
     };
     return {
       query: committedSearchQuery,
-      limit,
+      limit: pageSize,
       entity_type: EntityKind.SUBSCRIPTION,
       response_columns: Array.from(resultColumToPropertyMap.keys()),
       order_by,
@@ -223,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]);
 
@@ -250,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,
@@ -259,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,
@@ -306,7 +298,6 @@ export const WfoSearchPocPage = () => {
       renderDetails: parseDateToLocaleDateTimeString,
       clipboardText: parseDateToLocaleDateTimeString,
       renderTooltip: (cellValue) => cellValue?.toString(),
-      isFilterable: true,
     },
     endDate: {
       columnType: ColumnType.DATA,
@@ -316,7 +307,6 @@ export const WfoSearchPocPage = () => {
       renderDetails: parseDateToLocaleDateTimeString,
       clipboardText: parseDateToLocaleDateTimeString,
       renderTooltip: (cellValue) => cellValue?.toString(),
-      isFilterable: true,
     },
     note: {
       columnType: ColumnType.DATA,
@@ -333,7 +323,6 @@ export const WfoSearchPocPage = () => {
           />
         );
       },
-      isFilterable: true,
     },
     metadata: {
       columnType: ColumnType.DATA,
@@ -342,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
@@ -383,7 +380,6 @@ export const WfoSearchPocPage = () => {
 
   const handleChangeTab = (updatedTab: WfoSubscriptionListTab) => {
     setActiveTab(updatedTab);
-    setLimit(pageSize);
     setPageCursor(undefined);
   };
 
@@ -469,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,
@@ -490,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 +511,8 @@ export const WfoSearchPocPage = () => {
         data={subscriptionListItems}
         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}

package/src/pages/processes/WfoProductInformationWithLink.tsx

@@ -2,9 +2,9 @@ import React from 'react';
 
 import { useTranslations } from 'next-intl';
 
-import { EuiButtonIcon, EuiFlexGroup, EuiText, EuiToolTip } from '@elastic/eui';
+import { EuiButtonIcon, EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiText, EuiToolTip } from '@elastic/eui';
 
-import { useGetOrchestratorConfig } from '@/hooks';
+import { useGetOrchestratorConfig, useOrchestratorTheme } from '@/hooks';
 
 interface WfoProductInformationWithLinkProps {
   workflowName: string;
@@ -15,8 +15,10 @@ export const WfoProductInformationWithLink = ({ workflowName, productNames }: Wf
   const { workflowInformationLinkUrl, showWorkflowInformationLink } = useGetOrchestratorConfig();
   const t = useTranslations('processes.detail');
   const docsUrl = workflowInformationLinkUrl + workflowName;
+  const { theme } = useOrchestratorTheme();
+
   return (
-    <EuiFlexGroup gutterSize={'s'} alignItems={'center'}>
+    <EuiFlexGroup css={{ paddingBottom: theme.size.xs }} gutterSize={'s'} alignItems={'center'}>
       {showWorkflowInformationLink && (
         <EuiToolTip content={t('openWorkflowTaskInfo')}>
           <a href={docsUrl} target="_blank">
@@ -24,7 +26,10 @@ export const WfoProductInformationWithLink = ({ workflowName, productNames }: Wf
           </a>
         </EuiToolTip>
       )}
-      <EuiText size="s">{productNames}</EuiText>
+      <EuiFlexItem>
+        <EuiSpacer size={'xs'} />
+        <EuiText size="m">{productNames}</EuiText>
+      </EuiFlexItem>
     </EuiFlexGroup>
   );
 };

package/src/pages/tasks/WfoTasksListPage.tsx

@@ -110,6 +110,7 @@ export const WfoTasksListPage = () => {
       'productName',
       'customer',
       'customerAbbreviation',
+      'note',
       'subscriptions',
       'createdBy',
       'assignee',

package/src/types/search.ts

@@ -214,3 +214,11 @@ export type ExportArtifact = {
 
 export type ResultColumToPropertyMap<T> = Map<string, keyof T>;
 export type FieldToOperatorMap = Map<string, string[]>;
+
+export type WfoQueryBuilderContext = {
+  onFieldSelected: (field: string, operators: string[], pathInfo?: PathInfo) => void;
+  prefilledFieldOptions: FieldToOperatorMap;
+  fieldPathInfoMap: Map<string, PathInfo>;
+  onValueEditorEnter: () => void;
+  useAdvancedNestedSearch: boolean;
+};

package/src/types/types.ts

@@ -134,12 +134,12 @@ export interface ProductDefinition {
 export type ProductsSummary = Pick<ProductDefinition, 'name'> & SubscriptionsResult<never>;
 
 export enum WorkflowTarget {
-  CREATE = 'create',
-  MODIFY = 'modify',
-  TERMINATE = 'terminate',
-  SYSTEM = 'system',
-  VALIDATE = 'validate',
-  RECONCILE = 'reconcile',
+  CREATE = 'CREATE',
+  MODIFY = 'MODIFY',
+  TERMINATE = 'TERMINATE',
+  SYSTEM = 'SYSTEM',
+  VALIDATE = 'VALIDATE',
+  RECONCILE = 'RECONCILE',
 }
 
 export type Process = {
@@ -624,11 +624,11 @@ export type SubscriptionActions = {
   reason?: string;
   locked_relations?: string[];
   locked_relations_detail?: SubscriptionRelation[];
-  modify: SubscriptionAction[];
-  terminate: SubscriptionAction[];
-  system: SubscriptionAction[];
-  validate: SubscriptionAction[];
-  reconcile: SubscriptionAction[];
+  [WorkflowTarget.MODIFY]: SubscriptionAction[];
+  [WorkflowTarget.TERMINATE]: SubscriptionAction[];
+  [WorkflowTarget.SYSTEM]: SubscriptionAction[];
+  [WorkflowTarget.VALIDATE]: SubscriptionAction[];
+  [WorkflowTarget.RECONCILE]: SubscriptionAction[];
 };
 
 export enum CacheTagType {