From f001d50885e1dca25a7f6e631071a292bec234ec Mon Sep 17 00:00:00 2001
From: somebody1234 <ehern.lee@gmail.com>
Date: Thu, 1 Jun 2023 22:24:40 +1000
Subject: [PATCH] Remove modal from file upload flow

Fixes part of cloud-v2/#483
---
 .../src/dashboard/components/dashboard.tsx    |  45 ++++--
 .../dashboard/components/uploadFileModal.tsx  | 135 ------------------
 2 files changed, 31 insertions(+), 149 deletions(-)
 delete mode 100644 app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/uploadFileModal.tsx

diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/dashboard.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/dashboard.tsx
index a80df57b0bd6..f24fa20ace06 100644
--- a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/dashboard.tsx
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/dashboard.tsx
@@ -1,6 +1,7 @@
 /** @file Main dashboard component, responsible for listing user's projects as well as other
  * interactive components. */
 import * as react from 'react'
+import toast from 'react-hot-toast'
 
 import * as common from 'enso-common'
 
@@ -32,7 +33,6 @@ import TopBar from './topBar'
 
 import ConfirmDeleteModal from './confirmDeleteModal'
 import RenameModal from './renameModal'
-import UploadFileModal from './uploadFileModal'
 
 import DirectoryCreateForm from './directoryCreateForm'
 import FileCreateForm from './fileCreateForm'
@@ -797,25 +797,42 @@ function Dashboard(props: DashboardProps) {
                                 </>
                             )}
                             <div className="bg-gray-100 rounded-full flex flex-row flex-nowrap px-1.5 py-1 mx-4">
-                                <button
+                                <input
+                                    type="file"
+                                    multiple
+                                    disabled={backend.type === backendModule.BackendType.local}
+                                    id="upload_file_input"
+                                    name="upload_file_input"
+                                    className="w-0 h-0"
+                                    onInput={async event => {
+                                        if (backend.type === backendModule.BackendType.local) {
+                                            // FIXME[sb]: Allow uploading `.enso-project`s
+                                            toast.error('Cannot upload files to the local backend.')
+                                        } else if (
+                                            event.currentTarget.files == null ||
+                                            event.currentTarget.files.length === 0
+                                        ) {
+                                            toast.success('No files selected to upload.')
+                                        } else {
+                                            await uploadMultipleFiles.uploadMultipleFiles(
+                                                backend,
+                                                directoryId,
+                                                Array.from(event.currentTarget.files)
+                                            )
+                                            doRefresh()
+                                        }
+                                    }}
+                                />
+                                <label
+                                    htmlFor="upload_file_input"
                                     className={`mx-1 ${
                                         backend.type === backendModule.BackendType.local
                                             ? 'opacity-50'
-                                            : ''
+                                            : 'cursor-pointer'
                                     }`}
-                                    disabled={backend.type === backendModule.BackendType.local}
-                                    onClick={event => {
-                                        event.stopPropagation()
-                                        setModal(() => (
-                                            <UploadFileModal
-                                                directoryId={directoryId}
-                                                onSuccess={doRefresh}
-                                            />
-                                        ))
-                                    }}
                                 >
                                     {svg.UPLOAD_ICON}
-                                </button>
+                                </label>
                                 <button
                                     className={`mx-1 opacity-50`}
                                     disabled={true}
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/uploadFileModal.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/uploadFileModal.tsx
deleted file mode 100644
index 1927b92e92c7..000000000000
--- a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/uploadFileModal.tsx
+++ /dev/null
@@ -1,135 +0,0 @@
-/** @file Modal dialog to upload a file. */
-import * as react from 'react'
-import toast from 'react-hot-toast'
-
-import * as backendModule from '../backend'
-import * as backendProvider from '../../providers/backend'
-import * as fileInfo from '../../fileInfo'
-import * as modalProvider from '../../providers/modal'
-import * as svg from '../../components/svg'
-
-import Modal from './modal'
-
-// =======================
-// === UploadFileModal ===
-// =======================
-
-/** Props for an {@link UploadFileModal}. */
-export interface UploadFileModalProps {
-    directoryId: backendModule.DirectoryId
-    onSuccess: () => void
-}
-
-/** A modal for uploading a file. */
-function UploadFileModal(props: UploadFileModalProps) {
-    const { directoryId, onSuccess } = props
-    const { backend } = backendProvider.useBackend()
-    const { unsetModal } = modalProvider.useSetModal()
-
-    const [name, setName] = react.useState<string | null>(null)
-    const [file, setFile] = react.useState<File | null>(null)
-
-    if (backend.type === backendModule.BackendType.local) {
-        return <></>
-    } else {
-        const onSubmit = async () => {
-            if (file == null) {
-                toast.error('Please select a file to upload.')
-            } else {
-                unsetModal()
-                const toastId = toast.loading('Uploading file...')
-                await backend.uploadFile(
-                    {
-                        parentDirectoryId: directoryId,
-                        fileName: name ?? file.name,
-                    },
-                    file
-                )
-                toast.success('Sucessfully uploaded file.', { id: toastId })
-                onSuccess()
-            }
-        }
-
-        return (
-            <Modal centered className="bg-opacity-90">
-                <form
-                    onClick={event => {
-                        event.stopPropagation()
-                    }}
-                    onSubmit={async event => {
-                        event.preventDefault()
-                        await onSubmit()
-                    }}
-                    className="relative bg-white shadow-soft rounded-lg w-96 h-72 p-2"
-                >
-                    <button
-                        type="button"
-                        className="absolute right-0 top-0 m-2"
-                        onClick={unsetModal}
-                    >
-                        {svg.CLOSE_ICON}
-                    </button>
-                    <div className="m-2">
-                        <label className="w-1/3" htmlFor="uploaded_file_name">
-                            File name
-                        </label>
-                        <input
-                            required
-                            id="uploaded_file_name"
-                            type="text"
-                            className="border-primary bg-gray-200 rounded-full w-2/3 px-2 mx-2"
-                            onChange={event => {
-                                setName(event.target.value)
-                            }}
-                            defaultValue={name ?? file?.name ?? ''}
-                        />
-                    </div>
-                    <div className="m-2">
-                        <label
-                            htmlFor="uploaded_file"
-                            className="hover:cursor-pointer inline-block text-white bg-blue-600 rounded-full px-4 py-1"
-                        >
-                            Select file
-                        </label>
-                    </div>
-                    <div className="border border-primary rounded-md m-2">
-                        <input
-                            required
-                            id="uploaded_file"
-                            type="file"
-                            className="hidden"
-                            onChange={event => {
-                                setFile(event.target.files?.[0] ?? null)
-                            }}
-                        />
-                        <div className="inline-flex flex-row flex-nowrap w-full p-2">
-                            <div className="grow">
-                                <div>{file?.name ?? 'No file selected'}</div>
-                                <div className="text-xs">
-                                    {file ? fileInfo.toReadableSize(file.size) : '\u00a0'}
-                                </div>
-                            </div>
-                            <div>{file && fileInfo.fileIcon()}</div>
-                        </div>
-                    </div>
-                    <div className="m-1">
-                        <div
-                            className="hover:cursor-pointer inline-block text-white bg-blue-600 rounded-full px-4 py-1 m-1"
-                            onClick={onSubmit}
-                        >
-                            Upload
-                        </div>
-                        <div
-                            className="hover:cursor-pointer inline-block bg-gray-200 rounded-full px-4 py-1 m-1"
-                            onClick={unsetModal}
-                        >
-                            Cancel
-                        </div>
-                    </div>
-                </form>
-            </Modal>
-        )
-    }
-}
-
-export default UploadFileModal