Write Data Drag & Drop Polish

CHANGELOG.md

@@ -5,6 +5,7 @@
 1. [#1870](https://github.com/influxdata/chronograf/pull/1870): Fix console error for placing prop on div
 1. [#1864](https://github.com/influxdata/chronograf/pull/1864): Fix Write Data form upload button and add `onDragExit` handler
 1. [#1891](https://github.com/influxdata/chronograf/pull/1891): Fix Kapacitor config for PagerDuty via the UI
+1. [#1897](https://github.com/influxdata/chronograf/pull/1897): Fix regression from [#1864](https://github.com/influxdata/chronograf/pull/1864) and redesign drag & drop interaction
 1. [#1872](https://github.com/influxdata/chronograf/pull/1872): Prevent stats in the legend from wrapping line
 1. [#1899](https://github.com/influxdata/chronograf/pull/1899): Fix raw query editor in Data Explorer not using selected time
 

ui/src/data_explorer/components/WriteDataBody.js

@@ -3,6 +3,7 @@ import WriteDataFooter from 'src/data_explorer/components/WriteDataFooter'
 
 const WriteDataBody = ({
   handleKeyUp,
+  handleCancelFile,
   handleFile,
   handleEdit,
   handleSubmit,
@@ -26,45 +27,64 @@ const WriteDataBody = ({
           autoFocus={true}
           data-test="manual-entry-field"
         />
-      : <div className="write-data-form--file">
+      : <div
+          className={
+            uploadContent
+              ? 'write-data-form--file'
+              : 'write-data-form--file write-data-form--file_active'
+          }
+          onClick={handleFileOpen}
+        >
+          {uploadContent
+            ? <h3 className="write-data-form--filepath_selected">
+                {fileName}
+              </h3>
+            : <h3 className="write-data-form--filepath_empty">
+                Drop a file here or click to upload
+              </h3>}
+          <div
+            className={
+              uploadContent
+                ? 'write-data-form--graphic write-data-form--graphic_success'
+                : 'write-data-form--graphic'
+            }
+          />
           <input
             type="file"
             onChange={handleFile(false)}
             className="write-data-form--upload"
             ref={fileInput}
             accept="text/*, application/gzip"
           />
-          <button
-            className="write-data-form--upload-button btn btn-md btn-primary"
-            onClick={handleFileOpen}
-          >
-            {uploadContent
-              ? 'Choose Another File to Upload'
-              : 'Choose a File to Upload'}
-          </button>
-          {uploadContent
-            ? <span className="write-data-form--filepath_selected">
-                <span className="icon checkmark" />
-                {fileName}
-              </span>
-            : <span className="write-data-form--filepath_empty">
-                No file selected
-              </span>}
+          {uploadContent &&
+            <span className="write-data-form--file-submit">
+              <button className="btn btn-md btn-success" onClick={handleSubmit}>
+                Write this File
+              </button>
+              <button
+                className="btn btn-md btn-default"
+                onClick={handleCancelFile}
+              >
+                Cancel
+              </button>
+            </span>}
         </div>}
-    <WriteDataFooter
-      isUploading={isUploading}
-      isManual={isManual}
-      inputContent={inputContent}
-      handleSubmit={handleSubmit}
-      uploadContent={uploadContent}
-    />
+    {isManual &&
+      <WriteDataFooter
+        isUploading={isUploading}
+        isManual={isManual}
+        inputContent={inputContent}
+        handleSubmit={handleSubmit}
+        uploadContent={uploadContent}
+      />}
   </div>
 
 const {func, string, bool} = PropTypes
 
 WriteDataBody.propTypes = {
   handleKeyUp: func.isRequired,
   handleEdit: func.isRequired,
+  handleCancelFile: func.isRequired,
   handleFile: func.isRequired,
   handleSubmit: func.isRequired,
   inputContent: string,

ui/src/data_explorer/components/WriteDataForm.js

@@ -92,6 +92,10 @@ class WriteDataForm extends Component {
     }
   }
 
+  handleCancelFile = () => {
+    this.setState({uploadContent: ''})
+  }
+
   handleDragOver = e => {
     e.preventDefault()
     e.stopPropagation()
@@ -112,7 +116,10 @@ class WriteDataForm extends Component {
   }
 
   handleFileOpen = () => {
-    this.fileInput.click()
+    const {uploadContent} = this.state
+    if (uploadContent === '') {
+      this.fileInput.click()
+    }
   }
 
   handleFileInputRef = el => (this.fileInput = el)
@@ -146,11 +153,9 @@ class WriteDataForm extends Component {
             handleKeyUp={this.handleKeyUp}
             handleSubmit={this.handleSubmit}
             handleFileOpen={this.handleFileOpen}
+            handleCancelFile={this.handleCancelFile}
           />
         </div>
-        <div className="write-data-form--drag-here">
-          Drag & Drop a File to Upload
-        </div>
       </div>
     )
   }

ui/src/style/components/write-data-form.scss

@@ -4,6 +4,8 @@
   Accessed via Data Explorer
 */
 
+$write-data--form-z: 2;
+$write-data--drag-overlay-z: 1;
 $write-data--max-width: 960px;
 $write-data--gutter: 30px;
 $write-data--margin: 18px;
@@ -13,7 +15,8 @@ $write-data--transition: opacity 0.4s ease;
 .write-data-form {
   max-width: $write-data--max-width;
   margin: 0 auto;
-  transition: $write-data--transition;
+  position: relative;
+  z-index: $write-data--form-z;
 }
 .write-data-form--header {
   height: $chronograf-page-header-height;
@@ -71,49 +74,63 @@ textarea.form-control.write-data-form--input {
   justify-content: center;
   background-color: $g2-kevlar;
   border: 2px solid $g4-onyx;
+  margin-bottom: 48px;
   border-radius: 3px;
+  transition:
+    background-color 0.25s ease,
+    border-color 0.25s ease;
+
+  > p {
+    color: $g12-forge;
+    font-weight: 600;
+    margin: 20px 0;
+  }
+}
+.write-data-form--graphic {
+  background-image: url(assets/images/drag-drop-icon.svg);
+  background-size: 100% 100%;
+  background-position: center center;
+  width: 90px;
+  height: 90px;
+  margin-bottom: 68px;
+
+  &.write-data-form--graphic_success {
+    background-image: url(assets/images/drag-drop-icon--success.svg);
+    margin-bottom: 0;
+  }
 }
+
 input[type="file"].write-data-form--upload {
   display: none;
 }
-button.write-data-form--upload-button {
-  margin-top: 312px;
-}
 .write-data-form--filepath_selected,
 .write-data-form--filepath_empty {
   @include no-user-select();
-  font-size: 13px;
-  font-weight: 600;
-  margin-top: 15px;
-}
-.write-data-form--filepath_empty {
-  color: $g13-mist;
-  font-style: italic;
-}
-.write-data-form--filepath_selected {
-  color: $c-rainforest;
-  .icon {margin-right: 4px;}
+  width: 100%;
+  text-align: center;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin: 0 0 30px 0;
 }
+.write-data-form--filepath_empty {color: $g12-forge;}
+.write-data-form--filepath_selected {color: $c-rainforest;}
 
-/* Drag File to Upload Styles */
-.write-data-form--drag-here {
-  position: absolute;
-  top: 35%;
-  left: 50%;
-  transform: translate(-50%,-50%);
-  transition: $write-data--transition;
-  width: 520px;
-  height: 240px;
-  border-radius: 5px;
-  text-align: center;
-  line-height: 240px;
-  font-size: 30px;
-  font-weight: 400;
-  opacity: 0.5;
-  color: $g20-white;
-  border: 2px dashed fade-out($g20-white, 0.5);
+.write-data-form--file-submit {
+  margin-top: 30px;
+  & .btn {
+    width: 124px;
+    margin: 0 8px;
+  }
 }
-.drag-over {
-  .write-data-form {opacity: 0;}
-  .write-data-form--drag-here {opacity: 1;}
+
+/*
+  Styles for hover state and drag-over state look the same
+  ------------------------------------------------------------------------------
+*/
+.write-data-form--file.write-data-form--file_active:hover,
+.overlay-technology.drag-over .write-data-form--file {
+  cursor: pointer;
+  background-color: $g4-onyx;
+  border-color: $g6-smoke;
 }