Merge pull request #12 from linagora/refactor-with-MUI

Refactored configuration and application dashboard with MUI and added feats for issues #11 and #3
linagora · May 8, 2024 · f3d1b46 · f3d1b46
2 parents 3de4511 + 4545fb4
commit f3d1b46
Show file tree

Hide file tree

Showing 42 changed files with 12,527 additions and 11,978 deletions.
diff --git a/package.json b/package.json
@@ -4,12 +4,17 @@
   "private": true,
   "proxy": "http://manager.example.com",
   "dependencies": {
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
+    "@mui/icons-material": "^5.15.16",
+    "@mui/material": "^5.15.16",
     "@redux-devtools/extension": "^3.3.0",
     "@reduxjs/toolkit": "^1.9.7",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^27.5.2",
+    "@types/material-ui": "^0.21.17",
     "@types/node": "^17.0.45",
     "@types/react": "^18.2.67",
     "@types/react-dom": "^18.2.22",

diff --git a/src/App.css b/src/App.css
@@ -10,3 +10,14 @@
     margin-top: 100px;
   }
 }
+
+.toggleButton {
+  position: relative;
+  display: inline-block;
+  width: 50px;
+  height: 28px;
+  background-color: #aaa;
+  border: 1px solid black;
+  border-radius: 90px;
+  cursor: pointer;
+}
diff --git a/src/components/NavBar.css b/src/components/NavBar.css
@@ -3,14 +3,11 @@
   position: fixed;
   top: 0;
   width: 100%;
-  background-color: #333;
   color: gray;
   display: flex;
-  justify-content: space-around;
   flex-wrap: wrap;
   overflow-wrap: break-word;
   z-index: 1100;
-  align-items: center;
 }
 .navbar :hover {
   color: white;

diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -2,9 +2,20 @@ import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import "./NavBar.css";
 import i18n from "../i18n";
-import Popup from "reactjs-popup";
 import { useAppDispatch } from "../app/hooks";
 import { push } from "redux-first-history";
+import {
+  AppBar,
+  Typography,
+  Toolbar,
+  Divider,
+  IconButton,
+  Menu,
+  MenuItem,
+  Button,
+  ButtonGroup,
+} from "@mui/material";
+import MenuIcon from "@mui/icons-material/Menu";
 
 function Navbar() {
   const { t } = useTranslation();
@@ -16,38 +27,98 @@ function Navbar() {
   };
 
   return (
-    <div className="navbar">
-      <p onClick={() => dispatch(push("/manager.html"))}>
-        {t("Configuration")}
-      </p>
-      <p> {t("sessions")} </p>
-      <p> {t("notifications")} </p>
-      <p> {t("secondFactors")} </p>
-      <Popup
-        open={menuOpen}
-        trigger={<p>{t("menu")}</p>}
-        onOpen={() => setMenuOpen(true)}
-        onClose={() => setMenuOpen(false)}
-        position={"bottom center"}
-      >
-        <div className="menu">
-          <p onClick={() => console.log("portal")}> {t("backtoportal")} </p>
-          <p onClick={() => console.log("logout")}> {t("logout")} </p>
-          <div className="language-options">
-            <span className="flag" onClick={() => handleLanguageChange("fr")}>
-              🇫🇷
-            </span>
-            <span className="flag" onClick={() => handleLanguageChange("en")}>
-              🇬🇧
-            </span>
-            <span className="flag" onClick={() => handleLanguageChange("es")}>
-              🇪🇸
-            </span>
-          </div>
-          <span> {t("version")} 0.0.1 </span>
-        </div>
-      </Popup>
-    </div>
+    <AppBar color="secondary" className="navbar">
+      <Toolbar>
+        <Typography sx={{ flexGrow: 1 }}>
+          <img
+            src={require("../static/llng-logo-32.png")}
+            alt="LemonLogo"
+            style={{ backgroundColor: "white" }}
+          />
+        </Typography>
+        <Divider />
+        <Typography
+          variant="h6"
+          component="div"
+          onClick={() => dispatch(push("/manager.html"))}
+          style={{ cursor: "pointer", marginRight: "15px" }}
+          sx={{ flexGrow: 1 }}
+        >
+          {t("Configuration")}
+        </Typography>
+        <Typography
+          variant="h6"
+          component="div"
+          style={{ cursor: "pointer", marginRight: "15px" }}
+          sx={{ flexGrow: 1 }}
+        >
+          {t("sessions")}
+        </Typography>
+        <Typography
+          variant="h6"
+          component="div"
+          style={{ cursor: "pointer", marginRight: "15px" }}
+          sx={{ flexGrow: 1 }}
+        >
+          {t("notifications")}
+        </Typography>
+        <Typography
+          variant="h6"
+          component="div"
+          style={{ cursor: "pointer", marginRight: "15px" }}
+          sx={{ flexGrow: 1 }}
+        >
+          {t("secondFactors")}
+        </Typography>
+        <IconButton
+          size="large"
+          edge="end"
+          aria-label="account of current user"
+          aria-controls="menu-appbar"
+          aria-haspopup="true"
+          onClick={() => setMenuOpen(true)}
+          color="inherit"
+          sx={{ flexGrow: 1 }}
+        >
+          <MenuIcon />
+        </IconButton>
+        <Menu
+          id="menu-appbar"
+          anchorOrigin={{
+            vertical: "top",
+            horizontal: "right",
+          }}
+          keepMounted
+          transformOrigin={{
+            vertical: "top",
+            horizontal: "right",
+          }}
+          open={menuOpen}
+          onClose={() => setMenuOpen(false)}
+        >
+          <MenuItem onClick={() => console.log("portal")}>
+            {t("backtoportal")}
+          </MenuItem>
+          <MenuItem onClick={() => console.log("logout")}>
+            {t("logout")}
+          </MenuItem>
+          <Divider />
+          <MenuItem>
+            <ButtonGroup
+              variant="text"
+              color="secondary"
+              aria-label="Basic button group"
+            >
+              <Button onClick={() => handleLanguageChange("fr")}>🇫🇷</Button>
+              <Button onClick={() => handleLanguageChange("en")}>🇬🇧</Button>
+              <Button onClick={() => handleLanguageChange("es")}>🇪🇸</Button>
+            </ButtonGroup>
+          </MenuItem>
+          <Divider />
+          <MenuItem>{t("version")} 0.0.1</MenuItem>
+        </Menu>
+      </Toolbar>
+    </AppBar>
   );
 }
 

diff --git a/src/components/SaveButton.css b/src/components/SaveButton.css
@@ -6,10 +6,10 @@
   cursor: pointer;
   border: 2px solid coral;
   border-radius: 50%;
-  /* Mittig */
   bottom: 2%;
   left: 2%;
 }
+
 .notif {
   position: fixed;
   left: 50%;
@@ -30,7 +30,6 @@
 .notif.red {
   background-color: rgb(255, 192, 192);
 }
-
 .notif.hidden {
   visibility: hidden;
 }
diff --git a/src/components/SaveButton.tsx b/src/components/SaveButton.tsx
@@ -4,7 +4,8 @@ import { useState } from "react";
 import { useAppDispatch, useAppSelector } from "../app/hooks";
 import { getConfigAsync, saveConfigCall } from "../features/config/configSlice";
 import { ruleOIDC, ruleSAML } from "../utils/rules";
-
+import { Fab } from "@mui/material";
+import SaveIcon from "@mui/icons-material/Save";
 export default function SaveButton() {
   const [openSavePopup, setOpenSavePopup] = useState(false);
   const [openSavingPopup, setOpenSavingPopup] = useState(false);
@@ -13,7 +14,9 @@ export default function SaveButton() {
   const data = useAppSelector((state) => state.config.data.config);
   return (
     <div>
-      <button
+      <Fab
+        style={{ position: "fixed", bottom: "2%", left: "2%" }}
+        color="primary"
         className="saveButton"
         onClick={() => {
           let stateOk = true;
@@ -46,8 +49,8 @@ export default function SaveButton() {
           }
         }}
       >
-        {t("save")}
-      </button>
+        <SaveIcon fontSize="large" />
+      </Fab>
       <div className={`notif orange ${openSavingPopup ? "visible" : "hidden"}`}>
         {t("Saving...")}
       </div>

diff --git a/src/components/ToggleButton.tsx b/src/components/ToggleButton.tsx
@@ -1,27 +1,36 @@
-import { Dispatch, SetStateAction } from "react";
-import "./ToggleButton.css";
-function ToggleButton({
-  toggled,
-  setToggled,
-  testid,
-}: {
-  toggled: boolean | number;
-  setToggled: Dispatch<SetStateAction<boolean>>;
-  testid: string;
-}) {
-  return (
-    <label className={`toggleButton ${toggled ? "toggled" : ""}`}>
-      <input
-        data-testid={testid}
-        type="checkbox"
-        onChange={() => {
-          setToggled(!toggled);
-        }}
-        checked={toggled ? true : false}
-      />
-      <span className="thumb"></span>
-    </label>
-  );
-}
+import { Switch, styled } from "@mui/material";
+
+const ToggleButton = styled(Switch)(({ theme }) => ({
+  padding: 8,
+  "& .MuiSwitch-track": {
+    borderRadius: 22 / 2,
+    "&::before, &::after": {
+      content: '""',
+      position: "absolute",
+      top: "50%",
+      transform: "translateY(-50%)",
+      width: 16,
+      height: 16,
+    },
+    "&::before": {
+      backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 24 24"><path fill="${encodeURIComponent(
+        theme.palette.getContrastText(theme.palette.primary.main)
+      )}" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"/></svg>')`,
+      left: 12,
+    },
+    "&::after": {
+      backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 24 24"><path fill="${encodeURIComponent(
+        theme.palette.getContrastText(theme.palette.primary.main)
+      )}" d="M19,13H5V11H19V13Z" /></svg>')`,
+      right: 12,
+    },
+  },
+  "& .MuiSwitch-thumb": {
+    boxShadow: "none",
+    width: 16,
+    height: 16,
+    margin: 2,
+  },
+}));
 
 export default ToggleButton;
diff --git a/src/components/applicationsComponents/AppPage.css b/src/components/applicationsComponents/AppPage.css
@@ -58,6 +58,7 @@ tr:nth-child(even) {
 }
 
 table {
+  margin-top: 2%;
   border: 1px solid #acacac;
   width: 100%;
   max-width: 100%;