refactor: 🎨 improve bottom panel and review step

klarna-incubator · Oct 11, 2024 · 8df829d · 8df829d
1 parent d0b6f34
commit 8df829d
Show file tree

Hide file tree

Showing 12 changed files with 133 additions and 110 deletions.
diff --git a/app/src/api/gram/validation.js b/app/src/api/gram/validation.js
@@ -4,8 +4,7 @@ const validationApi = api.injectEndpoints({
   endpoints: (build) => ({
     validate: build.query({
       query: (modelId) => `/validate/${modelId}`,
-      transformResponse: (response, meta, arg) => {
-        console.log(response);
+      transformResponse: (response) => {
         return response;
       },
       providesTags: ["Validation"],

diff --git a/app/src/components/elements/modal/ModalManager.js b/app/src/components/elements/modal/ModalManager.js
@@ -13,11 +13,11 @@ import { CancelReview } from "../../reviews/modals/CancelReview";
 import { DeclineReview } from "../../reviews/modals/DeclineReview";
 import { ExportActionItem } from "../../model/modals/ExportActionItem";
 import { RevisitActionItems } from "../../model/modals/RevisitActionItems";
-import { ValidateBeforeReview } from "../../model/modals/ValidateBeforeReview";
+import { QualityCheck } from "../../model/modals/QualityCheck";
 
 export const MODALS = {
   ChangeReviewer,
-  ValidateBeforeReview,
+  QualityCheck,
   RequestReview,
   EditNote,
   RequestMeeting,

diff --git a/app/src/components/home/Home.js b/app/src/components/home/Home.js
@@ -49,20 +49,15 @@ export default function Home() {
               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}
-                size={6}
-                style={{ flex: "2" }}
-              >
+              <Grid container spacing={2} columns={1} style={{ flex: "2" }}>
                 {user?.teams &&
                   user.teams.map((team, i) => (
                     <Grid size={1}>

diff --git a/app/src/components/model/board/Board.js b/app/src/components/model/board/Board.js
@@ -638,22 +638,21 @@ export default function Board() {
       onKeyDown={(e) => onKeyDown(e)}
       onKeyUp={(e) => onKeyUp(e)}
     >
-      {!isFramed && (
-        <ControlsToolBar
-          stage={stage}
-          zoomInCenter={zoomInCenter}
-          onAddComponent={(name, type) => {
-            let pos = {
-              x: stage.width / 2,
-              y: stage.height / 2,
-            };
-            if (stageRef.current) {
-              pos = getAbsolutePosition(stageRef.current, pos);
-            }
-            addComponent({ name, type, x: pos.x, y: pos.y });
-          }}
-        />
-      )}
+      <ControlsToolBar
+        stage={stage}
+        zoomInCenter={zoomInCenter}
+        onAddComponent={(name, type) => {
+          let pos = {
+            x: stage.width / 2,
+            y: stage.height / 2,
+          };
+          if (stageRef.current) {
+            pos = getAbsolutePosition(stageRef.current, pos);
+          }
+          addComponent({ name, type, x: pos.x, y: pos.y });
+        }}
+      />
+
       {rightPanelCollapsed === true && <ToggleRightPanelButton />}
       {leftPanelCollapsed === true && <ToggleLeftPanelButton />}
 

diff --git a/app/src/components/model/board/components/ControlsToolBar.js b/app/src/components/model/board/components/ControlsToolBar.js
@@ -45,6 +45,7 @@ export function ControlsToolBar({ zoomInCenter, onAddComponent }) {
     >
       {!isFramed && (
         <ToggleButtonGroup
+          color="primary"
           value={cursorMode}
           exclusive
           onChange={(_, mode) => dispatch(changeCursorMode(mode))}
@@ -68,7 +69,10 @@ export function ControlsToolBar({ zoomInCenter, onAddComponent }) {
           </ToggleButton>
         </ToggleButtonGroup>
       )}
-      <ToggleButtonGroup>
+      <ToggleButtonGroup
+        color="primary"
+        value={bottomPanelCollapsed ? [] : ["validate-model"]}
+      >
         <ToggleButton value="zoom-in" onClick={() => zoomInCenter(-1)}>
           <ZoomInIcon />
         </ToggleButton>

diff --git a/...ents/model/modals/ValidateBeforeReview.js → ...c/components/model/modals/QualityCheck.js b/...ents/model/modals/ValidateBeforeReview.js → ...c/components/model/modals/QualityCheck.js
@@ -21,7 +21,19 @@ import { useValidateQuery } from "../../../api/gram/validation";
 import { modalActions } from "../../../redux/modalSlice";
 import { MODALS } from "../../elements/modal/ModalManager";
 
-export function ValidateBeforeReview() {
+function createQualityMessage(successRatio) {
+  if (successRatio === 1.0) {
+    return "Good job, your threat model is ready to be reviewed.";
+  } else if (successRatio >= 0.75) {
+    return "Your threat model is good and can be sent for review. You can make it even better by fixing the following failed checks:";
+  } else if (successRatio >= 0.5) {
+    return "Your threat model might not be understood by a reviewer external to your team/domain. You can make it better by fixing the following failed checks:";
+  } else {
+    return "Your threat model is lacking information necessary for the reviewer to understand and approve it. Please go back to the model and fix the following failed checks:";
+  }
+}
+
+export function QualityCheck() {
   const dispatch = useDispatch();
   const modelId = useModelID();
   const { data: validation } = useValidateQuery(modelId);
@@ -31,20 +43,9 @@ export function ValidateBeforeReview() {
   const failedResults = validationResults.filter(
     (result) => !result.testResult
   );
-  const successRatio = (
-    passedResults.length / validationResults.length
-  ).toFixed(2);
-  function createQualityMessage(successRatio) {
-    if (successRatio === 1) {
-      return "Good job, your threat model is ready to be reviewed. Please click on REQUEST REVIEW";
-    } else if (successRatio >= 0.75) {
-      return "Your threat model is very good, and can be improved by fixing the following failed checks:";
-    } else if (successRatio >= 0.5) {
-      return "Your threat model is good, and can be better understood by the review by fixing the following failed checks:";
-    } else {
-      return "Your threat model is lacking information necessary for the reviewer to understand and approve it. Please go back to the model and fix the following failed checks:";
-    }
-  }
+  const successRatio = Number(
+    (passedResults.length / validationResults.length).toFixed(2)
+  );
 
   return (
     <Dialog open={true} scroll="paper" fullWidth maxWidth="sm">
@@ -58,7 +59,7 @@ export function ValidateBeforeReview() {
         sx={{
           display: "flex",
           flexDirection: "column",
-          rowGap: 2,
+          rowGap: 4,
         }}
       >
         <Box sx={{ display: "flex" }}>
@@ -67,12 +68,12 @@ export function ValidateBeforeReview() {
           </Typography>
           <CircularProgressWithLabel value={successRatio * 100} />
         </Box>
-        {failedResults.length && (
+        {failedResults.length > 0 && (
           <>
             <List
               dense
               sx={{
-                maxHeight: 100,
+                maxHeight: 200,
                 overflow: "auto",
                 border: "",
               }}
@@ -152,13 +153,14 @@ function CircularProgressWithLabel({ value }) {
       sx={{
         position: "relative",
         display: "inline-flex",
+        flexDirection: "column",
         width: "50%",
       }}
     >
       <CircularProgress
         variant="determinate"
         value={value}
-        size="5rem"
+        size="8rem"
         sx={{ margin: "auto" }}
       />
       <Box
@@ -168,18 +170,26 @@ function CircularProgressWithLabel({ value }) {
           bottom: 0,
           right: 0,
           position: "absolute",
-          display: "flex",
+          display: "inline-flex",
+          flexDirection: "column",
           alignItems: "center",
           justifyContent: "center",
         }}
       >
         <Typography
           variant="caption"
-          component="div"
-          sx={{ color: "text.secondary" }}
+          component="p"
+          sx={{ color: "text.secondary", fontSize: "1.5rem" }}
         >
           {`${Math.round(value)}%`}
         </Typography>
+        <Typography
+          variant="caption"
+          component="p"
+          sx={{ color: "text.secondary" }}
+        >
+          passed
+        </Typography>
       </Box>
     </Box>
   );

diff --git a/app/src/components/model/panels/bottom/BottomPanel.js b/app/src/components/model/panels/bottom/BottomPanel.js
@@ -68,7 +68,7 @@ export function BottomPanel() {
     return <></>;
   }
   return (
-    <Box sx={{ gridArea: "bottom", backgroundColor: "rgb(40,40,40)" }}>
+    <Box sx={{ gridArea: "bottom", backgroundColor: "rgb(20,20,20)" }}>
       {!isLoading && (
         <>
           <BottomTabsHeader

diff --git a/app/src/components/model/panels/bottom/BottomTabsHeader.js b/app/src/components/model/panels/bottom/BottomTabsHeader.js
@@ -1,4 +1,4 @@
-import { AppBar, Grow, Tab, Tabs, Badge } from "@mui/material";
+import { Paper, Grow, Tab, Tabs, Badge, Typography, Box } from "@mui/material";
 import { useSelectedComponent } from "../../hooks/useSelectedComponent";
 
 export const TAB = {
@@ -39,71 +39,85 @@ export function BottomTabsHeader({
   const tabHck = !selected && tab === TAB.COMPONENT ? TAB.SYSTEM : tab;
 
   return (
-    <AppBar position="static">
-      <Grow in={true}>
-        <Tabs
-          value={tabHck}
-          onChange={(_, v) => setTab(v)}
-          textColor="inherit"
-          variant="fullWidth"
-          sx={{
-            "& .MuiTabs-indicator": {
-              backgroundColor: (theme) => theme.palette.common.gramPink,
-            },
-          }}
-        >
-          <Tab
-            disableRipple
-            label={
-              <div>
-                <Badge
-                  showZero
-                  badgeContent={allLength}
-                  color={getBadgeColor(allLength)}
-                  sx={tabBadgeStyle}
-                >
-                  ALL
-                </Badge>
-              </div>
-            }
-            value={TAB.ALL}
-          />
-          <Tab
-            disableRipple
-            label={
-              <div>
-                <Badge
-                  showZero
-                  badgeContent={modelLength}
-                  color={getBadgeColor(modelLength)}
-                  sx={tabBadgeStyle}
-                >
-                  MODEL
-                </Badge>
-              </div>
-            }
-            value={TAB.MODEL}
-          />
-          {selected && (
+    <Paper elevation={3} sx={{ display: "flex" }}>
+      <Box
+        sx={{
+          mx: 3,
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+        }}
+      >
+        <Typography variant="h6" sx={{ fontSize: "0.8rem" }}>
+          QUALITY CHECK
+        </Typography>
+      </Box>
+      <Box sx={{ flexGrow: 1 }}>
+        <Grow in={true}>
+          <Tabs
+            value={tabHck}
+            onChange={(_, v) => setTab(v)}
+            textColor="inherit"
+            variant="fullWidth"
+            sx={{
+              "& .MuiTabs-indicator": {
+                backgroundColor: (theme) => theme.palette.common.gramPink,
+              },
+            }}
+          >
             <Tab
               disableRipple
               label={
                 <div>
                   <Badge
                     showZero
-                    badgeContent={selectedLength}
-                    color={getBadgeColor(selectedLength)}
+                    badgeContent={allLength}
+                    color={getBadgeColor(allLength)}
                     sx={tabBadgeStyle}
                   >
-                    SELECTED COMPONENT
+                    ALL
                   </Badge>
                 </div>
               }
-              value={TAB.SELECTED_COMPONENT}
+              value={TAB.ALL}
             />
-          )}
-        </Tabs>
-      </Grow>
-    </AppBar>
+            <Tab
+              disableRipple
+              label={
+                <div>
+                  <Badge
+                    showZero
+                    badgeContent={modelLength}
+                    color={getBadgeColor(modelLength)}
+                    sx={tabBadgeStyle}
+                  >
+                    MODEL
+                  </Badge>
+                </div>
+              }
+              value={TAB.MODEL}
+            />
+            {selected && (
+              <Tab
+                disableRipple
+                label={
+                  <div>
+                    <Badge
+                      showZero
+                      badgeContent={selectedLength}
+                      color={getBadgeColor(selectedLength)}
+                      sx={tabBadgeStyle}
+                    >
+                      SELECTED COMPONENT
+                    </Badge>
+                  </div>
+                }
+                value={TAB.SELECTED_COMPONENT}
+              />
+            )}
+          </Tabs>
+        </Grow>
+      </Box>
+    </Paper>
   );
 }
diff --git a/app/src/components/model/panels/bottom/ValidationTab.js b/app/src/components/model/panels/bottom/ValidationTab.js
@@ -77,7 +77,9 @@ function renderResults(results, setSelected, deselectAll, setTab) {
 export function ValidationTab({ tab, setTab, filteredResults, isLoading }) {
   const setSelected = useSetSelected();
   const deselectAll = useDeselectAll();
+
   const selectedComponent = useSelectedComponent();
+  console.log({ selectedComponent });
 
   if (isLoading) {
     return (

diff --git a/app/src/components/model/panels/left/Review.js b/app/src/components/model/panels/left/Review.js
@@ -180,7 +180,7 @@ function RequestReviewButton({ permissions, modelId }) {
       onClick={() => {
         dispatch(
           modalActions.open({
-            type: MODALS.ValidateBeforeReview.name,
+            type: MODALS.QualityCheck.name,
             props: { modelId },
           })
         );