mirror of
https://github.com/dstotijn/hetty.git
synced 2025-07-01 18:47:29 -04:00
Compare commits
1 Commits
Author | SHA1 | Date | |
---|---|---|---|
b41fe29850 |
@ -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>
|
||||
|
@ -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);
|
||||
},
|
||||
});
|
||||
|
@ -34,7 +34,6 @@ interface Props {
|
||||
}
|
||||
|
||||
function Editor({ content, contentType, monacoOptions, onChange }: Props): JSX.Element {
|
||||
console.log(content);
|
||||
return (
|
||||
<MonacoEditor
|
||||
language={languageForContentType(contentType)}
|
||||
|
@ -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">
|
||||
|
@ -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>
|
||||
);
|
||||
})}
|
||||
|
Reference in New Issue
Block a user