@orchestrator-ui/orchestrator-ui-components 1.38.2 → 2.1.0

package/src/components/WfoSubscription/WfoSubscriptionGeneral.tsx

@@ -1,23 +1,17 @@
 import React from 'react';
 
-import { useTranslations } from 'next-intl';
-
 import { EuiFlexGrid, EuiFlexItem } from '@elastic/eui';
 
-import { WfoJsonCodeBlock } from '@/components';
-import { WfoCustomerDescriptionsField } from '@/components/WfoSubscription/WfoCustomerDescriptionsField';
-import { useSubscriptionDetailGeneralSectionConfigurationOverride } from '@/components/WfoSubscription/overrides/useSubscriptionDetailGeneralSectionConfigurationOverride';
+import {
+    WfoSubscriptionDetailSection,
+    WfoSubscriptionFixedInputSection,
+    WfoSubscriptionMetadataSection,
+    WfoSubscriptionProductInfoSection,
+    useSubscriptionDetailGeneralSectionConfigurationOverride,
+} from '@/components';
 import { WfoSubscriptionDetailGeneralConfiguration } from '@/rtk';
 import { SubscriptionDetail } from '@/types';
-import { camelToHuman, formatDate, toOptionalArrayEntry } from '@/utils';
-
-import {
-    WfoProductStatusBadge,
-    WfoSubscriptionStatusBadge,
-} from '../WfoBadges';
-import { WfoKeyValueTableDataType } from '../WfoKeyValueTable/WfoKeyValueTable';
-import { SubscriptionKeyValueBlock } from './SubscriptionKeyValueBlock';
-import { WfoInSyncField } from './WfoInSyncField';
+import { toOptionalArrayEntry } from '@/utils';
 
 interface WfoSubscriptionGeneralProps {
     subscriptionDetail: SubscriptionDetail;
@@ -35,154 +29,28 @@ export const WfoSubscriptionGeneral = ({
     subscriptionDetail,
     isFetching,
 }: WfoSubscriptionGeneralProps) => {
-    const t = useTranslations('subscriptions.detail');
     const { overrideSections } =
         useSubscriptionDetailGeneralSectionConfigurationOverride();
 
-    const hasCustomerDescriptions =
-        subscriptionDetail.customerDescriptions.length > 0;
+    const { metadata, fixedInputs, product } = subscriptionDetail;
 
-    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}
-                    isFetching={isFetching}
-                />
-            ),
-        },
-        {
-            key: t('customer'),
-            value:
-                subscriptionDetail && subscriptionDetail.customer
-                    ? `${subscriptionDetail.customer?.fullname}`
-                    : '-',
-        },
-        {
-            key: t('customerUuid'),
-            value:
-                subscriptionDetail && subscriptionDetail.customer
-                    ? `${subscriptionDetail.customer?.customerId}`
-                    : '-',
-            textToCopy: subscriptionDetail.customer?.customerId,
-        },
-        ...toOptionalArrayEntry(
-            {
-                key: t('customerDescriptions'),
-                value: (
-                    <WfoCustomerDescriptionsField
-                        customerDescriptions={
-                            subscriptionDetail.customerDescriptions
-                        }
-                    />
-                ),
-            },
-            hasCustomerDescriptions,
-        ),
-        {
-            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[] =>
-        subscriptionDetail.fixedInputs.map((fixedInput) => ({
-            key: fixedInput.field,
-            value: fixedInput.value,
-        }));
-
-    const getProductInfoBlockData = (): WfoKeyValueTableDataType[] => {
-        const product = subscriptionDetail.product;
-        return [
-            {
-                key: t('name'),
-                value: product.name,
-            },
-            {
-                key: t('description'),
-                value: product.description,
-            },
-            {
-                key: t('productType'),
-                value: product.productType,
-            },
-            {
-                key: t('tag'),
-                value: product.tag,
-            },
-            {
-                key: t('status'),
-                value: <WfoProductStatusBadge status={product.status} />,
-            },
-            {
-                key: t('created'),
-                value: formatDate(product.createdAt),
-            },
-            {
-                key: t('endDate'),
-                value: formatDate(product.endDate),
-            },
-        ];
-    };
-
-    const hasMetadata = Object.entries(subscriptionDetail.metadata).length > 0;
-    const hasFixedInputs = subscriptionDetail.fixedInputs.length > 0;
+    const hasMetadata = Object.entries(metadata).length > 0;
+    const hasFixedInputs = fixedInputs.length > 0;
 
     const defaultConfiguration: WfoSubscriptionDetailGeneralConfiguration[] = [
         {
             id: WfoSubscriptionGeneralSections.BLOCK_TITLE_SUBSCRIPTION_DETAILS,
             node: (
-                <SubscriptionKeyValueBlock
-                    title={t('blockTitleSubscriptionDetails')}
-                    keyValues={getSubscriptionDetailBlockData()}
+                <WfoSubscriptionDetailSection
+                    subscriptionDetail={subscriptionDetail}
+                    isFetching={isFetching}
                 />
             ),
         },
         ...toOptionalArrayEntry(
             {
                 id: WfoSubscriptionGeneralSections.BLOCK_TITLE_METADATA,
-                node: (
-                    <SubscriptionKeyValueBlock
-                        title={t('metadata')}
-                        keyValues={getMetadataBlockData()}
-                    />
-                ),
+                node: <WfoSubscriptionMetadataSection metadata={metadata} />,
             },
             hasMetadata,
         ),
@@ -190,9 +58,8 @@ export const WfoSubscriptionGeneral = ({
             {
                 id: WfoSubscriptionGeneralSections.BLOCK_TITLE_FIXED_INPUTS,
                 node: (
-                    <SubscriptionKeyValueBlock
-                        title={t('blockTitleFixedInputs')}
-                        keyValues={getFixedInputBlockData()}
+                    <WfoSubscriptionFixedInputSection
+                        fixedInputs={fixedInputs}
                     />
                 ),
             },
@@ -200,12 +67,7 @@ export const WfoSubscriptionGeneral = ({
         ),
         {
             id: WfoSubscriptionGeneralSections.BLOCK_TITLE_PRODUCT_INFO,
-            node: (
-                <SubscriptionKeyValueBlock
-                    title={t('blockTitleProductInfo')}
-                    keyValues={getProductInfoBlockData()}
-                />
-            ),
+            node: <WfoSubscriptionProductInfoSection product={product} />,
         },
     ];
 

package/src/components/WfoSubscription/WfoSubscriptionGeneralSections/WfoSubscriptionDetailSection.tsx

@@ -0,0 +1,119 @@
+import React from 'react';
+
+import { useTranslations } from 'next-intl';
+
+import {
+    SubscriptionKeyValueBlock,
+    WfoCustomerDescriptionsField,
+    WfoInSyncField,
+    WfoInlineNoteEdit,
+    WfoSubscriptionStatusBadge,
+} from '@/components';
+import { SubscriptionDetail } from '@/types';
+import { formatDate, toOptionalArrayEntry } from '@/utils';
+
+interface WfoSubscriptionDetailSectionProps {
+    isFetching: boolean;
+    subscriptionDetail: SubscriptionDetail;
+}
+
+export const WfoSubscriptionDetailSection = ({
+    isFetching,
+    subscriptionDetail,
+}: WfoSubscriptionDetailSectionProps) => {
+    const t = useTranslations('subscriptions.detail');
+
+    const hasCustomerDescriptions =
+        subscriptionDetail.customerDescriptions.length > 0;
+
+    const {
+        subscriptionId,
+        product,
+        description,
+        startDate,
+        endDate,
+        status,
+        customer,
+        customerDescriptions,
+        note,
+    } = subscriptionDetail;
+
+    const subscriptionDetailBlockData = [
+        {
+            key: t('subscriptionId'),
+            value: subscriptionId,
+            textToCopy: subscriptionId,
+        },
+        {
+            key: t('productName'),
+            value: product.name,
+        },
+        {
+            key: t('description'),
+            value: description,
+        },
+        {
+            key: t('startDate'),
+            value: formatDate(startDate),
+        },
+        {
+            key: t('endDate'),
+            value: formatDate(endDate),
+        },
+        {
+            key: t('status'),
+            value: <WfoSubscriptionStatusBadge status={status} />,
+        },
+        {
+            key: t('insync'),
+            value: (
+                <WfoInSyncField
+                    subscriptionDetail={subscriptionDetail}
+                    isFetching={isFetching}
+                />
+            ),
+        },
+        {
+            key: t('customer'),
+            value:
+                subscriptionDetail && subscriptionDetail.customer
+                    ? `${customer?.fullname}`
+                    : '-',
+        },
+        {
+            key: t('customerUuid'),
+            value:
+                subscriptionDetail && customer
+                    ? `${customer?.customerId}`
+                    : '-',
+            textToCopy: customer?.customerId,
+        },
+        ...toOptionalArrayEntry(
+            {
+                key: t('customerDescriptions'),
+                value: (
+                    <WfoCustomerDescriptionsField
+                        customerDescriptions={customerDescriptions}
+                    />
+                ),
+            },
+            hasCustomerDescriptions,
+        ),
+        {
+            key: t('note'),
+            value: (
+                <WfoInlineNoteEdit
+                    subscriptionId={subscriptionId}
+                    value={note}
+                />
+            ),
+        },
+    ];
+
+    return (
+        <SubscriptionKeyValueBlock
+            title={t('blockTitleSubscriptionDetails')}
+            keyValues={subscriptionDetailBlockData}
+        />
+    );
+};

package/src/components/WfoSubscription/WfoSubscriptionGeneralSections/WfoSubscriptionFixedInputSection.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+import { useTranslations } from 'next-intl';
+
+import { SubscriptionKeyValueBlock } from '@/components';
+import { SubscriptionDetail } from '@/types';
+
+interface WfoSubscriptionFixedInputSectionProps {
+    fixedInputs: SubscriptionDetail['fixedInputs'];
+}
+
+export const WfoSubscriptionFixedInputSection = ({
+    fixedInputs,
+}: WfoSubscriptionFixedInputSectionProps) => {
+    const t = useTranslations('subscriptions.detail');
+
+    const fixedInputBlockData = fixedInputs.map((fixedInput) => ({
+        key: fixedInput.field,
+        value: fixedInput.value,
+    }));
+
+    return (
+        <SubscriptionKeyValueBlock
+            title={t('blockTitleFixedInputs')}
+            keyValues={fixedInputBlockData}
+        />
+    );
+};

package/src/components/WfoSubscription/WfoSubscriptionGeneralSections/WfoSubscriptionMetadataSection.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import { useTranslations } from 'next-intl';
+
+import { SubscriptionKeyValueBlock, WfoJsonCodeBlock } from '@/components';
+import { SubscriptionDetail } from '@/types';
+import { camelToHuman } from '@/utils';
+
+interface WfoSubscriptionMetadataSectionProps {
+    metadata: SubscriptionDetail['metadata'];
+}
+
+export const WfoSubscriptionMetadataSection = ({
+    metadata,
+}: WfoSubscriptionMetadataSectionProps) => {
+    const t = useTranslations('subscriptions.detail');
+
+    const metadataBlockData = Object.entries(metadata).map(([key, value]) => ({
+        key: camelToHuman(key),
+        value: <WfoJsonCodeBlock data={value} isBasicStyle />,
+    }));
+
+    return (
+        <SubscriptionKeyValueBlock
+            title={t('metadata')}
+            keyValues={metadataBlockData}
+        />
+    );
+};

package/src/components/WfoSubscription/WfoSubscriptionGeneralSections/WfoSubscriptionProductInfoSection.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+
+import { useTranslations } from 'next-intl';
+
+import { SubscriptionKeyValueBlock, WfoProductStatusBadge } from '@/components';
+import { SubscriptionDetail } from '@/types';
+import { formatDate } from '@/utils';
+
+interface WfoSubscriptionProductInfoSectionProps {
+    product: SubscriptionDetail['product'];
+}
+
+export const WfoSubscriptionProductInfoSection = ({
+    product,
+}: WfoSubscriptionProductInfoSectionProps) => {
+    const t = useTranslations('subscriptions.detail');
+
+    const productInfoBlockData = [
+        {
+            key: t('name'),
+            value: product.name,
+        },
+        {
+            key: t('description'),
+            value: product.description,
+        },
+        {
+            key: t('productType'),
+            value: product.productType,
+        },
+        {
+            key: t('tag'),
+            value: product.tag,
+        },
+        {
+            key: t('status'),
+            value: <WfoProductStatusBadge status={product.status} />,
+        },
+        {
+            key: t('created'),
+            value: formatDate(product.createdAt),
+        },
+        {
+            key: t('endDate'),
+            value: formatDate(product.endDate),
+        },
+    ];
+
+    return (
+        <SubscriptionKeyValueBlock
+            title={t('blockTitleProductInfo')}
+            keyValues={productInfoBlockData}
+        />
+    );
+};

package/src/components/WfoSubscription/WfoSubscriptionGeneralSections/index.ts

@@ -0,0 +1,4 @@
+export * from './WfoSubscriptionDetailSection';
+export * from './WfoSubscriptionFixedInputSection';
+export * from './WfoSubscriptionMetadataSection';
+export * from './WfoSubscriptionProductInfoSection';

package/src/components/WfoSubscription/index.ts

@@ -2,6 +2,8 @@ export * from './utils';
 
 export * from './overrides';
 
+export * from './WfoSubscriptionGeneralSections';
+
 export * from './SubscriptionKeyValueBlock';
 export * from './WfoInSyncField';
 export * from './WfoProcessesTimeline';
@@ -11,3 +13,4 @@ export * from './WfoSubscriptionActions';
 export * from './WfoSubscriptionProductBlock';
 export * from './WfoSubscriptionDetailTree';
 export * from './WfoSubscriptionGeneral';
+export * from './WfoCustomerDescriptionsField';

package/src/components/WfoSubscription/overrides/index.ts

@@ -1 +1,2 @@
 export * from './useSubscriptionDetailValueOverride';
+export * from './useSubscriptionDetailGeneralSectionConfigurationOverride';

package/src/components/WfoSubscription/styles.ts

@@ -2,7 +2,9 @@ import { css } from '@emotion/react';
 
 import { WfoTheme } from '@/hooks';
 
-export const getStyles = ({ theme }: WfoTheme) => {
+export const getSubscriptionDetailStyles = ({ theme }: WfoTheme) => {
+    const productBlockTreeWidth = theme.base * 28;
+
     const contentCellStyle = css({
         padding: (theme.base / 4) * 3,
         borderBottom: theme.border.thin,
@@ -63,5 +65,6 @@ export const getStyles = ({ theme }: WfoTheme) => {
         lastContentCellStyle,
         lastHeaderCellStyle,
         inUseByRelationDetailsStyle,
+        productBlockTreeWidth,
     };
 };

package/src/components/WfoSubscription/utils/relatedSubscriptionsListItemsObjectMappers.ts

@@ -0,0 +1,62 @@
+import { RelatedSubscriptionListItem } from '@/components';
+import { RelatedSubscriptionsResponse } from '@/rtk';
+import { GraphQLSort, GraphqlFilter, RelatedSubscription } from '@/types';
+import { parseDate } from '@/utils';
+
+export const mapRelatedSubscriptionsResponseToRelatedSubscriptionsListItems = (
+    input?: RelatedSubscriptionsResponse,
+): RelatedSubscriptionListItem[] =>
+    input?.relatedSubscriptions.map(
+        ({
+            subscriptionId,
+            description,
+            status,
+            insync,
+            customer,
+            product,
+            startDate,
+        }) => ({
+            subscriptionId,
+            description,
+            status,
+            insync,
+            customerFullname: customer.fullname,
+            tag: product.tag,
+            startDate: parseDate(startDate),
+        }),
+    ) ?? [];
+
+// Some fields are not a key of Process, however backend still supports them
+// Backend concatenates object name with the key, e.g. product.name becomes productName
+// Todo: typecast is needed until ticket is implemented:
+// https://github.com/workfloworchestrator/orchestrator-ui/issues/290
+const relatedSubscriptionsFieldMapper = (
+    field: keyof RelatedSubscriptionListItem,
+): keyof RelatedSubscription => {
+    switch (field) {
+        case 'customerFullname':
+            return 'customer' as keyof RelatedSubscription;
+        case 'tag':
+            return 'product' as keyof RelatedSubscription;
+        default:
+            return field;
+    }
+};
+
+export const graphQlRelatedSubscriptionsSortMapper = ({
+    field,
+    order,
+}: GraphQLSort<RelatedSubscriptionListItem>): GraphQLSort<RelatedSubscription> => ({
+    field: relatedSubscriptionsFieldMapper(field),
+    order,
+});
+
+export const graphQlRelatedSubscriptionsTerminatedSubscriptionsFilterMapper = (
+    data?: GraphqlFilter<RelatedSubscriptionListItem>,
+): GraphqlFilter<RelatedSubscription> | undefined =>
+    data
+        ? {
+              field: relatedSubscriptionsFieldMapper(data?.field),
+              value: data?.value,
+          }
+        : undefined;

package/src/components/WfoSubscription/utils/utils.spec.ts

@@ -64,19 +64,6 @@ describe('getProductBlockTitle()', () => {
         );
     });
 
-    it("returns '[title]...'  when title field is to long", () => {
-        const longTitle =
-            'title_value title_value title_value title_value title_value';
-        const valuesWithNameAndLongTitle = [
-            ...instanceValues,
-            { field: 'name', value: 'name_value' },
-            { field: 'title', value: longTitle },
-        ];
-        expect(getProductBlockTitle(valuesWithNameAndLongTitle)).toBe(
-            'title_value title_value title_value title_val...',
-        );
-    });
-
     it('returns empty string when there are no title or name fields', () => {
         expect(getProductBlockTitle(instanceValues)).toBe('');
     });

package/src/components/WfoSubscription/utils/utils.ts

@@ -5,13 +5,12 @@ import { EuiThemeComputed } from '@elastic/eui';
 import {
     FieldValue,
     ProcessStatus,
+    SortOrder,
     SubscriptionAction,
     SubscriptionDetailProcess,
     WorkflowTarget,
 } from '@/types';
 
-const MAX_LABEL_LENGTH = 45;
-
 export enum SubscriptionDetailTab {
     GENERAL_TAB = 'general',
     SERVICE_CONFIGURATION_TAB = 'service-configuration',
@@ -41,9 +40,7 @@ export const getProductBlockTitle = (
         return getFieldFromProductBlockInstanceValues(instanceValues, 'name');
     }
 
-    return title && typeof title === 'string' && title.length > MAX_LABEL_LENGTH
-        ? `${title.substring(0, MAX_LABEL_LENGTH)}...`
-        : title;
+    return title;
 };
 
 export const flattenArrayProps = (
@@ -130,3 +127,19 @@ export const getLatestTaskDate = (processes: SubscriptionDetailProcess[]) => {
 
     return tasks.length > 0 ? tasks[0].startedAt : '';
 };
+
+export const sortProcessesByDate = (
+    processList: SubscriptionDetailProcess[],
+    sortOrder: SortOrder,
+) => {
+    return [...processList].sort((a, b) => {
+        const dateA = new Date(a.startedAt).getTime();
+        const dateB = new Date(b.startedAt).getTime();
+
+        if (sortOrder === SortOrder.ASC) {
+            return dateA - dateB; // Ascending order (oldest first)
+        } else {
+            return dateB - dateA; // Descending order (newest first)
+        }
+    });
+};