Repository: DashAISoftware/DashAI (language: python)

Issue:
Improve Frontend development infra
The goal of this branch was to improve the frontend development infrastructure. Three major changes were made:

- The package manager was changed to yarn, which is generally recognized as a better option (higher speed, stability and security than npm). This can have the unexpected advantage that the build generated on the front end is faster than when using npm.
- Modified eslint to be less restrictive.
- Set prettier as formatter, to standardize styles.

In addition, the development documentation was improved by providing more detailed guidelines, for both front and back end, on how to prepare the development environments, how to run and how to use the linting, testing and formatting tools.

Unfortunately, when implementing prettier, several styles of various js, jsx and jsx files had to be changed. However, there were no implementation changes.

Changes:

- Added frontend development documentation.
- improved backend development documentation.
- Change front package management to yarn.
- Improved gitignore for frontend.
- Added missing packages that allow the front end to run locally
- Added prettier as default frontend formatter for the project.
- Formatted all front end files according to prettier styles.
- Updated front build action to use yarn instead npm.


Discussion / hints:

Fix patch:
diff --git a/CHANGELOG.rst b/CHANGELOG.rst
index ce187272..51fa1294 100644
--- a/CHANGELOG.rst
+++ b/CHANGELOG.rst
@@ -11,7 +11,11 @@ Changelog
 - Added missing packages that allow the front end to run locally
 - Added prettier as default frontend formatter for the project.
 - Formatted all front end files according to prettier styles.
-
+- Changed navbar to a MUI responsive implementation.
+- Fix fronend router and links.
+- Add design colors to MUI theme provider.
+- Moved route handling to App.jsx
+- Change page container to MUI container component. 
 
 0.0.11
 ------
diff --git a/DashAI/front/.prettierrc b/DashAI/front/.prettierrc
new file mode 100644
index 00000000..222861c3
--- /dev/null
+++ b/DashAI/front/.prettierrc
@@ -0,0 +1,4 @@
+{
+  "tabWidth": 2,
+  "useTabs": false
+}
diff --git a/DashAI/front/.prettierrc.json b/DashAI/front/.prettierrc.json
deleted file mode 100644
index 0967ef42..00000000
--- a/DashAI/front/.prettierrc.json
+++ /dev/null
@@ -1,1 +0,0 @@
-{}
diff --git a/DashAI/front/.yarnrc.yml b/DashAI/front/.yarnrc.yml
index 00a2d6a9..07e7cc87 100644
--- a/DashAI/front/.yarnrc.yml
+++ b/DashAI/front/.yarnrc.yml
@@ -1,1 +1,3 @@
+nodeLinker: node-modules
+
 yarnPath: .yarn/releases/yarn-3.5.0.cjs
diff --git a/DashAI/front/package.json b/DashAI/front/package.json
index 843c65a2..3b15553c 100644
--- a/DashAI/front/package.json
+++ b/DashAI/front/package.json
@@ -6,6 +6,7 @@
   "dependencies": {
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
+    "@mui/icons-material": "^5.11.11",
     "@mui/material": "^5.11.15",
     "@mui/styled-engine-sc": "^5.11.11",
     "bootstrap": "^5.2.3",
@@ -60,7 +61,7 @@
     "eslint-plugin-promise": "^6.0.0",
     "eslint-plugin-react": "latest",
     "jest-watch-typeahead": "^0.6.5",
-    "prettier": "2.8.7",
+    "prettier": "^2.8.7",
     "typescript": "*"
   }
 }
diff --git a/DashAI/front/src/App.jsx b/DashAI/front/src/App.jsx
index e3c60b47..1ce2281d 100644
--- a/DashAI/front/src/App.jsx
+++ b/DashAI/front/src/App.jsx
@@ -1,17 +1,20 @@
 import React, { useEffect, useState } from "react";
-// import { Container } from 'react-bootstrap';
-// import { React, useState, useEffect } from 'react';
-// import logo from './logo.svg';
 import "./App.css";
-// import { useRoutes } from 'react-router-dom';
-// import Main from './layouts/Main';
-import MainRoutes from "./routes/MainRoutes";
-// import Results from './layouts/Results';
 import Error from "./components/Error";
-import Navbar from "./components/Navbar";
+import ResponsiveAppBar from "./components/ResponsiveAppBar";
+
+import Home from "./tabs/Home";
+import Data from "./tabs/Data";
+import Experiment from "./tabs/Experiment";
+import Results from "./tabs/Results";
+import Play from "./tabs/Play";
+import { BrowserRouter, Route, Routes } from "react-router-dom";
+import Container from "@mui/material/Container";
+import { Grid } from "@mui/material";
 
 function App() {
   const [apiIsOnline, setApiIsOnline] = useState(true);
+
   useEffect(() => {
     async function apiOnlineTest() {
       try {
@@ -23,27 +26,46 @@ function App() {
     }
     apiOnlineTest();
   }, []);
-  // const element = useRoutes([
-  //   { path: '/', element: <Home /> },
-  //   { path: '/tabs', element: <ExperimentPipeline /> },
-  // ]);
+
   return (
-    <div>
-      <Navbar />
+    <React.Fragment>
       {apiIsOnline ? (
-        <MainRoutes />
+        <BrowserRouter>
+          <ResponsiveAppBar />
+          <Container maxWidth="lg" sx={{ my: 5, mb: 4 }}>
+            <Grid
+              container
+              direction="row"
+              justifyContent="center"
+              alignItems="center"
+            >
+              <Routes>
+                <Route path="/" element={<Home />}></Route>
+                <Route path="/app" element={<Home />} />
+                <Route path="/app/data/" element={<Data />} />
+                <Route path="/app/experiments" element={<Experiment />} />
+                <Route path="/app/results" element={<Results />} />
+                <Route path="/app/play" element={<Play />} />
+              </Routes>
+            </Grid>
+          </Container>
+        </BrowserRouter>
       ) : (
-        <div
-          style={{
-            marginLeft: "30.3vw",
-            marginTop: "30vh",
-            textAlign: "center",
-          }}
-        >
-          <Error message="API is not online" />
-        </div>
+        <Container maxWidth="lg">
+          <Grid
+            container
+            direction="row"
+            justifyContent="center"
+            alignItems="center"
+            sx={{ mt: 6 }}
+          >
+            <Grid item>
+              <Error message="API is not online" />
+            </Grid>
+          </Grid>
+        </Container>
       )}
-    </div>
+    </React.Fragment>
   );
 }
 export default App;
diff --git a/DashAI/front/src/components/Navbar.jsx b/DashAI/front/src/components/Navbar.jsx
deleted file mode 100644
index 610c632f..00000000
--- a/DashAI/front/src/components/Navbar.jsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from "react";
-import { Container } from "react-bootstrap";
-import * as S from "../styles/components/NavbarStyles";
-
-function Navbar() {
-  return (
-    <S.Navbar>
-      <Container>
-        <S.Navbar.Brand href="/app" style={{ cursor: "pointer" }}>
-          <S.Logo alt="" src="/images/logo.png" />
-        </S.Navbar.Brand>
-        <S.Navbar.Collapse>
-          <S.Nav>
-            <S.Nav.Link href="/app/data">Data</S.Nav.Link>
-            <S.Nav.Link href="/app/experiment">Experiment</S.Nav.Link>
-            <S.Nav.Link href="/app/results">Results</S.Nav.Link>
-            <S.Nav.Link href="/app/play">Play</S.Nav.Link>
-          </S.Nav>
-        </S.Navbar.Collapse>
-      </Container>
-    </S.Navbar>
-  );
-}
-
-export default Navbar;
diff --git a/DashAI/front/src/components/ResponsiveAppBar.jsx b/DashAI/front/src/components/ResponsiveAppBar.jsx
new file mode 100644
index 00000000..3bce0bb8
--- /dev/null
+++ b/DashAI/front/src/components/ResponsiveAppBar.jsx
@@ -0,0 +1,124 @@
+import * as React from "react";
+import AppBar from "@mui/material/AppBar";
+import Box from "@mui/material/Box";
+import Toolbar from "@mui/material/Toolbar";
+import IconButton from "@mui/material/IconButton";
+import Typography from "@mui/material/Typography";
+import Menu from "@mui/material/Menu";
+import MenuIcon from "@mui/icons-material/Menu";
+import Container from "@mui/material/Container";
+import Avatar from "@mui/material/Avatar";
+import Button from "@mui/material/Button";
+import MenuItem from "@mui/material/MenuItem";
+import { Link as RouterLink, useLocation } from "react-router-dom";
+import { useTheme } from "@mui/material/styles";
+import HomeIcon from "@mui/icons-material/HomeOutlined";
+
+const pages = [
+  { name: "Data", to: "/app/data", disabled: false },
+  { name: "Experiments", to: "/app/experiments", disabled: false },
+  { name: "Results", to: "/app/results", disabled: false },
+  { name: "Play", to: "/app/play", disabled: true },
+];
+
+function ResponsiveAppBar() {
+  const theme = useTheme();
+  const location = useLocation();
+
+  const [anchorElNav, setAnchorElNav] = React.useState(null);
+
+  const handleOpenNavMenu = (event) => {
+    setAnchorElNav(event.currentTarget);
+  };
+
+  const handleCloseNavMenu = () => {
+    setAnchorElNav(null);
+  };
+
+  return (
+    <AppBar position="static" enableColorOnDark sx={{ background: "#212121" }}>
+      <Container maxWidth="xl">
+        <Toolbar>
+          <Avatar
+            alt="DashAI Logo"
+            src="/images/logo.png"
+            variant="square"
+            sx={{ width: 120, p: 0, mr: 3, my: 1, mt: 2 }}
+          />
+
+          {/* Render on xs screens */}
+          <Box sx={{ flexGrow: 1, display: { xs: "flex", sm: "none" } }}>
+            <IconButton
+              size="large"
+              onClick={handleOpenNavMenu}
+              color="inherit"
+            >
+              <MenuIcon />
+            </IconButton>
+            <Menu
+              id="menu-appbar"
+              anchorEl={anchorElNav}
+              anchorOrigin={{
+                vertical: "bottom",
+                horizontal: "left",
+              }}
+              autoFocus
+              keepMounted
+              transformOrigin={{
+                vertical: "top",
+                horizontal: "left",
+              }}
+              open={Boolean(anchorElNav)}
+              onClose={handleCloseNavMenu}
+              sx={{
+                display: { xs: "block", md: "none" },
+                backgroundColor: theme.palette.background,
+              }}
+            >
+              {pages.map((page) => (
+                <MenuItem
+                  key={page.name}
+                  onClick={handleCloseNavMenu}
+                  component={RouterLink}
+                  to={page.to}
+                  selected={page.to === location.pathname}
+                >
+                  <Typography textAlign="center">{page.name}</Typography>
+                </MenuItem>
+              ))}
+            </Menu>
+          </Box>
+
+          {/* Render on sm to xl screens */}
+          <Box sx={{ flexGrow: 1, display: { xs: "none", sm: "flex" } }}>
+            <IconButton
+              aria-label="delete"
+              component={RouterLink}
+              to="/app"
+              disableRipple
+              sx={{ mr: 2 }}
+            >
+              <HomeIcon />
+            </IconButton>
+            {pages.map((page) => (
+              <Button
+                component={RouterLink}
+                to={page.to}
+                key={page.name}
+                onClick={handleCloseNavMenu}
+                sx={{ my: 2, display: "block" }}
+                size="large"
+                disabled={page.disabled}
+                disableRipple
+                color={page.to === location.pathname ? "primary" : "inherit"}
+              >
+                {page.name}
+              </Button>
+            ))}
+          </Box>
+        </Toolbar>
+      </Container>
+    </AppBar>
+  );
+}
+export default ResponsiveAppBar;
diff --git a/DashAI/front/src/index.jsx b/DashAI/front/src/index.jsx
index 1dac2908..d14f2f00 100644
--- a/DashAI/front/src/index.jsx
+++ b/DashAI/front/src/index.jsx
@@ -1,7 +1,6 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import "./index.css";
-import { BrowserRouter as Router } from "react-router-dom";
 import { createTheme, ThemeProvider } from "@mui/material/styles";
 import CssBaseline from "@mui/material/CssBaseline";
 import App from "./App";
@@ -15,13 +14,11 @@ const root = ReactDOM.createRoot(document.getElementById("root"));
 const myTheme = createTheme({ ...theme, ...muiGlobalStyle });
 root.render(
   <React.StrictMode>
-    <Router>
-      <GlobalStyle />
-      <ThemeProvider theme={myTheme}>
-        <CssBaseline />
-        <App />
-      </ThemeProvider>
-    </Router>
+    <GlobalStyle />
+    <ThemeProvider theme={myTheme}>
+      <CssBaseline />
+      <App />
+    </ThemeProvider>
   </React.StrictMode>
 );
 
diff --git a/DashAI/front/src/layouts/Main.jsx b/DashAI/front/src/layouts/Main.jsx
index 536c64d0..e970c521 100644
--- a/DashAI/front/src/layouts/Main.jsx
+++ b/DashAI/front/src/layouts/Main.jsx
@@ -8,15 +8,6 @@ import Results from "../components/Results";
 import Play from "../components/Play";
 import { useActiveTab } from "../context/TabsProvider";
 
-const CustomContainer = styled.div`
-  height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
-  justify-content: center;
-`;
-
 function Main() {
   // code for dataset state
   const EMPTY = 0;
@@ -107,7 +98,7 @@ function Main() {
   };
 
   return (
-    <CustomContainer>
+    <React.Fragment>
       {activeTab === "home" && (
         <h1 style={{ color: "#fff" }}>This is the home page</h1>
       )}
@@ -168,7 +159,7 @@ function Main() {
         </div>
       )}
       {activeTab === "play" && <Play />}
-    </CustomContainer>
+    </React.Fragment>
   );
 }
 export default Main;
diff --git a/DashAI/front/src/routes/MainRoutes.jsx b/DashAI/front/src/routes/MainRoutes.jsx
deleted file mode 100644
index d140c68c..00000000
--- a/DashAI/front/src/routes/MainRoutes.jsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from "react";
-// import { Routes, Route } from 'react-router-dom';
-import { useRoutes } from "react-router-dom";
-// import Upload from '../components/Upload';
-// import { Data, Experiment, Results, Play } from '../tabs';
-import Home from "../tabs/Home";
-import Data from "../tabs/Data";
-import Experiment from "../tabs/Experiment";
-import Results from "../tabs/Results";
-import Play from "../tabs/Play";
-
-const routes = [
-  { path: "/app", element: <Home /> },
-  { path: "/app/data", element: <Data /> },
-  { path: "/app/experiment", element: <Experiment /> },
-  { path: "/app/results", element: <Results /> },
-  { path: "/app/play", element: <Play /> },
-];
-
-function MainRoutes() {
-  const routeResult = useRoutes(routes);
-  return routeResult;
-}
-
-export default MainRoutes;
diff --git a/DashAI/front/src/styles/globalComponents.js b/DashAI/front/src/styles/globalComponents.js
index 9370abea..bed138d2 100644
--- a/DashAI/front/src/styles/globalComponents.js
+++ b/DashAI/front/src/styles/globalComponents.js
@@ -107,12 +107,3 @@ export const ErrorMessageDiv = styled.div`
   margin-top: -0.9rem;
   font-size: 0.85rem;
 `;
-
-export const CustomContainer = styled.div`
-  height: 89vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
-  justify-content: center;
-`;
diff --git a/DashAI/front/src/styles/muiGlobalStyles.js b/DashAI/front/src/styles/muiGlobalStyles.js
index 7c3ade7f..c1266e14 100644
--- a/DashAI/front/src/styles/muiGlobalStyles.js
+++ b/DashAI/front/src/styles/muiGlobalStyles.js
@@ -2,6 +2,19 @@ import QuicksandBoldWoff2 from "./fonts/Quicksand-Bold.woff2";
 
 const muiGlobalStyle = {
   palette: {
+    mode: "dark",
+    primary: {
+      light: "#008582",
+      main: "#00BEBB",
+      dark: "#002884",
+      contrastText: "#fff",
+    },
+    secondary: {
+      light: "#6E86E8",
+      main: "#6E86E8",
+      dark: "#4d5da2",
+      contrastText: "#000",
+    },
     background: {
       default: "#2e3037",
     },
@@ -10,20 +23,7 @@ const muiGlobalStyle = {
     },
   },
   typography: {
-    fontFamily: [
-      "-apple-system",
-      "BlinkMacSystemFont",
-      "Quicksand-Bold",
-      '"Segoe UI"',
-      "Roboto",
-      "Oxygen",
-      "Ubuntu",
-      "Cantarell",
-      "Fira Sans",
-      "Droid Sans",
-      '"Helvetica Neue"',
-      "sans-serif",
-    ].join(","),
+    fontFamily: "Quicksand-Bold",
   },
   components: {
     MuiCssBaseline: {
diff --git a/DashAI/front/src/styles/theme.js b/DashAI/front/src/styles/theme.js
index 5a56bb48..40725b7d 100644
--- a/DashAI/front/src/styles/theme.js
+++ b/DashAI/front/src/styles/theme.js
@@ -1,4 +1,6 @@
 const theme = {
+
+
   rootBackground: "#2e3037",
   title: "#fff",
   subTitle: "#fff",
diff --git a/DashAI/front/src/tabs/Data.jsx b/DashAI/front/src/tabs/Data.jsx
index 36f03a48..45113a82 100644
--- a/DashAI/front/src/tabs/Data.jsx
+++ b/DashAI/front/src/tabs/Data.jsx
@@ -6,7 +6,6 @@ import { getDefaultValues } from "../utils/values";
 import ParameterForm from "../components/ParameterForm";
 import * as S from "../styles/components/DatasetConfigStyles";
 import {
-  CustomContainer,
   StyledButton,
   SubTitle,
   ErrorMessageDiv,
@@ -293,15 +292,13 @@ function Data() {
           showSplitsError={showSplitsError}
         />
       ) : null}
-      <CustomContainer>
-        <Upload
-          datasetState={datasetState}
-          setDatasetState={setDatasetState}
-          paramsData={JSON.stringify(submitForm)}
-          taskName={taskName}
-          // setTaskName={setTaskName}
-        />
-      </CustomContainer>
+      <Upload
+        datasetState={datasetState}
+        setDatasetState={setDatasetState}
+        paramsData={JSON.stringify(submitForm)}
+        taskName={taskName}
+        // setTaskName={setTaskName}
+      />
     </div>
   );
 }
diff --git a/DashAI/front/src/tabs/Experiment.jsx b/DashAI/front/src/tabs/Experiment.jsx
index 80e9f1ca..60327867 100644
--- a/DashAI/front/src/tabs/Experiment.jsx
+++ b/DashAI/front/src/tabs/Experiment.jsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
-import { CustomContainer, StyledButton } from "../styles/globalComponents";
+import { StyledButton } from "../styles/globalComponents";
 import AddModels from "../components/AddModels";
 import ParameterForm from "../components/ParameterForm";
 
@@ -83,7 +83,7 @@ function Experiment() {
     navigate("/results", { state: { run: true } });
   };
   return (
-    <CustomContainer>
+    <React.Fragment>
       <AddModels
         compatibleModels={compatibleModels}
         modelsInTable={modelsInTable}
@@ -106,7 +106,7 @@ function Experiment() {
           Run Experiment
         </StyledButton>
       )}
-    </CustomContainer>
+    </React.Fragment>
   );
 }
 
diff --git a/DashAI/front/src/tabs/Play.jsx b/DashAI/front/src/tabs/Play.jsx
index b5f2cef2..a9329bd6 100644
--- a/DashAI/front/src/tabs/Play.jsx
+++ b/DashAI/front/src/tabs/Play.jsx
@@ -1,13 +1,8 @@
 import React from "react";
-import { CustomContainer } from "../styles/globalComponents";
 import PlayCard from "../components/PlayCard";
 
 function Play() {
-  return (
-    <CustomContainer>
-      <PlayCard />
-    </CustomContainer>
-  );
+  return <PlayCard />;
 }
 
 export default Play;
diff --git a/DashAI/front/src/tabs/Results.jsx b/DashAI/front/src/tabs/Results.jsx
index 38966a20..b0dccbe6 100644
--- a/DashAI/front/src/tabs/Results.jsx
+++ b/DashAI/front/src/tabs/Results.jsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { useLocation } from "react-router-dom";
 import ResultsCard from "../components/ResultsCard";
-import { CustomContainer, P, Loading } from "../styles/globalComponents";
+import { P, Loading } from "../styles/globalComponents";
 
 function Results() {
   const { state } = useLocation();
@@ -45,17 +45,15 @@ function Results() {
   }, []);
   //
   return (
-    <CustomContainer>
-      <div>
-        {resultsState === READY && <ResultsCard />}
-        {resultsState === WAITING && (
-          <div>
-            <P>Loading results...</P>
-            <Loading alt="" src="/images/loading.png" width="58" height="58" />
-          </div>
-        )}
-      </div>
-    </CustomContainer>
+    <React.Fragment>
+      {resultsState === READY && <ResultsCard />}
+      {resultsState === WAITING && (
+        <div>
+          <P>Loading results...</P>
+          <Loading alt="" src="/images/loading.png" width="58" height="58" />
+        </div>
+      )}
+    </React.Fragment>
   );
 }
 
diff --git a/DashAI/front/yarn.lock b/DashAI/front/yarn.lock
index 72f436bb..37bfd281 100644
--- a/DashAI/front/yarn.lock
+++ b/DashAI/front/yarn.lock
@@ -2364,6 +2364,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@mui/icons-material@npm:^5.11.11":
+  version: 5.11.11
+  resolution: "@mui/icons-material@npm:5.11.11"
+  dependencies:
+    "@babel/runtime": ^7.21.0
+  peerDependencies:
+    "@mui/material": ^5.0.0
+    "@types/react": ^17.0.0 || ^18.0.0
+    react: ^17.0.0 || ^18.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 6ec89f3c68aaedd521f6a5106964394c410b08cec6875166d3ee97dcbaf2983c67d3b19cd58113d767d9f934cc0e9439fb5856e45471f5094656c0f87bbefecd
+  languageName: node
+  linkType: hard
+
 "@mui/material@npm:^5.11.15":
   version: 5.11.15
   resolution: "@mui/material@npm:5.11.15"
@@ -5527,6 +5543,7 @@ __metadata:
     "@craco/craco": ^7.1.0
     "@emotion/react": ^11.10.6
     "@emotion/styled": ^11.10.6
+    "@mui/icons-material": ^5.11.11
     "@mui/material": ^5.11.15
     "@mui/styled-engine-sc": ^5.11.11
     "@testing-library/jest-dom": ^5.16.4
@@ -5543,7 +5560,7 @@ __metadata:
     eslint-plugin-react: latest
     formik: ^2.2.9
     jest-watch-typeahead: ^0.6.5
-    prettier: 2.8.7
+    prettier: ^2.8.7
     prop-types: ^15.8.1
     react: ^18.2.0
     react-bootstrap: ^2.7.2
@@ -6282,7 +6299,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint-config-standard-with-typescript@npm:latest":
+eslint-config-standard-with-typescript@latest:
   version: 34.0.1
   resolution: "eslint-config-standard-with-typescript@npm:34.0.1"
   dependencies:
@@ -6464,7 +6481,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint-plugin-react@npm:^7.27.1, eslint-plugin-react@npm:latest":
+"eslint-plugin-react@latest, eslint-plugin-react@npm:^7.27.1":
   version: 7.32.2
   resolution: "eslint-plugin-react@npm:7.32.2"
   dependencies:
@@ -9711,14 +9728,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ms@npm:2.1.2":
+"ms@npm:2.1.2, ms@npm:^2.1.1":
   version: 2.1.2
   resolution: "ms@npm:2.1.2"
   checksum: 673cdb2c3133eb050c745908d8ce632ed2c02d85640e2edb3ace856a2266a813b30c613569bf3354fdf4ea7d1a1494add3bfa95e2713baa27d0c2c71fc44f58f
   languageName: node
   linkType: hard
 
-"ms@npm:2.1.3, ms@npm:^2.0.0, ms@npm:^2.1.1":
+"ms@npm:2.1.3, ms@npm:^2.0.0":
   version: 2.1.3
   resolution: "ms@npm:2.1.3"
   checksum: aa92de608021b242401676e35cfa5aa42dd70cbdc082b916da7fb925c542173e36bce97ea3e804923fe92c0ad991434e4a38327e15a1b5b5f945d66df615ae6d
@@ -11196,7 +11213,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prettier@npm:2.8.7":
+"prettier@npm:^2.8.7":
   version: 2.8.7
   resolution: "prettier@npm:2.8.7"
   bin:
@@ -13341,22 +13358,22 @@ __metadata:
   linkType: hard
 
 "typescript@npm:*":
-  version: 5.0.3
-  resolution: "typescript@npm:5.0.3"
+  version: 4.9.5
+  resolution: "typescript@npm:4.9.5"
   bin:
     tsc: bin/tsc
     tsserver: bin/tsserver
-  checksum: 3cce0576d218cb4277ff8b6adfef1a706e9114a98b4261a38ad658a7642f1b274a8396394f6cbff8c0ba852996d7ed2e233e9b8431d5d55ac7c2f6fea645af02
+  checksum: ee000bc26848147ad423b581bd250075662a354d84f0e06eb76d3b892328d8d4440b7487b5a83e851b12b255f55d71835b008a66cbf8f255a11e4400159237db
   languageName: node
   linkType: hard
 
 "typescript@patch:typescript@*#~builtin<compat/typescript>":
-  version: 5.0.3
-  resolution: "typescript@patch:typescript@npm%3A5.0.3#~builtin<compat/typescript>::version=5.0.3&hash=85af82"
+  version: 4.9.5
+  resolution: "typescript@patch:typescript@npm%3A4.9.5#~builtin<compat/typescript>::version=4.9.5&hash=23ec76"
   bin:
     tsc: bin/tsc
     tsserver: bin/tsserver
-  checksum: 5580367025ff7ee1f2a61e5affdbddccfe6e893bc662aa33fefdbf12de7e493173fa7d47475e9e15121828691004c4ed13bcd115e57866baed97b54c60954e1c
+  checksum: ab417a2f398380c90a6cf5a5f74badd17866adf57f1165617d6a551f059c3ba0a3e4da0d147b3ac5681db9ac76a303c5876394b13b3de75fdd5b1eaa06181c9d
   languageName: node
   linkType: hard
 


Test patch:
diff --git a/.github/workflows/build-test.yaml b/.github/workflows/build-test.yaml
index ae7380bb..fba6279f 100644
--- a/.github/workflows/build-test.yaml
+++ b/.github/workflows/build-test.yaml
@@ -24,7 +24,7 @@ jobs:
           name: react-build
           path: DashAI/front/build
           retention-days: 1
-      - run: yarn test
+      - run: yarn test --passWithNoTests
 
   pytest:
     needs: react-build-test
diff --git a/DashAI/front/src/App.test.jsx b/DashAI/front/src/App.test.jsx
deleted file mode 100644
index 4004a67e..00000000
--- a/DashAI/front/src/App.test.jsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from "react";
-// import { render, screen } from '@testing-library/react';
-import { render } from "@testing-library/react";
-import { BrowserRouter as Router } from "react-router-dom";
-import { createTheme, ThemeProvider } from "@mui/material/styles";
-import CssBaseline from "@mui/material/CssBaseline";
-import "@testing-library/jest-dom";
-import App from "./App";
-import theme from "./styles/theme";
-import muiGlobalStyle from "./styles/muiGlobalStyles";
-
-const myTheme = createTheme({ ...theme, ...muiGlobalStyle });
-
-test("loads and displays model", async () => {
-  render(
-    <Router>
-      <ThemeProvider theme={myTheme}>
-        <CssBaseline />
-        <App />
-      </ThemeProvider>
-    </Router>
-  );
-  // expect(screen.getByText('Learn React')).toBeInTheDocument();
-});