Add "Copy to Sender" table action

admin/src/features/reqlog/components/RequestLogs.tsx

@@ -1,4 +1,5 @@
-import { Alert, Box, Link, MenuItem, Snackbar } from "@mui/material";
+import { ContentCopy } from "@mui/icons-material";
+import { Alert, Box, IconButton, Link, MenuItem, Snackbar, Tooltip } from "@mui/material";
 import { useRouter } from "next/router";
 import { useState } from "react";
 
@@ -17,7 +18,13 @@ export function RequestLogs(): JSX.Element {
     pollInterval: 1000,
   });
 
-  const [createSenderReqFromLog] = useCreateSenderRequestFromHttpRequestLogMutation({});
+  const [createSenderReqFromLog] = useCreateSenderRequestFromHttpRequestLogMutation({
+    onCompleted({ createSenderRequestFromHttpRequestLog }) {
+      const { id } = createSenderRequestFromHttpRequestLog;
+      setNewSenderReqId(id);
+      setCopiedReqNotifOpen(true);
+    },
+  });
 
   const [copyToSenderId, setCopyToSenderId] = useState("");
   const [Menu, handleContextMenu, handleContextMenuClose] = useContextMenu();
@@ -27,11 +34,6 @@ export function RequestLogs(): JSX.Element {
       variables: {
         id: copyToSenderId,
       },
-      onCompleted({ createSenderRequestFromHttpRequestLog }) {
-        const { id } = createSenderRequestFromHttpRequestLog;
-        setNewSenderReqId(id);
-        setCopiedReqNotifOpen(true);
-      },
     });
     handleContextMenuClose();
   };
@@ -54,6 +56,23 @@ export function RequestLogs(): JSX.Element {
     handleContextMenu(e);
   };
 
+  const handleCopyToSenderActionClick = (id: string) => {
+    setCopyToSenderId(id);
+    createSenderReqFromLog({
+      variables: {
+        id,
+      },
+    });
+  };
+
+  const rowActions = (id: string): JSX.Element => (
+    <Tooltip title="Copy to Sender">
+      <IconButton size="small" onClick={() => handleCopyToSenderActionClick(id)}>
+        <ContentCopy fontSize="inherit" />
+      </IconButton>
+    </Tooltip>
+  );
+
   return (
     <Box display="flex" flexDirection="column" height="100%">
       <Search />
@@ -79,6 +98,7 @@ export function RequestLogs(): JSX.Element {
                 activeRowId={id}
                 onRowClick={handleRowClick}
                 onContextMenu={handleRowContextClick}
+                rowActions={rowActions}
               />
             </Box>
           </Box>

admin/src/features/sender/components/EditRequest.tsx

@@ -154,7 +154,6 @@ function EditRequest(): JSX.Element {
 
       const newHeaders = sortKeyValuePairs(senderRequest.headers || []);
       setHeaders([...newHeaders.map(({ key, value }) => ({ key, value })), { key: "", value: "" }]);
-      console.log(senderRequest.response);
       setResponse(senderRequest.response);
     },
   });

admin/src/lib/components/Editor.tsx

@@ -34,7 +34,6 @@ interface Props {
 }
 
 function Editor({ content, contentType, monacoOptions, onChange }: Props): JSX.Element {
-  console.log(content);
   return (
     <MonacoEditor
       language={languageForContentType(contentType)}

admin/src/lib/components/RequestsTable.tsx

@@ -64,10 +64,11 @@ interface Props {
   activeRowId?: string;
   onRowClick?: (id: string) => void;
   onContextMenu?: (e: React.MouseEvent, id: string) => void;
+  rowActions?: (id: string) => JSX.Element;
 }
 
 export default function RequestsTable(props: Props): JSX.Element {
-  const { requests, activeRowId, onRowClick, onContextMenu } = props;
+  const { requests, activeRowId, onRowClick, onContextMenu, rowActions } = props;
 
   return (
     <TableContainer sx={{ overflowX: "initial" }}>
@@ -78,6 +79,7 @@ export default function RequestsTable(props: Props): JSX.Element {
             <TableCell>Origin</TableCell>
             <TableCell>Path</TableCell>
             <TableCell>Status</TableCell>
+            {rowActions && <TableCell padding="checkbox" />}
           </TableRow>
         </TableHead>
         <TableBody>
@@ -104,6 +106,7 @@ export default function RequestsTable(props: Props): JSX.Element {
                 <StatusTableCell>
                   {response && <Status code={response.statusCode} reason={response.statusReason} />}
                 </StatusTableCell>
+                {rowActions && <TableCell sx={{ py: 0 }}>{rowActions(id)}</TableCell>}
               </RequestTableRow>
             );
           })}