fix: clean up Team system lists on Home and Team page.

upgrade MUI to latest version
klarna-incubator · Oct 18, 2023 · 6ac2e32 · 6ac2e32
1 parent 83d709d
commit 6ac2e32
Show file tree

Hide file tree

Showing 8 changed files with 198 additions and 166 deletions.
diff --git a/app/package.json b/app/package.json
@@ -7,11 +7,11 @@
     "node": "18"
   },
   "dependencies": {
-    "@emotion/react": "^11.4.1",
-    "@emotion/styled": "^11.6.0",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
     "@fortawesome/fontawesome-svg-core": "^1.3.0",
-    "@mui/icons-material": "^5.4.1",
-    "@mui/material": "^5.4.1",
+    "@mui/icons-material": "^5.14.14",
+    "@mui/material": "^5.14.14",
     "@reduxjs/toolkit": "^1.7.2",
     "@sentry/react": "^7.6.0",
     "@sentry/tracing": "^7.6.0",

diff --git a/app/src/components/elements/list/ModelList.js b/app/src/components/elements/list/ModelList.js
@@ -17,17 +17,15 @@ export function ModelList({
   models = [],
   error,
   isLoading,
-  listHeight = "500px",
-  width = "45%",
   errorMessage = "Error loading data",
   emptyMessage = "No models exist",
 }) {
   return (
-    <Card sx={{ width, marginTop: "25px" }}>
+    <Card sx={{ height: "100%", marginTop: "25px" }}>
       <CardContent>
         {isLoading && <Loading />}
         {error && <ErrorLine message={errorMessage} />}
-        <List sx={{ height: listHeight, overflow: "auto" }}>
+        <List sx={{ overflow: "auto" }}>
           {(!models || models.length === 0) && (
             <ListItemText primary={emptyMessage} />
           )}

diff --git a/app/src/components/home/Home.css b/app/src/components/home/Home.css
diff --git a/app/src/components/home/Home.js b/app/src/components/home/Home.js
@@ -1,9 +1,10 @@
+import { Box, Stack, Typography } from "@mui/material";
+import Grid from "@mui/material/Unstable_Grid2/Grid2";
 import React from "react";
 import { useGetUserQuery } from "../../api/gram/auth";
 import { useListModelsQuery } from "../../api/gram/model";
 import { ModelList } from "../elements/list/ModelList";
 import { TeamSystemsPageList } from "../systems/TeamSystems/TeamSystemsPageList";
-import "./Home.css";
 
 export default function Home() {
   const { data: user } = useGetUserQuery();
@@ -19,47 +20,40 @@ export default function Home() {
 
   return (
     <div className="container">
-      <h1 id="intro" className="with-bottom-padding">
-        <span className="dimmed">Welcome back,</span>
-        &nbsp;
-        {user?.name}
-      </h1>
-
-      <div className="row">
-        <div className="column">
-          <h2>Recent Models</h2>
-          <div className="spacer"></div>
-          <p className="dimmed">Threat models you recently interacted with</p>
+      <Grid container spacing={2} alignItems="stretch">
+        <Grid item xs={6} sx={{ display: "flex", flexDirection: "column" }}>
+          <Typography variant="h5">Recent Threat Models</Typography>
+          <Typography className="dimmed">
+            Threat models you recently interacted with
+          </Typography>
           <ModelList
             models={recentModels}
-            width="100%"
-            listHeight="940px"
             error={isError}
             pending={isLoading}
           />
-        </div>
+        </Grid>
         {user?.teams?.length > 0 && (
-          <div className="column">
-            <h2>Team Systems</h2>
-            <div className="spacer"></div>
-            <p className="dimmed">
+          <Grid item xs={6} sx={{ display: "flex", flexDirection: "column" }}>
+            <Typography variant="h5">Team Systems</Typography>
+            <Typography className="dimmed">
               Systems owned by the accountable teams you're in
-            </p>
-            <div className="teams">
-              {user?.teams &&
-                user.teams.map((team) => (
-                  <TeamSystemsPageList
-                    key={team.id}
-                    teamId={team.id}
-                    teamName={team.name}
-                    width={"100%"}
-                    listHeight={user.teams.length > 1 ? "350px" : "852px"}
-                  />
-                ))}
-            </div>
-          </div>
+            </Typography>
+            <Box maxHeight="80vh" sx={{ overflow: "auto", marginTop: "25px" }}>
+              <Stack spacing={2}>
+                {user?.teams &&
+                  user.teams.map((team, i) => (
+                    <TeamSystemsPageList
+                      key={team.id}
+                      teamId={team.id}
+                      listHeight={user.teams.length > 1 ? "350px" : "852px"}
+                      // marginBottom={i !== user.teams.length - 1 ? "15px" : ""}
+                    />
+                  ))}
+              </Stack>
+            </Box>
+          </Grid>
         )}
-      </div>
+      </Grid>
     </div>
   );
 }
diff --git a/app/src/components/systems/TeamSystems/TeamHeader.js b/app/src/components/systems/TeamSystems/TeamHeader.js
@@ -0,0 +1,13 @@
+import { Typography } from "@mui/material";
+import { useGetTeamQuery } from "../../../api/gram/team";
+
+export function TeamHeader({ teamId }) {
+  const { data: team } = useGetTeamQuery({ teamId });
+
+  return (
+    <>
+      <Typography variant={"h5"}>{team?.name} Systems</Typography>
+      <Typography className="dimmed">{team?.description}</Typography>
+    </>
+  );
+}
diff --git a/app/src/components/systems/TeamSystems/TeamSystemPage.js b/app/src/components/systems/TeamSystems/TeamSystemPage.js
@@ -1,10 +1,10 @@
-import { Box, Typography } from "@mui/material";
+import { Grid, Typography } from "@mui/material";
 import React from "react";
 import { useParams } from "react-router-dom";
 import { useGetUserQuery } from "../../../api/gram/auth";
 import { useTitle } from "../../../hooks/useTitle";
-import "../Systems.css";
 import { TeamSystemsPageList } from "./TeamSystemsPageList";
+import { TeamHeader } from "./TeamHeader";
 
 export function TeamSystemsPage() {
   const { teamId } = useParams("/team/:teamId");
@@ -20,23 +20,31 @@ export function TeamSystemsPage() {
   useTitle("Team");
 
   return (
-    <Box id="systems" className="container">
-      {!teamId && <Typography variant={"h4"}>Your Team Systems</Typography>}
+    <div className="container">
+      {!teamId ? (
+        <>
+          <Typography variant={"h5"}>Your Team Systems</Typography>
+          <Typography className="dimmed">
+            Systems belonging to your team(s)
+          </Typography>
+        </>
+      ) : (
+        <TeamHeader teamId={teamId} />
+      )}
 
-      <div
-        style={{
-          display: "flex",
-          flexDirection: "row",
-          width: "100%",
-          flexWrap: "wrap",
-          justifyContent: "space-between",
-        }}
+      <Grid
+        container
+        spacing={2}
+        alignItems="stretch"
+        sx={{ marginTop: "9px" }}
       >
         {/* Some employees have more than one team */}
         {teams.map((tid) => (
-          <TeamSystemsPageList key={tid} teamId={tid} />
+          <Grid item xs={4} sx={{ display: "flex", flexDirection: "column" }}>
+            <TeamSystemsPageList key={tid} teamId={tid} />
+          </Grid>
         ))}
-      </div>
-    </Box>
+      </Grid>
+    </div>
   );
 }
diff --git a/app/src/components/systems/TeamSystems/TeamSystemsPageList.js b/app/src/components/systems/TeamSystems/TeamSystemsPageList.js
@@ -16,27 +16,23 @@ import Loading from "../../loading";
 import "../Systems.css";
 import { useGetTeamQuery } from "../../../api/gram/team";
 
-export function TeamSystemsPageList({
-  teamName,
-  teamId,
-  pagesize = 10,
-  listHeight = "500px",
-  width = "45%",
-}) {
+export function TeamSystemsPageList({ teamId, pagesize = 10 }) {
   const [page, setPage] = useState(0);
 
   const opts = { filter: "team", teamId, pagesize, page };
   const { data, isLoading, isFetching } = useListSystemsQuery(opts);
   const { data: team } = useGetTeamQuery({ teamId });
+  const pageCount =
+    data?.total && data?.pageSize ? Math.ceil(data?.total / data?.pageSize) : 0;
 
   return (
-    <Card sx={{ width, marginTop: "25px" }}>
+    <Card sx={{ height: "100%" }}>
       <CardContent>
         <Typography variant="h5">
           <Link to={`/team/${teamId}`}>{team?.name}</Link>
         </Typography>
 
-        <List sx={{ height: listHeight, overflow: "auto" }}>
+        <List sx={{ height: "500px", overflow: "auto" }}>
           {isLoading || isFetching ? (
             <Loading />
           ) : data.systems ? (
@@ -56,9 +52,9 @@ export function TeamSystemsPageList({
         </List>
       </CardContent>
       <CardActions>
-        {!isLoading && (
+        {!isLoading && pageCount > 1 && (
           <Pagination
-            count={Math.ceil(data.total / data.pageSize)}
+            count={pageCount}
             page={
               page + 1
             } /* hack here to translate between APIs zero-pagination vs MUIs one-pagination */