feat(workbench): drag-and-drop body updates

some leftover things to do here: * dropping a file _outside_ the drop zone doesn't cancel the drop overlay. I've added a cancel button for now so users aren't stuck * need to update status indicator
qri-io · Feb 27, 2020 · 5de9843 · 5de9843
1 parent 6eede95
commit 5de9843
Show file tree

Hide file tree

Showing 7 changed files with 126 additions and 10 deletions.
diff --git a/app/components/DatasetComponent.tsx b/app/components/DatasetComponent.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react'
+import path from 'path'
 
 import MetadataContainer from '../containers/MetadataContainer'
 import MetadataEditor from '../components/MetadataEditor'
@@ -20,6 +21,8 @@ import { Details } from '../models/details'
 import { ApiActionThunk } from '../store/api'
 import { Action } from 'redux'
 import Dataset from '../models/dataset'
+import DropZone from './chrome/DropZone'
+import CalloutBlock from './chrome/CalloutBlock'
 import Icon from './chrome/Icon'
 import StatusDot from './chrome/StatusDot'
 
@@ -48,12 +51,60 @@ interface DatasetComponentProps {
 }
 
 const DatasetComponent: React.FunctionComponent<DatasetComponentProps> = (props: DatasetComponentProps) => {
- const { component: selectedComponent, componentStatus, isLoading, history = false, fsiPath, data, peername, name, stats, bodyPageInfo, details, setDetailsBar, fetchBody, write } = props
+ const {
+ component: selectedComponent,
+ componentStatus,
+ isLoading,
+ history = false,
+ fsiPath,
+ data,
+ peername,
+ name,
+ stats,
+ bodyPageInfo,
+ details,
+ setDetailsBar,
+ fetchBody,
+ write
+ } = props
 
  const hasParseError = componentStatus.status === 'parse error'
  const component = selectedComponent || 'meta'
  const { displayName, icon, tooltip } = getComponentDisplayProps(component)
 
+ const [dragging, setDragging] = React.useState(false)
+
+ const dragHandler = (drag: boolean) => (e: React.DragEvent) => {
+ if (history) {
+ return
+ }
+ e.preventDefault()
+ setDragging(drag)
+ }
+
+ const dropHandler = (e: React.DragEvent) => {
+ setDragging(false)
+ e.preventDefault()
+ const ext = path.extname(e.dataTransfer.files[0].path)
+ // closeToast()
+ if (!(ext === '.csv' || ext === '.json')) {
+ // // open toast for 1 second
+ // openToast(ToastTypes.error, 'drag-drop', 'unsupported file format: only json and csv supported')
+ // setTimeout(() => closeToast(), 2500)
+ console.log('can only drop csv & json files')
+ return
+ }
+
+ // const {
+ // path: filePath,
+ // name: fileName,
+ // size: fileSize
+ // } = e.dataTransfer.files[0]
+ // importFile(filePath, fileName, fileSize)
+ console.log('dropped file')
+ handleWrite({ bodyPath: e.dataTransfer.files[0].path })
+ }
+
  const handleWrite = (data: Dataset): ApiActionThunk | void => {
  return write(peername, name, data)
  }
@@ -136,7 +187,21 @@ const DatasetComponent: React.FunctionComponent<DatasetComponentProps> = (props:
  unmountOnExit
  appear={true}
  >
- <div className='transition-wrap'>
+ <div className='transition-wrap'
+ onDragEnter={dragHandler(true)}
+ >
+ {dragging && <DropZone
+ title='Drop a body update'
+ subtitle='import either csv or json file'
+ setDragging={setDragging}
+ onDrop={dropHandler}
+ />}
+ {!history && data.bodyPath && <CalloutBlock
+ type='info'
+ text={`body will be replaced with file: ${data.bodyPath} when you commit`}
+ cancelText='unstage file'
+ onCancel={() => { handleWrite({ bodyPath: '' }) }}
+ />}
  <Body
  data={data}
  pageInfo={bodyPageInfo}

diff --git a/app/components/chrome/CalloutBlock.tsx b/app/components/chrome/CalloutBlock.tsx
@@ -0,0 +1,18 @@
+import React from 'react'
+
+export interface CalloutBlockProps {
+ text: string
+ type: 'info' | 'warning'
+
+ cancelText?: string
+ onCancel?: () => void
+}
+
+const CalloutBlock: React.FC<CalloutBlockProps> = ({ text, type, cancelText = 'cancel', onCancel }) => (
+ <div className={`callout-block ${type}`}>
+ {onCancel && <a className='cancel' onClick={onCancel}>{cancelText}</a>}
+ <p className='text'>{text}</p>
+ </div>
+)
+
+export default CalloutBlock
diff --git a/app/components/chrome/DropZone.tsx b/app/components/chrome/DropZone.tsx
@@ -3,12 +3,15 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faFileMedical } from '@fortawesome/free-solid-svg-icons'
 
 export interface DropZoneProps {
+ title: string
+ subtitle: string
+
  setDragging: (showing: boolean) => void
  onDrop: (e: React.SyntheticEvent) => void
 }
 
 const DropZone: React.FC<DropZoneProps> = (props) => {
- const { onDrop, setDragging } = props
+ const { title, subtitle, onDrop, setDragging } = props
 
  const setDragStateHandler = (showing: boolean) => {
  return (e: React.SyntheticEvent) => {
@@ -20,15 +23,16 @@ const DropZone: React.FC<DropZoneProps> = (props) => {
  return (<div className='drag-drop' id='drag-drop'
  onDragEnter={setDragStateHandler(true)}
  onDragOver={setDragStateHandler(true)}
- onDragLeave={setDragStateHandler(false)}
+ onDragExit={setDragStateHandler(false)}
  onDragEnd={setDragStateHandler(false)}
  onDrop={onDrop}
  >
  <div className="inner">
  <div className="icon"><FontAwesomeIcon size="5x" icon={faFileMedical} /></div>
- <div className="spacer">Drop to Create a new dataset</div>
+ <div className="spacer">{title}</div>
+ <a onClick={setDragStateHandler(false)}>cancel</a>
  </div>
- <div className="footer">You can import csv and json files</div>
+ <div className="footer">{subtitle}</div>
  </div>)
 }
 

diff --git a/app/components/collection/Collection.tsx b/app/components/collection/Collection.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { Action, AnyAction } from 'redux'
 
-import { MyDatasets, WorkingDataset } from '../../models/store'
+import { MyDatasets, WorkingDataset, ToastType } from '../../models/store'
 
 import DatasetList from '../DatasetList'
 import Layout from '../Layout'

diff --git a/app/components/collection/CollectionHome.tsx b/app/components/collection/CollectionHome.tsx
@@ -24,7 +24,7 @@ const CollectionHome: React.FC<CollectionHomeProps> = (props) => {
 
  const [dragging, setDragging] = React.useState(false)
 
- const setDragStateHandler = (prefix: string, dragState: boolean) => {
+ const setDragStateHandler = (dragState: boolean) => {
  return (e: React.SyntheticEvent) => {
  e.preventDefault()
  setDragging(dragState)
@@ -52,8 +52,13 @@ const CollectionHome: React.FC<CollectionHomeProps> = (props) => {
  }
 
  return (
- <div className='main-content-flex' onDragEnter={setDragStateHandler('outer', true)}>
- {dragging && <DropZone setDragging={setDragging} onDrop={dropHandler} />}
+ <div className='main-content-flex' onDragEnter={setDragStateHandler(true)}>
+ {dragging && <DropZone
+ title='Drop to create a new dataset'
+ subtitle='You can import csv and json files'
+ setDragging={setDragging}
+ onDrop={dropHandler}
+ />}
  <div className='main-content-header'>
  <HeaderColumnButton
  id='create-dataset'

diff --git a/app/models/dataset.ts b/app/models/dataset.ts
@@ -83,6 +83,7 @@ export interface Dataset {
  meta?: Meta
  structure?: Structure
  body?: Body
+ bodyPath?: string
  commit?: Commit
  readme?: string
  [key: string]: any

diff --git a/app/scss/0.4.0/chrome.scss b/app/scss/0.4.0/chrome.scss
@@ -216,4 +216,27 @@
  bottom: 0;
  padding: 10px;
  width: 100%;
+}
+
+.callout-block {
+ width: 100%;
+ padding: 15px 10px 0 10px;
+
+ .text {
+ margin-top: 5px;
+ }
+
+ &.info {
+ background: #4FC7F3;
+ border: solid 1px #4FC7F3;
+ }
+
+ .cancel {
+ float: right;
+ padding: 3px 8px;
+ border: 1px solid white;
+ border-radius: 3px;
+ color: white;
+ font-weight: 500;
+ }
 }