{ASSET_TYPE_NAME[assetType]}
@@ -491,7 +528,7 @@ function Dashboard(props: DashboardProps) {
left={buttonPosition.left}
top={buttonPosition.top}
// FIXME[sb]: Don't pass outdated `doRefresh` - maybe `backendService` too.
- backend={backendService}
+ backend={asCloudBackend(backend)}
directoryId={directoryId}
onSuccess={doRefresh}
/>
@@ -514,11 +551,17 @@ function Dashboard(props: DashboardProps) {
setVisibleFileAssets(fileAssets.filter(asset => asset.title.includes(query)))
}, [query])
- function setAssets(assets: backend.Asset[]) {
- const newProjectAssets = assets.filter(backend.assetIsType(backend.AssetType.project))
- const newDirectoryAssets = assets.filter(backend.assetIsType(backend.AssetType.directory))
- const newSecretAssets = assets.filter(backend.assetIsType(backend.AssetType.secret))
- const newFileAssets = assets.filter(backend.assetIsType(backend.AssetType.file))
+ function setAssets(assets: cloudService.Asset[]) {
+ const newProjectAssets = assets.filter(
+ cloudService.assetIsType(cloudService.AssetType.project)
+ )
+ const newDirectoryAssets = assets.filter(
+ cloudService.assetIsType(cloudService.AssetType.directory)
+ )
+ const newSecretAssets = assets.filter(
+ cloudService.assetIsType(cloudService.AssetType.secret)
+ )
+ const newFileAssets = assets.filter(cloudService.assetIsType(cloudService.AssetType.file))
setProjectAssets(newProjectAssets)
setDirectoryAssets(newDirectoryAssets)
setSecretAssets(newSecretAssets)
@@ -528,36 +571,12 @@ function Dashboard(props: DashboardProps) {
hooks.useAsyncEffect(
null,
async signal => {
- let assets: backend.Asset[]
-
- switch (platform) {
- case platformModule.Platform.cloud: {
- assets = await backendService.listDirectory({
- parentId: directoryId,
- })
- break
- }
- case platformModule.Platform.desktop: {
- const result = await props.projectManager.listProjects({})
- const localProjects = result.result.projects
- assets = []
- for (const localProject of localProjects) {
- assets.push({
- type: backend.AssetType.project,
- title: localProject.name,
- id: localProject.id,
- parentId: '',
- permissions: null,
- })
- }
- break
- }
- }
+ const assets = await backend.listDirectory({ parentId: directoryId })
if (!signal.aborted) {
setAssets(assets)
}
},
- [accessToken, directoryId, refresh]
+ [accessToken, directoryId, refresh, backend]
)
react.useEffect(() => {
@@ -606,51 +625,24 @@ function Dashboard(props: DashboardProps) {
return `${prefix}${highestProjectIndex + 1}`
}
- async function handleCreateProject(templateName: string | null) {
+ async function handleCreateProject(templateName?: string | null) {
const projectName = getNewProjectName(templateName)
- switch (platform) {
- case platformModule.Platform.cloud: {
- const body: backend.CreateProjectRequestBody = {
- projectName,
- projectTemplateName:
- templateName?.replace(/_/g, '').toLocaleLowerCase() ?? null,
- parentDirectoryId: directoryId,
- }
- if (templateName) {
- body.projectTemplateName = templateName.replace(/_/g, '').toLocaleLowerCase()
- }
- const projectAsset = await backendService.createProject(body)
- setProjectAssets([
- ...projectAssets,
- {
- type: backend.AssetType.project,
- title: projectAsset.name,
- id: projectAsset.projectId,
- parentId: '',
- permissions: [],
- },
- ])
- break
- }
- case platformModule.Platform.desktop: {
- const result = await props.projectManager.createProject({
- name: newtype.asNewtype
(projectName),
- ...(templateName ? { projectTemplate: templateName } : {}),
- })
- const newProject = result.result
- setProjectAssets([
- ...projectAssets,
- {
- type: backend.AssetType.project,
- title: projectName,
- id: newProject.projectId,
- parentId: '',
- permissions: [],
- },
- ])
- break
- }
+ const body: cloudService.CreateProjectRequestBody = {
+ projectName,
+ projectTemplateName: templateName?.replace(/_/g, '').toLocaleLowerCase() ?? null,
+ parentDirectoryId: directoryId,
}
+ const projectAsset = await backend.createProject(body)
+ setProjectAssets([
+ ...projectAssets,
+ {
+ type: cloudService.AssetType.project,
+ title: projectAsset.name,
+ id: projectAsset.projectId,
+ parentId: '',
+ permissions: [],
+ },
+ ])
}
return (
@@ -664,19 +656,47 @@ function Dashboard(props: DashboardProps) {
>
{
if (project && tab === Tab.dashboard) {
setTab(Tab.ide)
+ const ideElement = document.getElementById(IDE_ELEMENT_ID)
+ if (ideElement) {
+ ideElement.hidden = false
+ }
} else {
setTab(Tab.dashboard)
+ const ideElement = document.getElementById(IDE_ELEMENT_ID)
+ if (ideElement) {
+ ideElement.hidden = true
+ }
+ }
+ }}
+ backendPlatform={backendPlatform}
+ setBackendPlatform={newBackendPlatform => {
+ setBackendPlatform(newBackendPlatform)
+ setProjectAssets([])
+ setDirectoryAssets([])
+ setSecretAssets([])
+ setFileAssets([])
+ switch (newBackendPlatform) {
+ case platformModule.Platform.desktop:
+ setBackend(localService.createBackend())
+ break
+ case platformModule.Platform.cloud:
+ setBackend(cloudService.createBackend(accessToken, logger))
+ break
}
}}
query={query}
setQuery={setQuery}
/>
-
+
Drive
@@ -703,12 +723,16 @@ function Dashboard(props: DashboardProps) {
+
+
+
+
+
+
+
+
+
+
-
+
|
- >
+ >
items={visibleProjectAssets}
getKey={proj => proj.id}
placeholder={
@@ -801,8 +894,8 @@ function Dashboard(props: DashboardProps) {
}
columns={COLUMNS_FOR[columnDisplayMode].map(column => ({
id: column,
- heading: ColumnHeading(column, backend.AssetType.project),
- render: renderer(column, backend.AssetType.project),
+ heading: ColumnHeading(column, cloudService.AssetType.project),
+ render: renderer(column, cloudService.AssetType.project),
}))}
onClick={projectAsset => {
setSelectedAssets([projectAsset])
@@ -843,7 +936,7 @@ function Dashboard(props: DashboardProps) {
name={projectAsset.title}
assetType={projectAsset.type}
doDelete={() =>
- backendService.deleteProject(projectAsset.id)
+ asCloudBackend(backend).deleteProject(projectAsset.id)
}
onSuccess={doRefresh}
/>
@@ -867,10 +960,10 @@ function Dashboard(props: DashboardProps) {
))
}}
/>
- {platform === platformModule.Platform.cloud && (
+ {backendPlatform === platformModule.Platform.cloud && (
<>
|
- >
+ >
items={visibleDirectoryAssets}
getKey={dir => dir.id}
placeholder={
@@ -881,8 +974,11 @@ function Dashboard(props: DashboardProps) {
}
columns={COLUMNS_FOR[columnDisplayMode].map(column => ({
id: column,
- heading: ColumnHeading(column, backend.AssetType.directory),
- render: renderer(column, backend.AssetType.directory),
+ heading: ColumnHeading(
+ column,
+ cloudService.AssetType.directory
+ ),
+ render: renderer(column, cloudService.AssetType.directory),
}))}
onClick={directoryAsset => {
setSelectedAssets([directoryAsset])
@@ -894,7 +990,7 @@ function Dashboard(props: DashboardProps) {
}}
/>
|
- >
+ >
items={visibleSecretAssets}
getKey={secret => secret.id}
placeholder={
@@ -905,8 +1001,8 @@ function Dashboard(props: DashboardProps) {
}
columns={COLUMNS_FOR[columnDisplayMode].map(column => ({
id: column,
- heading: ColumnHeading(column, backend.AssetType.secret),
- render: renderer(column, backend.AssetType.secret),
+ heading: ColumnHeading(column, cloudService.AssetType.secret),
+ render: renderer(column, cloudService.AssetType.secret),
}))}
onClick={secret => {
setSelectedAssets([secret])
@@ -922,7 +1018,7 @@ function Dashboard(props: DashboardProps) {
name={secret.title}
assetType={secret.type}
doDelete={() =>
- backendService.deleteSecret(secret.id)
+ asCloudBackend(backend).deleteSecret(secret.id)
}
onSuccess={doRefresh}
/>
@@ -938,7 +1034,7 @@ function Dashboard(props: DashboardProps) {
}}
/>
|
- >
+ >
items={visibleFileAssets}
getKey={file => file.id}
placeholder={
@@ -949,8 +1045,8 @@ function Dashboard(props: DashboardProps) {
}
columns={COLUMNS_FOR[columnDisplayMode].map(column => ({
id: column,
- heading: ColumnHeading(column, backend.AssetType.file),
- render: renderer(column, backend.AssetType.file),
+ heading: ColumnHeading(column, cloudService.AssetType.file),
+ render: renderer(column, cloudService.AssetType.file),
}))}
onClick={file => {
setSelectedAssets([file])
@@ -971,7 +1067,9 @@ function Dashboard(props: DashboardProps) {
backendService.deleteFile(file.id)}
+ doDelete={() =>
+ asCloudBackend(backend).deleteFile(file.id)
+ }
onSuccess={doRefresh}
/>
))
@@ -1001,7 +1099,7 @@ function Dashboard(props: DashboardProps) {
)}
- {isFileBeingDragged ? (
+ {isFileBeingDragged && backendPlatform === platformModule.Platform.cloud ? (
{
@@ -1014,7 +1112,7 @@ function Dashboard(props: DashboardProps) {
event.preventDefault()
setIsFileBeingDragged(false)
await uploadMultipleFiles.uploadMultipleFiles(
- backendService,
+ asCloudBackend(backend),
directoryId,
Array.from(event.dataTransfer.files)
)
@@ -1025,7 +1123,7 @@ function Dashboard(props: DashboardProps) {
) : null}
{/* This should be just `{modal}`, however TypeScript incorrectly throws an error. */}
- {project && }
+ {project && }
{modal && <>{modal}}
)
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/directoryCreateForm.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/directoryCreateForm.tsx
index 8f13d6e4da19..e3b8f617227b 100644
--- a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/directoryCreateForm.tsx
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/directoryCreateForm.tsx
@@ -2,14 +2,14 @@
import * as react from 'react'
import toast from 'react-hot-toast'
-import * as backendModule from '../service'
+import * as cloudService from '../cloudService'
import * as error from '../../error'
import * as modalProvider from '../../providers/modal'
import CreateForm, * as createForm from './createForm'
export interface DirectoryCreateFormProps extends createForm.CreateFormPassthroughProps {
- backend: backendModule.Backend
- directoryId: backendModule.DirectoryId
+ backend: cloudService.Backend
+ directoryId: cloudService.DirectoryId
onSuccess: () => void
}
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/fileCreateForm.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/fileCreateForm.tsx
index 20ae40b26c9b..b41008190b2e 100644
--- a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/fileCreateForm.tsx
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/fileCreateForm.tsx
@@ -2,14 +2,14 @@
import * as react from 'react'
import toast from 'react-hot-toast'
-import * as backendModule from '../service'
+import * as cloudService from '../cloudService'
import * as error from '../../error'
import * as modalProvider from '../../providers/modal'
import CreateForm, * as createForm from './createForm'
export interface FileCreateFormProps extends createForm.CreateFormPassthroughProps {
- backend: backendModule.Backend
- directoryId: backendModule.DirectoryId
+ backend: cloudService.Backend
+ directoryId: cloudService.DirectoryId
onSuccess: () => void
}
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/ide.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/ide.tsx
index d453f5b67fb7..0fe9ef42edb9 100644
--- a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/ide.tsx
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/ide.tsx
@@ -1,36 +1,35 @@
/** @file Container that launches the IDE. */
import * as react from 'react'
-import * as service from '../service'
+import * as backendProvider from '../../providers/backend'
+import * as cloudService from '../cloudService'
+import * as platformModule from '../../platform'
// =================
// === Constants ===
// =================
-/** The `id` attribute of the element that the IDE will be rendered into. */
+/** The `id` attribute of the element into which the IDE will be rendered. */
const IDE_ELEMENT_ID = 'root'
const IDE_CDN_URL = 'https://ensocdn.s3.us-west-1.amazonaws.com/ide'
+const JS_EXTENSION: Record = {
+ [platformModule.Platform.cloud]: '.js.gz',
+ [platformModule.Platform.desktop]: '.js',
+} as const
// =================
// === Component ===
// =================
interface Props {
- project: service.Project
- backendService: service.Backend
+ project: cloudService.Project
+ backendPlatform: platformModule.Platform
}
/** Container that launches the IDE. */
function Ide(props: Props) {
- const { project, backendService } = props
- const [ideElement] = react.useState(() => document.querySelector(IDE_ELEMENT_ID))
- const [[loaded, resolveLoaded]] = react.useState((): [Promise, () => void] => {
- let resolve!: () => void
- const promise = new Promise(innerResolve => {
- resolve = innerResolve
- })
- return [promise, resolve]
- })
+ const { project, backendPlatform } = props
+ const { backend } = backendProvider.useBackend()
react.useEffect(() => {
document.getElementById(IDE_ELEMENT_ID)?.classList.remove('hidden')
@@ -41,62 +40,77 @@ function Ide(props: Props) {
react.useEffect(() => {
void (async () => {
- const ideVersion = (
- await backendService.listVersions({
- versionType: service.VersionType.ide,
- default: true,
- })
- )[0]
- const projectIdeVersion = project.ideVersion?.value ?? ideVersion.number.value
- const stylesheetLink = document.createElement('link')
- stylesheetLink.rel = 'stylesheet'
- stylesheetLink.href = `${IDE_CDN_URL}/${projectIdeVersion}/style.css`
- const indexScript = document.createElement('script')
- indexScript.src = `${IDE_CDN_URL}/${projectIdeVersion}/index.js.gz`
- indexScript.addEventListener('load', () => {
- console.log('loaded')
- resolveLoaded()
- })
- document.head.append(stylesheetLink)
- document.body.append(indexScript)
- })()
- }, [])
-
- react.useEffect(() => {
- void (async () => {
- while (ideElement?.firstChild) {
- ideElement.removeChild(ideElement.firstChild)
+ const ideVersion =
+ project.ideVersion?.value ??
+ ('listVersions' in backend
+ ? await backend.listVersions({
+ versionType: cloudService.VersionType.ide,
+ default: true,
+ })
+ : null)?.[0].number.value
+ const engineVersion =
+ project.engineVersion?.value ??
+ ('listVersions' in backend
+ ? await backend.listVersions({
+ versionType: cloudService.VersionType.backend,
+ default: true,
+ })
+ : null)?.[0].number.value
+ const jsonAddress = project.jsonAddress
+ const binaryAddress = project.binaryAddress
+ if (ideVersion == null) {
+ throw new Error('Could not get the IDE version of the project.')
+ } else if (engineVersion == null) {
+ throw new Error('Could not get the engine version of the project.')
+ } else if (jsonAddress == null) {
+ throw new Error("Could not get the address of the project's JSON endpoint.")
+ } else if (binaryAddress == null) {
+ throw new Error("Could not get the address of the project's binary endpoint.")
+ } else {
+ const assetsRoot = (() => {
+ switch (backendPlatform) {
+ case platformModule.Platform.cloud:
+ return `${IDE_CDN_URL}/${ideVersion}/`
+ case platformModule.Platform.desktop:
+ return ''
+ }
+ })()
+ const runNewProject = async () => {
+ const originalUrl = window.location.href
+ // The URL query contains commandline options when running in the desktop,
+ // which will break the entrypoint for opening a fresh IDE instance.
+ history.replaceState(null, '', new URL('.', originalUrl))
+ await window.runProject({
+ loader: {
+ assetsUrl: `${assetsRoot}dynamic-assets`,
+ wasmUrl: `${assetsRoot}pkg-opt.wasm`,
+ jsUrl: `${assetsRoot}pkg${JS_EXTENSION[backendPlatform]}`,
+ },
+ engine: {
+ rpcUrl: jsonAddress,
+ dataUrl: binaryAddress,
+ preferredVersion: engineVersion,
+ },
+ startup: {
+ project: project.packageName,
+ },
+ })
+ // Restore original URL so that initialization works correctly on refresh.
+ history.replaceState(null, '', originalUrl)
+ }
+ if (backendPlatform === platformModule.Platform.desktop) {
+ await runNewProject()
+ } else {
+ const script = document.createElement('script')
+ script.src = `${IDE_CDN_URL}/${engineVersion}/index.js.gz`
+ script.onload = async () => {
+ document.body.removeChild(script)
+ await runNewProject()
+ }
+ document.body.appendChild(script)
+ }
+ return
}
- const ideVersion = (
- await backendService.listVersions({
- versionType: service.VersionType.ide,
- default: true,
- })
- )[0]
- const backendVersion = (
- await backendService.listVersions({
- versionType: service.VersionType.backend,
- default: true,
- })
- )[0]
- const projectIdeVersion = project.ideVersion?.value ?? ideVersion.number.value
- const projectEngineVersion = project.engineVersion?.value ?? backendVersion.number.value
- await loaded
- await window.enso.main({
- loader: {
- assetsUrl: `${IDE_CDN_URL}/${projectIdeVersion}/dynamic-assets`,
- wasmUrl: `${IDE_CDN_URL}/${projectIdeVersion}/pkg-opt.wasm`,
- jsUrl: `${IDE_CDN_URL}/${projectIdeVersion}/pkg.js.gz`,
- },
- engine: {
- rpcUrl: `${project.address!}json`,
- dataUrl: `${project.address!}binary`,
- preferredVersion: projectEngineVersion,
- },
- startup: {
- project: project.packageName,
- },
- })
})()
}, [project])
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/projectActionButton.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/projectActionButton.tsx
index 95764520bd71..575d458ef20c 100644
--- a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/projectActionButton.tsx
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/projectActionButton.tsx
@@ -1,10 +1,8 @@
/** @file An interactive button displaying the status of a project. */
import * as react from 'react'
-import * as reactDom from 'react-dom'
-import * as auth from '../../authentication/providers/auth'
-import * as backend from '../service'
-import * as loggerProvider from '../../providers/logger'
+import * as backendProvider from '../../providers/backend'
+import * as cloudService from '../cloudService'
import * as svg from '../../components/svg'
// =============
@@ -23,7 +21,7 @@ enum SpinnerState {
// =================
/** The interval between requests checking whether the IDE is ready. */
-const STATUS_CHECK_INTERVAL = 10000
+const CHECK_STATUS_INTERVAL = 10000
const SPINNER_CSS_CLASSES: Record = {
[SpinnerState.initial]: 'dasharray-5 ease-linear',
@@ -31,86 +29,68 @@ const SPINNER_CSS_CLASSES: Record = {
[SpinnerState.done]: 'dasharray-100 duration-1000 ease-in',
} as const
-/** Displayed when a project is ready to stop. */
-function StopIcon(spinnerState: SpinnerState) {
- return (
-
- )
-}
-
// =================
// === Component ===
// =================
export interface ProjectActionButtonProps {
- project: backend.Asset
+ project: cloudService.Asset
openIde: () => void
}
/** An interactive button displaying the status of a project. */
function ProjectActionButton(props: ProjectActionButtonProps) {
const { project, openIde } = props
- const { accessToken } = auth.useFullUserSession()
- const logger = loggerProvider.useLogger()
- const backendService = backend.createBackend(accessToken, logger)
+ const { backend } = backendProvider.useBackend()
- const [state, setState] = react.useState(backend.ProjectState.created)
- const [checkStatusInterval, setCheckStatusInterval] = react.useState(null)
+ const [state, setState] = react.useState(cloudService.ProjectState.created)
+ const [isCheckingStatus, setIsCheckingStatus] = react.useState(false)
const [spinnerState, setSpinnerState] = react.useState(SpinnerState.done)
+ react.useEffect(() => {
+ async function checkProjectStatus() {
+ const response = await backend.getProjectDetails(project.id)
+
+ setState(response.state.type)
+
+ if (response.state.type === cloudService.ProjectState.opened) {
+ setSpinnerState(SpinnerState.done)
+ setIsCheckingStatus(false)
+ }
+ }
+ if (!isCheckingStatus) {
+ return
+ } else {
+ const handle = window.setInterval(
+ () => void checkProjectStatus(),
+ CHECK_STATUS_INTERVAL
+ )
+ return () => {
+ clearInterval(handle)
+ }
+ }
+ }, [isCheckingStatus])
+
react.useEffect(() => {
void (async () => {
- const projectDetails = await backendService.getProjectDetails(project.id)
+ const projectDetails = await backend.getProjectDetails(project.id)
setState(projectDetails.state.type)
+ if (projectDetails.state.type === cloudService.ProjectState.openInProgress) {
+ setSpinnerState(SpinnerState.initial)
+ setIsCheckingStatus(true)
+ }
})()
}, [])
function closeProject() {
- setState(backend.ProjectState.closed)
- void backendService.closeProject(project.id)
-
- reactDom.unstable_batchedUpdates(() => {
- setCheckStatusInterval(null)
- if (checkStatusInterval != null) {
- clearInterval(checkStatusInterval)
- }
- })
+ setState(cloudService.ProjectState.closed)
+ window.tryStopProject()
+ void backend.closeProject(project.id)
+ setIsCheckingStatus(false)
}
function openProject() {
- setState(backend.ProjectState.openInProgress)
+ setState(cloudService.ProjectState.openInProgress)
setSpinnerState(SpinnerState.initial)
// The `setTimeout` is required so that the completion percentage goes from
// the `initial` fraction to the `loading` fraction,
@@ -118,41 +98,27 @@ function ProjectActionButton(props: ProjectActionButtonProps) {
setTimeout(() => {
setSpinnerState(SpinnerState.loading)
}, 0)
-
- void backendService.openProject(project.id)
-
- const checkProjectStatus = async () => {
- const response = await backendService.getProjectDetails(project.id)
-
- setState(response.state.type)
-
- if (response.state.type === backend.ProjectState.opened) {
- setCheckStatusInterval(null)
- if (checkStatusInterval != null) {
- clearInterval(checkStatusInterval)
- }
- setSpinnerState(SpinnerState.done)
- }
- }
-
- reactDom.unstable_batchedUpdates(() => {
- setCheckStatusInterval(
- window.setInterval(() => void checkProjectStatus(), STATUS_CHECK_INTERVAL)
- )
- })
+ void backend.openProject(project.id)
+ setIsCheckingStatus(true)
}
switch (state) {
- case backend.ProjectState.created:
- case backend.ProjectState.new:
- case backend.ProjectState.closed:
+ case cloudService.ProjectState.created:
+ case cloudService.ProjectState.new:
+ case cloudService.ProjectState.closed:
return
- case backend.ProjectState.openInProgress:
- return
- case backend.ProjectState.opened:
+ case cloudService.ProjectState.openInProgress:
+ return (
+
+ )
+ case cloudService.ProjectState.opened:
return (
<>
-
+
)
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/projectCreateForm.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/projectCreateForm.tsx
index 12b6a0ee486b..68dd4bf13f93 100644
--- a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/projectCreateForm.tsx
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/projectCreateForm.tsx
@@ -2,14 +2,14 @@
import * as react from 'react'
import toast from 'react-hot-toast'
-import * as backendModule from '../service'
+import * as cloudService from '../cloudService'
import * as error from '../../error'
import * as modalProvider from '../../providers/modal'
import CreateForm, * as createForm from './createForm'
export interface ProjectCreateFormProps extends createForm.CreateFormPassthroughProps {
- backend: backendModule.Backend
- directoryId: backendModule.DirectoryId
+ backend: cloudService.Backend
+ directoryId: cloudService.DirectoryId
onSuccess: () => void
}
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/secretCreateForm.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/secretCreateForm.tsx
index d6994a085a01..c77ee7d32b21 100644
--- a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/secretCreateForm.tsx
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/secretCreateForm.tsx
@@ -2,14 +2,14 @@
import * as react from 'react'
import toast from 'react-hot-toast'
-import * as backendModule from '../service'
+import * as cloudService from '../cloudService'
import * as error from '../../error'
import * as modalProvider from '../../providers/modal'
import CreateForm, * as createForm from './createForm'
export interface SecretCreateFormProps extends createForm.CreateFormPassthroughProps {
- backend: backendModule.Backend
- directoryId: backendModule.DirectoryId
+ backend: cloudService.Backend
+ directoryId: cloudService.DirectoryId
onSuccess: () => void
}
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/templates.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/templates.tsx
index d34a67373f3c..0bdfca9c6dfe 100644
--- a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/templates.tsx
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/templates.tsx
@@ -1,18 +1,7 @@
/** @file Renders the list of templates from which a project can be created. */
+import * as platformModule from '../../platform'
import * as svg from '../../components/svg'
-// =================
-// === Constants ===
-// =================
-
-/**
- * Dash border spacing is not supported by native CSS.
- * Therefore, use a background image to create the border.
- * It is essentially an SVG image that was generated by the website.
- * @see {@link https://kovart.github.io/dashed-border-generator}
- */
-const BORDER = `url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='16' ry='16' stroke='%233e515f' stroke-width='4' stroke-dasharray='15%2c 15' stroke-dashoffset='0' stroke-linecap='butt'/%3e%3c/svg%3e")`
-
// =================
// === Templates ===
// =================
@@ -22,37 +11,70 @@ interface Template {
title: string
description: string
id: string
+ background: string
}
-/** All templates for creating projects that have contents. */
-const TEMPLATES: Template[] = [
+/** The full list of templates available to cloud projects. */
+const CLOUD_TEMPLATES: Template[] = [
{
title: 'Colorado COVID',
id: 'Colorado_COVID',
description: 'Learn to glue multiple spreadsheets to analyses all your data at once.',
+ background: '#6b7280',
},
{
title: 'KMeans',
id: 'Kmeans',
description: 'Learn where to open a coffee shop to maximize your income.',
+ background: '#6b7280',
},
{
title: 'NASDAQ Returns',
id: 'NASDAQ_Returns',
description: 'Learn how to clean your data to prepare it for advanced analysis.',
+ background: '#6b7280',
},
{
title: 'Restaurants',
id: 'Orders',
description: 'Learn how to clean your data to prepare it for advanced analysis.',
+ background: '#6b7280',
},
{
title: 'Github Stars',
id: 'Stargazers',
description: 'Learn how to clean your data to prepare it for advanced analysis.',
+ background: '#6b7280',
+ },
+]
+
+/** The full list of templates available to local projects. */
+const DESKTOP_TEMPLATES: Template[] = [
+ {
+ title: 'Combine spreadsheets',
+ id: 'Orders',
+ description: 'Glue multiple spreadsheets together to analyse all your data at once.',
+ background: 'url("/spreadsheets.png") 50% 20% / 80% no-repeat, #479366',
+ },
+ {
+ title: 'Geospatial analysis',
+ id: 'Restaurants',
+ description: 'Learn where to open a coffee shop to maximize your income.',
+ background: 'url("/geo.png") center / cover',
+ },
+ {
+ title: 'Analyze GitHub stars',
+ id: 'Stargazers',
+ description: "Find out which of Enso's repositories are most popular over time.",
+ background: 'url("/visualize.png") center / cover',
},
]
+const TEMPLATES: Record = {
+ [platformModule.Platform.cloud]: CLOUD_TEMPLATES,
+ [platformModule.Platform.desktop]: DESKTOP_TEMPLATES,
+}
+
// =======================
// === TemplatesRender ===
// =======================
@@ -95,7 +117,12 @@ function TemplatesRender(props: TemplatesRenderProps) {
onTemplateClick(template.id)
}}
>
-
+
{template.title}
@@ -115,16 +142,20 @@ function TemplatesRender(props: TemplatesRenderProps) {
/** The `TemplatesRender`'s container. */
interface TemplatesProps {
- onTemplateClick: (name: string | null) => void
+ backendPlatform: platformModule.Platform
+ onTemplateClick: (name?: string | null) => void
}
function Templates(props: TemplatesProps) {
- const { onTemplateClick } = props
+ const { backendPlatform, onTemplateClick } = props
return (
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/topBar.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/topBar.tsx
index b4adfdebf138..133d8d151417 100644
--- a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/topBar.tsx
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/topBar.tsx
@@ -1,8 +1,10 @@
/** @file The top-bar of dashboard. */
import * as dashboard from './dashboard'
-import * as modalProvider from '../../providers/modal'
+import * as platformModule from '../../platform'
import * as svg from '../../components/svg'
+import * as modalProvider from '../../providers/modal'
+
import UserMenu from './userMenu'
// ==============
@@ -10,9 +12,12 @@ import UserMenu from './userMenu'
// ==============
interface TopBarProps {
+ platform: platformModule.Platform
projectName: string | null
tab: dashboard.Tab
toggleTab: () => void
+ backendPlatform: platformModule.Platform
+ setBackendPlatform: (backendPlatform: platformModule.Platform) => void
query: string
setQuery: (value: string) => void
}
@@ -22,12 +27,49 @@ interface TopBarProps {
* because `searchVal` may change parent component's project list.
*/
function TopBar(props: TopBarProps) {
- const { projectName, tab, toggleTab, query, setQuery } = props
+ const {
+ platform,
+ projectName,
+ tab,
+ toggleTab,
+ backendPlatform,
+ setBackendPlatform,
+ query,
+ setQuery,
+ } = props
const { setModal } = modalProvider.useSetModal()
return (
+ {platform === platformModule.Platform.desktop && (
+
+
+
+
+ )}
void
}
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/userMenu.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/userMenu.tsx
index 3cc1dfbf42e5..61b205bc9401 100644
--- a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/userMenu.tsx
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/userMenu.tsx
@@ -35,6 +35,7 @@ function UserMenuItem(props: react.PropsWithChildren
) {
function UserMenu() {
const { signOut } = auth.useAuth()
const { accessToken, organization } = auth.useFullUserSession()
+
const { setModal } = modalProvider.useSetModal()
const goToProfile = () => {
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/localService.ts b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/localService.ts
new file mode 100644
index 000000000000..8a399353be51
--- /dev/null
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/localService.ts
@@ -0,0 +1,150 @@
+/** @file Module containing the API client for the local backend API.
+ *
+ * Each exported function in the {@link Backend} in this module corresponds to an API endpoint. The
+ * functions are asynchronous and return a `Promise` that resolves to the response from the API. */
+import * as cloudService from './cloudService'
+import * as newtype from '../newtype'
+import * as projectManager from './projectManager'
+
+// ========================
+// === Helper functions ===
+// ========================
+
+function ipWithSocketToAddress(ipWithSocket: projectManager.IpWithSocket) {
+ return newtype.asNewtype(`ws://${ipWithSocket.host}:${ipWithSocket.port}`)
+}
+
+// ===============
+// === Backend ===
+// ===============
+
+interface CurrentlyOpenProjectInfo {
+ id: projectManager.ProjectId
+ project: projectManager.OpenProject
+}
+
+export class Backend implements Partial {
+ private readonly projectManager = projectManager.ProjectManager.default
+ private currentlyOpenProject: CurrentlyOpenProjectInfo | null = null
+
+ async listDirectory(): Promise {
+ const result = await this.projectManager.listProjects({})
+ return result.projects.map(project => ({
+ type: cloudService.AssetType.project,
+ title: project.name,
+ id: project.id,
+ parentId: '',
+ permissions: [],
+ }))
+ }
+
+ async listProjects(): Promise {
+ const result = await this.projectManager.listProjects({})
+ return result.projects.map(project => ({
+ name: project.name,
+ organizationId: '',
+ projectId: project.id,
+ packageName: project.name,
+ state: {
+ type: cloudService.ProjectState.created,
+ },
+ jsonAddress: null,
+ binaryAddress: null,
+ }))
+ }
+
+ async createProject(
+ body: cloudService.CreateProjectRequestBody
+ ): Promise {
+ const project = await this.projectManager.createProject({
+ name: newtype.asNewtype(body.projectName),
+ projectTemplate: body.projectTemplateName ?? '',
+ missingComponentAction: projectManager.MissingComponentAction.install,
+ })
+ return {
+ name: body.projectName,
+ organizationId: '',
+ projectId: project.projectId,
+ packageName: body.projectName,
+ state: {
+ type: cloudService.ProjectState.created,
+ },
+ }
+ }
+
+ async closeProject(projectId: cloudService.ProjectId): Promise {
+ await this.projectManager.closeProject({ projectId })
+ this.currentlyOpenProject = null
+ }
+
+ async getProjectDetails(projectId: cloudService.ProjectId): Promise {
+ if (projectId !== this.currentlyOpenProject?.id) {
+ const result = await this.projectManager.listProjects({})
+ const project = result.projects.find(listedProject => listedProject.id === projectId)
+ const engineVersion = project?.engineVersion
+ if (project == null) {
+ throw new Error(`The project ID '${projectId}' is invalid.`)
+ } else if (engineVersion == null) {
+ throw new Error(`The project '${projectId}' does not have an engine version.`)
+ } else {
+ return Promise.resolve({
+ name: project.name,
+ engineVersion: {
+ lifecycle: cloudService.VersionLifecycle.stable,
+ value: engineVersion,
+ },
+ ideVersion: {
+ lifecycle: cloudService.VersionLifecycle.stable,
+ value: engineVersion,
+ },
+ jsonAddress: null,
+ binaryAddress: null,
+ organizationId: '',
+ packageName: project.name,
+ projectId,
+ state: {
+ type: cloudService.ProjectState.closed,
+ },
+ })
+ }
+ } else {
+ const project = this.currentlyOpenProject.project
+ return Promise.resolve({
+ name: project.projectName,
+ engineVersion: {
+ lifecycle: cloudService.VersionLifecycle.stable,
+ value: project.engineVersion,
+ },
+ ideVersion: {
+ lifecycle: cloudService.VersionLifecycle.stable,
+ value: project.engineVersion,
+ },
+ jsonAddress: ipWithSocketToAddress(project.languageServerJsonAddress),
+ binaryAddress: ipWithSocketToAddress(project.languageServerBinaryAddress),
+ organizationId: '',
+ packageName: project.projectName,
+ projectId,
+ state: {
+ type: cloudService.ProjectState.opened,
+ },
+ })
+ }
+ }
+
+ async openProject(projectId: cloudService.ProjectId): Promise {
+ const project = await this.projectManager.openProject({
+ projectId,
+ missingComponentAction: projectManager.MissingComponentAction.install,
+ })
+ this.currentlyOpenProject = { id: projectId, project }
+ }
+}
+
+// =====================
+// === createBackend ===
+// =====================
+
+/** Shorthand method for creating a new instance of the backend API. */
+export function createBackend(): Backend {
+ return new Backend()
+}
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/projectManager.ts b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/projectManager.ts
new file mode 100644
index 000000000000..c507c6a39916
--- /dev/null
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/projectManager.ts
@@ -0,0 +1,227 @@
+/** @file This module defines the Project Manager endpoint. */
+import * as newtype from '../newtype'
+
+// =================
+// === Constants ===
+// =================
+
+const PROJECT_MANAGER_ENDPOINT = 'ws://127.0.0.1:30535'
+/** Duration before the {@link ProjectManager} tries to create a WebSocket again. */
+const RETRY_INTERVAL = 1000
+/** Duration after which the {@link ProjectManager} stops re-trying to create a WebSocket. */
+const STOP_TRYING_AFTER = 10000
+
+// =============
+// === Types ===
+// =============
+
+export enum MissingComponentAction {
+ fail = 'Fail',
+ install = 'Install',
+ forceInstallBroken = 'ForceInstallBroken',
+}
+
+interface JSONRPCError {
+ code: number
+ message: string
+ data?: unknown
+}
+
+interface JSONRPCBaseResponse {
+ jsonrpc: '2.0'
+ id: number
+}
+
+interface JSONRPCSuccessResponse extends JSONRPCBaseResponse {
+ result: T
+}
+
+interface JSONRPCErrorResponse extends JSONRPCBaseResponse {
+ error: JSONRPCError
+}
+
+type JSONRPCResponse = JSONRPCErrorResponse | JSONRPCSuccessResponse
+
+// This intentionally has the same brand as in the cloud backend API.
+export type ProjectId = newtype.Newtype
+export type ProjectName = newtype.Newtype
+export type UTCDateTime = newtype.Newtype
+
+export interface ProjectMetadata {
+ name: ProjectName
+ namespace: string
+ id: ProjectId
+ engineVersion: string | null
+ lastOpened: UTCDateTime | null
+}
+
+export interface IpWithSocket {
+ host: string
+ port: number
+}
+
+export interface ProjectList {
+ projects: ProjectMetadata[]
+}
+
+export interface CreateProject {
+ projectId: ProjectId
+}
+
+export interface OpenProject {
+ engineVersion: string
+ languageServerJsonAddress: IpWithSocket
+ languageServerBinaryAddress: IpWithSocket
+ projectName: ProjectName
+ projectNamespace: string
+}
+
+// ================================
+// === Parameters for endpoints ===
+// ================================
+
+export interface OpenProjectParams {
+ projectId: ProjectId
+ missingComponentAction: MissingComponentAction
+}
+
+export interface CloseProjectParams {
+ projectId: ProjectId
+}
+
+export interface ListProjectsParams {
+ numberOfProjects?: number
+}
+
+export interface CreateProjectParams {
+ name: ProjectName
+ projectTemplate?: string
+ version?: string
+ missingComponentAction?: MissingComponentAction
+}
+
+export interface RenameProjectParams {
+ projectId: ProjectId
+ name: ProjectName
+}
+
+export interface DeleteProjectParams {
+ projectId: ProjectId
+}
+
+export interface ListSamplesParams {
+ projectId: ProjectId
+}
+
+// =======================
+// === Project Manager ===
+// =======================
+
+/** A WebSocket endpoint to the project manager. */
+export class ProjectManager {
+ static default = new ProjectManager(PROJECT_MANAGER_ENDPOINT)
+ protected id = 0
+ protected resolvers = new Map void>()
+ protected rejecters = new Map void>()
+ protected socketPromise: Promise
+
+ constructor(protected readonly connectionUrl: string) {
+ const createSocket = () => {
+ this.resolvers = new Map()
+ const oldRejecters = this.rejecters
+ this.rejecters = new Map()
+ for (const reject of oldRejecters.values()) {
+ reject()
+ }
+ this.socketPromise = new Promise((resolve, reject) => {
+ const handle = setInterval(() => {
+ try {
+ const socket = new WebSocket(this.connectionUrl)
+ clearInterval(handle)
+ socket.onmessage = event => {
+ // There is no way to avoid this as `JSON.parse` returns `any`.
+ // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-argument
+ const message: JSONRPCResponse = JSON.parse(event.data)
+ if ('result' in message) {
+ this.resolvers.get(message.id)?.(message.result)
+ } else {
+ this.rejecters.get(message.id)?.(message.error)
+ }
+ }
+ socket.onerror = createSocket
+ socket.onclose = createSocket
+ resolve(socket)
+ } catch {
+ // Ignored; the `setInterval` will retry again eventually.
+ }
+ }, RETRY_INTERVAL)
+ setTimeout(() => {
+ clearInterval(handle)
+ reject()
+ }, STOP_TRYING_AFTER)
+ })
+ return this.socketPromise
+ }
+ this.socketPromise = createSocket()
+ }
+
+ /** Open an existing project. */
+ public async openProject(params: OpenProjectParams): Promise {
+ return this.sendRequest('project/open', params)
+ }
+
+ /** Close an open project. */
+ public async closeProject(params: CloseProjectParams): Promise {
+ return this.sendRequest('project/close', params)
+ }
+
+ /** Get the projects list, sorted by open time. */
+ public async listProjects(params: ListProjectsParams): Promise {
+ return this.sendRequest('project/list', params)
+ }
+
+ /** Create a new project. */
+ public async createProject(params: CreateProjectParams): Promise {
+ return this.sendRequest('project/create', {
+ missingComponentAction: MissingComponentAction.install,
+ ...params,
+ })
+ }
+
+ /** Rename a project. */
+ public async renameProject(params: RenameProjectParams): Promise {
+ return this.sendRequest('project/rename', params)
+ }
+
+ /** Delete a project. */
+ public async deleteProject(params: DeleteProjectParams): Promise {
+ return this.sendRequest('project/delete', params)
+ }
+
+ /** Get the list of sample projects that are available to the user. */
+ public async listSamples(params: ListSamplesParams): Promise {
+ return this.sendRequest('project/listSample', params)
+ }
+
+ private cleanup(id: number) {
+ this.resolvers.delete(id)
+ this.rejecters.delete(id)
+ }
+
+ /** Send a JSON-RPC request to the project manager. */
+ private async sendRequest(method: string, params: unknown): Promise {
+ const socket = await this.socketPromise
+ const id = this.id++
+ socket.send(JSON.stringify({ jsonrpc: '2.0', id, method, params }))
+ return new Promise((resolve, reject) => {
+ this.resolvers.set(id, value => {
+ this.cleanup(id)
+ resolve(value)
+ })
+ this.rejecters.set(id, value => {
+ this.cleanup(id)
+ reject(value)
+ })
+ })
+ }
+}
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/index.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/index.tsx
index ae802a6a5023..3ceecf34906b 100644
--- a/app/ide-desktop/lib/dashboard/src/authentication/src/index.tsx
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/index.tsx
@@ -40,17 +40,13 @@ export function run(props: app.AppProps) {
logger.log('Starting authentication/dashboard UI.')
/** The root element that the authentication/dashboard app will be rendered into. */
const root = document.getElementById(ROOT_ELEMENT_ID)
+ const ideElement = document.getElementById(IDE_ELEMENT_ID)
if (root == null) {
logger.error(`Could not find root element with ID '${ROOT_ELEMENT_ID}'.`)
+ } else if (ideElement == null) {
+ logger.error(`Could not find IDE element with ID '${IDE_ELEMENT_ID}'.`)
} else {
- // FIXME: https://github.com/enso-org/cloud-v2/issues/386
- // Temporary workaround on hiding the Enso root element preventing it from
- // rendering next to authentication templates. We are uncovering this once the
- // authentication library sets the user session.
- const ide = document.getElementById(IDE_ELEMENT_ID)
- if (ide != null) {
- ide.style.display = 'none'
- }
+ ideElement.hidden = true
reactDOM.createRoot(root).render()
}
}
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/providers/backend.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/providers/backend.tsx
new file mode 100644
index 000000000000..e497503f7aa3
--- /dev/null
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/providers/backend.tsx
@@ -0,0 +1,43 @@
+/** @file */
+import * as react from 'react'
+
+import * as cloudService from '../dashboard/cloudService'
+import * as localService from '../dashboard/localService'
+
+export interface BackendContextType {
+ backend: cloudService.Backend | localService.Backend
+ setBackend: (backend: cloudService.Backend | localService.Backend) => void
+}
+
+// @ts-expect-error The default value will never be exposed
+// as `backend` will always be accessed using `useBackend`.
+const BackendContext = react.createContext(null)
+
+// React components should always have a sibling `Props` interface
+// if they accept props.
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface BackendProviderProps extends React.PropsWithChildren