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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@orchestrator-ui/orchestrator-ui-components",
-    "version": "1.38.1",
+    "version": "2.0.0",
     "license": "Apache-2.0",
     "description": "Library of UI Components used to display the workflow orchestrator frontend",
     "author": {

package/src/components/WfoForms/formFields/SubscriptionSummaryField.tsx

@@ -1,5 +1,5 @@
 /*
- * Copyright 2019-2023 SURF.
+ * Copyright 2019-2024 SURF.
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
@@ -18,7 +18,7 @@ import { connectField, filterDOMProps } from 'uniforms';
 
 import { EuiFormRow, EuiText } from '@elastic/eui';
 
-import { WfoLoading, WfoSubscriptionGeneral } from '@/components';
+import { WfoLoading, WfoSubscriptionDetailSection } from '@/components';
 import { useGetSubscriptionDetailQuery } from '@/rtk';
 
 import { FieldProps } from './types';
@@ -35,14 +35,15 @@ const SubscriptionSummaryDisplay = ({
     const { data, isFetching } = useGetSubscriptionDetailQuery({
         subscriptionId,
     });
+    const subscriptionDetail = data?.subscription;
 
-    if (!data) {
+    if (!subscriptionDetail) {
         return <WfoLoading />;
     }
 
     return (
-        <WfoSubscriptionGeneral
-            subscriptionDetail={data.subscription}
+        <WfoSubscriptionDetailSection
+            subscriptionDetail={subscriptionDetail}
             isFetching={isFetching}
         />
     );

package/src/components/WfoPageTemplate/WfoPageHeader/WfoPageHeader.tsx

@@ -52,7 +52,9 @@ export const WfoPageHeader: FC<WfoPageHeaderProps> = ({
     return (
         <EuiHeader css={getHeaderStyle(navigationHeight)}>
             <EuiHeaderSection>
-                <EuiToolTip content={'v' + ORCHESTRATOR_UI_LIBRARY_VERSION}>
+                <EuiToolTip
+                    content={'UI version' + ORCHESTRATOR_UI_LIBRARY_VERSION}
+                >
                     <EuiHeaderSectionItem css={{ paddingTop: theme.size.xs }}>
                         <EuiHeaderLogo iconType={() => <WfoAppLogo />} />
                         <div css={appNameStyle}>

package/src/components/WfoPageTemplate/WfoSidebar/WfoCopyright.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { useWithOrchestratorTheme } from '@orchestrator-ui/orchestrator-ui-components/src/hooks';
+import { useWithOrchestratorTheme } from '@/hooks';
 
 import { getCopyrightStyles } from './styles';
 

package/src/components/WfoProcessList/WfoProcessesList.tsx

@@ -3,27 +3,27 @@ import React from 'react';
 import { useTranslations } from 'next-intl';
 import Link from 'next/link';
 
-import { Pagination } from '@elastic/eui';
-
 import {
     FilterQuery,
     PATH_WORKFLOWS,
     WfoDateTime,
     WfoProcessStatusBadge,
     WfoWorkflowTargetBadge,
+    getPageIndexChangeHandler,
+    getPageSizeChangeHandler,
 } from '@/components';
 import {
     DEFAULT_PAGE_SIZES,
     TableColumnKeys,
     WfoDataSorting,
     WfoFirstPartUUID,
-    WfoTableColumns,
-    WfoTableWithFilter,
     getDataSortHandler,
-    getPageChangeHandler,
     getQueryStringHandler,
-    mapSortableAndFilterableValuesToTableColumnConfig,
 } from '@/components/WfoTable';
+import { WfoAdvancedTable } from '@/components/WfoTable/WfoAdvancedTable';
+import { WfoAdvancedTableColumnConfig } from '@/components/WfoTable/WfoAdvancedTable/types';
+import { ColumnType, Pagination } from '@/components/WfoTable/WfoTable';
+import { mapSortableAndFilterableValuesToTableColumnConfig } from '@/components/WfoTable/WfoTable/utils';
 import { useShowToastMessage } from '@/hooks';
 import { DataDisplayParams } from '@/hooks';
 import { WfoProcessListSubscriptionsCell } from '@/pages';
@@ -84,8 +84,8 @@ export type WfoProcessesListProps = {
         value: DataDisplayParams<ProcessListItem>[DisplayParamKey],
     ) => void;
     overrideDefaultTableColumns?: (
-        defaultTableColumns: WfoTableColumns<ProcessListItem>,
-    ) => WfoTableColumns<ProcessListItem>;
+        defaultTableColumns: WfoAdvancedTableColumnConfig<ProcessListItem>,
+    ) => WfoAdvancedTableColumnConfig<ProcessListItem>;
 };
 
 export const WfoProcessesList = ({
@@ -93,66 +93,66 @@ export const WfoProcessesList = ({
     defaultHiddenColumns = [],
     localStorageKey,
     dataDisplayParams,
-    setDataDisplayParam,
     overrideDefaultTableColumns,
+    setDataDisplayParam,
 }: WfoProcessesListProps) => {
     const t = useTranslations('processes.index');
     const tError = useTranslations('errors');
     const { showToastMessage } = useShowToastMessage();
 
-    const defaultTableColumns: WfoTableColumns<ProcessListItem> = {
+    const defaultTableColumns: WfoAdvancedTableColumnConfig<ProcessListItem> = {
         workflowName: {
-            field: 'workflowName',
-            name: t('workflowName'),
+            columnType: ColumnType.DATA,
+            label: t('workflowName'),
             width: '20%',
-            render: (value, { processId }) => (
+            renderData: (value, { processId }) => (
                 <Link href={`${PATH_WORKFLOWS}/${processId}`}>{value}</Link>
             ),
         },
         lastStep: {
-            field: 'lastStep',
-            name: t('step'),
+            columnType: ColumnType.DATA,
+            label: t('step'),
             width: '15%',
         },
         lastStatus: {
-            field: 'lastStatus',
-            name: t('status'),
+            columnType: ColumnType.DATA,
+            label: t('status'),
             width: '100',
-            render: (cellValue) => (
+            renderData: (cellValue) => (
                 <WfoProcessStatusBadge processStatus={cellValue} />
             ),
         },
         workflowTarget: {
-            field: 'workflowTarget',
-            name: t('workflowTarget'),
+            columnType: ColumnType.DATA,
+            label: t('workflowTarget'),
             width: '100',
-            render: (target) => <WfoWorkflowTargetBadge target={target} />,
+            renderData: (target) => <WfoWorkflowTargetBadge target={target} />,
         },
         tag: {
-            field: 'tag',
-            name: t('productTag'),
+            columnType: ColumnType.DATA,
+            label: t('productTag'),
             width: '100',
         },
         productName: {
-            field: 'productName',
-            name: t('product'),
+            columnType: ColumnType.DATA,
+            label: t('product'),
             width: '10%',
         },
         customer: {
-            field: 'customer',
-            name: t('customer'),
+            columnType: ColumnType.DATA,
+            label: t('customer'),
             width: '10%',
         },
         customerAbbreviation: {
-            field: 'customerAbbreviation',
-            name: t('customerAbbreviation'),
+            columnType: ColumnType.DATA,
+            label: t('customerAbbreviation'),
             width: '10%',
         },
         subscriptions: {
-            field: 'subscriptions',
-            name: t('subscriptions'),
+            columnType: ColumnType.DATA,
+            label: t('subscriptions'),
             width: '15%',
-            render: ({ page: subscriptions }) => (
+            renderData: ({ page: subscriptions }) => (
                 <WfoProcessListSubscriptionsCell
                     subscriptions={subscriptions}
                     numberOfSubscriptionsToRender={1}
@@ -169,41 +169,41 @@ export const WfoProcessesList = ({
                     .join(', '),
         },
         createdBy: {
-            field: 'createdBy',
-            name: t('createdBy'),
+            columnType: ColumnType.DATA,
+            label: t('createdBy'),
             width: '10%',
         },
         assignee: {
-            field: 'assignee',
-            name: t('assignee'),
+            columnType: ColumnType.DATA,
+            label: t('assignee'),
             width: '5%',
         },
         processId: {
-            field: 'processId',
-            name: t('processId'),
+            columnType: ColumnType.DATA,
+            label: t('processId'),
             width: '90',
-            render: (value) => <WfoFirstPartUUID UUID={value} />,
+            renderData: (value) => <WfoFirstPartUUID UUID={value} />,
             renderDetails: (value) => value,
         },
         startedAt: {
-            field: 'startedAt',
-            name: t('started'),
+            columnType: ColumnType.DATA,
+            label: t('started'),
             width: '100',
-            render: (value) => <WfoDateTime dateOrIsoString={value} />,
+            renderData: (value) => <WfoDateTime dateOrIsoString={value} />,
             renderDetails: parseDateToLocaleDateTimeString,
             clipboardText: parseDateToLocaleDateTimeString,
         },
         lastModifiedAt: {
-            field: 'lastModifiedAt',
-            name: t('lastModified'),
+            columnType: ColumnType.DATA,
+            label: t('lastModified'),
             width: '100',
-            render: (value) => <WfoDateTime dateOrIsoString={value} />,
+            renderData: (value) => <WfoDateTime dateOrIsoString={value} />,
             renderDetails: parseDateToLocaleDateTimeString,
             clipboardText: parseDateToLocaleDateTimeString,
         },
     };
 
-    const tableColumns: WfoTableColumns<ProcessListItem> =
+    const tableColumns: WfoAdvancedTableColumnConfig<ProcessListItem> =
         overrideDefaultTableColumns
             ? overrideDefaultTableColumns(defaultTableColumns)
             : defaultTableColumns;
@@ -231,6 +231,8 @@ export const WfoProcessesList = ({
         pageIndex: pageIndex,
         pageSizeOptions: DEFAULT_PAGE_SIZES,
         totalItemCount: pageInfo?.totalItems ? pageInfo.totalItems : 0,
+        onChangePage: getPageIndexChangeHandler(setDataDisplayParam),
+        onChangeItemsPerPage: getPageSizeChangeHandler(setDataDisplayParam),
     };
     const dataSorting: WfoDataSorting<ProcessListItem> = {
         field: sortBy?.field ?? 'lastModified',
@@ -243,17 +245,17 @@ export const WfoProcessesList = ({
         ).unwrap();
 
     return (
-        <WfoTableWithFilter<ProcessListItem>
+        <WfoAdvancedTable<ProcessListItem>
             queryString={queryString}
             data={mapGraphQlProcessListResultToProcessListItems(
                 processes || [],
             )}
-            tableColumns={mapSortableAndFilterableValuesToTableColumnConfig(
+            tableColumnConfig={mapSortableAndFilterableValuesToTableColumnConfig(
                 tableColumns,
                 pageInfo?.sortFields,
                 pageInfo?.filterFields,
             )}
-            dataSorting={dataSorting}
+            dataSorting={[dataSorting]}
             pagination={pagination}
             isLoading={isFetching}
             error={mapRtkErrorToWfoError(error)}
@@ -261,8 +263,7 @@ export const WfoProcessesList = ({
             localStorageKey={localStorageKey}
             detailModalTitle={'Details - Process'}
             onUpdateQueryString={getQueryStringHandler(setDataDisplayParam)}
-            onUpdatePage={getPageChangeHandler(setDataDisplayParam)}
-            onUpdateDataSort={getDataSortHandler(setDataDisplayParam)}
+            onUpdateDataSorting={getDataSortHandler(setDataDisplayParam)}
             onExportData={csvDownloadHandler<
                 ProcessListResponse,
                 ProcessListExportItem

package/src/components/WfoRadioDropdown/WfoRadioDropdown.tsx

@@ -0,0 +1,88 @@
+import React, { useState } from 'react';
+
+import {
+    EuiButtonEmpty,
+    EuiFlexGroup,
+    EuiPopover,
+    EuiRadioGroup,
+} from '@elastic/eui';
+import { EuiRadioGroupOption } from '@elastic/eui/src/components/form/radio/radio_group';
+
+export interface WfoRadioDropdownProps<T> {
+    options: WfoRadioDropdownOption<T>[];
+    selectedOption: WfoRadioDropdownOption<T>;
+    onUpdateOption: (value: WfoRadioDropdownOption<T>) => void;
+}
+
+export type WfoRadioDropdownOption<T> = {
+    label: string;
+    id: string;
+    value: T;
+};
+
+export const WfoRadioDropdown = <T,>({
+    options,
+    onUpdateOption,
+    selectedOption,
+}: WfoRadioDropdownProps<T>) => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    const handleClose = () => {
+        if (isOpen) {
+            setIsOpen(false);
+        }
+    };
+    const handleSelectRadio = (id: string) => {
+        const updatedOption = options.find((option) => option.id === id);
+        setTimeout(handleClose, 100);
+        if (updatedOption) {
+            onUpdateOption(updatedOption);
+        }
+    };
+
+    const buttonLabel = options.find(
+        (option) => option.id === selectedOption.id,
+    )?.label;
+    const radioGroupOptions: EuiRadioGroupOption[] = options.map((option) => ({
+        id: option.id,
+        label: option.label,
+    }));
+
+    return (
+        <EuiFlexGroup
+            gutterSize="s"
+            alignItems="center"
+            justifyContent="flexEnd"
+        >
+            <EuiPopover
+                button={
+                    <EuiButtonEmpty
+                        size="s"
+                        iconType="arrowDown"
+                        iconSide="right"
+                        onClick={() => {
+                            setIsOpen((isOpen) => !isOpen);
+                        }}
+                        css={{
+                            '&:focus': {
+                                backgroundColor: 'transparent',
+                                textDecoration: 'none',
+                            },
+                        }}
+                    >
+                        {buttonLabel}
+                    </EuiButtonEmpty>
+                }
+                isOpen={isOpen}
+                closePopover={handleClose}
+                anchorPosition="downLeft"
+            >
+                <EuiRadioGroup
+                    options={radioGroupOptions}
+                    idSelected={selectedOption.id}
+                    onChange={handleSelectRadio}
+                />
+            </EuiPopover>
+        </EuiFlexGroup>
+    );
+};

package/src/components/WfoRadioDropdown/index.ts

@@ -0,0 +1 @@
+export * from './WfoRadioDropdown';

package/src/components/WfoStartButton/WfoStartButtonComboBox.tsx

@@ -13,6 +13,7 @@ export type WfoStartButtonComboBoxProps = {
     options: StartComboBoxOption[];
     onOptionChange: (selectedOption: StartComboBoxOption) => void;
     isProcess: boolean;
+    className?: string;
 };
 
 export const WfoStartButtonComboBox = ({
@@ -20,6 +21,7 @@ export const WfoStartButtonComboBox = ({
     options,
     onOptionChange,
     isProcess,
+    className,
 }: WfoStartButtonComboBoxProps) => {
     const [isPopoverOpen, setPopoverOpen] = useState(false);
     const { theme, isDarkThemeActive } = useOrchestratorTheme();
@@ -48,12 +50,14 @@ export const WfoStartButtonComboBox = ({
             closePopover={() => setPopoverOpen(false)}
         >
             <EuiSelectable<StartComboBoxOption>
+                className={className}
                 css={selectableStyle}
                 searchable
                 options={options}
                 onChange={(_, __, changedOption) =>
                     onOptionChange(changedOption)
                 }
+                height={200}
             >
                 {(list, search) => (
                     <>

package/src/components/WfoStartButton/WfoStartTaskComboBox.tsx

@@ -42,6 +42,7 @@ export const WfoStartTaskButtonComboBox = () => {
             options={comboBoxOptions}
             onOptionChange={handleOptionChange}
             isProcess={false}
+            css={{ width: '600px' }}
         />
     );
 };

package/src/components/WfoStartButton/WfoStartWorkflowComboBox.tsx

@@ -44,6 +44,7 @@ export const WfoStartWorkflowButtonComboBox = () => {
             options={comboBoxOptions}
             onOptionChange={handleOptionChange}
             isProcess
+            css={{ width: '300px' }}
         />
     );
 };

package/src/components/WfoStartButton/styles.ts

@@ -3,11 +3,7 @@ import { css } from '@emotion/react';
 import { WfoTheme } from '@/hooks';
 
 export const getStyles = ({ theme }: WfoTheme) => {
-    const comboBoxWidth = '300px';
-
     const selectableStyle = css({
-        width: comboBoxWidth,
-
         '.euiFieldSearch': {
             backgroundColor: theme.colors.body,
             color: theme.colors.text,

package/src/components/WfoSubscription/WfoInSyncField.tsx

@@ -5,12 +5,14 @@ import Link from 'next/link';
 
 import { EuiButton } from '@elastic/eui';
 
+import { PolicyResource } from '@/configuration/policy-resources';
 import { ConfirmationDialogContext } from '@/contexts';
 import { useOrchestratorTheme, useShowToastMessage } from '@/hooks';
 import { useSetSubscriptionInSyncMutation } from '@/rtk/endpoints';
 import { SubscriptionDetail, ToastTypes } from '@/types';
 import { formatDate } from '@/utils';
 
+import { WfoIsAllowedToRender } from '../WfoAuth/WfoIsAllowedToRender';
 import { WfoInsyncIcon } from '../WfoInsyncIcon/WfoInsyncIcon';
 import { PATH_TASKS, PATH_WORKFLOWS } from '../WfoPageTemplate';
 import { getLastUncompletedProcess, getLatestTaskDate } from './utils';
@@ -82,15 +84,17 @@ export const WfoInSyncField = ({
                 >
                     {t('see')} {lastUncompletedProcess?.processId}
                 </Link>
-                <EuiButton
-                    isLoading={isFetching}
-                    isDisabled={isFetching}
-                    color="danger"
-                    size="s"
-                    onClick={confirmSetInSync}
-                >
-                    {t('setInSync')}
-                </EuiButton>
+                <WfoIsAllowedToRender resource={PolicyResource.PROCESS_RETRY}>
+                    <EuiButton
+                        isLoading={isFetching}
+                        isDisabled={isFetching}
+                        color="danger"
+                        size="s"
+                        onClick={confirmSetInSync}
+                    >
+                        {t('setInSync')}
+                    </EuiButton>
+                </WfoIsAllowedToRender>
             </>
         );
     };

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