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

package/src/pages/metadata/WfoWorkflowsPage.tsx

@@ -24,10 +24,15 @@ import {
     useShowToastMessage,
     useStoredTableConfig,
 } from '@/hooks';
-import { useGetWorkflowsQuery, useLazyGetWorkflowsQuery } from '@/rtk';
+import {
+    WorkflowsResponse,
+    useGetWorkflowsQuery,
+    useLazyGetWorkflowsQuery,
+} from '@/rtk';
 import type { GraphqlQueryVariables, WorkflowDefinition } from '@/types';
 import { BadgeType, SortOrder } from '@/types';
 import {
+    getConcatenatedResult,
     getQueryVariablesForExport,
     onlyUnique,
     parseDateToLocaleDateTimeString,
@@ -52,6 +57,10 @@ export type WorkflowListItem = Pick<
     productTags: string[];
 };
 
+type WorkflowListExportItem = Omit<WorkflowListItem, 'productTags'> & {
+    productTags: string;
+};
+
 export const WfoWorkflowsPage = () => {
     const t = useTranslations('metadata.workflows');
     const tError = useTranslations('errors');
@@ -89,7 +98,7 @@ export const WfoWorkflowsPage = () => {
         name: {
             field: 'name',
             name: t('name'),
-            width: '200',
+            width: '20%',
             render: (name) => (
                 <WfoProductBlockBadge badgeType={BadgeType.WORKFLOW}>
                     {name}
@@ -99,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
@@ -142,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),
@@ -184,6 +194,19 @@ export const WfoWorkflowsPage = () => {
         totalItemCount: totalItems ? totalItems : 0,
     };
 
+    const mapToExportItems = (
+        workflowsResponse: WorkflowsResponse,
+    ): WorkflowListExportItem[] => {
+        const { workflows } = workflowsResponse;
+        return workflows.map((workflow) => ({
+            ...workflow,
+            productTags: getConcatenatedResult(workflow.products, [
+                'tag',
+                'name',
+            ]),
+        }));
+    };
+
     return (
         <WfoMetadataPageLayout>
             <WfoTableWithFilter<WorkflowListItem>
@@ -217,7 +240,7 @@ export const WfoWorkflowsPage = () => {
                 localStorageKey={METADATA_WORKFLOWS_TABLE_LOCAL_STORAGE_KEY}
                 onExportData={csvDownloadHandler(
                     getWorkflowsForExport,
-                    (data) => data.workflows,
+                    mapToExportItems,
                     (data) => data.pageInfo,
                     Object.keys(tableColumns),
                     getCsvFileNameWithDate('Workflows'),

package/src/pages/metadata/index.ts

@@ -2,3 +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/pages/subscriptions/WfoSubscriptionDetailPage.tsx

@@ -2,8 +2,8 @@ import React from 'react';
 
 import { useRouter } from 'next/router';
 
-import { WfoSubscription } from '../../components';
-import { TreeProvider } from '../../contexts';
+import { WfoSubscription } from '@/components';
+import { TreeProvider } from '@/contexts';
 
 export const WfoSubscriptionDetailPage = () => {
     const router = useRouter();

package/src/pages/subscriptions/WfoSubscriptionsListPage.tsx

@@ -11,12 +11,12 @@ import {
 } from '@/components';
 import { WfoFilterTabs } from '@/components';
 import { StoredTableConfig } from '@/components';
+import type { SubscriptionListItem } from '@/components';
 import {
     WfoSubscriptionListTab,
     WfoSubscriptionsList,
     subscriptionListTabs,
 } from '@/components/WfoSubscriptionsList';
-import { SubscriptionListItem } from '@/components/WfoSubscriptionsList';
 import { useDataDisplayParams, useStoredTableConfig } from '@/hooks';
 import { SortOrder } from '@/types';
 

package/src/pages/workflows/index.ts

@@ -1 +1,3 @@
 export * from './WfoWorkflowsListPage';
+export * from './tabConfig';
+export * from './getWorkflowsListTabTypeFromString';

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>;
 }
@@ -357,12 +370,12 @@ export type StartComboBoxOption = {
     label: string;
 };
 
-interface GraphQlResultPage<T> {
+export interface GraphQlResultPage<T> {
     page: T[];
     pageInfo: GraphQLPageInfo;
 }
 
-interface GraphQlSinglePage<T> {
+export interface GraphQlSinglePage<T> {
     page: 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)[]);
 

package/src/utils/index.ts

@@ -8,3 +8,4 @@ export * from './strings';
 export * from './getProductNamesFromProcess';
 export * from './getQueryVariablesForExport';
 export * from './onlyUnique';
+export * from './resultFlattener';

package/src/utils/resultFlattener.spec.ts

@@ -0,0 +1,51 @@
+import {
+    getConcatenatedPagedResult,
+    getConcatenatedResult,
+} from './resultFlattener';
+
+describe('pagedResultFlattener', () => {
+    it('returns an empty string when the paged result is empty', () => {
+        const pagedResult = { page: [] };
+        const fields = ['name', 'age'];
+
+        const result = getConcatenatedPagedResult(pagedResult, fields);
+
+        expect(result).toBe('');
+    });
+});
+
+describe('resultFlattener', () => {
+    it('returns a flattened string of the specified fields', () => {
+        type TestItem = {
+            name: string;
+            age: number;
+        };
+        const results = [
+            { name: 'John', age: 25 },
+            { name: 'Jane', age: 30 },
+            { name: 'Bob', age: 40 },
+        ];
+        const fields: Array<keyof TestItem> = ['name', 'age'];
+        const result = getConcatenatedResult<TestItem>(results, fields);
+        expect(result).toBe('John: 25 - Jane: 30 - Bob: 40');
+    });
+
+    it('returns a flattened string with selected fields only', () => {
+        type TestItem = {
+            name: string;
+            age: number;
+            city: string;
+        };
+        const results: TestItem[] = [
+            { name: 'John', age: 25, city: 'New York' },
+            { name: 'Jane', age: 30, city: 'London' },
+            { name: 'Bob', age: 40, city: 'Paris' },
+        ];
+
+        const fields: Array<keyof TestItem> = ['name', 'city'];
+
+        const result = getConcatenatedResult(results, fields);
+
+        expect(result).toBe('John: New York - Jane: London - Bob: Paris');
+    });
+});

package/src/utils/resultFlattener.ts

@@ -0,0 +1,25 @@
+import { GraphQlSinglePage } from '@/types';
+
+export const getConcatenatedPagedResult = <T>(
+    pagedResult: GraphQlSinglePage<T>,
+    fields: Array<keyof T>,
+): string => {
+    const results = pagedResult.page || [];
+    return getConcatenatedResult(results, fields);
+};
+
+export const getConcatenatedResult = <T>(
+    results: T[],
+    fields: Array<keyof T>,
+): string => {
+    return results.reduce((accumulator, result, index) => {
+        const resultFields = fields.reduce((accumulator, field, index) => {
+            return (
+                accumulator +
+                `${result[field]}${index !== fields.length - 1 ? ': ' : ''}`
+            );
+        }, '');
+
+        return `${accumulator}${resultFields}${index !== results.length - 1 ? ' - ' : ''}`;
+    }, '');
+};