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

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/rtk/slices/index.ts

@@ -1,3 +1,4 @@
+export * from './customApis';
+export * from './orchestratorComponentOverride';
 export * from './toastMessages';
 export * from './orchestratorConfig';
-export * from './customApis';

package/src/rtk/slices/orchestratorComponentOverride.ts

@@ -0,0 +1,26 @@
+import { ReactNode } from 'react';
+
+import { Slice, createSlice } from '@reduxjs/toolkit';
+
+import { FieldValue } from '@/types';
+
+export type ValueOverrideFunction = (fieldValue: FieldValue) => ReactNode;
+export type ValueOverrideConfiguration = Record<string, ValueOverrideFunction>;
+
+export type OrchestratorComponentOverride = {
+    subscriptionDetail?: {
+        valueOverrides?: ValueOverrideConfiguration;
+    };
+};
+
+type OrchestratorComponentOverrideSlice = Slice<OrchestratorComponentOverride>;
+
+export const getOrchestratorComponentOverrideSlice = (
+    config: OrchestratorComponentOverride,
+): OrchestratorComponentOverrideSlice => {
+    return createSlice({
+        name: 'orchestratorComponentOverride',
+        initialState: config,
+        reducers: {},
+    });
+};

package/src/rtk/store.ts

@@ -4,6 +4,10 @@ import type { Dispatch, UnknownAction } from '@reduxjs/toolkit';
 import { CombinedState } from '@reduxjs/toolkit/query';
 
 import { CustomApiConfig, getCustomApiSlice } from '@/rtk/slices';
+import {
+    OrchestratorComponentOverride,
+    getOrchestratorComponentOverrideSlice,
+} from '@/rtk/slices/orchestratorComponentOverride';
 import type { OrchestratorConfig } from '@/types';
 
 import { orchestratorApi } from './api';
@@ -17,14 +21,23 @@ export type RootState = {
     >;
     toastMessages: ReturnType<typeof toastMessagesReducer>;
     orchestratorConfig: OrchestratorConfig;
+    orchestratorComponentOverride?: OrchestratorComponentOverride;
     customApis: CustomApiConfig[];
 };
 
-export const getOrchestratorStore = (
-    orchestratorConfig: OrchestratorConfig,
-    customApis: CustomApiConfig[],
-): EnhancedStore<RootState> => {
+export type InitialOrchestratorStoreConfig = Pick<
+    RootState,
+    'orchestratorConfig' | 'customApis' | 'orchestratorComponentOverride'
+>;
+
+export const getOrchestratorStore = ({
+    orchestratorConfig,
+    orchestratorComponentOverride = {},
+    customApis,
+}: InitialOrchestratorStoreConfig): EnhancedStore<RootState> => {
     const configSlice = getOrchestratorConfigSlice(orchestratorConfig);
+    const orchestratorComponentOverrideSlice =
+        getOrchestratorComponentOverrideSlice(orchestratorComponentOverride);
     const customApisSlice = getCustomApiSlice(customApis);
 
     const orchestratorStore = configureStore({
@@ -32,10 +45,14 @@ export const getOrchestratorStore = (
             [orchestratorApi.reducerPath]: orchestratorApi.reducer,
             toastMessages: toastMessagesReducer,
             orchestratorConfig: configSlice.reducer,
+            orchestratorComponentOverride:
+                orchestratorComponentOverrideSlice.reducer,
             customApis: customApisSlice?.reducer,
         },
         middleware: (getDefaultMiddleware) =>
-            getDefaultMiddleware().concat(orchestratorApi.middleware),
+            getDefaultMiddleware({
+                serializableCheck: false,
+            }).concat(orchestratorApi.middleware),
     });
 
     return orchestratorStore;

package/src/rtk/storeProvider.tsx

@@ -3,22 +3,29 @@ import type { ReactNode } from 'react';
 import { Provider } from 'react-redux';
 
 import { CustomApiConfig } from '@/rtk/slices/customApis';
+import { OrchestratorComponentOverride } from '@/rtk/slices/orchestratorComponentOverride';
 import type { OrchestratorConfig } from '@/types';
 
 import { getOrchestratorStore } from './store';
 
 export type StoreProviderProps = {
     initialOrchestratorConfig: OrchestratorConfig;
+    orchestratorComponentOverride?: OrchestratorComponentOverride;
     customApis?: CustomApiConfig[];
     children: ReactNode;
 };
 
 export const StoreProvider = ({
     initialOrchestratorConfig,
+    orchestratorComponentOverride,
     customApis = [],
     children,
 }: StoreProviderProps) => {
-    const store = getOrchestratorStore(initialOrchestratorConfig, customApis);
+    const store = getOrchestratorStore({
+        orchestratorConfig: initialOrchestratorConfig,
+        orchestratorComponentOverride,
+        customApis,
+    });
     const [orchestratorStore] = useState(store);
 
     return <Provider store={orchestratorStore}>{children}</Provider>;

package/src/types/types.ts

@@ -11,11 +11,6 @@ export type FieldValue = {
     value: string | number | boolean;
 };
 
-export type KeyValue = {
-    key: string;
-    value: string | number | boolean | undefined;
-};
-
 export enum EngineStatus {
     RUNNING = 'RUNNING',
     PAUSING = 'PAUSING',
@@ -77,6 +72,7 @@ export enum BadgeType {
     PRODUCT_BLOCK_TAG = 'product_block_tag',
     PRODUCT_TAG = 'product_tag',
     PRODUCT = 'product',
+    TASK = 'task',
 }
 
 export interface FixedInputDefinition {
@@ -236,7 +232,13 @@ export interface WorkflowDefinition {
     createdAt: string;
 }
 
-export type Field<Type> = keyof Type;
+export interface TaskDefinition {
+    name: string;
+    description?: string;
+    target: WorkflowTarget;
+    products: Pick<ProductDefinition, 'tag' | 'productId' | 'name'>[];
+    createdAt: string;
+}
 
 //// Utility types
 
@@ -333,6 +335,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)[]);