@orchestrator-ui/orchestrator-ui-components 1.38.2 → 2.1.0

package/src/components/WfoTree/styles.ts

@@ -12,14 +12,38 @@ export const getStyles = (wfoTheme: WfoTheme) => {
         marginRight: `-${theme.size.s}`,
     };
 
-    const treeItemOtherSubscriptionStyle = {
-        backgroundColor: toSecondaryColor(theme.colors.lightestShade),
-        border: `thin dashed ${theme.colors.lightShade}`,
+    const treeItemStyle = (isOutsideCurrentSubscription: boolean) => {
+        return {
+            cursor: 'pointer',
+            paddingBlock: theme.size.xs,
+            paddingInline: theme.size.s,
+            borderRadius: theme.base - 10,
+            textDecoration: 'none',
+            backgroundColor: 'transparent',
+            transition: 'background-color 0.2s ease, text-decoration 0.3s ease', // Smooth transition for background
+            '&:hover': {
+                textDecoration: 'underline',
+            },
+            border: isOutsideCurrentSubscription
+                ? `1px dashed ${theme.colors.lightShade}`
+                : 'none',
+        };
+    };
+
+    const selectedTreeItemStyle = (isOutsideCurrentSubscription: boolean) => {
+        return {
+            ...treeItemStyle(isOutsideCurrentSubscription),
+            backgroundColor: isOutsideCurrentSubscription
+                ? theme.colors.lightShade
+                : toSecondaryColor(theme.colors.primary),
+            color: theme.colors.primaryText,
+        };
     };
 
     return {
         expandIconContainerStyle: expandIconContainerStyle,
         treeContainerStyle: treeContainerStyle,
-        treeItemOtherSubscriptionStyle,
+        selectedTreeItemStyle,
+        treeItemStyle,
     };
 };

package/src/components/index.ts

@@ -1,4 +1,5 @@
 export * from './WfoBadges';
+export * from './WfoContentHeader';
 export * from './WfoExpandableField';
 export * from './WfoPageTemplate/WfoBreadcrumbs';
 export * from './WfoFilterTabs';
@@ -25,7 +26,10 @@ export * from './WfoError';
 export * from './WfoErrorBoundary';
 export * from './WfoWorkflowSteps';
 export * from './WfoNoResults';
+export * from './WfoRenderElementOrString';
 export * from './WfoStartButton';
 export * from './WfoSubscriptionsList';
 export * from './WfoSummary';
 export * from './WfoTitleWithWebsocketBadge';
+export * from './WfoRadioDropdown';
+export * from './WfoInlineNoteEdit';

package/src/configuration/policy-resources.ts

@@ -17,4 +17,5 @@ export enum PolicyResource {
     TASKS_CREATE = '/orchestrator/processes/create/task',
     TASKS_RETRY_ALL = '/orchestrator/processes/all-tasks/retry',
     SETTINGS_FLUSH_CACHE = '/orchestrator/settings/flush-cache',
+    SET_IN_SYNC = '/orchestrator/subscriptions/set-in-sync',
 }

package/src/configuration/version.ts

@@ -1 +1 @@
-export const ORCHESTRATOR_UI_LIBRARY_VERSION = '1.38.2';
+export const ORCHESTRATOR_UI_LIBRARY_VERSION = '2.1.0';

package/src/icons/WfoXMarkSmall.tsx

@@ -0,0 +1,29 @@
+import React, { FC } from 'react';
+
+import { WfoIconProps } from './WfoIconProps';
+
+export const WfoXMarkSmall: FC<WfoIconProps> = ({
+    width = 20,
+    height = 20,
+}) => (
+    <svg
+        width={width}
+        height={height}
+        viewBox="0 -2 16 16"
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <title>icon/x-mark</title>
+        <g
+            id="Symbols"
+            stroke="none"
+            strokeWidth="1"
+            fill="none"
+            fillRule="evenodd"
+        >
+            <g xmlns="http://www.w3.org/2000/svg" fill="currentColor">
+                <path d="M5.28 4.22a.75.75 0 0 0-1.06 1.06L6.94 8l-2.72 2.72a.75.75 0 1 0 1.06 1.06L8 9.06l2.72 2.72a.75.75 0 1 0 1.06-1.06L9.06 8l2.72-2.72a.75.75 0 0 0-1.06-1.06L8 6.94 5.28 4.22Z" />
+            </g>
+        </g>
+    </svg>
+);

package/src/messages/en-GB.json

@@ -357,6 +357,10 @@
             "setInSyncSuccess": {
                 "title": "Subscription set in sync",
                 "text": "The subscription was successfully set in sync."
+            },
+            "workflowsTab": {
+                "startWithOldestLabel": "Start with oldest first",
+                "startWithNewestLabel": "Start with newest first"
             }
         }
     },

package/src/messages/nl-NL.json

@@ -356,6 +356,10 @@
             "setInSyncSuccess": {
                 "title": "Subscription inSync",
                 "text": "De subscription is in sync gezet."
+            },
+            "workflowsTab": {
+                "startWithOldestLabel": "Start met oudste eerst",
+                "startWithNewestLabel": "Start met nieuwste eerst"
             }
         }
     },

package/src/pages/metadata/WfoMetadataPageLayout.tsx

@@ -4,7 +4,9 @@ import type { ReactNode } from 'react';
 import { useTranslations } from 'next-intl';
 import { useRouter } from 'next/router';
 
-import { EuiPageHeader, EuiSpacer, EuiTab, EuiTabs } from '@elastic/eui';
+import { EuiSpacer, EuiTab, EuiTabs } from '@elastic/eui';
+
+import { WfoContentHeader } from '@/components/WfoContentHeader/WfoContentHeader';
 
 interface MetadataLayoutProps {
     children: ReactNode;
@@ -55,10 +57,8 @@ export const WfoMetadataPageLayout = ({
 
     return (
         <>
-            <EuiSpacer />
+            <WfoContentHeader title={t('title')} />
 
-            <EuiPageHeader pageTitle={t('title')} />
-            <EuiSpacer size="m" />
             <EuiTabs>
                 {tabs.map(({ id, translationKey: name, path }) => (
                     <EuiTab

package/src/pages/metadata/WfoProductBlocksPage.tsx

@@ -3,7 +3,6 @@ import React, { useEffect, useState } from 'react';
 import { useTranslations } from 'next-intl';
 
 import { EuiBadgeGroup } from '@elastic/eui';
-import type { Pagination } from '@elastic/eui/src/components';
 
 import {
     DEFAULT_PAGE_SIZE,
@@ -15,13 +14,15 @@ import {
     WfoFirstPartUUID,
     WfoProductBlockBadge,
     WfoProductStatusBadge,
-    WfoTableColumns,
-    WfoTableWithFilter,
     getDataSortHandler,
-    getPageChangeHandler,
+    getPageIndexChangeHandler,
+    getPageSizeChangeHandler,
     getQueryStringHandler,
-    mapSortableAndFilterableValuesToTableColumnConfig,
 } from '@/components';
+import { WfoAdvancedTable } from '@/components/WfoTable/WfoAdvancedTable';
+import { WfoAdvancedTableColumnConfig } from '@/components/WfoTable/WfoAdvancedTable/types';
+import { ColumnType, Pagination } from '@/components/WfoTable/WfoTable';
+import { mapSortableAndFilterableValuesToTableColumnConfig } from '@/components/WfoTable/WfoTable/utils';
 import {
     useDataDisplayParams,
     useShowToastMessage,
@@ -47,21 +48,8 @@ import {
 
 import { WfoMetadataPageLayout } from './WfoMetadataPageLayout';
 
-const PRODUCT_BLOCK_FIELD_ID: keyof ProductBlockDefinition = 'productBlockId';
 const PRODUCT_BLOCK_FIELD_NAME: keyof ProductBlockDefinition = 'name';
 
-const PRODUCT_BLOCK_FIELD_TAG: keyof ProductBlockDefinition = 'tag';
-const PRODUCT_BLOCK_FIELD_DESCRIPTION: keyof ProductBlockDefinition =
-    'description';
-const PRODUCT_BLOCK_FIELD_STATUS: keyof ProductBlockDefinition = 'status';
-const PRODUCT_BLOCK_FIELD_CREATED_AT: keyof ProductBlockDefinition =
-    'createdAt';
-const PRODUCT_BLOCK_FIELD_END_DATE: keyof ProductBlockDefinition = 'endDate';
-const PRODUCT_BLOCK_FIELD_RESOURCE_TYPES: keyof ProductBlockDefinition =
-    'resourceTypes';
-const PRODUCT_BLOCK_FIELD_PRODUCT_BLOCKS: keyof ProductBlockDefinition =
-    'dependsOn';
-
 type ProductBlockDefinitionExportItem = Omit<
     ProductBlockDefinition,
     'resourceTypes' | 'dependsOn'
@@ -103,44 +91,42 @@ export const WfoProductBlocksPage = () => {
             },
         });
 
-    const tableColumns: WfoTableColumns<ProductBlockDefinition> = {
+    const tableColumns: WfoAdvancedTableColumnConfig<ProductBlockDefinition> = {
         productBlockId: {
-            field: PRODUCT_BLOCK_FIELD_ID,
-            name: t('id'),
+            columnType: ColumnType.DATA,
+            label: t('id'),
             width: '90',
-            render: (value) => <WfoFirstPartUUID UUID={value} />,
+            renderData: (value) => <WfoFirstPartUUID UUID={value} />,
             renderDetails: (value) => value,
         },
         name: {
-            field: PRODUCT_BLOCK_FIELD_NAME,
-            name: t('name'),
-            width: '200',
-            render: (name) => (
+            columnType: ColumnType.DATA,
+            label: t('name'),
+            renderData: (name) => (
                 <WfoProductBlockBadge badgeType={BadgeType.PRODUCT_BLOCK}>
                     {name}
                 </WfoProductBlockBadge>
             ),
         },
         tag: {
-            field: PRODUCT_BLOCK_FIELD_TAG,
-            name: t('tag'),
-            width: '140',
+            columnType: ColumnType.DATA,
+            label: t('tag'),
         },
         description: {
-            field: PRODUCT_BLOCK_FIELD_DESCRIPTION,
-            name: t('description'),
-            width: '400',
+            columnType: ColumnType.DATA,
+            label: t('description'),
+            width: '400px',
         },
         status: {
-            field: PRODUCT_BLOCK_FIELD_STATUS,
-            name: t('status'),
-            width: '90',
-            render: (value) => <WfoProductStatusBadge status={value} />,
+            columnType: ColumnType.DATA,
+            label: t('status'),
+            width: '90px',
+            renderData: (value) => <WfoProductStatusBadge status={value} />,
         },
         dependsOn: {
-            field: PRODUCT_BLOCK_FIELD_PRODUCT_BLOCKS,
-            name: t('dependingProductBlocks'),
-            render: (dependsOn) => (
+            columnType: ColumnType.DATA,
+            label: t('dependingProductBlocks'),
+            renderData: (dependsOn) => (
                 <>
                     {dependsOn.map((productBlock, index) => (
                         <WfoProductBlockBadge
@@ -154,9 +140,9 @@ export const WfoProductBlocksPage = () => {
             ),
         },
         resourceTypes: {
-            field: PRODUCT_BLOCK_FIELD_RESOURCE_TYPES,
-            name: t('resourceTypes'),
-            render: (resourceTypes) => (
+            columnType: ColumnType.DATA,
+            label: t('resourceTypes'),
+            renderData: (resourceTypes) => (
                 <>
                     {resourceTypes.map((resourceType, index) => (
                         <WfoProductBlockBadge
@@ -182,16 +168,16 @@ export const WfoProductBlocksPage = () => {
             ),
         },
         createdAt: {
-            field: PRODUCT_BLOCK_FIELD_CREATED_AT,
-            name: t('createdAt'),
-            render: (date) => <WfoDateTime dateOrIsoString={date} />,
+            columnType: ColumnType.DATA,
+            label: t('createdAt'),
+            renderData: (date) => <WfoDateTime dateOrIsoString={date} />,
             renderDetails: parseIsoString(parseDateToLocaleDateTimeString),
             clipboardText: parseIsoString(parseDateToLocaleDateTimeString),
         },
         endDate: {
-            field: PRODUCT_BLOCK_FIELD_END_DATE,
-            name: t('endDate'),
-            render: (date) => <WfoDateTime dateOrIsoString={date} />,
+            columnType: ColumnType.DATA,
+            label: t('endDate'),
+            renderData: (date) => <WfoDateTime dateOrIsoString={date} />,
             renderDetails: parseIsoString(parseDateToLocaleDateTimeString),
             clipboardText: parseIsoString(parseDateToLocaleDateTimeString),
         },
@@ -223,10 +209,12 @@ export const WfoProductBlocksPage = () => {
     const { totalItems, sortFields, filterFields } = data?.pageInfo ?? {};
 
     const pagination: Pagination = {
-        pageSize: pageSize,
-        pageIndex: pageIndex,
+        pageIndex,
+        pageSize,
         pageSizeOptions: DEFAULT_PAGE_SIZES,
         totalItemCount: totalItems ? totalItems : 0,
+        onChangePage: getPageIndexChangeHandler(setDataDisplayParam),
+        onChangeItemsPerPage: getPageSizeChangeHandler(setDataDisplayParam),
     };
 
     const mapToExportItems = (
@@ -245,21 +233,16 @@ export const WfoProductBlocksPage = () => {
 
     return (
         <WfoMetadataPageLayout>
-            <WfoTableWithFilter<ProductBlockDefinition>
+            <WfoAdvancedTable
                 data={data?.productBlocks || []}
-                tableColumns={mapSortableAndFilterableValuesToTableColumnConfig(
+                tableColumnConfig={mapSortableAndFilterableValuesToTableColumnConfig(
                     tableColumns,
                     sortFields,
                     filterFields,
                 )}
-                dataSorting={dataSorting}
+                dataSorting={[dataSorting]}
                 defaultHiddenColumns={tableDefaults?.hiddenColumns}
-                onUpdateDataSort={getDataSortHandler<ProductBlockDefinition>(
-                    setDataDisplayParam,
-                )}
-                onUpdatePage={getPageChangeHandler<ProductBlockDefinition>(
-                    setDataDisplayParam,
-                )}
+                onUpdateDataSorting={getDataSortHandler(setDataDisplayParam)}
                 onUpdateQueryString={getQueryStringHandler<ProductBlockDefinition>(
                     setDataDisplayParam,
                 )}

package/src/pages/metadata/WfoProductsPage.tsx

@@ -2,9 +2,11 @@ import React, { useEffect, useState } from 'react';
 
 import { useTranslations } from 'next-intl';
 
-import type { Pagination } from '@elastic/eui/src/components';
-
-import type { WfoDataSorting, WfoTableColumns } from '@/components';
+import {
+    WfoDataSorting,
+    getPageIndexChangeHandler,
+    getPageSizeChangeHandler,
+} from '@/components';
 import {
     DEFAULT_PAGE_SIZE,
     DEFAULT_PAGE_SIZES,
@@ -13,13 +15,14 @@ import {
     WfoDateTime,
     WfoProductBlockBadge,
     WfoProductStatusBadge,
-    WfoTableWithFilter,
     getDataSortHandler,
-    getPageChangeHandler,
     getQueryStringHandler,
 } from '@/components';
+import { WfoAdvancedTable } from '@/components/WfoTable/WfoAdvancedTable';
+import { WfoAdvancedTableColumnConfig } from '@/components/WfoTable/WfoAdvancedTable/types';
 import { WfoFirstPartUUID } from '@/components/WfoTable/WfoFirstPartUUID';
-import { mapSortableAndFilterableValuesToTableColumnConfig } from '@/components/WfoTable/utils/mapSortableAndFilterableValuesToTableColumnConfig';
+import { ColumnType, Pagination } from '@/components/WfoTable/WfoTable';
+import { mapSortableAndFilterableValuesToTableColumnConfig } from '@/components/WfoTable/WfoTable/utils';
 import {
     useDataDisplayParams,
     useShowToastMessage,
@@ -43,15 +46,7 @@ import {
 
 import { WfoMetadataPageLayout } from './WfoMetadataPageLayout';
 
-const PRODUCT_FIELD_PRODUCT_ID: keyof ProductDefinition = 'productId';
 const PRODUCT_FIELD_NAME: keyof ProductDefinition = 'name';
-const PRODUCT_FIELD_DESCRIPTION: keyof ProductDefinition = 'description';
-const PRODUCT_FIELD_TAG: keyof ProductDefinition = 'tag';
-const PRODUCT_FIELD_PRODUCT_TYPE: keyof ProductDefinition = 'productType';
-const PRODUCT_FIELD_STATUS: keyof ProductDefinition = 'status';
-const PRODUCT_FIELD_PRODUCT_BLOCKS: keyof ProductDefinition = 'productBlocks';
-const PRODUCT_FIELD_FIXED_INPUTS: keyof ProductDefinition = 'fixedInputs';
-const PRODUCT_FIELD_CREATED_AT: keyof ProductDefinition = 'createdAt';
 
 type ProductDefinitionExportItem = Omit<
     ProductDefinition,
@@ -93,53 +88,53 @@ export const WfoProductsPage = () => {
             },
         });
 
-    const tableColumns: WfoTableColumns<ProductDefinition> = {
+    const tableColumns: WfoAdvancedTableColumnConfig<ProductDefinition> = {
         productId: {
-            field: PRODUCT_FIELD_PRODUCT_ID,
-            name: t('id'),
+            columnType: ColumnType.DATA,
+            label: t('id'),
             width: '90',
-            render: (value) => <WfoFirstPartUUID UUID={value} />,
+            renderData: (value) => <WfoFirstPartUUID UUID={value} />,
             renderDetails: (value) => value,
         },
         name: {
-            field: PRODUCT_FIELD_NAME,
-            name: t('name'),
+            columnType: ColumnType.DATA,
+            label: t('name'),
             width: '200',
-            render: (name) => (
+            renderData: (name) => (
                 <WfoProductBlockBadge badgeType={BadgeType.PRODUCT}>
                     {name}
                 </WfoProductBlockBadge>
             ),
         },
         tag: {
-            field: PRODUCT_FIELD_TAG,
-            name: t('tag'),
+            columnType: ColumnType.DATA,
+            label: t('tag'),
             width: '120',
-            render: (value) => (
+            renderData: (value) => (
                 <WfoProductBlockBadge badgeType={BadgeType.PRODUCT_TAG}>
                     {value}
                 </WfoProductBlockBadge>
             ),
         },
         description: {
-            field: PRODUCT_FIELD_DESCRIPTION,
-            name: t('description'),
+            columnType: ColumnType.DATA,
+            label: t('description'),
             width: '400',
         },
         productType: {
-            field: PRODUCT_FIELD_PRODUCT_TYPE,
-            name: t('productType'),
+            columnType: ColumnType.DATA,
+            label: t('productType'),
         },
         status: {
-            field: PRODUCT_FIELD_STATUS,
-            name: t('status'),
+            columnType: ColumnType.DATA,
+            label: t('status'),
             width: '90',
-            render: (value) => <WfoProductStatusBadge status={value} />,
+            renderData: (value) => <WfoProductStatusBadge status={value} />,
         },
         fixedInputs: {
-            field: PRODUCT_FIELD_FIXED_INPUTS,
-            name: t('fixedInputs'),
-            render: (fixedInputs) => (
+            columnType: ColumnType.DATA,
+            label: t('fixedInputs'),
+            renderData: (fixedInputs) => (
                 <>
                     {fixedInputs.map((fixedInput, index) => (
                         <WfoProductBlockBadge
@@ -153,9 +148,9 @@ export const WfoProductsPage = () => {
             ),
         },
         productBlocks: {
-            field: PRODUCT_FIELD_PRODUCT_BLOCKS,
-            name: t('productBlocks'),
-            render: (productBlocks) => (
+            columnType: ColumnType.DATA,
+            label: t('productBlocks'),
+            renderData: (productBlocks) => (
                 <>
                     {productBlocks.map((block, index) => (
                         <WfoProductBlockBadge
@@ -169,9 +164,9 @@ export const WfoProductsPage = () => {
             ),
         },
         createdAt: {
-            field: PRODUCT_FIELD_CREATED_AT,
-            name: t('createdAt'),
-            render: (date) => <WfoDateTime dateOrIsoString={date} />,
+            columnType: ColumnType.DATA,
+            label: t('createdAt'),
+            renderData: (date) => <WfoDateTime dateOrIsoString={date} />,
             renderDetails: parseIsoString(parseDateToLocaleDateTimeString),
             clipboardText: parseIsoString(parseDateToLocaleDateTimeString),
         },
@@ -201,6 +196,8 @@ export const WfoProductsPage = () => {
         pageIndex: pageIndex,
         pageSizeOptions: DEFAULT_PAGE_SIZES,
         totalItemCount: totalItems ? totalItems : 0,
+        onChangePage: getPageIndexChangeHandler(setDataDisplayParam),
+        onChangeItemsPerPage: getPageSizeChangeHandler(setDataDisplayParam),
     };
 
     const dataSorting: WfoDataSorting<ProductDefinition> = {
@@ -240,19 +237,16 @@ export const WfoProductsPage = () => {
 
     return (
         <WfoMetadataPageLayout>
-            <WfoTableWithFilter<ProductDefinition>
+            <WfoAdvancedTable
                 data={data?.products ?? []}
-                tableColumns={mapSortableAndFilterableValuesToTableColumnConfig(
+                tableColumnConfig={mapSortableAndFilterableValuesToTableColumnConfig(
                     tableColumns,
                     sortFields,
                     filterFields,
                 )}
-                dataSorting={dataSorting}
+                dataSorting={[dataSorting]}
                 defaultHiddenColumns={tableDefaults?.hiddenColumns}
-                onUpdateDataSort={getDataSortHandler<ProductDefinition>(
-                    setDataDisplayParam,
-                )}
-                onUpdatePage={getPageChangeHandler<ProductDefinition>(
+                onUpdateDataSorting={getDataSortHandler<ProductDefinition>(
                     setDataDisplayParam,
                 )}
                 onUpdateQueryString={getQueryStringHandler<ProductDefinition>(

package/src/pages/metadata/WfoResourceTypesPage.tsx

@@ -3,23 +3,23 @@ import React, { useEffect, useState } from 'react';
 import { useTranslations } from 'next-intl';
 
 import { EuiBadgeGroup } from '@elastic/eui';
-import type { Pagination } from '@elastic/eui/src/components';
 
 import {
     DEFAULT_PAGE_SIZE,
     DEFAULT_PAGE_SIZES,
     METADATA_RESOURCE_TYPES_TABLE_LOCAL_STORAGE_KEY,
     WfoProductBlockBadge,
-    WfoTableWithFilter,
     getDataSortHandler,
-    getPageChangeHandler,
+    getPageIndexChangeHandler,
+    getPageSizeChangeHandler,
     getQueryStringHandler,
 } from '@/components';
-import type {
-    StoredTableConfig,
-    WfoDataSorting,
-    WfoTableColumns,
-} from '@/components';
+import type { StoredTableConfig, WfoDataSorting } from '@/components';
+import { WfoFirstPartUUID } from '@/components';
+import { WfoAdvancedTable } from '@/components/WfoTable/WfoAdvancedTable';
+import { WfoAdvancedTableColumnConfig } from '@/components/WfoTable/WfoAdvancedTable/types';
+import { ColumnType, Pagination } from '@/components/WfoTable/WfoTable';
+import { mapSortableAndFilterableValuesToTableColumnConfig } from '@/components/WfoTable/WfoTable/utils';
 import {
     useDataDisplayParams,
     useShowToastMessage,
@@ -43,18 +43,10 @@ import {
     getCsvFileNameWithDate,
 } from '@/utils/csvDownload';
 
-import { WfoFirstPartUUID } from '../../components/WfoTable/WfoFirstPartUUID';
-import { mapSortableAndFilterableValuesToTableColumnConfig } from '../../components/WfoTable/utils/mapSortableAndFilterableValuesToTableColumnConfig';
 import { WfoMetadataPageLayout } from './WfoMetadataPageLayout';
 
-export const RESOURCE_TYPE_FIELD_ID: keyof ResourceTypeDefinition =
-    'resourceTypeId';
 export const RESOURCE_TYPE_FIELD_TYPE: keyof ResourceTypeDefinition =
     'resourceType';
-export const RESOURCE_TYPE_FIELD_DESCRIPTION: keyof ResourceTypeDefinition =
-    'description';
-export const RESOURCE_TYPE_FIELD_PRODUCT_BLOCKS: keyof ResourceTypeDefinition =
-    'productBlocks';
 
 type ResourceTypeExportItem = Omit<ResourceTypeDefinition, 'productBlocks'> & {
     productBlocks: string;
@@ -92,32 +84,32 @@ export const WfoResourceTypesPage = () => {
             },
         });
 
-    const tableColumns: WfoTableColumns<ResourceTypeDefinition> = {
+    const tableColumns: WfoAdvancedTableColumnConfig<ResourceTypeDefinition> = {
         resourceTypeId: {
-            field: RESOURCE_TYPE_FIELD_ID,
-            name: t('resourceId'),
+            columnType: ColumnType.DATA,
+            label: t('resourceId'),
             width: '90',
-            render: (value) => <WfoFirstPartUUID UUID={value} />,
+            renderData: (value) => <WfoFirstPartUUID UUID={value} />,
             renderDetails: (value) => value,
         },
         resourceType: {
-            field: RESOURCE_TYPE_FIELD_TYPE,
-            name: t('type'),
+            columnType: ColumnType.DATA,
+            label: t('type'),
             width: '200',
-            render: (value) => (
+            renderData: (value) => (
                 <WfoProductBlockBadge badgeType={BadgeType.RESOURCE_TYPE}>
                     {value}
                 </WfoProductBlockBadge>
             ),
         },
         description: {
-            field: RESOURCE_TYPE_FIELD_DESCRIPTION,
-            name: t('description'),
+            columnType: ColumnType.DATA,
+            label: t('description'),
         },
         productBlocks: {
-            field: RESOURCE_TYPE_FIELD_PRODUCT_BLOCKS,
-            name: t('usedInProductBlocks'),
-            render: (productBlocks) => (
+            columnType: ColumnType.DATA,
+            label: t('usedInProductBlocks'),
+            renderData: (productBlocks) => (
                 <>
                     {productBlocks.map((productBlock, index) => (
                         <WfoProductBlockBadge
@@ -176,6 +168,8 @@ export const WfoResourceTypesPage = () => {
         pageIndex: pageIndex,
         pageSizeOptions: DEFAULT_PAGE_SIZES,
         totalItemCount: totalItems ? totalItems : 0,
+        onChangePage: getPageIndexChangeHandler(setDataDisplayParam),
+        onChangeItemsPerPage: getPageSizeChangeHandler(setDataDisplayParam),
     };
     const mapToExportItems = (
         resourceTypesResponse: ResourceTypesResponse,
@@ -191,19 +185,16 @@ export const WfoResourceTypesPage = () => {
     };
     return (
         <WfoMetadataPageLayout>
-            <WfoTableWithFilter<ResourceTypeDefinition>
+            <WfoAdvancedTable
                 data={data ? data.resourceTypes : []}
-                tableColumns={mapSortableAndFilterableValuesToTableColumnConfig(
+                tableColumnConfig={mapSortableAndFilterableValuesToTableColumnConfig(
                     tableColumns,
                     sortFields,
                     filterFields,
                 )}
-                dataSorting={dataSorting}
+                dataSorting={[dataSorting]}
                 defaultHiddenColumns={tableDefaults?.hiddenColumns}
-                onUpdateDataSort={getDataSortHandler<ResourceTypeDefinition>(
-                    setDataDisplayParam,
-                )}
-                onUpdatePage={getPageChangeHandler<ResourceTypeDefinition>(
+                onUpdateDataSorting={getDataSortHandler<ResourceTypeDefinition>(
                     setDataDisplayParam,
                 )}
                 onUpdateQueryString={getQueryStringHandler<ResourceTypeDefinition>(