@orchestrator-ui/orchestrator-ui-components 1.6.0 → 1.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@orchestrator-ui/orchestrator-ui-components",
-    "version": "1.6.0",
+    "version": "1.7.0",
     "license": "Apache-2.0",
     "description": "Library of UI Components used to display the workflow orchestrator frontend",
     "author": {

package/src/components/WfoBadges/WfoProductBlockBadge/WfoProductBlockBadge.tsx

@@ -42,6 +42,7 @@ export function WfoProductBlockBadge({
                     textColor: primaryText,
                 };
             case BadgeType.WORKFLOW:
+            case BadgeType.TASK:
             case BadgeType.PRODUCT:
                 return {
                     badgeColor: toSecondaryColor(danger),

package/src/components/WfoPageTemplate/WfoSidebar/WfoSidebar.tsx

@@ -16,6 +16,7 @@ import {
     PATH_METADATA_PRODUCTS,
     PATH_METADATA_PRODUCT_BLOCKS,
     PATH_METADATA_RESOURCE_TYPES,
+    PATH_METADATA_TASKS,
     PATH_METADATA_WORKFLOWS,
     PATH_SETTINGS,
     PATH_START,
@@ -128,6 +129,15 @@ export const WfoSidebar: FC<WfoSidebarProps> = ({ overrideMenuItems }) => {
                         router.push(PATH_METADATA_WORKFLOWS);
                     },
                 },
+                {
+                    name: t('metadataTasks'),
+                    id: '5.5',
+                    isSelected: router.pathname === PATH_METADATA_TASKS,
+                    onClick: (e) => {
+                        e.preventDefault();
+                        router.push(PATH_METADATA_TASKS);
+                    },
+                },
             ],
         },
         {

package/src/components/WfoPageTemplate/paths.ts

@@ -8,5 +8,6 @@ export const PATH_METADATA_PRODUCTS = '/metadata/products';
 export const PATH_METADATA_PRODUCT_BLOCKS = '/metadata/productblocks';
 export const PATH_METADATA_RESOURCE_TYPES = '/metadata/resource-types';
 export const PATH_METADATA_WORKFLOWS = '/metadata/workflows';
+export const PATH_METADATA_TASKS = '/metadata/tasks';
 export const PATH_TASKS = '/tasks';
 export const PATH_SETTINGS = '/settings';

package/src/components/WfoProcessList/WfoProcessesList.tsx

@@ -67,6 +67,10 @@ export type ProcessListItem = Pick<
     customerAbbreviation: string;
 };
 
+export type ProcessListExportItem = Omit<ProcessListItem, 'subscriptions'> & {
+    subscriptions: string;
+};
+
 export type WfoProcessesListProps = {
     alwaysOnFilters?: FilterQuery<ProcessListItem>[];
     defaultHiddenColumns: TableColumnKeys<ProcessListItem> | undefined;
@@ -264,7 +268,7 @@ export const WfoProcessesList = ({
             onUpdateDataSort={getDataSortHandler(setDataDisplayParam)}
             onExportData={csvDownloadHandler<
                 ProcessListResponse,
-                ProcessListItem
+                ProcessListExportItem
             >(
                 getProcessListForExport,
                 mapGraphQlProcessListExportResultToProcessListItems,

package/src/components/WfoProcessList/processListObjectMappers.ts

@@ -1,7 +1,8 @@
 import { ProcessListResponse } from '@/rtk';
-import { GraphQLSort, GraphqlFilter, Process } from '@/types';
+import { GraphQLSort, GraphqlFilter, Process, Subscription } from '@/types';
+import { getConcatenatedPagedResult } from '@/utils';
 
-import { ProcessListItem } from './WfoProcessesList';
+import { ProcessListExportItem, ProcessListItem } from './WfoProcessesList';
 
 export const mapGraphQlProcessListResultToPageInfo = (
     processesResponse: ProcessListResponse,
@@ -48,7 +49,7 @@ export const mapGraphQlProcessListResultToProcessListItems = (
 
 export const mapGraphQlProcessListExportResultToProcessListItems = (
     processesResponse: ProcessListResponse,
-): ProcessListItem[] =>
+): ProcessListExportItem[] =>
     processesResponse.processes.map((process) => {
         const {
             workflowName,
@@ -77,7 +78,9 @@ export const mapGraphQlProcessListExportResultToProcessListItems = (
             isTask,
             startedAt: new Date(startedAt),
             lastModifiedAt: new Date(lastModifiedAt),
-            subscriptions,
+            subscriptions: getConcatenatedPagedResult<
+                Pick<Subscription, 'subscriptionId' | 'description'>
+            >(subscriptions, ['subscriptionId', 'description']),
             productName: product?.name,
             productTag: product?.tag,
             customer: customer.fullname,

package/src/components/WfoSubscription/WfoSubscriptionGeneral.tsx

@@ -126,6 +126,8 @@ export const WfoSubscriptionGeneral = ({
         ];
     };
 
+    const hasMetadata = Object.entries(subscriptionDetail.metadata).length > 0;
+
     return (
         <EuiFlexGrid direction={'row'}>
             <>
@@ -135,12 +137,14 @@ export const WfoSubscriptionGeneral = ({
                         keyValues={getSubscriptionDetailBlockData()}
                     />
                 </EuiFlexItem>
-                <EuiFlexItem>
-                    <SubscriptionKeyValueBlock
-                        title={t('metadata')}
-                        keyValues={getMetadataBlockData()}
-                    />
-                </EuiFlexItem>
+                {hasMetadata && (
+                    <EuiFlexItem>
+                        <SubscriptionKeyValueBlock
+                            title={t('metadata')}
+                            keyValues={getMetadataBlockData()}
+                        />
+                    </EuiFlexItem>
+                )}
                 <EuiFlexItem>
                     <SubscriptionKeyValueBlock
                         title={t('blockTitleFixedInputs')}

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

@@ -17,5 +17,6 @@ export const METADATA_PRODUCT_BLOCKS_TABLE_LOCAL_STORAGE_KEY =
 export const METADATA_PRODUCT_TABLE_LOCAL_STORAGE_KEY = 'metadataProductTable';
 export const METADATA_WORKFLOWS_TABLE_LOCAL_STORAGE_KEY =
     'metadataWorkflowsTable';
+export const METADATA_TASKS_TABLE_LOCAL_STORAGE_KEY = 'metadataTasksTable';
 
 export const SUBSCRIPTIONS_TABLE_LOCAL_STORAGE_KEY = 'subscriptionsTable';

package/src/components/index.ts

@@ -26,3 +26,4 @@ export * from './WfoErrorBoundary';
 export * from './WfoWorkflowSteps';
 export * from './WfoNoResults';
 export * from './WfoStartButton';
+export * from './WfoSubscriptionsList';

package/src/messages/en-GB.json

@@ -5,6 +5,7 @@
         "metadataProductblocks": "Product blocks",
         "metadataResourceTypes": "Resource types",
         "metadataWorkflows": "Workflows",
+        "metadataTasks": "Tasks",
         "mobileTitle": "Main menu",
         "settings": "Settings",
         "start": "Start",
@@ -121,11 +122,13 @@
         }
     },
     "metadata": {
+        "title": "Metadata",
         "tabs": {
             "products": "Products",
             "productBlocks": "Product blocks",
             "resourceTypes": "Resource types",
-            "workflows": "Workflows"
+            "workflows": "Workflows",
+            "tasks": "Tasks"
         },
         "products": {
             "id": "ID",
@@ -162,6 +165,13 @@
             "target": "Target",
             "productTags": "Product tags",
             "createdAt": "Created"
+        },
+        "tasks": {
+            "name": "Task",
+            "description": "Task description",
+            "target": "Target",
+            "productTags": "Product tags",
+            "createdAt": "Created"
         }
     },
     "processes": {

package/src/messages/nl-NL.json

@@ -5,6 +5,7 @@
         "metadataProductblocks": "Product blocks",
         "metadataResourceTypes": "Resource types",
         "metadataWorkflows": "Workflows",
+        "metadataTasks": "Taken",
         "mobileTitle": "Hoofdmenu",
         "settings": "Settings",
         "start": "Start",
@@ -125,7 +126,8 @@
             "products": "Producten",
             "productBlocks": "Product blocks",
             "resourceTypes": "Resource types",
-            "workflows": "Workflows"
+            "workflows": "Workflows",
+            "tasks": "Taken"
         },
         "products": {
             "id": "ID",
@@ -162,6 +164,13 @@
             "target": "Target",
             "productTags": "Product tags",
             "createdAt": "Aangemaakt"
+        },
+        "tasks": {
+            "name": "Taak",
+            "description": "Taak beschrijving",
+            "target": "Target",
+            "productTags": "Product tags",
+            "createdAt": "Aangemaakt"
         }
     },
     "processes": {

package/src/pages/metadata/WfoMetadataPageLayout.tsx

@@ -17,7 +17,7 @@ export interface MetaDataTab {
     path: string;
 }
 
-const metaDataTabs: MetaDataTab[] = [
+export const metaDataTabs: MetaDataTab[] = [
     {
         id: 1,
         translationKey: 'products',
@@ -34,10 +34,15 @@ const metaDataTabs: MetaDataTab[] = [
         path: '/metadata/resource-types',
     },
     {
-        id: 5,
+        id: 4,
         translationKey: 'workflows',
         path: '/metadata/workflows',
     },
+    {
+        id: 5,
+        translationKey: 'tasks',
+        path: '/metadata/tasks',
+    },
 ];
 
 export const WfoMetadataPageLayout = ({
@@ -45,14 +50,14 @@ export const WfoMetadataPageLayout = ({
     tabs = metaDataTabs,
 }: MetadataLayoutProps) => {
     const router = useRouter();
-    const t = useTranslations('metadata.tabs');
+    const t = useTranslations('metadata');
     const currentPath = router.pathname;
 
     return (
         <>
             <EuiSpacer />
 
-            <EuiPageHeader pageTitle="Metadata" />
+            <EuiPageHeader pageTitle={t('title')} />
             <EuiSpacer size="m" />
             <EuiTabs>
                 {tabs.map(({ id, translationKey: name, path }) => (
@@ -61,7 +66,7 @@ export const WfoMetadataPageLayout = ({
                         isSelected={path === currentPath}
                         onClick={() => router.push(path)}
                     >
-                        {t(name)}
+                        {t(`tabs.${name}`)}
                     </EuiTab>
                 ))}
             </EuiTabs>

package/src/pages/metadata/WfoProductBlocksPage.tsx

@@ -28,6 +28,7 @@ import {
     useStoredTableConfig,
 } from '@/hooks';
 import { useGetProductBlocksQuery, useLazyGetProductBlocksQuery } from '@/rtk';
+import type { ProductBlocksResponse } from '@/rtk';
 import {
     BadgeType,
     GraphqlQueryVariables,
@@ -36,6 +37,7 @@ import {
 } from '@/types';
 import {
     csvDownloadHandler,
+    getConcatenatedResult,
     getCsvFileNameWithDate,
     getQueryVariablesForExport,
     parseDateToLocaleDateTimeString,
@@ -59,6 +61,14 @@ const PRODUCT_BLOCK_FIELD_RESOURCE_TYPES: keyof ProductBlockDefinition =
 const PRODUCT_BLOCK_FIELD_PRODUCT_BLOCKS: keyof ProductBlockDefinition =
     'dependsOn';
 
+type ProductBlockDefinitionExportItem = Omit<
+    ProductBlockDefinition,
+    'resourceTypes' | 'dependsOn'
+> & {
+    resourceTypes: string;
+    dependsOn: string;
+};
+
 export const WfoProductBlocksPage = () => {
     const t = useTranslations('metadata.productBlocks');
     const tError = useTranslations('errors');
@@ -218,6 +228,20 @@ export const WfoProductBlocksPage = () => {
         totalItemCount: totalItems ? totalItems : 0,
     };
 
+    const mapToExportItems = (
+        productBlocksResponse: ProductBlocksResponse,
+    ): ProductBlockDefinitionExportItem[] => {
+        const { productBlocks } = productBlocksResponse;
+        return productBlocks.map((productBlock) => ({
+            ...productBlock,
+            resourceTypes: getConcatenatedResult(productBlock.resourceTypes, [
+                'resourceType',
+                'description',
+            ]),
+            dependsOn: getConcatenatedResult(productBlock.dependsOn, ['name']),
+        }));
+    };
+
     return (
         <WfoMetadataPageLayout>
             <WfoTableWithFilter<ProductBlockDefinition>
@@ -247,7 +271,7 @@ export const WfoProductBlocksPage = () => {
                 }
                 onExportData={csvDownloadHandler(
                     getProductBlocksForExport,
-                    (data) => data.productBlocks,
+                    mapToExportItems,
                     (data) => data.pageInfo,
                     Object.keys(tableColumns),
                     getCsvFileNameWithDate('ProductBlocks'),

package/src/pages/metadata/WfoProductsPage.tsx

@@ -26,9 +26,11 @@ import {
     useStoredTableConfig,
 } from '@/hooks';
 import { useGetProductsQuery, useLazyGetProductsQuery } from '@/rtk';
+import { ProductsResponse } from '@/rtk';
 import type { GraphqlQueryVariables, ProductDefinition } from '@/types';
 import { BadgeType, SortOrder } from '@/types';
 import {
+    getConcatenatedResult,
     getQueryVariablesForExport,
     parseDateToLocaleDateTimeString,
     parseIsoString,
@@ -50,6 +52,14 @@ 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,
+    'fixedInputs' | 'productBlocks'
+> & {
+    fixedInputs: string;
+    productBlocks: string;
+};
+
 export const WfoProductsPage = () => {
     const t = useTranslations('metadata.products');
     const tError = useTranslations('errors');
@@ -197,6 +207,22 @@ export const WfoProductsPage = () => {
         sortOrder: sortBy?.order ?? SortOrder.ASC,
     };
 
+    const mapToExportItems = (
+        productsResponse: ProductsResponse,
+    ): ProductDefinitionExportItem[] => {
+        const { products } = productsResponse;
+        return products.map((product) => ({
+            ...product,
+            fixedInputs: getConcatenatedResult(product.fixedInputs, [
+                'name',
+                'value',
+            ]),
+            productBlocks: getConcatenatedResult(product.productBlocks, [
+                'name',
+            ]),
+        }));
+    };
+
     return (
         <WfoMetadataPageLayout>
             <WfoTableWithFilter<ProductDefinition>
@@ -224,7 +250,7 @@ export const WfoProductsPage = () => {
                 localStorageKey={METADATA_PRODUCT_TABLE_LOCAL_STORAGE_KEY}
                 onExportData={csvDownloadHandler(
                     getProductsForExport,
-                    (data) => data?.products ?? [],
+                    mapToExportItems,
                     (data) => data?.pageInfo || {},
                     Object.keys(tableColumns),
                     getCsvFileNameWithDate('Products'),

package/src/pages/metadata/WfoResourceTypesPage.tsx

@@ -25,14 +25,18 @@ import {
     useShowToastMessage,
     useStoredTableConfig,
 } from '@/hooks';
-import { useGetResourceTypesQuery, useLazyGetResourceTypesQuery } from '@/rtk';
+import {
+    ResourceTypesResponse,
+    useGetResourceTypesQuery,
+    useLazyGetResourceTypesQuery,
+} from '@/rtk';
 import {
     BadgeType,
     GraphqlQueryVariables,
     ResourceTypeDefinition,
     SortOrder,
 } from '@/types';
-import { getQueryVariablesForExport } from '@/utils';
+import { getConcatenatedResult, getQueryVariablesForExport } from '@/utils';
 import {
     csvDownloadHandler,
     getCsvFileNameWithDate,
@@ -51,6 +55,10 @@ export const RESOURCE_TYPE_FIELD_DESCRIPTION: keyof ResourceTypeDefinition =
 export const RESOURCE_TYPE_FIELD_PRODUCT_BLOCKS: keyof ResourceTypeDefinition =
     'productBlocks';
 
+type ResourceTypeExportItem = Omit<ResourceTypeDefinition, 'productBlocks'> & {
+    productBlocks: string;
+};
+
 export const WfoResourceTypesPage = () => {
     const t = useTranslations('metadata.resourceTypes');
     const tError = useTranslations('errors');
@@ -168,7 +176,18 @@ export const WfoResourceTypesPage = () => {
         pageSizeOptions: DEFAULT_PAGE_SIZES,
         totalItemCount: totalItems ? totalItems : 0,
     };
-
+    const mapToExportItems = (
+        resourceTypesResponse: ResourceTypesResponse,
+    ): ResourceTypeExportItem[] => {
+        const { resourceTypes } = resourceTypesResponse;
+        return resourceTypes.map((resourceType) => ({
+            ...resourceType,
+            productBlocks: getConcatenatedResult(resourceType.productBlocks, [
+                'productBlockId',
+                'name',
+            ]),
+        }));
+    };
     return (
         <WfoMetadataPageLayout>
             <WfoTableWithFilter<ResourceTypeDefinition>
@@ -198,7 +217,7 @@ export const WfoResourceTypesPage = () => {
                 }
                 onExportData={csvDownloadHandler(
                     getResourceTypesForExport,
-                    (data) => data.resourceTypes,
+                    mapToExportItems,
                     (data) => data.pageInfo,
                     Object.keys(tableColumns),
                     getCsvFileNameWithDate('ResourceTypes'),

package/src/pages/metadata/WfoTasksPage.tsx

@@ -0,0 +1,226 @@
+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 { WfoTableWithFilter, WfoWorkflowTargetBadge } from '@/components';
+import type { WfoDataSorting, WfoTableColumns } from '@/components';
+import { StoredTableConfig } from '@/components';
+import {
+    DEFAULT_PAGE_SIZE,
+    DEFAULT_PAGE_SIZES,
+    METADATA_TASKS_TABLE_LOCAL_STORAGE_KEY,
+    WfoProductBlockBadge,
+} from '@/components';
+import {
+    getDataSortHandler,
+    getPageChangeHandler,
+    getQueryStringHandler,
+} from '@/components';
+import { WfoDateTime } from '@/components/WfoDateTime/WfoDateTime';
+import { mapSortableAndFilterableValuesToTableColumnConfig } from '@/components/WfoTable/utils/mapSortableAndFilterableValuesToTableColumnConfig';
+import {
+    useDataDisplayParams,
+    useShowToastMessage,
+    useStoredTableConfig,
+} from '@/hooks';
+import { useGetTasksQuery, useLazyGetTasksQuery } from '@/rtk';
+import type { GraphqlQueryVariables, TaskDefinition } from '@/types';
+import { BadgeType, SortOrder } from '@/types';
+import {
+    getQueryVariablesForExport,
+    onlyUnique,
+    parseDateToLocaleDateTimeString,
+    parseIsoString,
+} from '@/utils';
+import {
+    csvDownloadHandler,
+    getCsvFileNameWithDate,
+} from '@/utils/csvDownload';
+
+import { WfoMetadataPageLayout } from './WfoMetadataPageLayout';
+import {
+    graphQlTaskListMapper,
+    mapTaskDefinitionToTaskListItem,
+} from './taskListObjectMapper';
+
+export type TaskListItem = Pick<
+    TaskDefinition,
+    'name' | 'description' | 'target' | 'createdAt'
+> & {
+    productTags: string[];
+};
+
+export const WfoTasksPage = () => {
+    const t = useTranslations('metadata.tasks');
+    const tError = useTranslations('errors');
+    const { showToastMessage } = useShowToastMessage();
+
+    const [tableDefaults, setTableDefaults] =
+        useState<StoredTableConfig<TaskListItem>>();
+
+    const getStoredTableConfig = useStoredTableConfig<TaskListItem>(
+        METADATA_TASKS_TABLE_LOCAL_STORAGE_KEY,
+    );
+
+    useEffect(() => {
+        const storedConfig = getStoredTableConfig();
+
+        if (storedConfig) {
+            setTableDefaults(storedConfig);
+        }
+    }, [getStoredTableConfig]);
+
+    const { dataDisplayParams, setDataDisplayParam } =
+        useDataDisplayParams<TaskListItem>({
+            // TODO: Improvement: A default pageSize value is set to avoid a graphql error when the query is executed
+            // the fist time before the useEffect has populated the tableDefaults. Better is to create a way for
+            // the query to wait for the values to be available
+            // https://github.com/workfloworchestrator/orchestrator-ui/issues/261
+            pageSize: tableDefaults?.selectedPageSize || DEFAULT_PAGE_SIZE,
+            sortBy: {
+                field: 'name',
+                order: SortOrder.ASC,
+            },
+        });
+
+    const tableColumns: WfoTableColumns<TaskListItem> = {
+        name: {
+            field: 'name',
+            name: t('name'),
+            width: '20%',
+            render: (name) => (
+                <WfoProductBlockBadge badgeType={BadgeType.TASK}>
+                    {name}
+                </WfoProductBlockBadge>
+            ),
+        },
+        description: {
+            field: 'description',
+            name: t('description'),
+            width: '40%',
+        },
+        target: {
+            field: 'target',
+            name: t('target'),
+            width: '15%',
+            render: (target) => <WfoWorkflowTargetBadge target={target} />,
+        },
+        productTags: {
+            field: 'productTags',
+            name: t('productTags'),
+            width: '20%',
+            render: (productTags) => (
+                <>
+                    {productTags
+                        ?.filter(onlyUnique)
+                        .map((productTag, index) => (
+                            <WfoProductBlockBadge
+                                key={index}
+                                badgeType={BadgeType.PRODUCT_TAG}
+                            >
+                                {productTag}
+                            </WfoProductBlockBadge>
+                        ))}
+                </>
+            ),
+            renderDetails: (productTags) => (
+                <EuiBadgeGroup gutterSize="s">
+                    {productTags
+                        ?.filter(onlyUnique)
+                        .map((productTag, index) => (
+                            <WfoProductBlockBadge
+                                key={index}
+                                badgeType={BadgeType.PRODUCT_TAG}
+                            >
+                                {productTag}
+                            </WfoProductBlockBadge>
+                        ))}
+                </EuiBadgeGroup>
+            ),
+        },
+        createdAt: {
+            field: 'createdAt',
+            name: t('createdAt'),
+            width: '15%',
+            render: (date) => <WfoDateTime dateOrIsoString={date} />,
+            renderDetails: parseIsoString(parseDateToLocaleDateTimeString),
+            clipboardText: parseIsoString(parseDateToLocaleDateTimeString),
+        },
+    };
+
+    const { pageSize, pageIndex, sortBy, queryString } = dataDisplayParams;
+
+    const taskListQueryVariables: GraphqlQueryVariables<TaskDefinition> = {
+        first: pageSize,
+        after: pageIndex * pageSize,
+        sortBy: graphQlTaskListMapper(sortBy),
+        query: queryString || undefined,
+    };
+    const { data, isFetching, isError } = useGetTasksQuery(
+        taskListQueryVariables,
+    );
+
+    const [getTasksTrigger, { isFetching: isFetchingCsv }] =
+        useLazyGetTasksQuery();
+
+    const getTasksForExport = () =>
+        getTasksTrigger(
+            getQueryVariablesForExport(taskListQueryVariables),
+        ).unwrap();
+
+    const dataSorting: WfoDataSorting<TaskListItem> = {
+        field: sortBy?.field ?? 'name',
+        sortOrder: sortBy?.order ?? SortOrder.ASC,
+    };
+
+    const { totalItems, sortFields, filterFields } = data?.pageInfo || {};
+
+    const pagination: Pagination = {
+        pageSize: pageSize,
+        pageIndex: pageIndex,
+        pageSizeOptions: DEFAULT_PAGE_SIZES,
+        totalItemCount: totalItems ? totalItems : 0,
+    };
+
+    return (
+        <WfoMetadataPageLayout>
+            <WfoTableWithFilter<TaskListItem>
+                data={data ? mapTaskDefinitionToTaskListItem(data.tasks) : []}
+                tableColumns={mapSortableAndFilterableValuesToTableColumnConfig(
+                    tableColumns,
+                    sortFields,
+                    filterFields,
+                )}
+                dataSorting={dataSorting}
+                defaultHiddenColumns={tableDefaults?.hiddenColumns}
+                onUpdateDataSort={getDataSortHandler<TaskListItem>(
+                    setDataDisplayParam,
+                )}
+                onUpdatePage={getPageChangeHandler<TaskListItem>(
+                    setDataDisplayParam,
+                )}
+                onUpdateQueryString={getQueryStringHandler<TaskListItem>(
+                    setDataDisplayParam,
+                )}
+                pagination={pagination}
+                isLoading={isFetching}
+                hasError={isError}
+                queryString={queryString}
+                localStorageKey={METADATA_TASKS_TABLE_LOCAL_STORAGE_KEY}
+                onExportData={csvDownloadHandler(
+                    getTasksForExport,
+                    (data) => data.tasks,
+                    (data) => data.pageInfo,
+                    Object.keys(tableColumns),
+                    getCsvFileNameWithDate('Tasks'),
+                    showToastMessage,
+                    tError,
+                )}
+                exportDataIsLoading={isFetchingCsv}
+            />
+        </WfoMetadataPageLayout>
+    );
+};