@orchestrator-ui/orchestrator-ui-components 0.1.2 → 0.2.0

package/.turbo/turbo-build.log

@@ -1,13 +1,11 @@
-yarn run v1.22.19
 $ tsup src/index.ts --format esm --dts
 CLI Building entry: src/index.ts
 CLI Using tsconfig: tsconfig.json
 CLI tsup v7.1.0
 CLI Target: node16
 ESM Build start
-ESM dist\index.js 107.51 KB
-ESM ⚡️ Build success in 63ms
+ESM dist\index.js 111.65 KB
+ESM ⚡️ Build success in 90ms
 DTS Build start
-DTS ⚡️ Build success in 3479ms
-DTS dist\index.d.ts 24.01 KB
-Done in 4.10s.
+DTS ⚡️ Build success in 3670ms
+DTS dist\index.d.ts 24.53 KB

package/.turbo/turbo-lint.log

@@ -1,4 +1,3 @@
-yarn run v1.22.19
 $ eslint "src/**/*.ts*"
 
 C:\development\surf\orchestrator-ui\packages\orchestrator-ui-components\src\components\OrchestratorPageTemplate\OrchestratorPageHeader\OrchestratorPageHeader.stories.tsx
@@ -8,10 +7,9 @@ C:\development\surf\orchestrator-ui\packages\orchestrator-ui-components\src\comp
   17:17  warning  Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element  @next/next/no-img-element
 
 C:\development\surf\orchestrator-ui\packages\orchestrator-ui-components\src\components\Table\DataGridTable\DataGridTable.tsx
-(node:21240) [DEP0128] DeprecationWarning: Invalid 'main' field in 'C:\development\surf\orchestrator-ui\node_modules\@orchestrator-ui\eslint-config-custom\package.json' of './dist/index.js'. Please either fix that or report it to the module author
-(Use `node --trace-deprecation ...` to show where the warning was created)
   103:28  warning  'props' is defined but never used  @typescript-eslint/no-unused-vars
 
 ✖ 3 problems (0 errors, 3 warnings)
 
-Done in 2.65s.
+(node:11940) [DEP0128] DeprecationWarning: Invalid 'main' field in 'C:\development\surf\orchestrator-ui\node_modules\@orchestrator-ui\eslint-config-custom\package.json' of './dist/index.js'. Please either fix that or report it to the module author
+(Use `node --trace-deprecation ...` to show where the warning was created)

package/.turbo/turbo-test.log

@@ -1,19 +1,19 @@
 yarn run v1.22.19
 $ jest
-PASS Orchestrator UI Components Tests src/utils/getTokenName.spec.ts
-PASS Orchestrator UI Components Tests src/utils/date.spec.ts
-PASS Orchestrator UI Components Tests src/utils/uuid.spec.ts
-PASS Orchestrator UI Components Tests src/components/Table/utils/tableUtils.spec.ts
-PASS Orchestrator UI Components Tests src/components/Table/utils/tableConfigPersistence.spec.ts
-PASS Orchestrator UI Components Tests src/components/Table/DataGridTable/dataGridColumns.spec.ts
 PASS Orchestrator UI Components Tests src/utils/getTypedFieldFromObject.spec.ts
+PASS Orchestrator UI Components Tests src/components/Table/DataGridTable/dataGridColumns.spec.ts
+PASS Orchestrator UI Components Tests src/utils/uuid.spec.ts
 PASS Orchestrator UI Components Tests src/utils/string.spec.ts
+PASS Orchestrator UI Components Tests src/components/Table/utils/tableConfigPersistence.spec.ts
 PASS Orchestrator UI Components Tests src/components/Table/utils/columns.spec.ts
+PASS Orchestrator UI Components Tests src/utils/getTokenName.spec.ts
+PASS Orchestrator UI Components Tests src/components/Table/utils/tableUtils.spec.ts
+PASS Orchestrator UI Components Tests src/utils/date.spec.ts
 PASS Orchestrator UI Components Tests src/components/SubscriptionsTabs/getSubscriptionsTabTypeFromString.spec.ts
 
 Test Suites: 10 passed, 10 total
 Tests:       50 passed, 50 total
 Snapshots:   0 total
-Time:        3.948 s
+Time:        4.16 s
 Ran all test suites.
-Done in 5.07s.
+Done in 5.13s.

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @orchestrator-ui/orchestrator-ui-components
 
+## 0.2.0
+
+### Minor Changes
+
+- 6c4cb21: Added translation setup and next-inl configuration. Translation strings are now available when using the useTranslations hook. For more on how to add translations refer to apps/wfo-ui/translations/README.md
+
 ## 0.1.2
 
 ### Patch Changes

package/dist/index.d.ts

@@ -10,6 +10,7 @@ import { Criteria } from '@elastic/eui/src/components/basic_table/basic_table';
 import * as react_query from 'react-query';
 import { TypedDocumentNode } from '@graphql-typed-document-node/core';
 import { Variables } from 'graphql-request/build/cjs/types';
+import { AbstractIntlMessages } from 'next-intl';
 
 type BadgeProps = EuiBadgeProps & {
     textColor: TextColor | string;
@@ -202,6 +203,10 @@ type GraphqlQueryVariables<Type> = {
 interface CacheOption {
     value: string;
     label: string;
+}
+declare enum Locale {
+    enUS = "en-Us",
+    nlNL = "nl-NL"
 }
 
 interface Subscription {
@@ -248,6 +253,7 @@ declare const SubscriptionBlock: (title: string, data: object) => _emotion_react
 
 declare const SubscriptionDetailTree: () => _emotion_react_jsx_runtime.JSX.Element | null;
 
+/** TODO: Adding a useTranslations hook here leads to an hooks error. https://github.com/workfloworchestrator/orchestrator-ui/issues/177 */
 declare const SubscriptionGeneral: () => _emotion_react_jsx_runtime.JSX.Element;
 
 declare enum SubscriptionsTabType {
@@ -262,7 +268,7 @@ type FilterQuery = {
 };
 type SubscriptionsTab = {
     id: SubscriptionsTabType;
-    name: string;
+    translationKey: string;
     alwaysOnFilters?: FilterQuery[];
 };
 declare const defaultSubscriptionsTabs: SubscriptionsTab[];
@@ -618,4 +624,7 @@ type TreeProviderProps = {
 };
 declare const TreeProvider: React.FC<TreeProviderProps>;
 
-export { ArrowNarrowDown, ArrowNarrowUp, Badge, BadgeProps, BasicTableColumn, Breadcrumbs, CacheNames, CacheOption, CheckmarkCircleFill, ChevronDown, ColumnConfig, ControlColumn, CustomerBase, DEFAULT_PAGE_SIZE, DEFAULT_PAGE_SIZES, DUTCH_LOCALE, DataDisplayParams, DataDisplayReturnValues, DataGridTable, DataGridTableColumns, DataGridTableProps, DataSorting, EngineStatus, EngineStatusBadge, EngineStatusValue, Environment, EnvironmentBadge, ExternalServiceBase, FailedTasksBadge, Field, FilterQuery, FixedInputBlock, FixedInputsBase, FrequentlyUsed, FrequentlyUsedProps, GlobalStatus, GraphQLSort, GraphqlFilter, GraphqlQueryVariables, HeaderBadge, HeaderBadgeProps, IconProps, ItemsList, ListItemStartPage, ListItemStartPageProps, Loading, LocalStorageTableConfig, LogoutIcon, MinusCircleOutline, MultiListSection, NewProcessPanel, Nullable, OrchestratorConfig, OrchestratorConfigContext, OrchestratorConfigProvider, OrchestratorConfigProviderProps, OrchestratorPageHeader, OrchestratorPageHeaderProps, OrchestratorPageTemplate, OrchestratorPageTemplateProps, OrchestratorSidebar, Pagination, PlusCircleFill, Process$1 as Process, ProcessStatus, ProcessStatusBadge, ProcessStatusBadgeProps, ProcessStatusCounts, ProcessesTimeline, ProcessesTimelineProps, Product, ProductBase, ProductBlock, ProductBlockBase, RenderField, ResourceTypeBase, SearchField, SearchFieldProps, Settings, SettingsModal, SettingsModalProps, SortOrder, StatCards, StatusDotIcon, SubscriptionAction, SubscriptionActions$1 as SubscriptionActions, SubscriptionActionsProps, SubscriptionBlock, SubscriptionContext, SubscriptionContextType, SubscriptionDetailBase, SubscriptionDetailTree, SubscriptionGeneral, SubscriptionProcess, SubscriptionProvider, SubscriptionProviderProps, SubscriptionsTab, SubscriptionsTabType, SubscriptionsTabs, SubscriptionsTabsProps, Table, TableColumnKeys, TableColumns, TableColumnsWithControlColumns, TableColumnsWithExtraNonDataFields, TableConfig, TableControlColumnConfig, TableDataColumnConfig, TableHeaderCell, TableHeaderCellProps, TableProps, TableSettingsModal, TableSettingsModalProps, TableWithFilter, TableWithFilterProps, TotalStat, TreeBlock, TreeContext, TreeContextType, TreeProvider, TreeProviderProps, WFOProductBlockBadge, WFOProductBlockBadgeProps, WFOStatusBadge, WFOStatusBadgeProps, XCircleFill, clearTableConfigFromLocalStorage, defaultOrchestratorTheme, defaultSubscriptionsTabs, determineNewSortOrder, determinePageIndex, getDataSortHandler, getEsQueryStringHandler, getFirstUuidPart, getInitialColumnOrder, getPageChangeHandler, getSortDirectionFromString, getStatusBadgeColor, getSubscriptionsTabTypeFromString, getTableConfigFromLocalStorage, getTypedFieldFromObject, isUuid4, isValidLocalStorageTableConfig, mapColumnSortToEuiDataGridSorting, parseDate, parseDateToLocaleString, removeSuffix, setTableConfigToLocalStorage, upperCaseFirstChar, useCacheNames, useDataDisplayParams, useEngineStatusMutation, useEngineStatusQuery, useFavouriteSubscriptions, useOrchestratorConfig, useOrchestratorTheme, useProcessStatusCountsQuery, useProcessesAttention, useQueryWithGraphql, useRecentProcesses, useSubscriptionActions, useSubscriptionProcesses };
+type TranslationMessagesMap = Map<Locale, AbstractIntlMessages>;
+declare const getTranslationMessages: (locale: string | undefined, messages?: TranslationMessagesMap) => AbstractIntlMessages | undefined;
+
+export { ArrowNarrowDown, ArrowNarrowUp, Badge, BadgeProps, BasicTableColumn, Breadcrumbs, CacheNames, CacheOption, CheckmarkCircleFill, ChevronDown, ColumnConfig, ControlColumn, CustomerBase, DEFAULT_PAGE_SIZE, DEFAULT_PAGE_SIZES, DUTCH_LOCALE, DataDisplayParams, DataDisplayReturnValues, DataGridTable, DataGridTableColumns, DataGridTableProps, DataSorting, EngineStatus, EngineStatusBadge, EngineStatusValue, Environment, EnvironmentBadge, ExternalServiceBase, FailedTasksBadge, Field, FilterQuery, FixedInputBlock, FixedInputsBase, FrequentlyUsed, FrequentlyUsedProps, GlobalStatus, GraphQLSort, GraphqlFilter, GraphqlQueryVariables, HeaderBadge, HeaderBadgeProps, IconProps, ItemsList, ListItemStartPage, ListItemStartPageProps, Loading, LocalStorageTableConfig, Locale, LogoutIcon, MinusCircleOutline, MultiListSection, NewProcessPanel, Nullable, OrchestratorConfig, OrchestratorConfigContext, OrchestratorConfigProvider, OrchestratorConfigProviderProps, OrchestratorPageHeader, OrchestratorPageHeaderProps, OrchestratorPageTemplate, OrchestratorPageTemplateProps, OrchestratorSidebar, Pagination, PlusCircleFill, Process$1 as Process, ProcessStatus, ProcessStatusBadge, ProcessStatusBadgeProps, ProcessStatusCounts, ProcessesTimeline, ProcessesTimelineProps, Product, ProductBase, ProductBlock, ProductBlockBase, RenderField, ResourceTypeBase, SearchField, SearchFieldProps, Settings, SettingsModal, SettingsModalProps, SortOrder, StatCards, StatusDotIcon, SubscriptionAction, SubscriptionActions$1 as SubscriptionActions, SubscriptionActionsProps, SubscriptionBlock, SubscriptionContext, SubscriptionContextType, SubscriptionDetailBase, SubscriptionDetailTree, SubscriptionGeneral, SubscriptionProcess, SubscriptionProvider, SubscriptionProviderProps, SubscriptionsTab, SubscriptionsTabType, SubscriptionsTabs, SubscriptionsTabsProps, Table, TableColumnKeys, TableColumns, TableColumnsWithControlColumns, TableColumnsWithExtraNonDataFields, TableConfig, TableControlColumnConfig, TableDataColumnConfig, TableHeaderCell, TableHeaderCellProps, TableProps, TableSettingsModal, TableSettingsModalProps, TableWithFilter, TableWithFilterProps, TotalStat, TranslationMessagesMap, TreeBlock, TreeContext, TreeContextType, TreeProvider, TreeProviderProps, WFOProductBlockBadge, WFOProductBlockBadgeProps, WFOStatusBadge, WFOStatusBadgeProps, XCircleFill, clearTableConfigFromLocalStorage, defaultOrchestratorTheme, defaultSubscriptionsTabs, determineNewSortOrder, determinePageIndex, getDataSortHandler, getEsQueryStringHandler, getFirstUuidPart, getInitialColumnOrder, getPageChangeHandler, getSortDirectionFromString, getStatusBadgeColor, getSubscriptionsTabTypeFromString, getTableConfigFromLocalStorage, getTranslationMessages, getTypedFieldFromObject, isUuid4, isValidLocalStorageTableConfig, mapColumnSortToEuiDataGridSorting, parseDate, parseDateToLocaleString, removeSuffix, setTableConfigToLocalStorage, upperCaseFirstChar, useCacheNames, useDataDisplayParams, useEngineStatusMutation, useEngineStatusQuery, useFavouriteSubscriptions, useOrchestratorConfig, useOrchestratorTheme, useProcessStatusCountsQuery, useProcessesAttention, useQueryWithGraphql, useRecentProcesses, useSubscriptionActions, useSubscriptionProcesses };

package/dist/index.js

@@ -1718,6 +1718,7 @@ import {
   EuiSpacer as EuiSpacer10,
   EuiText as EuiText7
 } from "@elastic/eui";
+import { useTranslations } from "next-intl";
 
 // src/components/Subscription/styles.ts
 import { css } from "@emotion/react";
@@ -1748,6 +1749,7 @@ var RenderField = (field, data) => {
   return /* @__PURE__ */ jsx36("div", { children: data[field] });
 };
 var SubscriptionBlock = (title, data) => {
+  const t = useTranslations("common");
   const keys = [];
   for (const key in data) {
     if (typeof data[key] !== "object") {
@@ -1761,7 +1763,7 @@ var SubscriptionBlock = (title, data) => {
     /* @__PURE__ */ jsx36("div", { children: /* @__PURE__ */ jsxs25("div", { style: { marginTop: 5 }, children: [
       /* @__PURE__ */ jsxs25(EuiFlexGroup7, { justifyContent: "spaceBetween", children: [
         /* @__PURE__ */ jsx36(EuiFlexItem6, { children: /* @__PURE__ */ jsx36(EuiText7, { grow: false, children: /* @__PURE__ */ jsx36("h3", { children: title }) }) }),
-        /* @__PURE__ */ jsx36(EuiFlexItem6, { grow: false, children: /* @__PURE__ */ jsx36(EuiButtonEmpty2, { size: "s", iconType: "starEmpty", children: "Add to favorites" }) })
+        /* @__PURE__ */ jsx36(EuiFlexItem6, { grow: false, children: /* @__PURE__ */ jsx36(EuiButtonEmpty2, { size: "s", iconType: "starEmpty", children: t("addToFavorites") }) })
       ] }),
       /* @__PURE__ */ jsx36(EuiSpacer10, { size: "s" }),
       /* @__PURE__ */ jsx36("table", { width: "100%", children: /* @__PURE__ */ jsxs25("tbody", { children: [
@@ -1771,7 +1773,7 @@ var SubscriptionBlock = (title, data) => {
             {
               valign: "top",
               css: subscriptionDefinitionCellStyle,
-              children: /* @__PURE__ */ jsx36("b", { children: "Product" })
+              children: /* @__PURE__ */ jsx36("b", { children: t("product") })
             }
           ),
           /* @__PURE__ */ jsx36("td", { css: subscriptionValueCellStyle, children: data.product.name })
@@ -1915,7 +1917,6 @@ var ProcessesTimeline = ({
   subscriptionId
 }) => {
   const { data: subscriptionProcesses } = useSubscriptionProcesses(subscriptionId);
-  console.log("SUB", subscriptionProcesses);
   return /* @__PURE__ */ jsxs27(Fragment8, { children: [
     /* @__PURE__ */ jsx38(EuiSpacer12, { size: "m" }),
     !subscriptionProcesses && /* @__PURE__ */ jsx38(EuiLoadingContent, {}),
@@ -2208,12 +2209,14 @@ import {
   EuiTitle,
   EuiPopover
 } from "@elastic/eui";
+import { useTranslations as useTranslations2 } from "next-intl";
 import { Fragment as Fragment10, jsx as jsx42, jsxs as jsxs29 } from "@emotion/react/jsx-runtime";
 var MenuItem = ({ icon, description, key }) => /* @__PURE__ */ jsx42(EuiContextMenuItem, { icon: /* @__PURE__ */ jsx42(EuiAvatar3, { name: icon, size: "s" }), children: description }, key);
 var MenuBlock = ({ title }) => /* @__PURE__ */ jsx42(EuiTitle, { size: "xxxs", children: /* @__PURE__ */ jsx42("h3", { children: title }) });
 var SubscriptionActions = ({
   subscriptionId
 }) => {
+  const t = useTranslations2("subscriptions.detail.workflow");
   const [isPopoverOpen, setPopover] = useState9(false);
   const { data: subscriptionActions } = useSubscriptionActions(subscriptionId);
   const onButtonClick = () => {
@@ -2242,7 +2245,7 @@ var SubscriptionActions = ({
       anchorPosition: "downLeft",
       children: /* @__PURE__ */ jsx42(EuiContextMenuPanel, { children: /* @__PURE__ */ jsxs29(EuiPanel8, { color: "transparent", paddingSize: "s", children: [
         subscriptionActions && subscriptionActions.create && /* @__PURE__ */ jsxs29(Fragment10, { children: [
-          /* @__PURE__ */ jsx42(MenuBlock, { title: "Create workflow" }),
+          /* @__PURE__ */ jsx42(MenuBlock, { title: t("create") }),
           subscriptionActions.create.map((item, index) => /* @__PURE__ */ jsx42(
             MenuItem,
             {
@@ -2254,7 +2257,7 @@ var SubscriptionActions = ({
           ))
         ] }),
         subscriptionActions && subscriptionActions.modify && /* @__PURE__ */ jsxs29(Fragment10, { children: [
-          /* @__PURE__ */ jsx42(MenuBlock, { title: "Modify workflow" }),
+          /* @__PURE__ */ jsx42(MenuBlock, { title: t("modify") }),
           subscriptionActions.modify.map((item, index) => /* @__PURE__ */ jsx42(
             MenuItem,
             {
@@ -2266,11 +2269,11 @@ var SubscriptionActions = ({
           ))
         ] }),
         subscriptionActions && subscriptionActions.system && /* @__PURE__ */ jsxs29(Fragment10, { children: [
-          /* @__PURE__ */ jsx42(MenuBlock, { title: "System workflow" }),
+          /* @__PURE__ */ jsx42(MenuBlock, { title: t("system") }),
           subscriptionActions.system.map((item, index) => /* @__PURE__ */ jsx42(
             MenuItem,
             {
-              icon: "Syste",
+              icon: "System",
               description: item.description,
               index
             },
@@ -2278,7 +2281,7 @@ var SubscriptionActions = ({
           ))
         ] }),
         subscriptionActions && subscriptionActions.terminate && /* @__PURE__ */ jsxs29(Fragment10, { children: [
-          /* @__PURE__ */ jsx42(MenuBlock, { title: "Terminate workflow" }),
+          /* @__PURE__ */ jsx42(MenuBlock, { title: t("terminate") }),
           subscriptionActions.terminate.map(
             (item, index) => /* @__PURE__ */ jsx42(
               MenuItem,
@@ -2298,12 +2301,15 @@ var SubscriptionActions = ({
 
 // src/components/Subscription/SubscriptionDetailTree.tsx
 import React13, { useState as useState10 } from "react";
+import { useTranslations as useTranslations4 } from "next-intl";
 
 // src/components/Tree/TreeBranch.tsx
 import React12 from "react";
+import { EuiListGroup } from "@elastic/eui";
 
 // src/components/Tree/TreeNode.tsx
 import React11 from "react";
+import { useTranslations as useTranslations3 } from "next-intl";
 import {
   EuiFlexGroup as EuiFlexGroup10,
   EuiFlexItem as EuiFlexItem9,
@@ -2313,6 +2319,7 @@ import {
 } from "@elastic/eui";
 import { jsx as jsx43, jsxs as jsxs30 } from "@emotion/react/jsx-runtime";
 var TreeNode = ({ item, hasChildren, level }) => {
+  const t = useTranslations3("common");
   const { expandedIds, toggleExpandedId, selectedIds, toggleSelectedId } = React11.useContext(TreeContext);
   const expanded = expandedIds.includes(item.id);
   const selected = selectedIds.includes(item.id);
@@ -2347,7 +2354,7 @@ var TreeNode = ({ item, hasChildren, level }) => {
           onClick: () => toggleSelectedId(item.id),
           iconType: "error",
           iconSize: "s",
-          "aria-label": "Deselect",
+          "aria-label": t("deselect"),
           alwaysShow: true
         }
       }
@@ -2363,7 +2370,6 @@ var TreeNode = ({ item, hasChildren, level }) => {
 };
 
 // src/components/Tree/TreeBranch.tsx
-import { EuiListGroup } from "@elastic/eui";
 import { Fragment as Fragment11, jsx as jsx44, jsxs as jsxs31 } from "@emotion/react/jsx-runtime";
 var TreeBranch = ({ item, level }) => {
   const { expandedIds } = React12.useContext(TreeContext);
@@ -2421,6 +2427,7 @@ function getProductBlockTitle(resourceType) {
   return ((_a = resourceType.title) == null ? void 0 : _a.length) > MAX_LABEL_LENGTH ? `${resourceType.title.substring(0, MAX_LABEL_LENGTH)}...` : resourceType.title;
 }
 var SubscriptionDetailTree = () => {
+  const t = useTranslations4("subscriptions.detail");
   const [expandAllActive, setExpandAllActive] = useState10(false);
   const [selectedTreeNode, setSelectedTreeNode] = useState10(-1);
   const { subscriptionData, loadingStatus } = React13.useContext(
@@ -2461,14 +2468,13 @@ var SubscriptionDetailTree = () => {
         (_a = parentNode.children) == null ? void 0 : _a.push(shallowCopy);
       }
     });
-    console.log("Tree", tree);
   }
   if (!tree)
     return null;
   return /* @__PURE__ */ jsxs32(EuiFlexGroup11, { style: { marginTop: 15 }, children: [
     /* @__PURE__ */ jsx46(EuiFlexItem10, { style: { maxWidth: 450, width: 450 }, children: /* @__PURE__ */ jsxs32(EuiFlexGroup11, { direction: "column", children: [
       /* @__PURE__ */ jsx46(EuiFlexItem10, { grow: false, children: /* @__PURE__ */ jsxs32(EuiFlexGroup11, { children: [
-        /* @__PURE__ */ jsx46(EuiFlexItem10, { grow: false, children: /* @__PURE__ */ jsx46(EuiText10, { children: /* @__PURE__ */ jsx46("h3", { children: "Product blocks" }) }) }),
+        /* @__PURE__ */ jsx46(EuiFlexItem10, { grow: false, children: /* @__PURE__ */ jsx46(EuiText10, { children: /* @__PURE__ */ jsx46("h3", { children: t("productBlocks") }) }) }),
         /* @__PURE__ */ jsx46(EuiFlexItem10, { grow: false, children: /* @__PURE__ */ jsx46(
           EuiButtonIcon3,
           {
@@ -2499,9 +2505,12 @@ var SubscriptionDetailTree = () => {
             minHeight: 600
           },
           size: "m",
-          title: "No product block selected",
+          title: t("noProductBlockSelected"),
           iconType: "inspect",
-          children: /* @__PURE__ */ jsx46("p", { children: "Select one or more product blocks to view their details" })
+          children: /* @__PURE__ */ jsxs32("p", { children: [
+            t("ctaSelectProductBlock"),
+            " "
+          ] })
         }
       ),
       selectedIds.length !== 0 && selectedIds.reverse().map(
@@ -2537,15 +2546,16 @@ var SubscriptionGeneral = () => {
       subscriptionData
     ) }),
     /* @__PURE__ */ jsx47(EuiFlexItem11, { children: FixedInputBlock(
-      "Fixed inputs",
+      "Fixed Inputs",
       subscriptionData.fixedInputs
     ) }),
-    /* @__PURE__ */ jsx47(EuiFlexItem11, { children: FixedInputBlock("Product info", subscriptionData.product) })
+    /* @__PURE__ */ jsx47(EuiFlexItem11, { children: FixedInputBlock("Product Info", subscriptionData.product) })
   ] }) });
 };
 
 // src/components/SubscriptionsTabs/SubscriptionsTabs.tsx
 import { EuiTab, EuiTabs } from "@elastic/eui";
+import { useTranslations as useTranslations5 } from "next-intl";
 import { jsx as jsx48 } from "@emotion/react/jsx-runtime";
 var SubscriptionsTabType = /* @__PURE__ */ ((SubscriptionsTabType2) => {
   SubscriptionsTabType2["ACTIVE"] = "ACTIVE";
@@ -2557,7 +2567,7 @@ var SubscriptionsTabType = /* @__PURE__ */ ((SubscriptionsTabType2) => {
 var defaultSubscriptionsTabs = [
   {
     id: "ACTIVE" /* ACTIVE */,
-    name: "Active",
+    translationKey: "active",
     alwaysOnFilters: [
       {
         field: "status",
@@ -2567,7 +2577,7 @@ var defaultSubscriptionsTabs = [
   },
   {
     id: "TERMINATED" /* TERMINATED */,
-    name: "Terminated",
+    translationKey: "terminated",
     alwaysOnFilters: [
       {
         field: "status",
@@ -2577,7 +2587,7 @@ var defaultSubscriptionsTabs = [
   },
   {
     id: "TRANSIENT" /* TRANSIENT */,
-    name: "Transient",
+    translationKey: "transient",
     alwaysOnFilters: [
       {
         field: "status",
@@ -2587,22 +2597,25 @@ var defaultSubscriptionsTabs = [
   },
   {
     id: "ALL" /* ALL */,
-    name: "All"
+    translationKey: "all"
   }
 ];
 var SubscriptionsTabs = ({
   tabs,
   selectedSubscriptionsTab,
   onChangeSubscriptionsTab
-}) => /* @__PURE__ */ jsx48(EuiTabs, { children: tabs.map(({ id, name }) => /* @__PURE__ */ jsx48(
-  EuiTab,
-  {
-    isSelected: id === selectedSubscriptionsTab,
-    onClick: () => id !== selectedSubscriptionsTab && onChangeSubscriptionsTab(id),
-    children: name
-  },
-  id
-)) });
+}) => {
+  const t = useTranslations5("subscriptions.tabs");
+  return /* @__PURE__ */ jsx48(EuiTabs, { children: tabs.map(({ id, translationKey: name }) => /* @__PURE__ */ jsx48(
+    EuiTab,
+    {
+      isSelected: id === selectedSubscriptionsTab,
+      onClick: () => id !== selectedSubscriptionsTab && onChangeSubscriptionsTab(id),
+      children: t(name)
+    },
+    id
+  )) });
+};
 
 // src/components/SubscriptionsTabs/getSubscriptionsTabTypeFromString.ts
 var getSubscriptionsTabTypeFromString = (tabId) => {
@@ -2635,6 +2648,11 @@ var SortOrder = /* @__PURE__ */ ((SortOrder2) => {
   SortOrder2["DESC"] = "DESC";
   return SortOrder2;
 })(SortOrder || {});
+var Locale = /* @__PURE__ */ ((Locale2) => {
+  Locale2["enUS"] = "en-Us";
+  Locale2["nlNL"] = "nl-NL";
+  return Locale2;
+})(Locale || {});
 
 // src/components/Table/DataGridTable/dataGridColumns.ts
 var getInitialColumnOrder = (columns, initialColumnOrder) => {
@@ -3194,6 +3212,148 @@ var defaultOrchestratorTheme = {
     }
   }
 };
+
+// src/messages/nl-NL.json
+var nl_NL_default = {
+  main: {
+    title: "Welcome to example-orchestrator-ui!"
+  },
+  metadata: {
+    tabs: {
+      products: "Producten",
+      productBlocks: "Productblokken",
+      resourceTypes: "Resource types",
+      fixedInputs: "Vaste inputs",
+      workflows: "Workflows"
+    },
+    product: {
+      name: "Naam",
+      description: "Beschrijving",
+      tag: "Tag",
+      productType: "Type",
+      status: "Status",
+      productBlocks: "Product blocks",
+      createdAt: "Aangemaakt"
+    }
+  },
+  subscriptions: {
+    tabs: {
+      active: "Actief",
+      terminated: "Beeindigd",
+      transient: "Tijdelijk",
+      all: "Alles"
+    },
+    index: {
+      id: "ID",
+      description: "Beschrijving",
+      status: "Status",
+      insync: "In Sync",
+      product: "Produkt",
+      tag: "Tag",
+      startDate: "Start datum",
+      endDate: "Eind Datum",
+      note: "Notitite"
+    },
+    detail: {
+      tabs: {
+        general: "Algemeen",
+        serviceConfiguration: "Service configuratie",
+        processes: "Processen",
+        relatedSubscriptions: "Geralateerde subscriptions"
+      }
+    }
+  }
+};
+
+// src/messages/en-US.json
+var en_US_default = {
+  main: {
+    title: "Welcome to example-orchestrator-ui!"
+  },
+  common: {
+    addToFavorites: "Add to favorites",
+    product: "Product",
+    deselect: "Deselect"
+  },
+  metadata: {
+    tabs: {
+      products: "Products",
+      productBlocks: "Productblocks",
+      resourceTypes: "Resource types",
+      fixedInputs: "Fixed inputs",
+      workflows: "Workflows"
+    },
+    product: {
+      name: "Name",
+      description: "Description",
+      tag: "Tag",
+      productType: "Type",
+      status: "status",
+      productBlocks: "Product blocks",
+      createdAt: "Created"
+    }
+  },
+  subscriptions: {
+    tabs: {
+      active: "Active",
+      terminated: "Terminated",
+      transient: "Transient",
+      all: "All"
+    },
+    index: {
+      id: "ID",
+      description: "Description",
+      status: "Status",
+      insync: "In Sync",
+      product: "Product",
+      tag: "Tag",
+      startDate: "Start Date",
+      endDate: "End Date",
+      note: "Note"
+    },
+    detail: {
+      tabs: {
+        general: "General",
+        serviceConfiguration: "Service configuration",
+        processes: "Processes",
+        relatedSubscriptions: "Related subscriptions"
+      },
+      loadingStatus: "Loading status",
+      workflow: {
+        create: "Create workflow",
+        modify: "Modify workflow",
+        system: "System workflow",
+        terminate: "Terminate workflow"
+      },
+      subscriptionDetails: "Subscription details",
+      fixedInputs: "Fixed inputs",
+      productInfo: "Product info",
+      noProductBlockSelected: "No product block selected",
+      productBlocks: "Product blocks",
+      ctaSelectProductBlock: "Select one or more product blocks to view their details",
+      startedBy: "Started by",
+      startedAt: "Started at",
+      status: "Status",
+      id: "ID"
+    }
+  }
+};
+
+// src/messages/getTranslationMessages.ts
+var standardMessageMap = /* @__PURE__ */ new Map([
+  ["en-Us" /* enUS */, en_US_default],
+  ["nl-NL" /* nlNL */, nl_NL_default]
+]);
+var getTranslationMessages = (locale, messages = standardMessageMap) => {
+  switch (locale) {
+    case "en-Us" /* enUS */:
+      return messages.get("en-Us" /* enUS */);
+    case "nl-NL" /* nlNL */:
+      return messages.get("nl-NL" /* nlNL */);
+    default:
+      return messages.get("en-Us" /* enUS */);
+  }
+};
 export {
   ArrowNarrowDown,
   ArrowNarrowUp,
@@ -3214,6 +3374,7 @@ export {
   HeaderBadge,
   ListItemStartPage,
   Loading,
+  Locale,
   LogoutIcon,
   MinusCircleOutline,
   MultiListSection,
@@ -3266,6 +3427,7 @@ export {
   getStatusBadgeColor,
   getSubscriptionsTabTypeFromString,
   getTableConfigFromLocalStorage,
+  getTranslationMessages,
   getTypedFieldFromObject,
   isUuid4,
   isValidLocalStorageTableConfig,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@orchestrator-ui/orchestrator-ui-components",
-    "version": "0.1.2",
+    "version": "0.2.0",
     "license": "MIT",
     "scripts": {
         "test": "jest",

package/src/components/Subscription/ProcessesTimeline.tsx

@@ -10,6 +10,7 @@ import {
 import { ProcessStatusBadge } from '../Badges';
 import { SubscriptionProcess, useSubscriptionProcesses } from '../../hooks';
 
+/** TODO: Adding a useTranslations hook here leads to an hooks error. https://github.com/workfloworchestrator/orchestrator-ui/issues/177 */
 const Card = (processInfo: SubscriptionProcess) => (
     <div style={{ marginTop: 5 }}>
         <table width="100%" bgcolor={'#F1F5F9'}>
@@ -87,7 +88,6 @@ export const ProcessesTimeline: FC<ProcessesTimelineProps> = ({
 }) => {
     const { data: subscriptionProcesses } =
         useSubscriptionProcesses(subscriptionId);
-    console.log('SUB', subscriptionProcesses);
 
     return (
         <>

package/src/components/Subscription/SubscriptionActions.tsx

@@ -8,6 +8,7 @@ import {
     EuiTitle,
     EuiPopover,
 } from '@elastic/eui';
+import { useTranslations } from 'next-intl';
 import { useSubscriptionActions } from '../../hooks/useSubscriptionActions';
 
 type MenuItemProps = {
@@ -39,6 +40,7 @@ export type SubscriptionActionsProps = {
 export const SubscriptionActions: FC<SubscriptionActionsProps> = ({
     subscriptionId,
 }) => {
+    const t = useTranslations('subscriptions.detail.workflow');
     const [isPopoverOpen, setPopover] = useState(false);
     const { data: subscriptionActions } =
         useSubscriptionActions(subscriptionId);
@@ -74,7 +76,7 @@ export const SubscriptionActions: FC<SubscriptionActionsProps> = ({
                 <EuiPanel color="transparent" paddingSize="s">
                     {subscriptionActions && subscriptionActions.create && (
                         <>
-                            <MenuBlock title={'Create workflow'}></MenuBlock>
+                            <MenuBlock title={t('create')}></MenuBlock>
                             {subscriptionActions.create.map((item, index) => (
                                 <MenuItem
                                     key={`c_${index}`}
@@ -88,7 +90,7 @@ export const SubscriptionActions: FC<SubscriptionActionsProps> = ({
 
                     {subscriptionActions && subscriptionActions.modify && (
                         <>
-                            <MenuBlock title={'Modify workflow'}></MenuBlock>
+                            <MenuBlock title={t('modify')}></MenuBlock>
                             {subscriptionActions.modify.map((item, index) => (
                                 <MenuItem
                                     key={`m_${index}`}
@@ -102,11 +104,11 @@ export const SubscriptionActions: FC<SubscriptionActionsProps> = ({
 
                     {subscriptionActions && subscriptionActions.system && (
                         <>
-                            <MenuBlock title={'System workflow'}></MenuBlock>
+                            <MenuBlock title={t('system')}></MenuBlock>
                             {subscriptionActions.system.map((item, index) => (
                                 <MenuItem
                                     key={`s_${index}`}
-                                    icon={'Syste'}
+                                    icon={'System'}
                                     description={item.description}
                                     index={index}
                                 />
@@ -116,7 +118,7 @@ export const SubscriptionActions: FC<SubscriptionActionsProps> = ({
 
                     {subscriptionActions && subscriptionActions.terminate && (
                         <>
-                            <MenuBlock title={'Terminate workflow'}></MenuBlock>
+                            <MenuBlock title={t('terminate')}></MenuBlock>
                             {subscriptionActions.terminate.map(
                                 (item, index) => (
                                     <MenuItem

package/src/components/Subscription/SubscriptionBlock.tsx

@@ -7,6 +7,7 @@ import {
     EuiSpacer,
     EuiText,
 } from '@elastic/eui';
+import { useTranslations } from 'next-intl';
 import { CheckmarkCircleFill, MinusCircleOutline } from '../../icons';
 import { WFOStatusBadge } from '../Badges';
 import {
@@ -33,6 +34,7 @@ export const RenderField = (field: string, data: any) => {
 };
 
 export const SubscriptionBlock = (title: string, data: object) => {
+    const t = useTranslations('common');
     const keys = [];
     for (const key in data) {
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -56,7 +58,7 @@ export const SubscriptionBlock = (title: string, data: object) => {
                         </EuiFlexItem>
                         <EuiFlexItem grow={false}>
                             <EuiButtonEmpty size={'s'} iconType={'starEmpty'}>
-                                Add to favorites
+                                {t('addToFavorites')}
                             </EuiButtonEmpty>
                         </EuiFlexItem>
                     </EuiFlexGroup>
@@ -69,7 +71,7 @@ export const SubscriptionBlock = (title: string, data: object) => {
                                     valign={'top'}
                                     css={subscriptionDefinitionCellStyle}
                                 >
-                                    <b>Product</b>
+                                    <b>{t('product')}</b>
                                 </td>
                                 <td css={subscriptionValueCellStyle}>
                                     {/*

package/src/components/Subscription/SubscriptionDetailTree.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { useTranslations } from 'next-intl';
 import { ProductBlockBase, ResourceTypeBase, TreeBlock } from '../../types';
 import { ProductBlock } from './ProductBlock';
 import {
@@ -40,6 +41,7 @@ function getProductBlockTitle(resourceType: ResourceTypeBase): string {
 }
 
 export const SubscriptionDetailTree = () => {
+    const t = useTranslations('subscriptions.detail');
     const [expandAllActive, setExpandAllActive] = useState(false);
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const [selectedTreeNode, setSelectedTreeNode] = useState(-1);
@@ -109,8 +111,8 @@ export const SubscriptionDetailTree = () => {
                 parentNode.children?.push(shallowCopy);
             }
         });
-        console.log('Tree', tree);
     }
+
     if (!tree) return null;
 
     return (
@@ -121,7 +123,7 @@ export const SubscriptionDetailTree = () => {
                         <EuiFlexGroup>
                             <EuiFlexItem grow={false}>
                                 <EuiText>
-                                    <h3>Product blocks</h3>
+                                    <h3>{t('productBlocks')}</h3>
                                 </EuiText>
                             </EuiFlexItem>
                             <EuiFlexItem grow={false}>
@@ -158,13 +160,10 @@ export const SubscriptionDetailTree = () => {
                                 minHeight: 600,
                             }}
                             size="m"
-                            title="No product block selected"
+                            title={t('noProductBlockSelected')}
                             iconType="inspect"
                         >
-                            <p>
-                                Select one or more product blocks to view their
-                                details
-                            </p>
+                            <p>{t('ctaSelectProductBlock')} </p>
                         </EuiCallOut>
                     )}
                     {selectedIds.length !== 0 &&

package/src/components/Subscription/SubscriptionGeneral.tsx

@@ -6,13 +6,17 @@ import {
     EuiLoadingContent,
     EuiSpacer,
 } from '@elastic/eui';
+// import { useTranslations } from 'next-intl';
 import { SubscriptionContext } from '../../contexts/SubscriptionContext';
 import { SubscriptionBlock } from './SubscriptionBlock';
 import { FixedInputBlock } from './FixedInputBlock';
 
+/** TODO: Adding a useTranslations hook here leads to an hooks error. https://github.com/workfloworchestrator/orchestrator-ui/issues/177 */
+
 export const SubscriptionGeneral = () => {
     const { subscriptionData, loadingStatus } =
         React.useContext(SubscriptionContext);
+
     if (!loadingStatus) {
         return (
             <>
@@ -33,12 +37,12 @@ export const SubscriptionGeneral = () => {
                 </EuiFlexItem>
                 <EuiFlexItem>
                     {FixedInputBlock(
-                        'Fixed inputs',
+                        'Fixed Inputs',
                         subscriptionData.fixedInputs,
                     )}
                 </EuiFlexItem>
                 <EuiFlexItem>
-                    {FixedInputBlock('Product info', subscriptionData.product)}
+                    {FixedInputBlock('Product Info', subscriptionData.product)}
                 </EuiFlexItem>
             </>
         </EuiFlexGrid>

package/src/components/SubscriptionsTabs/SubscriptionsTabs.tsx

@@ -1,5 +1,6 @@
 import { EuiTab, EuiTabs } from '@elastic/eui';
 import React, { FC } from 'react';
+import { useTranslations } from 'next-intl';
 
 export enum SubscriptionsTabType {
     ACTIVE = 'ACTIVE',
@@ -15,14 +16,14 @@ export type FilterQuery = {
 
 export type SubscriptionsTab = {
     id: SubscriptionsTabType;
-    name: string;
+    translationKey: string;
     alwaysOnFilters?: FilterQuery[];
 };
 
 export const defaultSubscriptionsTabs: SubscriptionsTab[] = [
     {
         id: SubscriptionsTabType.ACTIVE,
-        name: 'Active',
+        translationKey: 'active',
         alwaysOnFilters: [
             {
                 field: 'status',
@@ -32,7 +33,7 @@ export const defaultSubscriptionsTabs: SubscriptionsTab[] = [
     },
     {
         id: SubscriptionsTabType.TERMINATED,
-        name: 'Terminated',
+        translationKey: 'terminated',
         alwaysOnFilters: [
             {
                 field: 'status',
@@ -42,7 +43,7 @@ export const defaultSubscriptionsTabs: SubscriptionsTab[] = [
     },
     {
         id: SubscriptionsTabType.TRANSIENT,
-        name: 'Transient',
+        translationKey: 'transient',
         alwaysOnFilters: [
             {
                 field: 'status',
@@ -52,7 +53,7 @@ export const defaultSubscriptionsTabs: SubscriptionsTab[] = [
     },
     {
         id: SubscriptionsTabType.ALL,
-        name: 'All',
+        translationKey: 'all',
     },
 ];
 
@@ -68,19 +69,22 @@ export const SubscriptionsTabs: FC<SubscriptionsTabsProps> = ({
     tabs,
     selectedSubscriptionsTab,
     onChangeSubscriptionsTab,
-}) => (
-    <EuiTabs>
-        {tabs.map(({ id, name }) => (
-            <EuiTab
-                key={id}
-                isSelected={id === selectedSubscriptionsTab}
-                onClick={() =>
-                    id !== selectedSubscriptionsTab &&
-                    onChangeSubscriptionsTab(id)
-                }
-            >
-                {name}
-            </EuiTab>
-        ))}
-    </EuiTabs>
-);
+}) => {
+    const t = useTranslations('subscriptions.tabs');
+    return (
+        <EuiTabs>
+            {tabs.map(({ id, translationKey: name }) => (
+                <EuiTab
+                    key={id}
+                    isSelected={id === selectedSubscriptionsTab}
+                    onClick={() =>
+                        id !== selectedSubscriptionsTab &&
+                        onChangeSubscriptionsTab(id)
+                    }
+                >
+                    {t(name)}
+                </EuiTab>
+            ))}
+        </EuiTabs>
+    );
+};

package/src/components/Tree/TreeBranch.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
+import { EuiListGroup } from '@elastic/eui';
 
 import { TreeNode } from './TreeNode';
-import { EuiListGroup } from '@elastic/eui';
 import { TreeBlock } from '../../types';
 import { TreeContext, TreeContextType } from '../../contexts/TreeContext';
 

package/src/components/Tree/TreeNode.tsx

@@ -1,4 +1,5 @@
 import React, { FC } from 'react';
+import { useTranslations } from 'next-intl';
 import {
     EuiFlexGroup,
     EuiFlexItem,
@@ -21,6 +22,7 @@ type TreeNodeProps = {
 };
 
 export const TreeNode: FC<TreeNodeProps> = ({ item, hasChildren, level }) => {
+    const t = useTranslations('common');
     const { expandedIds, toggleExpandedId, selectedIds, toggleSelectedId } =
         React.useContext(TreeContext) as TreeContextType;
     const expanded = expandedIds.includes(item.id);
@@ -59,7 +61,7 @@ export const TreeNode: FC<TreeNodeProps> = ({ item, hasChildren, level }) => {
                                 onClick: () => toggleSelectedId(item.id),
                                 iconType: 'error',
                                 iconSize: 's',
-                                'aria-label': 'Deselect',
+                                'aria-label': t('deselect'),
                                 alwaysShow: true,
                             }}
                         />

package/src/index.ts

@@ -5,3 +5,4 @@ export * from './utils';
 export * from './contexts';
 export * from './types';
 export * from './hooks';
+export * from './messages';

package/src/messages/en-US.json

@@ -0,0 +1,72 @@
+{
+    "main": {
+        "title": "Welcome to example-orchestrator-ui!"
+    },
+    "common": {
+        "addToFavorites": "Add to favorites",
+        "product": "Product",
+        "deselect": "Deselect"
+    },
+    "metadata": {
+        "tabs": {
+            "products": "Products",
+            "productBlocks": "Productblocks",
+            "resourceTypes": "Resource types",
+            "fixedInputs": "Fixed inputs",
+            "workflows": "Workflows"
+        },
+        "product": {
+            "name": "Name",
+            "description": "Description",
+            "tag": "Tag",
+            "productType": "Type",
+            "status": "status",
+            "productBlocks": "Product blocks",
+            "createdAt": "Created"
+        }
+    },
+    "subscriptions": {
+        "tabs": {
+            "active": "Active",
+            "terminated": "Terminated",
+            "transient": "Transient",
+            "all": "All"
+        },
+        "index": {
+            "id": "ID",
+            "description": "Description",
+            "status": "Status",
+            "insync": "In Sync",
+            "product": "Product",
+            "tag": "Tag",
+            "startDate": "Start Date",
+            "endDate": "End Date",
+            "note": "Note"
+        },
+        "detail": {
+            "tabs": {
+                "general": "General",
+                "serviceConfiguration": "Service configuration",
+                "processes": "Processes",
+                "relatedSubscriptions": "Related subscriptions"
+            },
+            "loadingStatus": "Loading status",
+            "workflow": {
+                "create": "Create workflow",
+                "modify": "Modify workflow",
+                "system": "System workflow",
+                "terminate": "Terminate workflow"
+            },
+            "subscriptionDetails": "Subscription details",
+            "fixedInputs": "Fixed inputs",
+            "productInfo": "Product info",
+            "noProductBlockSelected": "No product block selected",
+            "productBlocks": "Product blocks",
+            "ctaSelectProductBlock": "Select one or more product blocks to view their details",
+            "startedBy": "Started by",
+            "startedAt": "Started at",
+            "status": "Status",
+            "id": "ID"
+        }
+    }
+}

package/src/messages/getTranslationMessages.spec.ts

@@ -0,0 +1,51 @@
+import { getTranslationMessages } from './getTranslationMessages';
+import { Locale } from '../types';
+import enUS from './en-US.json';
+import nlNL from './nl-NL.json';
+
+describe('getTransalationMessages', () => {
+    it('Returns nl-NL translation when nl-NL locale is requested', () => {
+        const translation = getTranslationMessages(Locale.nlNL);
+        expect(translation).toEqual(nlNL);
+    });
+
+    it('Returns en-US translation when en-US locale is requested', () => {
+        const translation = getTranslationMessages(Locale.enUS);
+        expect(translation).toEqual(enUS);
+    });
+
+    it('Returns en-US translation when no locale is requested', () => {
+        const translation = getTranslationMessages(undefined);
+        expect(translation).toEqual(enUS);
+    });
+    it('Returns en-US translation unknown locale is requested', () => {
+        const translation = getTranslationMessages('UNKNOWN-LOCALE');
+        expect(translation).toEqual(enUS);
+    });
+    it('Returns custom translation when custom translations map array is provided', () => {
+        const customEN = {
+            metadata: {
+                product: {
+                    name: 'CUSTOM-EN-NAME',
+                },
+            },
+        };
+
+        const customMap = new Map([[Locale.enUS, customEN]]);
+        const translation = getTranslationMessages(Locale.enUS, customMap);
+        expect(translation).toEqual(customEN);
+    });
+    it('Returns en-Us translation if unknown locale is requested together with custom translations map', () => {
+        const customEN = {
+            metadata: {
+                product: {
+                    name: 'CUSTOM-EN-NAME',
+                },
+            },
+        };
+
+        const customMap = new Map([[Locale.enUS, customEN]]);
+        const translation = getTranslationMessages('UNKNOWN-LOCALE', customMap);
+        expect(translation).toEqual(customEN);
+    });
+});

package/src/messages/getTranslationMessages.ts

@@ -0,0 +1,26 @@
+import { AbstractIntlMessages } from 'next-intl';
+
+import { Locale } from '../types';
+import nlNL from './nl-NL.json';
+import enUS from './en-US.json';
+
+export type TranslationMessagesMap = Map<Locale, AbstractIntlMessages>;
+
+const standardMessageMap: TranslationMessagesMap = new Map([
+    [Locale.enUS, enUS],
+    [Locale.nlNL, nlNL],
+]);
+
+export const getTranslationMessages = (
+    locale: string | undefined,
+    messages: TranslationMessagesMap = standardMessageMap,
+) => {
+    switch (locale) {
+        case Locale.enUS:
+            return messages.get(Locale.enUS);
+        case Locale.nlNL:
+            return messages.get(Locale.nlNL);
+        default:
+            return messages.get(Locale.enUS);
+    }
+};

package/src/messages/index.ts

@@ -0,0 +1 @@
+export * from './getTranslationMessages';

package/src/messages/nl-NL.json

@@ -0,0 +1,50 @@
+{
+    "main": {
+        "title": "Welcome to example-orchestrator-ui!"
+    },
+    "metadata": {
+        "tabs": {
+            "products": "Producten",
+            "productBlocks": "Productblokken",
+            "resourceTypes": "Resource types",
+            "fixedInputs": "Vaste inputs",
+            "workflows": "Workflows"
+        },
+        "product": {
+            "name": "Naam",
+            "description": "Beschrijving",
+            "tag": "Tag",
+            "productType": "Type",
+            "status": "Status",
+            "productBlocks": "Product blocks",
+            "createdAt": "Aangemaakt"
+        }
+    },
+    "subscriptions": {
+        "tabs": {
+            "active": "Actief",
+            "terminated": "Beeindigd",
+            "transient": "Tijdelijk",
+            "all": "Alles"
+        },
+        "index": {
+            "id": "ID",
+            "description": "Beschrijving",
+            "status": "Status",
+            "insync": "In Sync",
+            "product": "Produkt",
+            "tag": "Tag",
+            "startDate": "Start datum",
+            "endDate": "Eind Datum",
+            "note": "Notitite"
+        },
+        "detail": {
+            "tabs": {
+                "general": "Algemeen",
+                "serviceConfiguration": "Service configuratie",
+                "processes": "Processen",
+                "relatedSubscriptions": "Geralateerde subscriptions"
+            }
+        }
+    }
+}

package/src/types.ts

@@ -144,3 +144,9 @@ export interface CacheOption {
     value: string;
     label: string;
 }
+``;
+
+export enum Locale {
+    enUS = 'en-Us',
+    nlNL = 'nl-NL',
+}