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

package/src/components/WfoSubscription/WfoInUseByRelations.tsx

@@ -15,7 +15,7 @@ import { useWithOrchestratorTheme } from '@/hooks';
 import { useGetInUseByRelationDetailsQuery } from '@/rtk';
 import { InUseByRelation, InUseByRelationDetail } from '@/types';
 
-import { getStyles } from './styles';
+import { getSubscriptionDetailStyles } from './styles';
 
 interface WfoInUseByRelationsProps {
     inUseByRelations: InUseByRelation[];
@@ -25,7 +25,9 @@ export const WfoInUseByRelations = ({
     inUseByRelations,
 }: WfoInUseByRelationsProps) => {
     const t = useTranslations('subscriptions.detail');
-    const { inUseByRelationDetailsStyle } = useWithOrchestratorTheme(getStyles);
+    const { inUseByRelationDetailsStyle } = useWithOrchestratorTheme(
+        getSubscriptionDetailStyles,
+    );
     const subscriptionIds = inUseByRelations
         .map((relation) => relation.subscription_id)
         .join('|');

package/src/components/WfoSubscription/WfoProcessesTimeline.tsx

@@ -2,17 +2,28 @@ import React from 'react';
 
 import { useTranslations } from 'next-intl';
 
-import { EuiComment, EuiCommentList, EuiSpacer, EuiText } from '@elastic/eui';
+import {
+    EuiComment,
+    EuiCommentList,
+    EuiFlexGroup,
+    EuiSpacer,
+    EuiText,
+} from '@elastic/eui';
+
+import { WfoLoading, WfoRadioDropdownOption } from '@/components';
+import { PATH_TASKS, PATH_WORKFLOWS } from '@/components';
+import { WfoRadioDropdown, sortProcessesByDate } from '@/components';
+import { useWithOrchestratorTheme } from '@/hooks';
+import { SortOrder, SubscriptionDetailProcess } from '@/types';
+import {
+    parseDate,
+    parseDateToLocaleDateTimeString,
+    upperCaseFirstChar,
+} from '@/utils';
 
-import { useWithOrchestratorTheme } from '../../hooks';
-import { SubscriptionDetailProcess } from '../../types';
-import { parseDate, parseDateToLocaleDateTimeString } from '../../utils';
-import { upperCaseFirstChar } from '../../utils';
 import { WfoProcessStatusBadge } from '../WfoBadges';
-import { WfoLoading } from '../WfoLoading';
-import { PATH_TASKS, PATH_WORKFLOWS } from '../WfoPageTemplate';
 import { WfoTargetTypeIcon } from './WfoTargetTypeIcon';
-import { getStyles } from './styles';
+import { getSubscriptionDetailStyles } from './styles';
 
 interface WfoProcessCardProps {
     subscriptionDetailProcess: SubscriptionDetailProcess;
@@ -27,7 +38,7 @@ const WfoProcessCard = ({ subscriptionDetailProcess }: WfoProcessCardProps) => {
         emptyCellStyle,
         lastContentCellStyle,
         lastHeaderCellStyle,
-    } = useWithOrchestratorTheme(getStyles);
+    } = useWithOrchestratorTheme(getSubscriptionDetailStyles);
     const processUrl = subscriptionDetailProcess.isTask
         ? PATH_TASKS
         : PATH_WORKFLOWS;
@@ -90,8 +101,9 @@ interface WfoRenderSubscriptionProcess {
 const WfoRenderSubscriptionProcess = ({
     subscriptionDetailProcess,
 }: WfoRenderSubscriptionProcess) => {
-    const { timeLineStyle, workflowTargetStyle } =
-        useWithOrchestratorTheme(getStyles);
+    const { timeLineStyle, workflowTargetStyle } = useWithOrchestratorTheme(
+        getSubscriptionDetailStyles,
+    );
 
     return (
         <EuiComment
@@ -103,14 +115,19 @@ const WfoRenderSubscriptionProcess = ({
                 />
             }
         >
-            <div css={timeLineStyle}>
+            <EuiFlexGroup
+                alignItems="center"
+                gutterSize="s"
+                css={timeLineStyle}
+            >
                 <EuiText css={workflowTargetStyle}>
                     {upperCaseFirstChar(
                         subscriptionDetailProcess.workflowTarget,
                     )}
                 </EuiText>
+                <EuiText>-</EuiText>
                 <EuiText>{subscriptionDetailProcess.workflowName}</EuiText>
-            </div>
+            </EuiFlexGroup>
 
             <WfoProcessCard
                 subscriptionDetailProcess={subscriptionDetailProcess}
@@ -126,26 +143,56 @@ interface WfoProcessesTimelineProps {
 export const WfoProcessesTimeline = ({
     subscriptionDetailProcesses,
 }: WfoProcessesTimelineProps) => {
+    const t = useTranslations('subscriptions.detail.workflowsTab');
+    const options: WfoRadioDropdownOption<SortOrder>[] = [
+        {
+            label: t('startWithOldestLabel'),
+            id: 'radioButtonOldest',
+            value: SortOrder.ASC,
+        },
+        {
+            label: t('startWithNewestLabel'),
+            id: 'radioButtonNewest',
+            value: SortOrder.DESC,
+        },
+    ];
+
+    const [selectedOption, setSelectedOption] = React.useState(options[0]);
+
+    const handleOnSelectOption = (
+        option: WfoRadioDropdownOption<SortOrder>,
+    ) => {
+        setSelectedOption(option);
+    };
+
+    const sortedProcesses = sortProcessesByDate(
+        subscriptionDetailProcesses,
+        selectedOption.value,
+    );
+
     return (
         <>
             <EuiSpacer size={'m'} />
             {!subscriptionDetailProcesses && <WfoLoading />}
-            <EuiCommentList aria-label="Processes">
-                {subscriptionDetailProcesses && (
-                    <EuiCommentList aria-label="Processes">
-                        {subscriptionDetailProcesses
-                            .filter((process) => !process.isTask)
-                            .map((subscriptionDetailProcess, index) => (
-                                <WfoRenderSubscriptionProcess
-                                    key={index}
-                                    subscriptionDetailProcess={
-                                        subscriptionDetailProcess
-                                    }
-                                />
-                            ))}
-                    </EuiCommentList>
-                )}
-            </EuiCommentList>
+            <WfoRadioDropdown
+                options={options}
+                onUpdateOption={handleOnSelectOption}
+                selectedOption={selectedOption}
+            />
+            {sortedProcesses && (
+                <EuiCommentList aria-label="Processes">
+                    {sortedProcesses
+                        .filter((process) => !process.isTask)
+                        .map((subscriptionDetailProcess, index) => (
+                            <WfoRenderSubscriptionProcess
+                                key={index}
+                                subscriptionDetailProcess={
+                                    subscriptionDetailProcess
+                                }
+                            />
+                        ))}
+                </EuiCommentList>
+            )}
         </>
     );
 };

package/src/components/WfoSubscription/WfoRelatedSubscriptions.tsx

@@ -4,32 +4,51 @@ 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,
+    SubscriptionListItem,
     WfoDataSorting,
     WfoFirstPartUUID,
     WfoInsyncIcon,
     WfoNoResults,
     WfoSubscriptionStatusBadge,
-    WfoTableColumns,
     getDataSortHandler,
-    getPageChangeHandler,
+    getPageIndexChangeHandler,
+    getPageSizeChangeHandler,
 } from '@/components';
 import { PATH_SUBSCRIPTIONS } from '@/components';
+import {
+    graphQlRelatedSubscriptionsSortMapper,
+    graphQlRelatedSubscriptionsTerminatedSubscriptionsFilterMapper,
+    mapRelatedSubscriptionsResponseToRelatedSubscriptionsListItems,
+} from '@/components/WfoSubscription/utils/relatedSubscriptionsListItemsObjectMappers';
+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';
 import {
-    GraphqlFilter,
-    RelatedSubscription,
-    SortOrder,
-    SubscriptionStatus,
-} from '@/types';
-import { parseDate, parseDateToLocaleDateString } from '@/utils';
+    RelatedSubscriptionVariables,
+    useGetRelatedSubscriptionsQuery,
+} from '@/rtk';
+import { GraphqlFilter, SortOrder, SubscriptionStatus } from '@/types';
+import { parseDateToLocaleDateString } from '@/utils';
+
+export type RelatedSubscriptionListItem = Pick<
+    SubscriptionListItem,
+    | 'subscriptionId'
+    | 'description'
+    | 'status'
+    | 'insync'
+    | 'customerFullname'
+    | 'tag'
+    | 'startDate'
+>;
 
 interface WfoRelatedSubscriptionsProps {
     subscriptionId: string;
@@ -43,45 +62,50 @@ export const WfoRelatedSubscriptions = ({
     const t = useTranslations('subscriptions.detail');
     const { theme } = useOrchestratorTheme();
 
-    const terminatedSubscriptionsFilter: GraphqlFilter<RelatedSubscription> = {
-        field: 'status',
-        value: `${SubscriptionStatus.ACTIVE}-${SubscriptionStatus.DISABLED}-${SubscriptionStatus.INITIAL}-${SubscriptionStatus.MIGRATING}-${SubscriptionStatus.PROVISIONING}`,
-    };
+    const terminatedSubscriptionsFilter: GraphqlFilter<RelatedSubscriptionListItem> =
+        {
+            field: 'status',
+            value: `${SubscriptionStatus.ACTIVE}-${SubscriptionStatus.DISABLED}-${SubscriptionStatus.INITIAL}-${SubscriptionStatus.MIGRATING}-${SubscriptionStatus.PROVISIONING}`,
+        };
 
     const { dataDisplayParams, setDataDisplayParam } =
-        useDataDisplayParams<RelatedSubscription>({
-            pageSize: DEFAULT_PAGE_SIZE,
+        useDataDisplayParams<RelatedSubscriptionListItem>({
             sortBy: {
                 field: 'startDate',
                 order: SortOrder.DESC,
             },
         });
 
-    const { data, isFetching, isLoading } = useGetRelatedSubscriptionsQuery({
+    const graphqlQueryVariables: RelatedSubscriptionVariables = {
         first: dataDisplayParams.pageSize,
         after: dataDisplayParams.pageIndex * dataDisplayParams.pageSize,
         subscriptionId: subscriptionId,
-        sortBy: dataDisplayParams.sortBy,
+        sortBy: graphQlRelatedSubscriptionsSortMapper(dataDisplayParams.sortBy),
         terminatedSubscriptionFilter: hideTerminatedSubscriptions
-            ? terminatedSubscriptionsFilter
+            ? graphQlRelatedSubscriptionsTerminatedSubscriptionsFilterMapper(
+                  terminatedSubscriptionsFilter,
+              )
             : undefined,
-    });
+    };
+
+    const { data, isFetching, isLoading } = useGetRelatedSubscriptionsQuery(
+        graphqlQueryVariables,
+    );
 
-    const relatedSubscriptions = data?.relatedSubscriptions;
+    const relatedSubscriptions =
+        mapRelatedSubscriptionsResponseToRelatedSubscriptionsListItems(data);
     const relatedSubscriptionsPageInfo = data?.pageInfo;
 
-    const tableColumns: WfoTableColumns<RelatedSubscription> = {
+    const tableColumns: WfoTableColumnConfig<RelatedSubscriptionListItem> = {
         subscriptionId: {
-            field: 'subscriptionId',
-            name: t('id'),
-            width: '100',
-            render: (value) => <WfoFirstPartUUID UUID={value} />,
-            filterable: false,
+            columnType: ColumnType.DATA,
+            label: t('id'),
+            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,67 +113,52 @@ export const WfoRelatedSubscriptions = ({
                     {value}
                 </Link>
             ),
-            filterable: false,
         },
         status: {
-            field: 'status',
-            name: t('status'),
-            width: '130',
-            render: (value) => <WfoSubscriptionStatusBadge status={value} />,
-            filterable: false,
+            columnType: ColumnType.DATA,
+            label: t('status'),
+            renderData: (value) => (
+                <WfoSubscriptionStatusBadge status={value} />
+            ),
         },
         insync: {
-            field: 'insync',
-            name: t('insync'),
-            width: '60',
-            render: (value) => <WfoInsyncIcon inSync={value} />,
-            filterable: false,
+            columnType: ColumnType.DATA,
+            label: t('insync'),
+            renderData: (value) => <WfoInsyncIcon inSync={value} />,
         },
-        customer: {
-            field: 'customer',
-            name: t('customer'),
-            render: (customer) => customer.fullname,
-            sortable: false,
-            filterable: false,
+        customerFullname: {
+            columnType: ColumnType.DATA,
+            label: t('customer'),
         },
-        product: {
-            field: 'product',
-            name: t('tag'),
-            width: '150',
-            render: (product) => product.tag,
-            filterable: false,
+        tag: {
+            columnType: ColumnType.DATA,
+            label: t('tag'),
+            width: '150px',
         },
         startDate: {
-            field: 'startDate',
-            name: t('startDate'),
-            width: '100',
-            render: (value) => parseDateToLocaleDateString(parseDate(value)),
-            filterable: false,
+            columnType: ColumnType.DATA,
+            label: t('startDate'),
+            renderData: parseDateToLocaleDateString,
         },
     };
 
     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> = {
+    const dataSorting: WfoDataSorting<RelatedSubscriptionListItem> = {
         field: dataDisplayParams.sortBy?.field,
         sortOrder: dataDisplayParams.sortBy?.order,
     };
 
-    const onUpdatePage =
-        getPageChangeHandler<RelatedSubscription>(setDataDisplayParam);
-
-    const handleCriteriaChange = (criterion: Criteria<RelatedSubscription>) =>
-        criterion.page && onUpdatePage(criterion.page);
-
     const toggleTerminatedSubscriptions = () => {
         setHideTerminatedSubscriptions((currentValue) => !currentValue);
     };
-
     return (
         <>
             <EuiSpacer size="xl" />
@@ -165,26 +174,25 @@ export const WfoRelatedSubscriptions = ({
                 </EuiFlexItem>
             </EuiFlexGroup>
             <EuiSpacer size="m" />
-            {(relatedSubscriptions &&
-                relatedSubscriptions.length > 0 &&
+            {(relatedSubscriptions?.length > 0 &&
                 (!isLoading ||
                     // This situation represents the situation where the hideRelatedsubscriptions is being toggled
                     // 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<RelatedSubscriptionListItem>(
+                            tableColumns,
+                            data?.pageInfo.sortFields ?? [],
+                        )}
+                        pagination={pagination}
+                        isLoading={isFetching}
+                        onUpdateDataSorting={getDataSortHandler(
+                            setDataDisplayParam,
+                        )}
+                        dataSorting={[dataSorting]}
+                    />
                 )) || (
                 <WfoNoResults
                     text={t('noRelatedSubscriptions')}

package/src/components/WfoSubscription/WfoSubscription.tsx

@@ -2,13 +2,6 @@ import React from 'react';
 
 import { StringParam, useQueryParam, withDefault } from 'use-query-params';
 
-import {
-    EuiBadgeGroup,
-    EuiFlexGroup,
-    EuiFlexItem,
-    EuiSpacer,
-} from '@elastic/eui';
-
 import {
     WfoFilterTabs,
     WfoLoading,
@@ -23,7 +16,7 @@ import {
     WfoSubscriptionSyncStatusBadge,
     WfoTitleWithWebsocketBadge,
 } from '@/components';
-import { useOrchestratorTheme } from '@/hooks';
+import { WfoContentHeader } from '@/components/WfoContentHeader/WfoContentHeader';
 import { useGetSubscriptionDetailQuery } from '@/rtk/endpoints/subscriptionDetail';
 
 import { WfoError } from '../WfoError';
@@ -43,8 +36,6 @@ export const WfoSubscription = ({ subscriptionId }: WfoSubscriptionProps) => {
         ),
     );
 
-    const { multiplyByBaseUnit } = useOrchestratorTheme();
-
     const selectedTab = ((): SubscriptionDetailTab => {
         return (
             subscriptionDetailTabs.find(({ id }) => id === activeTab)?.id ||
@@ -68,36 +59,27 @@ export const WfoSubscription = ({ subscriptionId }: WfoSubscriptionProps) => {
                 (isLoading && <WfoLoading />) ||
                 (subscriptionDetail && subscriptionDetail.subscriptionId && (
                     <>
-                        <EuiFlexGroup
-                            style={{ marginBottom: 10 }}
-                            justifyContent="spaceBetween"
-                        >
-                            <EuiFlexItem grow={true}>
+                        <WfoContentHeader
+                            title={
                                 <WfoTitleWithWebsocketBadge
                                     title={subscriptionDetail.description}
                                 />
-                                <EuiSpacer size="xs" />
-                                <EuiBadgeGroup
-                                    css={{ marginRight: multiplyByBaseUnit(1) }}
-                                >
-                                    <EuiFlexItem grow={false}>
-                                        <WfoSubscriptionStatusBadge
-                                            status={subscriptionDetail.status}
-                                        />
-                                    </EuiFlexItem>
-                                    <EuiFlexItem grow={false}>
-                                        <WfoSubscriptionSyncStatusBadge
-                                            insync={subscriptionDetail.insync}
-                                        />
-                                    </EuiFlexItem>
-                                </EuiBadgeGroup>
-                            </EuiFlexItem>
-                            <EuiFlexItem grow={false}>
-                                <WfoSubscriptionActions
-                                    subscriptionId={subscriptionId}
-                                />
-                            </EuiFlexItem>
-                        </EuiFlexGroup>
+                            }
+                            subtitle={
+                                <>
+                                    <WfoSubscriptionStatusBadge
+                                        status={subscriptionDetail.status}
+                                    />
+                                    <WfoSubscriptionSyncStatusBadge
+                                        insync={subscriptionDetail.insync}
+                                    />
+                                </>
+                            }
+                        >
+                            <WfoSubscriptionActions
+                                subscriptionId={subscriptionId}
+                            />
+                        </WfoContentHeader>
 
                         <WfoFilterTabs
                             tabs={subscriptionDetailTabs}

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}
                                 />