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

package/src/components/WfoSubscription/WfoRelatedSubscriptions.tsx

@@ -4,22 +4,26 @@ import { useTranslations } from 'next-intl';
 import Link from 'next/link';
 
 import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiSwitch } from '@elastic/eui';
-import type { Criteria, Pagination } from '@elastic/eui';
 
 import {
-    DEFAULT_PAGE_SIZE,
     DEFAULT_PAGE_SIZES,
-    WfoBasicTable,
     WfoDataSorting,
     WfoFirstPartUUID,
     WfoInsyncIcon,
     WfoNoResults,
     WfoSubscriptionStatusBadge,
-    WfoTableColumns,
     getDataSortHandler,
-    getPageChangeHandler,
+    getPageIndexChangeHandler,
+    getPageSizeChangeHandler,
 } from '@/components';
 import { PATH_SUBSCRIPTIONS } from '@/components';
+import {
+    ColumnType,
+    Pagination,
+    WfoTable,
+    WfoTableColumnConfig,
+} from '@/components/WfoTable/WfoTable';
+import { mapSortableAndFilterableValuesToTableColumnConfig } from '@/components/WfoTable/WfoTable/utils';
 import { useDataDisplayParams, useOrchestratorTheme } from '@/hooks';
 import { WfoSearchStrikethrough } from '@/icons';
 import { useGetRelatedSubscriptionsQuery } from '@/rtk';
@@ -50,7 +54,6 @@ export const WfoRelatedSubscriptions = ({
 
     const { dataDisplayParams, setDataDisplayParam } =
         useDataDisplayParams<RelatedSubscription>({
-            pageSize: DEFAULT_PAGE_SIZE,
             sortBy: {
                 field: 'startDate',
                 order: SortOrder.DESC,
@@ -70,18 +73,17 @@ export const WfoRelatedSubscriptions = ({
     const relatedSubscriptions = data?.relatedSubscriptions;
     const relatedSubscriptionsPageInfo = data?.pageInfo;
 
-    const tableColumns: WfoTableColumns<RelatedSubscription> = {
+    const tableColumns: WfoTableColumnConfig<RelatedSubscription> = {
         subscriptionId: {
-            field: 'subscriptionId',
-            name: t('id'),
+            columnType: ColumnType.DATA,
+            label: t('id'),
             width: '100',
-            render: (value) => <WfoFirstPartUUID UUID={value} />,
-            filterable: false,
+            renderData: (value) => <WfoFirstPartUUID UUID={value} />,
         },
         description: {
-            field: 'description',
-            name: t('description'),
-            render: (value, record) => (
+            columnType: ColumnType.DATA,
+            label: t('description'),
+            renderData: (value, record) => (
                 <Link
                     target="_blank"
                     href={`${PATH_SUBSCRIPTIONS}/${record.subscriptionId}`}
@@ -89,50 +91,48 @@ export const WfoRelatedSubscriptions = ({
                     {value}
                 </Link>
             ),
-            filterable: false,
         },
         status: {
-            field: 'status',
-            name: t('status'),
+            columnType: ColumnType.DATA,
+            label: t('status'),
             width: '130',
-            render: (value) => <WfoSubscriptionStatusBadge status={value} />,
-            filterable: false,
+            renderData: (value) => (
+                <WfoSubscriptionStatusBadge status={value} />
+            ),
         },
         insync: {
-            field: 'insync',
-            name: t('insync'),
+            columnType: ColumnType.DATA,
+            label: t('insync'),
             width: '60',
-            render: (value) => <WfoInsyncIcon inSync={value} />,
-            filterable: false,
+            renderData: (value) => <WfoInsyncIcon inSync={value} />,
         },
         customer: {
-            field: 'customer',
-            name: t('customer'),
-            render: (customer) => customer.fullname,
-            sortable: false,
-            filterable: false,
+            columnType: ColumnType.DATA,
+            label: t('customer'),
+            renderData: (customer) => customer.fullname,
         },
         product: {
-            field: 'product',
-            name: t('tag'),
+            columnType: ColumnType.DATA,
+            label: t('tag'),
             width: '150',
-            render: (product) => product.tag,
-            filterable: false,
+            renderData: (product) => product.tag,
         },
         startDate: {
-            field: 'startDate',
-            name: t('startDate'),
+            columnType: ColumnType.DATA,
+            label: t('startDate'),
             width: '100',
-            render: (value) => parseDateToLocaleDateString(parseDate(value)),
-            filterable: false,
+            renderData: (value) =>
+                parseDateToLocaleDateString(parseDate(value)),
         },
     };
 
     const pagination: Pagination = {
         pageSize: dataDisplayParams.pageSize,
         pageIndex: dataDisplayParams.pageIndex,
-        pageSizeOptions: DEFAULT_PAGE_SIZES,
         totalItemCount: relatedSubscriptionsPageInfo?.totalItems ?? 0,
+        pageSizeOptions: DEFAULT_PAGE_SIZES,
+        onChangeItemsPerPage: getPageSizeChangeHandler(setDataDisplayParam),
+        onChangePage: getPageIndexChangeHandler(setDataDisplayParam),
     };
 
     const dataSorting: WfoDataSorting<RelatedSubscription> = {
@@ -140,12 +140,6 @@ export const WfoRelatedSubscriptions = ({
         sortOrder: dataDisplayParams.sortBy?.order,
     };
 
-    const onUpdatePage =
-        getPageChangeHandler<RelatedSubscription>(setDataDisplayParam);
-
-    const handleCriteriaChange = (criterion: Criteria<RelatedSubscription>) =>
-        criterion.page && onUpdatePage(criterion.page);
-
     const toggleTerminatedSubscriptions = () => {
         setHideTerminatedSubscriptions((currentValue) => !currentValue);
     };
@@ -172,19 +166,19 @@ export const WfoRelatedSubscriptions = ({
                     // in which case we don't want to show the loadingState because it makes the page flicker
                     (!hideTerminatedSubscriptions &&
                         relatedSubscriptions.length > 0)) && (
-                    <>
-                        <WfoBasicTable<RelatedSubscription>
-                            data={relatedSubscriptions}
-                            columns={tableColumns}
-                            pagination={pagination}
-                            isLoading={isFetching}
-                            onUpdateDataSorting={getDataSortHandler(
-                                setDataDisplayParam,
-                            )}
-                            dataSorting={dataSorting}
-                            onCriteriaChange={handleCriteriaChange}
-                        />
-                    </>
+                    <WfoTable
+                        data={relatedSubscriptions}
+                        columnConfig={mapSortableAndFilterableValuesToTableColumnConfig<RelatedSubscription>(
+                            tableColumns,
+                            data.pageInfo.sortFields,
+                        )}
+                        pagination={pagination}
+                        isLoading={isFetching}
+                        onUpdateDataSorting={getDataSortHandler(
+                            setDataDisplayParam,
+                        )}
+                        dataSorting={[dataSorting]}
+                    />
                 )) || (
                 <WfoNoResults
                     text={t('noRelatedSubscriptions')}

package/src/components/WfoSubscription/WfoSubscriptionDetailTree.tsx

@@ -6,6 +6,7 @@ import { EuiCallOut, EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
 
 import { WfoLoading, WfoTextAnchor } from '@/components';
 import { TreeContext, TreeContextType } from '@/contexts';
+import { useOrchestratorTheme, useWithOrchestratorTheme } from '@/hooks';
 import {
     ProductBlockInstance,
     Subscription,
@@ -17,6 +18,7 @@ import { getTokenName } from '../../utils/getTokenName';
 import { WfoTree, getPositionInTree, sortTreeBlockByLabel } from '../WfoTree';
 import { getWfoTreeNodeDepth } from '../WfoTree';
 import { WfoSubscriptionProductBlock } from './WfoSubscriptionProductBlock';
+import { getSubscriptionDetailStyles } from './styles';
 import { getProductBlockTitle } from './utils';
 
 interface WfoSubscriptionDetailTreeProps {
@@ -29,8 +31,11 @@ export const WfoSubscriptionDetailTree = ({
     subscriptionId,
 }: WfoSubscriptionDetailTreeProps) => {
     const t = useTranslations('subscriptions.detail');
+    const { theme } = useOrchestratorTheme();
     const [, setSelectedTreeNode] = useState(-1);
-
+    const { productBlockTreeWidth } = useWithOrchestratorTheme(
+        getSubscriptionDetailStyles,
+    );
     const { selectedIds, expandAll, collapseAll, resetSelection, selectAll } =
         React.useContext(TreeContext) as TreeContextType;
 
@@ -132,8 +137,10 @@ export const WfoSubscriptionDetailTree = ({
         >
             <EuiFlexItem
                 style={{
-                    maxWidth: 450,
-                    overflow: 'auto',
+                    minWidth: productBlockTreeWidth,
+                    maxWidth: productBlockTreeWidth,
+                    overflowX: 'hidden',
+                    overflowY: 'auto',
                 }}
                 grow={true}
             >
@@ -175,6 +182,7 @@ export const WfoSubscriptionDetailTree = ({
             <EuiFlexItem
                 css={{
                     overflow: 'auto',
+                    minWidth: 350,
                 }}
                 grow={true}
             >
@@ -183,23 +191,23 @@ export const WfoSubscriptionDetailTree = ({
                     {/* This is a placeholder for the searchbar */}
                     {selectedIds.length === 0 && (
                         <EuiCallOut
-                            style={{
-                                marginTop: 15,
-                                display: 'flex',
+                            css={{
+                                marginTop: theme.size.m,
+                                textAlign: 'center',
                             }}
                             size="m"
                             title={t('noProductBlockSelected')}
                             iconType="inspect"
                         >
-                            <p>{t('ctaSelectProductBlock')} </p>
+                            <EuiText>{t('ctaSelectProductBlock')} </EuiText>
                         </EuiCallOut>
                     )}
                     {selectedIds.length !== 0 &&
-                        selectedIds.sort(sortByTree).map((id, index) => {
+                        selectedIds.sort(sortByTree).map((id) => {
                             const block = idToNodeMap[id];
                             return (
                                 <WfoSubscriptionProductBlock
-                                    key={index}
+                                    key={id}
                                     subscriptionId={subscriptionId}
                                     productBlock={block}
                                 />

package/src/components/WfoSubscription/WfoSubscriptionGeneral.tsx

@@ -1,204 +1,73 @@
 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;
     isFetching: boolean;
 }
 
+export enum WfoSubscriptionGeneralSections {
+    BLOCK_TITLE_SUBSCRIPTION_DETAILS = 'blockTitleSubscriptionDetails',
+    BLOCK_TITLE_METADATA = 'metadata',
+    BLOCK_TITLE_FIXED_INPUTS = 'blockTitleFixedInputs',
+    BLOCK_TITLE_PRODUCT_INFO = 'blockTitleProductInfo',
+}
+
 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: 'blockTitleSubscriptionDetails',
+            id: WfoSubscriptionGeneralSections.BLOCK_TITLE_SUBSCRIPTION_DETAILS,
             node: (
-                <SubscriptionKeyValueBlock
-                    title={t('blockTitleSubscriptionDetails')}
-                    keyValues={getSubscriptionDetailBlockData()}
+                <WfoSubscriptionDetailSection
+                    subscriptionDetail={subscriptionDetail}
+                    isFetching={isFetching}
                 />
             ),
         },
         ...toOptionalArrayEntry(
             {
-                id: 'metadata',
-                node: (
-                    <SubscriptionKeyValueBlock
-                        title={t('metadata')}
-                        keyValues={getMetadataBlockData()}
-                    />
-                ),
+                id: WfoSubscriptionGeneralSections.BLOCK_TITLE_METADATA,
+                node: <WfoSubscriptionMetadataSection metadata={metadata} />,
             },
             hasMetadata,
         ),
         ...toOptionalArrayEntry(
             {
-                id: 'blockTitleFixedInputs',
+                id: WfoSubscriptionGeneralSections.BLOCK_TITLE_FIXED_INPUTS,
                 node: (
-                    <SubscriptionKeyValueBlock
-                        title={t('blockTitleFixedInputs')}
-                        keyValues={getFixedInputBlockData()}
+                    <WfoSubscriptionFixedInputSection
+                        fixedInputs={fixedInputs}
                     />
                 ),
             },
             hasFixedInputs,
         ),
         {
-            id: 'blockTitleProductInfo',
-            node: (
-                <SubscriptionKeyValueBlock
-                    title={t('blockTitleProductInfo')}
-                    keyValues={getProductInfoBlockData()}
-                />
-            ),
+            id: WfoSubscriptionGeneralSections.BLOCK_TITLE_PRODUCT_INFO,
+            node: <WfoSubscriptionProductInfoSection product={product} />,
         },
     ];
 

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

@@ -0,0 +1,113 @@
+import React from 'react';
+
+import { useTranslations } from 'next-intl';
+
+import {
+    SubscriptionKeyValueBlock,
+    WfoCustomerDescriptionsField,
+    WfoInSyncField,
+    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: 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}
+        />
+    );
+};