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

package/src/pages/metadata/WfoProductBlocksPage.tsx

@@ -28,6 +28,7 @@ import {
     useStoredTableConfig,
 } from '@/hooks';
 import { useGetProductBlocksQuery, useLazyGetProductBlocksQuery } from '@/rtk';
+import type { ProductBlocksResponse } from '@/rtk';
 import {
     BadgeType,
     GraphqlQueryVariables,
@@ -36,6 +37,7 @@ import {
 } from '@/types';
 import {
     csvDownloadHandler,
+    getConcatenatedResult,
     getCsvFileNameWithDate,
     getQueryVariablesForExport,
     parseDateToLocaleDateTimeString,
@@ -59,6 +61,14 @@ const PRODUCT_BLOCK_FIELD_RESOURCE_TYPES: keyof ProductBlockDefinition =
 const PRODUCT_BLOCK_FIELD_PRODUCT_BLOCKS: keyof ProductBlockDefinition =
     'dependsOn';
 
+type ProductBlockDefinitionExportItem = Omit<
+    ProductBlockDefinition,
+    'resourceTypes' | 'dependsOn'
+> & {
+    resourceTypes: string;
+    dependsOn: string;
+};
+
 export const WfoProductBlocksPage = () => {
     const t = useTranslations('metadata.productBlocks');
     const tError = useTranslations('errors');
@@ -218,6 +228,20 @@ export const WfoProductBlocksPage = () => {
         totalItemCount: totalItems ? totalItems : 0,
     };
 
+    const mapToExportItems = (
+        productBlocksResponse: ProductBlocksResponse,
+    ): ProductBlockDefinitionExportItem[] => {
+        const { productBlocks } = productBlocksResponse;
+        return productBlocks.map((productBlock) => ({
+            ...productBlock,
+            resourceTypes: getConcatenatedResult(productBlock.resourceTypes, [
+                'resourceType',
+                'description',
+            ]),
+            dependsOn: getConcatenatedResult(productBlock.dependsOn, ['name']),
+        }));
+    };
+
     return (
         <WfoMetadataPageLayout>
             <WfoTableWithFilter<ProductBlockDefinition>
@@ -247,7 +271,7 @@ export const WfoProductBlocksPage = () => {
                 }
                 onExportData={csvDownloadHandler(
                     getProductBlocksForExport,
-                    (data) => data.productBlocks,
+                    mapToExportItems,
                     (data) => data.pageInfo,
                     Object.keys(tableColumns),
                     getCsvFileNameWithDate('ProductBlocks'),

package/src/pages/metadata/WfoProductsPage.tsx

@@ -26,9 +26,11 @@ import {
     useStoredTableConfig,
 } from '@/hooks';
 import { useGetProductsQuery, useLazyGetProductsQuery } from '@/rtk';
+import { ProductsResponse } from '@/rtk';
 import type { GraphqlQueryVariables, ProductDefinition } from '@/types';
 import { BadgeType, SortOrder } from '@/types';
 import {
+    getConcatenatedResult,
     getQueryVariablesForExport,
     parseDateToLocaleDateTimeString,
     parseIsoString,
@@ -50,6 +52,14 @@ const PRODUCT_FIELD_PRODUCT_BLOCKS: keyof ProductDefinition = 'productBlocks';
 const PRODUCT_FIELD_FIXED_INPUTS: keyof ProductDefinition = 'fixedInputs';
 const PRODUCT_FIELD_CREATED_AT: keyof ProductDefinition = 'createdAt';
 
+type ProductDefinitionExportItem = Omit<
+    ProductDefinition,
+    'fixedInputs' | 'productBlocks'
+> & {
+    fixedInputs: string;
+    productBlocks: string;
+};
+
 export const WfoProductsPage = () => {
     const t = useTranslations('metadata.products');
     const tError = useTranslations('errors');
@@ -94,6 +104,11 @@ export const WfoProductsPage = () => {
             field: PRODUCT_FIELD_NAME,
             name: t('name'),
             width: '200',
+            render: (name) => (
+                <WfoProductBlockBadge badgeType={BadgeType.PRODUCT}>
+                    {name}
+                </WfoProductBlockBadge>
+            ),
         },
         tag: {
             field: PRODUCT_FIELD_TAG,
@@ -192,6 +207,22 @@ export const WfoProductsPage = () => {
         sortOrder: sortBy?.order ?? SortOrder.ASC,
     };
 
+    const mapToExportItems = (
+        productsResponse: ProductsResponse,
+    ): ProductDefinitionExportItem[] => {
+        const { products } = productsResponse;
+        return products.map((product) => ({
+            ...product,
+            fixedInputs: getConcatenatedResult(product.fixedInputs, [
+                'name',
+                'value',
+            ]),
+            productBlocks: getConcatenatedResult(product.productBlocks, [
+                'name',
+            ]),
+        }));
+    };
+
     return (
         <WfoMetadataPageLayout>
             <WfoTableWithFilter<ProductDefinition>
@@ -219,7 +250,7 @@ export const WfoProductsPage = () => {
                 localStorageKey={METADATA_PRODUCT_TABLE_LOCAL_STORAGE_KEY}
                 onExportData={csvDownloadHandler(
                     getProductsForExport,
-                    (data) => data?.products ?? [],
+                    mapToExportItems,
                     (data) => data?.pageInfo || {},
                     Object.keys(tableColumns),
                     getCsvFileNameWithDate('Products'),

package/src/pages/metadata/WfoResourceTypesPage.tsx

@@ -25,14 +25,18 @@ import {
     useShowToastMessage,
     useStoredTableConfig,
 } from '@/hooks';
-import { useGetResourceTypesQuery, useLazyGetResourceTypesQuery } from '@/rtk';
+import {
+    ResourceTypesResponse,
+    useGetResourceTypesQuery,
+    useLazyGetResourceTypesQuery,
+} from '@/rtk';
 import {
     BadgeType,
     GraphqlQueryVariables,
     ResourceTypeDefinition,
     SortOrder,
 } from '@/types';
-import { getQueryVariablesForExport } from '@/utils';
+import { getConcatenatedResult, getQueryVariablesForExport } from '@/utils';
 import {
     csvDownloadHandler,
     getCsvFileNameWithDate,
@@ -51,6 +55,10 @@ export const RESOURCE_TYPE_FIELD_DESCRIPTION: keyof ResourceTypeDefinition =
 export const RESOURCE_TYPE_FIELD_PRODUCT_BLOCKS: keyof ResourceTypeDefinition =
     'productBlocks';
 
+type ResourceTypeExportItem = Omit<ResourceTypeDefinition, 'productBlocks'> & {
+    productBlocks: string;
+};
+
 export const WfoResourceTypesPage = () => {
     const t = useTranslations('metadata.resourceTypes');
     const tError = useTranslations('errors');
@@ -168,7 +176,18 @@ export const WfoResourceTypesPage = () => {
         pageSizeOptions: DEFAULT_PAGE_SIZES,
         totalItemCount: totalItems ? totalItems : 0,
     };
-
+    const mapToExportItems = (
+        resourceTypesResponse: ResourceTypesResponse,
+    ): ResourceTypeExportItem[] => {
+        const { resourceTypes } = resourceTypesResponse;
+        return resourceTypes.map((resourceType) => ({
+            ...resourceType,
+            productBlocks: getConcatenatedResult(resourceType.productBlocks, [
+                'productBlockId',
+                'name',
+            ]),
+        }));
+    };
     return (
         <WfoMetadataPageLayout>
             <WfoTableWithFilter<ResourceTypeDefinition>
@@ -198,7 +217,7 @@ export const WfoResourceTypesPage = () => {
                 }
                 onExportData={csvDownloadHandler(
                     getResourceTypesForExport,
-                    (data) => data.resourceTypes,
+                    mapToExportItems,
                     (data) => data.pageInfo,
                     Object.keys(tableColumns),
                     getCsvFileNameWithDate('ResourceTypes'),

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');
@@ -184,6 +193,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 +239,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,5 @@ export * from './WfoProductBlocksPage';
 export * from './WfoResourceTypesPage';
 export * from './WfoProductsPage';
 export * from './WfoWorkflowsPage';
+export * from './WfoMetadataPageLayout';
+export * from './workflowListObjectMapper';

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/subscriptionDetail.ts

@@ -30,6 +30,7 @@ export const subscriptionDetailQuery = `
                 startDate
                 status
                 customerId
+                metadata
                 customer {
                     fullname
                     customerId

package/src/rtk/endpoints/subscriptionList.ts

@@ -38,6 +38,7 @@ export const subscriptionListQuery = `query SubscriptionsList(
                     fullname
                     shortcode
                 }
+                metadata
             }
             pageInfo {
                 totalItems

package/src/types/types.ts

@@ -76,6 +76,7 @@ export enum BadgeType {
     PRODUCT_BLOCK = 'product_block',
     PRODUCT_BLOCK_TAG = 'product_block_tag',
     PRODUCT_TAG = 'product_tag',
+    PRODUCT = 'product',
 }
 
 export interface FixedInputDefinition {
@@ -356,12 +357,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[];
 }
 
@@ -395,6 +396,7 @@ export type Subscription = {
     product: Pick<ProductDefinition, 'name' | 'tag' | 'productType'>;
     productBlockInstances: ProductBlockInstance[];
     customer: Pick<Customer, 'fullname' | 'shortcode'>;
+    metadata: object;
 };
 
 export type SubscriptionSummary = Pick<
@@ -434,6 +436,7 @@ export type SubscriptionDetail = {
     endDate: string;
     startDate: string;
     status: SubscriptionStatus;
+    metadata: object;
     productBlockInstances: ProductBlockInstance[];
 
     customerId?: string | null;

package/src/utils/getDefaultTableConfig.ts

@@ -101,6 +101,7 @@ export const getDefaultTableConfig = <T>(storageKey: string) => {
         case SUBSCRIPTIONS_TABLE_LOCAL_STORAGE_KEY:
             const subscriptionColumns: (keyof SubscriptionListItem)[] = [
                 'productName',
+                'metadata',
             ];
             return getTableConfig<T>(subscriptionColumns as (keyof T)[]);
         default:

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 ? ' - ' : ''}`;
+    }, '');
+};