Proper loading states (#660)

* Removed unused multiple paths logic

* Extracted DeleteFiles dialog

* Improved loading indication

* Added resetState

* Fixed dialog spacing

* Normalized dilaog naming

* Implemented proper RenameFile

* Removed unused CopyFile/Folder

* Added secondary text to the Remove action

* Properly implemented CreateFolder

* Normalized action list

* Fixed SaveChanges

* Fixed rename primary title

* Movde LinearProgress to library

* Reverted context menu changes

client/components/Application/Dialog.tsx

@@ -1,16 +1,14 @@
 import * as store from '@client/store'
-import AddEmptyFolderDialog from './Dialogs/AddEmptyFolder'
 import CloseWithUnsavedChangesDialog from './Dialogs/CloseWithUnsavedChanges'
 import ConfigDialog from './Dialogs/Config'
-import CopyFileDialog from './Dialogs/CopyFile'
-import CopyFolderDialog from './Dialogs/CopyFolder'
-import DeleteFilesFoldersDialog from './Dialogs/DeleteFilesFolders'
-import { FileUploadDialog } from './Dialogs/FileUpload'
+import { CreateFolderDialog } from './Dialogs/CreateFolder'
+import { DeleteFileDialog } from './Dialogs/DeleteFile'
 import OpenLocationDialog from './Dialogs/OpenLocation'
 import PublishDialog from './Dialogs/Publish'
-import RenameFileDialog from './Dialogs/RenameFile'
+import { RenameFileDialog } from './Dialogs/RenameFile'
 import { SaveChangesDialog } from './Dialogs/SaveChanges'
 import UnsavedChangesDialog from './Dialogs/UnsavedChanges'
+import { UploadFileDialog } from './Dialogs/UploadFile'
 import WelcomeBannerDialog from './Dialogs/WelcomeBanner'
 
 export default function Dialog() {
@@ -25,17 +23,15 @@ export default function Dialog() {
 }
 
 const DIALOGS = {
-  addEmptyFolder: AddEmptyFolderDialog,
+  addEmptyFolder: CreateFolderDialog,
   closeWithUnsavedChanges: CloseWithUnsavedChangesDialog,
   config: ConfigDialog,
   configProject: ConfigDialog,
-  copyFile: CopyFileDialog,
-  copyFolder: CopyFolderDialog,
-  deleteFilesFolders: DeleteFilesFoldersDialog,
+  deleteFilesFolders: DeleteFileDialog,
   publish: PublishDialog,
   unsavedChanges: UnsavedChangesDialog,
   welcomeBanner: WelcomeBannerDialog,
-  fileUpload: FileUploadDialog,
+  fileUpload: UploadFileDialog,
   openLocation: OpenLocationDialog,
   renameFile: RenameFileDialog,
   saveChanges: SaveChangesDialog,

client/components/Application/Dialogs/CreateFolder/CreateFolder.tsx

@@ -0,0 +1,29 @@
+import { LinearProgress } from '@client/components/Library/LinearProgress'
+import InputDialog from '@client/components/Parts/Dialogs/Input'
+import * as appStore from '@client/store'
+import * as React from 'react'
+import * as store from './store'
+
+export function CreateFolderDialog() {
+  const folderPath = appStore.useStore(appStore.getFolderPath)
+  const dialog = appStore.useStore((state) => state.dialog)
+  const { progress } = store.useState()
+
+  React.useEffect(() => {
+    store.resetState()
+  }, [dialog])
+
+  return (
+    <InputDialog
+      open={true}
+      value={folderPath}
+      title="Create new folder"
+      label="Create"
+      placholder="Name of the new folder"
+      onCancel={store.closeDialog}
+      onConfirm={store.createFolder}
+    >
+      <LinearProgress progress={progress} />
+    </InputDialog>
+  )
+}

client/components/Application/Dialogs/CreateFolder/index.ts

@@ -0,0 +1 @@
+export { CreateFolderDialog } from './CreateFolder'

client/components/Application/Dialogs/CreateFolder/store.ts

@@ -0,0 +1,43 @@
+import { client } from '@client/client'
+import * as helpers from '@client/helpers'
+import * as appStore from '@client/store'
+import * as types from '@client/types'
+
+class State {
+  progress?: types.IProgress
+}
+
+export const { state, useState, resetState } = helpers.createState(
+  'CreateFolderDialog',
+  new State()
+)
+
+export function closeDialog() {
+  if (!state.progress?.blocking) {
+    appStore.closeDialog()
+  }
+}
+
+export async function createFolder(path: string) {
+  state.progress = {
+    type: 'creating',
+    title: 'Creating a folder',
+    blocking: true,
+    hidden: true,
+  }
+
+  const result = await client.folderCreate({ path, deduplicate: true })
+
+  if (result instanceof client.Error) {
+    state.progress = {
+      type: 'error',
+      title: `Error creating a folder`,
+      message: result.detail,
+    }
+  } else {
+    appStore.onFileCreated([result.path])
+  }
+
+  state.progress = undefined
+  closeDialog()
+}

client/components/Application/Dialogs/DeleteFile/DeleteFile.tsx

@@ -0,0 +1,35 @@
+import { LinearProgress } from '@client/components/Library/LinearProgress'
+import TwoButtonDialog from '@client/components/Parts/Dialogs/TwoButton'
+import * as appStore from '@client/store'
+import * as React from 'react'
+import * as store from './store'
+
+export function DeleteFileDialog() {
+  const isFolder = appStore.useStore(appStore.getIsFolder)
+  const dialog = appStore.useStore((state) => state.dialog)
+  const { progress } = store.useState()
+
+  React.useEffect(() => {
+    store.resetState()
+  }, [dialog])
+
+  const title = isFolder ? 'Delete Folder' : 'Delete File'
+  const description = !progress
+    ? `Are you sure you want to delete this ${isFolder ? 'folder' : 'file'}?`
+    : undefined
+
+  return (
+    <TwoButtonDialog
+      open={true}
+      title={title}
+      description={description}
+      label="Delete"
+      hoverBgButtonColor="OKFNRed600"
+      cancelLabel="No"
+      onCancel={store.closeDialog}
+      onConfirm={store.deleteFile}
+    >
+      <LinearProgress progress={progress} />
+    </TwoButtonDialog>
+  )
+}

client/components/Application/Dialogs/DeleteFile/index.ts

@@ -0,0 +1 @@
+export { DeleteFileDialog } from './DeleteFile'

client/components/Application/Dialogs/DeleteFile/store.ts

@@ -0,0 +1,50 @@
+import { client } from '@client/client'
+import * as helpers from '@client/helpers'
+import * as appStore from '@client/store'
+import * as types from '@client/types'
+
+class State {
+  progress?: types.IProgress
+}
+
+export const { state, useState, resetState } = helpers.createState(
+  'DeleteFileDialog',
+  new State()
+)
+
+export function closeDialog() {
+  if (!state.progress?.blocking) {
+    appStore.closeDialog()
+  }
+}
+
+export async function deleteFile() {
+  const isFolder = appStore.getIsFolder(appStore.getState())
+  const { path } = appStore.getState()
+  if (!path) return
+
+  const target = isFolder ? 'folder' : 'file'
+
+  state.progress = {
+    type: 'deleting',
+    title: `Deleting selected ${target}`,
+    blocking: true,
+  }
+
+  const result = isFolder
+    ? await client.folderDelete({ path })
+    : await client.fileDelete({ path })
+
+  if (result instanceof client.Error) {
+    state.progress = {
+      type: 'error',
+      title: `Error deleting ${target}`,
+      message: result.detail,
+    }
+  } else {
+    appStore.onFileDeleted([path])
+  }
+
+  state.progress = undefined
+  closeDialog()
+}

client/components/Application/Dialogs/RenameFile/RenameFile.tsx

@@ -0,0 +1,32 @@
+import { LinearProgress } from '@client/components/Library/LinearProgress'
+import InputDialog from '@client/components/Parts/Dialogs/Input'
+import * as appStore from '@client/store'
+import * as React from 'react'
+import * as store from './store'
+
+export function RenameFileDialog() {
+  const isFolder = appStore.useStore(appStore.getIsFolder)
+  const dialog = appStore.useStore((state) => state.dialog)
+  const { progress } = store.useState()
+
+  React.useEffect(() => {
+    store.resetState()
+  }, [dialog])
+
+  const title = `Rename ${isFolder ? 'folder' : 'file'}`
+  const placeholder = `Name of new ${isFolder ? 'folder' : 'file'}`
+
+  return (
+    <InputDialog
+      open={true}
+      value=""
+      title={title}
+      label="Save"
+      placholder={placeholder}
+      onCancel={store.closeDialog}
+      onConfirm={store.renameFile}
+    >
+      <LinearProgress progress={progress} />
+    </InputDialog>
+  )
+}

client/components/Application/Dialogs/RenameFile/index.ts

@@ -0,0 +1 @@
+export { RenameFileDialog } from './RenameFile'