Merge pull request #1594 from gchq/BAI-1372-implement-permissions-con…

…text

Bai 1372 implement permissions context

frontend/actions/accessRequest.ts

@@ -1,5 +1,5 @@
 import useSWR from 'swr'
-import { AccessRequestInterface } from 'types/types'
+import { AccessRequestInterface, AccessRequestUserPermissions } from 'types/types'
 import { ErrorInfo, fetcher } from 'utils/fetcher'
 
 const emptyAccessRequestList = []
@@ -30,12 +30,31 @@ export function useGetAccessRequest(modelId: string | undefined, accessRequestId
 
   return {
     mutateAccessRequest: mutate,
-    accessRequest: data ? data.accessRequest : undefined,
+    accessRequest: data?.accessRequest,
     isAccessRequestLoading: isLoading,
     isAccessRequestError: error,
   }
 }
 
+export function useGetCurrentUserPermissionsForAccessRequest(entryId?: string, accessRequestId?: string) {
+  const { data, isLoading, error, mutate } = useSWR<
+    {
+      permissions: AccessRequestUserPermissions
+    },
+    ErrorInfo
+  >(
+    entryId && accessRequestId ? `/api/v2/model/${entryId}/access-request/${accessRequestId}/permissions/mine` : null,
+    fetcher,
+  )
+
+  return {
+    mutateAccessRequestUserPermissions: mutate,
+    accessRequestUserPermissions: data?.permissions,
+    isAccessRequestUserPermissionsLoading: isLoading,
+    isAccessRequestUserPermissionsError: error,
+  }
+}
+
 export function postAccessRequest(modelId: string, schemaId: string, form: Record<string, unknown>) {
   return fetch(`/api/v2/model/${modelId}/access-requests`, {
     method: 'post',

frontend/actions/model.ts

@@ -1,7 +1,7 @@
 import qs from 'querystring'
 import useSWR from 'swr'
 
-import { EntryForm, EntryInterface, EntryKindKeys, ModelImage, Role } from '../types/types'
+import { EntryForm, EntryInterface, EntryKindKeys, EntryUserPermissions, ModelImage, Role } from '../types/types'
 import { ErrorInfo, fetcher } from '../utils/fetcher'
 
 const emptyModelList = []
@@ -65,7 +65,7 @@ export function useGetModel(id: string | undefined, kind: EntryKindKeys) {
 
   return {
     mutateModel: mutate,
-    model: data ? data.model : undefined,
+    model: data?.model,
     isModelLoading: isLoading,
     isModelError: error,
   }
@@ -125,6 +125,22 @@ export function useGetModelRolesCurrentUser(id?: string) {
   }
 }
 
+export function useGetCurrentUserPermissionsForEntry(entryId?: string) {
+  const { data, isLoading, error, mutate } = useSWR<
+    {
+      permissions: EntryUserPermissions
+    },
+    ErrorInfo
+  >(entryId ? `/api/v2/model/${entryId}/permissions/mine` : null, fetcher)
+
+  return {
+    mutateEntryUserPermissions: mutate,
+    entryUserPermissions: data?.permissions,
+    isEntryUserPermissionsLoading: isLoading,
+    isEntryUserPermissionsError: error,
+  }
+}
+
 export async function postModel(form: EntryForm) {
   return fetch(`/api/v2/models`, {
     method: 'post',

frontend/pages/_app.tsx

@@ -12,6 +12,8 @@ import { AppProps } from 'next/app'
 import Head from 'next/head'
 import { SnackbarProvider } from 'notistack'
 import { useEffect } from 'react'
+import UserPermissionsContext from 'src/contexts/userPermissionsContext'
+import useUserPermissions from 'src/hooks/UserPermissionsHook'
 import Wrapper from 'src/Wrapper'
 
 import ThemeModeContext from '../src/contexts/themeModeContext'
@@ -23,6 +25,7 @@ export default function MyApp(props: AppProps) {
   const { Component, pageProps } = props
   const themeModeValue = useThemeMode()
   const unsavedChangesValue = useUnsavedChanges()
+  const userPermissionsValue = useUserPermissions()
 
   // This is set so that 'react-markdown-editor' respects the theme set by MUI.
   useEffect(() => {
@@ -39,14 +42,16 @@ export default function MyApp(props: AppProps) {
       <ThemeProvider theme={themeModeValue.theme}>
         <UnsavedChangesContext.Provider value={unsavedChangesValue}>
           <ThemeModeContext.Provider value={themeModeValue}>
-            <SnackbarProvider>
-              <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale='en-gb'>
-                <CssBaseline />
-                <Wrapper>
-                  <Component {...pageProps} />
-                </Wrapper>
-              </LocalizationProvider>
-            </SnackbarProvider>
+            <UserPermissionsContext.Provider value={userPermissionsValue}>
+              <SnackbarProvider>
+                <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale='en-gb'>
+                  <CssBaseline />
+                  <Wrapper>
+                    <Component {...pageProps} />
+                  </Wrapper>
+                </LocalizationProvider>
+              </SnackbarProvider>
+            </UserPermissionsContext.Provider>
           </ThemeModeContext.Provider>
         </UnsavedChangesContext.Provider>
       </ThemeProvider>

frontend/pages/data-card/[dataCardId].tsx

@@ -1,15 +1,14 @@
 import { useGetModel } from 'actions/model'
-import { useGetCurrentUser } from 'actions/user'
 import { useRouter } from 'next/router'
-import { useMemo } from 'react'
+import { useContext, useMemo } from 'react'
 import Loading from 'src/common/Loading'
 import PageWithTabs, { PageTab } from 'src/common/PageWithTabs'
 import Title from 'src/common/Title'
+import UserPermissionsContext from 'src/contexts/userPermissionsContext'
 import Overview from 'src/entry/overview/Overview'
 import Settings from 'src/entry/settings/Settings'
 import MultipleErrorWrapper from 'src/errors/MultipleErrorWrapper'
 import { EntryKind } from 'types/types'
-import { getCurrentUserRoles, getRequiredRolesText, hasRole } from 'utils/roles'
 
 export default function DataCard() {
   const router = useRouter()
@@ -19,14 +18,10 @@ export default function DataCard() {
     isModelLoading: isDataCardLoading,
     isModelError: isDataCardError,
   } = useGetModel(dataCardId, EntryKind.DATA_CARD)
-  const { currentUser, isCurrentUserLoading, isCurrentUserError } = useGetCurrentUser()
 
-  const currentUserRoles = useMemo(() => getCurrentUserRoles(dataCard, currentUser), [dataCard, currentUser])
+  const { userPermissions } = useContext(UserPermissionsContext)
 
-  const [isReadOnly, requiredRolesText] = useMemo(() => {
-    const validRoles = ['owner']
-    return [!hasRole(currentUserRoles, validRoles), getRequiredRolesText(currentUserRoles, validRoles)]
-  }, [currentUserRoles])
+  const settingsPermission = useMemo(() => userPermissions['editEntry'], [userPermissions])
 
   const tabs: PageTab[] = useMemo(
     () =>
@@ -35,30 +30,29 @@ export default function DataCard() {
             {
               title: 'Overview',
               path: 'overview',
-              view: <Overview entry={dataCard} currentUserRoles={currentUserRoles} />,
+              view: <Overview entry={dataCard} />,
             },
             {
               title: 'Settings',
               path: 'settings',
-              disabled: isReadOnly,
-              disabledText: requiredRolesText,
-              view: <Settings entry={dataCard} currentUserRoles={currentUserRoles} />,
+              disabled: !settingsPermission.hasPermission,
+              disabledText: settingsPermission.info,
+              view: <Settings entry={dataCard} />,
             },
           ]
         : [],
-    [currentUserRoles, dataCard, isReadOnly, requiredRolesText],
+    [dataCard, settingsPermission.hasPermission, settingsPermission.info],
   )
 
   const error = MultipleErrorWrapper(`Unable to load data card page`, {
     isDataCardError,
-    isCurrentUserError,
   })
   if (error) return error
 
   return (
     <>
       <Title text={dataCard ? dataCard.name : 'Loading...'} />
-      {(isDataCardLoading || isCurrentUserLoading) && <Loading />}
+      {isDataCardLoading && <Loading />}
       {dataCard && (
         <PageWithTabs
           title={dataCard.name}

frontend/pages/model/[modelId].tsx

@@ -2,10 +2,11 @@ import { useGetModel } from 'actions/model'
 import { useGetUiConfig } from 'actions/uiConfig'
 import { useGetCurrentUser } from 'actions/user'
 import { useRouter } from 'next/router'
-import { useMemo } from 'react'
+import { useContext, useMemo } from 'react'
 import Loading from 'src/common/Loading'
 import PageWithTabs, { PageTab } from 'src/common/PageWithTabs'
 import Title from 'src/common/Title'
+import UserPermissionsContext from 'src/contexts/userPermissionsContext'
 import AccessRequests from 'src/entry/model/AccessRequests'
 import InferenceServices from 'src/entry/model/InferenceServices'
 import ModelImages from 'src/entry/model/ModelImages'
@@ -14,7 +15,7 @@ import Overview from 'src/entry/overview/Overview'
 import Settings from 'src/entry/settings/Settings'
 import MultipleErrorWrapper from 'src/errors/MultipleErrorWrapper'
 import { EntryKind } from 'types/types'
-import { getCurrentUserRoles, getRequiredRolesText, hasRole } from 'utils/roles'
+import { getCurrentUserRoles } from 'utils/roles'
 
 export default function Model() {
   const router = useRouter()
@@ -23,12 +24,11 @@ export default function Model() {
   const { currentUser, isCurrentUserLoading, isCurrentUserError } = useGetCurrentUser()
   const { uiConfig, isUiConfigLoading, isUiConfigError } = useGetUiConfig()
 
+  const { userPermissions } = useContext(UserPermissionsContext)
+
   const currentUserRoles = useMemo(() => getCurrentUserRoles(model, currentUser), [model, currentUser])
 
-  const [isReadOnly, requiredRolesText] = useMemo(() => {
-    const validRoles = ['owner']
-    return [!hasRole(currentUserRoles, validRoles), getRequiredRolesText(currentUserRoles, validRoles)]
-  }, [currentUserRoles])
+  const settingsPermission = useMemo(() => userPermissions['editEntry'], [userPermissions])
 
   const tabs: PageTab[] = useMemo(
     () =>
@@ -37,13 +37,7 @@ export default function Model() {
             {
               title: 'Overview',
               path: 'overview',
-              view: (
-                <Overview
-                  entry={model}
-                  currentUserRoles={currentUserRoles}
-                  readOnly={!!model.settings.mirror?.sourceModelId}
-                />
-              ),
+              view: <Overview entry={model} readOnly={!!model.settings.mirror?.sourceModelId} />,
             },
             {
               title: 'Releases',
@@ -69,30 +63,24 @@ export default function Model() {
             {
               title: 'Registry',
               path: 'registry',
-              view: (
-                <ModelImages
-                  model={model}
-                  currentUserRoles={currentUserRoles}
-                  readOnly={!!model.settings.mirror?.sourceModelId}
-                />
-              ),
+              view: <ModelImages model={model} readOnly={!!model.settings.mirror?.sourceModelId} />,
             },
             {
               title: 'Inferencing',
               path: 'inferencing',
-              view: <InferenceServices model={model} currentUserRoles={currentUserRoles} />,
+              view: <InferenceServices model={model} />,
               hidden: !uiConfig.inference.enabled,
             },
             {
               title: 'Settings',
               path: 'settings',
-              disabled: isReadOnly,
-              disabledText: requiredRolesText,
-              view: <Settings entry={model} currentUserRoles={currentUserRoles} />,
+              disabled: !settingsPermission.hasPermission,
+              disabledText: settingsPermission.info,
+              view: <Settings entry={model} />,
             },
           ]
         : [],
-    [model, uiConfig, currentUserRoles, isReadOnly, requiredRolesText],
+    [model, uiConfig, currentUserRoles, settingsPermission.hasPermission, settingsPermission.info],
   )
 
   function requestAccess() {

frontend/pages/model/[modelId]/inference/[image]/[tag]/settings.tsx

@@ -1,37 +1,26 @@
 import { ArrowBack } from '@mui/icons-material'
 import { Button, Card, Container, Divider, Link, Stack, Typography } from '@mui/material'
 import { useGetInference } from 'actions/inferencing'
-import { useGetModel } from 'actions/model'
-import { useGetCurrentUser } from 'actions/user'
 import { useRouter } from 'next/router'
-import { useMemo } from 'react'
 import Loading from 'src/common/Loading'
 import Title from 'src/common/Title'
 import EditableInference from 'src/entry/model/inferencing/EditableInference'
 import MultipleErrorWrapper from 'src/errors/MultipleErrorWrapper'
-import { EntryKind } from 'types/types'
-import { getCurrentUserRoles } from 'utils/roles'
 
 export default function InferenceSettings() {
   const router = useRouter()
   const { modelId, image, tag }: { modelId?: string; image?: string; tag?: string } = router.query
   const { inference, isInferenceLoading, isInferenceError } = useGetInference(modelId, image, tag)
-  const { model, isModelLoading, isModelError } = useGetModel(modelId, EntryKind.MODEL)
-  const { currentUser, isCurrentUserLoading, isCurrentUserError } = useGetCurrentUser()
-
-  const currentUserRoles = useMemo(() => getCurrentUserRoles(model, currentUser), [model, currentUser])
 
   const error = MultipleErrorWrapper(`Unable to load inference settings page`, {
     isInferenceError,
-    isModelError,
-    isCurrentUserError,
   })
   if (error) return error
 
   return (
     <>
       <Title text={inference ? `${inference.image}:${inference.tag}` : 'Loading...'} />
-      {!inference || isInferenceLoading || isModelLoading || isCurrentUserLoading ? (
+      {!inference || isInferenceLoading ? (
         <Loading />
       ) : (
         <Container maxWidth='md'>
@@ -47,7 +36,7 @@ export default function InferenceSettings() {
                   {inference ? `${inference.image}:${inference.tag}` : 'Loading...'}
                 </Typography>
               </Stack>
-              {inference && <EditableInference inference={inference} currentUserRoles={currentUserRoles} />}
+              {inference && <EditableInference inference={inference} />}
             </Stack>
           </Card>
         </Container>

frontend/pages/model/[modelId]/release/[semver].tsx

@@ -105,7 +105,6 @@ export default function Release() {
               {release && (
                 <EditableRelease
                   release={release}
-                  currentUserRoles={currentUserRoles}
                   isEdit={isEdit}
                   onIsEditChange={setIsEdit}
                   readOnly={!!model?.settings.mirror?.sourceModelId}