Added cancel/terminate cli commands (#1008)

* Added cancel/terminate cli commands.
* Also made sure the modal stays within screen boundaries and commands are scrollable.

Author: YoavLev

src/views/workflow-page/config/workflow-page-cli-commands.config.ts

@@ -86,6 +86,22 @@ const workflowPageCliCommandsConfig: CliCommandConfig[] = [
       'cadence workflow {list|listall} --query \'(CustomKeywordField = "keyword1" and CustomIntField >= 5) or CustomKeywordField = "keyword2" and CloseTime = missing\'',
     group: 'workflow',
   },
+  {
+    label: 'Cancel a workflow',
+    command:
+      'cadence --domain {domain-name} workflow cancel -w {workflow-id} -r {run-id} --reason {reason details}',
+    description:
+      'Cancel a workflow, recording WorkflowExecutionCancelRequested event and allowing for clean up work after cancellation',
+    group: 'workflow',
+  },
+  {
+    label: 'Terminate a workflow',
+    command:
+      'cadence --domain {domain-name} workflow terminate -w {workflow-id} -r {run-id} --reason {reason details}',
+    description:
+      'Terminate a workflow immediately, recording WorkflowExecutionTerminated event as the closing event in the history',
+    group: 'workflow',
+  },
 ];
 
 export default workflowPageCliCommandsConfig;

src/views/workflow-page/workflow-page-cli-commands-modal/workflow-page-cli-commands-modal.styles.ts

@@ -54,6 +54,11 @@ const cssStylesObj = {
     marginTop: theme.sizing.scale300,
     ...theme.typography.ParagraphXSmall,
   }),
+  commandsScrollContainer: (theme) => ({
+    maxHeight: '60vh',
+    overflowY: 'auto',
+    paddingRight: theme.sizing.scale300,
+  }),
 } satisfies StyletronCSSObject;
 
 export const cssStyles: StyletronCSSObjectOf<typeof cssStylesObj> =

src/views/workflow-page/workflow-page-cli-commands-modal/workflow-page-cli-commands-modal.tsx

@@ -58,7 +58,7 @@ export default function WorkflowPageCliCommandsModal({
             <Tab key={name} title={title} />
           ))}
         </Tabs>
-        <div>
+        <div className={cls.commandsScrollContainer}>
           {currentTabCommands.map(({ label, command, description }) => (
             <div key={label} className={cls.rowContainer}>
               <div className={cls.rowLabel}>{label}</div>