lock settings routes to admin only

src/App.tsx

@@ -9,6 +9,7 @@ import ConfirmDialog from "@src/components/ConfirmDialog";
 import RowyRunModal from "@src/components/RowyRunModal";
 import NotFound from "@src/pages/NotFoundPage";
 import RequireAuth from "@src/layouts/RequireAuth";
+import AdminRoute from "@src/layouts/AdminRoute";
 
 import {
   projectScope,
@@ -20,7 +21,6 @@ import { ROUTES } from "@src/constants/routes";
 import useKeyPressWithAtom from "@src/hooks/useKeyPressWithAtom";
 
 import TableGroupRedirectPage from "./pages/TableGroupRedirectPage";
-import JotaiTestPage from "@src/pages/Test/JotaiTestPage";
 import SignOutPage from "@src/pages/Auth/SignOutPage";
 
 // prettier-ignore
@@ -60,10 +60,6 @@ const MembersPage = lazy(() => import("@src/pages/Settings/MembersPage" /* webpa
 // prettier-ignore
 const DebugSettingsPage = lazy(() => import("@src/pages/Settings/DebugSettingsPage" /* webpackChunkName: "DebugSettingsPage" */));
 
-// prettier-ignore
-const ThemeTestPage = lazy(() => import("@src/pages/Test/ThemeTestPage" /* webpackChunkName: "ThemeTestPage" */));
-// const RowyRunTestPage = lazy(() => import("@src/pages/RowyRunTestPage" /* webpackChunkName: "RowyRunTestPage" */));
-
 export default function App() {
   const [currentUser] = useAtom(currentUserAtom, projectScope);
   const [userRoles] = useAtom(userRolesAtom, projectScope);
@@ -150,19 +146,22 @@ export default function App() {
             <Route path={ROUTES.userSettings} element={<UserSettingsPage />} />
             <Route
               path={ROUTES.projectSettings}
-              element={<ProjectSettingsPage />}
+              element={
+                <AdminRoute>
+                  <ProjectSettingsPage />
+                </AdminRoute>
+              }
             />
             <Route path={ROUTES.members} element={<MembersPage />} />
             <Route
               path={ROUTES.debugSettings}
-              element={<DebugSettingsPage />}
+              element={
+                <AdminRoute>
+                  <DebugSettingsPage />
+                </AdminRoute>
+              }
             />
-            {/* <Route path={ROUTES.rowyRunTest} element={<RowyRunTestPage />} /> */}
-
-            <Route path="/test/jotai" element={<JotaiTestPage />} />
           </Route>
-
-          <Route path={ROUTES.themeTest} element={<ThemeTestPage />} />
         </Routes>
       )}
     </Suspense>

src/components/AccessDenied.tsx

@@ -11,7 +11,7 @@ import {
   Link as MuiLink,
   Button,
 } from "@mui/material";
-import SecurityIcon from "@mui/icons-material/SecurityOutlined";
+import LockIcon from "@mui/icons-material/LockOutlined";
 
 import EmptyState from "@src/components/EmptyState";
 
@@ -33,7 +33,7 @@ export default function AccessDenied({ resetErrorBoundary }: FallbackProps) {
     <EmptyState
       role="alert"
       fullScreen
-      Icon={SecurityIcon}
+      Icon={LockIcon}
       message="Access denied"
       description={
         <>

src/components/CircularProgressTimed.tsx

@@ -7,6 +7,7 @@ import { Box } from "@mui/material";
 
 export interface ICircularProgressTimedProps
   extends ICircularProgressOpticalProps {
+  /** Duration in seconds */
   duration: number;
   complete: boolean;
 }

src/layouts/AdminRoute.tsx

@@ -0,0 +1,44 @@
+import { PropsWithChildren } from "react";
+import { useAtom } from "jotai";
+import { Link } from "react-router-dom";
+
+import { Typography, Button } from "@mui/material";
+import LockIcon from "@mui/icons-material/LockOutlined";
+import HomeIcon from "@mui/icons-material/HomeOutlined";
+
+import EmptyState from "@src/components/EmptyState";
+
+import { projectScope, userRolesAtom } from "@src/atoms/projectScope";
+import { ROUTES } from "@src/constants/routes";
+import { TOP_BAR_HEIGHT } from "@src/layouts/Navigation/TopBar";
+
+/**
+ * Lock pages for admins only
+ */
+export default function AdminRoute({ children }: PropsWithChildren<{}>) {
+  const [userRoles] = useAtom(userRolesAtom, projectScope);
+
+  if (!userRoles.includes("ADMIN"))
+    return (
+      <EmptyState
+        role="alert"
+        fullScreen
+        Icon={LockIcon}
+        message="Access denied"
+        description={
+          <>
+            <Typography>
+              You must be an admin of this workspace to access this page.
+            </Typography>
+
+            <Button component={Link} to={ROUTES.home} startIcon={<HomeIcon />}>
+              Home
+            </Button>
+          </>
+        }
+        style={{ marginTop: -TOP_BAR_HEIGHT, marginBottom: -TOP_BAR_HEIGHT }}
+      />
+    );
+
+  return children as JSX.Element;
+}