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/KeyValuePair.tsx

@@ -9,6 +9,7 @@ import {
   Table,
   TableBody,
   TableCell,
+  TableCellProps,
   TableContainer,
   TableHead,
   TableRow,
@@ -73,6 +74,19 @@ export function KeyValuePairTable({ items, onChange, onDelete }: KeyValuePairTab
     setCopyConfOpen(false);
   };
 
+  const baseCellStyle = {
+    "&:hover": {
+      cursor: "copy",
+    },
+  };
+
+  const KeyTableCell = styled(TableCell)<TableCellProps>(() => (!onChange ? baseCellStyle : {}));
+  const ValueTableCell = styled(TableCell)<TableCellProps>(() => ({
+    ...(!onChange && baseCellStyle),
+    width: "60%",
+    wordBreak: "break-all",
+  }));
+
   return (
     <div>
       <Snackbar open={copyConfOpen} autoHideDuration={3000} onClose={handleCopyConfClose}>
@@ -104,19 +118,12 @@ export function KeyValuePairTable({ items, onChange, onDelete }: KeyValuePairTab
           >
             {items.map(({ key, value }, idx) => (
               <StyledTableRow key={idx} hover>
-                <TableCell
+                <KeyTableCell
                   component="th"
                   scope="row"
                   onClick={(e) => {
                     !onChange && handleCellClick(e);
                   }}
-                  sx={{
-                    ...(!onChange && {
-                      "&:hover": {
-                        cursor: "copy",
-                      },
-                    }),
-                  }}
                 >
                   {!onChange && <span>{key}</span>}
                   {onChange && (
@@ -130,20 +137,11 @@ export function KeyValuePairTable({ items, onChange, onDelete }: KeyValuePairTab
                       }}
                     />
                   )}
-                </TableCell>
+                </KeyTableCell>
-                <TableCell
+                <ValueTableCell
                   onClick={(e) => {
                     !onChange && handleCellClick(e);
                   }}
-                  sx={{
-                    width: "60%",
-                    wordBreak: "break-all",
-                    ...(!onChange && {
-                      "&:hover": {
-                        cursor: "copy",
-                      },
-                    }),
-                  }}
                 >
                   {!onChange && value}
                   {onChange && (
@@ -157,7 +155,7 @@ export function KeyValuePairTable({ items, onChange, onDelete }: KeyValuePairTab
                       }}
                     />
                   )}
-                </TableCell>
+                </ValueTableCell>
                 {onDelete && (
                   <TableCell>
                     <div className="delete-button">

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>
             );
           })}