From 402810f44bb163a81e2e02a75c4574d72b2b5931 Mon Sep 17 00:00:00 2001 From: Alex P Date: Fri, 1 Jun 2018 12:40:09 -0700 Subject: [PATCH] Revert commit 7338312 --- .../components/WriteDataBody.tsx | 147 +++++++++--------- .../components/WriteDataFooter.tsx | 5 +- .../components/WriteDataForm.tsx | 77 ++++----- .../components/WriteDataHeader.tsx | 10 +- ui/src/style/components/write-data-form.scss | 22 ++- 5 files changed, 127 insertions(+), 134 deletions(-) diff --git a/ui/src/data_explorer/components/WriteDataBody.tsx b/ui/src/data_explorer/components/WriteDataBody.tsx index 2ba7d74541..9923a0bb77 100644 --- a/ui/src/data_explorer/components/WriteDataBody.tsx +++ b/ui/src/data_explorer/components/WriteDataBody.tsx @@ -7,14 +7,13 @@ import React, { ReactElement, } from 'react' import WriteDataFooter from 'src/data_explorer/components/WriteDataFooter' -import DragAndDrop from 'src/shared/components/DragAndDrop' interface Props { handleCancelFile: (e: MouseEvent) => void handleEdit: (e: ChangeEvent) => void handleKeyUp: (e: KeyboardEvent) => void handleFile: (drop: boolean) => (e: DragEvent) => void - handleSubmit: (uploadContent: string) => void + handleSubmit: (e: MouseEvent) => void inputContent: string uploadContent: string fileName: string @@ -34,9 +33,9 @@ class WriteDataBody extends PureComponent { ) } - // private handleFile = (e: any): void => { - // this.props.handleFile(false)(e) - // } + private handleFile = (e: any): void => { + this.props.handleFile(false)(e) + } private get input(): JSX.Element { const {isManual} = this.props @@ -44,13 +43,7 @@ class WriteDataBody extends PureComponent { return this.textarea } - // return this.dragArea - return ( - - ) + return this.dragArea } private get textarea(): ReactElement { @@ -69,80 +62,86 @@ class WriteDataBody extends PureComponent { ) } - // private get dragArea(): ReactElement { - // const {fileInput, handleFileOpen} = this.props + private get dragArea(): ReactElement { + const {fileInput, handleFileOpen} = this.props - // return ( - //
- // {this.dragAreaHeader} - //
- // - // {this.buttons} - //
- // ) - // } + return ( +
+ {this.dragAreaHeader} +
+ + {this.buttons} +
+ ) + } - // private get dragAreaHeader(): ReactElement { - // const {uploadContent, fileName} = this.props + private get dragAreaHeader(): ReactElement { + const {uploadContent, fileName} = this.props - // if (uploadContent) { - // return

{fileName}

- // } + if (uploadContent) { + return

{fileName}

+ } - // return ( - //

- // Drop a file here or click to upload - //

- // ) - // } + return ( +

+ Drop a file here or click to upload +

+ ) + } - // private get infoClass(): string { - // const {uploadContent} = this.props + private get infoClass(): string { + const {uploadContent} = this.props - // if (uploadContent) { - // return 'write-data-form--graphic write-data-form--graphic_success' - // } + if (uploadContent) { + return 'write-data-form--graphic write-data-form--graphic_success' + } - // return 'write-data-form--graphic' - // } + return 'write-data-form--graphic' + } - // private get buttons(): ReactElement | null { - // const {uploadContent, handleSubmit, handleCancelFile} = this.props + private get buttons(): ReactElement | null { + const {uploadContent, handleSubmit, handleCancelFile} = this.props - // if (!uploadContent) { - // return null - // } + if (!uploadContent) { + return null + } - // return ( - // - // - // - // - // ) - // } + return ( + + + + + ) + } - // private get dragAreaClass(): string { - // const {uploadContent} = this.props + private get dragAreaClass(): string { + const {uploadContent} = this.props - // if (uploadContent) { - // return 'write-data-form--file' - // } + if (uploadContent) { + return 'write-data-form--file' + } - // return 'write-data-form--file write-data-form--file_active' - // } + return 'write-data-form--file write-data-form--file_active' + } private get footer(): JSX.Element | null { - const {isUploading, isManual, inputContent, uploadContent} = this.props + const { + isUploading, + isManual, + inputContent, + handleSubmit, + uploadContent, + } = this.props if (!isManual) { return null @@ -153,15 +152,11 @@ class WriteDataBody extends PureComponent { isUploading={isUploading} isManual={isManual} inputContent={inputContent} - handleSubmit={this.handleSubmit} + handleSubmit={handleSubmit} uploadContent={uploadContent} /> ) } - - private handleSubmit = (): void => { - this.props.handleSubmit('') - } } export default WriteDataBody diff --git a/ui/src/data_explorer/components/WriteDataFooter.tsx b/ui/src/data_explorer/components/WriteDataFooter.tsx index 5cb2d69301..c424bf631a 100644 --- a/ui/src/data_explorer/components/WriteDataFooter.tsx +++ b/ui/src/data_explorer/components/WriteDataFooter.tsx @@ -1,4 +1,4 @@ -import React, {PureComponent} from 'react' +import React, {PureComponent, MouseEvent} from 'react' import { WRITE_DATA_DOCS_LINK, DATA_IMPORT_DOCS_LINK, @@ -12,8 +12,7 @@ interface Props { isUploading: boolean uploadContent: string inputContent: string - // handleSubmit: (e: MouseEvent) => void - handleSubmit: () => void + handleSubmit: (e: MouseEvent) => void } class WriteDataFooter extends PureComponent { diff --git a/ui/src/data_explorer/components/WriteDataForm.tsx b/ui/src/data_explorer/components/WriteDataForm.tsx index dc9e98b12d..0ea6d90250 100644 --- a/ui/src/data_explorer/components/WriteDataForm.tsx +++ b/ui/src/data_explorer/components/WriteDataForm.tsx @@ -1,9 +1,10 @@ import React, { PureComponent, - // DragEvent, + DragEvent, ChangeEvent, KeyboardEvent, } from 'react' +import classnames from 'classnames' import OnClickOutside from 'src/shared/components/OnClickOutside' import WriteDataBody from 'src/data_explorer/components/WriteDataBody' @@ -12,7 +13,7 @@ import WriteDataHeader from 'src/data_explorer/components/WriteDataHeader' import {OVERLAY_TECHNOLOGY} from 'src/shared/constants/classNames' import {ErrorHandling} from 'src/shared/decorators/errors' import {Source, DropdownItem} from 'src/types' -// let dragCounter = 0 +let dragCounter = 0 interface Props { source: Source @@ -53,9 +54,17 @@ class WriteDataForm extends PureComponent { public render() { const {onClose, errorThrown, source} = this.props + const {dragClass} = this.state return ( -
+
{ } } - private handleSubmit = async (uploadContent: string) => { - console.log('submit!', uploadContent) + private handleSubmit = async () => { + const {onClose, source, writeLineProtocol} = this.props + const {inputContent, uploadContent, selectedDatabase, isManual} = this.state + const content = isManual ? inputContent : uploadContent + this.setState({isUploading: true}) - // const {onClose, source, writeLineProtocol} = this.props - // const {inputContent, uploadContent, selectedDatabase, isManual} = this.state - // const content = isManual ? inputContent : uploadContent - // this.setState({isUploading: true}) - - // try { - // await writeLineProtocol(source, selectedDatabase, content) - // this.setState({isUploading: false}) - // onClose() - // window.location.reload() - // } catch (error) { - // this.setState({isUploading: false}) - // console.error(error.data.error) - // } + try { + await writeLineProtocol(source, selectedDatabase, content) + this.setState({isUploading: false}) + onClose() + window.location.reload() + } catch (error) { + this.setState({isUploading: false}) + console.error(error.data.error) + } } private handleEdit = (e: ChangeEvent): void => { @@ -152,24 +159,24 @@ class WriteDataForm extends PureComponent { this.fileInput.value = '' } - // private handleDragOver = (e: DragEvent) => { - // e.preventDefault() - // e.stopPropagation() - // } + private handleDragOver = (e: DragEvent) => { + e.preventDefault() + e.stopPropagation() + } - // private handleDragEnter = (e: DragEvent): void => { - // dragCounter += 1 - // e.preventDefault() - // this.setState({dragClass: 'drag-over'}) - // } + private handleDragEnter = (e: DragEvent): void => { + dragCounter += 1 + e.preventDefault() + this.setState({dragClass: 'drag-over'}) + } - // private handleDragLeave = (e: DragEvent): void => { - // dragCounter -= 1 - // e.preventDefault() - // if (dragCounter === 0) { - // this.setState({dragClass: 'drag-none'}) - // } - // } + private handleDragLeave = (e: DragEvent): void => { + dragCounter -= 1 + e.preventDefault() + if (dragCounter === 0) { + this.setState({dragClass: 'drag-none'}) + } + } private handleFileOpen = (): void => { const {uploadContent} = this.state diff --git a/ui/src/data_explorer/components/WriteDataHeader.tsx b/ui/src/data_explorer/components/WriteDataHeader.tsx index 6a99d9c4f8..73304a75f8 100644 --- a/ui/src/data_explorer/components/WriteDataHeader.tsx +++ b/ui/src/data_explorer/components/WriteDataHeader.tsx @@ -32,10 +32,7 @@ class WriteDataHeader extends PureComponent { database={selectedDatabase} onErrorThrown={errorThrown} /> -
    +
    • File Upload
      • @@ -48,10 +45,7 @@ class WriteDataHeader extends PureComponent {
-
+
diff --git a/ui/src/style/components/write-data-form.scss b/ui/src/style/components/write-data-form.scss index 1b00142c3f..6f9582567e 100644 --- a/ui/src/style/components/write-data-form.scss +++ b/ui/src/style/components/write-data-form.scss @@ -9,14 +9,14 @@ $write-data--drag-overlay-z: 1; $write-data--max-width: 960px; $write-data--gutter: 30px; $write-data--margin: 18px; -$write-data--input-height: calc( - 90vh - 48px - 60px - 36px -); // Heights of everything but input height +$write-data--input-height: calc(90vh - 48px - 60px - 36px); // Heights of everything but input height $write-data--transition: opacity 0.4s ease; .write-data-form { max-width: $write-data--max-width; margin: 0 auto; + position: relative; + z-index: $write-data--form-z; } .write-data-form--header { height: $chronograf-page-header-height; @@ -40,7 +40,7 @@ $write-data--transition: opacity 0.4s ease; .write-data-form--body { padding: $write-data--margin $write-data--gutter; border-radius: 0 0 $radius $radius; - @include gradient-v($g2-kevlar, $g0-obsidian); + @include gradient-v($g2-kevlar,$g0-obsidian); } textarea.form-control.write-data-form--input { height: $write-data--input-height; @@ -76,7 +76,9 @@ textarea.form-control.write-data-form--input { border: 2px solid $g4-onyx; margin-bottom: 48px; border-radius: 3px; - transition: background-color 0.25s ease, border-color 0.25s ease; + transition: + background-color 0.25s ease, + border-color 0.25s ease; > p { color: $g12-forge; @@ -98,7 +100,7 @@ textarea.form-control.write-data-form--input { } } -input[type='file'].write-data-form--upload { +input[type="file"].write-data-form--upload { display: none; } .write-data-form--filepath_selected, @@ -111,12 +113,8 @@ input[type='file'].write-data-form--upload { text-overflow: ellipsis; margin: 0 0 30px 0; } -.write-data-form--filepath_empty { - color: $g12-forge; -} -.write-data-form--filepath_selected { - color: $c-rainforest; -} +.write-data-form--filepath_empty {color: $g12-forge;} +.write-data-form--filepath_selected {color: $c-rainforest;} .write-data-form--file-submit { margin-top: 30px;