WIP admin

Signed-off-by: Stéphane Bégaudeau <[email protected]>

backend/svalyn-studio-application/src/main/java/com/svalyn/studio/application/controllers/viewer/Viewer.java

@@ -18,12 +18,17 @@
  */
 package com.svalyn.studio.application.controllers.viewer;
 
+import com.svalyn.studio.domain.account.AccountRole;
 import jakarta.validation.constraints.NotNull;
 
 /**
  * A viewer of the application.
  *
  * @author sbegaudeau
  */
-public record Viewer(@NotNull String name, @NotNull String username, @NotNull String imageUrl) {
+public record Viewer(
+        @NotNull String name,
+        @NotNull String username,
+        @NotNull String imageUrl,
+        @NotNull AccountRole role) {
 }

backend/svalyn-studio-application/src/main/java/com/svalyn/studio/application/services/account/AccountService.java

@@ -51,7 +51,8 @@ public AccountService(IAccountRepository accountRepository, IAvatarUrlService av
     @Override
     @Transactional(readOnly = true)
     public Optional<Viewer> findViewerById(UUID id) {
-        return this.accountRepository.findById(id).map(account -> new Viewer(account.getName(), account.getUsername(), this.avatarUrlService.imageUrl(account.getUsername())));
+        return this.accountRepository.findById(id)
+                .map(account -> new Viewer(account.getName(), account.getUsername(), this.avatarUrlService.imageUrl(account.getUsername()), account.getRole()));
     }
 
     @Override

backend/svalyn-studio-application/src/main/resources/graphql/svalyn-studio.graphqls

@@ -16,6 +16,7 @@ type Viewer {
   name: String!
   username: String!
   imageUrl: String!
+  role: Role!
   invitations(page: Int!, rowsPerPage: Int!): ViewerInvitationsConnection!
   profile(username: String!): Profile
   organizations: ViewerOrganizationsConnection!
@@ -32,6 +33,11 @@ type Viewer {
   search(query: String!): SearchResults!
 }
 
+enum Role {
+  USER
+  ADMIN
+}
+
 type ViewerInvitationsConnection {
   edges: [ViewerInvitationsEdge!]!
   pageInfo: PageInfo!

frontend/svalyn-studio-app/src/admin/AdminAccountsView.tsx

@@ -0,0 +1,22 @@
+/*
+ * Copyright (c) 2023 Stéphane Bégaudeau.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and
+ * associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT
+ * LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+ * IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+ * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+ * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+export const AdminAccountsView = () => {
+  return <div>Admin accounts view</div>;
+};

frontend/svalyn-studio-app/src/admin/AdminHomeView.tsx

@@ -0,0 +1,22 @@
+/*
+ * Copyright (c) 2023 Stéphane Bégaudeau.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and
+ * associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT
+ * LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+ * IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+ * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+ * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+export const AdminHomeView = () => {
+  return <div>Admin home view</div>;
+};

frontend/svalyn-studio-app/src/admin/AdminRouter.tsx

@@ -0,0 +1,37 @@
+/*
+ * Copyright (c) 2023 Stéphane Bégaudeau.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and
+ * associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT
+ * LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+ * IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+ * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+ * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { Route, Routes } from 'react-router-dom';
+import { AdminAccountsView } from './AdminAccountsView';
+import { AdminHomeView } from './AdminHomeView';
+import { AdminShell } from './AdminShell';
+import { ProtectedRoute } from './ProtectedRoute';
+
+export const AdminRouter = () => {
+  return (
+    <AdminShell>
+      <ProtectedRoute expectedRole="ADMIN">
+        <Routes>
+          <Route index element={<AdminHomeView />} />
+          <Route path="accounts" element={<AdminAccountsView />} />
+        </Routes>
+      </ProtectedRoute>
+    </AdminShell>
+  );
+};

frontend/svalyn-studio-app/src/admin/AdminShell.tsx

@@ -0,0 +1,30 @@
+/*
+ * Copyright (c) 2023 Stéphane Bégaudeau.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and
+ * associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT
+ * LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+ * IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+ * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+ * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { AdminShellProps } from './AdminShell.types';
+
+// Admin shell with an admin page showing a couple of features
+// Accounts -> see all accounts, for each account see their username, password, last login date, last logout date,
+// Accounts -> create a new account, delete an account -> delete everything they own + anonymize the account
+
+// Overflow organization homepage and dedicated page
+
+export const AdminShell = ({ children }: AdminShellProps) => {
+  return <div>{children}</div>;
+};

frontend/svalyn-studio-app/src/admin/AdminShell.types.ts

@@ -0,0 +1,22 @@
+/*
+ * Copyright (c) 2023 Stéphane Bégaudeau.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and
+ * associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT
+ * LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+ * IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+ * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+ * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+export interface AdminShellProps {
+  children: React.ReactNode;
+}

frontend/svalyn-studio-app/src/admin/ProtectedRoute.tsx

@@ -0,0 +1,58 @@
+/*
+ * Copyright (c) 2023 Stéphane Bégaudeau.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and
+ * associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT
+ * LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+ * IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+ * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+ * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { gql, useQuery } from '@apollo/client';
+import { useSnackbar } from 'notistack';
+import { useEffect } from 'react';
+import { NotFoundView } from '../notfound/NotFoundView';
+import { GetViewerData, GetViewerVariables, ProtectedRouteProps } from './ProtectedRoute.types';
+
+const getViewerQuery = gql`
+  query getViewer {
+    viewer {
+      name
+      username
+      imageUrl
+      role
+    }
+  }
+`;
+
+export const ProtectedRoute = ({ children, expectedRole }: ProtectedRouteProps) => {
+  const { enqueueSnackbar } = useSnackbar();
+
+  const { data, error } = useQuery<GetViewerData, GetViewerVariables>(getViewerQuery);
+  useEffect(() => {
+    if (error) {
+      enqueueSnackbar(error.message, { variant: 'error' });
+    }
+  }, [error]);
+
+  if (data) {
+    if (data.viewer) {
+      const isAllowed = data.viewer.role === 'ADMIN' || (data.viewer.role === 'USER' && expectedRole === 'USER');
+      if (isAllowed) {
+        return <div>{children}</div>;
+      } else {
+        return <NotFoundView />;
+      }
+    }
+  }
+  return null;
+};

frontend/svalyn-studio-app/src/admin/ProtectedRoute.types.ts

@@ -0,0 +1,35 @@
+/*
+ * Copyright (c) 2023 Stéphane Bégaudeau.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and
+ * associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT
+ * LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+ * IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+ * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+ * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+export interface ProtectedRouteProps {
+  children: React.ReactNode;
+  expectedRole: AccountRole;
+}
+
+export interface GetViewerData {
+  viewer: Viewer;
+}
+
+export interface Viewer {
+  role: AccountRole;
+}
+
+export type AccountRole = 'USER' | 'ADMIN';
+
+export interface GetViewerVariables {}

frontend/svalyn-studio-app/src/app/App.tsx

@@ -18,6 +18,7 @@
  */
 
 import { Route, Routes } from 'react-router-dom';
+import { AdminRouter } from '../admin/AdminRouter';
 import { ChangeProposalsRouter } from '../changeproposals/ChangeProposalsRouter';
 import { DomainsRouter } from '../domains/DomainsRouter';
 import { ErrorsRouter } from '../errors/ErrorsRouter';
@@ -53,6 +54,7 @@ export const App = () => {
         <Route path="/notifications/*" element={<NotificationsRouter />} />
         <Route path="/invitations/*" element={<InvitationsRouter />} />
         <Route path="/settings/*" element={<SettingsRouter />} />
+        <Route path="/admin/*" element={<AdminRouter />} />
         <Route path="/help/*" element={<HelpRouter />} />
         <Route path="/errors/*" element={<ErrorsRouter />} />
         <Route path="/login/*" element={<LoginRouter />} />

frontend/svalyn-studio-app/src/navbars/Navbar.tsx

@@ -43,31 +43,24 @@ const getViewerQuery = gql`
       name
       username
       imageUrl
+      role
       unreadNotificationsCount
     }
   }
 `;
 
 export const Navbar = ({ children }: NavbarProps) => {
   const [state, setState] = useState<NavbarState>({
-    viewer: null,
     anchorElement: null,
   });
 
   const { enqueueSnackbar } = useSnackbar();
-
-  const { loading, data, error } = useQuery<GetViewerData, GetViewerVariables>(getViewerQuery);
+  const { data, error } = useQuery<GetViewerData, GetViewerVariables>(getViewerQuery);
   useEffect(() => {
-    if (!loading) {
-      if (data) {
-        const { viewer } = data;
-        setState((prevState) => ({ ...prevState, viewer }));
-      }
-      if (error) {
-        enqueueSnackbar(error.message, { variant: 'error' });
-      }
+    if (error) {
+      enqueueSnackbar(error.message, { variant: 'error' });
     }
-  }, [loading, data, error]);
+  }, [error]);
 
   const { openPalette }: PaletteContextValue = useContext<PaletteContextValue>(PaletteContext);
 
@@ -86,7 +79,7 @@ export const Navbar = ({ children }: NavbarProps) => {
           <Svalyn />
         </IconButton>
         {children}
-        {state.viewer !== null ? (
+        {data?.viewer ? (
           <>
             <Box
               sx={{
@@ -115,16 +108,15 @@ export const Navbar = ({ children }: NavbarProps) => {
               </Link>
               <SearchButton onClick={handleOnSearchClick} />
               <IconButton component={RouterLink} to="/notifications" size="small" color="inherit">
-                <Badge badgeContent={state.viewer.unreadNotificationsCount} color="secondary">
+                <Badge badgeContent={data.viewer.unreadNotificationsCount} color="secondary">
                   <NotificationsNoneIcon />
                 </Badge>
               </IconButton>
               <IconButton onClick={handleOpenUserMenu} data-testid="user-menu-avatar">
-                <Avatar alt={state.viewer.name} src={state.viewer.imageUrl} sx={{ width: 24, height: 24 }} />
+                <Avatar alt={data.viewer.name} src={data.viewer.imageUrl} sx={{ width: 24, height: 24 }} />
               </IconButton>
               <UserMenu
-                name={state.viewer.name}
-                username={state.viewer.username}
+                viewer={data.viewer}
                 open={Boolean(state.anchorElement)}
                 anchorEl={state.anchorElement}
                 anchorOrigin={{ vertical: 'top', horizontal: 'right' }}

frontend/svalyn-studio-app/src/navbars/Navbar.types.ts

@@ -22,7 +22,6 @@ export interface NavbarProps {
 }
 
 export interface NavbarState {
-  viewer: Viewer | null;
   anchorElement: HTMLElement | null;
 }
 
@@ -34,7 +33,10 @@ export interface Viewer {
   name: string;
   username: string;
   imageUrl: string;
+  role: AccountRole;
   unreadNotificationsCount: number;
 }
 
+export type AccountRole = 'USER' | 'ADMIN';
+
 export interface GetViewerVariables {}