[explore] DatasourceControl to pick datasource in modal (#3210)

* [explore] DatasourceControl to pick datasource in modal

Makes it easier to change datasource, also makes it such that the list
of all datasources doesn't need to be loaded upfront.

* Adding more metadata

superset/assets/javascripts/explore/actions/exploreActions.js

@@ -16,11 +16,6 @@ export function setDatasource(datasource) {
   return { type: SET_DATASOURCE, datasource };
 }
 
-export const SET_DATASOURCES = 'SET_DATASOURCES';
-export function setDatasources(datasources) {
-  return { type: SET_DATASOURCES, datasources };
-}
-
 export const FETCH_DATASOURCE_STARTED = 'FETCH_DATASOURCE_STARTED';
 export function fetchDatasourceStarted() {
   return { type: FETCH_DATASOURCE_STARTED };
@@ -36,21 +31,6 @@ export function fetchDatasourceFailed(error) {
   return { type: FETCH_DATASOURCE_FAILED, error };
 }
 
-export const FETCH_DATASOURCES_STARTED = 'FETCH_DATASOURCES_STARTED';
-export function fetchDatasourcesStarted() {
-  return { type: FETCH_DATASOURCES_STARTED };
-}
-
-export const FETCH_DATASOURCES_SUCCEEDED = 'FETCH_DATASOURCES_SUCCEEDED';
-export function fetchDatasourcesSucceeded() {
-  return { type: FETCH_DATASOURCES_SUCCEEDED };
-}
-
-export const FETCH_DATASOURCES_FAILED = 'FETCH_DATASOURCES_FAILED';
-export function fetchDatasourcesFailed(error) {
-  return { type: FETCH_DATASOURCES_FAILED, error };
-}
-
 export const RESET_FIELDS = 'RESET_FIELDS';
 export function resetControls() {
   return { type: RESET_FIELDS };
@@ -83,24 +63,6 @@ export function fetchDatasourceMetadata(datasourceKey, alsoTriggerQuery = false)
   };
 }
 
-export function fetchDatasources() {
-  return function (dispatch) {
-    dispatch(fetchDatasourcesStarted());
-    const url = '/superset/datasources/';
-    $.ajax({
-      type: 'GET',
-      url,
-      success: (data) => {
-        dispatch(setDatasources(data));
-        dispatch(fetchDatasourcesSucceeded());
-      },
-      error(error) {
-        dispatch(fetchDatasourcesFailed(error.responseJSON.error));
-      },
-    });
-  };
-}
-
 export const TOGGLE_FAVE_STAR = 'TOGGLE_FAVE_STAR';
 export function toggleFaveStar(isStarred) {
   return { type: TOGGLE_FAVE_STAR, isStarred };

superset/assets/javascripts/explore/components/Control.jsx

@@ -1,24 +1,26 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import BoundsControl from './controls/BoundsControl';
 import CheckboxControl from './controls/CheckboxControl';
+import DatasourceControl from './controls/DatasourceControl';
 import FilterControl from './controls/FilterControl';
 import HiddenControl from './controls/HiddenControl';
 import SelectControl from './controls/SelectControl';
 import TextAreaControl from './controls/TextAreaControl';
 import TextControl from './controls/TextControl';
 import VizTypeControl from './controls/VizTypeControl';
-import BoundsControl from './controls/BoundsControl';
 
 const controlMap = {
+  BoundsControl,
   CheckboxControl,
+  DatasourceControl,
   FilterControl,
   HiddenControl,
   SelectControl,
   TextAreaControl,
   TextControl,
   VizTypeControl,
-  BoundsControl,
 };
 const controlTypes = Object.keys(controlMap);
 

superset/assets/javascripts/explore/components/ExploreViewContainer.jsx

@@ -33,9 +33,6 @@ class ExploreViewContainer extends React.Component {
   }
 
   componentDidMount() {
-    if (!this.props.standalone) {
-      this.props.actions.fetchDatasources();
-    }
     window.addEventListener('resize', this.handleResize.bind(this));
     this.triggerQueryIfNeeded();
   }

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

@@ -0,0 +1,157 @@
+/* global notify */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Table } from 'reactable';
+import { Label, FormControl, Modal, OverlayTrigger, Tooltip } from 'react-bootstrap';
+
+import ControlHeader from '../ControlHeader';
+import InfoTooltipWithTrigger from '../../../components/InfoTooltipWithTrigger';
+
+const propTypes = {
+  description: PropTypes.string,
+  label: PropTypes.string,
+  name: PropTypes.string.isRequired,
+  onChange: PropTypes.func,
+  value: PropTypes.string.isRequired,
+  datasource: PropTypes.object.isRequired,
+};
+
+const defaultProps = {
+  onChange: () => {},
+};
+
+export default class DatasourceControl extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      showModal: false,
+      filter: '',
+      loading: true,
+    };
+    this.toggleModal = this.toggleModal.bind(this);
+    this.changeSearch = this.changeSearch.bind(this);
+    this.setSearchRef = this.setSearchRef.bind(this);
+    this.onEnterModal = this.onEnterModal.bind(this);
+  }
+  onChange(vizType) {
+    this.props.onChange(vizType);
+    this.setState({ showModal: false });
+  }
+  onEnterModal() {
+    if (this.searchRef) {
+      this.searchRef.focus();
+    }
+    const url = '/superset/datasources/';
+    const that = this;
+    if (!this.state.datasources) {
+      $.ajax({
+        type: 'GET',
+        url,
+        success: (data) => {
+          const datasources = data.map(ds => ({
+            rawName: ds.name,
+            connection: ds.connection,
+            schema: ds.schema,
+            name: (
+              <a
+                href="#"
+                onClick={this.selectDatasource.bind(this, ds.uid)}
+                className="datasource-link"
+              >
+                {ds.name}
+              </a>),
+            type: ds.type,
+          }));
+
+          that.setState({ loading: false, datasources });
+        },
+        error() {
+          that.setState({ loading: false });
+          notify.error('Something went wrong while fetching the datasource list');
+        },
+      });
+    }
+  }
+  setSearchRef(searchRef) {
+    this.searchRef = searchRef;
+  }
+  toggleModal() {
+    this.setState({ showModal: !this.state.showModal });
+  }
+  changeSearch(event) {
+    this.setState({ filter: event.target.value });
+  }
+  selectDatasource(datasourceId) {
+    this.setState({ showModal: false });
+    this.props.onChange(datasourceId);
+  }
+  render() {
+    return (
+      <div>
+        <ControlHeader {...this.props} />
+        <OverlayTrigger
+          placement="right"
+          overlay={
+            <Tooltip id={'error-tooltip'}>Click to point to another datasource</Tooltip>
+          }
+        >
+          <Label onClick={this.toggleModal} style={{ cursor: 'pointer' }} className="m-r-3">
+            {this.props.datasource.name}
+          </Label>
+        </OverlayTrigger>
+        <InfoTooltipWithTrigger
+          tooltip="edit the datasource's configuration"
+          icon="edit"
+          label="edit datasource"
+          onClick={() => {
+            window.location = this.props.datasource.edit_url;
+          }}
+        />
+        <Modal
+          show={this.state.showModal}
+          onHide={this.toggleModal}
+          onEnter={this.onEnterModal}
+          onExit={this.setSearchRef}
+          bsSize="lg"
+        >
+          <Modal.Header closeButton>
+            <Modal.Title>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="Search / Filter"
+                onChange={this.changeSearch}
+              />
+            </div>
+            {this.state.loading &&
+              <img
+                className="loading"
+                alt="Loading..."
+                src="/static/assets/images/loading.gif"
+              />
+            }
+            {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>
+      </div>);
+  }
+}
+
+DatasourceControl.propTypes = propTypes;
+DatasourceControl.defaultProps = defaultProps;

superset/assets/javascripts/explore/components/controls/VizTypeControl.jsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Label, Row, Col, FormControl, Modal } from 'react-bootstrap';
+import {
+  Label, Row, Col, FormControl, Modal, OverlayTrigger,
+  Tooltip } from 'react-bootstrap';
 import visTypes from '../../stores/visTypes';
 import ControlHeader from '../ControlHeader';
 
@@ -85,13 +87,17 @@ export default class VizTypeControl extends React.PureComponent {
       <div>
         <ControlHeader
           {...this.props}
-          rightNode={
-            <a onClick={this.toggleModal}>edit</a>
-          }
         />
-        <Label onClick={this.toggleModal} style={{ cursor: 'pointer' }}>
-          {visTypes[this.props.value].label}
-        </Label>
+        <OverlayTrigger
+          placement="right"
+          overlay={
+            <Tooltip id={'error-tooltip'}>Click to change visualization type</Tooltip>
+          }
+        >
+          <Label onClick={this.toggleModal} style={{ cursor: 'pointer' }}>
+            {visTypes[this.props.value].label}
+          </Label>
+        </OverlayTrigger>
         <Modal
           show={this.state.showModal}
           onHide={this.toggleModal}

superset/assets/javascripts/explore/index.jsx

@@ -14,6 +14,7 @@ import ExploreViewContainer from './components/ExploreViewContainer';
 import { exploreReducer } from './reducers/exploreReducer';
 import { appSetup } from '../common';
 import './main.css';
+import '../../stylesheets/reactable-pagination.css';
 
 appSetup();
 initJQueryAjax();

superset/assets/javascripts/explore/reducers/exploreReducer.js

@@ -29,25 +29,6 @@ export const exploreReducer = function (state, action) {
     [actions.SET_DATASOURCE]() {
       return Object.assign({}, state, { datasource: action.datasource });
     },
-    [actions.FETCH_DATASOURCES_STARTED]() {
-      return Object.assign({}, state, { isDatasourcesLoading: true });
-    },
-
-    [actions.FETCH_DATASOURCES_SUCCEEDED]() {
-      return Object.assign({}, state, { isDatasourcesLoading: false });
-    },
-
-    [actions.FETCH_DATASOURCES_FAILED]() {
-      // todo(alanna) handle failure/error state
-      return Object.assign({}, state,
-        {
-          isDatasourcesLoading: false,
-          controlPanelAlert: action.error,
-        });
-    },
-    [actions.SET_DATASOURCES]() {
-      return Object.assign({}, state, { datasources: action.datasources });
-    },
     [actions.REMOVE_CONTROL_PANEL_ALERT]() {
       return Object.assign({}, state, { controlPanelAlert: null });
     },

superset/assets/javascripts/explore/stores/controls.jsx

@@ -30,23 +30,13 @@ export const D3_TIME_FORMAT_OPTIONS = [
 
 export const controls = {
   datasource: {
-    type: 'SelectControl',
+    type: 'DatasourceControl',
     label: 'Datasource',
-    isLoading: true,
-    clearable: false,
     default: null,
-    validators: [v.nonEmpty],
-    mapStateToProps: (state) => {
-      const datasources = state.datasources || [];
-      return {
-        choices: datasources,
-        isLoading: datasources.length === 0,
-        rightNode: state.datasource ?
-          <a href={state.datasource.edit_url}>edit</a>
-          : null,
-      };
-    },
-    description: '',
+    description: null,
+    mapStateToProps: state => ({
+      datasource: state.datasource,
+    }),
   },
 
   viz_type: {