Collaborative projects

utopia-remix/__mocks__/@openfga/sdk.ts

@@ -7,9 +7,9 @@ export function OpenFgaClient() {
 
 export const CredentialsMethod = {}
 export const ErrorCode = {}
-export type ClientRequestOptsWithAuthZModelId = {}
-export type ClientWriteRequest = {}
-export type ClientWriteRequestOpts = {}
-export type ClientWriteResponse = {}
-export type FgaApiValidationError = {}
-export type ClientConfiguration = {}
+export type ClientRequestOptsWithAuthZModelId = ''
+export type ClientWriteRequest = ''
+export type ClientWriteRequestOpts = ''
+export type ClientWriteResponse = ''
+export type FgaApiValidationError = ''
+export type ClientConfiguration = ''

utopia-remix/app/components/projectActionContextMenu.tsx

@@ -24,6 +24,7 @@ type ContextMenuEntry =
       onClick: (project: ProjectWithoutContent) => void
     }
   | 'separator'
+  | null
 
 export const ProjectContextMenu = React.memo(({ project }: { project: ProjectWithoutContent }) => {
   const deleteFetcher = useFetcherWithOperation(project.proj_id, 'delete')
@@ -94,7 +95,7 @@ export const ProjectContextMenu = React.memo(({ project }: { project: ProjectWit
   )
   const projectEditorLink = useProjectEditorLink()
 
-  const menuEntries = React.useMemo((): ContextMenuEntry[] => {
+  const menuEntries = React.useMemo((): (ContextMenuEntry | null)[] => {
     switch (selectedCategory) {
       case 'allProjects':
         return [
@@ -134,6 +135,14 @@ export const ProjectContextMenu = React.memo(({ project }: { project: ProjectWit
               deleteProject(selectedProject.proj_id)
             },
           },
+          accessLevel === AccessLevel.PRIVATE
+            ? {
+                text: 'Make Collaborative',
+                onClick: (selectedProject) => {
+                  changeAccessLevel(selectedProject.proj_id, AccessLevel.COLLABORATIVE)
+                },
+              }
+            : null,
           {
             text: accessLevel === AccessLevel.PUBLIC ? 'Make Private' : 'Make Public',
             onClick: (selectedProject) => {
@@ -177,7 +186,10 @@ export const ProjectContextMenu = React.memo(({ project }: { project: ProjectWit
   return (
     <DropdownMenu.Portal>
       <DropdownMenu.Content className={contextMenuDropdown()} align='end' sideOffset={5}>
-        {menuEntries.map((entry, index) => {
+        {menuEntries.filter(Boolean).map((entry, index) => {
+          if (entry == null) {
+            return null
+          }
           if (entry === 'separator') {
             return (
               <DropdownMenu.Separator

utopia-remix/app/handlers/validators.ts

@@ -1,6 +1,6 @@
 import type { AccessValidator } from '../util/api.server'
 import { ensure, getUser } from '../util/api.server'
-import type { UserProjectPermission } from '../types'
+import { UserProjectPermission } from '../types'
 import type { Params } from '@remix-run/react'
 import { Status } from '../util/statusCodes'
 import { hasUserProjectPermission } from '../services/permissionsService.server'
@@ -13,11 +13,13 @@ export function validateProjectAccess(
     status,
     getProjectId,
     includeDeleted = false,
+    canRequestAccess = false,
   }: {
     errorMessage?: string
     status?: number
     getProjectId: (params: Params<string>) => string | null | undefined
     includeDeleted?: boolean
+    canRequestAccess?: boolean
   },
 ): AccessValidator {
   return async function (req: Request, params: Params<string>) {
@@ -32,7 +34,20 @@ export function validateProjectAccess(
     const isCreator = userId ? ownerId === userId : false
 
     const allowed = isCreator || (await hasUserProjectPermission(projectId, userId, permission))
-    ensure(allowed, errorMessage ?? 'Unauthorized Access', status ?? Status.UNAUTHORIZED)
+    let errorMessageToUse = errorMessage ?? 'Unauthorized Access'
+    let statusToUse = status ?? Status.UNAUTHORIZED
+    if (!allowed && canRequestAccess) {
+      const hasRequestAccessPermission = await hasUserProjectPermission(
+        projectId,
+        userId,
+        UserProjectPermission.CAN_REQUEST_ACCESS,
+      )
+      if (hasRequestAccessPermission) {
+        errorMessageToUse = 'Request access to this project'
+        statusToUse = Status.UNAUTHORIZED
+      }
+    }
+    ensure(allowed, errorMessageToUse, statusToUse)
   }
 }
 

utopia-remix/app/routes/internal.projects.$id.role.tsx

@@ -0,0 +1,39 @@
+import type { ActionFunctionArgs } from '@remix-run/node'
+import { validateProjectAccess } from '../handlers/validators'
+import { ensure, handle, requireUser } from '../util/api.server'
+import { UserProjectPermission, UserProjectRole, asUserProjectRole } from '../types'
+import type { Params } from '@remix-run/react'
+import { Status } from '../util/statusCodes'
+import { asNumber } from '../util/common'
+import * as permissionService from '../services/permissionsService.server'
+
+export async function action(args: ActionFunctionArgs) {
+  return handle(args, {
+    POST: {
+      handler: changeProjectUserRole,
+      validator: validateProjectAccess(UserProjectPermission.CAN_MANAGE_PROJECT, {
+        getProjectId: (params) => params.id,
+      }),
+    },
+  })
+}
+
+async function changeProjectUserRole(req: Request, params: Params<string>) {
+  const user = await requireUser(req)
+  const { id } = params
+  ensure(id != null, 'id is null', Status.BAD_REQUEST)
+
+  const formData = await req.formData()
+  const userRoleStr = formData.get('userRole')
+  const userRoleNumber = asNumber(userRoleStr)
+  ensure(!isNaN(userRoleNumber), 'userRole is not a number', Status.BAD_REQUEST)
+  const userRole = asUserProjectRole(userRoleNumber)
+  ensure(
+    userRole != null && Object.values(UserProjectRole).includes(userRole),
+    'userRole is not a valid UserProjectRole',
+    Status.BAD_REQUEST,
+  )
+  await permissionService.grantProjectRoleToUser(id, user.user_id, userRole)
+
+  return {}
+}

utopia-remix/app/routes/projects.tsx

@@ -918,6 +918,8 @@ const ProjectBadge = React.memo(({ accessLevel }: { accessLevel: AccessLevel })
         return ['rgb(0 130 77)', 'rgb(0 155 0 / 9%)']
       case AccessLevel.WITH_LINK:
         return ['rgb(0 114 222)', 'rgb(0 132 241 / 9%)']
+      case AccessLevel.COLLABORATIVE:
+        return ['rgb(0 114 222)', 'rgb(0 132 241 / 9%)']
       default:
         return ['gray', 'lightgray']
     }
@@ -931,6 +933,8 @@ const ProjectBadge = React.memo(({ accessLevel }: { accessLevel: AccessLevel })
         return 'Public'
       case AccessLevel.WITH_LINK:
         return 'With Link'
+      case AccessLevel.COLLABORATIVE:
+        return 'Collaborative'
       default:
         return 'Unknown'
     }

utopia-remix/app/routes/v1.project.$id.tsx

@@ -13,6 +13,7 @@ export async function loader(args: LoaderFunctionArgs) {
       validator: validateProjectAccess(UserProjectPermission.CAN_VIEW_PROJECT, {
         errorMessage: 'Project not found',
         status: Status.NOT_FOUND,
+        canRequestAccess: true,
         getProjectId: (params) => params.id,
       }),
     },

utopia-remix/app/services/fgaClient.server.ts

@@ -29,7 +29,10 @@ class WriteSafeOpenFgaClient extends OpenFgaClient {
     } catch (err) {
       if ((err as FgaApiValidationError).apiErrorCode === ErrorCode.WriteFailedDueToInvalidInput) {
         // FGA throws a hard error on that, but we want to ignore it (since it's a no-op)
-        console.error('Failed writing an existing tuple, or deleting a non-existing tuple', err)
+        console.error(
+          'Failed writing an existing tuple, or deleting a non-existing tuple',
+          (err as FgaApiValidationError).requestData,
+        )
       } else {
         throw err
       }
@@ -87,14 +90,17 @@ function getCredentials(fgaClientMode: 'local' | 'remote'): CredentialsConfig {
 function getFgaClientMode(): 'local_mock' | 'local' | 'remote' {
   if (ServerEnvironment.environment === 'local') {
     if (ServerEnvironment.FGA_API_HOST == '') {
+      // eslint-disable-next-line no-console
       console.log('Using mock FGA client')
       return 'local_mock'
     }
     if (ServerEnvironment.FGA_API_HOST.includes('localhost')) {
+      // eslint-disable-next-line no-console
       console.log('Using local FGA client')
       return 'local'
     }
   }
+  // eslint-disable-next-line no-console
   console.log('Using remote FGA client')
   return 'remote'
 }

utopia-remix/app/services/fgaService.server.ts

@@ -1,31 +1,11 @@
+import type { ClientWriteRequest } from '@openfga/sdk'
 import { AccessLevel } from '../types'
 import { fgaClient } from './fgaClient.server'
+import { assertNever } from '../util/assertNever'
 
 export async function updateAccessLevel(projectId: string, accessLevel: AccessLevel) {
-  switch (accessLevel) {
-    case AccessLevel.PUBLIC:
-      await fgaClient.write({
-        writes: [
-          {
-            user: 'user:*',
-            relation: 'viewer',
-            object: `project:${projectId}`,
-          },
-        ],
-      })
-      break
-    case AccessLevel.PRIVATE:
-      await fgaClient.write({
-        deletes: [
-          {
-            user: 'user:*',
-            relation: 'viewer',
-            object: `project:${projectId}`,
-          },
-        ],
-      })
-      break
-  }
+  const writes = accessLevelToFgaWrites(projectId, accessLevel)
+  return await Promise.all(writes.map((write) => fgaClient.write(write)))
 }
 
 const userProjectPermission = [
@@ -90,3 +70,72 @@ export async function canSeeLiveChanges(projectId: string, userId: string): Prom
 export async function canManageProject(projectId: string, userId: string): Promise<boolean> {
   return checkUserProjectPermission(projectId, userId, 'can_manage')
 }
+
+//
+
+export async function makeUserViewer(projectId: string, userId: string) {
+  return fgaClient.write({
+    writes: [{ user: `user:${userId}`, relation: 'viewer', object: `project:${projectId}` }],
+  })
+}
+
+export async function makeUserCollaborator(projectId: string, userId: string) {
+  return fgaClient.write({
+    writes: [{ user: `user:${userId}`, relation: 'collaborator', object: `project:${projectId}` }],
+  })
+}
+
+export async function makeUserEditor(projectId: string, userId: string) {
+  return fgaClient.write({
+    writes: [{ user: `user:${userId}`, relation: 'editor', object: `project:${projectId}` }],
+  })
+}
+
+export async function makeUserAdmin(projectId: string, userId: string) {
+  return fgaClient.write({
+    writes: [{ user: `user:${userId}`, relation: 'admin', object: `project:${projectId}` }],
+  })
+}
+
+//
+
+function generalRelation(projectId: string, relation: string) {
+  return {
+    user: 'user:*',
+    relation: relation,
+    object: `project:${projectId}`,
+  }
+}
+
+function accessLevelToFgaWrites(projectId: string, accessLevel: AccessLevel): ClientWriteRequest[] {
+  switch (accessLevel) {
+    case AccessLevel.PUBLIC:
+      return [
+        { writes: [generalRelation(projectId, 'viewer')] },
+        { deletes: [generalRelation(projectId, 'collaborator')] },
+      ]
+
+    case AccessLevel.PRIVATE:
+      return [
+        { deletes: [generalRelation(projectId, 'viewer')] },
+        { deletes: [generalRelation(projectId, 'collaborator')] },
+        { deletes: [generalRelation(projectId, 'can_request_access')] },
+      ]
+
+    case AccessLevel.WITH_LINK:
+      return [
+        { writes: [generalRelation(projectId, 'viewer')] },
+        { writes: [generalRelation(projectId, 'collaborator')] },
+      ]
+
+    case AccessLevel.COLLABORATIVE:
+      return [
+        { writes: [generalRelation(projectId, 'can_request_access')] },
+        { deletes: [generalRelation(projectId, 'viewer')] },
+        { deletes: [generalRelation(projectId, 'collaborator')] },
+      ]
+
+    default:
+      assertNever(accessLevel)
+  }
+}

utopia-remix/app/services/permissionsService.server.ts

@@ -1,6 +1,6 @@
 import { assertNever } from '../util/assertNever'
 import type { AccessLevel } from '../types'
-import { UserProjectPermission } from '../types'
+import { UserProjectPermission, UserProjectRole } from '../types'
 import * as fgaService from './fgaService.server'
 
 const ANONYMOUS_USER_ID = '__ANON__'
@@ -38,3 +38,26 @@ export async function hasUserProjectPermission(
 export async function setProjectAccess(projectId: string, accessLevel: AccessLevel) {
   await fgaService.updateAccessLevel(projectId, accessLevel)
 }
+
+export async function grantProjectRoleToUser(
+  projectId: string,
+  userId: string,
+  role: UserProjectRole,
+) {
+  switch (role) {
+    case UserProjectRole.VIEWER:
+      return await Promise.all([
+        fgaService.makeUserViewer(projectId, userId),
+        // we're keeping collaborator role separate from viewer, to be able to grant it separately in the future
+        fgaService.makeUserCollaborator(projectId, userId),
+      ])
+    case UserProjectRole.COLLABORATOR:
+      return await fgaService.makeUserCollaborator(projectId, userId)
+    case UserProjectRole.EDITOR:
+      return await fgaService.makeUserEditor(projectId, userId)
+    case UserProjectRole.ADMIN:
+      return await fgaService.makeUserAdmin(projectId, userId)
+    default:
+      assertNever(role)
+  }
+}

utopia-remix/app/types.ts

@@ -46,6 +46,7 @@ export const AccessLevel = {
   PRIVATE: 0,
   PUBLIC: 1,
   WITH_LINK: 2,
+  COLLABORATIVE: 3,
 } as const
 
 export type AccessLevel = (typeof AccessLevel)[keyof typeof AccessLevel]
@@ -58,6 +59,8 @@ export function asAccessLevel(accessLevel: number | undefined | null): AccessLev
       return AccessLevel.PUBLIC
     case AccessLevel.WITH_LINK:
       return AccessLevel.WITH_LINK
+    case AccessLevel.COLLABORATIVE:
+      return AccessLevel.COLLABORATIVE
     default:
       return null
   }
@@ -77,6 +80,30 @@ export const UserProjectPermission = {
 
 export type UserProjectPermission =
   (typeof UserProjectPermission)[keyof typeof UserProjectPermission]
+
+export const UserProjectRole = {
+  VIEWER: 0,
+  COLLABORATOR: 1,
+  EDITOR: 2,
+  ADMIN: 3,
+} as const
+
+export type UserProjectRole = (typeof UserProjectRole)[keyof typeof UserProjectRole]
+
+export function asUserProjectRole(role: number | undefined | null): UserProjectRole | null {
+  switch (role) {
+    case UserProjectRole.VIEWER:
+      return UserProjectRole.VIEWER
+    case UserProjectRole.COLLABORATOR:
+      return UserProjectRole.COLLABORATOR
+    case UserProjectRole.EDITOR:
+      return UserProjectRole.EDITOR
+    case UserProjectRole.ADMIN:
+      return UserProjectRole.ADMIN
+    default:
+      return null
+  }
+}
 interface BaseOperation {
   projectId: string
 }