Collaborative projects

editor/src/components/editor/persistence/generic/persistence-machine.ts

@@ -94,6 +94,18 @@ function loadFailedEvent(): LoadFailedEvent {
   }
 }
 
+interface LoadFailedNotAuthorizedEvent {
+  type: 'LOAD_FAILED_NOT_AUTHORIZED'
+  projectId: string
+}
+
+function loadFailedNotAuthorizedEvent(projectId: string): LoadFailedNotAuthorizedEvent {
+  return {
+    type: 'LOAD_FAILED_NOT_AUTHORIZED',
+    projectId: projectId,
+  }
+}
+
 export interface SaveEvent<ModelType> {
   type: 'SAVE'
   projectModel: ProjectModel<ModelType>
@@ -180,6 +192,7 @@ type CoreEvent<ModelType, FileType> =
   | LoadEvent
   | LoadCompleteEvent<ModelType>
   | LoadFailedEvent
+  | LoadFailedNotAuthorizedEvent
   | CheckOwnershipCompleteEvent
   | SaveEvent<ModelType>
   | SaveCompleteEvent<ModelType, FileType>
@@ -525,6 +538,8 @@ export function createPersistenceMachine<ModelType, FileType>(
                     send((_, event: DoneInvokeEvent<ProjectLoadResult<ModelType>>) => {
                       if (event.data.type === 'PROJECT_LOAD_SUCCESS') {
                         return loadCompleteEvent(event.data.projectId, event.data.projectModel)
+                      } else if (event.data.type === 'PROJECT_NOT_AUTHORIZED') {
+                        return loadFailedNotAuthorizedEvent(event.data.projectId)
                       } else {
                         return loadFailedEvent()
                       }
@@ -703,6 +718,20 @@ export function createPersistenceMachine<ModelType, FileType>(
                     }
                   }),
                 },
+                LOAD_FAILED_NOT_AUTHORIZED: {
+                  target: Empty,
+                  actions: assign((_context, _event) => {
+                    return {
+                      projectId: undefined,
+                      project: undefined,
+                      queuedSave: undefined,
+                      projectOwnership: {
+                        ownerId: null,
+                        isOwner: false,
+                      },
+                    }
+                  }),
+                },
               },
             },
             [Saving]: {

editor/src/components/editor/persistence/generic/persistence-types.ts

@@ -32,11 +32,19 @@ export interface ProjectLoadSuccess<ModelType> extends ProjectModelWithId<ModelT
   type: 'PROJECT_LOAD_SUCCESS'
 }
 
-export interface ProjectNotFount {
+export interface ProjectNotFound {
   type: 'PROJECT_NOT_FOUND'
 }
 
-export type ProjectLoadResult<ModelType> = ProjectLoadSuccess<ModelType> | ProjectNotFount
+export interface ProjectNotAuthorized {
+  type: 'PROJECT_NOT_AUTHORIZED'
+  projectId: string
+}
+
+export type ProjectLoadResult<ModelType> =
+  | ProjectLoadSuccess<ModelType>
+  | ProjectNotFound
+  | ProjectNotAuthorized
 
 export interface FileWithFileName<FileType> {
   fileName: string

editor/src/components/editor/persistence/persistence-backend.ts

@@ -92,6 +92,12 @@ async function loadProject(projectId: string): Promise<ProjectLoadResult<Persist
           type: 'PROJECT_NOT_FOUND',
         }
 
+      case 'ProjectNotAuthorized':
+        return {
+          type: 'PROJECT_NOT_AUTHORIZED',
+          projectId: projectId,
+        }
+
       default:
         throw new Error(`Invalid project load response: ${JSON.stringify(serverProject)}`)
     }

editor/src/components/editor/persistence/persistence.spec.tsx

@@ -175,6 +175,7 @@ function setupTest(saveThrottle: number = 0) {
     updatedFiles: {} as { [fileName: string]: AssetFile },
     dispatchedActions: [] as Array<EditorAction>,
     projectNotFound: false,
+    projectNotAuthorized: false,
     createdOrLoadedProject: undefined as PersistentModel | undefined,
     latestContext: {
       projectOwnership: { ownerId: null, isOwner: false },
@@ -192,6 +193,7 @@ function setupTest(saveThrottle: number = 0) {
     })
   }
   const onProjectNotFound = () => (capturedData.projectNotFound = true)
+  const onProjectNotAuthorized = () => (capturedData.projectNotFound = true)
   const onCreatedOrLoadedProject = (
     _projectId: string,
     _projectName: string,
@@ -206,6 +208,7 @@ function setupTest(saveThrottle: number = 0) {
     PersistenceBackend,
     testDispatch,
     onProjectNotFound,
+    onProjectNotAuthorized,
     onCreatedOrLoadedProject,
     onContextChange,
     saveThrottle,

editor/src/components/editor/persistence/persistence.test-utils.ts

@@ -13,4 +13,5 @@ export const DummyPersistenceMachine: PersistenceMachine = new PersistenceMachin
   NO_OP,
   NO_OP,
   NO_OP,
+  NO_OP,
 )

editor/src/components/editor/persistence/persistence.ts

@@ -47,6 +47,7 @@ export class PersistenceMachine {
     backendAPI: PersistenceBackendAPI<PersistentModel, ProjectFile>,
     dispatch: EditorDispatch,
     onProjectNotFound: () => void,
+    onProjectNotAuthorized: (projectId: string) => void,
     onCreatedOrLoadedProject: (
       projectId: string,
       projectName: string,
@@ -85,6 +86,9 @@ export class PersistenceMachine {
           case 'LOAD_FAILED':
             onProjectNotFound()
             break
+          case 'LOAD_FAILED_NOT_AUTHORIZED':
+            onProjectNotAuthorized(event.projectId)
+            break
           case 'DOWNLOAD_ASSETS_COMPLETE': {
             if (state.matches({ core: { [Forking]: CreatingProjectId } })) {
               this.queuedActions.push(setForkedFromProjectID(state.context.projectId!))

editor/src/components/editor/server.ts

@@ -66,7 +66,15 @@ interface ProjectNotFound {
   type: 'ProjectNotFound'
 }
 
-export type LoadProjectResponse = ProjectLoaded | ProjectUnchanged | ProjectNotFound
+interface ProjectNotAuthorized {
+  type: 'ProjectNotAuthorized'
+}
+
+export type LoadProjectResponse =
+  | ProjectLoaded
+  | ProjectUnchanged
+  | ProjectNotFound
+  | ProjectNotAuthorized
 
 interface SaveAssetResponse {
   id: string
@@ -176,6 +184,8 @@ export async function loadProject(
     return response.json()
   } else if (response.status === 404) {
     return { type: 'ProjectNotFound' }
+  } else if (response.status === 403) {
+    return { type: 'ProjectNotAuthorized' }
   } else {
     // FIXME Client should show an error if server requests fail
     throw new Error(`server responded with ${response.status} ${response.statusText}`)
@@ -548,3 +558,17 @@ async function getCollaboratorsFromLiveblocks(projectId: string): Promise<Collab
   }
   return Object.values(collabs.toObject()).map((u) => u.toObject())
 }
+
+export async function requestProjectAccess(projectId: string): Promise<void> {
+  if (!isBackendBFF()) {
+    return
+  }
+  const response = await fetch(`/internal/projects/${projectId}/access/request`, {
+    method: 'POST',
+    credentials: 'include',
+    mode: MODE,
+  })
+  if (!response.ok) {
+    throw new Error(`Request project access failed (${response.status}): ${response.statusText}`)
+  }
+}

editor/src/templates/editor.tsx

@@ -273,6 +273,7 @@ export class Editor {
         PersistenceBackend,
         this.boundDispatch,
         renderProjectNotFound,
+        renderProjectNotAuthorized,
         onCreatedOrLoadedProject,
       ),
       builtInDependencies: builtInDependencies,
@@ -826,3 +827,11 @@ async function renderProjectNotFound(): Promise<void> {
     root.render(<ProjectNotFound />)
   }
 }
+
+async function renderProjectNotAuthorized(projectId: string): Promise<void> {
+  const rootElement = document.getElementById(EditorID)
+  if (rootElement != null) {
+    const root = createRoot(rootElement)
+    root.render(<ProjectNotFound projectId={projectId} />)
+  }
+}

editor/src/templates/project-not-found/ProjectNotFound.tsx

@@ -4,10 +4,19 @@ import React from 'react'
 import { jsx } from '@emotion/react'
 import { Button } from '../../uuiui/button'
 import { UTOPIA_BACKEND_BASE_URL } from '../../common/env-vars'
+import { when } from '../../utils/react-conditionals'
+import { requestProjectAccess } from '../../components/editor/server'
 
 const PyramidLight404 = `${process.env.UTOPIA_DOMAIN}/editor/404_pyramid_light.png?hash=${process.env.UTOPIA_SHA}`
 
-export default function ProjectNotFound() {
+export default function ProjectNotFound({ projectId }: { projectId?: string }) {
+  const [accessRequested, setAccessRequested] = React.useState(false)
+  const requestAccess = React.useCallback(async () => {
+    if (projectId != null) {
+      void requestProjectAccess(projectId)
+      setAccessRequested(true)
+    }
+  }, [projectId])
   return (
     <div
       style={{
@@ -45,33 +54,59 @@ export default function ProjectNotFound() {
         <div style={{ fontSize: '22px', width: '430px', textAlign: 'center', lineHeight: '40px' }}>
           Either this project does not exist, or you do not have access to it.
         </div>
-        <a
-          href={`${UTOPIA_BACKEND_BASE_URL}projects`}
-          rel='noopener noreferrer'
-          style={{ textDecoration: 'none' }}
-        >
-          <Button
-            css={{
-              boxSizing: 'border-box',
-              height: 'auto',
-              fontSize: '18px',
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              color: 'white',
-              backgroundColor: '#0075f9',
-              borderRadius: '90px',
-              padding: '10px 30px',
-              transition: 'background-color 0.3s',
-              '&:hover': {
-                backgroundColor: '#5DA9FF',
-              },
-            }}
+        <div style={{ display: 'flex', gap: '20px' }}>
+          <a
+            href={`${UTOPIA_BACKEND_BASE_URL}projects`}
+            rel='noopener noreferrer'
+            style={{ textDecoration: 'none' }}
           >
-            Return Home
-          </Button>
-        </a>
+            <ActionButton text='Return Home' />
+          </a>
+          {when(
+            projectId != null,
+            <ActionButton
+              text={accessRequested ? 'Access Requested' : 'Request Access'}
+              onClick={requestAccess}
+              disabled={accessRequested}
+            />,
+          )}
+        </div>
       </div>
     </div>
   )
 }
+
+function ActionButton({
+  text,
+  onClick,
+  disabled,
+}: {
+  text: string
+  onClick?: () => void
+  disabled?: boolean
+}) {
+  return (
+    <Button
+      disabled={disabled}
+      onClick={onClick}
+      css={{
+        boxSizing: 'border-box',
+        height: 'auto',
+        fontSize: '18px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        color: 'white',
+        backgroundColor: '#0075f9',
+        borderRadius: '90px',
+        padding: '10px 30px',
+        transition: 'background-color 0.3s',
+        '&:hover': {
+          backgroundColor: '#5DA9FF',
+        },
+      }}
+    >
+      {text}
+    </Button>
+  )
+}

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 = ''