@orchestrator-ui/orchestrator-ui-components 7.1.0 → 7.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@orchestrator-ui/orchestrator-ui-components",
-    "version": "7.1.0",
+    "version": "7.2.0",
     "license": "Apache-2.0",
     "description": "Library of UI Components used to display the workflow orchestrator frontend",
     "author": {
@@ -55,7 +55,7 @@
         "next-query-params": "^5.0.0",
         "object-hash": "^3.0.0",
         "prism-themes": "^1.9.0",
-        "pydantic-forms": "^1.0.0",
+        "pydantic-forms": "^1.0.1",
         "react-diff-view": "^3.2.0",
         "react-draggable": "^4.4.6",
         "react-redux": "^9.1.2",

package/src/components/WfoBadges/WfoScheduledTasksBadges/WfoScheduledTasksBadges.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+
+import { EuiFlexGroup, EuiFlexItem, EuiToolTip } from '@elastic/eui';
+
+import { WfoScheduledTaskOnce, WfoScheduledTaskRecurring } from '@/icons';
+
+const WfoWorkflowScheduleIcon = ({
+    workflowSchedule,
+}: {
+    workflowSchedule: string;
+}) => {
+    if (workflowSchedule.includes('date[')) {
+        return <WfoScheduledTaskOnce />;
+    }
+    return <WfoScheduledTaskRecurring />;
+};
+
+export const WfoScheduledTasksBadges = ({
+    workflowSchedules,
+}: {
+    workflowSchedules?: string[];
+}) => {
+    return (
+        <EuiFlexGroup gutterSize="s" justifyContent="flexStart">
+            {workflowSchedules?.map((workflowSchedule) => {
+                return (
+                    <EuiFlexItem grow={0} key={workflowSchedule}>
+                        <EuiToolTip content={workflowSchedule}>
+                            <WfoWorkflowScheduleIcon
+                                workflowSchedule={workflowSchedule}
+                            />
+                        </EuiToolTip>
+                    </EuiFlexItem>
+                );
+            })}
+        </EuiFlexGroup>
+    );
+};

package/src/components/WfoBadges/WfoScheduledTasksBadges/WfoScheduledTasksBadgesContainer.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+import { WfoError } from '@/components/WfoError';
+import { WfoLoading } from '@/components/WfoLoading';
+import { useGetSchedulesForWorkflow } from '@/hooks';
+import { ScheduledTaskDefinition } from '@/types';
+
+import { WfoScheduledTasksBadges } from './WfoScheduledTasksBadges';
+
+export const WfoScheduledTasksBadgesContainer = ({
+    workflowId,
+}: {
+    workflowId: ScheduledTaskDefinition['workflowId'];
+}) => {
+    const { workflowSchedules, isFetching, isError } =
+        useGetSchedulesForWorkflow(workflowId);
+
+    if (isFetching) {
+        return <WfoLoading />;
+    }
+
+    if (isError) {
+        return <WfoError />;
+    }
+
+    return <WfoScheduledTasksBadges workflowSchedules={workflowSchedules} />;
+};

package/src/components/WfoBadges/WfoScheduledTasksBadges/index.ts

@@ -0,0 +1,2 @@
+export * from './WfoScheduledTasksBadgesContainer';
+export * from './WfoScheduledTasksBadges';

package/src/components/WfoBadges/index.ts

@@ -10,3 +10,4 @@ export * from './WfoHeaderBadge';
 export * from './WfoProductStatusBadge';
 export * from './WfoWorkflowTargetBadge';
 export * from './WfoWebsocketStatusBadge';
+export * from './WfoScheduledTasksBadges';

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

@@ -24,6 +24,7 @@ import {
     PATH_METADATA_PRODUCTS,
     PATH_METADATA_PRODUCT_BLOCKS,
     PATH_METADATA_RESOURCE_TYPES,
+    PATH_METADATA_SCHEDULED_TASKS,
     PATH_METADATA_TASKS,
     PATH_METADATA_WORKFLOWS,
     PATH_SETTINGS,
@@ -220,6 +221,24 @@ export const WfoSidebar: FC<WfoSidebarProps> = ({
                         />
                     ),
                 },
+                {
+                    name: t('metadataScheduledTasks'),
+                    id: 'metadata-scheduled-tasks',
+                    isSelected:
+                        router.pathname === PATH_METADATA_SCHEDULED_TASKS,
+                    href: PATH_METADATA_SCHEDULED_TASKS,
+                    renderItem: () => (
+                        <WfoMenuItemLink
+                            path={PATH_METADATA_SCHEDULED_TASKS}
+                            translationString="metadataScheduledTasks"
+                            isSelected={
+                                router.pathname ===
+                                PATH_METADATA_SCHEDULED_TASKS
+                            }
+                            isSubItem={true}
+                        />
+                    ),
+                },
             ],
         },
         {

package/src/components/WfoPageTemplate/paths.ts

@@ -9,5 +9,6 @@ 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_METADATA_SCHEDULED_TASKS = '/metadata/scheduled-tasks';
 export const PATH_TASKS = '/tasks';
 export const PATH_SETTINGS = '/settings';

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

@@ -50,6 +50,7 @@ export type WfoAdvancedTableProps<T extends object> = Omit<
     error?: WfoGraphqlError[];
     onUpdateQueryString: (queryString: string) => void;
     onExportData?: () => void;
+    disableSearch?: boolean;
 };
 
 export const WfoAdvancedTable = <T extends object>({
@@ -63,6 +64,7 @@ export const WfoAdvancedTable = <T extends object>({
     error,
     onUpdateQueryString,
     onExportData,
+    disableSearch = false,
     ...tableProps
 }: WfoAdvancedTableProps<T>) => {
     const { theme } = useOrchestratorTheme();
@@ -159,18 +161,22 @@ export const WfoAdvancedTable = <T extends object>({
         <>
             <EuiFlexGroup alignItems="center">
                 <EuiFlexItem>
-                    <WfoSearchField
-                        queryString={queryString}
-                        onUpdateQueryString={onUpdateQueryString}
-                    />
+                    {!disableSearch && (
+                        <WfoSearchField
+                            queryString={queryString}
+                            onUpdateQueryString={onUpdateQueryString}
+                        />
+                    )}
                 </EuiFlexItem>
                 <EuiFlexItem grow={false}>
-                    <EuiButtonIcon
-                        onClick={() => setShowSearchModal(true)}
-                        iconSize={'xl'}
-                        iconType={'iInCircle'}
-                        aria-label={t('searchModalTitle')}
-                    />
+                    {!disableSearch && (
+                        <EuiButtonIcon
+                            onClick={() => setShowSearchModal(true)}
+                            iconSize={'xl'}
+                            iconType={'iInCircle'}
+                            aria-label={t('searchModalTitle')}
+                        />
+                    )}
                 </EuiFlexItem>
                 <EuiButton onClick={() => setShowSettingsModal(true)}>
                     {t('editColumns')}

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

@@ -15,6 +15,7 @@ export const METADATA_RESOURCE_TYPES_TABLE_LOCAL_STORAGE_KEY =
 export const METADATA_PRODUCT_BLOCKS_TABLE_LOCAL_STORAGE_KEY =
     'metadataProductBlocksTable';
 export const METADATA_PRODUCT_TABLE_LOCAL_STORAGE_KEY = 'metadataProductTable';
+export const METADATA_SCHEDULES_LOCAL_STORAGE_KEY = 'metadataScheduleTable';
 export const METADATA_WORKFLOWS_TABLE_LOCAL_STORAGE_KEY =
     'metadataWorkflowsTable';
 export const METADATA_TASKS_TABLE_LOCAL_STORAGE_KEY = 'metadataTasksTable';

package/src/configuration/constants.ts

@@ -36,3 +36,4 @@ 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_SCHEDULE_ENDPOINT = 'schedule';

package/src/configuration/version.ts

@@ -1 +1 @@
-export const ORCHESTRATOR_UI_LIBRARY_VERSION = '7.1.0';
+export const ORCHESTRATOR_UI_LIBRARY_VERSION = '7.2.0';

package/src/hooks/index.ts

@@ -11,3 +11,5 @@ export * from './useWfoErrorMonitoring';
 export * from './useWfoSession';
 export * from './useGetOrchestratorConfig';
 export * from './useBackendAvailability';
+export * from './useGetSchedulesForWorkflow';
+export * from './useGetWorkflowNameById';

package/src/hooks/useGetSchedulesForWorkflow.tsx

@@ -0,0 +1,30 @@
+import { NUMBER_OF_ITEMS_REPRESENTING_ALL_ITEMS } from '@/configuration';
+import { useGetScheduledTasksQuery } from '@/rtk';
+import { ScheduledTaskDefinition } from '@/types';
+
+export type UseGetSchedulesForWorkflowReturnProps = {
+    workflowSchedules: ScheduledTaskDefinition['trigger'][];
+    isFetching: boolean;
+    isError: boolean;
+};
+
+export const useGetSchedulesForWorkflow = (
+    workflowId: ScheduledTaskDefinition['workflowId'],
+) => {
+    const { data, isFetching, isError } = useGetScheduledTasksQuery({
+        first: NUMBER_OF_ITEMS_REPRESENTING_ALL_ITEMS,
+        after: 0,
+    });
+
+    const workflowSchedules = isFetching
+        ? []
+        : data?.schedules
+              .filter((scheduledTaskDefinition) => {
+                  return scheduledTaskDefinition.workflowId === workflowId;
+              })
+              .map((scheduledTaskDefinition) => {
+                  return scheduledTaskDefinition.trigger;
+              });
+
+    return { workflowSchedules, isFetching, isError };
+};

package/src/hooks/useGetWorkflowNameById.tsx

@@ -0,0 +1,23 @@
+import { NUMBER_OF_ITEMS_REPRESENTING_ALL_ITEMS } from '@/configuration';
+import { useGetTasksQuery } from '@/rtk';
+import { ScheduledTaskDefinition } from '@/types';
+
+export type UseGetWorkflowNameByIdReturnProps = {
+    workflowName: string;
+};
+
+export const useGetWorkflowNameById = (
+    workflowId: ScheduledTaskDefinition['workflowId'],
+) => {
+    const { data, isFetching, isError } = useGetTasksQuery({
+        first: NUMBER_OF_ITEMS_REPRESENTING_ALL_ITEMS,
+        after: 0,
+    });
+
+    const workflowName =
+        isFetching || isError
+            ? ''
+            : data?.tasks.find((task) => task.workflowId === workflowId)?.name;
+
+    return { workflowName };
+};

package/src/icons/heroicons/WfoScheduledTaskOnce.tsx

@@ -0,0 +1,32 @@
+import React, { FC } from 'react';
+
+import { WfoIconProps } from '@/icons';
+
+import { withWfoHeroIconsWrapper } from './WfoHeroIconsWrapper';
+
+const WfoScheduledTaskOnceSvg: FC<WfoIconProps> = ({
+    width = 20,
+    height = 20,
+    color = 'currentColor',
+}) => (
+    <svg
+        width={width}
+        height={height}
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        strokeWidth={1.5}
+        stroke={color}
+        className="size-6"
+    >
+        <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
+        />
+    </svg>
+);
+
+export const WfoScheduledTaskOnce = withWfoHeroIconsWrapper(
+    WfoScheduledTaskOnceSvg,
+);

package/src/icons/heroicons/WfoScheduledTaskRecurring.tsx

@@ -0,0 +1,32 @@
+import React, { FC } from 'react';
+
+import { WfoIconProps } from '@/icons';
+
+import { withWfoHeroIconsWrapper } from './WfoHeroIconsWrapper';
+
+export const WfoScheduledTaskRecurringSvg: FC<WfoIconProps> = ({
+    width = 20,
+    height = 20,
+    color = 'currentColor',
+}) => (
+    <svg
+        width={width}
+        height={height}
+        xmlns="http://www.w3.org/2000/svg"
+        stroke={color}
+        fill="none"
+        viewBox="0 0 24 24"
+        strokeWidth={1.5}
+        className="size-6"
+    >
+        <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M19.5 12c0-1.232-.046-2.453-.138-3.662a4.006 4.006 0 0 0-3.7-3.7 48.678 48.678 0 0 0-7.324 0 4.006 4.006 0 0 0-3.7 3.7c-.017.22-.032.441-.046.662M19.5 12l3-3m-3 3-3-3m-12 3c0 1.232.046 2.453.138 3.662a4.006 4.006 0 0 0 3.7 3.7 48.656 48.656 0 0 0 7.324 0 4.006 4.006 0 0 0 3.7-3.7c.017-.22.032-.441.046-.662M4.5 12l3 3m-3-3-3 3"
+        />
+    </svg>
+);
+
+export const WfoScheduledTaskRecurring = withWfoHeroIconsWrapper(
+    WfoScheduledTaskRecurringSvg,
+);

package/src/icons/heroicons/index.ts

@@ -8,3 +8,5 @@ export * from './WfoSquareStack3dStack';
 export * from './WfoBracketSquare';
 export * from './WfoCommandLine';
 export * from './WfoTableCells';
+export * from './WfoScheduledTaskRecurring';
+export * from './WfoScheduledTaskOnce';

package/src/messages/en-GB.json

@@ -9,6 +9,7 @@
         "metadataResourceTypes": "Resource types",
         "metadataWorkflows": "Workflows",
         "metadataTasks": "Tasks",
+        "metadataScheduledTasks": "Scheduled tasks",
         "mobileTitle": "Main menu",
         "settings": "Settings",
         "subscriptions": "Subscriptions",
@@ -151,7 +152,8 @@
             "productBlocks": "Product blocks",
             "resourceTypes": "Resource types",
             "workflows": "Workflows",
-            "tasks": "Tasks"
+            "tasks": "Tasks",
+            "scheduledTasks": "Scheduled tasks"
         },
         "products": {
             "id": "ID",
@@ -196,7 +198,15 @@
             "description": "Task description",
             "target": "Target",
             "productTags": "Product tags",
+            "scheduled": "Scheduled",
             "createdAt": "Created"
+        },
+        "scheduledTasks": {
+            "task": "Task",
+            "taskDescription": "Task description",
+            "nextRuntime": "Next runtime",
+            "schedule": "Schedule",
+            "interval": "Interval"
         }
     },
     "processes": {

package/src/messages/nl-NL.json

@@ -9,6 +9,7 @@
         "metadataResourceTypes": "Resource types",
         "metadataWorkflows": "Workflows",
         "metadataTasks": "Taken",
+        "metadataScheduledTasks": "Scheduled tasks",
         "mobileTitle": "Hoofdmenu",
         "settings": "Settings",
         "subscriptions": "Subscriptions",
@@ -196,7 +197,15 @@
             "description": "Taak beschrijving",
             "target": "Target",
             "productTags": "Product tags",
-            "createdAt": "Aangemaakt"
+            "createdAt": "Aangemaakt",
+            "scheduled": "Schedule"
+        },
+        "scheduledTasks": {
+            "task": "Taak",
+            "taskDescription": "Taak beschrijving",
+            "nextRuntime": "Volgende runtime",
+            "schedule": "Schedule",
+            "interval": "Interval"
         }
     },
     "processes": {

package/src/pages/metadata/WfoMetadataPageLayout.tsx

@@ -45,6 +45,11 @@ export const metaDataTabs: MetaDataTab[] = [
         translationKey: 'tasks',
         path: '/metadata/tasks',
     },
+    {
+        id: 6,
+        translationKey: 'scheduledTasks',
+        path: '/metadata/scheduled-tasks',
+    },
 ];
 
 export const WfoMetadataPageLayout = ({
@@ -70,7 +75,7 @@ export const WfoMetadataPageLayout = ({
                     </EuiTab>
                 ))}
             </EuiTabs>
-            <EuiSpacer size="xxl" />
+            <EuiSpacer size="l" />
             {children}
         </>
     );

package/src/pages/metadata/WfoScheduledTasksPage.tsx

@@ -0,0 +1,223 @@
+import React, { useEffect, useState } from 'react';
+
+import { useTranslations } from 'next-intl';
+
+import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+
+import {
+    WfoDataSorting,
+    WfoProductBlockBadge,
+    WfoScheduledTasksBadges,
+    getPageIndexChangeHandler,
+    getPageSizeChangeHandler,
+} from '@/components';
+import {
+    DEFAULT_PAGE_SIZE,
+    DEFAULT_PAGE_SIZES,
+    METADATA_SCHEDULES_LOCAL_STORAGE_KEY,
+    StoredTableConfig,
+    getDataSortHandler,
+    getQueryStringHandler,
+} 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,
+    useGetWorkflowNameById,
+    useShowToastMessage,
+    useStoredTableConfig,
+} from '@/hooks';
+import {
+    ScheduledTasksResponse,
+    useGetScheduledTasksQuery,
+    useLazyGetScheduledTasksQuery,
+} from '@/rtk';
+import { mapRtkErrorToWfoError } from '@/rtk/utils';
+import { BadgeType } from '@/types';
+import type { GraphqlQueryVariables, ScheduledTaskDefinition } from '@/types';
+import { SortOrder } from '@/types';
+import { formatDate } from '@/utils';
+import {
+    getQueryVariablesForExport,
+    parseDateToLocaleDateTimeString,
+    parseIsoString,
+} from '@/utils';
+import {
+    csvDownloadHandler,
+    getCsvFileNameWithDate,
+} from '@/utils/csvDownload';
+
+import { WfoMetadataPageLayout } from './WfoMetadataPageLayout';
+
+const TASK_NAME_FIELD: keyof ScheduledTaskDefinition = 'name';
+
+type ScheduledTasksDefinitionExportItem = ScheduledTaskDefinition;
+
+const WfoWorkflowNameById = ({ workflowId }: { workflowId: string }) => {
+    const { workflowName } = useGetWorkflowNameById(workflowId);
+    return workflowName ? (
+        <WfoProductBlockBadge badgeType={BadgeType.TASK}>
+            {workflowName}
+        </WfoProductBlockBadge>
+    ) : (
+        ''
+    );
+};
+
+export const WfoScheduledTasksPage = () => {
+    const t = useTranslations('metadata.scheduledTasks');
+    const tError = useTranslations('errors');
+    const { showToastMessage } = useShowToastMessage();
+    const [tableDefaults, setTableDefaults] =
+        useState<StoredTableConfig<ScheduledTaskDefinition>>();
+
+    const getStoredTableConfig = useStoredTableConfig<ScheduledTaskDefinition>(
+        METADATA_SCHEDULES_LOCAL_STORAGE_KEY,
+    );
+
+    useEffect(() => {
+        const storedConfig = getStoredTableConfig();
+
+        if (storedConfig) {
+            setTableDefaults(storedConfig);
+        }
+    }, [getStoredTableConfig]);
+
+    const { dataDisplayParams, setDataDisplayParam } =
+        useDataDisplayParams<ScheduledTaskDefinition>({
+            // 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: TASK_NAME_FIELD,
+                order: SortOrder.ASC,
+            },
+        });
+
+    const tableColumns: WfoAdvancedTableColumnConfig<ScheduledTaskDefinition> =
+        {
+            workflowId: {
+                columnType: ColumnType.DATA,
+                label: t('task'),
+                width: '180px',
+                renderData: (workflowId) => (
+                    <WfoWorkflowNameById workflowId={workflowId} />
+                ),
+            },
+            name: {
+                columnType: ColumnType.DATA,
+                label: t('taskDescription'),
+                width: '700px',
+            },
+            nextRunTime: {
+                columnType: ColumnType.DATA,
+                label: t('nextRuntime'),
+                width: '180px',
+                renderData: (date) => formatDate(date),
+                renderDetails: parseIsoString(parseDateToLocaleDateTimeString),
+                clipboardText: parseIsoString(parseDateToLocaleDateTimeString),
+                renderTooltip: parseIsoString(parseDateToLocaleDateTimeString),
+            },
+            trigger: {
+                columnType: ColumnType.DATA,
+                label: t('schedule'),
+                width: '255px',
+                isSortable: false,
+                renderData: (trigger) => (
+                    <EuiFlexGroup
+                        gutterSize="s"
+                        justifyContent="flexStart"
+                        alignItems="center"
+                    >
+                        <EuiFlexItem grow={0}>
+                            <WfoScheduledTasksBadges
+                                workflowSchedules={[trigger]}
+                            />
+                        </EuiFlexItem>
+                        <EuiFlexItem>{trigger}</EuiFlexItem>
+                    </EuiFlexGroup>
+                ),
+            },
+        };
+
+    const { pageSize, pageIndex, sortBy, queryString } = dataDisplayParams;
+    const graphqlQueryVariables: GraphqlQueryVariables<ScheduledTaskDefinition> =
+        {
+            first: pageSize,
+            after: pageIndex * pageSize,
+            sortBy: sortBy,
+            query: queryString || undefined,
+        };
+    const { data, isFetching, error } = useGetScheduledTasksQuery(
+        graphqlQueryVariables,
+    );
+    const [getSchedulesTrigger, { isFetching: isFetchingCsv }] =
+        useLazyGetScheduledTasksQuery();
+    const getSchedulesForExport = () =>
+        getSchedulesTrigger(
+            getQueryVariablesForExport(graphqlQueryVariables),
+        ).unwrap();
+
+    const { totalItems, sortFields, filterFields } = data?.pageInfo ?? {};
+
+    const pagination: Pagination = {
+        pageSize: pageSize,
+        pageIndex: pageIndex,
+        pageSizeOptions: DEFAULT_PAGE_SIZES,
+        totalItemCount: totalItems ? totalItems : 0,
+        onChangePage: getPageIndexChangeHandler(setDataDisplayParam),
+        onChangeItemsPerPage: getPageSizeChangeHandler(setDataDisplayParam),
+    };
+
+    const dataSorting: WfoDataSorting<ScheduledTaskDefinition> = {
+        field: sortBy?.field ?? TASK_NAME_FIELD,
+        sortOrder: sortBy?.order ?? SortOrder.ASC,
+    };
+
+    const mapToExportItems = ({
+        schedules,
+    }: ScheduledTasksResponse): ScheduledTasksDefinitionExportItem[] => {
+        return schedules;
+    };
+
+    return (
+        <WfoMetadataPageLayout>
+            <WfoAdvancedTable
+                data={data?.schedules ?? []}
+                tableColumnConfig={mapSortableAndFilterableValuesToTableColumnConfig(
+                    tableColumns,
+                    sortFields,
+                    filterFields,
+                )}
+                dataSorting={[dataSorting]}
+                defaultHiddenColumns={tableDefaults?.hiddenColumns}
+                onUpdateDataSorting={getDataSortHandler<ScheduledTaskDefinition>(
+                    setDataDisplayParam,
+                )}
+                onUpdateQueryString={getQueryStringHandler<ScheduledTaskDefinition>(
+                    setDataDisplayParam,
+                )}
+                pagination={pagination}
+                isLoading={isFetching}
+                error={mapRtkErrorToWfoError(error)}
+                queryString={queryString}
+                localStorageKey={METADATA_SCHEDULES_LOCAL_STORAGE_KEY}
+                onExportData={csvDownloadHandler(
+                    getSchedulesForExport,
+                    mapToExportItems,
+                    (data) => data?.pageInfo || {},
+                    Object.keys(tableColumns),
+                    getCsvFileNameWithDate('Schedules'),
+                    showToastMessage,
+                    tError,
+                )}
+                exportDataIsLoading={isFetchingCsv}
+                disableSearch={true}
+            />
+        </WfoMetadataPageLayout>
+    );
+};