@orchestrator-ui/orchestrator-ui-components 1.2.0 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@orchestrator-ui/orchestrator-ui-components",
-    "version": "1.2.0",
+    "version": "1.3.0",
     "license": "MIT",
     "scripts": {
         "test": "jest",

package/src/components/WfoSubscription/WfoInSyncField.tsx

@@ -0,0 +1,99 @@
+import React, { useContext } from 'react';
+
+import { useTranslations } from 'next-intl';
+import Link from 'next/link';
+
+import { EuiButton } from '@elastic/eui';
+
+import { ConfirmationDialogContext } from '@/contexts';
+import { useOrchestratorTheme, useShowToastMessage } from '@/hooks';
+import { useSetSubscriptionInSyncMutation } from '@/rtk/endpoints';
+import { SubscriptionDetail, ToastTypes } from '@/types';
+import { formatDate } from '@/utils';
+
+import { WfoInsyncIcon } from '../WfoInsyncIcon/WfoInsyncIcon';
+import { PATH_TASKS, PATH_WORKFLOWS } from '../WfoPageTemplate';
+import { getLastUncompletedProcess, getLatestTaskDate } from './utils';
+
+interface WfoInSyncFieldProps {
+    subscriptionDetail: SubscriptionDetail;
+}
+
+export const WfoInSyncField = ({ subscriptionDetail }: WfoInSyncFieldProps) => {
+    const t = useTranslations('subscriptions.detail');
+    const { theme } = useOrchestratorTheme();
+    const inSync = subscriptionDetail.insync;
+    const lastTaskRunDate = getLatestTaskDate(
+        subscriptionDetail.processes.page,
+    );
+    const lastUncompletedProcess = getLastUncompletedProcess(
+        subscriptionDetail.processes.page,
+    );
+    const [setSubscriptionInSync] = useSetSubscriptionInSyncMutation();
+    const { showToastMessage } = useShowToastMessage();
+    const { showConfirmDialog } = useContext(ConfirmationDialogContext);
+
+    const setInSyncAction = () => {
+        setSubscriptionInSync(subscriptionDetail.subscriptionId)
+            .unwrap()
+            .then(() => {
+                // Optimistic update for now
+                showToastMessage(
+                    ToastTypes.SUCCESS,
+                    t('setInSyncSuccess.text'),
+                    t('setInSyncSuccess.title'),
+                );
+                subscriptionDetail.insync = true;
+            })
+            .catch((error) => {
+                showToastMessage(
+                    ToastTypes.ERROR,
+                    error?.data?.detail
+                        ? error.data.detail
+                        : t('setInSyncFailed.text').toString,
+                    t('setInSyncFailed.title'),
+                );
+                console.error('Failed to set subscription in sync.', error);
+            });
+    };
+
+    const getProcessLink = () => {
+        const processUrl = `${lastUncompletedProcess?.isTask ? PATH_TASKS : PATH_WORKFLOWS}/${lastUncompletedProcess?.processId}`;
+
+        const confirmSetInSync = () => {
+            showConfirmDialog({
+                question: t('setInSyncQuestion'),
+                confirmAction: () => {
+                    setInSyncAction();
+                },
+            });
+        };
+
+        return (
+            <>
+                <Link
+                    href={processUrl}
+                    css={{
+                        paddingLeft: theme.base / 2,
+                        paddingRight: theme.base,
+                    }}
+                >
+                    {t('see')} {lastUncompletedProcess?.processId}
+                </Link>
+                <EuiButton color="danger" size="s" onClick={confirmSetInSync}>
+                    {t('setInSync')}
+                </EuiButton>
+            </>
+        );
+    };
+
+    return (
+        <>
+            <div css={{ paddingRight: theme.base / 4, display: 'flex' }}>
+                <WfoInsyncIcon inSync={inSync} />
+            </div>
+            {inSync && lastTaskRunDate && `(${formatDate(lastTaskRunDate)})`}
+            {!inSync && lastUncompletedProcess && getProcessLink()}
+        </>
+    );
+};

package/src/components/WfoSubscription/WfoProcessesTimeline.tsx

@@ -133,16 +133,16 @@ export const WfoProcessesTimeline = ({
             <EuiCommentList aria-label="Processes">
                 {subscriptionDetailProcesses && (
                     <EuiCommentList aria-label="Processes">
-                        {subscriptionDetailProcesses.map(
-                            (subscriptionDetailProcess, index) => (
+                        {subscriptionDetailProcesses
+                            .filter((process) => !process.isTask)
+                            .map((subscriptionDetailProcess, index) => (
                                 <WfoRenderSubscriptionProcess
                                     key={index}
                                     subscriptionDetailProcess={
                                         subscriptionDetailProcess
                                     }
                                 />
-                            ),
-                        )}
+                            ))}
                     </EuiCommentList>
                 )}
             </EuiCommentList>

package/src/components/WfoSubscription/WfoSubscriptionGeneral.tsx

@@ -11,9 +11,9 @@ import {
     WfoProductStatusBadge,
     WfoSubscriptionStatusBadge,
 } from '../WfoBadges';
-import { WfoInsyncIcon } from '../WfoInsyncIcon/WfoInsyncIcon';
 import { WfoKeyValueTableDataType } from '../WfoKeyValueTable/WfoKeyValueTable';
 import { SubscriptionKeyValueBlock } from './SubscriptionKeyValueBlock';
+import { WfoInSyncField } from './WfoInSyncField';
 
 interface WfoSubscriptionGeneralProps {
     subscriptionDetail: SubscriptionDetail;
@@ -57,7 +57,9 @@ export const WfoSubscriptionGeneral = ({
             },
             {
                 key: t('insync'),
-                value: <WfoInsyncIcon inSync={subscriptionDetail.insync} />,
+                value: (
+                    <WfoInSyncField subscriptionDetail={subscriptionDetail} />
+                ),
             },
             {
                 key: t('customer'),

package/src/components/WfoSubscription/index.ts

@@ -6,3 +6,4 @@ export * from './SubscriptionKeyValueBlock';
 export * from './WfoSubscriptionDetailTree';
 export * from './WfoSubscriptionGeneral';
 export * from './WfoSubscription';
+export * from './WfoInSyncField';

package/src/components/WfoSubscription/utils/utils.spec.ts

@@ -1,10 +1,17 @@
 import { EuiThemeComputed } from '@elastic/eui';
 
 import { SubscriptionAction } from '../../../hooks';
-import { FieldValue, WorkflowTarget } from '../../../types';
+import {
+    FieldValue,
+    ProcessStatus,
+    SubscriptionDetailProcess,
+    WorkflowTarget,
+} from '../../../types';
 import {
     flattenArrayProps,
     getFieldFromProductBlockInstanceValues,
+    getLastUncompletedProcess,
+    getLatestTaskDate,
     getProductBlockTitle,
     getWorkflowTargetColor,
     getWorkflowTargetIconContent,
@@ -190,3 +197,166 @@ describe('getWorkflowTargetIconContent', () => {
         ).toBe('M');
     });
 });
+
+const testProcess: SubscriptionDetailProcess = {
+    workflowName: 'testWorkflow 1',
+    lastStatus: ProcessStatus.COMPLETED,
+    workflowTarget: WorkflowTarget.MODIFY,
+    createdBy: 'testUser 1',
+    processId: 'testProcessId 1',
+    startedAt: '2021-01-01T00:00:00Z',
+    isTask: false,
+};
+
+describe('getLastUncompletedProcess', () => {
+    it('Returns empty string with empty process array', () => {
+        const processes: SubscriptionDetailProcess[] = [];
+
+        const getLastUncompletedProcessResult =
+            getLastUncompletedProcess(processes);
+
+        expect(getLastUncompletedProcessResult).toBe(undefined);
+    });
+
+    it('Return undefined string when there is only completed process', () => {
+        const completedProcesses = [
+            {
+                ...testProcess,
+                lastStatus: ProcessStatus.COMPLETED,
+                startedAt: '2021-01-01T00:00:00Z',
+            },
+            {
+                ...testProcess,
+                lastStatus: ProcessStatus.COMPLETED,
+                startedAt: '2021-02-01T00:00:00Z',
+            },
+            {
+                ...testProcess,
+                lastStatus: ProcessStatus.COMPLETED,
+                startedAt: '2021-03-01T00:00:00Z',
+            },
+        ];
+
+        const lastUncompletedProcess =
+            getLastUncompletedProcess(completedProcesses);
+
+        expect(lastUncompletedProcess).toBe(undefined);
+    });
+    it('Returns uncompleted process from list of processes', () => {
+        const failedProcess = {
+            ...testProcess,
+            lastStatus: ProcessStatus.FAILED,
+            processId: 'FAILED_PROCESS_ID',
+            startedAt: '2021-02-01T00:00:00Z',
+        };
+
+        const failedProcesses = [
+            {
+                ...testProcess,
+                lastStatus: ProcessStatus.COMPLETED,
+                startedAt: '2021-01-01T00:00:00Z',
+            },
+            failedProcess,
+            {
+                ...testProcess,
+                lastStatus: ProcessStatus.COMPLETED,
+                startedAt: '2021-03-01T00:00:00Z',
+            },
+        ];
+
+        const lastUncompletedProcess =
+            getLastUncompletedProcess(failedProcesses);
+
+        expect(lastUncompletedProcess?.processId).toBe('FAILED_PROCESS_ID');
+    });
+
+    it('Returns last failed process if there are more uncompleted processes', () => {
+        const failedProcess = {
+            ...testProcess,
+            lastStatus: ProcessStatus.FAILED,
+            processId: 'FAILED_PROCESS_1',
+            startedAt: '2021-02-01T00:00:00Z',
+        };
+
+        const failedProcess2 = {
+            ...testProcess,
+            lastStatus: ProcessStatus.SUSPENDED,
+            processId: 'FAILED_PROCESS_ID_2',
+            startedAt: '2021-04-01T00:00:00Z',
+        };
+
+        const failedProcesses = [
+            {
+                ...testProcess,
+                lastStatus: ProcessStatus.COMPLETED,
+                startedAt: '2021-01-01T00:00:00Z',
+            },
+            failedProcess,
+            {
+                ...testProcess,
+                lastStatus: ProcessStatus.COMPLETED,
+                startedAt: '2021-03-01T00:00:00Z',
+            },
+            failedProcess2,
+        ];
+
+        const lastUncompletedProcess =
+            getLastUncompletedProcess(failedProcesses);
+
+        expect(lastUncompletedProcess?.processId).toBe('FAILED_PROCESS_ID_2');
+    });
+});
+
+describe('getLatestTaskDate', () => {
+    it('Returns empty string on empty array', () => {
+        const tasks: SubscriptionDetailProcess[] = [];
+
+        const lastTask = getLatestTaskDate(tasks);
+
+        expect(lastTask).toBe('');
+    });
+
+    it('Returns empty string if there are no tasks among the processes', () => {
+        const workflowsOnly = [
+            { ...testProcess, isTask: false },
+            { ...testProcess, isTask: false },
+        ];
+
+        const lastTask = getLatestTaskDate(workflowsOnly);
+
+        expect(lastTask).toBe('');
+    });
+
+    it('Returns date of tasks among the processes', () => {
+        const workflowsAndTask = [
+            { ...testProcess, isTask: false },
+            { ...testProcess, isTask: true, startedAt: '2021-01-01T00:00:00Z' },
+            { ...testProcess, isTask: false },
+        ];
+
+        const lastTaskDate = getLatestTaskDate(workflowsAndTask);
+
+        expect(lastTaskDate).toBe('2021-01-01T00:00:00Z');
+    });
+
+    it('Returns date of last task among the processes if there are more tasks', () => {
+        const workflowsAndTask = [
+            {
+                ...testProcess,
+                isTask: false,
+                startedAt: '2021-01-01T00:00:00Z',
+            },
+            { ...testProcess, isTask: true, startedAt: '2021-02-01T00:00:00Z' },
+            {
+                ...testProcess,
+                isTask: false,
+                startedAt: '2021-03-01T00:00:00Z',
+            },
+            { ...testProcess, isTask: true, startedAt: '2021-04-01T00:00:00Z' },
+        ];
+
+        const lastTaskDate = getLatestTaskDate(workflowsAndTask);
+
+        expect(lastTaskDate).toBe('2021-04-01T00:00:00Z');
+    });
+});

package/src/components/WfoSubscription/utils/utils.ts

@@ -2,9 +2,14 @@ import { TranslationValues } from 'next-intl';
 
 import { EuiThemeComputed } from '@elastic/eui';
 
-import { SubscriptionAction } from '../../../hooks';
-import type { FieldValue } from '../../../types';
-import { WorkflowTarget } from '../../../types';
+import { SubscriptionAction } from '@/hooks';
+
+import {
+    FieldValue,
+    ProcessStatus,
+    SubscriptionDetailProcess,
+    WorkflowTarget,
+} from '../../../types';
 
 const MAX_LABEL_LENGTH = 45;
 
@@ -90,3 +95,39 @@ export const getWorkflowTargetIconContent = (
             return 'M';
     }
 };
+
+export const getLastUncompletedProcess = (
+    processes: SubscriptionDetailProcess[],
+): SubscriptionDetailProcess | undefined => {
+    if (processes.length === 0) {
+        return;
+    }
+
+    const uncompletedProcesses = processes
+        .filter((process) => process.lastStatus !== ProcessStatus.COMPLETED)
+        .sort((a, b) => {
+            const dateA = new Date(a.startedAt);
+            const dateB = new Date(b.startedAt);
+            return dateB.getTime() - dateA.getTime();
+        });
+
+    return uncompletedProcesses.length > 0
+        ? uncompletedProcesses[0]
+        : undefined;
+};
+
+export const getLatestTaskDate = (processes: SubscriptionDetailProcess[]) => {
+    if (processes.length === 0) {
+        return '';
+    }
+
+    const tasks = processes
+        .filter((process) => process.isTask)
+        .sort((a, b) => {
+            const dateA = new Date(a.startedAt);
+            const dateB = new Date(b.startedAt);
+            return dateB.getTime() - dateA.getTime();
+        });
+
+    return tasks.length > 0 ? tasks[0].startedAt : '';
+};

package/src/graphqlQueries/subscriptionDetailQuery.ts

@@ -46,10 +46,7 @@ export const GET_SUBSCRIPTION_DETAIL_GRAPHQL_QUERY: TypedDocumentNode<
                     subscriptionInstanceId
                     inUseByRelations
                 }
-                processes(
-                    sortBy: { field: "startedAt", order: ASC }
-                    filterBy: { field: "isTask", value: "false" }
-                ) {
+                processes(sortBy: { field: "startedAt", order: ASC }) {
                     page {
                         processId
                         lastStatus

package/src/messages/en-GB.json

@@ -314,7 +314,18 @@
                 "startedBy": "Started by"
             },
             "showAll": "Show all",
-            "hideAll": "Hide all"
+            "hideAll": "Hide all",
+            "see": "See",
+            "setInSync": "Set in Sync",
+            "setInSyncQuestion": "Are you sure you want to do this? You're about to force a subscription in sync. When it's clear why the subscription is out of sync this could enable you to start or finish a change on this subscription. When you're in doubt, please consult the network automators first as running workflows on subscriptions that are not in sync can potentially do great harm to the network.",
+            "setInSyncFailed": {
+                "title": "Set in sync failed",
+                "text": "The subscription could not be set in sync. Please try again later."
+            },
+            "setInSyncSuccess": {
+                "title": "Subscription set in sync",
+                "text": "The subscription was successfully set in sync."
+            }
         }
     },
     "tasks": {

package/src/messages/nl-NL.json

@@ -313,7 +313,18 @@
                 "startedBy": "Started by"
             },
             "showAll": "Toon alles",
-            "hideAll": "Verberg alles"
+            "hideAll": "Verberg alles",
+            "see": "Bekijk",
+            "setInSync": "Set in Sync",
+            "setInSyncQuestion": "Weet je zeker dat je de subscription in-sync wilt zetten? Je gaat een subscription geforceerd in-sync zetten. Alleen als je zeker weet wat de reden is van out-of-sync kun je de actie uitvoeren, zodat je daarna wijzigingen kunt doorvoeren op deze subscription. Bij twijfel - check eerst bij de network automators of het in sync zetten van de subscription mogelijk schadelijke gevolgen kan hebben op het netwerk.",
+            "setInSyncFailed": {
+                "title": "In sync zetten mislukt",
+                "text": "De subscription kon niet inSync worden gezet. Probeer het opnieuw."
+            },
+            "setInSyncSuccess": {
+                "title": "Subscription inSync",
+                "text": "De subscription is in sync gezet."
+            }
         }
     },
     "tasks": {

package/src/rtk/endpoints/inSync.ts

@@ -0,0 +1,22 @@
+import { Subscription } from '@/types';
+
+import { BaseQueryTypes, orchestratorApi } from '../api';
+
+const inSyncApi = orchestratorApi.injectEndpoints({
+    endpoints: (build) => ({
+        setSubscriptionInSync: build.mutation<
+            void,
+            Subscription['subscriptionId']
+        >({
+            query: (subscriptionId) => ({
+                url: `subscriptions/${subscriptionId}/set_in_sync`,
+                method: 'PUT',
+            }),
+            extraOptions: {
+                baseQueryType: BaseQueryTypes.fetch,
+            },
+        }),
+    }),
+});
+
+export const { useSetSubscriptionInSyncMutation } = inSyncApi;

package/src/rtk/endpoints/index.ts

@@ -2,3 +2,4 @@ export * from './customers';
 export * from './processList';
 export * from './settings';
 export * from './streamMessages';
+export * from './inSync';