Add conditional rendering to PageSpeed pages for non admin users

Client/src/App.jsx

@@ -19,13 +19,13 @@ import SetNewPassword from "./Pages/Auth/SetNewPassword";
 import NewPasswordConfirmed from "./Pages/Auth/NewPasswordConfirmed";
 import ProtectedRoute from "./Components/ProtectedRoute";
 import Details from "./Pages/Monitors/Details";
-import Maintenance from "./Pages/Maintenance";
+// import Maintenance from "./Pages/Maintenance";
 import withAdminCheck from "./HOC/withAdminCheck";
 import withAdminProp from "./HOC/withAdminProp";
 import Configure from "./Pages/Monitors/Configure";
 import PageSpeed from "./Pages/PageSpeed";
 import CreatePageSpeed from "./Pages/PageSpeed/CreatePageSpeed";
-import CreateNewMaintenanceWindow from "./Pages/Maintenance/CreateMaintenanceWindow";
+// import CreateNewMaintenanceWindow from "./Pages/Maintenance/CreateMaintenanceWindow";
 import PageSpeedDetails from "./Pages/PageSpeed/Details";
 import PageSpeedConfigure from "./Pages/PageSpeed/Configure";
 import { ThemeProvider } from "@emotion/react";
@@ -37,9 +37,10 @@ import { CssBaseline } from "@mui/material";
 function App() {
   const AdminCheckedRegister = withAdminCheck(Register);
   const MonitorsWithAdminProp = withAdminProp(Monitors);
-  const DetailsWithAdminProp = withAdminProp(Details);
+  const MonitorDetailsWithAdminProp = withAdminProp(Details);
   const PageSpeedWithAdminProp = withAdminProp(PageSpeed);
-  const MaintenanceWithAdminProp = withAdminProp(Maintenance);
+  const PageSpeedDetailsWithAdminProp = withAdminProp(PageSpeedDetails);
+  // const MaintenanceWithAdminProp = withAdminProp(Maintenance);
   const SettingsWithAdminProp = withAdminProp(Settings);
 
   const mode = useSelector((state) => state.ui.mode);
@@ -64,7 +65,7 @@ function App() {
           />
           <Route
             path="/monitors/:monitorId/"
-            element={<ProtectedRoute Component={DetailsWithAdminProp} />}
+            element={<ProtectedRoute Component={MonitorDetailsWithAdminProp} />}
           />
           <Route
             path="/monitors/configure/:monitorId/"
@@ -117,7 +118,9 @@ function App() {
           />
           <Route
             path="pagespeed/:monitorId"
-            element={<ProtectedRoute Component={PageSpeedDetails} />}
+            element={
+              <ProtectedRoute Component={PageSpeedDetailsWithAdminProp} />
+            }
           />
           <Route
             path="pagespeed/configure/:monitorId"

Client/src/Pages/PageSpeed/Configure/index.jsx

@@ -244,7 +244,7 @@ const PageSpeedConfigure = () => {
                       },
                     }}
                   >
-                    Editting...
+                    Editing...
                   </Typography>
                 </Stack>
               </Box>

Client/src/Pages/PageSpeed/Details/index.jsx

@@ -32,7 +32,7 @@ import PieChart from "./Charts/PieChart";
 import useUtils from "../../Monitors/utils";
 import "./index.css";
 
-const PageSpeedDetails = () => {
+const PageSpeedDetails = ({ isAdmin }) => {
   const theme = useTheme();
   const navigate = useNavigate();
   const { statusColor, pagespeedStatusMsg, determineState } = useUtils();
@@ -157,25 +157,27 @@ const PageSpeedDetails = () => {
                 </Typography>
               </Stack>
             </Box>
-            <Button
-              variant="contained"
-              color="secondary"
-              onClick={() => navigate(`/pagespeed/configure/${monitorId}`)}
-              sx={{
-                ml: "auto",
-                alignSelf: "flex-end",
-                px: theme.spacing(5),
-                "& svg": {
-                  mr: theme.spacing(3),
-                  "& path": {
-                    stroke: theme.palette.other.icon,
+            {isAdmin && (
+              <Button
+                variant="contained"
+                color="secondary"
+                onClick={() => navigate(`/pagespeed/configure/${monitorId}`)}
+                sx={{
+                  ml: "auto",
+                  alignSelf: "flex-end",
+                  px: theme.spacing(5),
+                  "& svg": {
+                    mr: theme.spacing(3),
+                    "& path": {
+                      stroke: theme.palette.other.icon,
+                    },
                   },
-                },
-              }}
-            >
-              <SettingsIcon />
-              Configure
-            </Button>
+                }}
+              >
+                <SettingsIcon />
+                Configure
+              </Button>
+            )}
           </Stack>
           <Stack direction="row" gap={theme.spacing(8)}>
             <StatBox>
@@ -393,6 +395,7 @@ const PageSpeedDetails = () => {
 };
 
 PageSpeedDetails.propTypes = {
+  isAdmin: PropTypes.bool,
   push: PropTypes.func,
 };
 

Client/src/Pages/PageSpeed/index.jsx

@@ -87,14 +87,16 @@ const PageSpeed = ({ isAdmin }) => {
               mt={theme.spacing(5)}
             >
               <Greeting type="pagespeed" />
-              <Button
-                variant="contained"
-                color="primary"
-                onClick={() => navigate("/pagespeed/create")}
-                sx={{ whiteSpace: "nowrap" }}
-              >
-                Create new
-              </Button>
+              {isAdmin && (
+                <Button
+                  variant="contained"
+                  color="primary"
+                  onClick={() => navigate("/pagespeed/create")}
+                  sx={{ whiteSpace: "nowrap" }}
+                >
+                  Create new
+                </Button>
+              )}
             </Stack>
           </Box>
           <Grid container spacing={theme.spacing(12)}>