Reuse components across Proxy and Sender modules

dstotijn · Feb 25, 2022 · 7e43479 · 7e43479
1 parent 11f7028
commit 7e43479
Show file tree

Hide file tree

Showing 33 changed files with 857 additions and 816 deletions.
diff --git a/admin/package.json b/admin/package.json
@@ -19,6 +19,7 @@
     "@mui/icons-material": "^5.3.1",
     "@mui/lab": "^5.0.0-alpha.66",
     "@mui/material": "^5.3.1",
+    "@mui/styles": "^5.4.2",
     "allotment": "^1.9.0",
     "deepmerge": "^4.2.2",
     "graphql": "^16.2.0",
@@ -27,7 +28,8 @@
     "next": "^12.0.8",
     "next-fonts": "^1.0.3",
     "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react-dom": "^17.0.2",
+    "react-split-pane": "^0.1.92"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0",

diff --git a/admin/src/features/Layout.tsx b/admin/src/features/Layout.tsx
@@ -27,6 +27,8 @@ import MuiListItemIcon, { ListItemIconProps } from "@mui/material/ListItemIcon";
 import Link from "next/link";
 import React, { useState } from "react";
 
+import { useActiveProject } from "lib/ActiveProjectContext";
+
 export enum Page {
   Home,
   GetStarted,
@@ -132,6 +134,7 @@ interface Props {
 }
 
 export function Layout({ title, page, children }: Props): JSX.Element {
+  const activeProject = useActiveProject();
   const theme = useTheme();
   const [open, setOpen] = useState(false);
 
@@ -200,7 +203,7 @@ export function Layout({ title, page, children }: Props): JSX.Element {
             </ListItemButton>
           </Link>
           <Link href="/proxy/logs" passHref>
-            <ListItemButton key="proxyLogs" selected={page === Page.ProxyLogs}>
+            <ListItemButton key="proxyLogs" disabled={!activeProject} selected={page === Page.ProxyLogs}>
               <Tooltip title="Proxy">
                 <ListItemIcon>
                   <SettingsEthernetIcon />
@@ -210,7 +213,7 @@ export function Layout({ title, page, children }: Props): JSX.Element {
             </ListItemButton>
           </Link>
           <Link href="/sender" passHref>
-            <ListItemButton key="sender" selected={page === Page.Sender}>
+            <ListItemButton key="sender" disabled={!activeProject} selected={page === Page.Sender}>
               <Tooltip title="Sender">
                 <ListItemIcon>
                   <SendIcon />
@@ -220,7 +223,7 @@ export function Layout({ title, page, children }: Props): JSX.Element {
             </ListItemButton>
           </Link>
           <Link href="/scope" passHref>
-            <ListItemButton key="scope" selected={page === Page.Scope}>
+            <ListItemButton key="scope" disabled={!activeProject} selected={page === Page.Scope}>
               <Tooltip title="Scope">
                 <ListItemIcon>
                   <LocationSearchingIcon />

diff --git a/admin/src/features/reqlog/components/HttpHeadersTable.tsx b/admin/src/features/reqlog/components/HttpHeadersTable.tsx
diff --git a/admin/src/features/reqlog/components/LogDetail.tsx b/admin/src/features/reqlog/components/LogDetail.tsx
@@ -1,18 +1,20 @@
 import Alert from "@mui/lab/Alert";
-import { Box, Grid, Paper, CircularProgress } from "@mui/material";
+import { Box, CircularProgress, Paper, Typography } from "@mui/material";
 
 import RequestDetail from "./RequestDetail";
-import ResponseDetail from "./ResponseDetail";
 
+import Response from "lib/components/Response";
+import SplitPane from "lib/components/SplitPane";
 import { useHttpRequestLogQuery } from "lib/graphql/generated";
 
 interface Props {
-  requestId: string;
+  id?: string;
 }
 
-function LogDetail({ requestId: id }: Props): JSX.Element {
+function LogDetail({ id }: Props): JSX.Element {
   const { loading, error, data } = useHttpRequestLogQuery({
-    variables: { id },
+    variables: { id: id as string },
+    skip: id === undefined,
   });
 
   if (loading) {
@@ -31,28 +33,24 @@ function LogDetail({ requestId: id }: Props): JSX.Element {
   }
 
   if (!data?.httpRequestLog) {
-    return <div></div>;
+    return (
+      <Paper variant="centered" sx={{ mt: 2 }}>
+        <Typography>Select a log entry…</Typography>
+      </Paper>
+    );
   }
 
-  const httpRequestLog = data.httpRequestLog;
+  const reqLog = data.httpRequestLog;
 
   return (
-    <div>
-      <Grid container item spacing={2}>
-        <Grid item xs={6}>
-          <Box component={Paper}>
-            <RequestDetail request={httpRequestLog} />
-          </Box>
-        </Grid>
-        <Grid item xs={6}>
-          {httpRequestLog.response && (
-            <Box component={Paper}>
-              <ResponseDetail response={httpRequestLog.response} />
-            </Box>
-          )}
-        </Grid>
-      </Grid>
-    </div>
+    <SplitPane split="vertical" size={"50%"}>
+      <RequestDetail request={reqLog} />
+      {reqLog.response && (
+        <Box sx={{ height: "100%", pt: 1, pl: 2, pb: 2 }}>
+          <Response response={reqLog.response} />
+        </Box>
+      )}
+    </SplitPane>
   );
 }
 

diff --git a/admin/src/features/reqlog/components/LogsOverview.tsx b/admin/src/features/reqlog/components/LogsOverview.tsx
diff --git a/admin/src/features/reqlog/components/RequestDetail.tsx b/admin/src/features/reqlog/components/RequestDetail.tsx
@@ -1,51 +1,46 @@
-import { Typography, Box, Divider } from "@mui/material";
+import { Typography, Box } from "@mui/material";
 import React from "react";
 
-import HttpHeadersTable from "./HttpHeadersTable";
-
-import Editor from "lib/components/Editor";
+import RequestTabs from "lib/components/RequestTabs";
 import { HttpRequestLogQuery } from "lib/graphql/generated";
+import { queryParamsFromURL } from "lib/queryParamsFromURL";
 
 interface Props {
   request: NonNullable<HttpRequestLogQuery["httpRequestLog"]>;
 }
 
 function RequestDetail({ request }: Props): JSX.Element {
-  const { method, url, proto, headers, body } = request;
+  const { method, url, headers, body } = request;
 
-  const contentType = headers.find((header) => header.key === "Content-Type")?.value;
   const parsedUrl = new URL(url);
 
   return (
-    <div>
-      <Box p={2}>
+    <Box sx={{ height: "100%", display: "flex", flexDirection: "column", pr: 2, pb: 2 }}>
+      <Box sx={{ p: 2, pb: 0 }}>
         <Typography variant="overline" color="textSecondary" style={{ float: "right" }}>
           Request
         </Typography>
         <Typography
+          variant="h6"
+          component="h2"
           sx={{
-            width: "calc(100% - 80px)",
             fontSize: "1rem",
-            wordBreak: "break-all",
-            whiteSpace: "pre-wrap",
+            fontFamily: "'JetBrains Mono', monospace",
+            display: "block",
+            overflow: "hidden",
+            whiteSpace: "nowrap",
+            textOverflow: "ellipsis",
+            pr: 2,
           }}
-          variant="h6"
         >
-          {method} {decodeURIComponent(parsedUrl.pathname + parsedUrl.search)}{" "}
-          <Typography component="span" color="textSecondary" style={{ fontFamily: "'JetBrains Mono', monospace" }}>
-            {proto}
-          </Typography>
+          {method} {decodeURIComponent(parsedUrl.pathname + parsedUrl.search)}
         </Typography>
       </Box>
 
-      <Divider />
-
-      <Box p={2}>
-        <HttpHeadersTable headers={headers} />
+      <Box flex="1 auto" overflow="scroll">
+        <RequestTabs headers={headers} queryParams={queryParamsFromURL(url)} body={body} />
       </Box>
-
-      {body && <Editor content={body} contentType={contentType} />}
-    </div>
+    </Box>
   );
 }