Implement a React-based table editor (#5186)

* A React table editor

* addressing comments

* Fix SelectAsyncControl error on clear

* fix tests

* more corrections

* Removed <strong>

superset/assets/src/explore/components/controls/DatasourceControl.jsx

@@ -1,56 +1,49 @@
 /* eslint no-undef: 2 */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Table } from 'reactable';
 import {
-  Row,
   Col,
   Collapse,
   Label,
-  FormControl,
-  Modal,
   OverlayTrigger,
+  Row,
   Tooltip,
   Well,
 } from 'react-bootstrap';
 import $ from 'jquery';
 
 import ControlHeader from '../ControlHeader';
-import Loading from '../../../components/Loading';
 import { t } from '../../../locales';
+import DatasourceModal from '../../../datasource/DatasourceModal';
 import ColumnOption from '../../../components/ColumnOption';
 import MetricOption from '../../../components/MetricOption';
 import withToasts from '../../../messageToasts/enhancers/withToasts';
 
 
 const propTypes = {
-  description: PropTypes.string,
-  label: PropTypes.string,
-  name: PropTypes.string.isRequired,
   onChange: PropTypes.func,
   value: PropTypes.string.isRequired,
-  datasource: PropTypes.object,
   addDangerToast: PropTypes.func.isRequired,
+  datasource: PropTypes.object.isRequired,
+  onDatasourceSave: PropTypes.func,
 };
 
 const defaultProps = {
   onChange: () => {},
+  onDatasourceSave: () => {},
 };
 
 class DatasourceControl extends React.PureComponent {
   constructor(props) {
     super(props);
     this.state = {
-      showModal: false,
+      showEditDatasourceModal: false,
       filter: '',
       loading: true,
       showDatasource: false,
     };
     this.toggleShowDatasource = this.toggleShowDatasource.bind(this);
-    this.onChange = this.onChange.bind(this);
-    this.onEnterModal = this.onEnterModal.bind(this);
-    this.toggleModal = this.toggleModal.bind(this);
-    this.changeSearch = this.changeSearch.bind(this);
+    this.toggleEditDatasourceModal = this.toggleEditDatasourceModal.bind(this);
     this.setSearchRef = this.setSearchRef.bind(this);
     this.selectDatasource = this.selectDatasource.bind(this);
   }
@@ -110,47 +103,10 @@ class DatasourceControl extends React.PureComponent {
     this.setState({ showModal: false });
     this.props.onChange(datasourceId);
   }
+  toggleEditDatasourceModal() {
+    this.setState({ showEditDatasourceModal: !this.state.showEditDatasourceModal });
+  }
   renderModal() {
-    return (
-      <Modal
-        show={this.state.showModal}
-        onHide={this.toggleModal}
-        onEnter={this.onEnterModal}
-        onExit={this.setSearchRef}
-        bsSize="lg"
-      >
-        <Modal.Header closeButton>
-          <Modal.Title>{t('Select a datasource')}</Modal.Title>
-        </Modal.Header>
-        <Modal.Body>
-          <div>
-            <FormControl
-              id="formControlsText"
-              inputRef={(ref) => {
-                this.setSearchRef(ref);
-              }}
-              type="text"
-              bsSize="sm"
-              value={this.state.filter}
-              placeholder={t('Search / Filter')}
-              onChange={this.changeSearch}
-            />
-          </div>
-          {this.state.loading && <Loading />}
-          {this.state.datasources && (
-            <Table
-              columns={['name', 'type', 'schema', 'connection', 'creator']}
-              className="table table-condensed"
-              data={this.state.datasources}
-              itemsPerPage={20}
-              filterable={['rawName', 'type', 'connection', 'schema', 'creator']}
-              filterBy={this.state.filter}
-              hideFilterInput
-            />
-          )}
-        </Modal.Body>
-      </Modal>
-    );
   }
   renderDatasource() {
     const datasource = this.props.datasource;
@@ -195,27 +151,17 @@ class DatasourceControl extends React.PureComponent {
             <Tooltip id={'error-tooltip'}>{t('Click to point to another datasource')}</Tooltip>
           }
         >
-          <Label onClick={this.toggleModal} style={{ cursor: 'pointer' }} className="m-r-5">
+          <Label onClick={this.toggleEditDatasourceModal} style={{ cursor: 'pointer' }} className="m-r-5">
             {this.props.datasource.name}
           </Label>
         </OverlayTrigger>
         <OverlayTrigger
           placement="right"
           overlay={
-            <Tooltip id={'edit-datasource-tooltip'}>
-              {t("Edit the datasource's configuration")}
+            <Tooltip id={'toggle-datasource-tooltip'}>
+              {t('Expand/collapse datasource configuration')}
             </Tooltip>
           }
-        >
-          <a href={this.props.datasource.edit_url}>
-            <i className="fa fa-edit m-r-5" />
-          </a>
-        </OverlayTrigger>
-        <OverlayTrigger
-          placement="right"
-          overlay={
-            <Tooltip id={'toggle-datasource-tooltip'}>{t('Show datasource configuration')}</Tooltip>
-          }
         >
           <a href="#">
             <i
@@ -238,7 +184,12 @@ class DatasourceControl extends React.PureComponent {
             </a>
           </OverlayTrigger>}
         <Collapse in={this.state.showDatasource}>{this.renderDatasource()}</Collapse>
-        {this.renderModal()}
+        <DatasourceModal
+          datasource={this.props.datasource}
+          show={this.state.showEditDatasourceModal}
+          onDatasourceSave={this.props.onDatasourceSave}
+          onHide={this.toggleEditDatasourceModal}
+        />
       </div>
     );
   }