[GitHub] [incubator-superset] Sascha-Gschwind commented on a change in pull request #8556: [WIP] [SIP] Proposal for Improvement on CSV Upload

[GitBox <gi...@apache.org>]

Sascha-Gschwind commented on a change in pull request #8556: [WIP] [SIP] Proposal for Improvement on CSV Upload
URL: https://github.com/apache/incubator-superset/pull/8556#discussion_r347832026
 
 

 ##########
 File path: superset/assets/src/CsvToDatabase/CsvToDatabase.jsx
 ##########
 @@ -0,0 +1,497 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { t } from '@superset-ui/translation';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import Asterisk from 'src/components/Asterisk';
+import FileDropper from 'src/components/FileDropper/FileDropper';
+import FormError from 'src/components/FormError';
+import DropArea from 'src/components/FileDropper/DropArea';
+import Button from 'src/components/Button';
+import AdvancedOptions from 'src/components/AdvancedOptions/AdvancedOptions';
+import FormInput from 'src/components/FormInput';
+import FormCheckbox from 'src/components/FormCheckbox';
+import FormHelpText from 'src/components/FormHelpText';
+import FormSelect from 'src/components/FormSelect';
+import * as Actions from './actions/csvToDatabase';
+import './CsvToDatabase.css';
+
+const propTypes = {
+  databases: PropTypes.array.isRequired,
+  actions: PropTypes.object.isRequired,
+  uploadStatus: PropTypes.object,
+};
+
+export class CsvToDatabase extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      tableName: '',
+      databaseName: '',
+      file: undefined,
+      selectedConnection: { label: t('In a new database'), value: -1 },
+      schema: '',
+      delimiter: ',',
+      selectedTableExists: { label: t('Fail'), value: 'Fail' },
+      headerRow: '0',
+      decimalCharacter: '.',
+      tableExistsValues: [
+        { label: t('Fail'), value: 'Fail' },
+        { label: t('Replace'), value: 'Replace' },
+        { label: t('Append'), value: 'Append' },
+      ],
+      indexColumn: '',
+      mangleDuplicateColumns: true,
+      skipInitialSpace: false,
+      skipRows: '',
+      rowsToRead: '',
+      skipBlankLines: true,
+      parseDates: '',
+      inferDatetimeFormat: true,
+      dataframeIndex: false,
+      columnLabels: '',
+    };
+    this.setFile = this.setFile.bind(this);
+    this.setSelectedConnection = this.setSelectedConnection.bind(this);
+    this.setTableExists = this.setTableExists.bind(this);
+    this.setUserInput = this.setUserInput.bind(this);
+    this.getConnectionStrings = this.getConnectionStrings.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
+  }
+
+  setFile(file) {
+    if (file && file[0]) {
+      let fileName = '';
+      if (this.state.selectedConnection.value === -1) {
+        fileName = file[0].name.slice(0, -4);
+      }
+      this.setState({ file: file[0], databaseName: fileName });
+    }
+  }
+
+  setSelectedConnection(connection) {
+    let databaseName = '';
+    if (connection.value === -1 && this.state.file) {
+      databaseName = this.state.file.name.slice(0, -4);
+    }
+    this.setState({
+      selectedConnection: connection,
+      databaseName,
+    });
+  }
+
+  setTableExists(value) {
+    this.setState({ selectedTableExists: value });
+  }
+
+  setUserInput(event) {
+    const name = event.target.name;
+    const value = event.target.value;
+    this.setState({ [name]: value });
+  }
+
+  setCheckboxValue(name, value) {
+    this.setState({ [name]: value });
+  }
+
+  getConnectionStrings() {
+    const connections = [];
+    this.props.databases.forEach(database =>
+      connections.push({ label: database.name, value: database.id }),
+    );
+    return connections;
+  }
+
+  handleSubmit(event) {
+    event.preventDefault();
+    const {
+      tableName,
+      databaseName,
+      file,
+      selectedConnection,
+      schema,
+      delimiter,
+      selectedTableExists,
+      headerRow,
+      decimalCharacter,
+      indexColumn,
+      mangleDuplicateColumns,
+      skipInitialSpace,
+      skipRows,
+      rowsToRead,
+      skipBlankLines,
+      parseDates,
+      inferDatetimeFormat,
+      dataframeIndex,
+      columnLabels,
+    } = this.state;
+    this.props.actions.uploadCsv({
+      tableName,
+      databaseName,
+      file,
+      connectionId: selectedConnection.value,
+      schema,
+      delimiter,
+      ifTableExists: selectedTableExists.value,
+      headerRow,
+      decimalCharacter,
+      indexColumn,
+      mangleDuplicateColumns,
+      skipInitialSpace,
+      skipRows,
+      rowsToRead,
+      skipBlankLines,
+      parseDates,
+      inferDatetimeFormat,
+      dataframeIndex,
+      columnLabels,
+    });
+  }
+
+  render() {
+    return (
+      <div className="container">
+        <FormError status={this.props.uploadStatus} />
+        <div className="panel panel-primary">
+          <div className="panel-heading">
+            <h4 className="panel-title">{t('CSV to Database configuration')}</h4>
+          </div>
+          <div id="Home" className="tab-pane active">
+            <form
+              id="model_form"
+              method="post"
+              encType="multipart/form-data"
+              onSubmit={this.handleSubmit}
+            >
+              <div className="table-responsive">
+                <table className="table table-bordered">
 
 Review comment:
   For now, since we still have some issues regarding the backend which we want to prioritize, we will leave the UI as is. Changing it in the future should not be a big issue but for this PR we will go with what we implemented now if that's OK.

----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
 
For queries about this service, please contact Infrastructure at:
users@infra.apache.org


With regards,
Apache Git Services

---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org