@orchestrator-ui/orchestrator-ui-components 8.1.1 → 8.2.0

package/package.json

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

package/src/components/WfoDiff/WfoDiff.tsx

@@ -14,6 +14,7 @@ import { EuiButtonIcon, EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiText } from '@e
 
 import { getWfoDiffStyles } from '@/components/WfoDiff/styles';
 import { useWithOrchestratorTheme } from '@/hooks';
+import { ProcessDetailResultRaw } from '@/types';
 
 const EMPTY_HUNKS: never[] = [];
 
@@ -31,6 +32,20 @@ interface WfoDiffProps {
   syntax?: 'javascript' | 'python';
 }
 
+export const stringifyDiffText = (text?: unknown) => (text ? JSON.stringify(text, null, 2) : '');
+
+export const getSubscriptionDiffTexts = (data?: ProcessDetailResultRaw) => {
+  const subscriptionId = data?.current_state?.subscription?.subscription_id ?? '';
+  const newSubscription = data?.current_state?.subscription ?? null;
+  const oldSubscriptions = data?.current_state?.__old_subscriptions__ || {};
+  const oldSubscription =
+    subscriptionId && subscriptionId in oldSubscriptions ? oldSubscriptions[subscriptionId] : null;
+  return {
+    oldText: stringifyDiffText(oldSubscription),
+    newText: stringifyDiffText(newSubscription),
+  };
+};
+
 const WfoDiff: FC<WfoDiffProps> = ({ oldText, newText, syntax }) => {
   const t = useTranslations('processes.delta');
   const [showSplit, setShowSplit] = useState(true);

package/src/components/WfoProcessList/WfoProcessListDeltaPopover.tsx

@@ -0,0 +1,71 @@
+import React, { FC, useState } from 'react';
+
+import { useTranslations } from 'next-intl';
+
+import { EuiButtonIcon, EuiLoadingSpinner, EuiPanel, EuiPopover } from '@elastic/eui';
+
+import { ProcessListItem, WfoToolTip } from '@/components';
+import WfoDiff, { getSubscriptionDiffTexts } from '@/components/WfoDiff/WfoDiff';
+import { useOrchestratorTheme, useWithOrchestratorTheme } from '@/hooks';
+import { WfoCode } from '@/icons';
+import { useGetRawProcessDetailQuery } from '@/rtk/endpoints/processDetail';
+import { WorkflowTarget } from '@/types';
+
+import { getWfoProcessListDeltaPopoverStyles } from './styles';
+
+interface WfoProcessListDeltaPopoverProps {
+  processListItem: ProcessListItem;
+}
+
+export const WfoProcessListDeltaPopover: FC<WfoProcessListDeltaPopoverProps> = ({ processListItem }) => {
+  const { theme } = useOrchestratorTheme();
+  const { popoverPanelStyle, deltaContentPanelStyle, loadingSpinnerStyle } = useWithOrchestratorTheme(
+    getWfoProcessListDeltaPopoverStyles,
+  );
+  const t = useTranslations('processes.steps');
+  const [isPopoverOpen, setPopoverOpen] = useState(false);
+  const { processId, workflowTarget } = processListItem;
+
+  const { data, isFetching } = useGetRawProcessDetailQuery({ processId }, { skip: !isPopoverOpen });
+
+  if (workflowTarget.toUpperCase() !== WorkflowTarget.MODIFY.toUpperCase()) {
+    return null;
+  }
+
+  const { oldText, newText } = getSubscriptionDiffTexts(data);
+
+  const iconButton = (
+    <EuiButtonIcon
+      iconType={() => <WfoCode color={theme.colors.primary} />}
+      onClick={() => setPopoverOpen(!isPopoverOpen)}
+      aria-label={t('showDelta')}
+      isLoading={isFetching}
+    />
+  );
+
+  const button = isPopoverOpen ? iconButton : <WfoToolTip tooltipContent={t('showDelta')}>{iconButton}</WfoToolTip>;
+
+  const SubscriptionDeltaContent = () => <WfoDiff oldText={oldText} newText={newText} syntax="javascript" />;
+
+  return (
+    <EuiPopover
+      id={`delta-${processId}`}
+      button={button}
+      isOpen={isPopoverOpen}
+      closePopover={() => setPopoverOpen((isPopoverOpen) => !isPopoverOpen)}
+      panelPaddingSize="s"
+      hasArrow
+      ownFocus
+      repositionOnScroll
+      panelStyle={popoverPanelStyle}
+    >
+      <EuiPanel color="transparent" paddingSize="s" css={deltaContentPanelStyle}>
+        {isFetching ?
+          <div css={loadingSpinnerStyle}>
+            <EuiLoadingSpinner size="xl" />
+          </div>
+        : <SubscriptionDeltaContent />}
+      </EuiPanel>
+    </EuiPopover>
+  );
+};

package/src/components/WfoProcessList/WfoProcessesList.tsx

@@ -36,6 +36,7 @@ import { parseDateToLocaleDateTimeString } from '@/utils';
 import { getQueryVariablesForExport } from '@/utils';
 import { csvDownloadHandler, getCsvFileNameWithDate } from '@/utils/csvDownload';
 
+import { WfoProcessListDeltaPopover } from './WfoProcessListDeltaPopover';
 import {
   graphQlProcessFilterMapper,
   graphQlProcessSortMapper,
@@ -96,6 +97,11 @@ export const WfoProcessesList = ({
   const router = useRouter();
 
   const defaultTableColumns: WfoAdvancedTableColumnConfig<ProcessListItem> = {
+    delta: {
+      columnType: ColumnType.CONTROL,
+      width: '50px',
+      renderControl: (row) => <WfoProcessListDeltaPopover processListItem={row} />,
+    },
     workflowName: {
       columnType: ColumnType.DATA,
       label: t('workflowName'),

package/src/components/WfoProcessList/styles.ts

@@ -0,0 +1,28 @@
+import { css } from '@emotion/react';
+
+import { WfoThemeHelpers } from '@/hooks';
+
+export const getWfoProcessListDeltaPopoverStyles = ({ theme }: WfoThemeHelpers) => {
+  const popoverPanelStyle = {
+    backgroundColor: `${theme.colors.backgroundBasePlain}DD`,
+    boxShadow: 'none',
+    backdropFilter: 'blur(2px)',
+  };
+
+  const deltaContentPanelStyle = css({
+    backgroundColor: 'transparent',
+    width: '1300px',
+    height: '500px',
+    overflow: 'auto',
+  });
+
+  const loadingSpinnerStyle = css({
+    padding: theme.size.m,
+  });
+
+  return {
+    popoverPanelStyle,
+    deltaContentPanelStyle,
+    loadingSpinnerStyle,
+  };
+};

package/src/components/WfoPydanticForm/fields/WfoCallout.tsx

@@ -4,7 +4,8 @@ import { PydanticFormElementProps } from 'pydantic-forms';
 
 import { EuiCallOut } from '@elastic/eui';
 
-const CALLOUT_COLORS = ['primary', 'success', 'warning', 'danger', 'accent'];
+export const CALLOUT_COLORS = ['primary', 'success', 'warning', 'danger', 'accent'] as const;
+export type CalloutColor = (typeof CALLOUT_COLORS)[number];
 
 export const WfoCallout = ({ pydanticFormField }: PydanticFormElementProps) => {
   const { header, message, icon_type, message_type } = pydanticFormField.default;

package/src/components/WfoPydanticForm/fields/WfoMarkdownField.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import { PydanticFormElementProps } from 'pydantic-forms';
+
+import { EuiCallOut, EuiMarkdownFormat } from '@elastic/eui';
+
+import { CALLOUT_COLORS, CalloutColor } from './WfoCallout';
+
+type MarkdownFieldDefault = string | { content: string; color: CalloutColor };
+
+export const WfoMarkdownField = ({ pydanticFormField }: PydanticFormElementProps) => {
+  const markdownValue: MarkdownFieldDefault = pydanticFormField.default;
+  const content = typeof markdownValue === 'string' ? markdownValue : (markdownValue?.content ?? '');
+  const color =
+    typeof markdownValue === 'object' && CALLOUT_COLORS.includes(markdownValue?.color) ?
+      markdownValue?.color
+    : undefined;
+
+  return (
+    <div data-testid={pydanticFormField.id} css={{ marginBottom: '2rem' }}>
+      <EuiCallOut color={color}>
+        <EuiMarkdownFormat>{content}</EuiMarkdownFormat>
+      </EuiCallOut>
+    </div>
+  );
+};

package/src/components/WfoPydanticForm/fields/index.ts

@@ -13,4 +13,5 @@ export * from './WfoReactSelect';
 export * from './WfoMultiCheckboxField';
 export * from './wfoPydanticFormUtils';
 export * from './WfoCallout';
+export * from './WfoMarkdownField';
 export * from './WfoTimestampField';

package/src/components/WfoSubscription/WfoSubscriptionActions/WfoSubscriptionActions.tsx

@@ -3,11 +3,11 @@ import React, { FC, useState } from 'react';
 import { useTranslations } from 'next-intl';
 import { useRouter } from 'next/router';
 
-import { EuiButton, EuiButtonIcon, EuiTitle } from '@elastic/eui';
+import { EuiButton, EuiButtonIcon, EuiLoadingSpinner, EuiTitle } from '@elastic/eui';
 
-import { WfoPopover } from '@/components';
-import { PATH_START_NEW_TASK, PATH_START_NEW_WORKFLOW, WfoInSyncField } from '@/components';
+import { PATH_START_NEW_TASK, PATH_START_NEW_WORKFLOW, WfoInSyncField, WfoPopover } from '@/components';
 import { WfoSubscriptionActionsMenuItem } from '@/components/WfoSubscription/WfoSubscriptionActions/WfoSubscriptionActionsMenuItem';
+import { useActiveProcess } from '@/components/WfoSubscription/WfoSubscriptionActions/utils';
 import { PolicyResource } from '@/configuration/policy-resources';
 import { useOrchestratorTheme, usePolicy } from '@/hooks';
 import { WfoDotsHorizontal } from '@/icons/WfoDotsHorizontal';
@@ -39,20 +39,24 @@ export const WfoSubscriptionActions: FC<WfoSubscriptionActionsProps> = ({
   const [isPopoverOpen, setPopover] = useState<boolean>(false);
   const router = useRouter();
   const disableQuery = isLoading || (!isPopoverOpen && compactMode);
+  const { isAllowed } = usePolicy();
   const { data: subscriptionActions, isLoading: subscriptionActionsIsLoading } = useGetSubscriptionActionsQuery(
     { subscriptionId },
     { skip: disableQuery },
   );
   const [startProcess] = useStartProcessMutation();
 
-  const { data: subscriptionDetail } = useGetSubscriptionDetailQuery(
+  const { data: subscriptionDetail, isLoading: subscriptionDetailIsLoading } = useGetSubscriptionDetailQuery(
     {
       subscriptionId,
     },
-    { skip: !isPopoverOpen && compactMode },
+    { skip: !isPopoverOpen && compactMode, refetchOnMountOrArgChange: true },
   );
 
-  const { isAllowed } = usePolicy();
+  const processes = subscriptionDetail?.subscription?.processes?.page;
+  const { hasActiveProcess, isCompleted, setProcessId } = useActiveProcess(processes);
+
+  const buttonIsLoading = isCompleted ? !isCompleted : hasActiveProcess;
 
   const onButtonClick = () => setPopover(!isPopoverOpen);
   const closePopover = () => setPopover(false);
@@ -60,7 +64,9 @@ export const WfoSubscriptionActions: FC<WfoSubscriptionActionsProps> = ({
   const button =
     compactMode ?
       <EuiButtonIcon
-        iconType={() => <WfoDotsHorizontal color={theme.colors.textDisabled} />}
+        iconType={() =>
+          buttonIsLoading ? <EuiLoadingSpinner /> : <WfoDotsHorizontal color={theme.colors.textDisabled} />
+        }
         onClick={onButtonClick}
         aria-label="Row context menu"
         isLoading={isLoading}
@@ -94,6 +100,11 @@ export const WfoSubscriptionActions: FC<WfoSubscriptionActionsProps> = ({
       ],
     })
       .unwrap()
+      .then((response) => {
+        if (response?.id) {
+          setProcessId(response.id);
+        }
+      })
       .catch((error) => {
         console.error(`Failed to start action:`, error);
       })
@@ -122,6 +133,7 @@ export const WfoSubscriptionActions: FC<WfoSubscriptionActionsProps> = ({
               target={WorkflowTarget.VALIDATE}
               setPopover={setPopover}
               onClick={() => handleActionClick(subscriptionAction.name, compactMode, true)}
+              isLoading={buttonIsLoading}
             />
           ))}
         </>
@@ -133,10 +145,15 @@ export const WfoSubscriptionActions: FC<WfoSubscriptionActionsProps> = ({
           {subscriptionActions?.reconcile.map((subscriptionAction, index) => (
             <WfoSubscriptionActionsMenuItem
               key={`r_${index}`}
-              subscriptionAction={subscriptionAction}
+              subscriptionAction={
+                buttonIsLoading && !subscriptionAction.reason ?
+                  { ...subscriptionAction, reason: 'subscription.running_process' }
+                : subscriptionAction
+              }
               target={WorkflowTarget.RECONCILE}
               setPopover={setPopover}
               onClick={() => handleActionClick(subscriptionAction.name, compactMode, false)}
+              isLoading={buttonIsLoading}
             />
           ))}
         </>
@@ -197,7 +214,7 @@ export const WfoSubscriptionActions: FC<WfoSubscriptionActionsProps> = ({
   return (
     <WfoPopover
       id={'subscriptionActionPopover'}
-      isLoading={subscriptionActionsIsLoading || isLoading || false}
+      isLoading={subscriptionActionsIsLoading || (compactMode && subscriptionDetailIsLoading) || isLoading || false}
       button={button}
       PopoverContent={MenuItemsList}
       isPopoverOpen={isPopoverOpen}

package/src/components/WfoSubscription/WfoSubscriptionActions/WfoSubscriptionActionsMenuItem.tsx

@@ -2,7 +2,7 @@ import React, { FC } from 'react';
 
 import { useTranslations } from 'next-intl';
 
-import { EuiContextMenuItem, EuiToolTip } from '@elastic/eui';
+import { EuiContextMenuItem, EuiLoadingSpinner, EuiToolTip } from '@elastic/eui';
 
 import { flattenArrayProps } from '@/components';
 import { WfoSubscriptionActionExpandableMenuItem } from '@/components/WfoSubscription/WfoSubscriptionActions/WfoSubscriptionActionExpandableMenuItem';
@@ -18,6 +18,7 @@ interface MenuItemProps {
   target: WorkflowTarget;
   setPopover: (isOpen: boolean) => void;
   onClick: () => void;
+  isLoading?: boolean;
 }
 
 export const WfoSubscriptionActionsMenuItem: FC<MenuItemProps> = ({
@@ -25,6 +26,7 @@ export const WfoSubscriptionActionsMenuItem: FC<MenuItemProps> = ({
   onClick,
   target,
   setPopover,
+  isLoading = false,
 }) => {
   const { linkMenuItemStyle, tooltipMenuItemStyle, disabledIconStyle, iconStyle, secondaryIconStyle } =
     useWithOrchestratorTheme(getSubscriptionActionStyles);
@@ -32,6 +34,10 @@ export const WfoSubscriptionActionsMenuItem: FC<MenuItemProps> = ({
   const { isEngineRunningNow } = useCheckEngineStatus();
   const t = useTranslations('subscriptions.detail.actions');
   const { theme } = useOrchestratorTheme();
+  const subscriptionActionReason =
+    subscriptionAction.reason ? subscriptionAction.reason
+    : isLoading ? 'subscription.running_process'
+    : undefined;
 
   const linkIt = (actionItem: React.ReactNode) => {
     const handleLinkClick = async (e: React.MouseEvent) => {
@@ -51,8 +57,8 @@ export const WfoSubscriptionActionsMenuItem: FC<MenuItemProps> = ({
   };
 
   const tooltipIt = (actionItem: React.ReactNode) => {
-    if (!subscriptionAction.reason) return actionItem;
-    const tooltipContent = t(subscriptionAction.reason, flattenArrayProps(subscriptionAction));
+    if (!subscriptionActionReason) return actionItem;
+    const tooltipContent = t(subscriptionActionReason, flattenArrayProps(subscriptionAction));
 
     return (
       <div css={tooltipMenuItemStyle}>
@@ -68,22 +74,24 @@ export const WfoSubscriptionActionsMenuItem: FC<MenuItemProps> = ({
     );
   };
 
-  const getIcon = () =>
-    subscriptionAction.reason ?
-      <div css={disabledIconStyle}>
-        <WfoTargetTypeIcon target={target} disabled />
-        <div css={secondaryIconStyle}>
-          <WfoXCircleFill width={20} height={20} color={theme.colors.danger} />
+  const getIcon = () => {
+    if (isLoading) return <EuiLoadingSpinner size="m" />;
+    return subscriptionActionReason ?
+        <div css={disabledIconStyle}>
+          <WfoTargetTypeIcon target={target} disabled />
+          <div css={secondaryIconStyle}>
+            <WfoXCircleFill width={20} height={20} color={theme.colors.danger} />
+          </div>
         </div>
-      </div>
-    : <div css={iconStyle}>
-        <WfoTargetTypeIcon target={target} />
-      </div>;
+      : <div css={iconStyle}>
+          <WfoTargetTypeIcon target={target} />
+        </div>;
+  };
 
   const ActionItem = () => (
     <EuiContextMenuItem
       icon={getIcon()}
-      disabled={!!subscriptionAction.reason}
+      disabled={!!subscriptionActionReason}
       css={{
         whiteSpace: 'nowrap',
       }}
@@ -92,5 +100,5 @@ export const WfoSubscriptionActionsMenuItem: FC<MenuItemProps> = ({
     </EuiContextMenuItem>
   );
 
-  return subscriptionAction?.reason ? tooltipIt(<ActionItem />) : linkIt(<ActionItem />);
+  return subscriptionActionReason ? tooltipIt(<ActionItem />) : linkIt(<ActionItem />);
 };

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

@@ -0,0 +1,27 @@
+import { useEffect, useState } from 'react';
+
+import { useGetProcessDetailQuery } from '@/rtk';
+import { ProcessStatus, StepStatus, SubscriptionDetailProcess } from '@/types';
+
+export const useActiveProcess = (processes: SubscriptionDetailProcess[] | undefined) => {
+  const lastProcess = processes?.[processes.length - 1];
+  const isLastProcessRunning = lastProcess?.lastStatus.toLowerCase() === ProcessStatus.RUNNING;
+
+  const [processId, setProcessId] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (isLastProcessRunning) {
+      setProcessId(lastProcess.processId);
+    }
+  }, [lastProcess, isLastProcessRunning]);
+
+  const { data: activeProcessData } = useGetProcessDetailQuery({ processId: processId ?? '' }, { skip: !processId });
+
+  const processDetail = activeProcessData?.processes[0];
+  const lastStatus = processDetail?.lastStatus.toLowerCase() as ProcessStatus;
+  const hasActiveProcess = lastStatus === ProcessStatus.RUNNING || isLastProcessRunning;
+  const lastState = processDetail?.steps?.[processDetail.steps.length - 1]?.status;
+  const isCompleted = lastState !== undefined && [StepStatus.COMPLETE, StepStatus.SUCCESS].includes(lastState);
+
+  return { hasActiveProcess, isCompleted, setProcessId };
+};

package/src/components/WfoWorkflowSteps/WfoWorkflowStepList/WfoWorkflowStepList.tsx

@@ -3,7 +3,7 @@ import React, { Ref, useEffect, useState } from 'react';
 import { useTranslations } from 'next-intl';
 
 import { WfoJsonCodeBlock, WfoLoading, WfoStepList, WfoStepListHeader, WfoStepListRef } from '@/components';
-import WfoDiff from '@/components/WfoDiff/WfoDiff';
+import WfoDiff, { getSubscriptionDiffTexts } from '@/components/WfoDiff/WfoDiff';
 import { WfoTraceback } from '@/components/WfoWorkflowSteps/WfoTraceback/WfoTraceback';
 import { useGetRawProcessDetailQuery } from '@/rtk/endpoints/processDetail';
 import { ProcessStatus, Step, StepStatus } from '@/types';
@@ -33,20 +33,9 @@ export const WfoProcessRawData = ({ processId }: { processId: string }) => {
 
 export const WfoProcessSubscriptionDelta = ({ processId }: { processId: string }) => {
   const { data, isFetching } = useGetRawProcessDetailQuery({ processId });
+  const { oldText, newText } = getSubscriptionDiffTexts(data);
 
-  const subscriptionId = data?.current_state?.subscription?.subscription_id ?? '';
-  const newText = data?.current_state?.subscription ?? null;
-  const oldSubscriptions = data?.current_state?.__old_subscriptions__ || {};
-  const oldSubscription = subscriptionId in oldSubscriptions ? oldSubscriptions[subscriptionId] : null;
-  const oldText = oldSubscription || null;
-
-  return isFetching ?
-      <WfoLoading />
-    : <WfoDiff
-        oldText={oldText ? JSON.stringify(oldText, null, 2) : ''}
-        newText={newText ? JSON.stringify(newText, null, 2) : ''}
-        syntax="javascript"
-      />;
+  return isFetching ? <WfoLoading /> : <WfoDiff oldText={oldText} newText={newText} syntax="javascript" />;
 };
 
 export const WfoWorkflowStepList = React.forwardRef(

package/src/configuration/version.ts

@@ -1 +1 @@
-export const ORCHESTRATOR_UI_LIBRARY_VERSION = '8.1.1';
+export const ORCHESTRATOR_UI_LIBRARY_VERSION = '8.2.0';

package/src/hooks/useGetPydanticFormsConfig.tsx

@@ -21,11 +21,13 @@ import { Header } from '@/components/WfoPydanticForm/Header';
 import { Row } from '@/components/WfoPydanticForm/Row';
 import {
   WfoArrayField,
+  WfoCallout,
   WfoCheckbox,
   WfoDivider,
   WfoDropdown,
   WfoInteger,
   WfoLabel,
+  WfoMarkdownField,
   WfoMultiCheckboxField,
   WfoObjectField,
   WfoRadio,
@@ -34,7 +36,6 @@ import {
   WfoTextArea,
   WfoTimestampField,
 } from '@/components/WfoPydanticForm/fields';
-import { WfoCallout } from '@/components/WfoPydanticForm/fields';
 import { useAppSelector } from '@/rtk/hooks';
 
 const useGetComponentMatcherExtender = (): ComponentMatcherExtender => {
@@ -180,6 +181,16 @@ const useGetComponentMatcherExtender = (): ComponentMatcherExtender => {
             return type === PydanticFormFieldType.STRING && format === ('callout' as PydanticFormFieldFormat);
           },
         },
+        {
+          id: 'markdownField',
+          ElementMatch: {
+            isControlledElement: false,
+            Element: WfoMarkdownField,
+          },
+          matcher: ({ format }) => {
+            return format === PydanticFormFieldFormat.MARKDOWN;
+          },
+        },
         ...currentMatchers
           .filter((matcher) => matcher.id !== 'text')
           .filter((matcher) => matcher.id !== 'array')

package/src/messages/en-GB.json

@@ -365,7 +365,8 @@
           "not_in_sync": "This subscription can not be modified because it is not in-sync. This means there is some error in the registration of the subscription or that it is being modified by another workflow.",
           "relations_not_in_sync": "This subscription can not be modified because some related subscriptions are not in-sync. Locked subscriptions: {locked_relations}",
           "no_modify_subscription_in_use_by_others": "This subscription can not be modified because it is in use by one or more other subscriptions: {unterminated_parents}",
-          "insufficient_workflow_permissions": "Insufficient user permissions to run this workflow"
+          "insufficient_workflow_permissions": "Insufficient user permissions to run this workflow",
+          "running_process": "This action cannot be started because this subscription already has a running process or task."
         }
       },
       "subscriptionInstanceId": "Instance ID",

package/src/messages/nl-NL.json

@@ -364,7 +364,8 @@
           "not_in_sync": "Deze subscription kan niet worden gewijzigd omdat het niet in-sync is. Dit betekent dat er een fout zit in de registratie van de subscription of dat het wordt gewijzigd door een andere workflow.",
           "relations_not_in_sync": "Deze subscription kan niet worden gewijzigd omdat sommige gerelateerde subscriptions niet in-sync zijn. Geblokkeerde subscriptions: {locked_relations}",
           "no_modify_subscription_in_use_by_others": "Deze subscription kan niet worden gewijzigd omdat het in gebruik is door een of meer andere subscriptions: {unterminated_parents}",
-          "insufficient_workflow_permissions": "Onvoldoende rechten om deze actie uit te kunnen voeren"
+          "insufficient_workflow_permissions": "Onvoldoende rechten om deze actie uit te kunnen voeren",
+          "running_process": "Deze actie kan niet worden gestart omdat deze subscription al een lopend proces of taak heeft."
         }
       },
       "subscriptionInstanceId": "Instance ID",

package/src/rtk/endpoints/subscriptionDetail.ts

@@ -105,4 +105,4 @@ const subscriptionDetailApi = orchestratorApi.injectEndpoints({
   }),
 });
 
-export const { useGetSubscriptionDetailQuery } = subscriptionDetailApi;
+export const { useGetSubscriptionDetailQuery, useLazyGetSubscriptionDetailQuery } = subscriptionDetailApi;