Adds copy buttons to misk web-actions

GitOrigin-RevId: 7398506888d08f2324bfbd1b98766f776db82763

Author: Adam Erb

misk-admin/web-actions/src/web-actions/ui/RequestEditor.tsx

@@ -4,7 +4,7 @@ import ace from 'ace-builds/src-noconflict/ace';
 import 'ace-builds/src-noconflict/ext-language_tools';
 import { ContextAwareCompleter } from '@web-actions/ui/ContextAwareCompleter';
 import { Box, IconButton, Spinner } from '@chakra-ui/react';
-import { ArrowForwardIcon } from '@chakra-ui/icons';
+import { ArrowForwardIcon, CopyIcon } from '@chakra-ui/icons';
 import { CommandParser } from '@web-actions/parsing/CommandParser';
 import { MiskWebActionDefinition } from '@web-actions/api/responseTypes';
 import { EndpointSelectionCallbacks } from '@web-actions/ui/EndpointSelection';
@@ -32,6 +32,7 @@ export default class RequestEditor extends React.Component<Props, State> {
     super(props);
     this.state = { loading: false };
     this.submitRequest = this.submitRequest.bind(this);
+    this.copyToClipboard = this.copyToClipboard.bind(this);
 
     this.completer = new ContextAwareCompleter();
   }
@@ -109,6 +110,16 @@ export default class RequestEditor extends React.Component<Props, State> {
     }
   }
 
+  async copyToClipboard() {
+    try {
+      const content = this.editor!.getValue();
+      const normalizedJson = new CommandParser(content).parse()?.render();
+      await navigator.clipboard.writeText(normalizedJson);
+    } catch (err) {
+      console.error('Failed to copy with error:', err);
+    }
+  }
+
   public render() {
     return (
       <Box position="relative" width="100%" height="100%">
@@ -138,6 +149,16 @@ export default class RequestEditor extends React.Component<Props, State> {
           backgroundColor="green.200"
           onClick={this.submitRequest}
         />
+        <IconButton
+          aria-label="Copy"
+          icon={<CopyIcon />}
+          zIndex="100"
+          position="absolute"
+          top="14"
+          right="2"
+          backgroundColor="grey"
+          onClick={this.copyToClipboard}
+        />
         <Box
           width="100%"
           height="100%"

misk-admin/web-actions/src/web-actions/ui/ResponseViewer.tsx

@@ -2,8 +2,10 @@ import React, { Dispatch, SetStateAction } from 'react';
 import { Ace } from 'ace-builds';
 import ace from 'ace-builds/src-noconflict/ace';
 import 'ace-builds/src-noconflict/ext-language_tools';
-import { Box } from '@chakra-ui/react';
+import { Box, IconButton } from '@chakra-ui/react';
 import { ViewState } from 'src/viewState';
+import { CopyIcon } from '@chakra-ui/icons';
+import { CommandParser } from '@web-actions/parsing/CommandParser';
 
 interface Props {
   viewState: ViewState;
@@ -14,6 +16,11 @@ export default class ResponseViewer extends React.Component<Props> {
   public refEditor: HTMLElement | null = null;
   public editor: Ace.Editor | null = null;
 
+  constructor(props: Props) {
+    super(props);
+    this.copyToClipboard = this.copyToClipboard.bind(this);
+  }
+
   componentDidMount() {
     this.editor = ace.edit(this.refEditor, {
       theme: 'ace/theme/textmate',
@@ -33,16 +40,37 @@ export default class ResponseViewer extends React.Component<Props> {
     this.refEditor = item;
   }
 
+  async copyToClipboard() {
+    try {
+      const content = this.editor!.getValue();
+      await navigator.clipboard.writeText(content);
+    } catch (err) {
+      console.error('Failed to copy with error:', err);
+    }
+  }
+
   public render() {
     this.editor?.setValue(this.props.viewState.response || '', -1);
 
     return (
-      <Box
-        id={'response-viewer'}
-        width="100%"
-        height="100%"
-        ref={(it) => this.updateRef(it)}
-      />
+      <>
+        <IconButton
+          aria-label="Copy"
+          icon={<CopyIcon />}
+          zIndex="100"
+          position="absolute"
+          top="14"
+          right="2"
+          backgroundColor="grey"
+          onClick={this.copyToClipboard}
+        />
+        <Box
+          id={'response-viewer'}
+          width="100%"
+          height="100%"
+          ref={(it) => this.updateRef(it)}
+        />
+      </>
     );
   }
 }