Add tooltips to Workflow Actions to explain why they are disabled (#862)

adhityamamallan · web-flow · commit fd6edf15f2f8 · 2025-03-26T14:36:26.000+01:00
Expand WorkflowActionsEnabledConfig to return an enum (enabled, ...list of disabled reasons) instead of a boolean
Create WorkflowActionsRunnableStatus enum to similarly define if a workflow action can be run (if enabled in config)
Change getIsRunnable in WorkflowActionsConfig to getRunnableStatus
Add StatefulTooltip to disabled workflow action menu items, to show a disabled reason on hover
diff --git a/src/config/dynamic/resolvers/schemas/resolver-schemas.ts b/src/config/dynamic/resolvers/schemas/resolver-schemas.ts
@@ -1,6 +1,12 @@
 import { z } from 'zod';
 
 import { type ResolverSchemas } from '../../../../utils/config/config.types';
+import WORKFLOW_ACTIONS_DISABLED_VALUES_CONFIG from '../workflow-actions-disabled-values.config';
+
+const workflowActionsEnabledValueSchema = z.enum([
+  'ENABLED',
+  ...WORKFLOW_ACTIONS_DISABLED_VALUES_CONFIG,
+]);
 
 const resolverSchemas: ResolverSchemas = {
   CLUSTERS: {
@@ -30,9 +36,9 @@ const resolverSchemas: ResolverSchemas = {
       domain: z.string(),
     }),
     returnType: z.object({
-      cancel: z.boolean(),
-      terminate: z.boolean(),
-      restart: z.boolean(),
+      cancel: workflowActionsEnabledValueSchema,
+      terminate: workflowActionsEnabledValueSchema,
+      restart: workflowActionsEnabledValueSchema,
     }),
   },
 };
diff --git a/src/config/dynamic/resolvers/workflow-actions-disabled-values.config.ts b/src/config/dynamic/resolvers/workflow-actions-disabled-values.config.ts
@@ -0,0 +1,6 @@
+const WORKFLOW_ACTIONS_DISABLED_VALUES_CONFIG = [
+  'DISABLED_DEFAULT',
+  'DISABLED_UNAUTHORIZED',
+] as const satisfies Array<`DISABLED_${string}`>;
+
+export default WORKFLOW_ACTIONS_DISABLED_VALUES_CONFIG;
diff --git a/src/config/dynamic/resolvers/workflow-actions-enabled.ts b/src/config/dynamic/resolvers/workflow-actions-enabled.ts
@@ -11,8 +11,8 @@ export default async function workflowActionsEnabled(
   _: WorkflowActionsEnabledResolverParams
 ): Promise<WorkflowActionsEnabledConfig> {
   return {
-    terminate: true,
-    cancel: true,
-    restart: true,
+    terminate: 'ENABLED',
+    cancel: 'ENABLED',
+    restart: 'ENABLED',
   };
 }
diff --git a/src/config/dynamic/resolvers/workflow-actions-enabled.types.ts b/src/config/dynamic/resolvers/workflow-actions-enabled.types.ts
@@ -1,8 +1,20 @@
-import { type WorkflowActionID } from '@/views/workflow-actions/workflow-actions.types';
+import type WORKFLOW_ACTIONS_DISABLED_VALUES_CONFIG from './workflow-actions-disabled-values.config';
+
+export type WorkflowActionID = 'cancel' | 'terminate' | 'restart';
 
 export type WorkflowActionsEnabledResolverParams = {
   domain: string;
   cluster: string;
 };
 
-export type WorkflowActionsEnabledConfig = Record<WorkflowActionID, boolean>;
+export type WorkflowActionDisabledValue =
+  (typeof WORKFLOW_ACTIONS_DISABLED_VALUES_CONFIG)[number];
+
+export type WorkflowActionEnabledConfigValue =
+  | 'ENABLED'
+  | WorkflowActionDisabledValue;
+
+export type WorkflowActionsEnabledConfig = Record<
+  WorkflowActionID,
+  WorkflowActionEnabledConfigValue
+>;
diff --git a/src/utils/config/__fixtures__/resolved-config-values.ts b/src/utils/config/__fixtures__/resolved-config-values.ts
@@ -28,9 +28,9 @@ const mockResolvedConfigValues: LoadedConfigResolvedValues = {
     },
   ],
   WORKFLOW_ACTIONS_ENABLED: {
-    terminate: true,
-    cancel: true,
-    restart: true,
+    terminate: 'ENABLED',
+    cancel: 'ENABLED',
+    restart: 'ENABLED',
   },
 };
 export default mockResolvedConfigValues;
diff --git a/src/views/workflow-actions/__fixtures__/workflow-actions-config.ts b/src/views/workflow-actions/__fixtures__/workflow-actions-config.ts
@@ -21,7 +21,7 @@ export const mockWorkflowActionsConfig: [
       },
     },
     icon: MdHighlightOff,
-    getIsRunnable: () => true,
+    getRunnableStatus: () => 'RUNNABLE',
     apiRoute: 'cancel',
     renderSuccessMessage: () => 'Mock cancel notification',
   },
@@ -37,7 +37,7 @@ export const mockWorkflowActionsConfig: [
       },
     },
     icon: MdPowerSettingsNew,
-    getIsRunnable: () => false,
+    getRunnableStatus: () => 'RUNNABLE',
     apiRoute: 'terminate',
     renderSuccessMessage: () => 'Mock terminate notification',
   },
diff --git a/src/views/workflow-actions/config/workflow-actions-disabled-reasons.config.ts b/src/views/workflow-actions/config/workflow-actions-disabled-reasons.config.ts
@@ -0,0 +1,8 @@
+import { type WorkflowActionDisabledValue } from '@/config/dynamic/resolvers/workflow-actions-enabled.types';
+
+const WORKFLOW_ACTIONS_DISABLED_REASONS_CONFIG = {
+  DISABLED_DEFAULT: 'Workflow action has been disabled',
+  DISABLED_UNAUTHORIZED: 'Not authorized to perform this action',
+} as const satisfies Record<WorkflowActionDisabledValue, string>;
+
+export default WORKFLOW_ACTIONS_DISABLED_REASONS_CONFIG;
diff --git a/src/views/workflow-actions/config/workflow-actions-non-runnable-reasons.config.ts b/src/views/workflow-actions/config/workflow-actions-non-runnable-reasons.config.ts
@@ -0,0 +1,7 @@
+import { type WorkflowActionNonRunnableStatus } from '../workflow-actions.types';
+
+const WORKFLOW_ACTIONS_NON_RUNNABLE_REASONS_CONFIG = {
+  NOT_RUNNABLE_WORKFLOW_CLOSED: 'Workflow is already closed',
+} as const satisfies Record<WorkflowActionNonRunnableStatus, string>;
+
+export default WORKFLOW_ACTIONS_NON_RUNNABLE_REASONS_CONFIG;
diff --git a/src/views/workflow-actions/config/workflow-actions-non-runnable-statuses.config.ts b/src/views/workflow-actions/config/workflow-actions-non-runnable-statuses.config.ts
@@ -0,0 +1,5 @@
+const WORKFLOW_ACTIONS_NON_RUNNABLE_STATUSES_CONFIG = [
+  'NOT_RUNNABLE_WORKFLOW_CLOSED',
+] as const satisfies Array<`NOT_RUNNABLE_${string}`>;
+
+export default WORKFLOW_ACTIONS_NON_RUNNABLE_STATUSES_CONFIG;
diff --git a/src/views/workflow-actions/config/workflow-actions.config.ts b/src/views/workflow-actions/config/workflow-actions.config.ts
@@ -31,10 +31,12 @@ const workflowActionsConfig: [
       },
     },
     icon: MdHighlightOff,
-    getIsRunnable: (workflow) =>
-      !getWorkflowIsCompleted(
+    getRunnableStatus: (workflow) =>
+      getWorkflowIsCompleted(
         workflow.workflowExecutionInfo?.closeEvent?.attributes ?? ''
-      ),
+      )
+        ? 'NOT_RUNNABLE_WORKFLOW_CLOSED'
+        : 'RUNNABLE',
     apiRoute: 'cancel',
     renderSuccessMessage: () => 'Workflow cancellation has been requested.',
   },
@@ -50,10 +52,12 @@ const workflowActionsConfig: [
       },
     },
     icon: MdPowerSettingsNew,
-    getIsRunnable: (workflow) =>
-      !getWorkflowIsCompleted(
+    getRunnableStatus: (workflow) =>
+      getWorkflowIsCompleted(
         workflow.workflowExecutionInfo?.closeEvent?.attributes ?? ''
-      ),
+      )
+        ? 'NOT_RUNNABLE_WORKFLOW_CLOSED'
+        : 'RUNNABLE',
     apiRoute: 'terminate',
     renderSuccessMessage: () => 'Workflow has been terminated.',
   },
@@ -68,7 +72,7 @@ const workflowActionsConfig: [
       ],
     },
     icon: MdOutlineRestartAlt,
-    getIsRunnable: () => true,
+    getRunnableStatus: () => 'RUNNABLE',
     apiRoute: 'restart',
     renderSuccessMessage: (props) =>
       createElement(WorkflowActionRestartSuccessMsg, props),
diff --git a/src/views/workflow-actions/workflow-actions-menu/__tests__/workflow-actions-menu.test.tsx b/src/views/workflow-actions/workflow-actions-menu/__tests__/workflow-actions-menu.test.tsx
@@ -2,7 +2,11 @@ import React from 'react';
 
 import { render, screen, userEvent, within } from '@/test-utils/rtl';
 
-import { type WorkflowActionsEnabledConfig } from '@/config/dynamic/resolvers/workflow-actions-enabled.types';
+import {
+  type WorkflowActionEnabledConfigValue,
+  type WorkflowActionsEnabledConfig,
+} from '@/config/dynamic/resolvers/workflow-actions-enabled.types';
+import mockResolvedConfigValues from '@/utils/config/__fixtures__/resolved-config-values';
 import { describeWorkflowResponse } from '@/views/workflow-page/__fixtures__/describe-workflow-response';
 
 import { mockWorkflowActionsConfig } from '../../__fixtures__/workflow-actions-config';
@@ -13,14 +17,27 @@ jest.mock(
   () => mockWorkflowActionsConfig
 );
 
+jest.mock('../helpers/get-action-disabled-reason', () =>
+  jest.fn(
+    ({
+      actionEnabledConfig,
+    }: {
+      actionEnabledConfig?: WorkflowActionEnabledConfigValue;
+    }) =>
+      actionEnabledConfig === 'ENABLED'
+        ? undefined
+        : 'Mock workflow action disabled reason'
+  )
+);
+
 describe(WorkflowActionsMenu.name, () => {
   beforeEach(() => {
     jest.clearAllMocks();
   });
 
   it('renders the menu items correctly', () => {
     setup({
-      actionsEnabledConfig: { terminate: true, cancel: true, restart: true },
+      actionsEnabledConfig: mockResolvedConfigValues.WORKFLOW_ACTIONS_ENABLED,
     });
 
     const menuButtons = screen.getAllByRole('button');
@@ -38,12 +55,16 @@ describe(WorkflowActionsMenu.name, () => {
     expect(
       within(menuButtons[1]).getByText('Mock terminate a workflow execution')
     ).toBeInTheDocument();
-    expect(menuButtons[1]).toBeDisabled();
+    expect(menuButtons[1]).not.toBeDisabled();
   });
 
-  it('disables menu items if they are disabled from config', () => {
-    setup({
-      actionsEnabledConfig: { terminate: true, cancel: false, restart: true },
+  it('disables menu items and shows popover if they are disabled from config', async () => {
+    const { user } = setup({
+      actionsEnabledConfig: {
+        cancel: 'DISABLED_DEFAULT',
+        terminate: 'DISABLED_DEFAULT',
+        restart: 'ENABLED',
+      },
     });
 
     const menuButtons = screen.getAllByRole('button');
@@ -62,6 +83,11 @@ describe(WorkflowActionsMenu.name, () => {
       within(menuButtons[1]).getByText('Mock terminate a workflow execution')
     ).toBeInTheDocument();
     expect(menuButtons[1]).toBeDisabled();
+
+    await user.hover(menuButtons[0]);
+    expect(
+      await screen.findByText('Mock workflow action disabled reason')
+    ).toBeInTheDocument();
   });
 
   it('disables menu items if no config is passed', () => {
@@ -89,7 +115,7 @@ describe(WorkflowActionsMenu.name, () => {
 
   it('calls onActionSelect when the action button is clicked', async () => {
     const { user, mockOnActionSelect } = setup({
-      actionsEnabledConfig: { terminate: true, cancel: true, restart: true },
+      actionsEnabledConfig: mockResolvedConfigValues.WORKFLOW_ACTIONS_ENABLED,
     });
 
     const menuButtons = screen.getAllByRole('button');
diff --git a/src/views/workflow-actions/workflow-actions-menu/helpers/__tests__/get-action-disabled-reason.test.ts b/src/views/workflow-actions/workflow-actions-menu/helpers/__tests__/get-action-disabled-reason.test.ts
@@ -0,0 +1,58 @@
+import WORKFLOW_ACTIONS_DISABLED_REASONS_CONFIG from '../../../config/workflow-actions-disabled-reasons.config';
+import WORKFLOW_ACTIONS_NON_RUNNABLE_REASONS_CONFIG from '../../../config/workflow-actions-non-runnable-reasons.config';
+import getActionDisabledReason from '../get-action-disabled-reason';
+
+describe(getActionDisabledReason.name, () => {
+  it('returns undefined when action is enabled and runnable', () => {
+    const result = getActionDisabledReason({
+      actionEnabledConfig: 'ENABLED',
+      actionRunnableStatus: 'RUNNABLE',
+    });
+
+    expect(result).toBeUndefined();
+  });
+
+  it('returns disabled message when config is not loaded', () => {
+    const result = getActionDisabledReason({
+      actionEnabledConfig: undefined,
+      actionRunnableStatus: 'RUNNABLE',
+    });
+
+    expect(result).toBe(
+      WORKFLOW_ACTIONS_DISABLED_REASONS_CONFIG.DISABLED_DEFAULT
+    );
+  });
+
+  it('returns disabled label when action is disabled from config', () => {
+    const result = getActionDisabledReason({
+      actionEnabledConfig: 'DISABLED_DEFAULT',
+      actionRunnableStatus: 'RUNNABLE',
+    });
+
+    expect(result).toBe(
+      WORKFLOW_ACTIONS_DISABLED_REASONS_CONFIG.DISABLED_DEFAULT
+    );
+  });
+
+  it('returns unauthorized label when action is unauthorized', () => {
+    const result = getActionDisabledReason({
+      actionEnabledConfig: 'DISABLED_UNAUTHORIZED',
+      actionRunnableStatus: 'RUNNABLE',
+    });
+
+    expect(result).toBe(
+      WORKFLOW_ACTIONS_DISABLED_REASONS_CONFIG.DISABLED_UNAUTHORIZED
+    );
+  });
+
+  it('returns workflow closed label when workflow is not runnable because of being closed', () => {
+    const result = getActionDisabledReason({
+      actionEnabledConfig: 'ENABLED',
+      actionRunnableStatus: 'NOT_RUNNABLE_WORKFLOW_CLOSED',
+    });
+
+    expect(result).toBe(
+      WORKFLOW_ACTIONS_NON_RUNNABLE_REASONS_CONFIG.NOT_RUNNABLE_WORKFLOW_CLOSED
+    );
+  });
+});
diff --git a/src/views/workflow-actions/workflow-actions-menu/helpers/get-action-disabled-reason.ts b/src/views/workflow-actions/workflow-actions-menu/helpers/get-action-disabled-reason.ts
@@ -0,0 +1,25 @@
+import { type WorkflowActionEnabledConfigValue } from '@/config/dynamic/resolvers/workflow-actions-enabled.types';
+
+import WORKFLOW_ACTIONS_DISABLED_REASONS_CONFIG from '../../config/workflow-actions-disabled-reasons.config';
+import WORKFLOW_ACTIONS_NON_RUNNABLE_REASONS_CONFIG from '../../config/workflow-actions-non-runnable-reasons.config';
+import { type WorkflowActionRunnableStatus } from '../../workflow-actions.types';
+
+export default function getActionDisabledReason({
+  actionEnabledConfig,
+  actionRunnableStatus,
+}: {
+  actionEnabledConfig?: WorkflowActionEnabledConfigValue;
+  actionRunnableStatus: WorkflowActionRunnableStatus;
+}): string | undefined {
+  if (actionEnabledConfig !== 'ENABLED') {
+    return WORKFLOW_ACTIONS_DISABLED_REASONS_CONFIG[
+      actionEnabledConfig ?? 'DISABLED_DEFAULT'
+    ];
+  }
+
+  if (actionRunnableStatus !== 'RUNNABLE') {
+    return WORKFLOW_ACTIONS_NON_RUNNABLE_REASONS_CONFIG[actionRunnableStatus];
+  }
+
+  return undefined;
+}
diff --git a/src/views/workflow-actions/workflow-actions-menu/workflow-actions-menu.tsx b/src/views/workflow-actions/workflow-actions-menu/workflow-actions-menu.tsx
diff --git a/src/views/workflow-actions/workflow-actions.types.ts b/src/views/workflow-actions/workflow-actions.types.ts
