@orchestrator-ui/orchestrator-ui-components 1.38.1 → 2.0.0

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/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)
+        }
+    });
+};

package/src/components/WfoSubscriptionsList/WfoSubscriptionsList.tsx

@@ -4,17 +4,22 @@ import { useTranslations } from 'next-intl';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 
-import { Pagination } from '@elastic/eui';
-
 import {
     FilterQuery,
     PATH_SUBSCRIPTIONS,
+    Pagination,
     WfoDateTime,
     WfoInlineJson,
     WfoInsyncIcon,
     WfoJsonCodeBlock,
     WfoSubscriptionStatusBadge,
+    getPageIndexChangeHandler,
+    getPageSizeChangeHandler,
 } from '@/components';
+import { WfoAdvancedTable } from '@/components/WfoTable/WfoAdvancedTable';
+import { WfoAdvancedTableColumnConfig } from '@/components/WfoTable/WfoAdvancedTable/types';
+import { ColumnType } from '@/components/WfoTable/WfoTable';
+import { mapSortableAndFilterableValuesToTableColumnConfig } from '@/components/WfoTable/WfoTable/utils';
 import { DataDisplayParams, useShowToastMessage } from '@/hooks';
 import {
     useGetSubscriptionListQuery,
@@ -37,14 +42,10 @@ import {
     SUBSCRIPTIONS_TABLE_LOCAL_STORAGE_KEY,
     TableColumnKeys,
     WfoDataSorting,
-    WfoTableColumns,
-    WfoTableWithFilter,
+    WfoFirstPartUUID,
     getDataSortHandler,
-    getPageChangeHandler,
     getQueryStringHandler,
 } from '../WfoTable';
-import { WfoFirstPartUUID } from '../WfoTable/WfoFirstPartUUID';
-import { mapSortableAndFilterableValuesToTableColumnConfig } from '../WfoTable/utils/mapSortableAndFilterableValuesToTableColumnConfig';
 import {
     SubscriptionListItem,
     mapGraphQlSubscriptionsResultToPageInfo,
@@ -69,91 +70,88 @@ export const WfoSubscriptionsList: FC<WfoSubscriptionsListProps> = ({
     setDataDisplayParam,
     hiddenColumns,
 }) => {
-    // TODO: There seems to be a problem showing the product/productName in this list
-    // https://github.com/workfloworchestrator/orchestrator-ui/issues/262
-
     const router = useRouter();
     const t = useTranslations('subscriptions.index');
     const tError = useTranslations('errors');
     const { showToastMessage } = useShowToastMessage();
 
-    const tableColumns: WfoTableColumns<SubscriptionListItem> = {
-        subscriptionId: {
-            field: 'subscriptionId',
-            name: t('id'),
-            width: '100',
-            render: (value) => <WfoFirstPartUUID UUID={value} />,
-            renderDetails: (value) => value,
-        },
-        description: {
-            field: 'description',
-            name: t('description'),
-            width: '400',
-            render: (value, record) => (
-                <Link href={`/subscriptions/${record.subscriptionId}`}>
-                    {value}
-                </Link>
-            ),
-        },
-        status: {
-            field: 'status',
-            name: t('status'),
-            width: '110',
-            render: (value) => <WfoSubscriptionStatusBadge status={value} />,
-        },
-        insync: {
-            field: 'insync',
-            name: t('insync'),
-            width: '110',
-            render: (value) => <WfoInsyncIcon inSync={value} />,
-        },
-        productName: {
-            field: 'productName',
-            name: t('product'),
-        },
-        tag: {
-            field: 'tag',
-            name: t('tag'),
-            width: '100',
-        },
-        customerFullname: {
-            field: 'customerFullname',
-            name: t('customerFullname'),
-            width: '150',
-        },
-        customerShortcode: {
-            field: 'customerShortcode',
-            name: t('customerShortcode'),
-            width: '150',
-        },
-        startDate: {
-            field: 'startDate',
-            name: t('startDate'),
-            width: '150',
-            render: (value) => <WfoDateTime dateOrIsoString={value} />,
-            renderDetails: parseDateToLocaleDateTimeString,
-            clipboardText: parseDateToLocaleDateTimeString,
-        },
-        endDate: {
-            field: 'endDate',
-            name: t('endDate'),
-            width: '150',
-            render: (value) => <WfoDateTime dateOrIsoString={value} />,
-            renderDetails: parseDateToLocaleDateTimeString,
-            clipboardText: parseDateToLocaleDateTimeString,
-        },
-        note: {
-            field: 'note',
-            name: t('note'),
-        },
-        metadata: {
-            field: 'metadata',
-            name: t('metadata'),
-            render: (value) => <WfoInlineJson data={value} />,
-            renderDetails: (value) =>
-                value && <WfoJsonCodeBlock data={value} isBasicStyle />,
-        },
-    };
+    const tableColumnConfig: WfoAdvancedTableColumnConfig<SubscriptionListItem> =
+        {
+            subscriptionId: {
+                columnType: ColumnType.DATA,
+                label: t('id'),
+                renderData: (value) => <WfoFirstPartUUID UUID={value} />,
+                renderDetails: (value) => value,
+            },
+            description: {
+                columnType: ColumnType.DATA,
+                label: t('description'),
+                width: '400px',
+                renderData: (value, record) => (
+                    <Link href={`/subscriptions/${record.subscriptionId}`}>
+                        {value}
+                    </Link>
+                ),
+            },
+            status: {
+                columnType: ColumnType.DATA,
+                label: t('status'),
+                renderData: (value) => (
+                    <WfoSubscriptionStatusBadge status={value} />
+                ),
+            },
+            insync: {
+                columnType: ColumnType.DATA,
+                label: t('insync'),
+                renderData: (value) => <WfoInsyncIcon inSync={value} />,
+            },
+            productName: {
+                columnType: ColumnType.DATA,
+                label: t('product'),
+            },
+            tag: {
+                columnType: ColumnType.DATA,
+                label: t('tag'),
+                width: '100px',
+            },
+            customerFullname: {
+                columnType: ColumnType.DATA,
+                label: t('customerFullname'),
+                width: '150px',
+            },
+            customerShortcode: {
+                columnType: ColumnType.DATA,
+                label: t('customerShortcode'),
+                width: '150px',
+            },
+            startDate: {
+                columnType: ColumnType.DATA,
+                label: t('startDate'),
+                renderData: (value) => <WfoDateTime dateOrIsoString={value} />,
+                renderDetails: parseDateToLocaleDateTimeString,
+                clipboardText: parseDateToLocaleDateTimeString,
+            },
+            endDate: {
+                columnType: ColumnType.DATA,
+                label: t('endDate'),
+                renderData: (value) => <WfoDateTime dateOrIsoString={value} />,
+                renderDetails: parseDateToLocaleDateTimeString,
+                clipboardText: parseDateToLocaleDateTimeString,
+            },
+            note: {
+                columnType: ColumnType.DATA,
+                label: t('note'),
+                width: '100px',
+            },
+            metadata: {
+                columnType: ColumnType.DATA,
+                label: t('metadata'),
+                width: '100px',
+                renderData: (value) => <WfoInlineJson data={value} />,
+                renderDetails: (value) =>
+                    value && <WfoJsonCodeBlock data={value} isBasicStyle />,
+            },
+        };
 
     const { sortBy, queryString, pageIndex, pageSize } = dataDisplayParams;
 
@@ -175,7 +173,10 @@ export const WfoSubscriptionsList: FC<WfoSubscriptionsListProps> = ({
             getQueryVariablesForExport(graphqlQueryVariables),
         ).unwrap();
 
-    const sortedColumnId = getTypedFieldFromObject(sortBy?.field, tableColumns);
+    const sortedColumnId = getTypedFieldFromObject(
+        sortBy?.field,
+        tableColumnConfig,
+    );
     if (!sortedColumnId) {
         router.replace(PATH_SUBSCRIPTIONS);
         return null;
@@ -186,15 +187,22 @@ export const WfoSubscriptionsList: FC<WfoSubscriptionsListProps> = ({
         sortOrder: dataDisplayParams.sortBy?.order ?? SortOrder.ASC,
     };
     const { totalItems, sortFields, filterFields } = data?.pageInfo ?? {};
+
     const pagination: Pagination = {
-        pageSize: dataDisplayParams.pageSize,
         pageIndex: dataDisplayParams.pageIndex,
+        pageSize: dataDisplayParams.pageSize,
         pageSizeOptions: DEFAULT_PAGE_SIZES,
         totalItemCount: totalItems ?? 0,
+        onChangePage:
+            getPageIndexChangeHandler<SubscriptionListItem>(
+                setDataDisplayParam,
+            ),
+        onChangeItemsPerPage:
+            getPageSizeChangeHandler<SubscriptionListItem>(setDataDisplayParam),
     };
 
     return (
-        <WfoTableWithFilter<SubscriptionListItem>
+        <WfoAdvancedTable
             queryString={dataDisplayParams.queryString}
             onUpdateQueryString={getQueryStringHandler<SubscriptionListItem>(
                 setDataDisplayParam,
@@ -204,29 +212,26 @@ export const WfoSubscriptionsList: FC<WfoSubscriptionsListProps> = ({
                     ? mapGraphQlSubscriptionsResultToSubscriptionListItems(data)
                     : []
             }
-            tableColumns={mapSortableAndFilterableValuesToTableColumnConfig(
-                tableColumns,
+            tableColumnConfig={mapSortableAndFilterableValuesToTableColumnConfig(
+                tableColumnConfig,
                 sortFields,
                 filterFields,
             )}
             defaultHiddenColumns={hiddenColumns}
-            dataSorting={dataSorting}
-            pagination={pagination}
+            dataSorting={[dataSorting]}
             isLoading={isFetching}
             localStorageKey={SUBSCRIPTIONS_TABLE_LOCAL_STORAGE_KEY}
             detailModalTitle={'Details - Subscription'}
-            onUpdatePage={getPageChangeHandler<SubscriptionListItem>(
-                setDataDisplayParam,
-            )}
-            onUpdateDataSort={getDataSortHandler<SubscriptionListItem>(
+            pagination={pagination}
+            error={mapRtkErrorToWfoError(error)}
+            onUpdateDataSorting={getDataSortHandler<SubscriptionListItem>(
                 setDataDisplayParam,
             )}
-            error={mapRtkErrorToWfoError(error)}
             onExportData={csvDownloadHandler(
                 getSubscriptionListForExport,
                 mapGraphQlSubscriptionsResultToSubscriptionListItems,
                 mapGraphQlSubscriptionsResultToPageInfo,
-                Object.keys(tableColumns),
+                Object.keys(tableColumnConfig),
                 getCsvFileNameWithDate('Subscriptions'),
                 showToastMessage,
                 tError,