protect team creation route (#289)

src/App.tsx

@@ -1,4 +1,5 @@
 import ProtectedRoute from './components/ProtectedRoute'
+import ProtectedAuthorizedUserRoute from './components/ProtectedAuthorizedUserRoute'
 
 import CreateTeamForm from './pages/CreateTeamForm/CreateTeamForm.tsx'
 import TeamCreated from './pages/CreateTeamForm/TeamCreated.tsx'
@@ -20,8 +21,8 @@ const App = () => {
         <Route path='/teammedlemmer/:principalName' element={<UserProfile />} />
         <Route path='/:teamId' element={<TeamDetail />} />
         <Route path='/:teamId/:shortName' element={<SharedBucketDetail />} />
-        <Route path='/opprett-team' element={<CreateTeamForm />} />
-        <Route path='/opprett-team/kvittering' element={<TeamCreated />} />
+        <Route path='/opprett-team' element={<ProtectedAuthorizedUserRoute component={<CreateTeamForm />} />} />
+        <Route path='/opprett-team/kvittering' element={<ProtectedAuthorizedUserRoute component={<TeamCreated />} />} />
         <Route path='/not-found' element={<NotFound />} />
       </Route>
     </Routes>

src/components/ProtectedAuthorizedUserRoute.tsx

@@ -0,0 +1,29 @@
+import React, { useEffect, useState } from 'react'
+import NotFound from '../pages/NotFound/NotFound.tsx'
+import { User } from '../services/userProfile'
+import { isAuthorizedToCreateTeam } from '../services/createTeam'
+import { Effect } from 'effect'
+import { isDaplaAdmin } from '../utils/services'
+
+export interface Props {
+  component: React.ReactElement
+}
+
+const ProtectedAuthorizedUserRoute = ({ component }: Props) => {
+  const [isAuthorized, setIsAuthorized] = useState(false)
+  useEffect(() => {
+    const userProfileItem = localStorage.getItem('userProfile')
+    if (!userProfileItem) return
+
+    const user = JSON.parse(userProfileItem) as User
+    if (!user) return
+
+    Effect.promise(() => isDaplaAdmin(user.principal_name))
+      .pipe(Effect.runPromise)
+      .then((isDaplaAdmin: boolean) => setIsAuthorized(isAuthorizedToCreateTeam(isDaplaAdmin, user.job_title)))
+  }, [])
+
+  return isAuthorized ? component : <NotFound />
+}
+
+export default ProtectedAuthorizedUserRoute

src/pages/TeamOverview/TeamOverview.tsx

@@ -13,6 +13,7 @@ import { formatDisplayName } from '../../utils/utils'
 import { ApiError, fetchUserInformationFromAuthToken, isDaplaAdmin } from '../../utils/services'
 import FormattedTableColumn from '../../components/FormattedTableColumn/FormattedTableColumn'
 import { User } from '../../services/userProfile'
+import { isAuthorizedToCreateTeam } from '../../services/createTeam'
 import { Effect } from 'effect'
 
 const MY_TEAMS_TAB = {
@@ -27,7 +28,7 @@ const ALL_TEAMS_TAB = {
 
 const TeamOverview = () => {
   const [activeTab, setActiveTab] = useState<TabProps | string>(MY_TEAMS_TAB)
-  const [isSectionManager, setIsSectionManager] = useState<boolean>(false)
+  const [isAuthorized, setIsAuthorized] = useState(false)
   const [teamOverviewData, setTeamOverviewData] = useState<TeamOverviewData>()
   const [teamOverviewTableData, setTeamOverviewTableData] = useState<TableData['data']>()
   const [teamOverviewTableTitle, setTeamOverviewTableTitle] = useState<string>(MY_TEAMS_TAB.title)
@@ -79,9 +80,7 @@ const TeamOverview = () => {
 
     Effect.promise(() => isDaplaAdmin(user.principal_name))
       .pipe(Effect.runPromise)
-      .then((isDaplaAdmin: boolean) =>
-        setIsSectionManager(isDaplaAdmin || user.job_title.toLowerCase() === 'seksjonssjef')
-      )
+      .then((isDaplaAdmin: boolean) => setIsAuthorized(isAuthorizedToCreateTeam(isDaplaAdmin, user.job_title)))
   }, [])
 
   useEffect(() => {
@@ -159,9 +158,7 @@ const TeamOverview = () => {
       content={renderContent()}
       button={
         <>
-          {teamOverviewData && isSectionManager && (
-            <Button onClick={() => navigate('opprett-team')}>+ Opprett team</Button>
-          )}
+          {teamOverviewData && isAuthorized && <Button onClick={() => navigate('opprett-team')}>+ Opprett team</Button>}
         </>
       }
     />

src/services/createTeam.ts

@@ -34,6 +34,9 @@ const CreateTeamResponse = Schema.Struct({
 
 export type CreateTeamResponse = Schema.Schema.Type<typeof CreateTeamResponse>
 
+export const isAuthorizedToCreateTeam = (isDaplaAdmin: boolean, userJobTitle: string) =>
+  isDaplaAdmin || userJobTitle.toLowerCase() === 'seksjonssjef'
+
 export const createTeam = (
   createTeamRequest: CreateTeamRequest
 ): Effect.Effect<CreateTeamResponse, BodyError | HttpClientError | ParseResult.ParseError> =>