713: New metadata taskpage with rtk

.changeset/great-planes-rhyme.md

@@ -0,0 +1,6 @@
+---
+"@orchestrator-ui/orchestrator-ui-components": patch
+---
+
+New metadata taskpage with rtk
+

packages/orchestrator-ui-components/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),

packages/orchestrator-ui-components/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);
+                    },
+                },
             ],
         },
         {

packages/orchestrator-ui-components/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';

packages/orchestrator-ui-components/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';

packages/orchestrator-ui-components/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",
@@ -126,7 +127,8 @@
             "products": "Products",
             "productBlocks": "Product blocks",
             "resourceTypes": "Resource types",
-            "workflows": "Workflows"
+            "workflows": "Workflows",
+            "tasks": "Tasks"
         },
         "products": {
             "id": "ID",
@@ -163,6 +165,13 @@
             "target": "Target",
             "productTags": "Product tags",
             "createdAt": "Created"
+        },
+        "tasks": {
+            "name": "Task",
+            "description": "Task description",
+            "target": "Target",
+            "productTags": "Product tags",
+            "createdAt": "Created"
         }
     },
     "processes": {

packages/orchestrator-ui-components/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": {

packages/orchestrator-ui-components/src/pages/metadata/WfoMetadataPageLayout.tsx

@@ -34,10 +34,15 @@ export 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 = ({

packages/orchestrator-ui-components/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>
+    );
+};

packages/orchestrator-ui-components/src/pages/metadata/WfoWorkflowsPage.tsx

@@ -98,7 +98,7 @@ export const WfoWorkflowsPage = () => {
         name: {
             field: 'name',
             name: t('name'),
-            width: '200',
+            width: '20%',
             render: (name) => (
                 <WfoProductBlockBadge badgeType={BadgeType.WORKFLOW}>
                     {name}
@@ -108,17 +108,18 @@ export const WfoWorkflowsPage = () => {
         description: {
             field: 'description',
             name: t('description'),
-            width: '300',
+            width: '40%',
         },
         target: {
             field: 'target',
             name: t('target'),
-            width: '90',
+            width: '15%',
             render: (target) => <WfoWorkflowTargetBadge target={target} />,
         },
         productTags: {
             field: 'productTags',
             name: t('productTags'),
+            width: '20%',
             render: (productTags) => (
                 <>
                     {productTags
@@ -151,7 +152,7 @@ export const WfoWorkflowsPage = () => {
         createdAt: {
             field: 'createdAt',
             name: t('createdAt'),
-            width: '110',
+            width: '15%',
             render: (date) => <WfoDateTime dateOrIsoString={date} />,
             renderDetails: parseIsoString(parseDateToLocaleDateTimeString),
             clipboardText: parseIsoString(parseDateToLocaleDateTimeString),