fix: fix New Model page layout

* fix: fix New Model page layout * style: 🎨 use mui for admin page --------- Co-authored-by: Pauline Didier <[email protected]> Co-authored-by: Joakim Uddholm <[email protected]>
klarna-incubator · Oct 28, 2024 · b0f67fd · b0f67fd
1 parent 138e795
commit b0f67fd
Show file tree

Hide file tree

Showing 18 changed files with 532 additions and 563 deletions.
diff --git a/README.md b/README.md
@@ -5,7 +5,7 @@
 [![Discord][discord-image]][discord-url]
 [![Developed at Klarna][klarna-image]][klarna-url]
 
-Gram is Klarna's own [threat model][owasp-tm] diagramming tool developed internally by Klarna's Secure Development team. It is a webapp for engineers to collaboratively create threat models for their systems, providing a easy-to-understand way to document a system as a dataflow diagram with threats/controls attached.
+Gram is Klarna's own [threat model][owasp-tm] diagramming tool developed internally by Klarna's Secure Development team. It is a web app for engineers to collaboratively create threat models for their systems, providing a easy-to-understand way to document a system as a dataflow diagram with threats/controls attached.
 
 ![Screenshot](screenshot.png)
 

diff --git a/app/src/App.js b/app/src/App.js
@@ -95,8 +95,8 @@ export default function App() {
             sx={{
               display: "flex",
               flexDirection: "column",
-              height: "calc(100% - 64px)", // 64px is the height of Navbar
-              maxHeight: "calc(100% - 64px)",
+              height: isFramed ? "100%" : "calc(100% - 64px)", // 64px is the height of Navbar
+              maxHeight: isFramed ? "100%" : "calc(100% - 64px)", // 64px is the height of Navbar
               width: "100%",
             }}
           >

diff --git a/app/src/components/admin/AdminPage.css b/app/src/components/admin/AdminPage.css
diff --git a/app/src/components/admin/AdminPage.js b/app/src/components/admin/AdminPage.js
@@ -1,10 +1,18 @@
-import { Button } from "@mui/material";
+import {
+  Button,
+  Typography,
+  ButtonGroup,
+  List,
+  Link,
+  ListItemText,
+  ListItem,
+} from "@mui/material";
 import React from "react";
 import { useSetRolesMutation } from "../../api/gram/admin";
 import { useGetUserQuery } from "../../api/gram/user";
 import { useGetTemplatesQuery } from "../../api/gram/model";
-import "./AdminPage.css";
 import { CenteredPage } from "../elements/CenteredPage";
+import Grid from "@mui/material/Grid2";
 
 export default function AdminPage() {
   const { data: user } = useGetUserQuery();
@@ -14,52 +22,53 @@ export default function AdminPage() {
 
   return (
     <CenteredPage>
-      <h1 id="intro" className="with-bottom-padding">
-        Admin{" "}
-        {user?.roles.includes("admin")
-          ? ""
-          : "(You are not admin, some of the functions here won't work)"}
-      </h1>
+      <Grid container spacing={2} size={12}>
+        <Typography variant="h5">Admin</Typography>
+        <Typography variant="subtitle1">
+          {user?.roles.includes("admin")
+            ? ""
+            : "(You are not admin, some of the functions here won't work)"}
+        </Typography>
+        <Typography variant="body" sx={{ color: "#aaa" }}>
+          This page contains some admin widgets to help with day-to-day
+          operations of Gram. By design, these <b>shouldn't</b> be anything too
+          sensitive, just stuff to help debug / maintain the application.
+        </Typography>
+      </Grid>
+      <Grid container spacing={2} size={6}>
+        <Typography variant="h5">Change Role</Typography>
+        <Typography variant="body" sx={{ color: "#aaa" }}>
+          Useful if you need to debug authz. Use the below form to set your new
+          roles. Login again to get back your admin role.
+        </Typography>
 
-      <p className="dimmed">
-        This page contains some admin widgets to help with day-to-day operations
-        of Gram. By design, these <b>shouldn't</b> be anyhing too sensitive,
-        just stuff to help debug / maintain the application.
-      </p>
-
-      <div className="row">
-        <div className="column">
-          <h2>Change Role</h2>
-          <div className="spacer"></div>
-          <p className="dimmed">
-            Useful if you need to debug authz. Use the below form to set your
-            new roles. Login again to get back your admin role.
-          </p>
-          <div>
-            <Button onClick={() => setRoles({ roles: ["user"] })}>
-              Become User Role
-            </Button>
-            <Button onClick={() => setRoles({ roles: ["user", "reviewer"] })}>
-              Become Reviewer + User Role
-            </Button>
-          </div>
-        </div>
-        <div className="column">
-          <h2>Templates</h2>
-          <div className="spacer"></div>
-          <p className="dimmed">Models listed as templates.</p>
-          <div>
-            <ul>
-              {templates &&
-                templates.map((template) => (
-                  <li>
-                    <a href={`/model/${template.id}`}> {template.version}</a>
-                  </li>
-                ))}
-            </ul>
-          </div>
-        </div>
-      </div>
+        <ButtonGroup
+          variant="contained"
+          aria-label="contained primary button group"
+        >
+          <Button onClick={() => setRoles({ roles: ["user"] })}>
+            Become User Role
+          </Button>
+          <Button onClick={() => setRoles({ roles: ["user", "reviewer"] })}>
+            Become Reviewer + User Role
+          </Button>
+        </ButtonGroup>
+      </Grid>
+      <Grid>
+        <Typography variant="h5">Templates</Typography>
+        <Typography variant="body" sx={{ color: "#aaa" }}>
+          Models listed as templates.
+        </Typography>
+        <List>
+          {templates?.map((template) => (
+            <ListItem key={template.id}>
+              <Link href={`/model/${template.id}`}>
+                <ListItemText primary={template.version} />
+              </Link>
+            </ListItem>
+          ))}
+        </List>
+      </Grid>
     </CenteredPage>
   );
 }
diff --git a/app/src/components/elements/CenteredPage.js b/app/src/components/elements/CenteredPage.js
@@ -1,20 +1,18 @@
 import React from "react";
-import { useIsFramed } from "../../hooks/useIsFramed";
 import Grid from "@mui/material/Grid2";
 
-export function CenteredPage({ children }) {
-  const isFramed = useIsFramed();
+export function CenteredPage({ children, marginTop = true }) {
   return (
     <Grid
       container
-      spacing={0}
+      columns={12}
+      spacing={2}
       direction="row"
-      alignItems="center"
-      justifyContent="center"
+      marginTop={marginTop ? "20px" : ""}
+      marginX={"auto"}
+      maxWidth={"80%"}
     >
-      <Grid width={"80%"} marginTop={isFramed ? "" : "84px"}>
-        {children}
-      </Grid>
+      {children}
     </Grid>
   );
 }
diff --git a/app/src/components/home/Home.js b/app/src/components/home/Home.js
@@ -21,58 +21,52 @@ export default function Home() {
 
   return (
     <CenteredPage>
-      <Grid container spacing={2} columns={12}>
+      <Grid
+        size={6}
+        maxHeight="88vh"
+        sx={{ display: "flex", flexFlow: "column" }}
+      >
+        <Typography variant="h5">Recent Threat Models</Typography>
+        <Typography className="dimmed">
+          Threat models you recently interacted with
+        </Typography>
+        <ModelList models={recentModels} error={isError} pending={isLoading} />
+      </Grid>
+      {user?.teams?.length > 0 && (
         <Grid
           size={6}
+          columns={1}
           maxHeight="88vh"
           sx={{ display: "flex", flexFlow: "column" }}
         >
-          <Typography variant="h5">Recent Threat Models</Typography>
+          <Typography variant="h5">Team Systems</Typography>
           <Typography className="dimmed">
-            Threat models you recently interacted with
+            Systems owned by the accountable teams you're in
           </Typography>
-          <ModelList
-            models={recentModels}
-            error={isError}
-            pending={isLoading}
-          />
-        </Grid>
-        {user?.teams?.length > 0 && (
-          <Grid
+          <Box
             size={6}
-            columns={1}
-            maxHeight="88vh"
-            sx={{ display: "flex", flexFlow: "column" }}
+            sx={{
+              overflow: "auto",
+              marginTop: "25px",
+              display: "flex",
+              flexDirection: "column",
+            }}
           >
-            <Typography variant="h5">Team Systems</Typography>
-            <Typography className="dimmed">
-              Systems owned by the accountable teams you're in
-            </Typography>
-            <Box
-              size={6}
-              sx={{
-                overflow: "auto",
-                marginTop: "25px",
-                display: "flex",
-                flexDirection: "column",
-              }}
-            >
-              <Grid container spacing={2} columns={1} style={{ flex: "2" }}>
-                {user?.teams &&
-                  user.teams.map((team, i) => (
-                    <Grid size={1}>
-                      <TeamSystemsPageList
-                        key={team.id}
-                        teamId={team.id}
-                        pagesize={user?.teams.length > 1 ? 5 : 10}
-                      />
-                    </Grid>
-                  ))}
-              </Grid>
-            </Box>
-          </Grid>
-        )}
-      </Grid>
+            <Grid container spacing={2} columns={1} style={{ flex: "2" }}>
+              {user?.teams &&
+                user.teams.map((team, i) => (
+                  <Grid size={1}>
+                    <TeamSystemsPageList
+                      key={team.id}
+                      teamId={team.id}
+                      pagesize={user?.teams.length > 1 ? 5 : 10}
+                    />
+                  </Grid>
+                ))}
+            </Grid>
+          </Box>
+        </Grid>
+      )}
     </CenteredPage>
   );
 }