Tidy up admin structure

.gitignore

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

admin/.eslintrc.json

@@ -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",
+    "no-unused-vars": "off",
-    "unused-imports/no-unused-imports": "error",
+    "@typescript-eslint/no-unused-vars": "error",
-    "unused-imports/no-unused-vars": [
+
+    "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",
+        "alphabetize": { "order": "asc", "caseInsensitive": false },
-        "varsIgnorePattern": "^_",
+        "newlines-between": "always",
-        "args": "after-used",
+        "groups": ["builtin", "external", "parent", "sibling", "index"]
-        "argsIgnorePattern": "^_"
+      }
+    ],
+    "import/no-unused-modules": [
+      "error",
+      {
+        "missingExports": true,
+        "ignoreExports": ["./src/pages"]
       }
     ]
-  },
+  }
-  "plugins": ["unused-imports", "prettier"]
 }

admin/gqlcodegen.yml

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

admin/package.json

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

admin/public/site.webmanifest

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

admin/src/components/projects/NewProject.tsx

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

admin/src/components/reqlog/hooks/useClearHTTPRequestLog.ts

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

admin/src/components/reqlog/hooks/useCreateSenderRequest.ts

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

admin/src/components/reqlog/hooks/useHttpRequestLogs.ts

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

admin/src/features/Layout.tsx

@@ -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 React, { useState } from "react";
-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";
 
 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;

admin/src/features/projects/components/NewProject.tsx

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

admin/src/features/projects/components/ProjectList.tsx

@@ -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`
+import {
-  query Projects {
+  ProjectsQuery,
-    projects {
+  useCloseProjectMutation,
-      id
+  useDeleteProjectMutation,
-      name
+  useProjectsQuery,
-      isActive
+} from "lib/graphql/generated";
-    }
-  }
-`;
-
-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
-    }
-  }
-`;
 
 function ProjectList(): JSX.Element {
   const theme = useTheme();
-  const {
+  const projResult = useProjectsQuery({ fetchPolicy: "network-only" });
-    loading: projLoading,
+  const [openProject, openProjResult] = useOpenProjectMutation();
-    error: projErr,
+  const [closeProject, closeProjResult] = useCloseProjectMutation({
-    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, {
     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 />}
+        {projResult.loading && <CircularProgress />}
-        {projErr && <Alert severity="error">Error fetching projects: {projErr.message}</Alert>}
+        {projResult.error && <Alert severity="error">Error fetching projects: {projResult.error.message}</Alert>}
-        {openProjErr && <Alert severity="error">Error opening project: {openProjErr.message}</Alert>}
+        {openProjResult.error && <Alert severity="error">Error opening project: {openProjResult.error.message}</Alert>}
-        {closeProjErr && <Alert severity="error">Error closing project: {closeProjErr.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>

admin/src/features/projects/graphql/closeProject.graphql

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

admin/src/features/projects/graphql/createProject.graphql

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

admin/src/features/projects/graphql/deleteProject.graphql

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

admin/src/features/projects/graphql/openProject.graphql

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

admin/src/features/projects/graphql/projects.graphql

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

admin/src/features/projects/hooks/useOpenProjectMutation.ts

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

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

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

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

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

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

@@ -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`
+import { useHttpRequestLogQuery } from "lib/graphql/generated";
-  query HttpRequestLog($id: ID!) {
-    httpRequestLog(id: $id) {
-      id
-      method
-      url
-      proto
-      headers {
-        key
-        value
-      }
-      body
-      response {
-        proto
-        headers {
-          key
-          value
-        }
-        statusCode
-        statusReason
-        body
-      }
-    }
-  }
-`;
 
 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>

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

@@ -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 RequestList from "./RequestList";
-import { useHttpRequestLogs } from "./hooks/useHttpRequestLogs";
 
-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;

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

@@ -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: {
+  request: NonNullable<HttpRequestLogQuery["httpRequestLog"]>;
-    method: string;
-    url: string;
-    proto: string;
-    headers: Array<{ key: string; value: string }>;
-    body?: string;
-  };
 }
 
 function RequestDetail({ request }: Props): JSX.Element {

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

@@ -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 [newSenderReqId, setNewSenderReqId] = useState("");
-  const [copiedReqNotifOpen, setCopiedReqNotifOpen] = React.useState(false);
+  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>

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

@@ -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: {
+  response: NonNullable<NonNullable<HttpRequestLogQuery["httpRequestLog"]>["response"]>;
-    proto: string;
-    statusCode: number;
-    statusReason: string;
-    headers: Array<{ key: string; value: string }>;
-    body?: string;
-  };
 }
 
 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}>

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

@@ -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`
+import {
-  query HttpRequestLogFilter {
+  HttpRequestLogFilterDocument,
-    httpRequestLogFilter {
+  HttpRequestLogsDocument,
-      onlyInScope
+  useClearHttpRequestLogMutation,
-      searchExpression
+  useHttpRequestLogFilterQuery,
-    }
+  useSetHttpRequestLogFilterMutation,
-  }
+} from "lib/graphql/generated";
-`;
+import { withoutTypename } from "lib/graphql/omitTypename";
-
-const SET_FILTER = gql`
-  mutation SetHttpRequestLogFilter($filter: HttpRequestLogFilterInput) {
-    setHttpRequestLogFilter(filter: $filter) {
-      onlyInScope
-      searchExpression
-    }
-  }
-`;
-
-export interface SearchFilter {
-  onlyInScope: boolean;
-  searchExpression: string;
-}
 
 function Search(): JSX.Element {
   const theme = useTheme();
 
   const [searchExpr, setSearchExpr] = useState("");
-  const {
+  const filterResult = useHttpRequestLogFilterQuery({
-    loading: filterLoading,
-    error: filterErr,
-    data: filter,
-  } = useQuery(FILTER, {
     onCompleted: (data) => {
       setSearchExpr(data.httpRequestLogFilter?.searchExpression || "");
     },
   });
+  const filter = filterResult.data?.httpRequestLogFilter;
 
-  const [setFilterMutate, { error: setFilterErr, loading: setFilterLoading }] = useMutation<{
+  const [setFilterMutate, setFilterResult] = useSetHttpRequestLogFilterMutation({
-    setHttpRequestLogFilter: SearchFilter | null;
-  }>(SET_FILTER, {
     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 fetching filter" error={filterResult.error} />
-      <Error prefix="Error setting filter" error={setFilterErr} />
+      <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}
+                      checked={filter?.onlyInScope ? true : false}
-                      disabled={filterLoading || setFilterLoading}
+                      disabled={filterResult.loading || setFilterResult.loading}
                       onChange={(e) =>
                         setFilterMutate({
                           variables: {
                             filter: {
-                              ...withoutTypename(filter?.httpRequestLogFilter),
+                              ...withoutTypename(filter),
                               onlyInScope: e.target.checked,
                             },
                           },

admin/src/features/reqlog/graphql/clearHttpRequestLog.graphql

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

admin/src/features/reqlog/graphql/httpRequestLog.graphql

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

admin/src/features/reqlog/graphql/httpRequestLogFilter.graphql

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

admin/src/features/reqlog/graphql/httpRequestLogs.graphql

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

admin/src/features/reqlog/graphql/setHttpRequestLogFilter.graphql

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

admin/src/features/scope/components/AddRule.tsx

@@ -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 React, { useState } from "react";
-import { Alert } from "@mui/lab";
-import React from "react";
-import { SCOPE } from "./Rules";
-import { ScopeRule } from "../../lib/scope";
 
-const SET_SCOPE = gql`
+import { ScopeDocument, ScopeQuery, ScopeRule, useSetScopeMutation } from "lib/graphql/generated";
-  mutation SetScope($scope: [ScopeRuleInput!]!) {
-    setScope(scope: $scope) {
-      url
-    }
-  }
-`;
 
 function AddRule(): JSX.Element {
-  const [ruleType, setRuleType] = React.useState("url");
+  const [ruleType, setRuleType] = useState("url");
-  const [expression, setExpression] = React.useState("");
+  const [expression, setExpression] = useState("");
 
   const client = useApolloClient();
-  const [setScope, { error, loading }] = useMutation(SET_SCOPE, {
+  const [setScope, { error, loading }] = useSetScopeMutation({
-    onError() {},
+    onCompleted({ setScope }) {
-    onCompleted() {
-      setExpression("");
-    },
-    update(_, { data: { 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[] }>({
+      const data = client.readQuery<ScopeQuery>({
-        query: SCOPE,
+        query: ScopeDocument,
       });
       if (data) {
         scope = data.scope;

admin/src/features/scope/components/RuleListItem.tsx

@@ -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`
+import { ScopeDocument, ScopeQuery, useSetScopeMutation } from "lib/graphql/generated";
-  mutation SetScope($scope: [ScopeRuleInput!]!) {
+
-    setScope(scope: $scope) {
+type ScopeRule = ScopeQuery["scope"][number];
-      url
-    }
-  }
-`;
 
 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, {
+  const [setScope, { loading }] = useSetScopeMutation({
-    update(_, { data: { setScope } }) {
+    onCompleted({ setScope }) {
       client.writeQuery({
-        query: SCOPE,
+        query: ScopeDocument,
         data: { scope: setScope },
       });
     },

admin/src/features/scope/components/Rules.tsx

@@ -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`
+import RuleListItem from "./RuleListItem";
-  query Scope {
+
-    scope {
+import { useScopeQuery } from "lib/graphql/generated";
-      url
-    }
-  }
-`;
 
 function Rules(): JSX.Element {
-  const { loading, error, data } = useQuery<{ scope: ScopeRule[] }>(SCOPE);
+  const { loading, error, data } = useScopeQuery();
 
   return (
     <div>

admin/src/features/scope/graphql/scope.graphql

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

admin/src/features/scope/graphql/setScope.graphql

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

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

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

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

@@ -1,9 +1,10 @@
 import { TabContext, TabList, TabPanel } from "@mui/lab";
 import { Box, Tab } from "@mui/material";
-import { useState } from "react";
+import React, { useState } from "react";
-import Editor from "../common/Editor";
 
-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 {

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

@@ -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 CenteredPaper from "lib/components/CenteredPaper";
-import HttpStatusIcon from "../common/HttpStatusIcon";
+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>

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

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

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

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

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

@@ -1,17 +1,18 @@
 import { TabContext, TabList, TabPanel } from "@mui/lab";
 import { Box, Tab, Typography } from "@mui/material";
-import { useState } from "react";
+import React, { useState } from "react";
-import { HttpResponseLog } from "../../generated/graphql";
-import CenteredPaper from "../common/CenteredPaper";
-import Editor from "../common/Editor";
 
-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",

admin/src/generated/graphql.tsx

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

admin/src/lib/Project.ts

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

admin/src/lib/components/HttpStatusIcon.tsx

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

admin/src/lib/components/ResponseStatus.tsx

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

admin/src/lib/components/useContextMenu.tsx

@@ -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] {
+export default function useContextMenu(): [
-  const [contextMenu, setContextMenu] = React.useState<{
+  (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;

admin/src/lib/graphql.ts

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

admin/src/lib/graphql/generated.tsx

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

admin/src/lib/graphql/omitTypename.ts

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

admin/src/lib/graphql/useApollo.ts

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

admin/src/lib/mui/theme.ts

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

admin/src/lib/omitTypename.ts

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

admin/src/lib/requestLogs.ts

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

admin/src/lib/scope.ts

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

admin/src/pages/_app.tsx

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

admin/src/pages/_document.tsx

@@ -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 createEmotionCache from "lib/mui/createEmotionCache";
-import theme from "../lib/theme";
+import theme from "lib/mui/theme";
 
 export default class MyDocument extends Document {
+  /* eslint-disable */
   render() {
     return (
       <Html lang="en">

admin/src/pages/get-started/index.tsx

@@ -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>
-          You’ve loaded a (new) project. What’s 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;

admin/src/pages/index.tsx

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

admin/src/pages/projects/index.tsx

@@ -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 { Layout, Page } from "features/Layout";
-import ProjectList from "../../components/projects/ProjectList";
+import NewProject from "features/projects/components/NewProject";
+import ProjectList from "features/projects/components/ProjectList";
 
 function Index(): JSX.Element {
   return (

admin/src/pages/proxy/index.tsx

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

admin/src/pages/proxy/logs/index.tsx

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

admin/src/pages/scope/index.tsx

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

admin/src/pages/sender/index.tsx

@@ -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 { Layout, Page } from "features/Layout";
-import EditRequest from "../../components/sender/EditRequest";
+import EditRequest from "features/sender/components/EditRequest";
-import History from "../../components/sender/History";
+import History from "features/sender/components/History";
 
 function Index(): JSX.Element {
   const isMountedRef = useRef(false);

admin/tsconfig.json

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

admin/yarn.lock

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