Beta follow ups (#211)

* Removed TODO * Reworked action bar on children pattern * Added tooltips to action bar * Fixed package menu * Merged metadata/package controllers * Recovered column selection * Show field title if available * Removed tooltip animation * Added tolltips to browser buttons * Removed tooltips from browser * Added esc/enter to dialogs * Rebased on own delete dialog * Reused confirm dialog in input dialog * Added shotcuts to save/revert * Fixed show the welcome screen * Fixed save/revert shortcuts * Added more shortcuts * Updated button names * Deduplicte data package * Drafet fetch dataset button * Implemented create file button * Drafted index files button * Replaced deprecated onKeyPress * Updated SaveAs dialogs * Fixed file patch * Updated shortcuts * Fixed table dialog * Created SaveAs dialog in parts * Moved TextEditor * Moved TableEditor
okfn · Jun 20, 2023 · 1739abe · 1739abe
1 parent 46e9b1c
commit 1739abe
Show file tree

Hide file tree

Showing 98 changed files with 972 additions and 1,455 deletions.
diff --git a/:w b/:w
diff --git a/package.json b/package.json
@@ -57,6 +57,7 @@
     "@mui/material": "^5.11.8",
     "@mui/system": "^5.0.6",
     "@mui/x-date-pickers": "^5.0.8",
+    "ahooks": "^3.7.7",
     "classnames": "^2.3.1",
     "dayjs": "^1.11.7",
     "delay": "^6.0.0",
@@ -67,7 +68,6 @@
     "jsonschema": "^1.4.0",
     "lodash": "^4.17.21",
     "marked": "^4.0.1",
-    "material-ui-confirm": "^3.0.8",
     "react": "^18.0.2",
     "react-dom": "^18.0.2",
     "react-vega": "^7.6.0",

diff --git a/src/client.ts b/src/client.ts
@@ -60,6 +60,16 @@ export class Client {
     return result as { path: string }
   }
 
+  async fileFetch(props: {
+    url: string
+    path?: string
+    folder?: string
+    deduplicate?: boolean
+  }) {
+    const result = await this.request('/file/fetch', props)
+    return result as { path: string }
+  }
+
   async fileIndex(props: { path: string }) {
     const result = await this.request('/file/index', props)
     return result as {
@@ -79,12 +89,7 @@ export class Client {
     return result as { path: string }
   }
 
-  async filePatch(props: {
-    path: string
-    file?: File
-    toPath?: string
-    resource?: types.IResource
-  }) {
+  async filePatch(props: { path: string; toPath?: string; resource?: types.IResource }) {
     const result = await this.request('/file/patch', props)
     return result as { path: string }
   }
@@ -118,7 +123,7 @@ export class Client {
 
   // Json
 
-  async jsonCreate(props: { path: string; data: types.IData }) {
+  async jsonCreate(props: { path: string; data: types.IData; deduplicate?: boolean }) {
     const result = await this.request('/json/create', props)
     return result as { path: string }
   }
@@ -138,18 +143,6 @@ export class Client {
     return result as { data: any }
   }
 
-  // Link
-
-  async linkFetch(props: {
-    url: string
-    path?: string
-    folder?: string
-    deduplicate?: boolean
-  }) {
-    const result = await this.request('/link/fetch', props)
-    return result as { path: string }
-  }
-
   // Package
 
   async packagePatch(props: { path: string; data?: types.IData; toPath?: string }) {
@@ -194,6 +187,7 @@ export class Client {
     path: string
     rows: types.IRow[]
     tableSchema: types.ISchema
+    deduplicate?: boolean
   }) {
     const result = await this.request('/table/create', props)
     return result as { path: string }
@@ -228,7 +222,7 @@ export class Client {
 
   // Text
 
-  async textCreate(props: { path: string; text: string }) {
+  async textCreate(props: { path: string; text: string; deduplicate?: boolean }) {
     const result = await this.request('/text/create', props)
     return result as { path: string }
   }

diff --git a/src/components/Applications/Application/Action.tsx b/src/components/Applications/Application/Action.tsx
@@ -0,0 +1,15 @@
+import * as React from 'react'
+import CreateButton from './Buttons/Create'
+import DeleteButton from './Buttons/Delete'
+import ManageButton from './Buttons/Manage'
+import * as action from '../../Parts/Bars/Action'
+
+export default function Actions() {
+  return (
+    <action.ActionBar>
+      <CreateButton />
+      <ManageButton />
+      <DeleteButton />
+    </action.ActionBar>
+  )
+}
diff --git a/src/components/Applications/Application/Actions.tsx b/src/components/Applications/Application/Actions.tsx
diff --git a/...onents/Applications/Application/Files.tsx → ...ents/Applications/Application/Browser.tsx b/...onents/Applications/Application/Files.tsx → ...ents/Applications/Application/Browser.tsx
@@ -4,13 +4,19 @@ import Spinner from '../../Parts/Spinner'
 import FileTree from '../../Parts/Trees/File'
 import { useStore } from './store'
 
-export default function Files() {
+export default function Browser() {
   const files = useStore((state) => state.files)
   const loading = useStore((state) => state.loading)
-  return loading ? <LoadingFiles /> : files.length ? <PresentFiles /> : <EmptyFiles />
+  return loading ? (
+    <LoadingBrowser />
+  ) : files.length ? (
+    <DefaultBrowser />
+  ) : (
+    <EmptyBrowser />
+  )
 }
 
-function PresentFiles() {
+function DefaultBrowser() {
   const path = useStore((state) => state.path)
   const files = useStore((state) => state.files)
   const fileEvent = useStore((state) => state.fileEvent)
@@ -22,10 +28,10 @@ function PresentFiles() {
   )
 }
 
-function EmptyFiles() {
+function EmptyBrowser() {
   return <Empty title="No Files Added" description='Use "Create" button to add files' />
 }
 
-function LoadingFiles() {
+function LoadingBrowser() {
   return <Spinner message="Loading" />
 }
diff --git a/src/components/Applications/Application/Buttons/Create.tsx b/src/components/Applications/Application/Buttons/Create.tsx
@@ -1,33 +1,37 @@
 import * as React from 'react'
 import Button from '@mui/material/Button'
-import AddIcon from '@mui/icons-material/AddBox'
+import AddBoxIcon from '@mui/icons-material/AddBox'
 import SourceIcon from '@mui/icons-material/Source'
+import DatasetLinkedIcon from '@mui/icons-material/DatasetLinked'
 import CreateNewFolderIcon from '@mui/icons-material/CreateNewFolder'
+import HistoryEduIcon from '@mui/icons-material/HistoryEdu'
+import AddLinkIcon from '@mui/icons-material/AddLink'
 import DropdownButton from '../../../Parts/Buttons/Dropdown'
 import IconButton from '../../../Parts/Buttons/Icon'
-import { useStore } from '../store'
-import AddLink from '@mui/icons-material/AddLink'
 import DriveFolderUploadRounded from '@mui/icons-material/DriveFolderUploadRounded'
 import UploadFileRounded from '@mui/icons-material/UploadFileRounded'
+import { useStore } from '../store'
 
 export default function CreateButton() {
   return (
     <DropdownButton
       label="Create"
       variant="text"
-      icon={<AddIcon fontSize="small" sx={{ mr: 1 }} />}
+      icon={<AddBoxIcon fontSize="small" sx={{ mr: 1 }} />}
     >
-      <UploadFile />
-      <UploadLink />
-      <UploadFolder />
+      <AddFile />
+      <FetchFile />
+      <CreateFile />
+      <AddFolder />
       <CreateFolder />
-      <CreatePackage />
+      <FetchDataset />
+      <CreateDataset />
     </DropdownButton>
   )
 }
 
-function UploadFile() {
-  const createFiles = useStore((state) => state.createFiles)
+function AddFile() {
+  const addFiles = useStore((state) => state.addFiles)
   const inputFileRef = React.useRef<HTMLInputElement>(null)
   return (
     <React.Fragment>
@@ -37,50 +41,62 @@ function UploadFile() {
         component="label"
         startIcon={<UploadFileRounded fontSize="small" sx={{ mr: 1 }} />}
       >
-        Upload File
+        Add File
         <input
           type="file"
           hidden
           multiple
           ref={inputFileRef}
           onChange={(ev: React.ChangeEvent<HTMLInputElement>) => {
-            if (ev.target.files) createFiles(ev.target.files)
+            if (ev.target.files) addFiles(ev.target.files)
           }}
         />
       </Button>
     </React.Fragment>
   )
 }
 
-function UploadLink() {
+function FetchFile() {
+  const updateState = useStore((state) => state.updateState)
+  return (
+    <IconButton
+      variant="text"
+      label="Fetch File"
+      Icon={AddLinkIcon}
+      onClick={() => updateState({ dialog: 'fetchFile' })}
+    />
+  )
+}
+
+function CreateFile() {
   const updateState = useStore((state) => state.updateState)
   return (
     <IconButton
       variant="text"
-      label="Upload Link"
-      Icon={AddLink}
-      onClick={() => updateState({ dialog: 'uploadLink' })}
+      label="Create File"
+      Icon={HistoryEduIcon}
+      onClick={() => updateState({ dialog: 'createFile' })}
     />
   )
 }
 
-function UploadFolder() {
+function AddFolder() {
   const isWebkitDirectorySupported = 'webkitdirectory' in document.createElement('input')
   if (!isWebkitDirectorySupported) return null
-  const createFiles = useStore((state) => state.createFiles)
+  const addFiles = useStore((state) => state.addFiles)
   return (
     <React.Fragment>
       <Button
         variant="text"
         component="label"
         startIcon={<DriveFolderUploadRounded fontSize="small" sx={{ mr: 1 }} />}
       >
-        Upload Folder
+        Add Folder
         <input
           type="file"
           hidden
           onChange={(ev: React.ChangeEvent<HTMLInputElement>) => {
-            if (ev.target.files) createFiles(ev.target.files)
+            if (ev.target.files) addFiles(ev.target.files)
           }}
           // @ts-expect-error
           webkitdirectory=""
@@ -102,14 +118,27 @@ function CreateFolder() {
   )
 }
 
-function CreatePackage() {
+function FetchDataset() {
+  const updateState = useStore((state) => state.updateState)
+  return (
+    <IconButton
+      disabled
+      variant="text"
+      label="Fetch Dataset"
+      Icon={DatasetLinkedIcon}
+      onClick={() => updateState({ dialog: 'createDataset' })}
+    />
+  )
+}
+
+function CreateDataset() {
   const updateState = useStore((state) => state.updateState)
   return (
     <IconButton
       variant="text"
-      label="Create Package"
+      label="Create Dataset"
       Icon={SourceIcon}
-      onClick={() => updateState({ dialog: 'createPackage' })}
+      onClick={() => updateState({ dialog: 'createDataset' })}
     />
   )
 }
diff --git a/src/components/Applications/Application/Buttons/Delete.tsx b/src/components/Applications/Application/Buttons/Delete.tsx
@@ -2,14 +2,11 @@ import * as React from 'react'
 import DeleteIcon from '@mui/icons-material/Delete'
 import IconButton from '../../../Parts/Buttons/Icon'
 import { selectors, useStore } from '../store'
-import { useConfirm } from 'material-ui-confirm'
 
 export default function DeleteButton() {
-  const confirm = useConfirm()
   const path = useStore((state) => state.path)
-  const deleteFile = useStore((state) => state.deleteFile)
-  const deleteFolder = useStore((state) => state.deleteFolder)
   const isFolder = useStore(selectors.isFolder)
+  const updateState = useStore((state) => state.updateState)
   const type = isFolder ? 'Folder' : 'File'
   return (
     <IconButton
@@ -18,26 +15,7 @@ export default function DeleteButton() {
       disabled={!path}
       variant="text"
       color="warning"
-      onClick={() => {
-        if (!path) return
-        confirm({
-          title: `Delete ${type}`,
-          confirmationText: 'Delete',
-          description: `You are deleting "${path}". Are you sure?`,
-          confirmationButtonProps: {
-            variant: 'contained',
-            sx: { width: '50%' },
-            autoFocus: true,
-          },
-          cancellationButtonProps: {
-            color: 'warning',
-            variant: 'contained',
-            sx: { width: '50%' },
-          },
-        }).then(() => {
-          isFolder ? deleteFolder(path) : deleteFile(path)
-        })
-      }}
+      onClick={() => updateState({ dialog: `delete${type}` })}
     />
   )
 }