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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@orchestrator-ui/orchestrator-ui-components",
-    "version": "1.6.1",
+    "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/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/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": {

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

@@ -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 = ({

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>
+    );
+};

package/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),

package/src/pages/metadata/index.ts

@@ -2,5 +2,6 @@ export * from './WfoProductBlocksPage';
 export * from './WfoResourceTypesPage';
 export * from './WfoProductsPage';
 export * from './WfoWorkflowsPage';
+export * from './WfoTasksPage';
 export * from './WfoMetadataPageLayout';
 export * from './workflowListObjectMapper';

package/src/pages/metadata/taskListObjectMapper.ts

@@ -0,0 +1,40 @@
+import { GraphQLSort, TaskDefinition } from '@/types';
+
+import { TaskListItem } from './WfoTasksPage';
+
+export const mapTaskDefinitionToTaskListItem = (
+    tasks: TaskDefinition[],
+): TaskListItem[] =>
+    tasks.map((taskDefinition) => {
+        const { name, target, description, createdAt, products } =
+            taskDefinition;
+
+        const productTags = products.map((product) => product.tag);
+
+        return {
+            name,
+            description,
+            target,
+            createdAt,
+            productTags,
+        };
+    });
+
+export const taskFieldMapper = (
+    field: keyof TaskListItem,
+): keyof TaskDefinition => {
+    switch (field) {
+        case 'productTags':
+            return 'productTag' as keyof TaskDefinition;
+        default:
+            return field;
+    }
+};
+
+export const graphQlTaskListMapper = ({
+    field,
+    order,
+}: GraphQLSort<TaskListItem>) => ({
+    field: taskFieldMapper(field),
+    order,
+});

package/src/rtk/endpoints/metadata/index.ts

@@ -1,3 +1,4 @@
 export * from './productBlocks';
 export * from './resourceTypes';
 export * from './workflows';
+export * from './tasks';

package/src/rtk/endpoints/metadata/tasks.ts

@@ -0,0 +1,74 @@
+import { orchestratorApi } from '@/rtk';
+import {
+    BaseGraphQlResult,
+    GraphqlQueryVariables,
+    TaskDefinition,
+    TaskDefinitionsResult,
+} from '@/types';
+
+export const tasksQuery = `
+query MetadataWorkflows(
+    $first: Int!
+    $after: Int!
+    $sortBy: [GraphqlSort!]
+    $query: String
+) {
+    workflows(
+        first: $first
+        after: $after
+        sortBy: $sortBy
+        query: $query
+        filterBy: { field: "target", value: "SYSTEM" }
+    ) {
+        page {
+            name
+            description
+            target
+            products {
+                tag
+            }
+            createdAt
+        }
+        pageInfo {
+            endCursor
+            hasNextPage
+            hasPreviousPage
+            startCursor
+            totalItems
+            sortFields
+            filterFields
+        }
+    }
+}
+`;
+
+export type TasksResponse = {
+    tasks: TaskDefinition[];
+} & BaseGraphQlResult;
+
+const tasksApi = orchestratorApi.injectEndpoints({
+    endpoints: (builder) => ({
+        getTasks: builder.query<
+            TasksResponse,
+            GraphqlQueryVariables<TaskDefinition>
+        >({
+            query: (variables) => ({
+                document: tasksQuery,
+                variables,
+            }),
+            transformResponse: (
+                response: TaskDefinitionsResult,
+            ): TasksResponse => {
+                const tasks = response.workflows.page || [];
+                const pageInfo = response.workflows.pageInfo || {};
+
+                return {
+                    tasks,
+                    pageInfo,
+                };
+            },
+        }),
+    }),
+});
+
+export const { useGetTasksQuery, useLazyGetTasksQuery } = tasksApi;

package/src/types/types.ts

@@ -77,6 +77,7 @@ export enum BadgeType {
     PRODUCT_BLOCK_TAG = 'product_block_tag',
     PRODUCT_TAG = 'product_tag',
     PRODUCT = 'product',
+    TASK = 'task',
 }
 
 export interface FixedInputDefinition {
@@ -236,6 +237,14 @@ export interface WorkflowDefinition {
     createdAt: string;
 }
 
+export interface TaskDefinition {
+    name: string;
+    description?: string;
+    target: WorkflowTarget;
+    products: Pick<ProductDefinition, 'tag' | 'productId' | 'name'>[];
+    createdAt: string;
+}
+
 export type Field<Type> = keyof Type;
 
 //// Utility types
@@ -333,6 +342,10 @@ export interface CustomersResult {
     customers: GraphQlSinglePage<Customer>;
 }
 
+export interface TaskDefinitionsResult<T = TaskDefinition> {
+    workflows: GraphQlResultPage<T>;
+}
+
 export interface WorkflowDefinitionsResult<T = WorkflowDefinition> {
     workflows: GraphQlResultPage<T>;
 }

package/src/utils/getDefaultTableConfig.ts

@@ -7,6 +7,7 @@ import {
     METADATA_PRODUCT_BLOCKS_TABLE_LOCAL_STORAGE_KEY,
     METADATA_PRODUCT_TABLE_LOCAL_STORAGE_KEY,
     METADATA_RESOURCE_TYPES_TABLE_LOCAL_STORAGE_KEY,
+    METADATA_TASKS_TABLE_LOCAL_STORAGE_KEY,
     METADATA_WORKFLOWS_TABLE_LOCAL_STORAGE_KEY,
     SUBSCRIPTIONS_TABLE_LOCAL_STORAGE_KEY,
 } from '@/components';
@@ -57,6 +58,7 @@ export const getDefaultTableConfig = <T>(storageKey: string) => {
             return getTableConfig<T>(productColumns as (keyof T)[]);
 
         case METADATA_WORKFLOWS_TABLE_LOCAL_STORAGE_KEY:
+        case METADATA_TASKS_TABLE_LOCAL_STORAGE_KEY:
             const workflowColumns: (keyof WorkflowDefinition)[] = ['createdAt'];
             return getTableConfig<T>(workflowColumns as (keyof T)[]);