Only show the Request Access button when the user is logged in (#5054)

* only show request access when the user is logged in

* no optional

* clean up comparison

* update props

Author: ruggi

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

@@ -47,7 +47,7 @@ export class PersistenceMachine {
     backendAPI: PersistenceBackendAPI<PersistentModel, ProjectFile>,
     dispatch: EditorDispatch,
     onProjectNotFound: () => void,
-    onProjectNotAuthorized: (projectId: string) => void,
+    onProjectNotAuthorized: (projectId: string, loggedIn: boolean) => void,
     onCreatedOrLoadedProject: (
       projectId: string,
       projectName: string,
@@ -87,7 +87,7 @@ export class PersistenceMachine {
             onProjectNotFound()
             break
           case 'LOAD_FAILED_NOT_AUTHORIZED':
-            onProjectNotAuthorized(event.projectId)
+            onProjectNotAuthorized(event.projectId, state.context.loggedIn)
             break
           case 'DOWNLOAD_ASSETS_COMPLETE': {
             if (state.matches({ core: { [Forking]: CreatingProjectId } })) {

editor/src/templates/editor.tsx

@@ -32,10 +32,8 @@ import {
   startPreviewConnectedMonitoring,
 } from '../components/editor/preview-report-handler'
 import {
-  downloadGithubRepo,
   getLoginState,
   getUserConfiguration,
-  isRequestFailure,
   startPollingLoginState,
 } from '../components/editor/server'
 import {
@@ -82,12 +80,7 @@ import {
   ElementsToRerenderGLOBAL,
 } from '../components/canvas/ui-jsx-canvas'
 import { foldEither } from '../core/shared/either'
-import {
-  getURLImportDetails,
-  importZippedGitProject,
-  isProjectImportSuccess,
-  reuploadAssets,
-} from '../core/model/project-import'
+import { getURLImportDetails, reuploadAssets } from '../core/model/project-import'
 import { isSendPreviewModel, load } from '../components/editor/actions/actions'
 import { UtopiaStyles } from '../uuiui'
 import { reduxDevtoolsSendInitialState } from '../core/shared/redux-devtools'
@@ -111,10 +104,7 @@ import { waitUntil } from '../core/shared/promise-utils'
 import { sendSetVSCodeTheme } from '../core/vscode/vscode-bridge'
 import type { ElementPath } from '../core/shared/project-file-types'
 import { uniqBy } from '../core/shared/array-utils'
-import {
-  startGithubPolling,
-  updateUserDetailsWhenAuthenticated,
-} from '../core/shared/github/helpers'
+import { updateUserDetailsWhenAuthenticated } from '../core/shared/github/helpers'
 import { DispatchContext } from '../components/editor/store/dispatch-context'
 import {
   logSelectorTimings,
@@ -124,11 +114,7 @@ import { createPerformanceMeasure } from '../components/editor/store/editor-disp
 import { runDomWalkerAndSaveResults } from '../components/canvas/editor-dispatch-flow'
 import { simpleStringifyActions } from '../components/editor/actions/action-utils'
 import { unpatchedCreateRemixDerivedDataMemo } from '../components/editor/store/remix-derived-data'
-import {
-  emptyProjectServerState,
-  ProjectServerState,
-  ProjectServerStateUpdater,
-} from '../components/editor/store/project-server-state'
+import { emptyProjectServerState } from '../components/editor/store/project-server-state'
 import { GithubOperations } from '../core/shared/github/operations'
 import { GithubAuth } from '../utils/github-auth'
 import { Provider as JotaiProvider } from 'jotai'
@@ -824,14 +810,14 @@ async function renderProjectNotFound(): Promise<void> {
   const rootElement = document.getElementById(EditorID)
   if (rootElement != null) {
     const root = createRoot(rootElement)
-    root.render(<ProjectNotFound />)
+    root.render(<ProjectNotFound projectId={null} loggedIn={false} />)
   }
 }
 
-async function renderProjectNotAuthorized(projectId: string): Promise<void> {
+async function renderProjectNotAuthorized(projectId: string, loggedIn: boolean): Promise<void> {
   const rootElement = document.getElementById(EditorID)
   if (rootElement != null) {
     const root = createRoot(rootElement)
-    root.render(<ProjectNotFound projectId={projectId} />)
+    root.render(<ProjectNotFound projectId={projectId} loggedIn={loggedIn} />)
   }
 }

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

@@ -1,15 +1,21 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import React from 'react'
 import { jsx } from '@emotion/react'
-import { Button } from '../../uuiui/button'
+import React from 'react'
 import { UTOPIA_BACKEND_BASE_URL } from '../../common/env-vars'
-import { when } from '../../utils/react-conditionals'
 import { requestProjectAccess } from '../../components/editor/server'
+import { when } from '../../utils/react-conditionals'
+import { Button } from '../../uuiui/button'
 
 const PyramidLight404 = `${process.env.UTOPIA_DOMAIN}/editor/404_pyramid_light.png?hash=${process.env.UTOPIA_SHA}`
 
-export default function ProjectNotFound({ projectId }: { projectId?: string }) {
+export default function ProjectNotFound({
+  projectId,
+  loggedIn,
+}: {
+  projectId: string | null
+  loggedIn: boolean
+}) {
   const [accessRequested, setAccessRequested] = React.useState(false)
   const requestAccess = React.useCallback(async () => {
     if (projectId != null) {
@@ -63,7 +69,7 @@ export default function ProjectNotFound({ projectId }: { projectId?: string }) {
             <ActionButton text='Return Home' />
           </a>
           {when(
-            projectId != null,
+            projectId != null && loggedIn,
             <ActionButton
               text={accessRequested ? 'Access Requested' : 'Request Access'}
               onClick={requestAccess}

editor/src/templates/project-not-found/not-found-entry-point.tsx

@@ -6,5 +6,5 @@ import { EditorID } from '../../core/shared/utils'
 const rootElement = document.getElementById(EditorID)
 if (rootElement != null) {
   const root = createRoot(rootElement)
-  root.render(<ProjectNotFound />)
+  root.render(<ProjectNotFound projectId={null} loggedIn={false} />)
 }