+ {children}
+
+ )
+}
+
+export default ContextMenu
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/contextMenuEntry.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/contextMenuEntry.tsx
new file mode 100644
index 000000000000..26fdc3695c00
--- /dev/null
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/contextMenuEntry.tsx
@@ -0,0 +1,29 @@
+/** @file An entry in a context menu. */
+
+import * as react from 'react'
+
+export interface ContextMenuEntryProps {
+ disabled?: boolean
+ onClick: (event: react.MouseEvent
+
{
+ if (event.ctrlKey && !event.altKey && !event.shiftKey && !event.metaKey) {
+ setModal(() => (
+ Promise.resolve()}
+ onSuccess={doRefresh}
+ />
+ ))
+ }
+ }}
+ >
{
@@ -252,43 +349,185 @@ function Dashboard(props: DashboardProps) {
[backend.AssetType.directory]: directoryAsset => (
{
+ if (event.ctrlKey && !event.altKey && !event.shiftKey && !event.metaKey) {
+ setModal(() => (
+ Promise.resolve()}
+ onSuccess={doRefresh}
+ />
+ ))
+ }
+ }}
onDoubleClick={() => {
- setDirectoryId(directoryAsset.id)
- setDirectoryStack([...directoryStack, directoryAsset])
+ enterDirectory(directoryAsset)
}}
>
{svg.DIRECTORY_ICON} {directoryAsset.title}
),
[backend.AssetType.secret]: secret => (
-
+
{
+ if (event.ctrlKey && !event.altKey && !event.shiftKey && !event.metaKey) {
+ setModal(() => (
+ Promise.resolve()}
+ onSuccess={doRefresh}
+ />
+ ))
+ }
+ }}
+ >
{svg.SECRET_ICON} {secret.title}
),
[backend.AssetType.file]: file => (
-
- {fileIcon(fileExtension(file.title))} {file.title}
+ (column: Column, assetType: Type) => {
+ /** React components for every column except for the name column. */
+ const columnRenderer: Record<
+ Exclude,
+ (asset: backend.Asset) => JSX.Element
+ > = {
+ [Column.lastModified]: () => <>,
+ [Column.sharedWith]: asset => (
+ <>
+ {(asset.permissions ?? []).map(user => (
+
+ 
+
+ ))}
+
+ ),
+ [Column.docs]: () => <>,
+ [Column.labels]: () => {
+ // This is not a React component even though it contains JSX.
+ // eslint-disable-next-line no-restricted-syntax
+ function onContextMenu(event: react.MouseEvent) {
+ event.preventDefault()
+ event.stopPropagation()
+ setModal(() => (
+
+ {
+ // TODO: Wait for backend implementation.
+ }}
+ >
+ Rename label
+
+
+ ))
+ }
+ return <>
+ },
+ [Column.dataAccess]: () => <>,
+ [Column.usagePlan]: () => <>,
+ [Column.engine]: () => <>,
+ [Column.ide]: () => <>,
+ }
+
+ function renderer(column: Column, assetType: Type) {
return column === Column.name
? // This is type-safe only if we pass enum literals as `assetType`.
+
// eslint-disable-next-line no-restricted-syntax
(nameRenderers[assetType] as (asset: backend.Asset) => JSX.Element)
- : COLUMN_RENDERER[column]
+ : columnRenderer[column]
+ }
+
+ /** Heading element for every column. */
+ function ColumnHeading(column: Column, assetType: backend.AssetType) {
+ return column === Column.name ? (
+ => {
+ 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))
+ setProjectAssets(newProjectAssets)
+ setDirectoryAssets(newDirectoryAssets)
+ setSecretAssets(newSecretAssets)
+ setFileAssets(newFileAssets)
+ }
+
+ hooks.useAsyncEffect(
+ null,
+ async signal => {
let assets: backend.Asset[]
switch (platform) {
@@ -308,22 +547,53 @@ function Dashboard(props: DashboardProps) {
title: localProject.name,
id: localProject.id,
parentId: '',
- permissions: [],
+ permissions: null,
})
}
break
}
}
- reactDom.unstable_batchedUpdates(() => {
- setProjectAssets(assets.filter(backend.assetIsType(backend.AssetType.project)))
- setDirectoryAssets(assets.filter(backend.assetIsType(backend.AssetType.directory)))
- setSecretAssets(assets.filter(backend.assetIsType(backend.AssetType.secret)))
- setFileAssets(assets.filter(backend.assetIsType(backend.AssetType.file)))
- })
- })()
- }, [accessToken, directoryId])
-
- const getNewProjectName = (templateName?: string | null): string => {
+ if (!signal.aborted) {
+ setAssets(assets)
+ }
+ },
+ [accessToken, directoryId, refresh]
+ )
+
+ react.useEffect(() => {
+ function onBlur() {
+ setIsFileBeingDragged(false)
+ }
+
+ window.addEventListener('blur', onBlur)
+
+ return () => {
+ window.removeEventListener('blur', onBlur)
+ }
+ }, [])
+
+ function handleEscapeKey(event: react.KeyboardEvent) {
+ if (
+ event.key === 'Escape' &&
+ !event.ctrlKey &&
+ !event.shiftKey &&
+ !event.altKey &&
+ !event.metaKey
+ ) {
+ if (modal) {
+ event.preventDefault()
+ unsetModal()
+ }
+ }
+ }
+
+ function openDropZone(event: react.DragEvent) {
+ if (event.dataTransfer.types.includes('Files')) {
+ setIsFileBeingDragged(true)
+ }
+ }
+
+ function getNewProjectName(templateName?: string | null): string {
const prefix = `${templateName ?? 'New_Project'}_`
const projectNameTemplate = new RegExp(`^${prefix}(?\\d+)$`)
let highestProjectIndex = 0
@@ -336,19 +606,22 @@ function Dashboard(props: DashboardProps) {
return `${prefix}${highestProjectIndex + 1}`
}
- const handleCreateProject = async (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(oldProjectAssets => [
- ...oldProjectAssets,
+ setProjectAssets([
+ ...projectAssets,
{
type: backend.AssetType.project,
title: projectAsset.name,
@@ -365,8 +638,8 @@ function Dashboard(props: DashboardProps) {
...(templateName ? { projectTemplate: templateName } : {}),
})
const newProject = result.result
- setProjectAssets(oldProjectAssets => [
- ...oldProjectAssets,
+ setProjectAssets([
+ ...projectAssets,
{
type: backend.AssetType.project,
title: projectName,
@@ -381,8 +654,15 @@ function Dashboard(props: DashboardProps) {
}
return (
-
{
+ if (event.ctrlKey && !event.altKey && !event.shiftKey && !event.metaKey) {
+ setModal(() => (
+ Promise.resolve()}
+ onSuccess={doRefresh}
+ />
+ ))
+ }
+ }}
+ >
+ {fileInfo.fileIcon(fileInfo.fileExtension(file.title))}{' '}
+ {file.title}
),
}
- const renderer =
+
+ {ASSET_TYPE_NAME[assetType]}
+
+
+ ) : (
+ <>{COLUMN_NAME[column]}
+ )
}
// The purpose of this effect is to enable search action.
react.useEffect(() => {
- return () => {
- // TODO
- }
- }, [searchVal])
+ setVisibleProjectAssets(projectAssets.filter(asset => asset.title.includes(query)))
+ setVisibleDirectoryAssets(directoryAssets.filter(asset => asset.title.includes(query)))
+ setVisibleSecretAssets(secretAssets.filter(asset => asset.title.includes(query)))
+ setVisibleFileAssets(fileAssets.filter(asset => asset.title.includes(query)))
+ }, [query])
- react.useEffect(() => {
- void (async (): Promise
-
+
+
-
+
+
-
- >
+ items={visibleDirectoryAssets}
+ getKey={dir => dir.id}
+ placeholder={
+
+ This directory does not contain any subdirectories
+ {query ? ' matching your query' : ''}.
+
+ }
+ columns={COLUMNS_FOR[columnDisplayMode].map(column => ({
+ id: column,
+ heading: ColumnHeading(column, backend.AssetType.directory),
+ render: renderer(column, backend.AssetType.directory),
+ }))}
+ onClick={directoryAsset => {
+ setSelectedAssets([directoryAsset])
+ }}
+ onContextMenu={(_directory, event) => {
+ event.preventDefault()
+ event.stopPropagation()
+ setModal(() => >
+ items={visibleSecretAssets}
+ getKey={secret => secret.id}
+ placeholder={
+
+ This directory does not contain any secrets
+ {query ? ' matching your query' : ''}.
+
+ }
+ columns={COLUMNS_FOR[columnDisplayMode].map(column => ({
+ id: column,
+ heading: ColumnHeading(column, backend.AssetType.secret),
+ render: renderer(column, backend.AssetType.secret),
+ }))}
+ onClick={secret => {
+ setSelectedAssets([secret])
+ }}
+ onContextMenu={(secret, event) => {
+ event.preventDefault()
+ event.stopPropagation()
+ // This is not a React component even though it contains JSX.
+ // eslint-disable-next-line no-restricted-syntax
+ function doDelete() {
+ setModal(() => (
+
+ backendService.deleteSecret(secret.id)
+ }
+ onSuccess={doRefresh}
+ />
+ ))
+ }
+ setModal(() => (
+
+
+ Delete
+
+
+ ))
+ }}
+ />
+ >
+ items={visibleFileAssets}
+ getKey={file => file.id}
+ placeholder={
+
+ This directory does not contain any files
+ {query ? ' matching your query' : ''}.
+
+ }
+ columns={COLUMNS_FOR[columnDisplayMode].map(column => ({
+ id: column,
+ heading: ColumnHeading(column, backend.AssetType.file),
+ render: renderer(column, backend.AssetType.file),
+ }))}
+ onClick={file => {
+ setSelectedAssets([file])
+ }}
+ onContextMenu={(file, event) => {
+ event.preventDefault()
+ event.stopPropagation()
+ function doCopy() {
+ /** TODO: Call endpoint for copying file. */
+ }
+ function doCut() {
+ /** TODO: Call endpoint for downloading file. */
+ }
+ // This is not a React component even though it contains JSX.
+ // eslint-disable-next-line no-restricted-syntax
+ function doDelete() {
+ setModal(() => (
+ backendService.deleteFile(file.id)}
+ onSuccess={doRefresh}
+ />
+ ))
+ }
+ function doDownload() {
+ /** TODO: Call endpoint for downloading file. */
+ }
+ setModal(() => (
+
+
+ Copy
+
+
+ Cut
+
+
+ Delete
+
+
+ Download
+
+
+ ))
+ }}
+ />
+
+ )}
+
+
+ {isFileBeingDragged ? (
+ (null)
+
+ async function onSubmit(event: react.FormEvent) {
+ event.preventDefault()
+ if (name == null) {
+ toast.error('Please provide a directory name.')
+ } else {
+ unsetModal()
+ await toast
+ .promise(
+ backend.createDirectory({
+ parentId: directoryId,
+ title: name,
+ }),
+ {
+ loading: 'Creating directory...',
+ success: 'Sucessfully created directory.',
+ error: error.unsafeIntoErrorMessage,
+ }
+ )
+ .then(onSuccess)
+ }
+ }
+
+ return (
+
+
+ )
+}
+
+export default DirectoryCreateForm
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
new file mode 100644
index 000000000000..20ae40b26c9b
--- /dev/null
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/fileCreateForm.tsx
@@ -0,0 +1,90 @@
+/** @file Form to create a project. */
+import * as react from 'react'
+import toast from 'react-hot-toast'
+
+import * as backendModule from '../service'
+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
+ onSuccess: () => void
+}
+
+function FileCreateForm(props: FileCreateFormProps) {
+ const { backend, directoryId, onSuccess, ...passThrough } = props
+ const { unsetModal } = modalProvider.useSetModal()
+ const [name, setName] = react.useState(null)
+ const [file, setFile] = react.useState(null)
+
+ async function onSubmit(event: react.FormEvent) {
+ event.preventDefault()
+ if (file == null) {
+ // TODO[sb]: Uploading a file may be a mistake when creating a new file.
+ toast.error('Please select a file to upload.')
+ } else {
+ unsetModal()
+ await toast
+ .promise(
+ backend.uploadFile(
+ {
+ parentDirectoryId: directoryId,
+ fileName: name ?? file.name,
+ },
+ file
+ ),
+ {
+ loading: 'Uploading file...',
+ success: 'Sucessfully uploaded file.',
+ error: error.unsafeIntoErrorMessage,
+ }
+ )
+ .then(onSuccess)
+ }
+ }
+
+ return (
+
+
+ )
+}
+
+export default FileCreateForm
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 a149bf25b7bd..d453f5b67fb7 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
@@ -7,6 +7,8 @@ import * as service from '../service'
// === Constants ===
// =================
+/** The `id` attribute of the element that the IDE will be rendered into. */
+const IDE_ELEMENT_ID = 'root'
const IDE_CDN_URL = 'https://ensocdn.s3.us-west-1.amazonaws.com/ide'
// =================
@@ -19,7 +21,9 @@ interface Props {
}
/** Container that launches the IDE. */
-function Ide({ project, backendService }: Props) {
+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 => {
@@ -28,6 +32,13 @@ function Ide({ project, backendService }: Props) {
return [promise, resolve]
})
+ react.useEffect(() => {
+ document.getElementById(IDE_ELEMENT_ID)?.classList.remove('hidden')
+ return () => {
+ document.getElementById(IDE_ELEMENT_ID)?.classList.add('hidden')
+ }
+ }, [])
+
react.useEffect(() => {
void (async () => {
const ideVersion = (
@@ -53,6 +64,9 @@ function Ide({ project, backendService }: Props) {
react.useEffect(() => {
void (async () => {
+ while (ideElement?.firstChild) {
+ ideElement.removeChild(ideElement.firstChild)
+ }
const ideVersion = (
await backendService.listVersions({
versionType: service.VersionType.ide,
@@ -86,7 +100,7 @@ function Ide({ project, backendService }: Props) {
})()
}, [project])
- return
+ return <>
}
export default Ide
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/label.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/label.tsx
index df1facc5da2a..d471866412fa 100644
--- a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/label.tsx
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/label.tsx
@@ -38,13 +38,16 @@ const STATUS_ICON: Record = {
export interface LabelProps {
status?: Status
+ onContextMenu?: react.MouseEventHandler
}
/** A label, which may be either user-defined, or a system warning message. */
-function Label({ status = Status.none, children }: react.PropsWithChildren) {
+function Label(props: react.PropsWithChildren) {
+ const { status = Status.none, children, onContextMenu } = props
return (
(null)
+ const [template, setTemplate] = react.useState(null)
+
+ async function onSubmit(event: react.FormEvent) {
+ event.preventDefault()
+ if (name == null) {
+ toast.error('Please provide a project name.')
+ } else {
+ unsetModal()
+ await toast
+ .promise(
+ backend.createProject({
+ parentDirectoryId: directoryId,
+ projectName: name,
+ projectTemplateName: template,
+ }),
+ {
+ loading: 'Creating project...',
+ success: 'Sucessfully created project.',
+ error: error.unsafeIntoErrorMessage,
+ }
+ )
+ .then(onSuccess)
+ }
+ }
+
+ return (
+
+
+ )
+}
+
+export default ProjectCreateForm
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/renameModal.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/renameModal.tsx
new file mode 100644
index 000000000000..41fed6f6a660
--- /dev/null
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/renameModal.tsx
@@ -0,0 +1,79 @@
+/** @file Modal for confirming delete of any type of asset. */
+import * as react from 'react'
+import toast from 'react-hot-toast'
+
+import * as modalProvider from '../../providers/modal'
+import * as svg from '../../components/svg'
+
+import Modal from './modal'
+
+export interface RenameModalProps {
+ assetType: string
+ name: string
+ doRename: (newName: string) => Promise
+ onSuccess: () => void
+}
+
+function RenameModal(props: RenameModalProps) {
+ const { assetType, name, doRename, onSuccess } = props
+ const { unsetModal } = modalProvider.useSetModal()
+ const [newName, setNewName] = react.useState(null)
+ return (
+
+
+
+ )
+}
+
+export default RenameModal
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/rows.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/rows.tsx
index d6e06a472d05..867bf6764a90 100644
--- a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/rows.tsx
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/rows.tsx
@@ -1,4 +1,5 @@
/** @file Table that projects an object into each column. */
+import * as react from 'react'
// =============
// === Types ===
@@ -7,7 +8,7 @@
/** Metadata describing how to render a column of the table. */
export interface Column {
id: string
- name: string
+ heading: JSX.Element
render: (item: T, index: number) => JSX.Element
}
@@ -16,32 +17,42 @@ export interface Column {
// =================
interface Props {
- columns: Column[]
items: T[]
getKey: (item: T) => string
placeholder: JSX.Element
+ columns: Column[]
+ onClick: (item: T, event: react.MouseEvent) => void
+ onContextMenu: (item: T, event: react.MouseEvent) => void
}
/** Table that projects an object into each column. */
-function Rows({ columns, items, getKey, placeholder }: Props) {
- const headerRow = columns.map(({ name }, index) => (
+function Rows(props: Props) {
+ const { columns, items, getKey, placeholder, onClick, onContextMenu } = props
+ const headerRow = columns.map(({ heading }, index) => (
- {name}
+ {heading}
))
const itemRows =
items.length === 0 ? (
-
+
{placeholder}
) : (
items.map((item, index) => (
{
+ onClick(item, event)
+ }}
+ onContextMenu={event => {
+ onContextMenu(item, event)
+ }}
+ className="h-10 transition duration-300 ease-in-out hover:bg-gray-100 focus:bg-gray-200"
>
{columns.map(({ id, render }) => (
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
new file mode 100644
index 000000000000..d6994a085a01
--- /dev/null
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/secretCreateForm.tsx
@@ -0,0 +1,83 @@
+/** @file Form to create a project. */
+import * as react from 'react'
+import toast from 'react-hot-toast'
+
+import * as backendModule from '../service'
+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
+ onSuccess: () => void
+}
+
+function SecretCreateForm(props: SecretCreateFormProps) {
+ const { backend, directoryId, onSuccess, ...passThrough } = props
+ const { unsetModal } = modalProvider.useSetModal()
+
+ const [name, setName] = react.useState(null)
+ const [value, setValue] = react.useState(null)
+
+ async function onSubmit(event: react.FormEvent) {
+ event.preventDefault()
+ if (!name) {
+ toast.error('Please provide a secret name.')
+ } else if (value == null) {
+ // Secret value explicitly can be empty.
+ toast.error('Please provide a secret value.')
+ } else {
+ unsetModal()
+ await toast
+ .promise(
+ backend.createSecret({
+ parentDirectoryId: directoryId,
+ secretName: name,
+ secretValue: value,
+ }),
+ {
+ loading: 'Creating secret...',
+ success: 'Sucessfully created secret.',
+ error: error.unsafeIntoErrorMessage,
+ }
+ )
+ .then(onSuccess)
+ }
+ }
+
+ return (
+
+
+ )
+}
+
+export default SecretCreateForm
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 01cb40de01dd..d34a67373f3c 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
@@ -61,7 +61,7 @@ const TEMPLATES: Template[] = [
interface TemplatesRenderProps {
// Later this data may be requested and therefore needs to be passed dynamically.
templates: Template[]
- onTemplateClick: (name?: string | null) => void
+ onTemplateClick: (name: string | null) => void
}
function TemplatesRender(props: TemplatesRenderProps) {
@@ -71,7 +71,7 @@ function TemplatesRender(props: TemplatesRenderProps) {
const CreateEmptyTemplate = (
Drive
- {/* FIXME[sb]: Remove `|| true` when UI to create directory is implemented. */}
- {/* eslint-disable-next-line no-constant-condition, @typescript-eslint/no-unnecessary-condition */}
- {directory || true ? (
+ {directory && (
<>
-
Shared with
@@ -435,11 +701,18 @@ function Dashboard(props: DashboardProps) {
+
-
-
-
-
-
-
+ {EXPERIMENTAL && (
+ <>
+
+
+
+
+
+
+
+ )}
- {project ?
+ {platform === platformModule.Platform.cloud && (
+ <>
+ {
+ setIsFileBeingDragged(false)
+ }}
+ onDragOver={event => {
+ event.preventDefault()
+ }}
+ onDrop={async event => {
+ event.preventDefault()
+ setIsFileBeingDragged(false)
+ await uploadMultipleFiles.uploadMultipleFiles(
+ backendService,
+ directoryId,
+ Array.from(event.dataTransfer.files)
+ )
+ doRefresh()
+ }}
+ >
+ Drop to upload files.
+
+ ) : null}
+ {/* This should be just `{modal}`, however TypeScript incorrectly throws an error. */}
+ {project &&
+
+ {
+ setName(event.target.value)
+ }}
+ />
+
+
+
+ {
+ setName(event.target.value)
+ }}
+ defaultValue={name ?? file?.name ?? ''}
+ />
+
+
+
+ File
+
+
+ {
+ setFile(event.target.files?.[0] ?? null)
+ }}
+ />
+
+
{STATUS_ICON[status]}
{permissionBorder}
-
)
}
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
new file mode 100644
index 000000000000..12b6a0ee486b
--- /dev/null
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/projectCreateForm.tsx
@@ -0,0 +1,82 @@
+/** @file Form to create a project. */
+import * as react from 'react'
+import toast from 'react-hot-toast'
+
+import * as backendModule from '../service'
+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
+ onSuccess: () => void
+}
+
+// FIXME[sb]: Extract shared shape to a common component.
+function ProjectCreateForm(props: ProjectCreateFormProps) {
+ const { backend, directoryId, onSuccess, ...passThrough } = props
+ const { unsetModal } = modalProvider.useSetModal()
+
+ const [name, setName] = react.useState{children}
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/permissionDisplay.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/permissionDisplay.tsx
index f1c978bbabb3..a130b81a93a6 100644
--- a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/permissionDisplay.tsx
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/permissionDisplay.tsx
@@ -92,7 +92,7 @@ function PermissionDisplay(props: react.PropsWithChildren{children}
+ {children}
+
+ {
+ setName(event.target.value)
+ }}
+ />
+
+
+ {/* FIXME[sb]: Use the array of templates in a dropdown when it becomes available. */}
+
+ {
+ setTemplate(event.target.value)
+ }}
+ />
+
+
+
+ {
+ setName(event.target.value)
+ }}
+ />
+
+
+
+ {
+ setValue(event.target.value)
+ }}
+ />
+
+