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

package/src/contexts/ConfirmationDialogProvider.tsx

@@ -1,83 +1,75 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { createContext, useState } from 'react';
 
 import WfoConfirmationDialog from '../components/confirmationDialog/WfoConfirmationDialog';
 
-export interface ConfirmDialogActions {
-    showConfirmDialog: ShowConfirmDialogType;
-    closeConfirmDialog: (
-        e:
-            | React.KeyboardEvent<HTMLDivElement>
-            | React.MouseEvent<HTMLButtonElement, MouseEvent>
-            | React.MouseEvent<HTMLDivElement, MouseEvent>
-            | undefined,
-        confirm?: boolean,
-    ) => void;
-}
+export type ConfirmDialogHandler = (
+    e:
+        | React.KeyboardEvent<HTMLDivElement>
+        | React.MouseEvent<HTMLButtonElement, MouseEvent>
+        | undefined,
+) => void;
 
-export interface ShowConfirmDialog {
+interface ConfirmDialogState {
+    onConfirm: ConfirmDialogHandler;
     question: string;
-    confirmAction: ConfirmDialogActions['closeConfirmDialog'];
-    cancelAction?: ConfirmDialogActions['closeConfirmDialog'];
-    leavePage?: boolean;
     isError?: boolean;
+    subQuestion?: string;
+    cancelButtonText?: string;
+    confirmButtonText?: string;
 }
 
-export type ShowConfirmDialogType = ({
-    question,
-    confirmAction,
-    cancelAction,
-    leavePage,
-    isError,
-}: ShowConfirmDialog) => void;
+interface ConfirmDialogContext {
+    showConfirmDialog: (props: ConfirmDialogState) => void;
+    closeConfirmDialog: () => void;
+}
 
-export const ConfirmationDialogContext = createContext<ConfirmDialogActions>({
+export const ConfirmationDialogContext = createContext<ConfirmDialogContext>({
     showConfirmDialog: () => {},
     closeConfirmDialog: () => {},
 });
 
 export const ConfirmationDialogProvider = ConfirmationDialogContext.Provider;
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function ConfirmationDialogContextWrapper({ children }: any) {
+export function ConfirmationDialogContextWrapper({
+    children,
+}: {
+    children: ReactNode;
+}) {
     const [confirmationDialogOpen, setConfirmationDialogOpen] = useState(false);
-    const [state, setState] = useState<{
-        confirmationDialogQuestion: string;
-        confirmDialogAction: ConfirmDialogActions['closeConfirmDialog'];
-        leavePage: boolean;
-        isError: boolean;
-    }>({
-        confirmationDialogQuestion: '',
-        confirmDialogAction: () => {},
-        leavePage: false,
-        isError: false,
+    const [
+        {
+            onConfirm,
+            question,
+            isError,
+            subQuestion,
+            cancelButtonText,
+            confirmButtonText,
+        },
+        setState,
+    ] = useState<ConfirmDialogState>({
+        onConfirm: () => {},
+        question: '',
     });
 
     const closeConfirmDialog = () => setConfirmationDialogOpen(false);
 
     const showConfirmDialog = ({
+        onConfirm,
         question,
-        confirmAction,
-        cancelAction,
-        leavePage,
-        isError,
-    }: ShowConfirmDialog) => {
+        isError = false,
+        subQuestion = '',
+        cancelButtonText = '',
+        confirmButtonText = '',
+    }: ConfirmDialogState) => {
         setConfirmationDialogOpen(true);
         setState({
-            confirmationDialogQuestion: question,
-            leavePage: !!leavePage,
-            isError: !!isError,
-            confirmDialogAction: (e, cancelConfirm = false) => {
-                closeConfirmDialog();
-
-                if (!cancelConfirm) {
-                    return confirmAction(e);
-                }
-
-                if (cancelAction) {
-                    return cancelAction(e);
-                }
-            },
+            onConfirm,
+            question,
+            isError,
+            subQuestion,
+            cancelButtonText,
+            confirmButtonText,
         });
     };
 
@@ -87,11 +79,16 @@ export function ConfirmationDialogContextWrapper({ children }: any) {
         >
             <WfoConfirmationDialog
                 isOpen={confirmationDialogOpen}
-                cancel={(e) => state.confirmDialogAction(e, true)}
-                confirm={state.confirmDialogAction}
-                question={state.confirmationDialogQuestion}
-                leavePage={state.leavePage}
-                isError={state.isError}
+                onCancel={() => setConfirmationDialogOpen(false)}
+                onConfirm={(e) => {
+                    onConfirm(e);
+                    setConfirmationDialogOpen(false);
+                }}
+                question={question}
+                isError={isError}
+                subQuestion={subQuestion}
+                cancelButtonText={cancelButtonText}
+                confirmButtonText={confirmButtonText}
             />
             {children}
         </ConfirmationDialogProvider>

package/src/messages/en-GB.json

@@ -1,5 +1,8 @@
 {
     "main": {
+        "start": "Start",
+        "ariaLabelToggleSideMenu": "Show/Hide side menu",
+        "ariaLabelCurrentPage": "Current page",
         "metadata": "Metadata",
         "metadataProducts": "Products",
         "metadataProductblocks": "Product blocks",
@@ -8,7 +11,6 @@
         "metadataTasks": "Tasks",
         "mobileTitle": "Main menu",
         "settings": "Settings",
-        "start": "Start",
         "subscriptions": "Subscriptions",
         "tasks": "Tasks",
         "title": "Workflow Orchestrator",

package/src/messages/nl-NL.json

@@ -1,5 +1,8 @@
 {
     "main": {
+        "start": "Start",
+        "ariaLabelToggleSideMenu": "Toon/Verberg menu",
+        "ariaLabelCurrentPage": "Huidige pagina",
         "metadata": "Metadata",
         "metadataProducts": "Products",
         "metadataProductblocks": "Product blocks",
@@ -8,7 +11,6 @@
         "metadataTasks": "Taken",
         "mobileTitle": "Hoofdmenu",
         "settings": "Settings",
-        "start": "Start",
         "subscriptions": "Subscriptions",
         "tasks": "Taken",
         "title": "Workflow Orchestrator",

package/src/pages/processes/WfoProcessDetail.tsx

@@ -157,7 +157,7 @@ export const WfoProcessDetail = ({
                     workflowName: processDetail?.workflowName,
                 },
             ),
-            confirmAction: () => {
+            onConfirm: () => {
                 processDetail?.processId &&
                     retryProcess({ processId: processDetail.processId });
             },
@@ -171,7 +171,7 @@ export const WfoProcessDetail = ({
                     workflowName: processDetail?.workflowName,
                 },
             ),
-            confirmAction: () => {
+            onConfirm: () => {
                 processDetail?.processId &&
                     abortProcess({ processId: processDetail.processId });
                 router.push(processIsTask ? PATH_TASKS : PATH_WORKFLOWS);
@@ -183,7 +183,7 @@ export const WfoProcessDetail = ({
             question: t('deleteQuestion', {
                 workflowName: processDetail?.workflowName,
             }),
-            confirmAction: () => {
+            onConfirm: () => {
                 processDetail?.processId &&
                     deleteProcess({ processId: processDetail.processId });
                 router.push(PATH_TASKS);

package/src/pages/tasks/WfoTasksListPage.tsx

@@ -107,7 +107,7 @@ export const WfoTasksListPage = () => {
         if (await isEngineRunningNow()) {
             showConfirmDialog({
                 question: t('rerunAllQuestion'),
-                confirmAction: () => {
+                onConfirm: () => {
                     retryAllProcesses(null);
                 },
             });

package/src/rtk/api.ts

@@ -4,6 +4,7 @@ import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
 import { graphqlRequestBaseQuery } from '@rtk-query/graphql-request-base-query';
 
 import type { WfoSession } from '@/hooks';
+import { CacheTagType } from '@/types';
 
 import type { RootState } from './store';
 
@@ -13,18 +14,6 @@ export enum BaseQueryTypes {
     custom = 'custom',
 }
 
-export enum CacheTags {
-    engineStatus = 'engineStatus',
-    cacheNames = 'cacheNames',
-    processes = 'processes',
-    processListSummary = 'processListSummary',
-    subscription = 'subscription',
-    subscriptionList = 'subscriptionList',
-    backendTranslations = 'backendTranslations',
-    processStatusCounts = 'processStatusCounts',
-    subscriptionActions = 'subscriptionActions',
-}
-
 export enum HttpStatus {
     FormNotComplete = 510,
     BadGateway = 502,
@@ -106,14 +95,9 @@ export const orchestratorApi = createApi({
     },
     endpoints: () => ({}),
     tagTypes: [
-        CacheTags.engineStatus,
-        CacheTags.cacheNames,
-        CacheTags.processes,
-        CacheTags.processListSummary,
-        CacheTags.subscriptionList,
-        CacheTags.subscription,
-        CacheTags.backendTranslations,
-        CacheTags.processStatusCounts,
-        CacheTags.subscriptionActions,
+        CacheTagType.engineStatus,
+        CacheTagType.processes,
+        CacheTagType.processStatusCounts,
+        CacheTagType.subscriptions,
     ],
 });

package/src/rtk/endpoints/processDetail.ts

@@ -8,12 +8,14 @@ import {
     PROCESS_ABORT_ENDPOINT,
     PROCESS_RESUME_ENDPOINT,
 } from '@/configuration';
-import { BaseQueryTypes, CacheTags, orchestratorApi } from '@/rtk';
+import { BaseQueryTypes, orchestratorApi } from '@/rtk';
 import {
+    CacheTagType,
     ProcessDetail,
     ProcessDetailResultRaw,
     ProcessesDetailResult,
 } from '@/types';
+import { getCacheTag } from '@/utils/cacheTag';
 
 export const processDetailQuery = `query ProcessDetail($processId: String!) {
         processes(filterBy: { value: $processId, field: "processId" }) {
@@ -88,12 +90,10 @@ const processDetailApi = orchestratorApi.injectEndpoints({
             },
             providesTags: (result, error, queryArguments) => {
                 if (!error && result) {
-                    return [
-                        {
-                            type: CacheTags.processes,
-                            id: queryArguments.processId,
-                        },
-                    ];
+                    return getCacheTag(
+                        CacheTagType.processes,
+                        queryArguments.processId,
+                    );
                 }
                 return [];
             },
@@ -122,7 +122,7 @@ const processDetailApi = orchestratorApi.injectEndpoints({
             extraOptions: {
                 baseQueryType: BaseQueryTypes.fetch,
             },
-            invalidatesTags: [CacheTags.processes],
+            invalidatesTags: getCacheTag(CacheTagType.processes),
         }),
         retryProcess: builder.mutation<void, { processId: string }>({
             query: ({ processId }) => ({
@@ -137,7 +137,7 @@ const processDetailApi = orchestratorApi.injectEndpoints({
             extraOptions: {
                 baseQueryType: BaseQueryTypes.fetch,
             },
-            invalidatesTags: [CacheTags.processes],
+            invalidatesTags: getCacheTag(CacheTagType.processes),
         }),
         deleteProcess: builder.mutation<void, { processId: string }>({
             query: ({ processId }) => ({
@@ -148,7 +148,7 @@ const processDetailApi = orchestratorApi.injectEndpoints({
             extraOptions: {
                 baseQueryType: BaseQueryTypes.fetch,
             },
-            invalidatesTags: [CacheTags.processes],
+            invalidatesTags: getCacheTag(CacheTagType.processes),
         }),
         abortProcess: builder.mutation<void, { processId: string }>({
             query: ({ processId }) => ({
@@ -159,7 +159,7 @@ const processDetailApi = orchestratorApi.injectEndpoints({
             extraOptions: {
                 baseQueryType: BaseQueryTypes.fetch,
             },
-            invalidatesTags: [CacheTags.processes],
+            invalidatesTags: getCacheTag(CacheTagType.processes),
         }),
     }),
 });

package/src/rtk/endpoints/processList.ts

@@ -1,11 +1,14 @@
 import {
     BaseGraphQlResult,
+    CACHETAG_TYPE_LIST,
+    CacheTagType,
     GraphqlQueryVariables,
     Process,
     ProcessListResult,
 } from '@/types';
+import { getCacheTag } from '@/utils/cacheTag';
 
-import { CacheTags, orchestratorApi } from '../api';
+import { orchestratorApi } from '../api';
 
 export const processListQuery = `
     query ProcessList(
@@ -82,7 +85,10 @@ const processApi = orchestratorApi.injectEndpoints({
                     pageInfo: response.processes?.pageInfo || {},
                 };
             },
-            providesTags: [CacheTags.processes],
+            providesTags: getCacheTag(
+                CacheTagType.processes,
+                CACHETAG_TYPE_LIST,
+            ),
         }),
     }),
 });

package/src/rtk/endpoints/processListSummary.ts

@@ -1,11 +1,12 @@
+import { orchestratorApi } from '@/rtk';
 import {
     BaseGraphQlResult,
     GraphqlQueryVariables,
     Process,
     ProcessListResult,
 } from '@/types';
-
-import { CacheTags, orchestratorApi } from '../api';
+import { CACHETAG_TYPE_LIST, CacheTagType } from '@/types';
+import { getCacheTag } from '@/utils/cacheTag';
 
 export const processListSummaryQuery = `
     query ProcessListSummary(
@@ -65,7 +66,10 @@ const processApi = orchestratorApi.injectEndpoints({
                     pageInfo: response.processes?.pageInfo || {},
                 };
             },
-            providesTags: [CacheTags.processListSummary],
+            providesTags: getCacheTag(
+                CacheTagType.processes,
+                CACHETAG_TYPE_LIST,
+            ),
         }),
     }),
 });

package/src/rtk/endpoints/processStatusCounts.ts

@@ -1,6 +1,7 @@
 import { PROCESS_STATUS_COUNTS_ENDPOINT } from '@/configuration';
-import { BaseQueryTypes, CacheTags, orchestratorApi } from '@/rtk';
-import { ProcessStatus } from '@/types';
+import { BaseQueryTypes, orchestratorApi } from '@/rtk';
+import { CacheTagType, ProcessStatus } from '@/types';
+import { getCacheTag } from '@/utils/cacheTag';
 
 export type ProcessStatusCounts = {
     process_counts: Record<ProcessStatus, number>;
@@ -20,7 +21,7 @@ const processStatusApi = orchestratorApi.injectEndpoints({
             extraOptions: {
                 baseQueryType: BaseQueryTypes.fetch,
             },
-            providesTags: [CacheTags.processStatusCounts],
+            providesTags: getCacheTag(CacheTagType.processStatusCounts),
         }),
     }),
 });

package/src/rtk/endpoints/settings.ts

@@ -4,8 +4,9 @@ import {
     SETTINGS_SEARCH_INDEX_RESET_ENDPOINT,
     SETTINGS_STATUS_ENDPOINT,
 } from '@/configuration';
-import { BaseQueryTypes, CacheTags, orchestratorApi } from '@/rtk';
-import { CacheNames, EngineStatus } from '@/types';
+import { BaseQueryTypes, orchestratorApi } from '@/rtk';
+import { CacheNames, CacheTagType, EngineStatus } from '@/types';
+import { getCacheTag } from '@/utils/cacheTag';
 
 interface EngineStatusReturnValue {
     engineStatus: EngineStatus;
@@ -40,14 +41,13 @@ const statusApi = orchestratorApi.injectEndpoints({
                     runningProcesses: data?.running_processes || 0,
                 };
             },
-            providesTags: [CacheTags.engineStatus],
+            providesTags: getCacheTag(CacheTagType.engineStatus),
         }),
         getCacheNames: build.query<CacheNames, void>({
             query: () => SETTINGS_CACHE_NAMES_ENDPOINT,
             extraOptions: {
                 baseQueryType: BaseQueryTypes.fetch,
             },
-            providesTags: [CacheTags.cacheNames],
         }),
         clearCache: build.mutation<void, string>({
             query: (settingName) => ({
@@ -81,7 +81,7 @@ const statusApi = orchestratorApi.injectEndpoints({
             extraOptions: {
                 baseQueryType: BaseQueryTypes.fetch,
             },
-            invalidatesTags: [CacheTags.engineStatus],
+            invalidatesTags: getCacheTag(CacheTagType.engineStatus),
         }),
     }),
 });

package/src/rtk/endpoints/streamMessages.ts

@@ -5,9 +5,10 @@ import type { WfoSession } from '@/hooks';
 import { addToastMessage } from '@/rtk/slices/toastMessages';
 import type { RootState } from '@/rtk/store';
 import { ToastTypes } from '@/types';
+import { CacheTag, CacheTagType } from '@/types';
 import { getToastMessage } from '@/utils/getToastMessage';
 
-import { CacheTags, orchestratorApi } from '../api';
+import { orchestratorApi } from '../api';
 
 const getWebSocket = async (url: string) => {
     const session = (await getSession()) as WfoSession;
@@ -24,11 +25,9 @@ const DEBOUNCE_CLOSE_INTERVAL_MS = 60000;
 
 type WebSocketMessage = {
     name: MessageTypes;
-    value: string[] | string;
+    value: CacheTag;
 };
 
-type CacheInvalidationTag = CacheTags | { type: CacheTags; id: string };
-
 enum MessageTypes {
     invalidateCache = 'invalidateCache',
 }
@@ -68,53 +67,18 @@ const streamMessagesApi = orchestratorApi.injectEndpoints({
                     updateCachedData(() => false);
                 };
 
-                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 invalidateTag = (cacheTag: CacheTag) => {
+                    if (validCacheTags.includes(cacheTag.type)) {
                         const cacheInvalidationAction =
-                            orchestratorApi.util.invalidateTags(cacheTags);
+                            orchestratorApi.util.invalidateTags([cacheTag]);
                         dispatch(cacheInvalidationAction);
                     } else {
                         console.error(
-                            `Trying to invalidate a cache entry with an unknown tag: ${cacheTag}`,
+                            `Trying to invalidate a cache entry with an unknown tag: ${cacheTag.type}`,
                         );
                     }
                 };
 
-                const handleInvalidateCacheMessage = (
-                    message: WebSocketMessage,
-                ) => {
-                    if (message.name === MessageTypes.invalidateCache) {
-                        const messageValue = message.value;
-
-                        if (typeof messageValue === 'string') {
-                            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',
-                                messageValue,
-                            );
-                        }
-                    }
-                };
-
                 // Send a ping message every to the websocket server to keep the connection alive
                 const pingInterval = setInterval(() => {
                     webSocket.send('__ping__');
@@ -130,7 +94,7 @@ const streamMessagesApi = orchestratorApi.injectEndpoints({
 
                 const state = getState() as RootState;
                 const { orchestratorWebsocketUrl } = state.orchestratorConfig;
-                const validCacheTags = Object.values(CacheTags);
+                const validCacheTags = Object.values(CacheTagType);
 
                 // Starts the websocket
                 const webSocket = await getWebSocket(orchestratorWebsocketUrl);
@@ -151,7 +115,11 @@ const streamMessagesApi = orchestratorApi.injectEndpoints({
                             return;
                         }
                         const message = JSON.parse(data) as WebSocketMessage;
-                        handleInvalidateCacheMessage(message);
+                        if (message.name === MessageTypes.invalidateCache) {
+                            invalidateTag(message.value);
+                        } else {
+                            console.error('Unknown message type', message);
+                        }
                     },
                 );
 

package/src/rtk/endpoints/subscriptionActions.ts

@@ -1,5 +1,5 @@
 import { SUBSCRIPTION_ACTIONS_ENDPOINT } from '@/configuration';
-import { BaseQueryTypes, CacheTags, orchestratorApi } from '@/rtk';
+import { BaseQueryTypes, orchestratorApi } from '@/rtk';
 import { SubscriptionActions } from '@/types';
 
 const subscriptionActionsApi = orchestratorApi.injectEndpoints({
@@ -13,7 +13,6 @@ const subscriptionActionsApi = orchestratorApi.injectEndpoints({
             extraOptions: {
                 baseQueryType: BaseQueryTypes.fetch,
             },
-            providesTags: [CacheTags.subscriptionActions],
         }),
     }),
 });

package/src/rtk/endpoints/subscriptionDetail.ts

@@ -1,9 +1,11 @@
-import { CacheTags, orchestratorApi } from '@/rtk';
+import { orchestratorApi } from '@/rtk';
+import { CacheTagType } from '@/types';
 import {
     BaseGraphQlResult,
     SubscriptionDetail,
     SubscriptionDetailResult,
 } from '@/types';
+import { getCacheTag } from '@/utils/cacheTag';
 
 export const subscriptionDetailQuery = `
     query SubscriptionDetail($subscriptionId: String!) {
@@ -93,12 +95,15 @@ const subscriptionDetailApi = orchestratorApi.injectEndpoints({
                     pageInfo,
                 };
             },
-            providesTags: (result, error, arg) => [
-                {
-                    type: CacheTags.subscription,
-                    id: arg.subscriptionId,
-                },
-            ],
+            providesTags: (result, error, queryArguments) => {
+                if (!error && result) {
+                    return getCacheTag(
+                        CacheTagType.subscriptions,
+                        queryArguments.subscriptionId,
+                    );
+                }
+                return [];
+            },
         }),
     }),
 });

package/src/rtk/endpoints/subscriptionInUseByRelationsList.ts

@@ -1,10 +1,12 @@
 import { NUMBER_OF_ITEMS_REPRESENTING_ALL_ITEMS } from '@/configuration';
-import { CacheTags, orchestratorApi } from '@/rtk';
+import { orchestratorApi } from '@/rtk';
+import { CacheTagType } from '@/types';
 import {
     InUseByRelationDetail,
     InUseByRelationsDetailResult,
     SubscriptionStatus,
 } from '@/types';
+import { getCacheTag } from '@/utils/cacheTag';
 
 const nonTerminalSubscriptionStatuses = [
     SubscriptionStatus.INITIAL,
@@ -58,7 +60,7 @@ const subscriptionInUseByRelationsListApi = orchestratorApi.injectEndpoints({
                     inUseByRelationDetails: subscriptions,
                 };
             },
-            providesTags: [CacheTags.subscriptionList],
+            providesTags: getCacheTag(CacheTagType.subscriptions),
         }),
     }),
 });

package/src/rtk/endpoints/subscriptionList.ts

@@ -1,11 +1,13 @@
 import { SubscriptionListItem } from '@/components/WfoSubscriptionsList';
-import { CacheTags, orchestratorApi } from '@/rtk';
+import { orchestratorApi } from '@/rtk';
 import {
     BaseGraphQlResult,
+    CacheTagType,
     GraphqlQueryVariables,
     Subscription,
     SubscriptionsResult,
 } from '@/types';
+import { getCacheTag } from '@/utils/cacheTag';
 
 export const subscriptionListQuery = `query SubscriptionsList(
         $first: Int!
@@ -78,7 +80,7 @@ const subscriptionListApi = orchestratorApi.injectEndpoints({
                     pageInfo,
                 };
             },
-            providesTags: [CacheTags.subscriptionList],
+            providesTags: getCacheTag(CacheTagType.subscriptions),
         }),
     }),
 });