Fix input fields for key-value pair tables losing focus

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

@@ -1,5 +1,4 @@
-import { ContentCopy } from "@mui/icons-material";
-import { Alert, Box, IconButton, Link, MenuItem, Snackbar, Tooltip } from "@mui/material";
+import { Alert, Box, Link, MenuItem, Snackbar } from "@mui/material";
 import { useRouter } from "next/router";
 import { useState } from "react";
 
@@ -18,13 +17,7 @@ export function RequestLogs(): JSX.Element {
     pollInterval: 1000,
   });
 
-  const [createSenderReqFromLog] = useCreateSenderRequestFromHttpRequestLogMutation({
-    onCompleted({ createSenderRequestFromHttpRequestLog }) {
-      const { id } = createSenderRequestFromHttpRequestLog;
-      setNewSenderReqId(id);
-      setCopiedReqNotifOpen(true);
-    },
-  });
+  const [createSenderReqFromLog] = useCreateSenderRequestFromHttpRequestLogMutation({});
 
   const [copyToSenderId, setCopyToSenderId] = useState("");
   const [Menu, handleContextMenu, handleContextMenuClose] = useContextMenu();
@@ -34,6 +27,11 @@ export function RequestLogs(): JSX.Element {
       variables: {
         id: copyToSenderId,
       },
+      onCompleted({ createSenderRequestFromHttpRequestLog }) {
+        const { id } = createSenderRequestFromHttpRequestLog;
+        setNewSenderReqId(id);
+        setCopiedReqNotifOpen(true);
+      },
     });
     handleContextMenuClose();
   };
@@ -56,23 +54,6 @@ 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 />
@@ -98,7 +79,6 @@ export function RequestLogs(): JSX.Element {
                 activeRowId={id}
                 onRowClick={handleRowClick}
                 onContextMenu={handleRowContextClick}
-                rowActions={rowActions}
               />
             </Box>
           </Box>

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

@@ -154,6 +154,7 @@ 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,6 +34,7 @@ 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,7 +9,6 @@ import {
   Table,
   TableBody,
   TableCell,
-  TableCellProps,
   TableContainer,
   TableHead,
   TableRow,
@@ -74,19 +73,6 @@ 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}>
@@ -118,12 +104,19 @@ export function KeyValuePairTable({ items, onChange, onDelete }: KeyValuePairTab
           >
             {items.map(({ key, value }, idx) => (
               <StyledTableRow key={idx} hover>
-                <KeyTableCell
+                <TableCell
                   component="th"
                   scope="row"
                   onClick={(e) => {
                     !onChange && handleCellClick(e);
                   }}
+                  sx={{
+                    ...(!onChange && {
+                      "&:hover": {
+                        cursor: "copy",
+                      },
+                    }),
+                  }}
                 >
                   {!onChange && <span>{key}</span>}
                   {onChange && (
@@ -137,11 +130,20 @@ export function KeyValuePairTable({ items, onChange, onDelete }: KeyValuePairTab
                       }}
                     />
                   )}
-                </KeyTableCell>
-                <ValueTableCell
+                </TableCell>
+                <TableCell
                   onClick={(e) => {
                     !onChange && handleCellClick(e);
                   }}
+                  sx={{
+                    width: "60%",
+                    wordBreak: "break-all",
+                    ...(!onChange && {
+                      "&:hover": {
+                        cursor: "copy",
+                      },
+                    }),
+                  }}
                 >
                   {!onChange && value}
                   {onChange && (
@@ -155,7 +157,7 @@ export function KeyValuePairTable({ items, onChange, onDelete }: KeyValuePairTab
                       }}
                     />
                   )}
-                </ValueTableCell>
+                </TableCell>
                 {onDelete && (
                   <TableCell>
                     <div className="delete-button">

admin/src/lib/components/RequestsTable.tsx

@@ -64,11 +64,10 @@ 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, rowActions } = props;
+  const { requests, activeRowId, onRowClick, onContextMenu } = props;
 
   return (
     <TableContainer sx={{ overflowX: "initial" }}>
@@ -79,7 +78,6 @@ export default function RequestsTable(props: Props): JSX.Element {
             <TableCell>Origin</TableCell>
             <TableCell>Path</TableCell>
             <TableCell>Status</TableCell>
-            {rowActions && <TableCell padding="checkbox" />}
           </TableRow>
         </TableHead>
         <TableBody>
@@ -106,7 +104,6 @@ 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>
             );
           })}