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

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/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 getMetadataBlockData = (): WfoKeyValueTableDataType[] =>
+        Object.entries(subscriptionDetail.metadata).map(([key, value]) => ({
+            key: camelToHuman(key),
+            value: <WfoJsonCodeBlock data={value} isBasicStyle />,
+        }));
 
-    const getFixedInputBlockData = (): WfoKeyValueTableDataType[] => {
-        return subscriptionDetail.fixedInputs.map((fixedInput) => ({
+    const getFixedInputBlockData = (): WfoKeyValueTableDataType[] =>
+        subscriptionDetail.fixedInputs.map((fixedInput) => ({
             key: fixedInput.field,
             value: fixedInput.value,
         }));
-    };
 
     const getProductInfoBlockData = (): WfoKeyValueTableDataType[] => {
         const product = subscriptionDetail.product;
@@ -133,6 +135,12 @@ export const WfoSubscriptionGeneral = ({
                         keyValues={getSubscriptionDetailBlockData()}
                     />
                 </EuiFlexItem>
+                <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/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

@@ -242,6 +242,7 @@
             "tag": "Product tag",
             "startDate": "Start date",
             "endDate": "End date",
+            "metadata": "Metadata",
             "note": "Note",
             "customerFullname": "Customer",
             "customerShortcode": "Customer abbr"
@@ -304,6 +305,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/WfoProductsPage.tsx

@@ -94,6 +94,11 @@ export const WfoProductsPage = () => {
             field: PRODUCT_FIELD_NAME,
             name: t('name'),
             width: '200',
+            render: (name) => (
+                <WfoProductBlockBadge badgeType={BadgeType.PRODUCT}>
+                    {name}
+                </WfoProductBlockBadge>
+            ),
         },
         tag: {
             field: PRODUCT_FIELD_TAG,

package/src/pages/processes/WfoStartProcessPage.tsx

@@ -121,13 +121,7 @@ export const WfoStartProcessPage = ({
                     // Resolve handler
                     (result) => {
                         const process = result as { id: string };
-                        // TODO: Use toast hook to display success message
                         if (process.id) {
-                            // eslint-disable-next-line no-console
-                            console.log(
-                                'resolver successfullly!: ',
-                                process.id,
-                            );
                             const basePath = isTask
                                 ? PATH_TASKS
                                 : PATH_WORKFLOWS;

package/src/rtk/endpoints/subscriptionDetail.ts

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

package/src/rtk/endpoints/subscriptionList.ts

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

package/src/types/types.ts

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

package/src/utils/getDefaultTableConfig.ts

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