diff --git a/superset/assets/spec/javascripts/explore/components/DisplayQueryButton_spec.jsx b/superset/assets/spec/javascripts/explore/components/DisplayQueryButton_spec.jsx
index 8bca8714f5aeb..68c9c41b221ea 100644
--- a/superset/assets/spec/javascripts/explore/components/DisplayQueryButton_spec.jsx
+++ b/superset/assets/spec/javascripts/explore/components/DisplayQueryButton_spec.jsx
@@ -24,6 +24,6 @@ describe('DisplayQueryButton', () => {
});
it('renders a dropdown', () => {
const wrapper = mount();
- expect(wrapper.find(ModalTrigger)).to.have.lengthOf(2);
+ expect(wrapper.find(ModalTrigger)).to.have.lengthOf(3);
});
});
diff --git a/superset/assets/spec/javascripts/sqllab/TableElement_spec.jsx b/superset/assets/spec/javascripts/sqllab/TableElement_spec.jsx
index 6d683d3388ec1..69adf09ac2b69 100644
--- a/superset/assets/spec/javascripts/sqllab/TableElement_spec.jsx
+++ b/superset/assets/spec/javascripts/sqllab/TableElement_spec.jsx
@@ -54,5 +54,6 @@ describe('TableElement', () => {
wrapper.find('.table-remove').simulate('click');
expect(wrapper.state().expanded).to.equal(false);
expect(mockedActions.removeDataPreview.called).to.equal(true);
+ expect(mockedActions.removeTable.called).to.equal(true);
});
});
diff --git a/superset/assets/src/explore/components/DisplayQueryButton.jsx b/superset/assets/src/explore/components/DisplayQueryButton.jsx
index a7295db2affc0..45325bd33361d 100644
--- a/superset/assets/src/explore/components/DisplayQueryButton.jsx
+++ b/superset/assets/src/explore/components/DisplayQueryButton.jsx
@@ -6,9 +6,9 @@ import markdown from 'react-syntax-highlighter/languages/hljs/markdown';
import sql from 'react-syntax-highlighter/languages/hljs/sql';
import json from 'react-syntax-highlighter/languages/hljs/json';
import github from 'react-syntax-highlighter/styles/hljs/github';
-import { DropdownButton, MenuItem } from 'react-bootstrap';
-import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
-import 'react-bootstrap-table/css/react-bootstrap-table.css';
+import { DropdownButton, MenuItem, Row, Col, FormControl } from 'react-bootstrap';
+import { Table } from 'reactable';
+import $ from 'jquery';
import CopyToClipboard from './../../components/CopyToClipboard';
import { getExploreUrlAndPayload } from '../exploreUtils';
@@ -17,14 +17,13 @@ import Loading from '../../components/Loading';
import ModalTrigger from './../../components/ModalTrigger';
import Button from '../../components/Button';
import { t } from '../../locales';
+import RowCountLabel from './RowCountLabel';
registerLanguage('markdown', markdown);
registerLanguage('html', html);
registerLanguage('sql', sql);
registerLanguage('json', json);
-const $ = (window.$ = require('jquery'));
-
const propTypes = {
onOpenInEditor: PropTypes.func,
animation: PropTypes.bool,
@@ -46,15 +45,17 @@ export default class DisplayQueryButton extends React.PureComponent {
data: null,
isLoading: false,
error: null,
+ filterText: '',
sqlSupported: datasource && datasource.split('__')[1] === 'table',
};
this.beforeOpen = this.beforeOpen.bind(this);
+ this.changeFilterText = this.changeFilterText.bind(this);
}
- beforeOpen() {
+ beforeOpen(endpointType) {
this.setState({ isLoading: true });
const { url, payload } = getExploreUrlAndPayload({
formData: this.props.latestQueryFormData,
- endpointType: 'query',
+ endpointType,
});
$.ajax({
type: 'POST',
@@ -79,6 +80,9 @@ export default class DisplayQueryButton extends React.PureComponent {
},
});
}
+ changeFilterText(event) {
+ this.setState({ filterText: event.target.value });
+ }
redirectSQLLab() {
this.props.onOpenInEditor(this.props.latestQueryFormData);
}
@@ -111,7 +115,7 @@ export default class DisplayQueryButton extends React.PureComponent {
if (this.state.isLoading) {
return (
);
} else if (this.state.error) {
@@ -120,33 +124,72 @@ export default class DisplayQueryButton extends React.PureComponent {
if (this.state.data.length === 0) {
return 'No data';
}
- const headers = Object.keys(this.state.data[0]).map((k, i) => (
- {k}
- ));
- return (
-
- {headers}
-
- );
+ return this.renderDataTable(this.state.data);
+ }
+ return null;
+ }
+ renderDataTable(data) {
+ return (
+
+ );
+ }
+ renderSamplesModalBody() {
+ if (this.state.isLoading) {
+ return (
);
+ } else if (this.state.error) {
+ return {this.state.error}
;
+ } else if (this.state.data) {
+ return this.renderDataTable(this.state.data);
}
return null;
}
render() {
return (
-
+
+
+ }
+ bsSize="sm"
+ pullRight
+ id="query"
+ >
{t('View query')}}
modalTitle={t('View query')}
bsSize="large"
- beforeOpen={this.beforeOpen}
+ beforeOpen={() => this.beforeOpen('query')}
modalBody={this.renderQueryModalBody()}
eventKey="1"
/>
@@ -156,10 +199,20 @@ export default class DisplayQueryButton extends React.PureComponent {
triggerNode={{t('View results')}}
modalTitle={t('View results')}
bsSize="large"
- beforeOpen={this.beforeOpen}
+ beforeOpen={() => this.beforeOpen('results')}
modalBody={this.renderResultsModalBody()}
eventKey="2"
/>
+ {t('View samples')}}
+ modalTitle={t('View samples')}
+ bsSize="large"
+ beforeOpen={() => this.beforeOpen('samples')}
+ modalBody={this.renderSamplesModalBody()}
+ eventKey="2"
+ />
{this.state.sqlSupported &&