Compare commits

..

1 Commits

Author SHA1 Message Date
b41fe29850 Add "Copy to Sender" table action 2022-02-26 08:51:36 +01:00
5 changed files with 49 additions and 30 deletions

View File

@ -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>

View File

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

View File

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

View File

@ -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>
<TableCell
</KeyTableCell>
<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">

View File

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