Tidy up admin structure

This commit is contained in:
David Stotijn 2022-02-23 15:20:23 +01:00
parent efc20564c1
commit 11f70282d7
No known key found for this signature in database
GPG key ID: B23243A9C47CEE2D
80 changed files with 1525 additions and 1206 deletions

2
.gitignore vendored
View file

@ -1,4 +1,4 @@
/.vscode
*.vscode
/dist
/hetty
/cmd/hetty/admin

View file

@ -1,18 +1,51 @@
{
"extends": ["next/core-web-vitals", "prettier"],
"root": true,
"extends": ["next/core-web-vitals", "prettier", "plugin:@typescript-eslint/recommended", "plugin:import/typescript"],
"plugins": ["prettier", "@typescript-eslint", "import"],
"ignorePatterns": ["next*", "src/lib/graphql/generated.tsx"],
"settings": {
"import/parsers": {
"@typescript-eslint/parser": [".ts", ".tsx"]
},
"import/resolver": {
"typescript": {
"alwaysTryTypes": true
}
}
},
"rules": {
"prettier/prettier": ["error"],
"@next/next/no-css-tags": "off",
"@typescript-eslint/no-unused-vars": "off",
"unused-imports/no-unused-imports": "error",
"unused-imports/no-unused-vars": [
"no-unused-vars": "off",
"@typescript-eslint/no-unused-vars": "error",
"import/default": "off",
"import/no-unresolved": "error",
"import/named": "error",
"import/namespace": "error",
"import/export": "error",
"import/no-deprecated": "error",
"import/no-cycle": "error",
"import/no-named-as-default": "warn",
"import/no-named-as-default-member": "warn",
"import/no-duplicates": "warn",
"import/newline-after-import": "warn",
"import/order": [
"warn",
{
"vars": "all",
"varsIgnorePattern": "^_",
"args": "after-used",
"argsIgnorePattern": "^_"
"alphabetize": { "order": "asc", "caseInsensitive": false },
"newlines-between": "always",
"groups": ["builtin", "external", "parent", "sibling", "index"]
}
],
"import/no-unused-modules": [
"error",
{
"missingExports": true,
"ignoreExports": ["./src/pages"]
}
]
},
"plugins": ["unused-imports", "prettier"]
}
}

View file

@ -2,7 +2,7 @@ overwrite: true
schema: "../pkg/api/schema.graphql"
documents: "src/**/*.graphql"
generates:
src/generated/graphql.tsx:
src/lib/graphql/generated.tsx:
plugins:
- "typescript"
- "typescript-operations"

View file

@ -44,8 +44,9 @@
"eslint": "^8.7.0",
"eslint-config-next": "12.0.8",
"eslint-config-prettier": "^8.3.0",
"eslint-import-resolver-typescript": "^2.5.0",
"eslint-plugin-import": "^2.25.4",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-unused-imports": "^2.0.0",
"prettier": "^2.1.2",
"typescript": "^4.0.3",
"webpack": "^5.67.0"

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 454 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 840 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

View file

@ -0,0 +1 @@
{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}

View file

@ -1,117 +0,0 @@
import { gql, useMutation } from "@apollo/client";
import { Box, Button, CircularProgress, TextField, Typography } from "@mui/material";
import AddIcon from "@mui/icons-material/Add";
import React, { useState } from "react";
const CREATE_PROJECT = gql`
mutation CreateProject($name: String!) {
createProject(name: $name) {
id
name
}
}
`;
const OPEN_PROJECT = gql`
mutation OpenProject($id: ID!) {
openProject(id: $id) {
id
name
isActive
}
}
`;
function NewProject(): JSX.Element {
const [name, setName] = useState("");
const [createProject, { error: createProjErr, loading: createProjLoading }] = useMutation(CREATE_PROJECT, {
onError: () => {},
onCompleted(data) {
setName("");
openProject({ variables: { id: data.createProject.id } });
},
});
const [openProject, { error: openProjErr, loading: openProjLoading }] = useMutation(OPEN_PROJECT, {
onError: () => {},
update(cache, { data: { openProject } }) {
cache.modify({
fields: {
activeProject() {
const activeProjRef = cache.writeFragment({
id: openProject.id,
data: openProject,
fragment: gql`
fragment ActiveProject on Project {
id
name
isActive
type
}
`,
});
return activeProjRef;
},
projects(_, { DELETE }) {
cache.writeFragment({
id: openProject.id,
data: openProject,
fragment: gql`
fragment OpenProject on Project {
id
name
isActive
type
}
`,
});
return DELETE;
},
},
});
},
});
const handleCreateAndOpenProjectForm = (e: React.SyntheticEvent) => {
e.preventDefault();
createProject({ variables: { name } });
};
return (
<div>
<Box mb={3}>
<Typography variant="h6">New project</Typography>
</Box>
<form onSubmit={handleCreateAndOpenProjectForm} autoComplete="off">
<TextField
sx={{
mr: 2,
}}
color="primary"
size="small"
label="Project name"
placeholder="Project name…"
onChange={(e) => setName(e.target.value)}
error={Boolean(createProjErr || openProjErr)}
helperText={(createProjErr && createProjErr.message) || (openProjErr && openProjErr.message)}
/>
<Button
type="submit"
variant="contained"
color="primary"
size="large"
sx={{
pt: 0.9,
pb: 0.7,
}}
disabled={createProjLoading || openProjLoading}
startIcon={createProjLoading || openProjLoading ? <CircularProgress size={22} /> : <AddIcon />}
>
Create & open project
</Button>
</form>
</div>
);
}
export default NewProject;

View file

@ -1,16 +0,0 @@
import { gql, useMutation } from "@apollo/client";
import { HTTP_REQUEST_LOGS } from "./useHttpRequestLogs";
const CLEAR_HTTP_REQUEST_LOG = gql`
mutation ClearHTTPRequestLog {
clearHTTPRequestLog {
success
}
}
`;
export function useClearHTTPRequestLog() {
return useMutation(CLEAR_HTTP_REQUEST_LOG, {
refetchQueries: [{ query: HTTP_REQUEST_LOGS }],
});
}

View file

@ -1,13 +0,0 @@
import { gql, useMutation } from "@apollo/client";
const CREATE_SENDER_REQUEST = gql`
mutation CreateSenderRequest($request: SenderRequestInput!) {
createSenderRequest(request: $request) {
id
}
}
`;
export default function useCreateSenderRequest() {
return useMutation(CREATE_SENDER_REQUEST);
}

View file

@ -1,22 +0,0 @@
import { gql, useQuery } from "@apollo/client";
export const HTTP_REQUEST_LOGS = gql`
query HttpRequestLogs {
httpRequestLogs {
id
method
url
timestamp
response {
statusCode
statusReason
}
}
}
`;
export function useHttpRequestLogs() {
return useQuery(HTTP_REQUEST_LOGS, {
pollInterval: 1000,
});
}

View file

@ -1,4 +1,11 @@
import React from "react";
import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
import ChevronRightIcon from "@mui/icons-material/ChevronRight";
import FolderIcon from "@mui/icons-material/Folder";
import HomeIcon from "@mui/icons-material/Home";
import LocationSearchingIcon from "@mui/icons-material/LocationSearching";
import MenuIcon from "@mui/icons-material/Menu";
import SendIcon from "@mui/icons-material/Send";
import SettingsEthernetIcon from "@mui/icons-material/SettingsEthernet";
import {
Theme,
useTheme,
@ -18,14 +25,7 @@ import MuiDrawer from "@mui/material/Drawer";
import MuiListItemButton, { ListItemButtonProps } from "@mui/material/ListItemButton";
import MuiListItemIcon, { ListItemIconProps } from "@mui/material/ListItemIcon";
import Link from "next/link";
import MenuIcon from "@mui/icons-material/Menu";
import HomeIcon from "@mui/icons-material/Home";
import SettingsEthernetIcon from "@mui/icons-material/SettingsEthernet";
import SendIcon from "@mui/icons-material/Send";
import FolderIcon from "@mui/icons-material/Folder";
import LocationSearchingIcon from "@mui/icons-material/LocationSearching";
import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
import ChevronRightIcon from "@mui/icons-material/ChevronRight";
import React, { useState } from "react";
export enum Page {
Home,
@ -133,7 +133,7 @@ interface Props {
export function Layout({ title, page, children }: Props): JSX.Element {
const theme = useTheme();
const [open, setOpen] = React.useState(false);
const [open, setOpen] = useState(false);
const handleDrawerOpen = () => {
setOpen(true);
@ -247,5 +247,3 @@ export function Layout({ title, page, children }: Props): JSX.Element {
</Box>
);
}
export default Layout;

View file

@ -0,0 +1,67 @@
import AddIcon from "@mui/icons-material/Add";
import { Box, Button, CircularProgress, TextField, Typography } from "@mui/material";
import React, { useState } from "react";
import useOpenProjectMutation from "../hooks/useOpenProjectMutation";
import { useCreateProjectMutation } from "lib/graphql/generated";
function NewProject(): JSX.Element {
const [name, setName] = useState("");
const [createProject, createProjResult] = useCreateProjectMutation({
onCompleted(data) {
setName("");
if (data?.createProject) {
openProject({ variables: { id: data.createProject?.id } });
}
},
});
const [openProject, openProjResult] = useOpenProjectMutation();
const handleCreateAndOpenProjectForm = (e: React.SyntheticEvent) => {
e.preventDefault();
createProject({ variables: { name } });
};
return (
<div>
<Box mb={3}>
<Typography variant="h6">New project</Typography>
</Box>
<form onSubmit={handleCreateAndOpenProjectForm} autoComplete="off">
<TextField
sx={{
mr: 2,
}}
color="primary"
size="small"
label="Project name"
placeholder="Project name…"
onChange={(e) => setName(e.target.value)}
error={Boolean(createProjResult.error || openProjResult.error)}
helperText={
(createProjResult.error && createProjResult.error.message) ||
(openProjResult.error && openProjResult.error.message)
}
/>
<Button
type="submit"
variant="contained"
color="primary"
size="large"
sx={{
pt: 0.9,
pb: 0.7,
}}
disabled={createProjResult.loading || openProjResult.loading}
startIcon={createProjResult.loading || openProjResult.loading ? <CircularProgress size={22} /> : <AddIcon />}
>
Create & open project
</Button>
</form>
</div>
);
}
export default NewProject;

View file

@ -1,4 +1,8 @@
import { gql, useMutation, useQuery } from "@apollo/client";
import CloseIcon from "@mui/icons-material/Close";
import DeleteIcon from "@mui/icons-material/Delete";
import DescriptionIcon from "@mui/icons-material/Description";
import LaunchIcon from "@mui/icons-material/Launch";
import { Alert } from "@mui/lab";
import {
Avatar,
Box,
@ -21,110 +25,25 @@ import {
Typography,
useTheme,
} from "@mui/material";
import CloseIcon from "@mui/icons-material/Close";
import DescriptionIcon from "@mui/icons-material/Description";
import DeleteIcon from "@mui/icons-material/Delete";
import LaunchIcon from "@mui/icons-material/Launch";
import { Alert } from "@mui/lab";
import React, { useState } from "react";
import { Project } from "../../lib/Project";
import useOpenProjectMutation from "../hooks/useOpenProjectMutation";
const PROJECTS = gql`
query Projects {
projects {
id
name
isActive
}
}
`;
const OPEN_PROJECT = gql`
mutation OpenProject($id: ID!) {
openProject(id: $id) {
id
name
isActive
}
}
`;
const CLOSE_PROJECT = gql`
mutation CloseProject {
closeProject {
success
}
}
`;
const DELETE_PROJECT = gql`
mutation DeleteProject($id: ID!) {
deleteProject(id: $id) {
success
}
}
`;
import {
ProjectsQuery,
useCloseProjectMutation,
useDeleteProjectMutation,
useProjectsQuery,
} from "lib/graphql/generated";
function ProjectList(): JSX.Element {
const theme = useTheme();
const {
loading: projLoading,
error: projErr,
data: projData,
} = useQuery<{ projects: Project[] }>(PROJECTS, {
fetchPolicy: "network-only",
});
const [openProject, { error: openProjErr, loading: openProjLoading }] = useMutation<{ openProject: Project }>(
OPEN_PROJECT,
{
errorPolicy: "all",
onError: () => {},
update(cache, { data }) {
cache.modify({
fields: {
activeProject() {
const activeProjRef = cache.writeFragment({
data: data?.openProject,
fragment: gql`
fragment ActiveProject on Project {
id
name
isActive
type
}
`,
});
return activeProjRef;
},
projects(_, { DELETE }) {
cache.writeFragment({
id: data?.openProject.id,
data: openProject,
fragment: gql`
fragment OpenProject on Project {
id
name
isActive
type
}
`,
});
return DELETE;
},
httpRequestLogFilter(_, { DELETE }) {
return DELETE;
},
},
});
},
}
);
const [closeProject, { error: closeProjErr, client }] = useMutation(CLOSE_PROJECT, {
const projResult = useProjectsQuery({ fetchPolicy: "network-only" });
const [openProject, openProjResult] = useOpenProjectMutation();
const [closeProject, closeProjResult] = useCloseProjectMutation({
errorPolicy: "all",
onError: () => {},
onCompleted() {
client.resetStore();
closeProjResult.client.resetStore();
},
update(cache) {
cache.modify({
@ -142,9 +61,8 @@ function ProjectList(): JSX.Element {
});
},
});
const [deleteProject, { loading: deleteProjLoading, error: deleteProjErr }] = useMutation(DELETE_PROJECT, {
const [deleteProject, deleteProjResult] = useDeleteProjectMutation({
errorPolicy: "all",
onError: () => {},
update(cache) {
cache.modify({
fields: {
@ -158,14 +76,16 @@ function ProjectList(): JSX.Element {
},
});
const [deleteProj, setDeleteProj] = useState<Project>();
const [deleteProj, setDeleteProj] = useState<ProjectsQuery["projects"][number]>();
const [deleteDiagOpen, setDeleteDiagOpen] = useState(false);
const handleDeleteButtonClick = (project: any) => {
const handleDeleteButtonClick = (project: ProjectsQuery["projects"][number]) => {
setDeleteProj(project);
setDeleteDiagOpen(true);
};
const handleDeleteConfirm = () => {
deleteProject({ variables: { id: deleteProj?.id } });
if (deleteProj) {
deleteProject({ variables: { id: deleteProj.id } });
}
};
const handleDeleteCancel = () => {
setDeleteDiagOpen(false);
@ -189,7 +109,9 @@ function ProjectList(): JSX.Element {
<DialogContentText>
Deleting a project permanently removes all its data from the database. This action is irreversible.
</DialogContentText>
{deleteProjErr && <Alert severity="error">Error closing project: {deleteProjErr.message}</Alert>}
{deleteProjResult.error && (
<Alert severity="error">Error closing project: {deleteProjResult.error.message}</Alert>
)}
</DialogContent>
<DialogActions>
<Button onClick={handleDeleteCancel} autoFocus color="secondary" variant="contained">
@ -204,7 +126,7 @@ function ProjectList(): JSX.Element {
},
}}
onClick={handleDeleteConfirm}
disabled={deleteProjLoading}
disabled={deleteProjResult.loading}
variant="contained"
>
Delete
@ -228,16 +150,18 @@ function ProjectList(): JSX.Element {
</Box>
<Box mb={4}>
{projLoading && <CircularProgress />}
{projErr && <Alert severity="error">Error fetching projects: {projErr.message}</Alert>}
{openProjErr && <Alert severity="error">Error opening project: {openProjErr.message}</Alert>}
{closeProjErr && <Alert severity="error">Error closing project: {closeProjErr.message}</Alert>}
{projResult.loading && <CircularProgress />}
{projResult.error && <Alert severity="error">Error fetching projects: {projResult.error.message}</Alert>}
{openProjResult.error && <Alert severity="error">Error opening project: {openProjResult.error.message}</Alert>}
{closeProjResult.error && (
<Alert severity="error">Error closing project: {closeProjResult.error.message}</Alert>
)}
</Box>
{projData && projData.projects.length > 0 && (
{projResult.data && projResult.data.projects.length > 0 && (
<Paper>
<List>
{projData.projects.map((project) => (
{projResult.data.projects.map((project) => (
<ListItem key={project.id}>
<ListItemAvatar>
<Avatar
@ -266,7 +190,7 @@ function ProjectList(): JSX.Element {
<Tooltip title="Open project">
<span>
<IconButton
disabled={openProjLoading || projLoading}
disabled={openProjResult.loading || projResult.loading}
onClick={() =>
openProject({
variables: { id: project.id },
@ -291,7 +215,7 @@ function ProjectList(): JSX.Element {
</List>
</Paper>
)}
{projData?.projects.length === 0 && (
{projResult.data?.projects.length === 0 && (
<Alert severity="info">There are no projects. Create one to get started.</Alert>
)}
</div>

View file

@ -0,0 +1,5 @@
mutation CloseProject {
closeProject {
success
}
}

View file

@ -0,0 +1,6 @@
mutation CreateProject($name: String!) {
createProject(name: $name) {
id
name
}
}

View file

@ -0,0 +1,5 @@
mutation DeleteProject($id: ID!) {
deleteProject(id: $id) {
success
}
}

View file

@ -0,0 +1,7 @@
mutation OpenProject($id: ID!) {
openProject(id: $id) {
id
name
isActive
}
}

View file

@ -0,0 +1,7 @@
query Projects {
projects {
id
name
isActive
}
}

View file

@ -0,0 +1,47 @@
import { gql } from "@apollo/client";
import { useOpenProjectMutation as _useOpenProjectMutation } from "lib/graphql/generated";
export default function useOpenProjectMutation() {
return _useOpenProjectMutation({
errorPolicy: "all",
update(cache, { data }) {
cache.modify({
fields: {
activeProject() {
const activeProjRef = cache.writeFragment({
data: data?.openProject,
fragment: gql`
fragment ActiveProject on Project {
id
name
isActive
type
}
`,
});
return activeProjRef;
},
projects(_, { DELETE }) {
cache.writeFragment({
id: data?.openProject?.id,
data: data?.openProject,
fragment: gql`
fragment OpenProject on Project {
id
name
isActive
type
}
`,
});
return DELETE;
},
httpRequestLogFilter(_, { DELETE }) {
return DELETE;
},
},
});
},
});
}

View file

@ -1,10 +1,10 @@
import React, { useState } from "react";
import Button from "@mui/material/Button";
import Dialog from "@mui/material/Dialog";
import DialogActions from "@mui/material/DialogActions";
import DialogContent from "@mui/material/DialogContent";
import DialogContentText from "@mui/material/DialogContentText";
import DialogTitle from "@mui/material/DialogTitle";
import React, { useState } from "react";
export function useConfirmationDialog() {
const [isOpen, setIsOpen] = useState(false);

View file

@ -1,18 +1,18 @@
import { Table, TableBody, TableCell, TableContainer, TableRow, Snackbar } from "@mui/material";
import { Alert } from "@mui/lab";
import { Table, TableBody, TableCell, TableContainer, TableRow, Snackbar, SxProps, Theme } from "@mui/material";
import React, { useState } from "react";
const baseCellStyle = {
const baseCellStyle: SxProps<Theme> = {
px: 0,
py: 0.33,
verticalAlign: "top",
border: "none",
whiteSpace: "nowrap" as any,
whiteSpace: "nowrap",
overflow: "hidden",
textOverflow: "ellipsis",
"&:hover": {
color: "primary.main",
whiteSpace: "inherit" as any,
whiteSpace: "inherit",
overflow: "inherit",
textOverflow: "inherit",
cursor: "copy",

View file

@ -1,42 +1,17 @@
import { gql, useQuery } from "@apollo/client";
import Alert from "@mui/lab/Alert";
import { Box, Grid, Paper, CircularProgress } from "@mui/material";
import ResponseDetail from "./ResponseDetail";
import RequestDetail from "./RequestDetail";
import Alert from "@mui/lab/Alert";
import ResponseDetail from "./ResponseDetail";
const HTTP_REQUEST_LOG = gql`
query HttpRequestLog($id: ID!) {
httpRequestLog(id: $id) {
id
method
url
proto
headers {
key
value
}
body
response {
proto
headers {
key
value
}
statusCode
statusReason
body
}
}
}
`;
import { useHttpRequestLogQuery } from "lib/graphql/generated";
interface Props {
requestId: string;
}
function LogDetail({ requestId: id }: Props): JSX.Element {
const { loading, error, data } = useQuery(HTTP_REQUEST_LOG, {
const { loading, error, data } = useHttpRequestLogQuery({
variables: { id },
});
@ -47,7 +22,7 @@ function LogDetail({ requestId: id }: Props): JSX.Element {
return <Alert severity="error">Error fetching logs details: {error.message}</Alert>;
}
if (!data.httpRequestLog) {
if (data && !data.httpRequestLog) {
return (
<Alert severity="warning">
Request <strong>{id}</strong> was not found.
@ -55,20 +30,24 @@ function LogDetail({ requestId: id }: Props): JSX.Element {
);
}
const { method, url, proto, headers, body, response } = data.httpRequestLog;
if (!data?.httpRequestLog) {
return <div></div>;
}
const httpRequestLog = data.httpRequestLog;
return (
<div>
<Grid container item spacing={2}>
<Grid item xs={6}>
<Box component={Paper}>
<RequestDetail request={{ method, url, proto, headers, body }} />
<RequestDetail request={httpRequestLog} />
</Box>
</Grid>
<Grid item xs={6}>
{response && (
{httpRequestLog.response && (
<Box component={Paper}>
<ResponseDetail response={response} />
<ResponseDetail response={httpRequestLog.response} />
</Box>
)}
</Grid>

View file

@ -1,17 +1,20 @@
import { useRouter } from "next/router";
import Link from "next/link";
import { Box, CircularProgress, Link as MaterialLink, Typography } from "@mui/material";
import Alert from "@mui/lab/Alert";
import { Box, CircularProgress, Link as MaterialLink, Typography } from "@mui/material";
import Link from "next/link";
import { useRouter } from "next/router";
import RequestList from "./RequestList";
import LogDetail from "./LogDetail";
import CenteredPaper from "../common/CenteredPaper";
import { useHttpRequestLogs } from "./hooks/useHttpRequestLogs";
import RequestList from "./RequestList";
function LogsOverview(): JSX.Element {
import CenteredPaper from "lib/components/CenteredPaper";
import { useHttpRequestLogsQuery } from "lib/graphql/generated";
export default function LogsOverview(): JSX.Element {
const router = useRouter();
const detailReqLogId = router.query.id as string | undefined;
const { loading, error, data } = useHttpRequestLogs();
const { loading, error, data } = useHttpRequestLogsQuery({
pollInterval: 1000,
});
const handleLogClick = (reqId: string) => {
router.push("/proxy/logs?id=" + reqId, undefined, {
@ -37,12 +40,12 @@ function LogsOverview(): JSX.Element {
return <Alert severity="error">Error fetching logs: {error.message}</Alert>;
}
const { httpRequestLogs: logs } = data;
const logs = data?.httpRequestLogs || [];
return (
<div>
<Box mb={2}>
<RequestList logs={logs || []} selectedReqLogId={detailReqLogId} onLogClick={handleLogClick} />
<RequestList logs={logs} selectedReqLogId={detailReqLogId} onLogClick={handleLogClick} />
</Box>
<Box>
{detailReqLogId && <LogDetail requestId={detailReqLogId} />}
@ -55,5 +58,3 @@ function LogsOverview(): JSX.Element {
</div>
);
}
export default LogsOverview;

View file

@ -1,17 +1,13 @@
import React from "react";
import { Typography, Box, Divider } from "@mui/material";
import React from "react";
import HttpHeadersTable from "./HttpHeadersTable";
import Editor from "../common/Editor";
import Editor from "lib/components/Editor";
import { HttpRequestLogQuery } from "lib/graphql/generated";
interface Props {
request: {
method: string;
url: string;
proto: string;
headers: Array<{ key: string; value: string }>;
body?: string;
};
request: NonNullable<HttpRequestLogQuery["httpRequestLog"]>;
}
function RequestDetail({ request }: Props): JSX.Element {

View file

@ -14,16 +14,15 @@ import {
Alert,
Link,
} from "@mui/material";
import HttpStatusIcon from "../common/HttpStatusIcon";
import CenteredPaper from "../common/CenteredPaper";
import { RequestLog } from "../../lib/requestLogs";
import useContextMenu from "../common/useContextMenu";
import React, { useState } from "react";
import { useCreateSenderRequestFromHttpRequestLogMutation } from "../../generated/graphql";
import CenteredPaper from "lib/components/CenteredPaper";
import HttpStatusIcon from "lib/components/HttpStatusIcon";
import useContextMenu from "lib/components/useContextMenu";
import { HttpRequestLogsQuery, useCreateSenderRequestFromHttpRequestLogMutation } from "lib/graphql/generated";
interface Props {
logs: RequestLog[];
logs: NonNullable<HttpRequestLogsQuery["httpRequestLogs"]>;
selectedReqLogId?: string;
onLogClick(requestId: string): void;
}
@ -44,7 +43,7 @@ export default function RequestList({ logs, onLogClick, selectedReqLogId }: Prop
}
interface RequestListTableProps {
logs: RequestLog[];
logs: HttpRequestLogsQuery["httpRequestLogs"];
selectedReqLogId?: string;
onLogClick(requestId: string): void;
}
@ -71,8 +70,8 @@ function RequestListTable({ logs, selectedReqLogId, onLogClick }: RequestListTab
handleContextMenuClose();
};
const [newSenderReqId, setNewSenderReqId] = React.useState("");
const [copiedReqNotifOpen, setCopiedReqNotifOpen] = React.useState(false);
const [newSenderReqId, setNewSenderReqId] = useState("");
const [copiedReqNotifOpen, setCopiedReqNotifOpen] = useState(false);
const handleCloseCopiedNotif = (_: Event | React.SyntheticEvent, reason?: string) => {
if (reason === "clickaway") {
return;
@ -120,7 +119,7 @@ function RequestListTable({ logs, selectedReqLogId, onLogClick }: RequestListTab
whiteSpace: "nowrap",
overflow: "hidden",
textOverflow: "ellipsis",
} as any;
};
return (
<TableRow
@ -140,7 +139,7 @@ function RequestListTable({ logs, selectedReqLogId, onLogClick }: RequestListTab
handleContextMenu(e);
}}
>
<TableCell style={{ ...cellStyle, width: "100px" }}>
<TableCell sx={{ ...cellStyle, width: "100px" }}>
<code>{method}</code>
</TableCell>
<TableCell sx={{ ...cellStyle, maxWidth: "100px" }}>{origin}</TableCell>

View file

@ -1,21 +1,18 @@
import { Typography, Box, Divider } from "@mui/material";
import HttpStatusIcon from "../common/HttpStatusIcon";
import Editor from "../common/Editor";
import HttpHeadersTable from "./HttpHeadersTable";
import Editor from "lib/components/Editor";
import HttpStatusIcon from "lib/components/HttpStatusIcon";
import { HttpRequestLogQuery } from "lib/graphql/generated";
interface Props {
response: {
proto: string;
statusCode: number;
statusReason: string;
headers: Array<{ key: string; value: string }>;
body?: string;
};
response: NonNullable<NonNullable<HttpRequestLogQuery["httpRequestLog"]>["response"]>;
}
function ResponseDetail({ response }: Props): JSX.Element {
const contentType = response.headers.find((header) => header.key === "Content-Type")?.value;
const contentType = response.headers.find((header) => header.key.toLowerCase() === "content-type")?.value;
return (
<div>
<Box p={2}>

View file

@ -1,3 +1,7 @@
import DeleteIcon from "@mui/icons-material/Delete";
import FilterListIcon from "@mui/icons-material/FilterList";
import SearchIcon from "@mui/icons-material/Search";
import { Alert } from "@mui/lab";
import {
Box,
Checkbox,
@ -11,68 +15,44 @@ import {
useTheme,
} from "@mui/material";
import IconButton from "@mui/material/IconButton";
import SearchIcon from "@mui/icons-material/Search";
import FilterListIcon from "@mui/icons-material/FilterList";
import DeleteIcon from "@mui/icons-material/Delete";
import React, { useRef, useState } from "react";
import { gql, useMutation, useQuery } from "@apollo/client";
import { withoutTypename } from "../../lib/omitTypename";
import { Alert } from "@mui/lab";
import { useClearHTTPRequestLog } from "./hooks/useClearHTTPRequestLog";
import { ConfirmationDialog, useConfirmationDialog } from "./ConfirmationDialog";
const FILTER = gql`
query HttpRequestLogFilter {
httpRequestLogFilter {
onlyInScope
searchExpression
}
}
`;
const SET_FILTER = gql`
mutation SetHttpRequestLogFilter($filter: HttpRequestLogFilterInput) {
setHttpRequestLogFilter(filter: $filter) {
onlyInScope
searchExpression
}
}
`;
export interface SearchFilter {
onlyInScope: boolean;
searchExpression: string;
}
import {
HttpRequestLogFilterDocument,
HttpRequestLogsDocument,
useClearHttpRequestLogMutation,
useHttpRequestLogFilterQuery,
useSetHttpRequestLogFilterMutation,
} from "lib/graphql/generated";
import { withoutTypename } from "lib/graphql/omitTypename";
function Search(): JSX.Element {
const theme = useTheme();
const [searchExpr, setSearchExpr] = useState("");
const {
loading: filterLoading,
error: filterErr,
data: filter,
} = useQuery(FILTER, {
const filterResult = useHttpRequestLogFilterQuery({
onCompleted: (data) => {
setSearchExpr(data.httpRequestLogFilter?.searchExpression || "");
},
});
const filter = filterResult.data?.httpRequestLogFilter;
const [setFilterMutate, { error: setFilterErr, loading: setFilterLoading }] = useMutation<{
setHttpRequestLogFilter: SearchFilter | null;
}>(SET_FILTER, {
const [setFilterMutate, setFilterResult] = useSetHttpRequestLogFilterMutation({
update(cache, { data }) {
cache.writeQuery({
query: FILTER,
query: HttpRequestLogFilterDocument,
data: {
httpRequestLogFilter: data?.setHttpRequestLogFilter,
},
});
},
onError: () => {},
});
const [clearHTTPRequestLog, clearHTTPRequestLogResult] = useClearHTTPRequestLog();
const [clearHTTPRequestLog, clearHTTPRequestLogResult] = useClearHttpRequestLogMutation({
refetchQueries: [{ query: HttpRequestLogsDocument }],
});
const clearHTTPConfirmationDialog = useConfirmationDialog();
const filterRef = useRef<HTMLFormElement>(null);
@ -82,7 +62,7 @@ function Search(): JSX.Element {
setFilterMutate({
variables: {
filter: {
...withoutTypename(filter?.httpRequestLogFilter),
...withoutTypename(filter),
searchExpression: searchExpr,
},
},
@ -100,8 +80,8 @@ function Search(): JSX.Element {
return (
<Box>
<Error prefix="Error fetching filter" error={filterErr} />
<Error prefix="Error setting filter" error={setFilterErr} />
<Error prefix="Error fetching filter" error={filterResult.error} />
<Error prefix="Error setting filter" error={setFilterResult.error} />
<Error prefix="Error clearing all HTTP logs" error={clearHTTPRequestLogResult.error} />
<Box style={{ display: "flex", flex: 1 }}>
<ClickAwayListener onClickAway={handleClickAway}>
@ -121,10 +101,10 @@ function Search(): JSX.Element {
onClick={() => setFilterOpen(!filterOpen)}
sx={{
p: 1,
color: filter?.httpRequestLogFilter?.onlyInScope ? "primary.main" : "inherit",
color: filter?.onlyInScope ? "primary.main" : "inherit",
}}
>
{filterLoading || setFilterLoading ? (
{filterResult.loading || setFilterResult.loading ? (
<CircularProgress sx={{ color: theme.palette.text.primary }} size={23} />
) : (
<FilterListIcon />
@ -162,13 +142,13 @@ function Search(): JSX.Element {
<FormControlLabel
control={
<Checkbox
checked={filter?.httpRequestLogFilter?.onlyInScope ? true : false}
disabled={filterLoading || setFilterLoading}
checked={filter?.onlyInScope ? true : false}
disabled={filterResult.loading || setFilterResult.loading}
onChange={(e) =>
setFilterMutate({
variables: {
filter: {
...withoutTypename(filter?.httpRequestLogFilter),
...withoutTypename(filter),
onlyInScope: e.target.checked,
},
},

View file

@ -0,0 +1,5 @@
mutation ClearHTTPRequestLog {
clearHTTPRequestLog {
success
}
}

View file

@ -0,0 +1,23 @@
query HttpRequestLog($id: ID!) {
httpRequestLog(id: $id) {
id
method
url
proto
headers {
key
value
}
body
response {
proto
headers {
key
value
}
statusCode
statusReason
body
}
}
}

View file

@ -0,0 +1,6 @@
query HttpRequestLogFilter {
httpRequestLogFilter {
onlyInScope
searchExpression
}
}

View file

@ -0,0 +1,12 @@
query HttpRequestLogs {
httpRequestLogs {
id
method
url
timestamp
response {
statusCode
statusReason
}
}
}

View file

@ -0,0 +1,6 @@
mutation SetHttpRequestLogFilter($filter: HttpRequestLogFilterInput) {
setHttpRequestLogFilter(filter: $filter) {
onlyInScope
searchExpression
}
}

View file

@ -1,4 +1,6 @@
import { gql, useApolloClient, useMutation } from "@apollo/client";
import { useApolloClient } from "@apollo/client";
import AddIcon from "@mui/icons-material/Add";
import { Alert } from "@mui/lab";
import {
Box,
Button,
@ -10,35 +12,22 @@ import {
RadioGroup,
TextField,
} from "@mui/material";
import AddIcon from "@mui/icons-material/Add";
import { Alert } from "@mui/lab";
import React from "react";
import { SCOPE } from "./Rules";
import { ScopeRule } from "../../lib/scope";
import React, { useState } from "react";
const SET_SCOPE = gql`
mutation SetScope($scope: [ScopeRuleInput!]!) {
setScope(scope: $scope) {
url
}
}
`;
import { ScopeDocument, ScopeQuery, ScopeRule, useSetScopeMutation } from "lib/graphql/generated";
function AddRule(): JSX.Element {
const [ruleType, setRuleType] = React.useState("url");
const [expression, setExpression] = React.useState("");
const [ruleType, setRuleType] = useState("url");
const [expression, setExpression] = useState("");
const client = useApolloClient();
const [setScope, { error, loading }] = useMutation(SET_SCOPE, {
onError() {},
onCompleted() {
setExpression("");
},
update(_, { data: { setScope } }) {
const [setScope, { error, loading }] = useSetScopeMutation({
onCompleted({ setScope }) {
client.writeQuery({
query: SCOPE,
query: ScopeDocument,
data: { scope: setScope },
});
setExpression("");
},
});
@ -50,8 +39,8 @@ function AddRule(): JSX.Element {
let scope: ScopeRule[] = [];
try {
const data = client.readQuery<{ scope: ScopeRule[] }>({
query: SCOPE,
const data = client.readQuery<ScopeQuery>({
query: ScopeDocument,
});
if (data) {
scope = data.scope;

View file

@ -1,4 +1,6 @@
import { gql, useApolloClient, useMutation } from "@apollo/client";
import { useApolloClient } from "@apollo/client";
import CodeIcon from "@mui/icons-material/Code";
import DeleteIcon from "@mui/icons-material/Delete";
import {
Avatar,
Chip,
@ -9,32 +11,24 @@ import {
ListItemText,
Tooltip,
} from "@mui/material";
import CodeIcon from "@mui/icons-material/Code";
import DeleteIcon from "@mui/icons-material/Delete";
import React from "react";
import { SCOPE } from "./Rules";
import { ScopeRule } from "../../lib/scope";
const SET_SCOPE = gql`
mutation SetScope($scope: [ScopeRuleInput!]!) {
setScope(scope: $scope) {
url
}
}
`;
import { ScopeDocument, ScopeQuery, useSetScopeMutation } from "lib/graphql/generated";
type ScopeRule = ScopeQuery["scope"][number];
type RuleListItemProps = {
scope: ScopeRule[];
scope: ScopeQuery["scope"];
rule: ScopeRule;
index: number;
};
function RuleListItem({ scope, rule, index }: RuleListItemProps): JSX.Element {
const client = useApolloClient();
const [setScope, { loading }] = useMutation(SET_SCOPE, {
update(_, { data: { setScope } }) {
const [setScope, { loading }] = useSetScopeMutation({
onCompleted({ setScope }) {
client.writeQuery({
query: SCOPE,
query: ScopeDocument,
data: { scope: setScope },
});
},

View file

@ -1,20 +1,13 @@
import { gql, useQuery } from "@apollo/client";
import { CircularProgress, List } from "@mui/material";
import { Alert } from "@mui/lab";
import { CircularProgress, List } from "@mui/material";
import React from "react";
import RuleListItem from "./RuleListItem";
import { ScopeRule } from "../../lib/scope";
export const SCOPE = gql`
query Scope {
scope {
url
}
}
`;
import RuleListItem from "./RuleListItem";
import { useScopeQuery } from "lib/graphql/generated";
function Rules(): JSX.Element {
const { loading, error, data } = useQuery<{ scope: ScopeRule[] }>(SCOPE);
const { loading, error, data } = useScopeQuery();
return (
<div>

View file

@ -0,0 +1,5 @@
query Scope {
scope {
url
}
}

View file

@ -0,0 +1,5 @@
mutation SetScope($scope: [ScopeRuleInput!]!) {
setScope(scope: $scope) {
url
}
}

View file

@ -3,29 +3,30 @@ import {
Box,
BoxProps,
Button,
FormControl,
InputLabel,
FormControl,
MenuItem,
Select,
TextField,
Typography,
} from "@mui/material";
import { ComponentType, FormEventHandler, useEffect, useRef, useState } from "react";
import { AllotmentProps, PaneProps } from "allotment/dist/types/src/allotment";
import { useRouter } from "next/router";
import React, { useEffect, useRef, useState } from "react";
import { KeyValuePair, sortKeyValuePairs } from "./KeyValuePair";
import {
GetSenderRequestQuery,
HttpProtocol,
useCreateOrUpdateSenderRequestMutation,
useGetSenderRequestQuery,
useSendRequestMutation,
} from "../../generated/graphql";
import EditRequestTabs from "./EditRequestTabs";
import { KeyValuePair, sortKeyValuePairs } from "./KeyValuePair";
import Response from "./Response";
import {
GetSenderRequestQuery,
useCreateOrUpdateSenderRequestMutation,
HttpProtocol,
useGetSenderRequestQuery,
useSendRequestMutation,
} from "lib/graphql/generated";
import "allotment/dist/style.css";
import { useRouter } from "next/router";
enum HttpMethod {
Get = "GET",
@ -49,7 +50,7 @@ const httpProtoMap = new Map([
[HttpProto.Http2, HttpProtocol.Http2],
]);
function updateKeyPairItem(key: string, value: string, idx: number, items: any[]): any[] {
function updateKeyPairItem(key: string, value: string, idx: number, items: KeyValuePair[]): KeyValuePair[] {
const updated = [...items];
updated[idx] = { key, value };
@ -96,7 +97,7 @@ function queryParamsFromURL(url: string): KeyValuePair[] {
const queryParams: KeyValuePair[] = [];
const searchParams = new URLSearchParams(url.slice(questionMarkIndex + 1));
for (let [key, value] of searchParams) {
for (const [key, value] of searchParams) {
queryParams.push({ key, value });
}
@ -213,14 +214,14 @@ function EditRequest(): JSX.Element {
});
};
const handleFormSubmit: FormEventHandler = (e) => {
const handleFormSubmit: React.FormEventHandler = (e) => {
e.preventDefault();
createOrUpdateRequestAndSend();
};
const isMountedRef = useRef(false);
const [Allotment, setAllotment] = useState<
(ComponentType<AllotmentProps> & { Pane: ComponentType<PaneProps> }) | null
(React.ComponentType<AllotmentProps> & { Pane: React.ComponentType<PaneProps> }) | null
>(null);
useEffect(() => {
isMountedRef.current = true;

View file

@ -1,9 +1,10 @@
import { TabContext, TabList, TabPanel } from "@mui/lab";
import { Box, Tab } from "@mui/material";
import { useState } from "react";
import Editor from "../common/Editor";
import React, { useState } from "react";
import KeyValuePairTable, { KeyValuePair, KeyValuePairTableProps } from "./KeyValuePair";
import { KeyValuePairTable, KeyValuePair, KeyValuePairTableProps } from "./KeyValuePair";
import Editor from "lib/components/Editor";
enum TabValue {
QueryParams = "queryParams",
@ -11,7 +12,7 @@ enum TabValue {
Body = "body",
}
export type EditRequestTabsProps = {
interface EditRequestTabsProps {
queryParams: KeyValuePair[];
headers: KeyValuePair[];
onQueryParamChange: KeyValuePairTableProps["onChange"];
@ -20,7 +21,7 @@ export type EditRequestTabsProps = {
onHeaderDelete: KeyValuePairTableProps["onDelete"];
body: string;
onBodyChange: (value: string) => void;
};
}
function EditRequestTabs(props: EditRequestTabsProps): JSX.Element {
const {

View file

@ -1,8 +1,9 @@
import { TableContainer, Table, TableHead, TableRow, TableCell, Typography, Box, TableBody } from "@mui/material";
import { useRouter } from "next/router";
import { useGetSenderRequestsQuery } from "../../generated/graphql";
import CenteredPaper from "../common/CenteredPaper";
import HttpStatusIcon from "../common/HttpStatusIcon";
import CenteredPaper from "lib/components/CenteredPaper";
import HttpStatusIcon from "lib/components/HttpStatusIcon";
import { useGetSenderRequestsQuery } from "lib/graphql/generated";
function History(): JSX.Element {
const { data, loading } = useGetSenderRequestsQuery({
@ -38,7 +39,7 @@ function History(): JSX.Element {
whiteSpace: "nowrap",
overflow: "hidden",
textOverflow: "ellipsis",
} as any;
};
return (
<TableRow
@ -55,7 +56,7 @@ function History(): JSX.Element {
hover
onClick={() => handleRowClick(id)}
>
<TableCell style={{ ...cellStyle, width: "100px" }}>
<TableCell sx={{ ...cellStyle, width: "100px" }}>
<code>{method}</code>
</TableCell>
<TableCell sx={{ ...cellStyle, maxWidth: "100px" }}>{origin}</TableCell>

View file

@ -1,16 +1,16 @@
import { IconButton, InputBase, Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from "@mui/material";
import ClearIcon from "@mui/icons-material/Clear";
import { IconButton, InputBase, Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from "@mui/material";
export type KeyValuePair = {
export interface KeyValuePair {
key: string;
value: string;
};
}
export type KeyValuePairTableProps = {
export interface KeyValuePairTableProps {
items: KeyValuePair[];
onChange?: (key: string, value: string, index: number) => void;
onDelete?: (index: number) => void;
};
}
export function KeyValuePairTable({ items, onChange, onDelete }: KeyValuePairTableProps): JSX.Element {
const inputSx = {

View file

@ -2,12 +2,13 @@ import { Box, Typography } from "@mui/material";
import { sortKeyValuePairs } from "./KeyValuePair";
import ResponseTabs from "./ResponseTabs";
import ResponseStatus from "../common/ResponseStatus";
import { HttpResponseLog } from "../../generated/graphql";
export type ResponseProps = {
import ResponseStatus from "lib/components/ResponseStatus";
import { HttpResponseLog } from "lib/graphql/generated";
interface ResponseProps {
response?: HttpResponseLog | null;
};
}
function Response({ response }: ResponseProps): JSX.Element {
return (

View file

@ -1,17 +1,18 @@
import { TabContext, TabList, TabPanel } from "@mui/lab";
import { Box, Tab, Typography } from "@mui/material";
import { useState } from "react";
import { HttpResponseLog } from "../../generated/graphql";
import CenteredPaper from "../common/CenteredPaper";
import Editor from "../common/Editor";
import React, { useState } from "react";
import KeyValuePairTable from "./KeyValuePair";
import { KeyValuePairTable } from "./KeyValuePair";
export type ResponseTabsProps = {
import CenteredPaper from "lib/components/CenteredPaper";
import Editor from "lib/components/Editor";
import { HttpResponseLog } from "lib/graphql/generated";
interface ResponseTabsProps {
headers: HttpResponseLog["headers"];
body: HttpResponseLog["body"];
hasResponse: boolean;
};
}
enum TabValue {
Body = "body",

View file

@ -1,479 +0,0 @@
import { gql } from '@apollo/client';
import * as Apollo from '@apollo/client';
export type Maybe<T> = T | null;
export type InputMaybe<T> = Maybe<T>;
export type Exact<T extends { [key: string]: unknown }> = { [K in keyof T]: T[K] };
export type MakeOptional<T, K extends keyof T> = Omit<T, K> & { [SubKey in K]?: Maybe<T[SubKey]> };
export type MakeMaybe<T, K extends keyof T> = Omit<T, K> & { [SubKey in K]: Maybe<T[SubKey]> };
const defaultOptions = {} as const;
/** All built-in and custom scalars, mapped to their actual values */
export type Scalars = {
ID: string;
String: string;
Boolean: boolean;
Int: number;
Float: number;
Regexp: any;
Time: any;
URL: any;
};
export type ClearHttpRequestLogResult = {
__typename?: 'ClearHTTPRequestLogResult';
success: Scalars['Boolean'];
};
export type CloseProjectResult = {
__typename?: 'CloseProjectResult';
success: Scalars['Boolean'];
};
export type DeleteProjectResult = {
__typename?: 'DeleteProjectResult';
success: Scalars['Boolean'];
};
export type DeleteSenderRequestsResult = {
__typename?: 'DeleteSenderRequestsResult';
success: Scalars['Boolean'];
};
export type HttpHeader = {
__typename?: 'HttpHeader';
key: Scalars['String'];
value: Scalars['String'];
};
export type HttpHeaderInput = {
key: Scalars['String'];
value: Scalars['String'];
};
export enum HttpMethod {
Connect = 'CONNECT',
Delete = 'DELETE',
Get = 'GET',
Head = 'HEAD',
Options = 'OPTIONS',
Patch = 'PATCH',
Post = 'POST',
Put = 'PUT',
Trace = 'TRACE'
}
export enum HttpProtocol {
Http1 = 'HTTP1',
Http2 = 'HTTP2'
}
export type HttpRequestLog = {
__typename?: 'HttpRequestLog';
body?: Maybe<Scalars['String']>;
headers: Array<HttpHeader>;
id: Scalars['ID'];
method: HttpMethod;
proto: Scalars['String'];
response?: Maybe<HttpResponseLog>;
timestamp: Scalars['Time'];
url: Scalars['String'];
};
export type HttpRequestLogFilter = {
__typename?: 'HttpRequestLogFilter';
onlyInScope: Scalars['Boolean'];
searchExpression?: Maybe<Scalars['String']>;
};
export type HttpRequestLogFilterInput = {
onlyInScope?: InputMaybe<Scalars['Boolean']>;
searchExpression?: InputMaybe<Scalars['String']>;
};
export type HttpResponseLog = {
__typename?: 'HttpResponseLog';
body?: Maybe<Scalars['String']>;
headers: Array<HttpHeader>;
/** Will be the same ID as its related request ID. */
id: Scalars['ID'];
proto: HttpProtocol;
statusCode: Scalars['Int'];
statusReason: Scalars['String'];
};
export type Mutation = {
__typename?: 'Mutation';
clearHTTPRequestLog: ClearHttpRequestLogResult;
closeProject: CloseProjectResult;
createOrUpdateSenderRequest: SenderRequest;
createProject?: Maybe<Project>;
createSenderRequestFromHttpRequestLog: SenderRequest;
deleteProject: DeleteProjectResult;
deleteSenderRequests: DeleteSenderRequestsResult;
openProject?: Maybe<Project>;
sendRequest: SenderRequest;
setHttpRequestLogFilter?: Maybe<HttpRequestLogFilter>;
setScope: Array<ScopeRule>;
setSenderRequestFilter?: Maybe<SenderRequestFilter>;
};
export type MutationCreateOrUpdateSenderRequestArgs = {
request: SenderRequestInput;
};
export type MutationCreateProjectArgs = {
name: Scalars['String'];
};
export type MutationCreateSenderRequestFromHttpRequestLogArgs = {
id: Scalars['ID'];
};
export type MutationDeleteProjectArgs = {
id: Scalars['ID'];
};
export type MutationOpenProjectArgs = {
id: Scalars['ID'];
};
export type MutationSendRequestArgs = {
id: Scalars['ID'];
};
export type MutationSetHttpRequestLogFilterArgs = {
filter?: InputMaybe<HttpRequestLogFilterInput>;
};
export type MutationSetScopeArgs = {
scope: Array<ScopeRuleInput>;
};
export type MutationSetSenderRequestFilterArgs = {
filter?: InputMaybe<SenderRequestFilterInput>;
};
export type Project = {
__typename?: 'Project';
id: Scalars['ID'];
isActive: Scalars['Boolean'];
name: Scalars['String'];
};
export type Query = {
__typename?: 'Query';
activeProject?: Maybe<Project>;
httpRequestLog?: Maybe<HttpRequestLog>;
httpRequestLogFilter?: Maybe<HttpRequestLogFilter>;
httpRequestLogs: Array<HttpRequestLog>;
projects: Array<Project>;
scope: Array<ScopeRule>;
senderRequest?: Maybe<SenderRequest>;
senderRequests: Array<SenderRequest>;
};
export type QueryHttpRequestLogArgs = {
id: Scalars['ID'];
};
export type QuerySenderRequestArgs = {
id: Scalars['ID'];
};
export type ScopeHeader = {
__typename?: 'ScopeHeader';
key?: Maybe<Scalars['Regexp']>;
value?: Maybe<Scalars['Regexp']>;
};
export type ScopeHeaderInput = {
key?: InputMaybe<Scalars['Regexp']>;
value?: InputMaybe<Scalars['Regexp']>;
};
export type ScopeRule = {
__typename?: 'ScopeRule';
body?: Maybe<Scalars['Regexp']>;
header?: Maybe<ScopeHeader>;
url?: Maybe<Scalars['Regexp']>;
};
export type ScopeRuleInput = {
body?: InputMaybe<Scalars['Regexp']>;
header?: InputMaybe<ScopeHeaderInput>;
url?: InputMaybe<Scalars['Regexp']>;
};
export type SenderRequest = {
__typename?: 'SenderRequest';
body?: Maybe<Scalars['String']>;
headers?: Maybe<Array<HttpHeader>>;
id: Scalars['ID'];
method: HttpMethod;
proto: HttpProtocol;
response?: Maybe<HttpResponseLog>;
sourceRequestLogID?: Maybe<Scalars['ID']>;
timestamp: Scalars['Time'];
url: Scalars['URL'];
};
export type SenderRequestFilter = {
__typename?: 'SenderRequestFilter';
onlyInScope: Scalars['Boolean'];
searchExpression?: Maybe<Scalars['String']>;
};
export type SenderRequestFilterInput = {
onlyInScope?: InputMaybe<Scalars['Boolean']>;
searchExpression?: InputMaybe<Scalars['String']>;
};
export type SenderRequestInput = {
body?: InputMaybe<Scalars['String']>;
headers?: InputMaybe<Array<HttpHeaderInput>>;
id?: InputMaybe<Scalars['ID']>;
method?: InputMaybe<HttpMethod>;
proto?: InputMaybe<HttpProtocol>;
url: Scalars['URL'];
};
export type CreateOrUpdateSenderRequestMutationVariables = Exact<{
request: SenderRequestInput;
}>;
export type CreateOrUpdateSenderRequestMutation = { __typename?: 'Mutation', createOrUpdateSenderRequest: { __typename?: 'SenderRequest', id: string } };
export type CreateSenderRequestFromHttpRequestLogMutationVariables = Exact<{
id: Scalars['ID'];
}>;
export type CreateSenderRequestFromHttpRequestLogMutation = { __typename?: 'Mutation', createSenderRequestFromHttpRequestLog: { __typename?: 'SenderRequest', id: string } };
export type SendRequestMutationVariables = Exact<{
id: Scalars['ID'];
}>;
export type SendRequestMutation = { __typename?: 'Mutation', sendRequest: { __typename?: 'SenderRequest', id: string } };
export type GetSenderRequestQueryVariables = Exact<{
id: Scalars['ID'];
}>;
export type GetSenderRequestQuery = { __typename?: 'Query', senderRequest?: { __typename?: 'SenderRequest', id: string, sourceRequestLogID?: string | null, url: any, method: HttpMethod, proto: HttpProtocol, body?: string | null, timestamp: any, headers?: Array<{ __typename?: 'HttpHeader', key: string, value: string }> | null, response?: { __typename?: 'HttpResponseLog', id: string, proto: HttpProtocol, statusCode: number, statusReason: string, body?: string | null, headers: Array<{ __typename?: 'HttpHeader', key: string, value: string }> } | null } | null };
export type GetSenderRequestsQueryVariables = Exact<{ [key: string]: never; }>;
export type GetSenderRequestsQuery = { __typename?: 'Query', senderRequests: Array<{ __typename?: 'SenderRequest', id: string, url: any, method: HttpMethod, response?: { __typename?: 'HttpResponseLog', id: string, statusCode: number, statusReason: string } | null }> };
export const CreateOrUpdateSenderRequestDocument = gql`
mutation CreateOrUpdateSenderRequest($request: SenderRequestInput!) {
createOrUpdateSenderRequest(request: $request) {
id
}
}
`;
export type CreateOrUpdateSenderRequestMutationFn = Apollo.MutationFunction<CreateOrUpdateSenderRequestMutation, CreateOrUpdateSenderRequestMutationVariables>;
/**
* __useCreateOrUpdateSenderRequestMutation__
*
* To run a mutation, you first call `useCreateOrUpdateSenderRequestMutation` within a React component and pass it any options that fit your needs.
* When your component renders, `useCreateOrUpdateSenderRequestMutation` returns a tuple that includes:
* - A mutate function that you can call at any time to execute the mutation
* - An object with fields that represent the current status of the mutation's execution
*
* @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
*
* @example
* const [createOrUpdateSenderRequestMutation, { data, loading, error }] = useCreateOrUpdateSenderRequestMutation({
* variables: {
* request: // value for 'request'
* },
* });
*/
export function useCreateOrUpdateSenderRequestMutation(baseOptions?: Apollo.MutationHookOptions<CreateOrUpdateSenderRequestMutation, CreateOrUpdateSenderRequestMutationVariables>) {
const options = {...defaultOptions, ...baseOptions}
return Apollo.useMutation<CreateOrUpdateSenderRequestMutation, CreateOrUpdateSenderRequestMutationVariables>(CreateOrUpdateSenderRequestDocument, options);
}
export type CreateOrUpdateSenderRequestMutationHookResult = ReturnType<typeof useCreateOrUpdateSenderRequestMutation>;
export type CreateOrUpdateSenderRequestMutationResult = Apollo.MutationResult<CreateOrUpdateSenderRequestMutation>;
export type CreateOrUpdateSenderRequestMutationOptions = Apollo.BaseMutationOptions<CreateOrUpdateSenderRequestMutation, CreateOrUpdateSenderRequestMutationVariables>;
export const CreateSenderRequestFromHttpRequestLogDocument = gql`
mutation CreateSenderRequestFromHttpRequestLog($id: ID!) {
createSenderRequestFromHttpRequestLog(id: $id) {
id
}
}
`;
export type CreateSenderRequestFromHttpRequestLogMutationFn = Apollo.MutationFunction<CreateSenderRequestFromHttpRequestLogMutation, CreateSenderRequestFromHttpRequestLogMutationVariables>;
/**
* __useCreateSenderRequestFromHttpRequestLogMutation__
*
* To run a mutation, you first call `useCreateSenderRequestFromHttpRequestLogMutation` within a React component and pass it any options that fit your needs.
* When your component renders, `useCreateSenderRequestFromHttpRequestLogMutation` returns a tuple that includes:
* - A mutate function that you can call at any time to execute the mutation
* - An object with fields that represent the current status of the mutation's execution
*
* @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
*
* @example
* const [createSenderRequestFromHttpRequestLogMutation, { data, loading, error }] = useCreateSenderRequestFromHttpRequestLogMutation({
* variables: {
* id: // value for 'id'
* },
* });
*/
export function useCreateSenderRequestFromHttpRequestLogMutation(baseOptions?: Apollo.MutationHookOptions<CreateSenderRequestFromHttpRequestLogMutation, CreateSenderRequestFromHttpRequestLogMutationVariables>) {
const options = {...defaultOptions, ...baseOptions}
return Apollo.useMutation<CreateSenderRequestFromHttpRequestLogMutation, CreateSenderRequestFromHttpRequestLogMutationVariables>(CreateSenderRequestFromHttpRequestLogDocument, options);
}
export type CreateSenderRequestFromHttpRequestLogMutationHookResult = ReturnType<typeof useCreateSenderRequestFromHttpRequestLogMutation>;
export type CreateSenderRequestFromHttpRequestLogMutationResult = Apollo.MutationResult<CreateSenderRequestFromHttpRequestLogMutation>;
export type CreateSenderRequestFromHttpRequestLogMutationOptions = Apollo.BaseMutationOptions<CreateSenderRequestFromHttpRequestLogMutation, CreateSenderRequestFromHttpRequestLogMutationVariables>;
export const SendRequestDocument = gql`
mutation SendRequest($id: ID!) {
sendRequest(id: $id) {
id
}
}
`;
export type SendRequestMutationFn = Apollo.MutationFunction<SendRequestMutation, SendRequestMutationVariables>;
/**
* __useSendRequestMutation__
*
* To run a mutation, you first call `useSendRequestMutation` within a React component and pass it any options that fit your needs.
* When your component renders, `useSendRequestMutation` returns a tuple that includes:
* - A mutate function that you can call at any time to execute the mutation
* - An object with fields that represent the current status of the mutation's execution
*
* @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
*
* @example
* const [sendRequestMutation, { data, loading, error }] = useSendRequestMutation({
* variables: {
* id: // value for 'id'
* },
* });
*/
export function useSendRequestMutation(baseOptions?: Apollo.MutationHookOptions<SendRequestMutation, SendRequestMutationVariables>) {
const options = {...defaultOptions, ...baseOptions}
return Apollo.useMutation<SendRequestMutation, SendRequestMutationVariables>(SendRequestDocument, options);
}
export type SendRequestMutationHookResult = ReturnType<typeof useSendRequestMutation>;
export type SendRequestMutationResult = Apollo.MutationResult<SendRequestMutation>;
export type SendRequestMutationOptions = Apollo.BaseMutationOptions<SendRequestMutation, SendRequestMutationVariables>;
export const GetSenderRequestDocument = gql`
query GetSenderRequest($id: ID!) {
senderRequest(id: $id) {
id
sourceRequestLogID
url
method
proto
headers {
key
value
}
body
timestamp
response {
id
proto
statusCode
statusReason
body
headers {
key
value
}
}
}
}
`;
/**
* __useGetSenderRequestQuery__
*
* To run a query within a React component, call `useGetSenderRequestQuery` and pass it any options that fit your needs.
* When your component renders, `useGetSenderRequestQuery` returns an object from Apollo Client that contains loading, error, and data properties
* you can use to render your UI.
*
* @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
*
* @example
* const { data, loading, error } = useGetSenderRequestQuery({
* variables: {
* id: // value for 'id'
* },
* });
*/
export function useGetSenderRequestQuery(baseOptions: Apollo.QueryHookOptions<GetSenderRequestQuery, GetSenderRequestQueryVariables>) {
const options = {...defaultOptions, ...baseOptions}
return Apollo.useQuery<GetSenderRequestQuery, GetSenderRequestQueryVariables>(GetSenderRequestDocument, options);
}
export function useGetSenderRequestLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<GetSenderRequestQuery, GetSenderRequestQueryVariables>) {
const options = {...defaultOptions, ...baseOptions}
return Apollo.useLazyQuery<GetSenderRequestQuery, GetSenderRequestQueryVariables>(GetSenderRequestDocument, options);
}
export type GetSenderRequestQueryHookResult = ReturnType<typeof useGetSenderRequestQuery>;
export type GetSenderRequestLazyQueryHookResult = ReturnType<typeof useGetSenderRequestLazyQuery>;
export type GetSenderRequestQueryResult = Apollo.QueryResult<GetSenderRequestQuery, GetSenderRequestQueryVariables>;
export const GetSenderRequestsDocument = gql`
query GetSenderRequests {
senderRequests {
id
url
method
response {
id
statusCode
statusReason
}
}
}
`;
/**
* __useGetSenderRequestsQuery__
*
* To run a query within a React component, call `useGetSenderRequestsQuery` and pass it any options that fit your needs.
* When your component renders, `useGetSenderRequestsQuery` returns an object from Apollo Client that contains loading, error, and data properties
* you can use to render your UI.
*
* @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
*
* @example
* const { data, loading, error } = useGetSenderRequestsQuery({
* variables: {
* },
* });
*/
export function useGetSenderRequestsQuery(baseOptions?: Apollo.QueryHookOptions<GetSenderRequestsQuery, GetSenderRequestsQueryVariables>) {
const options = {...defaultOptions, ...baseOptions}
return Apollo.useQuery<GetSenderRequestsQuery, GetSenderRequestsQueryVariables>(GetSenderRequestsDocument, options);
}
export function useGetSenderRequestsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<GetSenderRequestsQuery, GetSenderRequestsQueryVariables>) {
const options = {...defaultOptions, ...baseOptions}
return Apollo.useLazyQuery<GetSenderRequestsQuery, GetSenderRequestsQueryVariables>(GetSenderRequestsDocument, options);
}
export type GetSenderRequestsQueryHookResult = ReturnType<typeof useGetSenderRequestsQuery>;
export type GetSenderRequestsLazyQueryHookResult = ReturnType<typeof useGetSenderRequestsLazyQuery>;
export type GetSenderRequestsQueryResult = Apollo.QueryResult<GetSenderRequestsQuery, GetSenderRequestsQueryVariables>;

View file

@ -1,5 +0,0 @@
export type Project = {
id: string
name: string
isActive: boolean
}

View file

@ -1,5 +1,5 @@
import { SvgIconTypeMap } from "@mui/material";
import FiberManualRecordIcon from "@mui/icons-material/FiberManualRecord";
import { SvgIconTypeMap } from "@mui/material";
interface Props {
status: number;

View file

@ -1,7 +1,8 @@
import { Typography } from "@mui/material";
import HttpStatusIcon from "./HttpStatusIcon";
import { HttpProtocol } from "../../generated/graphql";
import { HttpProtocol } from "lib/graphql/generated";
type ResponseStatusProps = {
proto: HttpProtocol;
@ -20,7 +21,7 @@ function mapProto(proto: HttpProtocol): string {
}
}
function ResponseStatus({ proto, statusCode, statusReason }: ResponseStatusProps): JSX.Element {
export default function ResponseStatus({ proto, statusCode, statusReason }: ResponseStatusProps): JSX.Element {
return (
<Typography variant="h6" style={{ fontSize: "1rem", whiteSpace: "nowrap" }}>
<HttpStatusIcon status={statusCode} />{" "}
@ -33,5 +34,3 @@ function ResponseStatus({ proto, statusCode, statusReason }: ResponseStatusProps
</Typography>
);
}
export default ResponseStatus;

View file

@ -1,12 +1,16 @@
import * as React from "react";
import { Menu } from "@mui/material";
import React, { useState } from "react";
export interface ContextMenuProps {
interface ContextMenuProps {
children?: React.ReactNode;
}
function useContextMenu(): [(props: ContextMenuProps) => JSX.Element, (e: React.MouseEvent) => void, () => void] {
const [contextMenu, setContextMenu] = React.useState<{
export default function useContextMenu(): [
(props: ContextMenuProps) => JSX.Element,
(e: React.MouseEvent) => void,
() => void
] {
const [contextMenu, setContextMenu] = useState<{
mouseX: number;
mouseY: number;
} | null>(null);
@ -43,5 +47,3 @@ function useContextMenu(): [(props: ContextMenuProps) => JSX.Element, (e: React.
return [menu, handleContextMenu, handleClose];
}
export default useContextMenu;

View file

@ -1,61 +0,0 @@
import { useMemo } from "react";
import { ApolloClient, HttpLink, InMemoryCache, NormalizedCacheObject } from "@apollo/client";
import merge from "deepmerge";
import isEqual from "lodash/isEqual";
export const APOLLO_STATE_PROP_NAME = "__APOLLO_STATE__";
let apolloClient: ApolloClient<NormalizedCacheObject>;
function createApolloClient() {
return new ApolloClient({
ssrMode: typeof window === "undefined",
link: new HttpLink({
uri: "/api/graphql/",
}),
cache: new InMemoryCache(),
});
}
export function initializeApollo(initialState = null) {
const _apolloClient = apolloClient ?? createApolloClient();
// If your page has Next.js data fetching methods that use Apollo Client, the initial state
// gets hydrated here
if (initialState) {
// Get existing cache, loaded during client side data fetching
const existingCache = _apolloClient.extract();
// Merge the existing cache into data passed from getStaticProps/getServerSideProps
const data = merge(initialState, existingCache, {
// combine arrays using object equality (like in sets)
arrayMerge: (destinationArray, sourceArray) => [
...sourceArray,
...destinationArray.filter((d) => sourceArray.every((s) => !isEqual(d, s))),
],
});
// Restore the cache with the merged data
_apolloClient.cache.restore(data);
}
// For SSG and SSR always create a new Apollo Client
if (typeof window === "undefined") return _apolloClient;
// Create the Apollo Client once in the client
if (!apolloClient) apolloClient = _apolloClient;
return _apolloClient;
}
export function addApolloState(client: ApolloClient<NormalizedCacheObject>, pageProps: any) {
if (pageProps?.props) {
pageProps.props[APOLLO_STATE_PROP_NAME] = client.cache.extract();
}
return pageProps;
}
export function useApollo(pageProps: any) {
const state = pageProps[APOLLO_STATE_PROP_NAME];
const store = useMemo(() => initializeApollo(state), [state]);
return store;
}

View file

@ -0,0 +1,983 @@
import { gql } from '@apollo/client';
import * as Apollo from '@apollo/client';
export type Maybe<T> = T | null;
export type InputMaybe<T> = Maybe<T>;
export type Exact<T extends { [key: string]: unknown }> = { [K in keyof T]: T[K] };
export type MakeOptional<T, K extends keyof T> = Omit<T, K> & { [SubKey in K]?: Maybe<T[SubKey]> };
export type MakeMaybe<T, K extends keyof T> = Omit<T, K> & { [SubKey in K]: Maybe<T[SubKey]> };
const defaultOptions = {} as const;
/** All built-in and custom scalars, mapped to their actual values */
export type Scalars = {
ID: string;
String: string;
Boolean: boolean;
Int: number;
Float: number;
Regexp: any;
Time: any;
URL: any;
};
export type ClearHttpRequestLogResult = {
__typename?: 'ClearHTTPRequestLogResult';
success: Scalars['Boolean'];
};
export type CloseProjectResult = {
__typename?: 'CloseProjectResult';
success: Scalars['Boolean'];
};
export type DeleteProjectResult = {
__typename?: 'DeleteProjectResult';
success: Scalars['Boolean'];
};
export type DeleteSenderRequestsResult = {
__typename?: 'DeleteSenderRequestsResult';
success: Scalars['Boolean'];
};
export type HttpHeader = {
__typename?: 'HttpHeader';
key: Scalars['String'];
value: Scalars['String'];
};
export type HttpHeaderInput = {
key: Scalars['String'];
value: Scalars['String'];
};
export enum HttpMethod {
Connect = 'CONNECT',
Delete = 'DELETE',
Get = 'GET',
Head = 'HEAD',
Options = 'OPTIONS',
Patch = 'PATCH',
Post = 'POST',
Put = 'PUT',
Trace = 'TRACE'
}
export enum HttpProtocol {
Http1 = 'HTTP1',
Http2 = 'HTTP2'
}
export type HttpRequestLog = {
__typename?: 'HttpRequestLog';
body?: Maybe<Scalars['String']>;
headers: Array<HttpHeader>;
id: Scalars['ID'];
method: HttpMethod;
proto: Scalars['String'];
response?: Maybe<HttpResponseLog>;
timestamp: Scalars['Time'];
url: Scalars['String'];
};
export type HttpRequestLogFilter = {
__typename?: 'HttpRequestLogFilter';
onlyInScope: Scalars['Boolean'];
searchExpression?: Maybe<Scalars['String']>;
};
export type HttpRequestLogFilterInput = {
onlyInScope?: InputMaybe<Scalars['Boolean']>;
searchExpression?: InputMaybe<Scalars['String']>;
};
export type HttpResponseLog = {
__typename?: 'HttpResponseLog';
body?: Maybe<Scalars['String']>;
headers: Array<HttpHeader>;
/** Will be the same ID as its related request ID. */
id: Scalars['ID'];
proto: HttpProtocol;
statusCode: Scalars['Int'];
statusReason: Scalars['String'];
};
export type Mutation = {
__typename?: 'Mutation';
clearHTTPRequestLog: ClearHttpRequestLogResult;
closeProject: CloseProjectResult;
createOrUpdateSenderRequest: SenderRequest;
createProject?: Maybe<Project>;
createSenderRequestFromHttpRequestLog: SenderRequest;
deleteProject: DeleteProjectResult;
deleteSenderRequests: DeleteSenderRequestsResult;
openProject?: Maybe<Project>;
sendRequest: SenderRequest;
setHttpRequestLogFilter?: Maybe<HttpRequestLogFilter>;
setScope: Array<ScopeRule>;
setSenderRequestFilter?: Maybe<SenderRequestFilter>;
};
export type MutationCreateOrUpdateSenderRequestArgs = {
request: SenderRequestInput;
};
export type MutationCreateProjectArgs = {
name: Scalars['String'];
};
export type MutationCreateSenderRequestFromHttpRequestLogArgs = {
id: Scalars['ID'];
};
export type MutationDeleteProjectArgs = {
id: Scalars['ID'];
};
export type MutationOpenProjectArgs = {
id: Scalars['ID'];
};
export type MutationSendRequestArgs = {
id: Scalars['ID'];
};
export type MutationSetHttpRequestLogFilterArgs = {
filter?: InputMaybe<HttpRequestLogFilterInput>;
};
export type MutationSetScopeArgs = {
scope: Array<ScopeRuleInput>;
};
export type MutationSetSenderRequestFilterArgs = {
filter?: InputMaybe<SenderRequestFilterInput>;
};
export type Project = {
__typename?: 'Project';
id: Scalars['ID'];
isActive: Scalars['Boolean'];
name: Scalars['String'];
};
export type Query = {
__typename?: 'Query';
activeProject?: Maybe<Project>;
httpRequestLog?: Maybe<HttpRequestLog>;
httpRequestLogFilter?: Maybe<HttpRequestLogFilter>;
httpRequestLogs: Array<HttpRequestLog>;
projects: Array<Project>;
scope: Array<ScopeRule>;
senderRequest?: Maybe<SenderRequest>;
senderRequests: Array<SenderRequest>;
};
export type QueryHttpRequestLogArgs = {
id: Scalars['ID'];
};
export type QuerySenderRequestArgs = {
id: Scalars['ID'];
};
export type ScopeHeader = {
__typename?: 'ScopeHeader';
key?: Maybe<Scalars['Regexp']>;
value?: Maybe<Scalars['Regexp']>;
};
export type ScopeHeaderInput = {
key?: InputMaybe<Scalars['Regexp']>;
value?: InputMaybe<Scalars['Regexp']>;
};
export type ScopeRule = {
__typename?: 'ScopeRule';
body?: Maybe<Scalars['Regexp']>;
header?: Maybe<ScopeHeader>;
url?: Maybe<Scalars['Regexp']>;
};
export type ScopeRuleInput = {
body?: InputMaybe<Scalars['Regexp']>;
header?: InputMaybe<ScopeHeaderInput>;
url?: InputMaybe<Scalars['Regexp']>;
};
export type SenderRequest = {
__typename?: 'SenderRequest';
body?: Maybe<Scalars['String']>;
headers?: Maybe<Array<HttpHeader>>;
id: Scalars['ID'];
method: HttpMethod;
proto: HttpProtocol;
response?: Maybe<HttpResponseLog>;
sourceRequestLogID?: Maybe<Scalars['ID']>;
timestamp: Scalars['Time'];
url: Scalars['URL'];
};
export type SenderRequestFilter = {
__typename?: 'SenderRequestFilter';
onlyInScope: Scalars['Boolean'];
searchExpression?: Maybe<Scalars['String']>;
};
export type SenderRequestFilterInput = {
onlyInScope?: InputMaybe<Scalars['Boolean']>;
searchExpression?: InputMaybe<Scalars['String']>;
};
export type SenderRequestInput = {
body?: InputMaybe<Scalars['String']>;
headers?: InputMaybe<Array<HttpHeaderInput>>;
id?: InputMaybe<Scalars['ID']>;
method?: InputMaybe<HttpMethod>;
proto?: InputMaybe<HttpProtocol>;
url: Scalars['URL'];
};
export type CloseProjectMutationVariables = Exact<{ [key: string]: never; }>;
export type CloseProjectMutation = { __typename?: 'Mutation', closeProject: { __typename?: 'CloseProjectResult', success: boolean } };
export type CreateProjectMutationVariables = Exact<{
name: Scalars['String'];
}>;
export type CreateProjectMutation = { __typename?: 'Mutation', createProject?: { __typename?: 'Project', id: string, name: string } | null };
export type DeleteProjectMutationVariables = Exact<{
id: Scalars['ID'];
}>;
export type DeleteProjectMutation = { __typename?: 'Mutation', deleteProject: { __typename?: 'DeleteProjectResult', success: boolean } };
export type OpenProjectMutationVariables = Exact<{
id: Scalars['ID'];
}>;
export type OpenProjectMutation = { __typename?: 'Mutation', openProject?: { __typename?: 'Project', id: string, name: string, isActive: boolean } | null };
export type ProjectsQueryVariables = Exact<{ [key: string]: never; }>;
export type ProjectsQuery = { __typename?: 'Query', projects: Array<{ __typename?: 'Project', id: string, name: string, isActive: boolean }> };
export type ClearHttpRequestLogMutationVariables = Exact<{ [key: string]: never; }>;
export type ClearHttpRequestLogMutation = { __typename?: 'Mutation', clearHTTPRequestLog: { __typename?: 'ClearHTTPRequestLogResult', success: boolean } };
export type HttpRequestLogQueryVariables = Exact<{
id: Scalars['ID'];
}>;
export type HttpRequestLogQuery = { __typename?: 'Query', httpRequestLog?: { __typename?: 'HttpRequestLog', id: string, method: HttpMethod, url: string, proto: string, body?: string | null, headers: Array<{ __typename?: 'HttpHeader', key: string, value: string }>, response?: { __typename?: 'HttpResponseLog', proto: HttpProtocol, statusCode: number, statusReason: string, body?: string | null, headers: Array<{ __typename?: 'HttpHeader', key: string, value: string }> } | null } | null };
export type HttpRequestLogFilterQueryVariables = Exact<{ [key: string]: never; }>;
export type HttpRequestLogFilterQuery = { __typename?: 'Query', httpRequestLogFilter?: { __typename?: 'HttpRequestLogFilter', onlyInScope: boolean, searchExpression?: string | null } | null };
export type HttpRequestLogsQueryVariables = Exact<{ [key: string]: never; }>;
export type HttpRequestLogsQuery = { __typename?: 'Query', httpRequestLogs: Array<{ __typename?: 'HttpRequestLog', id: string, method: HttpMethod, url: string, timestamp: any, response?: { __typename?: 'HttpResponseLog', statusCode: number, statusReason: string } | null }> };
export type SetHttpRequestLogFilterMutationVariables = Exact<{
filter?: InputMaybe<HttpRequestLogFilterInput>;
}>;
export type SetHttpRequestLogFilterMutation = { __typename?: 'Mutation', setHttpRequestLogFilter?: { __typename?: 'HttpRequestLogFilter', onlyInScope: boolean, searchExpression?: string | null } | null };
export type ScopeQueryVariables = Exact<{ [key: string]: never; }>;
export type ScopeQuery = { __typename?: 'Query', scope: Array<{ __typename?: 'ScopeRule', url?: any | null }> };
export type SetScopeMutationVariables = Exact<{
scope: Array<ScopeRuleInput> | ScopeRuleInput;
}>;
export type SetScopeMutation = { __typename?: 'Mutation', setScope: Array<{ __typename?: 'ScopeRule', url?: any | null }> };
export type CreateOrUpdateSenderRequestMutationVariables = Exact<{
request: SenderRequestInput;
}>;
export type CreateOrUpdateSenderRequestMutation = { __typename?: 'Mutation', createOrUpdateSenderRequest: { __typename?: 'SenderRequest', id: string } };
export type CreateSenderRequestFromHttpRequestLogMutationVariables = Exact<{
id: Scalars['ID'];
}>;
export type CreateSenderRequestFromHttpRequestLogMutation = { __typename?: 'Mutation', createSenderRequestFromHttpRequestLog: { __typename?: 'SenderRequest', id: string } };
export type SendRequestMutationVariables = Exact<{
id: Scalars['ID'];
}>;
export type SendRequestMutation = { __typename?: 'Mutation', sendRequest: { __typename?: 'SenderRequest', id: string } };
export type GetSenderRequestQueryVariables = Exact<{
id: Scalars['ID'];
}>;
export type GetSenderRequestQuery = { __typename?: 'Query', senderRequest?: { __typename?: 'SenderRequest', id: string, sourceRequestLogID?: string | null, url: any, method: HttpMethod, proto: HttpProtocol, body?: string | null, timestamp: any, headers?: Array<{ __typename?: 'HttpHeader', key: string, value: string }> | null, response?: { __typename?: 'HttpResponseLog', id: string, proto: HttpProtocol, statusCode: number, statusReason: string, body?: string | null, headers: Array<{ __typename?: 'HttpHeader', key: string, value: string }> } | null } | null };
export type GetSenderRequestsQueryVariables = Exact<{ [key: string]: never; }>;
export type GetSenderRequestsQuery = { __typename?: 'Query', senderRequests: Array<{ __typename?: 'SenderRequest', id: string, url: any, method: HttpMethod, response?: { __typename?: 'HttpResponseLog', id: string, statusCode: number, statusReason: string } | null }> };
export const CloseProjectDocument = gql`
mutation CloseProject {
closeProject {
success
}
}
`;
export type CloseProjectMutationFn = Apollo.MutationFunction<CloseProjectMutation, CloseProjectMutationVariables>;
/**
* __useCloseProjectMutation__
*
* To run a mutation, you first call `useCloseProjectMutation` within a React component and pass it any options that fit your needs.
* When your component renders, `useCloseProjectMutation` returns a tuple that includes:
* - A mutate function that you can call at any time to execute the mutation
* - An object with fields that represent the current status of the mutation's execution
*
* @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
*
* @example
* const [closeProjectMutation, { data, loading, error }] = useCloseProjectMutation({
* variables: {
* },
* });
*/
export function useCloseProjectMutation(baseOptions?: Apollo.MutationHookOptions<CloseProjectMutation, CloseProjectMutationVariables>) {
const options = {...defaultOptions, ...baseOptions}
return Apollo.useMutation<CloseProjectMutation, CloseProjectMutationVariables>(CloseProjectDocument, options);
}
export type CloseProjectMutationHookResult = ReturnType<typeof useCloseProjectMutation>;
export type CloseProjectMutationResult = Apollo.MutationResult<CloseProjectMutation>;
export type CloseProjectMutationOptions = Apollo.BaseMutationOptions<CloseProjectMutation, CloseProjectMutationVariables>;
export const CreateProjectDocument = gql`
mutation CreateProject($name: String!) {
createProject(name: $name) {
id
name
}
}
`;
export type CreateProjectMutationFn = Apollo.MutationFunction<CreateProjectMutation, CreateProjectMutationVariables>;
/**
* __useCreateProjectMutation__
*
* To run a mutation, you first call `useCreateProjectMutation` within a React component and pass it any options that fit your needs.
* When your component renders, `useCreateProjectMutation` returns a tuple that includes:
* - A mutate function that you can call at any time to execute the mutation
* - An object with fields that represent the current status of the mutation's execution
*
* @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
*
* @example
* const [createProjectMutation, { data, loading, error }] = useCreateProjectMutation({
* variables: {
* name: // value for 'name'
* },
* });
*/
export function useCreateProjectMutation(baseOptions?: Apollo.MutationHookOptions<CreateProjectMutation, CreateProjectMutationVariables>) {
const options = {...defaultOptions, ...baseOptions}
return Apollo.useMutation<CreateProjectMutation, CreateProjectMutationVariables>(CreateProjectDocument, options);
}
export type CreateProjectMutationHookResult = ReturnType<typeof useCreateProjectMutation>;
export type CreateProjectMutationResult = Apollo.MutationResult<CreateProjectMutation>;
export type CreateProjectMutationOptions = Apollo.BaseMutationOptions<CreateProjectMutation, CreateProjectMutationVariables>;
export const DeleteProjectDocument = gql`
mutation DeleteProject($id: ID!) {
deleteProject(id: $id) {
success
}
}
`;
export type DeleteProjectMutationFn = Apollo.MutationFunction<DeleteProjectMutation, DeleteProjectMutationVariables>;
/**
* __useDeleteProjectMutation__
*
* To run a mutation, you first call `useDeleteProjectMutation` within a React component and pass it any options that fit your needs.
* When your component renders, `useDeleteProjectMutation` returns a tuple that includes:
* - A mutate function that you can call at any time to execute the mutation
* - An object with fields that represent the current status of the mutation's execution
*
* @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
*
* @example
* const [deleteProjectMutation, { data, loading, error }] = useDeleteProjectMutation({
* variables: {
* id: // value for 'id'
* },
* });
*/
export function useDeleteProjectMutation(baseOptions?: Apollo.MutationHookOptions<DeleteProjectMutation, DeleteProjectMutationVariables>) {
const options = {...defaultOptions, ...baseOptions}
return Apollo.useMutation<DeleteProjectMutation, DeleteProjectMutationVariables>(DeleteProjectDocument, options);
}
export type DeleteProjectMutationHookResult = ReturnType<typeof useDeleteProjectMutation>;
export type DeleteProjectMutationResult = Apollo.MutationResult<DeleteProjectMutation>;
export type DeleteProjectMutationOptions = Apollo.BaseMutationOptions<DeleteProjectMutation, DeleteProjectMutationVariables>;
export const OpenProjectDocument = gql`
mutation OpenProject($id: ID!) {
openProject(id: $id) {
id
name
isActive
}
}
`;
export type OpenProjectMutationFn = Apollo.MutationFunction<OpenProjectMutation, OpenProjectMutationVariables>;
/**
* __useOpenProjectMutation__
*
* To run a mutation, you first call `useOpenProjectMutation` within a React component and pass it any options that fit your needs.
* When your component renders, `useOpenProjectMutation` returns a tuple that includes:
* - A mutate function that you can call at any time to execute the mutation
* - An object with fields that represent the current status of the mutation's execution
*
* @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
*
* @example
* const [openProjectMutation, { data, loading, error }] = useOpenProjectMutation({
* variables: {
* id: // value for 'id'
* },
* });
*/
export function useOpenProjectMutation(baseOptions?: Apollo.MutationHookOptions<OpenProjectMutation, OpenProjectMutationVariables>) {
const options = {...defaultOptions, ...baseOptions}
return Apollo.useMutation<OpenProjectMutation, OpenProjectMutationVariables>(OpenProjectDocument, options);
}
export type OpenProjectMutationHookResult = ReturnType<typeof useOpenProjectMutation>;
export type OpenProjectMutationResult = Apollo.MutationResult<OpenProjectMutation>;
export type OpenProjectMutationOptions = Apollo.BaseMutationOptions<OpenProjectMutation, OpenProjectMutationVariables>;
export const ProjectsDocument = gql`
query Projects {
projects {
id
name
isActive
}
}
`;
/**
* __useProjectsQuery__
*
* To run a query within a React component, call `useProjectsQuery` and pass it any options that fit your needs.
* When your component renders, `useProjectsQuery` returns an object from Apollo Client that contains loading, error, and data properties
* you can use to render your UI.
*
* @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
*
* @example
* const { data, loading, error } = useProjectsQuery({
* variables: {
* },
* });
*/
export function useProjectsQuery(baseOptions?: Apollo.QueryHookOptions<ProjectsQuery, ProjectsQueryVariables>) {
const options = {...defaultOptions, ...baseOptions}
return Apollo.useQuery<ProjectsQuery, ProjectsQueryVariables>(ProjectsDocument, options);
}
export function useProjectsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<ProjectsQuery, ProjectsQueryVariables>) {
const options = {...defaultOptions, ...baseOptions}
return Apollo.useLazyQuery<ProjectsQuery, ProjectsQueryVariables>(ProjectsDocument, options);
}
export type ProjectsQueryHookResult = ReturnType<typeof useProjectsQuery>;
export type ProjectsLazyQueryHookResult = ReturnType<typeof useProjectsLazyQuery>;
export type ProjectsQueryResult = Apollo.QueryResult<ProjectsQuery, ProjectsQueryVariables>;
export const ClearHttpRequestLogDocument = gql`
mutation ClearHTTPRequestLog {
clearHTTPRequestLog {
success
}
}
`;
export type ClearHttpRequestLogMutationFn = Apollo.MutationFunction<ClearHttpRequestLogMutation, ClearHttpRequestLogMutationVariables>;
/**
* __useClearHttpRequestLogMutation__
*
* To run a mutation, you first call `useClearHttpRequestLogMutation` within a React component and pass it any options that fit your needs.
* When your component renders, `useClearHttpRequestLogMutation` returns a tuple that includes:
* - A mutate function that you can call at any time to execute the mutation
* - An object with fields that represent the current status of the mutation's execution
*
* @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
*
* @example
* const [clearHttpRequestLogMutation, { data, loading, error }] = useClearHttpRequestLogMutation({
* variables: {
* },
* });
*/
export function useClearHttpRequestLogMutation(baseOptions?: Apollo.MutationHookOptions<ClearHttpRequestLogMutation, ClearHttpRequestLogMutationVariables>) {
const options = {...defaultOptions, ...baseOptions}
return Apollo.useMutation<ClearHttpRequestLogMutation, ClearHttpRequestLogMutationVariables>(ClearHttpRequestLogDocument, options);
}
export type ClearHttpRequestLogMutationHookResult = ReturnType<typeof useClearHttpRequestLogMutation>;
export type ClearHttpRequestLogMutationResult = Apollo.MutationResult<ClearHttpRequestLogMutation>;
export type ClearHttpRequestLogMutationOptions = Apollo.BaseMutationOptions<ClearHttpRequestLogMutation, ClearHttpRequestLogMutationVariables>;
export const HttpRequestLogDocument = gql`
query HttpRequestLog($id: ID!) {
httpRequestLog(id: $id) {
id
method
url
proto
headers {
key
value
}
body
response {
proto
headers {
key
value
}
statusCode
statusReason
body
}
}
}
`;
/**
* __useHttpRequestLogQuery__
*
* To run a query within a React component, call `useHttpRequestLogQuery` and pass it any options that fit your needs.
* When your component renders, `useHttpRequestLogQuery` returns an object from Apollo Client that contains loading, error, and data properties
* you can use to render your UI.
*
* @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
*
* @example
* const { data, loading, error } = useHttpRequestLogQuery({
* variables: {
* id: // value for 'id'
* },
* });
*/
export function useHttpRequestLogQuery(baseOptions: Apollo.QueryHookOptions<HttpRequestLogQuery, HttpRequestLogQueryVariables>) {
const options = {...defaultOptions, ...baseOptions}
return Apollo.useQuery<HttpRequestLogQuery, HttpRequestLogQueryVariables>(HttpRequestLogDocument, options);
}
export function useHttpRequestLogLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<HttpRequestLogQuery, HttpRequestLogQueryVariables>) {
const options = {...defaultOptions, ...baseOptions}
return Apollo.useLazyQuery<HttpRequestLogQuery, HttpRequestLogQueryVariables>(HttpRequestLogDocument, options);
}
export type HttpRequestLogQueryHookResult = ReturnType<typeof useHttpRequestLogQuery>;
export type HttpRequestLogLazyQueryHookResult = ReturnType<typeof useHttpRequestLogLazyQuery>;
export type HttpRequestLogQueryResult = Apollo.QueryResult<HttpRequestLogQuery, HttpRequestLogQueryVariables>;
export const HttpRequestLogFilterDocument = gql`
query HttpRequestLogFilter {
httpRequestLogFilter {
onlyInScope
searchExpression
}
}
`;
/**
* __useHttpRequestLogFilterQuery__
*
* To run a query within a React component, call `useHttpRequestLogFilterQuery` and pass it any options that fit your needs.
* When your component renders, `useHttpRequestLogFilterQuery` returns an object from Apollo Client that contains loading, error, and data properties
* you can use to render your UI.
*
* @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
*
* @example
* const { data, loading, error } = useHttpRequestLogFilterQuery({
* variables: {
* },
* });
*/
export function useHttpRequestLogFilterQuery(baseOptions?: Apollo.QueryHookOptions<HttpRequestLogFilterQuery, HttpRequestLogFilterQueryVariables>) {
const options = {...defaultOptions, ...baseOptions}
return Apollo.useQuery<HttpRequestLogFilterQuery, HttpRequestLogFilterQueryVariables>(HttpRequestLogFilterDocument, options);
}
export function useHttpRequestLogFilterLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<HttpRequestLogFilterQuery, HttpRequestLogFilterQueryVariables>) {
const options = {...defaultOptions, ...baseOptions}
return Apollo.useLazyQuery<HttpRequestLogFilterQuery, HttpRequestLogFilterQueryVariables>(HttpRequestLogFilterDocument, options);
}
export type HttpRequestLogFilterQueryHookResult = ReturnType<typeof useHttpRequestLogFilterQuery>;
export type HttpRequestLogFilterLazyQueryHookResult = ReturnType<typeof useHttpRequestLogFilterLazyQuery>;
export type HttpRequestLogFilterQueryResult = Apollo.QueryResult<HttpRequestLogFilterQuery, HttpRequestLogFilterQueryVariables>;
export const HttpRequestLogsDocument = gql`
query HttpRequestLogs {
httpRequestLogs {
id
method
url
timestamp
response {
statusCode
statusReason
}
}
}
`;
/**
* __useHttpRequestLogsQuery__
*
* To run a query within a React component, call `useHttpRequestLogsQuery` and pass it any options that fit your needs.
* When your component renders, `useHttpRequestLogsQuery` returns an object from Apollo Client that contains loading, error, and data properties
* you can use to render your UI.
*
* @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
*
* @example
* const { data, loading, error } = useHttpRequestLogsQuery({
* variables: {
* },
* });
*/
export function useHttpRequestLogsQuery(baseOptions?: Apollo.QueryHookOptions<HttpRequestLogsQuery, HttpRequestLogsQueryVariables>) {
const options = {...defaultOptions, ...baseOptions}
return Apollo.useQuery<HttpRequestLogsQuery, HttpRequestLogsQueryVariables>(HttpRequestLogsDocument, options);
}
export function useHttpRequestLogsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<HttpRequestLogsQuery, HttpRequestLogsQueryVariables>) {
const options = {...defaultOptions, ...baseOptions}
return Apollo.useLazyQuery<HttpRequestLogsQuery, HttpRequestLogsQueryVariables>(HttpRequestLogsDocument, options);
}
export type HttpRequestLogsQueryHookResult = ReturnType<typeof useHttpRequestLogsQuery>;
export type HttpRequestLogsLazyQueryHookResult = ReturnType<typeof useHttpRequestLogsLazyQuery>;
export type HttpRequestLogsQueryResult = Apollo.QueryResult<HttpRequestLogsQuery, HttpRequestLogsQueryVariables>;
export const SetHttpRequestLogFilterDocument = gql`
mutation SetHttpRequestLogFilter($filter: HttpRequestLogFilterInput) {
setHttpRequestLogFilter(filter: $filter) {
onlyInScope
searchExpression
}
}
`;
export type SetHttpRequestLogFilterMutationFn = Apollo.MutationFunction<SetHttpRequestLogFilterMutation, SetHttpRequestLogFilterMutationVariables>;
/**
* __useSetHttpRequestLogFilterMutation__
*
* To run a mutation, you first call `useSetHttpRequestLogFilterMutation` within a React component and pass it any options that fit your needs.
* When your component renders, `useSetHttpRequestLogFilterMutation` returns a tuple that includes:
* - A mutate function that you can call at any time to execute the mutation
* - An object with fields that represent the current status of the mutation's execution
*
* @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
*
* @example
* const [setHttpRequestLogFilterMutation, { data, loading, error }] = useSetHttpRequestLogFilterMutation({
* variables: {
* filter: // value for 'filter'
* },
* });
*/
export function useSetHttpRequestLogFilterMutation(baseOptions?: Apollo.MutationHookOptions<SetHttpRequestLogFilterMutation, SetHttpRequestLogFilterMutationVariables>) {
const options = {...defaultOptions, ...baseOptions}
return Apollo.useMutation<SetHttpRequestLogFilterMutation, SetHttpRequestLogFilterMutationVariables>(SetHttpRequestLogFilterDocument, options);
}
export type SetHttpRequestLogFilterMutationHookResult = ReturnType<typeof useSetHttpRequestLogFilterMutation>;
export type SetHttpRequestLogFilterMutationResult = Apollo.MutationResult<SetHttpRequestLogFilterMutation>;
export type SetHttpRequestLogFilterMutationOptions = Apollo.BaseMutationOptions<SetHttpRequestLogFilterMutation, SetHttpRequestLogFilterMutationVariables>;
export const ScopeDocument = gql`
query Scope {
scope {
url
}
}
`;
/**
* __useScopeQuery__
*
* To run a query within a React component, call `useScopeQuery` and pass it any options that fit your needs.
* When your component renders, `useScopeQuery` returns an object from Apollo Client that contains loading, error, and data properties
* you can use to render your UI.
*
* @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
*
* @example
* const { data, loading, error } = useScopeQuery({
* variables: {
* },
* });
*/
export function useScopeQuery(baseOptions?: Apollo.QueryHookOptions<ScopeQuery, ScopeQueryVariables>) {
const options = {...defaultOptions, ...baseOptions}
return Apollo.useQuery<ScopeQuery, ScopeQueryVariables>(ScopeDocument, options);
}
export function useScopeLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<ScopeQuery, ScopeQueryVariables>) {
const options = {...defaultOptions, ...baseOptions}
return Apollo.useLazyQuery<ScopeQuery, ScopeQueryVariables>(ScopeDocument, options);
}
export type ScopeQueryHookResult = ReturnType<typeof useScopeQuery>;
export type ScopeLazyQueryHookResult = ReturnType<typeof useScopeLazyQuery>;
export type ScopeQueryResult = Apollo.QueryResult<ScopeQuery, ScopeQueryVariables>;
export const SetScopeDocument = gql`
mutation SetScope($scope: [ScopeRuleInput!]!) {
setScope(scope: $scope) {
url
}
}
`;
export type SetScopeMutationFn = Apollo.MutationFunction<SetScopeMutation, SetScopeMutationVariables>;
/**
* __useSetScopeMutation__
*
* To run a mutation, you first call `useSetScopeMutation` within a React component and pass it any options that fit your needs.
* When your component renders, `useSetScopeMutation` returns a tuple that includes:
* - A mutate function that you can call at any time to execute the mutation
* - An object with fields that represent the current status of the mutation's execution
*
* @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
*
* @example
* const [setScopeMutation, { data, loading, error }] = useSetScopeMutation({
* variables: {
* scope: // value for 'scope'
* },
* });
*/
export function useSetScopeMutation(baseOptions?: Apollo.MutationHookOptions<SetScopeMutation, SetScopeMutationVariables>) {
const options = {...defaultOptions, ...baseOptions}
return Apollo.useMutation<SetScopeMutation, SetScopeMutationVariables>(SetScopeDocument, options);
}
export type SetScopeMutationHookResult = ReturnType<typeof useSetScopeMutation>;
export type SetScopeMutationResult = Apollo.MutationResult<SetScopeMutation>;
export type SetScopeMutationOptions = Apollo.BaseMutationOptions<SetScopeMutation, SetScopeMutationVariables>;
export const CreateOrUpdateSenderRequestDocument = gql`
mutation CreateOrUpdateSenderRequest($request: SenderRequestInput!) {
createOrUpdateSenderRequest(request: $request) {
id
}
}
`;
export type CreateOrUpdateSenderRequestMutationFn = Apollo.MutationFunction<CreateOrUpdateSenderRequestMutation, CreateOrUpdateSenderRequestMutationVariables>;
/**
* __useCreateOrUpdateSenderRequestMutation__
*
* To run a mutation, you first call `useCreateOrUpdateSenderRequestMutation` within a React component and pass it any options that fit your needs.
* When your component renders, `useCreateOrUpdateSenderRequestMutation` returns a tuple that includes:
* - A mutate function that you can call at any time to execute the mutation
* - An object with fields that represent the current status of the mutation's execution
*
* @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
*
* @example
* const [createOrUpdateSenderRequestMutation, { data, loading, error }] = useCreateOrUpdateSenderRequestMutation({
* variables: {
* request: // value for 'request'
* },
* });
*/
export function useCreateOrUpdateSenderRequestMutation(baseOptions?: Apollo.MutationHookOptions<CreateOrUpdateSenderRequestMutation, CreateOrUpdateSenderRequestMutationVariables>) {
const options = {...defaultOptions, ...baseOptions}
return Apollo.useMutation<CreateOrUpdateSenderRequestMutation, CreateOrUpdateSenderRequestMutationVariables>(CreateOrUpdateSenderRequestDocument, options);
}
export type CreateOrUpdateSenderRequestMutationHookResult = ReturnType<typeof useCreateOrUpdateSenderRequestMutation>;
export type CreateOrUpdateSenderRequestMutationResult = Apollo.MutationResult<CreateOrUpdateSenderRequestMutation>;
export type CreateOrUpdateSenderRequestMutationOptions = Apollo.BaseMutationOptions<CreateOrUpdateSenderRequestMutation, CreateOrUpdateSenderRequestMutationVariables>;
export const CreateSenderRequestFromHttpRequestLogDocument = gql`
mutation CreateSenderRequestFromHttpRequestLog($id: ID!) {
createSenderRequestFromHttpRequestLog(id: $id) {
id
}
}
`;
export type CreateSenderRequestFromHttpRequestLogMutationFn = Apollo.MutationFunction<CreateSenderRequestFromHttpRequestLogMutation, CreateSenderRequestFromHttpRequestLogMutationVariables>;
/**
* __useCreateSenderRequestFromHttpRequestLogMutation__
*
* To run a mutation, you first call `useCreateSenderRequestFromHttpRequestLogMutation` within a React component and pass it any options that fit your needs.
* When your component renders, `useCreateSenderRequestFromHttpRequestLogMutation` returns a tuple that includes:
* - A mutate function that you can call at any time to execute the mutation
* - An object with fields that represent the current status of the mutation's execution
*
* @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
*
* @example
* const [createSenderRequestFromHttpRequestLogMutation, { data, loading, error }] = useCreateSenderRequestFromHttpRequestLogMutation({
* variables: {
* id: // value for 'id'
* },
* });
*/
export function useCreateSenderRequestFromHttpRequestLogMutation(baseOptions?: Apollo.MutationHookOptions<CreateSenderRequestFromHttpRequestLogMutation, CreateSenderRequestFromHttpRequestLogMutationVariables>) {
const options = {...defaultOptions, ...baseOptions}
return Apollo.useMutation<CreateSenderRequestFromHttpRequestLogMutation, CreateSenderRequestFromHttpRequestLogMutationVariables>(CreateSenderRequestFromHttpRequestLogDocument, options);
}
export type CreateSenderRequestFromHttpRequestLogMutationHookResult = ReturnType<typeof useCreateSenderRequestFromHttpRequestLogMutation>;
export type CreateSenderRequestFromHttpRequestLogMutationResult = Apollo.MutationResult<CreateSenderRequestFromHttpRequestLogMutation>;
export type CreateSenderRequestFromHttpRequestLogMutationOptions = Apollo.BaseMutationOptions<CreateSenderRequestFromHttpRequestLogMutation, CreateSenderRequestFromHttpRequestLogMutationVariables>;
export const SendRequestDocument = gql`
mutation SendRequest($id: ID!) {
sendRequest(id: $id) {
id
}
}
`;
export type SendRequestMutationFn = Apollo.MutationFunction<SendRequestMutation, SendRequestMutationVariables>;
/**
* __useSendRequestMutation__
*
* To run a mutation, you first call `useSendRequestMutation` within a React component and pass it any options that fit your needs.
* When your component renders, `useSendRequestMutation` returns a tuple that includes:
* - A mutate function that you can call at any time to execute the mutation
* - An object with fields that represent the current status of the mutation's execution
*
* @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
*
* @example
* const [sendRequestMutation, { data, loading, error }] = useSendRequestMutation({
* variables: {
* id: // value for 'id'
* },
* });
*/
export function useSendRequestMutation(baseOptions?: Apollo.MutationHookOptions<SendRequestMutation, SendRequestMutationVariables>) {
const options = {...defaultOptions, ...baseOptions}
return Apollo.useMutation<SendRequestMutation, SendRequestMutationVariables>(SendRequestDocument, options);
}
export type SendRequestMutationHookResult = ReturnType<typeof useSendRequestMutation>;
export type SendRequestMutationResult = Apollo.MutationResult<SendRequestMutation>;
export type SendRequestMutationOptions = Apollo.BaseMutationOptions<SendRequestMutation, SendRequestMutationVariables>;
export const GetSenderRequestDocument = gql`
query GetSenderRequest($id: ID!) {
senderRequest(id: $id) {
id
sourceRequestLogID
url
method
proto
headers {
key
value
}
body
timestamp
response {
id
proto
statusCode
statusReason
body
headers {
key
value
}
}
}
}
`;
/**
* __useGetSenderRequestQuery__
*
* To run a query within a React component, call `useGetSenderRequestQuery` and pass it any options that fit your needs.
* When your component renders, `useGetSenderRequestQuery` returns an object from Apollo Client that contains loading, error, and data properties
* you can use to render your UI.
*
* @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
*
* @example
* const { data, loading, error } = useGetSenderRequestQuery({
* variables: {
* id: // value for 'id'
* },
* });
*/
export function useGetSenderRequestQuery(baseOptions: Apollo.QueryHookOptions<GetSenderRequestQuery, GetSenderRequestQueryVariables>) {
const options = {...defaultOptions, ...baseOptions}
return Apollo.useQuery<GetSenderRequestQuery, GetSenderRequestQueryVariables>(GetSenderRequestDocument, options);
}
export function useGetSenderRequestLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<GetSenderRequestQuery, GetSenderRequestQueryVariables>) {
const options = {...defaultOptions, ...baseOptions}
return Apollo.useLazyQuery<GetSenderRequestQuery, GetSenderRequestQueryVariables>(GetSenderRequestDocument, options);
}
export type GetSenderRequestQueryHookResult = ReturnType<typeof useGetSenderRequestQuery>;
export type GetSenderRequestLazyQueryHookResult = ReturnType<typeof useGetSenderRequestLazyQuery>;
export type GetSenderRequestQueryResult = Apollo.QueryResult<GetSenderRequestQuery, GetSenderRequestQueryVariables>;
export const GetSenderRequestsDocument = gql`
query GetSenderRequests {
senderRequests {
id
url
method
response {
id
statusCode
statusReason
}
}
}
`;
/**
* __useGetSenderRequestsQuery__
*
* To run a query within a React component, call `useGetSenderRequestsQuery` and pass it any options that fit your needs.
* When your component renders, `useGetSenderRequestsQuery` returns an object from Apollo Client that contains loading, error, and data properties
* you can use to render your UI.
*
* @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
*
* @example
* const { data, loading, error } = useGetSenderRequestsQuery({
* variables: {
* },
* });
*/
export function useGetSenderRequestsQuery(baseOptions?: Apollo.QueryHookOptions<GetSenderRequestsQuery, GetSenderRequestsQueryVariables>) {
const options = {...defaultOptions, ...baseOptions}
return Apollo.useQuery<GetSenderRequestsQuery, GetSenderRequestsQueryVariables>(GetSenderRequestsDocument, options);
}
export function useGetSenderRequestsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<GetSenderRequestsQuery, GetSenderRequestsQueryVariables>) {
const options = {...defaultOptions, ...baseOptions}
return Apollo.useLazyQuery<GetSenderRequestsQuery, GetSenderRequestsQueryVariables>(GetSenderRequestsDocument, options);
}
export type GetSenderRequestsQueryHookResult = ReturnType<typeof useGetSenderRequestsQuery>;
export type GetSenderRequestsLazyQueryHookResult = ReturnType<typeof useGetSenderRequestsLazyQuery>;
export type GetSenderRequestsQueryResult = Apollo.QueryResult<GetSenderRequestsQuery, GetSenderRequestsQueryVariables>;

View file

@ -0,0 +1,7 @@
function omitTypename<T>(key: string, value: T): T | undefined {
return key === "__typename" ? undefined : value;
}
export function withoutTypename<T>(input: T): T {
return JSON.parse(JSON.stringify(input), omitTypename);
}

View file

@ -0,0 +1,24 @@
import { ApolloClient, HttpLink, InMemoryCache, NormalizedCacheObject } from "@apollo/client";
let apolloClient: ApolloClient<NormalizedCacheObject>;
function createApolloClient() {
return new ApolloClient({
ssrMode: typeof window === "undefined",
link: new HttpLink({
uri: "/api/graphql/",
}),
cache: new InMemoryCache(),
});
}
export function useApollo() {
const _apolloClient = apolloClient ?? createApolloClient();
// For SSG and SSR always create a new Apollo Client
if (typeof window === "undefined") return _apolloClient;
// Create the Apollo Client once in the client
if (!apolloClient) apolloClient = _apolloClient;
return _apolloClient;
}

View file

@ -1,5 +1,5 @@
import { createTheme } from "@mui/material/styles";
import * as colors from "@mui/material/colors";
import { createTheme } from "@mui/material/styles";
const heading = {
fontFamily: "'JetBrains Mono', monospace",

View file

@ -1,5 +0,0 @@
const omitTypename = (key: string, value: any) => (key === "__typename" ? undefined : value);
export function withoutTypename(input: any): any {
return JSON.parse(JSON.stringify(input), omitTypename);
}

View file

@ -1,24 +0,0 @@
export type RequestLog = {
id: string
url: string
method: string
proto: string
headers: HTTPHeader[]
body?: string
timestamp: string
response?: ResponseLog
}
export type ResponseLog = {
proto: string
statusCode: number
statusReason: string
body?: string
headers: HTTPHeader[]
}
export type HTTPHeader = {
key: string
value: string
}

View file

@ -1,3 +0,0 @@
export type ScopeRule = {
url?: string
}

View file

@ -1,14 +1,15 @@
import * as React from "react";
import Head from "next/head";
import { AppProps } from "next/app";
import { ApolloProvider } from "@apollo/client";
import { ThemeProvider } from "@mui/material/styles";
import CssBaseline from "@mui/material/CssBaseline";
import { CacheProvider, EmotionCache } from "@emotion/react";
import CssBaseline from "@mui/material/CssBaseline";
import { ThemeProvider } from "@mui/material/styles";
import { AppProps } from "next/app";
import Head from "next/head";
import React from "react";
import { useApollo } from "lib/graphql/useApollo";
import createEmotionCache from "lib/mui/createEmotionCache";
import theme from "lib/mui/theme";
import createEmotionCache from "../lib/createEmotionCache";
import theme from "../lib/theme";
import { useApollo } from "../lib/graphql";
import "../styles.css";
// Client-side cache, shared for the whole session of the user in the browser.
@ -20,7 +21,7 @@ interface MyAppProps extends AppProps {
export default function MyApp(props: MyAppProps) {
const { Component, emotionCache = clientSideEmotionCache, pageProps } = props;
const apolloClient = useApollo(pageProps);
const apolloClient = useApollo();
return (
<CacheProvider value={emotionCache}>

View file

@ -1,11 +1,12 @@
import * as React from "react";
import Document, { Html, Head, Main, NextScript } from "next/document";
import createEmotionServer from "@emotion/server/create-instance";
import Document, { Html, Head, Main, NextScript } from "next/document";
import React from "react";
import createEmotionCache from "../lib/createEmotionCache";
import theme from "../lib/theme";
import createEmotionCache from "lib/mui/createEmotionCache";
import theme from "lib/mui/theme";
export default class MyDocument extends Document {
/* eslint-disable */
render() {
return (
<Html lang="en">

View file

@ -1,32 +0,0 @@
import { Box, Link as MaterialLink, Typography } from "@mui/material";
import Link from "next/link";
import React from "react";
import Layout, { Page } from "../../components/Layout";
function Index(): JSX.Element {
return (
<Layout page={Page.GetStarted} title="Get started">
<Box p={4}>
<Box mb={3}>
<Typography variant="h4">Get started</Typography>
</Box>
<Typography paragraph>
Youve loaded a (new) project. Whats next? You can now use the MITM proxy and review HTTP requests and
responses via the{" "}
<Link href="/proxy/logs" passHref>
<MaterialLink color="primary">Proxy logs</MaterialLink>
</Link>
. Stuck? Ask for help on the{" "}
<MaterialLink href="https://github.com/dstotijn/hetty/discussions" color="primary" target="_blank">
Discussions forum
</MaterialLink>
.
</Typography>
</Box>
</Layout>
);
}
export default Index;

View file

@ -1,8 +1,8 @@
import { Box, Button, Typography } from "@mui/material";
import FolderIcon from "@mui/icons-material/Folder";
import { Box, Button, Typography } from "@mui/material";
import Link from "next/link";
import Layout, { Page } from "../components/Layout";
import { Layout, Page } from "features/Layout";
function Index(): JSX.Element {
const highlightSx = { color: "primary.main" };

View file

@ -1,7 +1,8 @@
import { Box, Divider, Grid, Typography } from "@mui/material";
import Layout, { Page } from "../../components/Layout";
import NewProject from "../../components/projects/NewProject";
import ProjectList from "../../components/projects/ProjectList";
import { Layout, Page } from "features/Layout";
import NewProject from "features/projects/components/NewProject";
import ProjectList from "features/projects/components/ProjectList";
function Index(): JSX.Element {
return (

View file

@ -1,9 +1,9 @@
import React from "react";
import { Button, Typography } from "@mui/material";
import ListIcon from "@mui/icons-material/List";
import { Button, Typography } from "@mui/material";
import Link from "next/link";
import React from "react";
import Layout, { Page } from "../../components/Layout";
import { Layout, Page } from "features/Layout";
function Index(): JSX.Element {
return (

View file

@ -1,8 +1,8 @@
import { Box } from "@mui/material";
import LogsOverview from "../../../components/reqlog/LogsOverview";
import Layout, { Page } from "../../../components/Layout";
import Search from "../../../components/reqlog/Search";
import { Layout, Page } from "features/Layout";
import LogsOverview from "features/reqlog/components/LogsOverview";
import Search from "features/reqlog/components/Search";
function ProxyLogs(): JSX.Element {
return (

View file

@ -1,9 +1,9 @@
import { Box, Divider, Grid, Typography } from "@mui/material";
import React from "react";
import Layout, { Page } from "../../components/Layout";
import AddRule from "../../components/scope/AddRule";
import Rules from "../../components/scope/Rules";
import { Layout, Page } from "features/Layout";
import AddRule from "features/scope/components/AddRule";
import Rules from "features/scope/components/Rules";
function Index(): JSX.Element {
return (

View file

@ -3,9 +3,9 @@ import { AllotmentProps } from "allotment";
import { PaneProps } from "allotment/dist/types/src/allotment";
import { ComponentType, useEffect, useRef, useState } from "react";
import Layout, { Page } from "../../components/Layout";
import EditRequest from "../../components/sender/EditRequest";
import History from "../../components/sender/History";
import { Layout, Page } from "features/Layout";
import EditRequest from "features/sender/components/EditRequest";
import History from "features/sender/components/History";
function Index(): JSX.Element {
const isMountedRef = useRef(false);

View file

@ -1,11 +1,11 @@
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"lib": ["dom", "dom.iterable", "esnext"],
"baseUrl": "src",
"paths": {
"src/*": ["./src/*"]
},
"downlevelIteration": true,
"allowJs": true,
"skipLibCheck": true,
@ -20,12 +20,6 @@
"jsx": "preserve",
"incremental": true
},
"include": [
"next-env.d.ts",
"**/*.ts",
"**/*.tsx"
],
"exclude": [
"node_modules"
]
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
"exclude": ["node_modules"]
}

View file

@ -2802,7 +2802,7 @@ eslint-import-resolver-node@^0.3.4, eslint-import-resolver-node@^0.3.6:
debug "^3.2.7"
resolve "^1.20.0"
eslint-import-resolver-typescript@^2.4.0:
eslint-import-resolver-typescript@^2.4.0, eslint-import-resolver-typescript@^2.5.0:
version "2.5.0"
resolved "https://registry.yarnpkg.com/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-2.5.0.tgz#07661966b272d14ba97f597b51e1a588f9722f0a"
integrity sha512-qZ6e5CFr+I7K4VVhQu3M/9xGv9/YmwsEXrsm3nimw8vWaVHRDrQRp26BgCypTxBp3vUp4o5aVEJRiy0F2DFddQ==
@ -2821,7 +2821,7 @@ eslint-module-utils@^2.7.2:
debug "^3.2.7"
find-up "^2.1.0"
eslint-plugin-import@^2.25.2:
eslint-plugin-import@^2.25.2, eslint-plugin-import@^2.25.4:
version "2.25.4"
resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.25.4.tgz#322f3f916a4e9e991ac7af32032c25ce313209f1"
integrity sha512-/KJBASVFxpu0xg1kIBn9AUa8hQVnszpwgE7Ld0lKAlx7Ie87yzEzCgSkekt+le/YVhiaosO4Y14GDAOc41nfxA==
@ -2890,18 +2890,6 @@ eslint-plugin-react@^7.27.0:
semver "^6.3.0"
string.prototype.matchall "^4.0.6"
eslint-plugin-unused-imports@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/eslint-plugin-unused-imports/-/eslint-plugin-unused-imports-2.0.0.tgz#d8db8c4d0cfa0637a8b51ce3fd7d1b6bc3f08520"
integrity sha512-3APeS/tQlTrFa167ThtP0Zm0vctjr4M44HMpeg1P4bK6wItarumq0Ma82xorMKdFsWpphQBlRPzw/pxiVELX1A==
dependencies:
eslint-rule-composer "^0.3.0"
eslint-rule-composer@^0.3.0:
version "0.3.0"
resolved "https://registry.yarnpkg.com/eslint-rule-composer/-/eslint-rule-composer-0.3.0.tgz#79320c927b0c5c0d3d3d2b76c8b4a488f25bbaf9"
integrity sha512-bt+Sh8CtDmn2OajxvNO+BX7Wn4CIWMpTRm3MaiKPCQcnnlm0CS2mhui6QaoeQugs+3Kj2ESKEEGJUdVafwhiCg==
eslint-scope@5.1.1, eslint-scope@^5.1.1:
version "5.1.1"
resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-5.1.1.tgz#e786e59a66cb92b3f6c1fb0d508aab174848f48c"