@orchestrator-ui/orchestrator-ui-components 1.24.0 → 1.26.0

package/src/components/WfoTree/treeUtils.spec.ts

@@ -5,7 +5,6 @@ describe('getWfoTreeNodeDepth', () => {
     const field: FieldValue = { field: 'test', value: 'test' };
     const sampleTree: TreeBlock = {
         id: 1,
-        ownerSubscriptionId: 'subscription-1',
         subscriptionInstanceId: 'subscription-1',
         parent: null,
         icon: 'folder',
@@ -14,10 +13,13 @@ describe('getWfoTreeNodeDepth', () => {
         productBlockInstanceValues: [field],
         inUseByRelations: [],
         isOutsideCurrentSubscription: false,
+        subscription: {
+            subscriptionId: 'subscription-1',
+            description: 'Subscription 1',
+        },
         children: [
             {
                 id: 2,
-                ownerSubscriptionId: 'subscription-2',
                 subscriptionInstanceId: 'subscription-2',
                 parent: 1,
                 icon: 'file',
@@ -27,10 +29,13 @@ describe('getWfoTreeNodeDepth', () => {
                 inUseByRelations: [],
                 children: [],
                 isOutsideCurrentSubscription: false,
+                subscription: {
+                    subscriptionId: 'subscription-2',
+                    description: 'Subscription 2',
+                },
             },
             {
                 id: 3,
-                ownerSubscriptionId: 'subscription-3',
                 subscriptionInstanceId: 'subscription-3',
                 parent: 1,
                 icon: 'file',
@@ -39,10 +44,13 @@ describe('getWfoTreeNodeDepth', () => {
                 productBlockInstanceValues: [field],
                 inUseByRelations: [],
                 isOutsideCurrentSubscription: false,
+                subscription: {
+                    subscriptionId: 'subscription-3',
+                    description: 'Subscription 3',
+                },
                 children: [
                     {
                         id: 4,
-                        ownerSubscriptionId: 'subscription-4',
                         subscriptionInstanceId: 'subscription-4',
                         parent: 3,
                         icon: 'file',
@@ -52,6 +60,10 @@ describe('getWfoTreeNodeDepth', () => {
                         inUseByRelations: [],
                         children: [],
                         isOutsideCurrentSubscription: false,
+                        subscription: {
+                            subscriptionId: 'subscription-4',
+                            description: 'Subscription 4',
+                        },
                     },
                 ],
             },
@@ -96,6 +108,10 @@ describe('getWfoTreeNodeDepth', () => {
             inUseByRelations: [],
             children: [],
             isOutsideCurrentSubscription: false,
+            subscription: {
+                subscriptionId: 'subscription-1',
+                description: 'Subscription 1',
+            },
         };
 
         expect(() =>

package/src/components/WfoWorkflowSteps/WfoStep/WfoStepForm.tsx

@@ -2,8 +2,9 @@ import React, { useState } from 'react';
 
 import { EuiFlexItem } from '@elastic/eui';
 
-import { UserInputFormWizard, WfoLoading } from '@/components';
+import { UserInputFormWizard, WfoError, WfoLoading } from '@/components';
 import { useOrchestratorTheme } from '@/hooks';
+import { HttpStatus } from '@/rtk';
 import { useResumeProcessMutation } from '@/rtk/endpoints/forms';
 import { InputForm } from '@/types/forms';
 
@@ -19,6 +20,7 @@ export const WfoStepForm = ({
     processId,
 }: WfoStepFormProps) => {
     const [isProcessing, setIsProcessing] = useState<boolean>(false);
+    const [hasError, setHasError] = useState<boolean>(false);
     const { theme } = useOrchestratorTheme();
     const [resumeProcess] = useResumeProcessMutation();
 
@@ -27,16 +29,28 @@ export const WfoStepForm = ({
             return Promise.reject();
         }
 
-        return resumeProcess({ processId, userInputs: processInput }).then(
-            () => {
+        return resumeProcess({ processId, userInputs: processInput })
+            .unwrap()
+            .then(() => {
                 setIsProcessing(true);
-            },
-        );
+            })
+            .catch((error) => {
+                if (error?.status !== HttpStatus.FormNotComplete) {
+                    if (error?.status === HttpStatus.BadRequest) {
+                        // Rethrow the error so userInputForm can catch it and display validation errors
+                        throw error;
+                    }
+                    console.error(error);
+                    setHasError(true);
+                } else {
+                    throw error;
+                }
+            });
     };
 
     return (
         <EuiFlexItem css={{ margin: theme.size.m }}>
-            {(isProcessing && <WfoLoading />) || (
+            {(hasError && <WfoError />) || (isProcessing && <WfoLoading />) || (
                 <UserInputFormWizard
                     stepUserInput={userInputForm}
                     stepSubmit={submitForm}

package/src/messages/en-GB.json

@@ -17,7 +17,11 @@
         "darkMode": "Dark mode",
         "lightMode": "Light mode",
         "websocketConnected": "The websocket is connected",
-        "websocketDisconnected": "The websocket is disconnected, click the icon or refresh the page"
+        "websocketDisconnected": "The websocket is disconnected, click the icon or refresh the page",
+        "resetToDefault": "Reset to default",
+        "savePreferences": "Save preferences",
+        "numberOfRows": "Number of rows",
+        "tableSettings": "Table settings"
     },
     "common": {
         "product": "Product",

package/src/messages/nl-NL.json

@@ -17,7 +17,11 @@
         "darkMode": "Dark mode",
         "lightMode": "Light mode",
         "websocketConnected": "De websocket is actief",
-        "websocketDisconnected": "De websocket verbinding is verbroken, klik op het icoon of ververs de pagina."
+        "websocketDisconnected": "De websocket verbinding is verbroken, klik op het icoon of ververs de pagina.",
+        "resetToDefault": "Reset naar standaard",
+        "savePreferences": "Voorkeuren opslaan",
+        "numberOfRows": "Aantal rijen",
+        "tableSettings": "Tabel instellingen"
     },
     "common": {
         "product": "Produkt",

package/src/pages/processes/WfoProcessDetailPage.tsx

@@ -1,19 +1,16 @@
-import React, { useEffect, useRef, useState } from 'react';
-
-import { TimelineItem, WfoError, WfoLoading } from '@/components';
-import { useGetProcessDetailQuery } from '@/rtk/endpoints/processDetail';
+import React, { useRef } from 'react';
 
 import {
+    TimelineItem,
+    WfoError,
+    WfoLoading,
     WfoStepListRef,
     WfoWorkflowStepList,
-} from '../../components/WfoWorkflowSteps';
-import {
-    ProcessDetail,
-    ProcessDoneStatuses,
-    ProcessStatus,
-    Step,
-} from '../../types';
-import { getProductNamesFromProcess } from '../../utils';
+} from '@/components';
+import { useGetProcessDetailQuery } from '@/rtk/endpoints/processDetail';
+import { Step } from '@/types';
+import { getProductNamesFromProcess } from '@/utils';
+
 import { WfoProcessDetail } from './WfoProcessDetail';
 import {
     convertStepsToGroupedSteps,
@@ -24,69 +21,25 @@ export type GroupedStep = {
     steps: Step[];
 };
 
-const PROCESS_DETAIL_DEFAULT_REFETCH_INTERVAL = 3000;
-
 interface WfoProcessDetailPageProps {
     processId: string;
-    processDetailRefetchInterval?: number;
 }
 
 export const WfoProcessDetailPage = ({
     processId,
-    processDetailRefetchInterval = PROCESS_DETAIL_DEFAULT_REFETCH_INTERVAL,
 }: WfoProcessDetailPageProps) => {
     const stepListRef = useRef<WfoStepListRef>(null);
-    const [fetchInterval, setFetchInterval] = useState<number | undefined>();
-    const [process, setProcess] = useState<ProcessDetail | undefined>();
-
-    const { data, isLoading, isError } = useGetProcessDetailQuery(
-        { processId },
-        { pollingInterval: fetchInterval },
-    );
-
-    if (isError) {
-        if (fetchInterval) {
-            setFetchInterval(undefined);
-        }
-    }
-
-    useEffect(() => {
-        const process = data?.processes[0];
-        // We need to cast here because the backend might return the string in upperCase and
-        // toLowerCase() will converts the value type to string
-        const lastStatus =
-            process?.lastStatus.toLocaleLowerCase() as ProcessStatus;
-
-        const isInProgress = !(
-            lastStatus && ProcessDoneStatuses.includes(lastStatus)
-        );
-
-        setFetchInterval(
-            isInProgress ? processDetailRefetchInterval : undefined,
-        );
-    }, [data, processDetailRefetchInterval]);
-
-    useEffect(() => {
-        const fetchedProcessDetails = data?.processes[0];
-
-        if (!process) {
-            setProcess(fetchedProcessDetails);
-            return;
-        }
 
-        const shouldUpdateProcess =
-            process.lastStatus != fetchedProcessDetails?.lastStatus ||
-            process.lastStep !== fetchedProcessDetails?.lastStep;
-        if (shouldUpdateProcess) {
-            setProcess(fetchedProcessDetails);
-        }
-    }, [data, process]);
+    const { data, isLoading, isError } = useGetProcessDetailQuery({
+        processId,
+    });
+    const processDetail = data?.processes[0];
 
-    const steps = process?.steps ?? [];
+    const steps = processDetail?.steps ?? [];
 
-    const productNames = getProductNamesFromProcess(process);
-    const pageTitle = process?.workflowName || '';
-    const isTask = process?.isTask ?? false;
+    const productNames = getProductNamesFromProcess(processDetail);
+    const pageTitle = processDetail?.workflowName || '';
+    const isTask = processDetail?.isTask ?? false;
     const groupedSteps: GroupedStep[] = convertStepsToGroupedSteps(steps);
     const timelineItems: TimelineItem[] =
         mapGroupedStepsToTimelineItems(groupedSteps);
@@ -96,7 +49,7 @@ export const WfoProcessDetailPage = ({
             pageTitle={pageTitle}
             productNames={productNames}
             buttonsAreDisabled={isLoading || isError}
-            processDetail={process}
+            processDetail={processDetail}
             timelineItems={timelineItems}
             onTimelineItemClick={(id: string) =>
                 stepListRef.current?.scrollToStep(id)
@@ -106,16 +59,16 @@ export const WfoProcessDetailPage = ({
         >
             {(isError && <WfoError />) ||
                 (isLoading && <WfoLoading />) ||
-                (process !== undefined && (
+                (processDetail !== undefined && (
                     <WfoWorkflowStepList
                         ref={stepListRef}
-                        processId={process.processId}
+                        processId={processDetail.processId}
                         steps={groupedSteps.flatMap(
                             (groupedStep) => groupedStep.steps,
                         )}
-                        traceBack={process.traceback}
-                        userInputForm={process.form}
-                        startedAt={process.startedAt}
+                        traceBack={processDetail.traceback}
+                        userInputForm={processDetail.form}
+                        startedAt={processDetail.startedAt}
                         isTask={isTask}
                     />
                 )) || <h1>Invalid processId</h1>}

package/src/pages/processes/WfoStartProcessPage.tsx

@@ -22,6 +22,7 @@ import {
     handlePromiseErrorWithCallback,
     useGetTimeLineItemsQuery,
 } from '@/rtk';
+import { useGetSubscriptionDetailQuery } from '@/rtk';
 import { useStartProcessMutation } from '@/rtk/endpoints/forms';
 import {
     EngineStatus,
@@ -87,6 +88,17 @@ export const WfoStartProcessPage = ({
     const [form, setForm] = useState<UserInputForm>({});
     const { productId, subscriptionId } = router.query as StartProcessPageQuery;
 
+    const {
+        data: subscriptionDetail,
+        isLoading: isLoadingSubscriptionDetail,
+        isError: isErrorSubscriptionDetail,
+    } = useGetSubscriptionDetailQuery(
+        {
+            subscriptionId: subscriptionId || '',
+        },
+        { skip: !subscriptionId },
+    );
+
     const [startProcess] = useStartProcessMutation();
 
     const startProcessPayload = useMemo(
@@ -101,10 +113,13 @@ export const WfoStartProcessPage = ({
 
     const {
         data: timeLineItems = [],
-        isError,
-        isLoading,
+        isError: isErrorTimeLineItems,
+        isLoading: isLoadingTimeLineItems,
     } = useGetTimeLineItemsQuery(processName);
 
+    const isLoading = isLoadingSubscriptionDetail || isLoadingTimeLineItems;
+    const isError = isErrorSubscriptionDetail || isErrorTimeLineItems;
+
     if (isError) {
         if (!hasError) {
             setHasError(true);
@@ -126,7 +141,7 @@ export const WfoStartProcessPage = ({
                             const basePath = isTask
                                 ? PATH_TASKS
                                 : PATH_WORKFLOWS;
-                            router.push(`${basePath}/${process.id}`);
+                            router.replace(`${basePath}/${process.id}`);
                         }
                     },
                     // Reject handler
@@ -186,6 +201,18 @@ export const WfoStartProcessPage = ({
         lastStep: StepStatus.FORM,
         workflowName: processName,
         createdBy: '-',
+        subscriptions: subscriptionDetail && {
+            page: [
+                {
+                    product: {
+                        name: subscriptionDetail.subscription.product.name,
+                    },
+                    description: subscriptionDetail.subscription.description,
+                    subscriptionId:
+                        subscriptionDetail.subscription.subscriptionId,
+                },
+            ],
+        },
     };
 
     return (

package/src/rtk/api.ts

@@ -16,7 +16,7 @@ export enum BaseQueryTypes {
 export enum CacheTags {
     engineStatus = 'engineStatus',
     cacheNames = 'cacheNames',
-    processList = 'processList',
+    processes = 'processes',
     processListSummary = 'processListSummary',
     subscription = 'subscription',
     subscriptionList = 'subscriptionList',
@@ -108,7 +108,7 @@ export const orchestratorApi = createApi({
     tagTypes: [
         CacheTags.engineStatus,
         CacheTags.cacheNames,
-        CacheTags.processList,
+        CacheTags.processes,
         CacheTags.processListSummary,
         CacheTags.subscriptionList,
         CacheTags.subscription,

package/src/rtk/endpoints/processDetail.ts

@@ -86,6 +86,17 @@ const processDetailApi = orchestratorApi.injectEndpoints({
                     processes,
                 };
             },
+            providesTags: (result, error, queryArguments) => {
+                if (!error && result) {
+                    return [
+                        {
+                            type: CacheTags.processes,
+                            id: queryArguments.processId,
+                        },
+                    ];
+                }
+                return [];
+            },
         }),
         getRawProcessDetail: builder.query<
             ProcessDetailResultRaw,
@@ -111,7 +122,7 @@ const processDetailApi = orchestratorApi.injectEndpoints({
             extraOptions: {
                 baseQueryType: BaseQueryTypes.fetch,
             },
-            invalidatesTags: [CacheTags.processList],
+            invalidatesTags: [CacheTags.processes],
         }),
         retryProcess: builder.mutation<void, { processId: string }>({
             query: ({ processId }) => ({
@@ -126,7 +137,7 @@ const processDetailApi = orchestratorApi.injectEndpoints({
             extraOptions: {
                 baseQueryType: BaseQueryTypes.fetch,
             },
-            invalidatesTags: [CacheTags.processList],
+            invalidatesTags: [CacheTags.processes],
         }),
         deleteProcess: builder.mutation<void, { processId: string }>({
             query: ({ processId }) => ({
@@ -137,7 +148,7 @@ const processDetailApi = orchestratorApi.injectEndpoints({
             extraOptions: {
                 baseQueryType: BaseQueryTypes.fetch,
             },
-            invalidatesTags: [CacheTags.processList],
+            invalidatesTags: [CacheTags.processes],
         }),
         abortProcess: builder.mutation<void, { processId: string }>({
             query: ({ processId }) => ({
@@ -148,7 +159,7 @@ const processDetailApi = orchestratorApi.injectEndpoints({
             extraOptions: {
                 baseQueryType: BaseQueryTypes.fetch,
             },
-            invalidatesTags: [CacheTags.processList],
+            invalidatesTags: [CacheTags.processes],
         }),
     }),
 });

package/src/rtk/endpoints/processList.ts

@@ -82,7 +82,7 @@ const processApi = orchestratorApi.injectEndpoints({
                     pageInfo: response.processes?.pageInfo || {},
                 };
             },
-            providesTags: [CacheTags.processList],
+            providesTags: [CacheTags.processes],
         }),
     }),
 });

package/src/rtk/endpoints/streamMessages.ts

@@ -27,6 +27,8 @@ type WebSocketMessage = {
     value: string[] | string;
 };
 
+type CacheInvalidationTag = CacheTags | { type: CacheTags; id: string };
+
 enum MessageTypes {
     invalidateCache = 'invalidateCache',
 }
@@ -66,17 +68,25 @@ const streamMessagesApi = orchestratorApi.injectEndpoints({
                     updateCachedData(() => false);
                 };
 
-                const invalidateTag = (tag: string) => {
-                    const tagToInvalidate = tag as CacheTags;
-                    if (validCacheTags.includes(tagToInvalidate)) {
+                const invalidateTag = (cacheTag: CacheTags, id?: string) => {
+                    if (validCacheTags.includes(cacheTag)) {
+                        // If we receive an object with cacheTag and id we both invalidate the cache key and the cache key with the id
+                        // invalidating both the general and specific caches
+                        const cacheTags: CacheInvalidationTag[] = [cacheTag];
+
+                        if (id) {
+                            cacheTags.push({
+                                type: cacheTag,
+                                id,
+                            });
+                        }
+
                         const cacheInvalidationAction =
-                            orchestratorApi.util.invalidateTags([
-                                tagToInvalidate,
-                            ]);
+                            orchestratorApi.util.invalidateTags(cacheTags);
                         dispatch(cacheInvalidationAction);
                     } else {
                         console.error(
-                            `Trying to invalidate a cache entry with an unknown tag: ${tagToInvalidate}`,
+                            `Trying to invalidate a cache entry with an unknown tag: ${cacheTag}`,
                         );
                     }
                 };
@@ -88,9 +98,14 @@ const streamMessagesApi = orchestratorApi.injectEndpoints({
                         const messageValue = message.value;
 
                         if (typeof messageValue === 'string') {
-                            invalidateTag(messageValue);
-                        } else if (Array.isArray(messageValue)) {
-                            messageValue.forEach((tag) => invalidateTag(tag));
+                            invalidateTag(messageValue as CacheTags);
+                        } else if (
+                            Array.isArray(messageValue) &&
+                            messageValue.length === 2
+                        ) {
+                            const [tag, id] = messageValue;
+                            const cacheTag = tag as CacheTags;
+                            invalidateTag(cacheTag, id);
                         } else {
                             console.error(
                                 'invalid message value type',

package/src/rtk/endpoints/subscriptionDetail.ts

@@ -43,7 +43,10 @@ export const subscriptionDetailQuery = `
                 }
                 productBlockInstances {
                     id
-                    ownerSubscriptionId
+                    subscription {
+                        subscriptionId
+                        description
+                    }
                     parent
                     productBlockInstanceValues
                     subscriptionInstanceId

package/src/types/types.ts

@@ -39,11 +39,11 @@ export type InUseByRelation = {
 
 export type ProductBlockInstance = {
     id: number;
-    ownerSubscriptionId: string;
     subscriptionInstanceId: string;
     parent: Nullable<number>;
     productBlockInstanceValues: FieldValue[];
     inUseByRelations: InUseByRelation[];
+    subscription: Pick<Subscription, 'subscriptionId' | 'description'>;
 };
 
 export interface ResourceTypeDefinition {

package/src/utils/date.ts

@@ -2,7 +2,9 @@ import { Locale } from '../types/types';
 
 export const getCurrentBrowserLocale = () => window.navigator.language;
 
-export const parseDate = (date: string | null | undefined): Date | null => {
+export const parseDate = (
+    date: string | null | undefined | number,
+): Date | null => {
     if (date === null || date === undefined || date === '') {
         return null;
     }