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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@orchestrator-ui/orchestrator-ui-components",
-    "version": "1.5.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/WfoBadges/WfoProductBlockBadge/WfoProductBlockBadge.tsx

@@ -42,6 +42,7 @@ export function WfoProductBlockBadge({
                     textColor: primaryText,
                 };
             case BadgeType.WORKFLOW:
+            case BadgeType.PRODUCT:
                 return {
                     badgeColor: toSecondaryColor(danger),
                     textColor: dangerText,

package/src/components/WfoForms/formFields/utils.spec.ts

@@ -49,6 +49,7 @@ const testSubscriptionDetail: SubscriptionDetail = {
     startDate: '1111-01-01',
     status: SubscriptionStatus.ACTIVE,
     productBlockInstances: testProductBlockInstances,
+    metadata: {},
     processes: {
         page: [
             {

package/src/components/WfoJsonCodeBlock/WfoJsonCodeBlock.tsx

@@ -2,24 +2,30 @@ import React, { FC } from 'react';
 
 import { EuiCodeBlock } from '@elastic/eui';
 
-import { useWithOrchestratorTheme } from '../../hooks';
+import { useWithOrchestratorTheme } from '@/hooks';
+
 import { getStyles } from './styles';
 
 export type WfoJsonCodeBlockProps = {
     data: object;
+    isBasicStyle?: boolean;
 };
 
-export const WfoJsonCodeBlock: FC<WfoJsonCodeBlockProps> = ({ data }) => {
-    const { euiCodeBlockStyle } = useWithOrchestratorTheme(getStyles);
+export const WfoJsonCodeBlock: FC<WfoJsonCodeBlockProps> = ({
+    data,
+    isBasicStyle = false,
+}) => {
+    const { euiCodeBlockStyle, euiBasicCodeBlockStyle } =
+        useWithOrchestratorTheme(getStyles);
 
     const json = JSON.stringify(data, null, 4);
 
     return (
         <EuiCodeBlock
-            css={euiCodeBlockStyle}
+            css={isBasicStyle ? euiBasicCodeBlockStyle : euiCodeBlockStyle}
             isCopyable={true}
             language="json"
-            lineNumbers={true}
+            lineNumbers={!isBasicStyle}
         >
             {json}
         </EuiCodeBlock>

package/src/components/WfoJsonCodeBlock/styles.ts

@@ -7,7 +7,20 @@ export const getStyles = (theme: EuiThemeComputed) => {
         borderRadius: theme.border.radius.medium,
     });
 
+    const euiBasicCodeBlockStyle = css({
+        backgroundColor: 'inherit',
+        '.euiCodeBlock__pre': {
+            paddingTop: 0,
+            paddingBottom: 0,
+            paddingLeft: 0,
+        },
+        '.euiCodeBlock__controls': {
+            backgroundColor: 'inherit',
+        },
+    });
+
     return {
         euiCodeBlockStyle,
+        euiBasicCodeBlockStyle,
     };
 };

package/src/components/WfoKeyValueTable/WfoValueCell.tsx

@@ -30,9 +30,16 @@ export const WfoValueCell: FC<WfoValueCellProps> = ({
 
     const shouldRenderCopyColumn = enableCopyIcon && textToCopy;
 
+    const valueToRender =
+        typeof value === 'string' ||
+        typeof value === 'number' ||
+        React.isValidElement(value)
+            ? value
+            : JSON.stringify(value);
+
     return (
         <div css={[getBackgroundColorStyleForRow(rowNumber), valueColumnStyle]}>
-            <div css={valueCellStyle}>{value}</div>
+            <div css={valueCellStyle}>{valueToRender}</div>
             <div css={clipboardIconStyle}>
                 {shouldRenderCopyColumn && (
                     <EuiCopy textToCopy={textToCopy}>

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

@@ -103,11 +103,6 @@ export const WfoSubscription = ({ subscriptionId }: WfoSubscriptionProps) => {
                             onChangeTab={onSelectedTabChanged}
                         />
 
-                        {selectedTab === SubscriptionDetailTab.GENERAL_TAB && (
-                            <WfoSubscriptionGeneral
-                                subscriptionDetail={subscriptionDetail}
-                            />
-                        )}
                         {selectedTab ===
                             SubscriptionDetailTab.SERVICE_CONFIGURATION_TAB && (
                             <WfoSubscriptionDetailTree
@@ -116,6 +111,11 @@ export const WfoSubscription = ({ subscriptionId }: WfoSubscriptionProps) => {
                                 }
                             />
                         )}
+                        {selectedTab === SubscriptionDetailTab.GENERAL_TAB && (
+                            <WfoSubscriptionGeneral
+                                subscriptionDetail={subscriptionDetail}
+                            />
+                        )}
                         {selectedTab === SubscriptionDetailTab.PROCESSES_TAB &&
                             data && (
                                 <WfoProcessesTimeline

package/src/components/WfoSubscription/WfoSubscriptionGeneral.tsx

@@ -4,8 +4,9 @@ import { useTranslations } from 'next-intl';
 
 import { EuiFlexGrid, EuiFlexItem } from '@elastic/eui';
 
+import { WfoJsonCodeBlock } from '@/components';
 import { SubscriptionDetail } from '@/types';
-import { formatDate } from '@/utils';
+import { camelToHuman, formatDate } from '@/utils';
 
 import {
     WfoProductStatusBadge,
@@ -24,71 +25,72 @@ export const WfoSubscriptionGeneral = ({
 }: WfoSubscriptionGeneralProps) => {
     const t = useTranslations('subscriptions.detail');
 
-    const getSubscriptionDetailBlockData = (): WfoKeyValueTableDataType[] => {
-        return [
-            {
-                key: t('subscriptionId'),
-                value: subscriptionDetail.subscriptionId,
-                textToCopy: subscriptionDetail.subscriptionId,
-            },
-            {
-                key: t('productName'),
-                value: subscriptionDetail.product.name,
-            },
-            {
-                key: t('description'),
-                value: subscriptionDetail.description,
-            },
-            {
-                key: t('startDate'),
-                value: formatDate(subscriptionDetail.startDate),
-            },
-            {
-                key: t('endDate'),
-                value: formatDate(subscriptionDetail.endDate),
-            },
-            {
-                key: t('status'),
-                value: (
-                    <WfoSubscriptionStatusBadge
-                        status={subscriptionDetail.status}
-                    />
-                ),
-            },
-            {
-                key: t('insync'),
-                value: (
-                    <WfoInSyncField subscriptionDetail={subscriptionDetail} />
-                ),
-            },
-            {
-                key: t('customer'),
-                value:
-                    subscriptionDetail && subscriptionDetail.customer
-                        ? `${subscriptionDetail.customer?.fullname}`
-                        : '-',
-            },
-            {
-                key: t('customerUuid'),
-                value:
-                    subscriptionDetail && subscriptionDetail.customer
-                        ? `${subscriptionDetail.customer?.customerId}`
-                        : '-',
-                textToCopy: subscriptionDetail.customer?.customerId,
-            },
-            {
-                key: t('note'),
-                value: (subscriptionDetail && subscriptionDetail.note) || '-',
-            },
-        ];
-    };
+    const getSubscriptionDetailBlockData = (): WfoKeyValueTableDataType[] => [
+        {
+            key: t('subscriptionId'),
+            value: subscriptionDetail.subscriptionId,
+            textToCopy: subscriptionDetail.subscriptionId,
+        },
+        {
+            key: t('productName'),
+            value: subscriptionDetail.product.name,
+        },
+        {
+            key: t('description'),
+            value: subscriptionDetail.description,
+        },
+        {
+            key: t('startDate'),
+            value: formatDate(subscriptionDetail.startDate),
+        },
+        {
+            key: t('endDate'),
+            value: formatDate(subscriptionDetail.endDate),
+        },
+        {
+            key: t('status'),
+            value: (
+                <WfoSubscriptionStatusBadge
+                    status={subscriptionDetail.status}
+                />
+            ),
+        },
+        {
+            key: t('insync'),
+            value: <WfoInSyncField subscriptionDetail={subscriptionDetail} />,
+        },
+        {
+            key: t('customer'),
+            value:
+                subscriptionDetail && subscriptionDetail.customer
+                    ? `${subscriptionDetail.customer?.fullname}`
+                    : '-',
+        },
+        {
+            key: t('customerUuid'),
+            value:
+                subscriptionDetail && subscriptionDetail.customer
+                    ? `${subscriptionDetail.customer?.customerId}`
+                    : '-',
+            textToCopy: subscriptionDetail.customer?.customerId,
+        },
+        {
+            key: t('note'),
+            value: (subscriptionDetail && subscriptionDetail.note) || '-',
+        },
+    ];
 
-    const getFixedInputBlockData = (): WfoKeyValueTableDataType[] => {
-        return subscriptionDetail.fixedInputs.map((fixedInput) => ({
+    const getMetadataBlockData = (): WfoKeyValueTableDataType[] =>
+        Object.entries(subscriptionDetail.metadata).map(([key, value]) => ({
+            key: camelToHuman(key),
+            value: <WfoJsonCodeBlock data={value} isBasicStyle />,
+        }));
+
+    const getFixedInputBlockData = (): WfoKeyValueTableDataType[] =>
+        subscriptionDetail.fixedInputs.map((fixedInput) => ({
             key: fixedInput.field,
             value: fixedInput.value,
         }));
-    };
 
     const getProductInfoBlockData = (): WfoKeyValueTableDataType[] => {
         const product = subscriptionDetail.product;
@@ -124,6 +126,8 @@ export const WfoSubscriptionGeneral = ({
         ];
     };
 
+    const hasMetadata = Object.entries(subscriptionDetail.metadata).length > 0;
+
     return (
         <EuiFlexGrid direction={'row'}>
             <>
@@ -133,6 +137,14 @@ export const WfoSubscriptionGeneral = ({
                         keyValues={getSubscriptionDetailBlockData()}
                     />
                 </EuiFlexItem>
+                {hasMetadata && (
+                    <EuiFlexItem>
+                        <SubscriptionKeyValueBlock
+                            title={t('metadata')}
+                            keyValues={getMetadataBlockData()}
+                        />
+                    </EuiFlexItem>
+                )}
                 <EuiFlexItem>
                     <SubscriptionKeyValueBlock
                         title={t('blockTitleFixedInputs')}

package/src/components/WfoSubscription/WfoSubscriptionProductBlock.tsx

@@ -20,7 +20,10 @@ import { FieldValue, InUseByRelation } from '../../types';
 import { camelToHuman } from '../../utils';
 import { PATH_SUBSCRIPTIONS } from '../WfoPageTemplate';
 import { getStyles } from './styles';
-import { getProductBlockTitle } from './utils';
+import {
+    getFieldFromProductBlockInstanceValues,
+    getProductBlockTitle,
+} from './utils';
 
 interface WfoSubscriptionProductBlockProps {
     ownerSubscriptionId: string;
@@ -84,9 +87,12 @@ export const WfoSubscriptionProductBlock = ({
                                 )}
                             </h3>
                         </EuiText>
-                        <EuiText size="s">{`${t(
-                            'subscriptionInstanceId',
-                        )}: ${subscriptionInstanceId}`}</EuiText>
+                        <EuiText size="s">
+                            {getFieldFromProductBlockInstanceValues(
+                                productBlockInstanceValues,
+                                'name',
+                            )}
+                        </EuiText>
                     </EuiFlexItem>
                     <EuiFlexItem grow={false}>
                         <EuiButtonEmpty
@@ -109,6 +115,20 @@ export const WfoSubscriptionProductBlock = ({
                         <tbody>
                             {!hideDetails && (
                                 <>
+                                    <tr key={-3}>
+                                        <td
+                                            valign={'top'}
+                                            css={productBlockFirstLeftColStyle}
+                                        >
+                                            <b>{t('subscriptionInstanceId')}</b>
+                                        </td>
+                                        <td
+                                            valign={'top'}
+                                            css={productBlockFirstRightColStyle}
+                                        >
+                                            {subscriptionInstanceId}
+                                        </td>
+                                    </tr>
                                     <tr key={-2}>
                                         <td
                                             valign={'top'}
@@ -123,7 +143,6 @@ export const WfoSubscriptionProductBlock = ({
                                             {subscriptionId ===
                                             ownerSubscriptionId ? (
                                                 <>
-                                                    {subscriptionId}
                                                     <EuiBadge>
                                                         {t('self')}
                                                     </EuiBadge>

package/src/components/WfoSubscriptionsList/WfoSubscriptionsList.tsx

@@ -8,8 +8,11 @@ import { Pagination } from '@elastic/eui';
 
 import {
     FilterQuery,
+    PATH_SUBSCRIPTIONS,
     WfoDateTime,
+    WfoInlineJson,
     WfoInsyncIcon,
+    WfoJsonCodeBlock,
     WfoSubscriptionStatusBadge,
 } from '@/components';
 import { DataDisplayParams, useShowToastMessage } from '@/hooks';
@@ -142,6 +145,13 @@ export const WfoSubscriptionsList: FC<WfoSubscriptionsListProps> = ({
             field: 'note',
             name: t('note'),
         },
+        metadata: {
+            field: 'metadata',
+            name: t('metadata'),
+            render: (value) => <WfoInlineJson data={value} />,
+            renderDetails: (value) =>
+                value && <WfoJsonCodeBlock data={value} isBasicStyle />,
+        },
     };
 
     const { sortBy, queryString, pageIndex, pageSize } = dataDisplayParams;
@@ -166,7 +176,7 @@ export const WfoSubscriptionsList: FC<WfoSubscriptionsListProps> = ({
 
     const sortedColumnId = getTypedFieldFromObject(sortBy?.field, tableColumns);
     if (!sortedColumnId) {
-        router.replace('/subscriptions');
+        router.replace(PATH_SUBSCRIPTIONS);
         return null;
     }
 

package/src/components/WfoSubscriptionsList/subscriptionResultMappers.ts

@@ -12,6 +12,7 @@ export type SubscriptionListItem = Pick<
     tag: string | null;
     customerFullname: string;
     customerShortcode: string;
+    metadata: object | null;
 };
 
 export const mapGraphQlSubscriptionsResultToPageInfo = (
@@ -32,6 +33,7 @@ export const mapGraphQlSubscriptionsResultToSubscriptionListItems = (
             subscriptionId,
             note,
             customer,
+            metadata,
         } = subscription;
 
         const { name: productName, tag } = product;
@@ -50,5 +52,6 @@ export const mapGraphQlSubscriptionsResultToSubscriptionListItems = (
             tag,
             customerFullname,
             customerShortcode,
+            metadata: Object.keys(metadata).length > 0 ? metadata : null,
         };
     });

package/src/components/WfoTable/WfoInlineJson/WfoInlineJson.tsx

@@ -0,0 +1,14 @@
+import React, { FC } from 'react';
+
+export type WfoInlineJsonProps = {
+    data: object | null;
+};
+
+export const WfoInlineJson: FC<WfoInlineJsonProps> = ({ data }) => {
+    if (!data) {
+        return null;
+    }
+
+    const valueAsString = JSON.stringify(data);
+    return <span title={valueAsString}>{valueAsString}</span>;
+};

package/src/components/WfoTable/WfoInlineJson/index.ts

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

package/src/components/WfoTable/index.ts

@@ -15,3 +15,4 @@ export * from './WfoTableWithFilter';
 
 export * from './WfoSortButtons';
 export * from './WfoFirstPartUUID';
+export * from './WfoInlineJson';

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

@@ -1,5 +1,5 @@
-export const DEFAULT_PAGE_SIZES = [5, 10, 15, 20, 25, 100];
-export const DEFAULT_PAGE_SIZE = 10;
+export const DEFAULT_PAGE_SIZES = [5, 10, 15, 20, 25, 50, 100];
+export const DEFAULT_PAGE_SIZE = 15;
 
 export const ACTIVE_PROCESSES_LIST_TABLE_LOCAL_STORAGE_KEY =
     'activeProcessesListTable';

package/src/components/WfoWorkflowSteps/WfoStepStatusIcon/WfoStepStatusIcon.tsx

@@ -77,6 +77,13 @@ export const WfoStepStatusIcon = ({
                     true,
                     theme.colors.danger,
                 ];
+            case StepStatus.SKIPPED:
+                return [
+                    stepStateSuccessIconStyle,
+                    theme.colors.primaryText,
+                    true,
+                    theme.colors.accent,
+                ];
             case StepStatus.FORM:
                 return [stepStateSuccessIconStyle, theme.colors.link];
 

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/icons/WfoExternalLink.tsx

@@ -0,0 +1,30 @@
+import React, { FC } from 'react';
+
+import { WfoIconProps } from './WfoIconProps';
+
+export const WfoExternalLink: FC<WfoIconProps> = ({
+    width = 24,
+    height = 24,
+    color = 'currentColor',
+}) => (
+    <svg
+        width={width}
+        height={height}
+        viewBox="0 0 24 24"
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <title>icon/external-link</title>
+        <g
+            id="Symbols"
+            stroke="none"
+            strokeWidth="1"
+            fill="none"
+            fillRule="evenodd"
+        >
+            <g id="icon/external-link" fill={color}>
+                <path d="M10,7 C10.55228,7 11,7.44772 11,8 C11,8.55228 10.55228,9 10,9 L7,9 L7,17 L15,17 L15,14 C15,13.4477 15.4477,13 16,13 C16.5523,13 17,13.4477 17,14 L17,17 C17,18.1046 16.1046,19 15,19 L7,19 C5.89543,19 5,18.1046 5,17 L5,9 C5,7.89543 5.89543,7 7,7 Z M18,5 C18.5523,5 19,5.44772 19,6 L19,11 C19,11.55228 18.5523,12 18,12 C17.4477,12 17,11.55228 17,11 L17,8.41421 L10.70711,14.7071 C10.31658,15.0976 9.68342,15.0976 9.29289,14.7071 C8.90237,14.3166 8.90237,13.6834 9.29289,13.2929 L15.5858,7 L13,7 C12.4477,7 12,6.55228 12,6 C12,5.44772 12.4477,5 13,5 Z" />
+            </g>
+        </g>
+    </svg>
+);

package/src/icons/index.ts

@@ -30,3 +30,4 @@ export * from './WfoViewList';
 export * from './WfoContactEnvelopeFill';
 export * from './WfoBell';
 export * from './WfoWarningTriangle';
+export * from './WfoExternalLink';

package/src/messages/en-GB.json

@@ -121,6 +121,7 @@
         }
     },
     "metadata": {
+        "title": "Metadata",
         "tabs": {
             "products": "Products",
             "productBlocks": "Product blocks",
@@ -242,6 +243,7 @@
             "tag": "Product tag",
             "startDate": "Start date",
             "endDate": "End date",
+            "metadata": "Metadata",
             "note": "Note",
             "customerFullname": "Customer",
             "customerShortcode": "Customer abbr"
@@ -304,6 +306,7 @@
             "tag": "Tag",
             "created": "Created",
             "endDate": "End date",
+            "metadata": "Metadata",
             "note": "Note",
             "noRelatedSubscriptions": "No related subscriptions found",
             "hideTerminatedRelatedSubscriptions": "Hide terminated subscriptions",

package/src/messages/nl-NL.json

@@ -242,6 +242,7 @@
             "startDate": "Startdatum",
             "endDate": "Einddatum",
             "note": "Notitie",
+            "metadata": "Metadata",
             "customerFullName": "Klant",
             "customerAbbreviation": "Klantafkorting"
         },
@@ -298,6 +299,7 @@
             "insync": "In sync",
             "customer": "Klant",
             "customerUuid": "Klant UUID",
+            "metadata": "Metadata",
             "name": "Naam",
             "productType": "Produkttype",
             "tag": "Tag",

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>