render restart success message with link (#858)

Author: Assem-Uber

src/components/link/link.styles.ts

@@ -1,17 +1,53 @@
-import { withStyle } from 'baseui';
+import { type Theme, withStyle } from 'baseui';
 import { StyledLink } from 'baseui/link';
 
+import { type Props } from './link.types';
+
 export const styled = {
   LinkBase: withStyle<typeof StyledLink, { disabled: boolean }>(
     StyledLink,
-    ({ $theme }) => ({
-      '[disabled]': {
-        pointerEvents: 'none',
-        color: `${$theme.colors.contentStateDisabled} !important`,
-      },
-      ':visited': {
-        color: 'inherit',
-      },
-    })
+    ({ $theme, color }: { $theme: Theme; color?: Props['color'] }) => {
+      let effectiveColors:
+        | {
+            linkText: string;
+            linkVisited: string;
+            linkHover: string;
+            linkActive: string;
+          }
+        | undefined = undefined;
+
+      if (color === 'contentPrimary' || !color) {
+        effectiveColors = {
+          linkText: $theme.colors.linkText,
+          linkVisited: $theme.colors.linkText, // keep visited color same as original color
+          linkHover: $theme.colors.linkHover,
+          linkActive: $theme.colors.linkActive,
+        };
+      } else if (color === 'contentInversePrimary') {
+        effectiveColors = {
+          linkText: $theme.colors.contentInversePrimary,
+          linkVisited: $theme.colors.contentInversePrimary, // keep visited color same as original color
+          linkHover: $theme.colors.contentInverseSecondary,
+          linkActive: $theme.colors.contentInverseSecondary,
+        };
+      }
+
+      return {
+        '[disabled]': {
+          pointerEvents: 'none',
+          color: `${$theme.colors.contentStateDisabled} !important`,
+        },
+        ':visited': {
+          color: effectiveColors?.linkVisited || color,
+        },
+        ':hover': {
+          color: effectiveColors?.linkHover || color,
+        },
+        ':active': {
+          color: effectiveColors?.linkActive || color,
+        },
+        color: effectiveColors?.linkText || color,
+      };
+    }
   ),
 };

src/components/link/link.types.ts

@@ -1,5 +1,11 @@
 import type React from 'react';
 
+import { type StyledLink } from 'baseui/link';
 import type NextLink from 'next/link';
 
-export type Props = React.ComponentProps<typeof NextLink>;
+type LinkProps = React.ComponentProps<typeof NextLink> &
+  React.ComponentProps<typeof StyledLink>;
+
+export type Props = Omit<LinkProps, 'color'> & {
+  color?: LinkProps['color'] | 'contentPrimary' | 'contentInversePrimary';
+};

src/views/workflow-actions/__fixtures__/workflow-actions-config.ts

@@ -23,7 +23,7 @@ export const mockWorkflowActionsConfig: [
     icon: MdHighlightOff,
     getIsRunnable: () => true,
     apiRoute: 'cancel',
-    getSuccessMessage: () => 'Mock cancel notification',
+    renderSuccessMessage: () => 'Mock cancel notification',
   },
   {
     id: 'terminate',
@@ -39,6 +39,6 @@ export const mockWorkflowActionsConfig: [
     icon: MdPowerSettingsNew,
     getIsRunnable: () => false,
     apiRoute: 'terminate',
-    getSuccessMessage: () => 'Mock terminate notification',
+    renderSuccessMessage: () => 'Mock terminate notification',
   },
 ] as const;

src/views/workflow-actions/config/workflow-actions.config.ts

@@ -1,3 +1,5 @@
+import { createElement } from 'react';
+
 import {
   MdHighlightOff,
   MdPowerSettingsNew,
@@ -9,6 +11,7 @@ import { type RestartWorkflowResponse } from '@/route-handlers/restart-workflow/
 import { type TerminateWorkflowResponse } from '@/route-handlers/terminate-workflow/terminate-workflow.types';
 
 import getWorkflowIsCompleted from '../../workflow-page/helpers/get-workflow-is-completed';
+import WorkflowActionRestartSuccessMsg from '../workflow-action-restart-success-msg/workflow-action-restart-success-msg';
 import { type WorkflowAction } from '../workflow-actions.types';
 
 const workflowActionsConfig: [
@@ -33,7 +36,7 @@ const workflowActionsConfig: [
         workflow.workflowExecutionInfo?.closeEvent?.attributes ?? ''
       ),
     apiRoute: 'cancel',
-    getSuccessMessage: () => 'Workflow cancellation has been requested.',
+    renderSuccessMessage: () => 'Workflow cancellation has been requested.',
   },
   {
     id: 'terminate',
@@ -52,7 +55,7 @@ const workflowActionsConfig: [
         workflow.workflowExecutionInfo?.closeEvent?.attributes ?? ''
       ),
     apiRoute: 'terminate',
-    getSuccessMessage: () => 'Workflow has been terminated.',
+    renderSuccessMessage: () => 'Workflow has been terminated.',
   },
   {
     id: 'restart',
@@ -67,9 +70,8 @@ const workflowActionsConfig: [
     icon: MdOutlineRestartAlt,
     getIsRunnable: () => true,
     apiRoute: 'restart',
-    getSuccessMessage: (result) =>
-      // TODO: change runid to a link (upcomming PR)
-      `Workflow has been restarted with new run ID: ${result.runId}`,
+    renderSuccessMessage: (props) =>
+      createElement(WorkflowActionRestartSuccessMsg, props),
   },
 ] as const;
 

src/views/workflow-actions/workflow-action-restart-success-msg/__tests__/workflow-action-restart-success-msg.test.tsx

@@ -0,0 +1,41 @@
+import { render, screen } from '@testing-library/react';
+
+import { type RestartWorkflowResponse } from '@/route-handlers/restart-workflow/restart-workflow.types';
+
+import WorkflowActionRestartSuccessMsg from '../workflow-action-restart-success-msg';
+
+describe('WorkflowActionRestartSuccessMsg', () => {
+  const mockProps = {
+    result: {
+      runId: 'test-run-id',
+    } as RestartWorkflowResponse,
+    inputParams: {
+      domain: 'test-domain',
+      cluster: 'test-cluster',
+      workflowId: 'test-workflow-id',
+      runId: 'test-run-id',
+    },
+  };
+
+  it('renders the success message with a link', () => {
+    render(<WorkflowActionRestartSuccessMsg {...mockProps} />);
+
+    expect(
+      screen.getByText(/Workflow has been restarted[\.]/)
+    ).toBeInTheDocument();
+    expect(screen.getByText('Click here')).toBeInTheDocument();
+    expect(
+      screen.getByText(/to view the new workflow[\.]/)
+    ).toBeInTheDocument();
+  });
+
+  it('renders the link with the correct href', () => {
+    render(<WorkflowActionRestartSuccessMsg {...mockProps} />);
+    const { domain, cluster, workflowId, runId } = mockProps.inputParams;
+    const link = screen.getByText('Click here');
+    expect(link).toHaveAttribute(
+      'href',
+      `/domains/${domain}/${cluster}/workflows/${workflowId}/${runId}`
+    );
+  });
+});

src/views/workflow-actions/workflow-action-restart-success-msg/workflow-action-restart-success-msg.tsx

@@ -0,0 +1,24 @@
+import Link from '@/components/link/link';
+import { type RestartWorkflowResponse } from '@/route-handlers/restart-workflow/restart-workflow.types';
+
+import { type WorkflowActionSuccessMessageProps } from '../workflow-actions.types';
+
+const WorkflowActionRestartSuccessMsg = ({
+  result: { runId },
+  inputParams: { workflowId, cluster, domain },
+}: WorkflowActionSuccessMessageProps<RestartWorkflowResponse>) => {
+  return (
+    <>
+      Workflow has been restarted.{' '}
+      <Link
+        color="contentInversePrimary"
+        href={`/domains/${domain}/${cluster}/workflows/${workflowId}/${runId}`}
+      >
+        Click here
+      </Link>{' '}
+      to view the new workflow.
+    </>
+  );
+};
+
+export default WorkflowActionRestartSuccessMsg;

src/views/workflow-actions/workflow-actions-modal-content/workflow-actions-modal-content.tsx

@@ -53,7 +53,10 @@ export default function WorkflowActionsModalContent<R>({
 
         onCloseModal();
         enqueue({
-          message: action.getSuccessMessage(result, params),
+          message: action.renderSuccessMessage?.({
+            result,
+            inputParams: params,
+          }),
           startEnhancer: MdCheckCircle,
           actionMessage: 'OK',
           actionOnClick: () => dequeue(),

src/views/workflow-actions/workflow-actions.tsx

@@ -59,11 +59,14 @@ export default function WorkflowActions() {
       <StatefulPopover
         placement={POPOVER_PLACEMENT.bottomRight}
         overrides={overrides.popover}
-        content={() => (
+        content={({ close }) => (
           <WorkflowActionsMenu
             workflow={workflow}
             actionsEnabledConfig={actionsEnabledConfig}
-            onActionSelect={(action) => setSelectedAction(action)}
+            onActionSelect={(action) => {
+              setSelectedAction(action);
+              close();
+            }}
           />
         )}
         returnFocus

src/views/workflow-actions/workflow-actions.types.ts

@@ -1,3 +1,5 @@
+import { type ReactNode } from 'react';
+
 import { type IconProps } from 'baseui/icon';
 
 import { type DescribeWorkflowResponse } from '@/route-handlers/describe-workflow/describe-workflow.types';
@@ -12,6 +14,11 @@ export type WorkflowActionInputParams = {
 
 export type WorkflowActionID = 'cancel' | 'terminate' | 'restart';
 
+export type WorkflowActionSuccessMessageProps<R> = {
+  result: R;
+  inputParams: WorkflowActionInputParams;
+};
+
 export type WorkflowAction<R> = {
   id: WorkflowActionID;
   label: string;
@@ -29,8 +36,7 @@ export type WorkflowAction<R> = {
   }>;
   getIsRunnable: (workflow: DescribeWorkflowResponse) => boolean;
   apiRoute: string;
-  getSuccessMessage: (
-    result: R,
-    inputParams: WorkflowActionInputParams
-  ) => string;
+  renderSuccessMessage: (
+    props: WorkflowActionSuccessMessageProps<R>
+  ) => ReactNode;
 };