Add description and documentation link to modal (#795)

* Add workflow actions impl

* Resolve comments

* Add modal text

* Add link text

* Add workflow desc

* Fix typo

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

@@ -13,6 +13,13 @@ export const mockWorkflowActionsConfig: [
     id: 'cancel',
     label: 'Mock cancel',
     subtitle: 'Mock cancel a workflow execution',
+    modal: {
+      text: 'Mock modal text to cancel a workflow execution',
+      docsLink: {
+        text: 'Mock docs link',
+        href: 'https://mock.docs.link',
+      },
+    },
     icon: MdHighlightOff,
     getIsEnabled: () => true,
     apiRoute: 'cancel',
@@ -22,6 +29,13 @@ export const mockWorkflowActionsConfig: [
     id: 'terminate',
     label: 'Mock terminate',
     subtitle: 'Mock terminate a workflow execution',
+    modal: {
+      text: 'Mock modal text to terminate a workflow execution',
+      docsLink: {
+        text: 'Mock docs link',
+        href: 'https://mock.docs.link',
+      },
+    },
     icon: MdPowerSettingsNew,
     getIsEnabled: () => false,
     apiRoute: 'terminate',

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

@@ -14,6 +14,13 @@ const workflowActionsConfig: [
     id: 'cancel',
     label: 'Cancel',
     subtitle: 'Cancel a workflow execution',
+    modal: {
+      text: "Cancels a running workflow by scheduling a cancellation request in the workflow's history, giving it a chance to clean up.",
+      docsLink: {
+        text: 'Read more about cancelling workflows',
+        href: 'https://cadenceworkflow.io/docs/cli#signal-cancel-terminate-workflow',
+      },
+    },
     icon: MdHighlightOff,
     getIsEnabled: (workflow) =>
       !getWorkflowIsCompleted(
@@ -26,6 +33,13 @@ const workflowActionsConfig: [
     id: 'terminate',
     label: 'Terminate',
     subtitle: 'Terminate a workflow execution',
+    modal: {
+      text: 'Terminates a running workflow immediately. Please terminate a workflow only if you know what you are doing.',
+      docsLink: {
+        text: 'Read more about terminating workflows',
+        href: 'https://cadenceworkflow.io/docs/cli#signal-cancel-terminate-workflow',
+      },
+    },
     icon: MdPowerSettingsNew,
     getIsEnabled: (workflow) =>
       !getWorkflowIsCompleted(

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

@@ -28,11 +28,14 @@ describe(WorkflowActionsModalContent.name, () => {
 
     expect(await screen.findAllByText('Mock cancel workflow')).toHaveLength(2);
     expect(
-      screen.getByText('Mock cancel a workflow execution')
+      screen.getByText('Mock modal text to cancel a workflow execution')
     ).toBeInTheDocument();
     expect(
       screen.getByRole('button', { name: 'Mock cancel workflow' })
     ).toBeInTheDocument();
+
+    const docsLink = screen.getByText('Mock docs link');
+    expect(docsLink).toHaveAttribute('href', 'https://mock.docs.link');
   });
 
   it('calls onCloseModal when the Go Back button is clicked', async () => {

src/views/workflow-actions/workflow-actions-modal-content/workflow-actions-modal-content.styles.ts

@@ -1,18 +1,29 @@
 import { type Theme, withStyle } from 'baseui';
 import { type BannerOverrides } from 'baseui/banner';
+import { StyledLink } from 'baseui/link';
 import { ModalBody, ModalFooter, ModalHeader } from 'baseui/modal';
 
 export const styled = {
   ModalHeader: withStyle(ModalHeader, ({ $theme }: { $theme: Theme }) => ({
     marginTop: $theme.sizing.scale850,
   })),
   ModalBody: withStyle(ModalBody, ({ $theme }: { $theme: Theme }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    rowGap: $theme.sizing.scale600,
     marginBottom: $theme.sizing.scale800,
   })),
   ModalFooter: withStyle(ModalFooter, {
     display: 'flex',
     justifyContent: 'space-between',
   }),
+  Link: withStyle(StyledLink, ({ $theme }: { $theme: Theme }) => ({
+    alignSelf: 'start',
+    ...$theme.typography.LabelSmall,
+    display: 'flex',
+    alignItems: 'center',
+    columnGap: $theme.sizing.scale100,
+  })),
 };
 
 export const overrides = {

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

@@ -3,7 +3,7 @@ import { Banner, HIERARCHY, KIND as BANNER_KIND } from 'baseui/banner';
 import { KIND as BUTTON_KIND, SIZE } from 'baseui/button';
 import { ModalButton } from 'baseui/modal';
 import { useSnackbar } from 'baseui/snackbar';
-import { MdCheckCircle, MdErrorOutline } from 'react-icons/md';
+import { MdCheckCircle, MdErrorOutline, MdOpenInNew } from 'react-icons/md';
 
 import request from '@/utils/request';
 import { type RequestError } from '@/utils/request/request-error';
@@ -67,7 +67,15 @@ export default function WorkflowActionsModalContent<R>({
     <>
       <styled.ModalHeader>{action.label} workflow</styled.ModalHeader>
       <styled.ModalBody>
-        {action.subtitle}
+        {action.modal.text}
+        <styled.Link
+          href={action.modal.docsLink.href}
+          target="_blank"
+          rel="noreferrer"
+        >
+          {action.modal.docsLink.text}
+          <MdOpenInNew />
+        </styled.Link>
         {error && (
           <Banner
             hierarchy={HIERARCHY.low}
@@ -83,6 +91,7 @@ export default function WorkflowActionsModalContent<R>({
       </styled.ModalBody>
       <styled.ModalFooter>
         <ModalButton
+          autoFocus={true} // TODO: this needs to be set to false if there is an input
           size={SIZE.compact}
           kind={BUTTON_KIND.secondary}
           onClick={onCloseModal}

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

@@ -14,6 +14,13 @@ export type WorkflowAction<R> = {
   id: string;
   label: string;
   subtitle: string;
+  modal: {
+    text: string;
+    docsLink: {
+      text: string;
+      href: string;
+    };
+  };
   icon: React.ComponentType<{
     size?: IconProps['size'];
     color?: IconProps['color'];