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

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @orchestrator-ui/orchestrator-ui-components
 
+## 0.2.1
+
+### Patch Changes
+
+- 3533525: Updated TS-Config to improve developer experience
+
+## 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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@orchestrator-ui/orchestrator-ui-components",
-    "version": "0.1.2",
+    "version": "0.2.1",
     "license": "MIT",
     "scripts": {
         "test": "jest",
@@ -31,7 +31,7 @@
         "@testing-library/jest-dom": "^5.16.1",
         "@testing-library/react": "^14.0.0",
         "@testing-library/react-hooks": "^8.0.1",
-        "@testing-library/user-event": "^13.5.0",
+        "@testing-library/user-event": "^14.4.3",
         "@types/jest": "^27.4.0",
         "esbuild": "^0.14.10",
         "esbuild-jest": "^0.5.0",

package/src/components/OrchestratorPageTemplate/OrchestratorPageHeader/OrchestratorPageHeader.stories.tsx

@@ -3,6 +3,7 @@ import type { Meta } from '@storybook/react';
 import React, { ReactElement } from 'react';
 import { OrchestratorPageHeader } from './OrchestratorPageHeader';
 import Logo from '../../../../../.storybook/mockdata/logo-orchestrator.svg';
+import Image from 'next/image';
 
 const Story: Meta<typeof OrchestratorPageHeader> = {
     component: OrchestratorPageHeader,
@@ -14,7 +15,7 @@ function getAppLogo(navigationLogo: number): ReactElement {
     return (
         <EuiFlexGroup alignItems="center" css={{ height: navigationLogo }}>
             <EuiFlexItem>
-                <img
+                <Image
                     src={Logo}
                     alt="Orchestrator Logo"
                     width={134}

package/src/components/OrchestratorPageTemplate/OrchestratorPageTemplate/OrchestratorPageTemplate.stories.tsx

@@ -3,6 +3,7 @@ import { OrchestratorPageTemplate } from './OrchestratorPageTemplate';
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import React, { ReactElement } from 'react';
 import Logo from '../../../../../.storybook/mockdata/logo-orchestrator.svg';
+import Image from 'next/image';
 
 const Story: Meta<typeof OrchestratorPageTemplate> = {
     component: OrchestratorPageTemplate,
@@ -14,7 +15,7 @@ function getAppLogo(navigationLogo: number): ReactElement {
     return (
         <EuiFlexGroup alignItems="center" css={{ height: navigationLogo }}>
             <EuiFlexItem>
-                <img
+                <Image
                     src={Logo}
                     alt="Orchestrator Logo"
                     width={134}

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/ProductBlock.tsx

@@ -74,6 +74,7 @@ export const ProductBlock = (resourceTypes: ResourceTypeBase, id: number) => {
                         </EuiFlexItem>
                         <EuiFlexItem grow={false}>
                             <EuiButtonIcon
+                                aria-label="Close"
                                 size={'m'}
                                 iconType={'cross'}
                                 onClick={() => toggleSelectedId(id)}

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/Table/DataGridTable/DataGridTable.tsx

@@ -100,7 +100,7 @@ export const DataGridTable = <T,>({
     ) => EuiDataGridControlColumn = ({ id, width, rowCellRender }) => ({
         id,
         width,
-        headerCellRender: (props) => null,
+        headerCellRender: () => null,
         rowCellRender: ({ rowIndex }: { rowIndex: number }) => {
             const { pageSize, pageIndex } = pagination;
             const rowIndexOnPage = rowIndex - pageIndex * pageSize;

package/src/components/Table/utils/constants.ts

@@ -1,2 +1,5 @@
 export const DEFAULT_PAGE_SIZES = [5, 10, 15, 20, 25, 100];
 export const DEFAULT_PAGE_SIZE = 10;
+
+export const METADATA_PRODUCTBLOCKS_TABLE_LOCAL_STORAGE_KEY =
+    'metadataProductBlocksTable';

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

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

package/src/graphqlQueries/productBlocksQuery.ts

@@ -0,0 +1,46 @@
+import { gql } from 'graphql-request';
+import { parse } from 'graphql';
+import type { TypedDocumentNode } from '@graphql-typed-document-node/core';
+
+import { SortOrder } from '../types';
+
+import type { ProductBlockDefinition } from '../types';
+import { GraphqlQueryVariables, ProductBlockDefinitionsResult } from '../types';
+
+export const DEFAULT_SORT_FIELD: keyof ProductBlockDefinition = 'name';
+export const DEFAULT_SORT_ORDER: SortOrder = SortOrder.DESC;
+
+export const GET_PRODUCTS_BLOCKS_GRAPHQL_QUERY: TypedDocumentNode<
+    ProductBlockDefinitionsResult,
+    GraphqlQueryVariables<ProductBlockDefinition>
+> = parse(gql`
+    query MetadataProductBlocks(
+        $first: IntType!
+        $after: IntType!
+        $sortBy: [GraphqlSort!]
+    ) {
+        productBlocks(first: $first, after: $after, sortBy: $sortBy) {
+            page {
+                productBlockId
+                name
+                tag
+                description
+                status
+                createdAt
+                endDate
+                resourceTypes {
+                    description
+                    resourceType
+                    resourceTypeId
+                }
+            }
+            pageInfo {
+                endCursor
+                hasNextPage
+                hasPreviousPage
+                startCursor
+                totalItems
+            }
+        }
+    }
+`);

package/src/hooks/useDataDisplayParams.ts

@@ -12,7 +12,7 @@ import { DEFAULT_PAGE_SIZE } from '../components';
 export type DataDisplayParams<Type> = {
     pageSize: number;
     pageIndex: number;
-    sortBy?: GraphQLSort<Type>;
+    sortBy: GraphQLSort<Type>;
     esQueryString?: string; // The filter param is going to send to the backend as is for parsing
 };
 

package/src/index.ts

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

package/src/messages/en-US.json

@@ -0,0 +1,84 @@
+{
+    "main": {
+        "title": "Welcome to example-orchestrator-ui!"
+    },
+    "common": {
+        "addToFavorites": "Add to favorites",
+        "product": "Product",
+        "deselect": "Deselect",
+        "close": "Close"
+    },
+    "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"
+        },
+        "productBlocks": {
+            "id": "ID",
+            "name": "Name",
+            "description": "Description",
+            "tag": "Tag",
+            "status": "status",
+            "resourceTypes": "Resource types",
+            "createdAt": "Created",
+            "endDate": "End date",
+            "parentIds": "Parents"
+        }
+    },
+    "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';