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

package/dist/index.js

@@ -44098,6 +44098,20 @@ var onlyUnique = (value, index, array) => {
   return array.indexOf(value) === index;
 };
 
+// src/utils/resultFlattener.ts
+var getConcatenatedPagedResult = (pagedResult, fields) => {
+  const results = pagedResult.page || [];
+  return getConcatenatedResult(results, fields);
+};
+var getConcatenatedResult = (results, fields) => {
+  return results.reduce((accumulator, result, index) => {
+    const resultFields = fields.reduce((accumulator2, field, index2) => {
+      return accumulator2 + `${result[field]}${index2 !== fields.length - 1 ? ": " : ""}`;
+    }, "");
+    return `${accumulator}${resultFields}${index !== results.length - 1 ? " - " : ""}`;
+  }, "");
+};
+
 // src/components/WfoPageTemplate/WfoBreadcrumbs/WfoBreadcrumbs.tsx
 import { Fragment as Fragment2, jsx as jsx50, jsxs as jsxs35 } from "@emotion/react/jsx-runtime";
 var WfoBreadcrumbs = () => {
@@ -46487,6 +46501,7 @@ var WfoSubscriptionGeneral = ({
       }
     ];
   };
+  const hasMetadata = Object.entries(subscriptionDetail.metadata).length > 0;
   return /* @__PURE__ */ jsx86(EuiFlexGrid, { direction: "row", children: /* @__PURE__ */ jsxs60(Fragment16, { children: [
     /* @__PURE__ */ jsx86(EuiFlexItem9, { children: /* @__PURE__ */ jsx86(
       SubscriptionKeyValueBlock,
@@ -46495,7 +46510,7 @@ var WfoSubscriptionGeneral = ({
         keyValues: getSubscriptionDetailBlockData()
       }
     ) }),
-    /* @__PURE__ */ jsx86(EuiFlexItem9, { children: /* @__PURE__ */ jsx86(
+    hasMetadata && /* @__PURE__ */ jsx86(EuiFlexItem9, { children: /* @__PURE__ */ jsx86(
       SubscriptionKeyValueBlock,
       {
         title: t("metadata"),
@@ -52203,18 +52218,18 @@ var WfoMetadataPageLayout = ({
   tabs = metaDataTabs
 }) => {
   const router = useRouter8();
-  const t = useTranslations40("metadata.tabs");
+  const t = useTranslations40("metadata");
   const currentPath = router.pathname;
   return /* @__PURE__ */ jsxs83(Fragment29, { children: [
     /* @__PURE__ */ jsx146(EuiSpacer15, {}),
-    /* @__PURE__ */ jsx146(EuiPageHeader2, { pageTitle: "Metadata" }),
+    /* @__PURE__ */ jsx146(EuiPageHeader2, { pageTitle: t("title") }),
     /* @__PURE__ */ jsx146(EuiSpacer15, { size: "m" }),
     /* @__PURE__ */ jsx146(EuiTabs2, { children: tabs.map(({ id, translationKey: name, path }) => /* @__PURE__ */ jsx146(
       EuiTab2,
       {
         isSelected: path === currentPath,
         onClick: () => router.push(path),
-        children: t(name)
+        children: t(`tabs.${name}`)
       },
       id
     )) }),
@@ -52362,6 +52377,16 @@ var WfoProductBlocksPage = () => {
     pageSizeOptions: DEFAULT_PAGE_SIZES,
     totalItemCount: totalItems ? totalItems : 0
   };
+  const mapToExportItems = (productBlocksResponse) => {
+    const { productBlocks } = productBlocksResponse;
+    return productBlocks.map((productBlock) => __spreadProps(__spreadValues({}, productBlock), {
+      resourceTypes: getConcatenatedResult(productBlock.resourceTypes, [
+        "resourceType",
+        "description"
+      ]),
+      dependsOn: getConcatenatedResult(productBlock.dependsOn, ["name"])
+    }));
+  };
   return /* @__PURE__ */ jsx147(WfoMetadataPageLayout, { children: /* @__PURE__ */ jsx147(
     WfoTableWithFilter,
     {
@@ -52389,7 +52414,7 @@ var WfoProductBlocksPage = () => {
       localStorageKey: METADATA_PRODUCT_BLOCKS_TABLE_LOCAL_STORAGE_KEY,
       onExportData: csvDownloadHandler(
         getProductBlocksForExport,
-        (data2) => data2.productBlocks,
+        mapToExportItems,
         (data2) => data2.pageInfo,
         Object.keys(tableColumns),
         getCsvFileNameWithDate("ProductBlocks"),
@@ -52500,6 +52525,15 @@ var WfoResourceTypesPage = () => {
     pageSizeOptions: DEFAULT_PAGE_SIZES,
     totalItemCount: totalItems ? totalItems : 0
   };
+  const mapToExportItems = (resourceTypesResponse) => {
+    const { resourceTypes } = resourceTypesResponse;
+    return resourceTypes.map((resourceType) => __spreadProps(__spreadValues({}, resourceType), {
+      productBlocks: getConcatenatedResult(resourceType.productBlocks, [
+        "productBlockId",
+        "name"
+      ])
+    }));
+  };
   return /* @__PURE__ */ jsx148(WfoMetadataPageLayout, { children: /* @__PURE__ */ jsx148(
     WfoTableWithFilter,
     {
@@ -52527,7 +52561,7 @@ var WfoResourceTypesPage = () => {
       localStorageKey: METADATA_RESOURCE_TYPES_TABLE_LOCAL_STORAGE_KEY,
       onExportData: csvDownloadHandler(
         getResourceTypesForExport,
-        (data2) => data2.resourceTypes,
+        mapToExportItems,
         (data2) => data2.pageInfo,
         Object.keys(tableColumns),
         getCsvFileNameWithDate("ResourceTypes"),
@@ -52670,6 +52704,18 @@ var WfoProductsPage = () => {
     field: (_b = sortBy == null ? void 0 : sortBy.field) != null ? _b : PRODUCT_FIELD_NAME,
     sortOrder: (_c = sortBy == null ? void 0 : sortBy.order) != null ? _c : "ASC" /* ASC */
   };
+  const mapToExportItems = (productsResponse) => {
+    const { products: products2 } = productsResponse;
+    return products2.map((product) => __spreadProps(__spreadValues({}, product), {
+      fixedInputs: getConcatenatedResult(product.fixedInputs, [
+        "name",
+        "value"
+      ]),
+      productBlocks: getConcatenatedResult(product.productBlocks, [
+        "name"
+      ])
+    }));
+  };
   return /* @__PURE__ */ jsx149(WfoMetadataPageLayout, { children: /* @__PURE__ */ jsx149(
     WfoTableWithFilter,
     {
@@ -52697,10 +52743,7 @@ var WfoProductsPage = () => {
       localStorageKey: METADATA_PRODUCT_TABLE_LOCAL_STORAGE_KEY,
       onExportData: csvDownloadHandler(
         getProductsForExport,
-        (data2) => {
-          var _a2;
-          return (_a2 = data2 == null ? void 0 : data2.products) != null ? _a2 : [];
-        },
+        mapToExportItems,
         (data2) => (data2 == null ? void 0 : data2.pageInfo) || {},
         Object.keys(tableColumns),
         getCsvFileNameWithDate("Products"),
@@ -52845,6 +52888,15 @@ var WfoWorkflowsPage = () => {
     pageSizeOptions: DEFAULT_PAGE_SIZES,
     totalItemCount: totalItems ? totalItems : 0
   };
+  const mapToExportItems = (workflowsResponse) => {
+    const { workflows } = workflowsResponse;
+    return workflows.map((workflow) => __spreadProps(__spreadValues({}, workflow), {
+      productTags: getConcatenatedResult(workflow.products, [
+        "tag",
+        "name"
+      ])
+    }));
+  };
   return /* @__PURE__ */ jsx150(WfoMetadataPageLayout, { children: /* @__PURE__ */ jsx150(
     WfoTableWithFilter,
     {
@@ -52874,7 +52926,7 @@ var WfoWorkflowsPage = () => {
       localStorageKey: METADATA_WORKFLOWS_TABLE_LOCAL_STORAGE_KEY,
       onExportData: csvDownloadHandler(
         getWorkflowsForExport,
-        (data2) => data2.workflows,
+        mapToExportItems,
         (data2) => data2.pageInfo,
         Object.keys(tableColumns),
         getCsvFileNameWithDate("Workflows"),
@@ -55059,6 +55111,13 @@ var mapGraphQlSubscriptionsResultToSubscriptionListItems = (graphqlResponse) =>
 });
 
 // src/components/WfoSubscriptionsList/subscriptionListTabs.ts
+var WfoSubscriptionListTab = /* @__PURE__ */ ((WfoSubscriptionListTab2) => {
+  WfoSubscriptionListTab2["ACTIVE"] = "ACTIVE";
+  WfoSubscriptionListTab2["TERMINATED"] = "TERMINATED";
+  WfoSubscriptionListTab2["TRANSIENT"] = "TRANSIENT";
+  WfoSubscriptionListTab2["ALL"] = "ALL";
+  return WfoSubscriptionListTab2;
+})(WfoSubscriptionListTab || {});
 var subscriptionListTabs = [
   {
     id: "ACTIVE" /* ACTIVE */,
@@ -55607,6 +55666,11 @@ import { StringParam as StringParam5, useQueryParam as useQueryParam4, withDefau
 import { EuiPageHeader as EuiPageHeader6, EuiSpacer as EuiSpacer22 } from "@elastic/eui";
 
 // src/pages/workflows/tabConfig.ts
+var WfoWorkflowsListTabType = /* @__PURE__ */ ((WfoWorkflowsListTabType2) => {
+  WfoWorkflowsListTabType2["ACTIVE"] = "ACTIVE";
+  WfoWorkflowsListTabType2["COMPLETED"] = "COMPLETED";
+  return WfoWorkflowsListTabType2;
+})(WfoWorkflowsListTabType || {});
 var defaultWorkflowsListTabs = [
   {
     id: "ACTIVE" /* ACTIVE */,
@@ -55793,7 +55857,7 @@ var mapGraphQlProcessListExportResultToProcessListItems = (processesResponse) =>
     isTask,
     startedAt: new Date(startedAt),
     lastModifiedAt: new Date(lastModifiedAt),
-    subscriptions,
+    subscriptions: getConcatenatedPagedResult(subscriptions, ["subscriptionId", "description"]),
     productName: product == null ? void 0 : product.name,
     productTag: product == null ? void 0 : product.tag,
     customer: customer.fullname,
@@ -56485,6 +56549,7 @@ var en_GB_default = {
     }
   },
   metadata: {
+    title: "Metadata",
     tabs: {
       products: "Products",
       productBlocks: "Product blocks",
@@ -57396,6 +57461,7 @@ export {
   WfoKeyValueTable,
   WfoLoading,
   WfoLogoutIcon,
+  WfoMetadataPageLayout,
   WfoMinusCircleFill,
   WfoMinusCircleOutline,
   WfoModifySettings,
@@ -57454,8 +57520,10 @@ export {
   WfoSubscriptionDetailPage,
   WfoSubscriptionDetailTree,
   WfoSubscriptionGeneral,
+  WfoSubscriptionListTab,
   WfoSubscriptionProductBlock,
   WfoSubscriptionStatusBadge,
+  WfoSubscriptionsList,
   WfoSubscriptionsListPage,
   WfoTableHeaderCell,
   WfoTableWithFilter,
@@ -57470,6 +57538,7 @@ export {
   WfoWorkflowStepList,
   WfoWorkflowTargetBadge,
   WfoWorkflowsListPage,
+  WfoWorkflowsListTabType,
   WfoWorkflowsPage,
   WfoXCircleFill,
   WorkflowTarget,
@@ -57480,6 +57549,7 @@ export {
   csvDownloadHandler,
   defaultOrchestratorTheme,
   defaultTasksListTabs,
+  defaultWorkflowsListTabs,
   determineNewSortOrder,
   determinePageIndex,
   filterDataByCriteria,
@@ -57487,6 +57557,8 @@ export {
   formatDate,
   formatDateCetWithUtc,
   getApiClient,
+  getConcatenatedPagedResult,
+  getConcatenatedResult,
   getCsvFileNameWithDate,
   getCurrentBrowserLocale,
   getCustomApiSlice,
@@ -57515,6 +57587,8 @@ export {
   getWfoBasicTableStyles,
   getWorkflowTargetColor,
   getWorkflowTargetIconContent,
+  getWorkflowsListTabTypeFromString,
+  graphQlWorkflowListMapper,
   imsPortIdFieldStyling,
   initiateCsvFileDownload,
   ipPrefixTableFieldStyling,
@@ -57524,7 +57598,11 @@ export {
   isValidLocalStorageTableConfig,
   localMomentToUtcTimestamp,
   mapColumnSortToEuiDataGridSorting,
+  mapGraphQlSubscriptionsResultToPageInfo,
+  mapGraphQlSubscriptionsResultToSubscriptionListItems,
   mapSortableAndFilterableValuesToTableColumnConfig,
+  mapWorkflowDefinitionToWorkflowListItem,
+  metaDataTabs,
   onlyUnique,
   orchestratorApi,
   parseDate,
@@ -57551,6 +57629,7 @@ export {
   splitPrefixStyling,
   stop,
   subscriptionDetailQuery,
+  subscriptionListTabs,
   subscriptionsDropdownOptionsQuery,
   toastMessagesReducer,
   toastMessagesSlice,
@@ -57599,6 +57678,7 @@ export {
   useWfoSession,
   useWithOrchestratorTheme,
   utcTimestampToLocalMoment,
+  workflowFieldMapper,
   workflowsQuery
 };
 /*! Bundled license information:

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@orchestrator-ui/orchestrator-ui-components",
-    "version": "1.6.0",
+    "version": "1.6.1",
     "license": "Apache-2.0",
     "description": "Library of UI Components used to display the workflow orchestrator frontend",
     "author": {

package/src/components/WfoProcessList/WfoProcessesList.tsx

@@ -67,6 +67,10 @@ export type ProcessListItem = Pick<
     customerAbbreviation: string;
 };
 
+export type ProcessListExportItem = Omit<ProcessListItem, 'subscriptions'> & {
+    subscriptions: string;
+};
+
 export type WfoProcessesListProps = {
     alwaysOnFilters?: FilterQuery<ProcessListItem>[];
     defaultHiddenColumns: TableColumnKeys<ProcessListItem> | undefined;
@@ -264,7 +268,7 @@ export const WfoProcessesList = ({
             onUpdateDataSort={getDataSortHandler(setDataDisplayParam)}
             onExportData={csvDownloadHandler<
                 ProcessListResponse,
-                ProcessListItem
+                ProcessListExportItem
             >(
                 getProcessListForExport,
                 mapGraphQlProcessListExportResultToProcessListItems,

package/src/components/WfoProcessList/processListObjectMappers.ts

@@ -1,7 +1,8 @@
 import { ProcessListResponse } from '@/rtk';
-import { GraphQLSort, GraphqlFilter, Process } from '@/types';
+import { GraphQLSort, GraphqlFilter, Process, Subscription } from '@/types';
+import { getConcatenatedPagedResult } from '@/utils';
 
-import { ProcessListItem } from './WfoProcessesList';
+import { ProcessListExportItem, ProcessListItem } from './WfoProcessesList';
 
 export const mapGraphQlProcessListResultToPageInfo = (
     processesResponse: ProcessListResponse,
@@ -48,7 +49,7 @@ export const mapGraphQlProcessListResultToProcessListItems = (
 
 export const mapGraphQlProcessListExportResultToProcessListItems = (
     processesResponse: ProcessListResponse,
-): ProcessListItem[] =>
+): ProcessListExportItem[] =>
     processesResponse.processes.map((process) => {
         const {
             workflowName,
@@ -77,7 +78,9 @@ export const mapGraphQlProcessListExportResultToProcessListItems = (
             isTask,
             startedAt: new Date(startedAt),
             lastModifiedAt: new Date(lastModifiedAt),
-            subscriptions,
+            subscriptions: getConcatenatedPagedResult<
+                Pick<Subscription, 'subscriptionId' | 'description'>
+            >(subscriptions, ['subscriptionId', 'description']),
             productName: product?.name,
             productTag: product?.tag,
             customer: customer.fullname,

package/src/components/WfoSubscription/WfoSubscriptionGeneral.tsx

@@ -126,6 +126,8 @@ export const WfoSubscriptionGeneral = ({
         ];
     };
 
+    const hasMetadata = Object.entries(subscriptionDetail.metadata).length > 0;
+
     return (
         <EuiFlexGrid direction={'row'}>
             <>
@@ -135,12 +137,14 @@ export const WfoSubscriptionGeneral = ({
                         keyValues={getSubscriptionDetailBlockData()}
                     />
                 </EuiFlexItem>
-                <EuiFlexItem>
-                    <SubscriptionKeyValueBlock
-                        title={t('metadata')}
-                        keyValues={getMetadataBlockData()}
-                    />
-                </EuiFlexItem>
+                {hasMetadata && (
+                    <EuiFlexItem>
+                        <SubscriptionKeyValueBlock
+                            title={t('metadata')}
+                            keyValues={getMetadataBlockData()}
+                        />
+                    </EuiFlexItem>
+                )}
                 <EuiFlexItem>
                     <SubscriptionKeyValueBlock
                         title={t('blockTitleFixedInputs')}

package/src/components/index.ts

@@ -26,3 +26,4 @@ export * from './WfoErrorBoundary';
 export * from './WfoWorkflowSteps';
 export * from './WfoNoResults';
 export * from './WfoStartButton';
+export * from './WfoSubscriptionsList';

package/src/messages/en-GB.json

@@ -121,6 +121,7 @@
         }
     },
     "metadata": {
+        "title": "Metadata",
         "tabs": {
             "products": "Products",
             "productBlocks": "Product blocks",

package/src/pages/metadata/WfoMetadataPageLayout.tsx

@@ -17,7 +17,7 @@ export interface MetaDataTab {
     path: string;
 }
 
-const metaDataTabs: MetaDataTab[] = [
+export const metaDataTabs: MetaDataTab[] = [
     {
         id: 1,
         translationKey: 'products',
@@ -45,14 +45,14 @@ export const WfoMetadataPageLayout = ({
     tabs = metaDataTabs,
 }: MetadataLayoutProps) => {
     const router = useRouter();
-    const t = useTranslations('metadata.tabs');
+    const t = useTranslations('metadata');
     const currentPath = router.pathname;
 
     return (
         <>
             <EuiSpacer />
 
-            <EuiPageHeader pageTitle="Metadata" />
+            <EuiPageHeader pageTitle={t('title')} />
             <EuiSpacer size="m" />
             <EuiTabs>
                 {tabs.map(({ id, translationKey: name, path }) => (
@@ -61,7 +61,7 @@ export const WfoMetadataPageLayout = ({
                         isSelected={path === currentPath}
                         onClick={() => router.push(path)}
                     >
-                        {t(name)}
+                        {t(`tabs.${name}`)}
                     </EuiTab>
                 ))}
             </EuiTabs>

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');
@@ -197,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>
@@ -224,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();