Add sorting for subscription details workflows tab (#1425)

* Add sorting for subscription details workflows tab

* Added changeset

* Moved type to WfoRadioDropdown

Author: Georgi2704

.changeset/slow-files-yawn.md

@@ -0,0 +1,5 @@
+---
+'@orchestrator-ui/orchestrator-ui-components': patch
+---
+
+1378 Add sorting for subscription details workflows tab

packages/orchestrator-ui-components/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>
+    );
+};

packages/orchestrator-ui-components/src/components/WfoRadioDropdown/index.ts

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

packages/orchestrator-ui-components/src/components/WfoSubscription/WfoProcessesTimeline.tsx

@@ -2,15 +2,26 @@ 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 { getSubscriptionDetailStyles } from './styles';
 
@@ -104,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}
@@ -127,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>
+            )}
         </>
     );
 };

packages/orchestrator-ui-components/src/components/WfoSubscription/utils/utils.ts

@@ -5,6 +5,7 @@ import { EuiThemeComputed } from '@elastic/eui';
 import {
     FieldValue,
     ProcessStatus,
+    SortOrder,
     SubscriptionAction,
     SubscriptionDetailProcess,
     WorkflowTarget,
@@ -126,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)
+        }
+    });
+};

packages/orchestrator-ui-components/src/components/index.ts

@@ -29,3 +29,4 @@ export * from './WfoStartButton';
 export * from './WfoSubscriptionsList';
 export * from './WfoSummary';
 export * from './WfoTitleWithWebsocketBadge';
+export * from './WfoRadioDropdown';

packages/orchestrator-ui-components/src/messages/en-GB.json

@@ -357,6 +357,10 @@
             "setInSyncSuccess": {
                 "title": "Subscription set in sync",
                 "text": "The subscription was successfully set in sync."
+            },
+            "workflowsTab": {
+                "startWithOldestLabel": "Start with oldest first",
+                "startWithNewestLabel": "Start with newest first"
             }
         }
     },

packages/orchestrator-ui-components/src/messages/nl-NL.json

@@ -356,6 +356,10 @@
             "setInSyncSuccess": {
                 "title": "Subscription inSync",
                 "text": "De subscription is in sync gezet."
+            },
+            "workflowsTab": {
+                "startWithOldestLabel": "Start met oudste eerst",
+                "startWithNewestLabel": "Start met nieuwste eerst"
             }
         }
     },