mirror of
https://github.com/apache/superset.git
synced 2024-09-12 16:49:40 -04:00
[sqllab] slide animations when adding/removing/toggling TableElement (#1472)
* [sqllab] slide animations when adding/removing/toggling TableElement * Adressing comments
This commit is contained in:
parent
4bf525222a
commit
ab083b86f3
@ -3,11 +3,7 @@ import CopyToClipboard from '../../components/CopyToClipboard';
|
|||||||
import { getShortUrl } from '../../../utils/common';
|
import { getShortUrl } from '../../../utils/common';
|
||||||
|
|
||||||
const propTypes = {
|
const propTypes = {
|
||||||
queryEditor: React.PropTypes.object,
|
queryEditor: React.PropTypes.object.isRequired,
|
||||||
};
|
|
||||||
|
|
||||||
const defaultProps = {
|
|
||||||
queryEditor: null,
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export default class CopyQueryTabUrl extends React.PureComponent {
|
export default class CopyQueryTabUrl extends React.PureComponent {
|
||||||
@ -19,8 +15,8 @@ export default class CopyQueryTabUrl extends React.PureComponent {
|
|||||||
}
|
}
|
||||||
|
|
||||||
componentWillMount() {
|
componentWillMount() {
|
||||||
const params = [];
|
|
||||||
const qe = this.props.queryEditor;
|
const qe = this.props.queryEditor;
|
||||||
|
const params = [];
|
||||||
if (qe.dbId) params.push('dbid=' + qe.dbId);
|
if (qe.dbId) params.push('dbid=' + qe.dbId);
|
||||||
if (qe.title) params.push('title=' + encodeURIComponent(qe.title));
|
if (qe.title) params.push('title=' + encodeURIComponent(qe.title));
|
||||||
if (qe.schema) params.push('schema=' + encodeURIComponent(qe.schema));
|
if (qe.schema) params.push('schema=' + encodeURIComponent(qe.schema));
|
||||||
@ -52,4 +48,3 @@ export default class CopyQueryTabUrl extends React.PureComponent {
|
|||||||
}
|
}
|
||||||
|
|
||||||
CopyQueryTabUrl.propTypes = propTypes;
|
CopyQueryTabUrl.propTypes = propTypes;
|
||||||
CopyQueryTabUrl.defaultProps = defaultProps;
|
|
||||||
|
@ -122,9 +122,11 @@ class TabbedSqlEditors extends React.PureComponent {
|
|||||||
<MenuItem eventKey="2" onClick={this.renameTab.bind(this, qe)}>
|
<MenuItem eventKey="2" onClick={this.renameTab.bind(this, qe)}>
|
||||||
<i className="fa fa-i-cursor" /> rename tab
|
<i className="fa fa-i-cursor" /> rename tab
|
||||||
</MenuItem>
|
</MenuItem>
|
||||||
|
{qe &&
|
||||||
<MenuItem eventKey="3">
|
<MenuItem eventKey="3">
|
||||||
<i className="fa fa-clipboard" /> <CopyQueryTabUrl queryEditor={qe} />
|
<i className="fa fa-clipboard" /> <CopyQueryTabUrl queryEditor={qe} />
|
||||||
</MenuItem>
|
</MenuItem>
|
||||||
|
}
|
||||||
</DropdownButton>
|
</DropdownButton>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
import { ButtonGroup, Well } from 'react-bootstrap';
|
import { ButtonGroup, Collapse, Well } from 'react-bootstrap';
|
||||||
import shortid from 'shortid';
|
import shortid from 'shortid';
|
||||||
|
|
||||||
import CopyToClipboard from '../../components/CopyToClipboard';
|
import CopyToClipboard from '../../components/CopyToClipboard';
|
||||||
@ -10,11 +10,13 @@ import ModalTrigger from '../../components/ModalTrigger';
|
|||||||
const propTypes = {
|
const propTypes = {
|
||||||
table: React.PropTypes.object,
|
table: React.PropTypes.object,
|
||||||
actions: React.PropTypes.object,
|
actions: React.PropTypes.object,
|
||||||
|
timeout: React.PropTypes.integer, // used for tests
|
||||||
};
|
};
|
||||||
|
|
||||||
const defaultProps = {
|
const defaultProps = {
|
||||||
table: null,
|
|
||||||
actions: {},
|
actions: {},
|
||||||
|
table: null,
|
||||||
|
timeout: 500,
|
||||||
};
|
};
|
||||||
|
|
||||||
class TableElement extends React.PureComponent {
|
class TableElement extends React.PureComponent {
|
||||||
@ -22,6 +24,7 @@ class TableElement extends React.PureComponent {
|
|||||||
super(props);
|
super(props);
|
||||||
this.state = {
|
this.state = {
|
||||||
sortColumns: false,
|
sortColumns: false,
|
||||||
|
expanded: true,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -36,18 +39,17 @@ class TableElement extends React.PureComponent {
|
|||||||
this.props.actions.addQueryEditor(qe);
|
this.props.actions.addQueryEditor(qe);
|
||||||
}
|
}
|
||||||
|
|
||||||
collapseTable(e) {
|
toggleTable(e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
if (this.props.table.expanded) {
|
||||||
this.props.actions.collapseTable(this.props.table);
|
this.props.actions.collapseTable(this.props.table);
|
||||||
}
|
} else {
|
||||||
|
|
||||||
expandTable(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
this.props.actions.expandTable(this.props.table);
|
this.props.actions.expandTable(this.props.table);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
removeTable() {
|
removeTable() {
|
||||||
this.props.actions.removeTable(this.props.table);
|
this.setState({ expanded: false });
|
||||||
}
|
}
|
||||||
dataPreviewModal() {
|
dataPreviewModal() {
|
||||||
const query = {
|
const query = {
|
||||||
@ -65,11 +67,8 @@ class TableElement extends React.PureComponent {
|
|||||||
this.setState({ sortColumns: !this.state.sortColumns });
|
this.setState({ sortColumns: !this.state.sortColumns });
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
renderHeader() {
|
||||||
const table = this.props.table;
|
const table = this.props.table;
|
||||||
let metadata = null;
|
|
||||||
let buttonToggle;
|
|
||||||
|
|
||||||
let header;
|
let header;
|
||||||
if (table.partitions) {
|
if (table.partitions) {
|
||||||
let partitionQuery;
|
let partitionQuery;
|
||||||
@ -101,25 +100,26 @@ class TableElement extends React.PureComponent {
|
|||||||
</Well>
|
</Well>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
if (table.expanded) {
|
return header;
|
||||||
buttonToggle = (
|
}
|
||||||
<a
|
renderMetadata() {
|
||||||
href="#"
|
const table = this.props.table;
|
||||||
onClick={(e) => { this.collapseTable(e); }}
|
let cols;
|
||||||
>
|
if (table.columns) {
|
||||||
<strong>{table.name}</strong>
|
cols = table.columns.slice();
|
||||||
<small className="m-l-5"><i className="fa fa-minus" /></small>
|
|
||||||
</a>
|
|
||||||
);
|
|
||||||
const cols = table.columns.slice();
|
|
||||||
if (this.state.sortColumns) {
|
if (this.state.sortColumns) {
|
||||||
cols.sort((a, b) => a.name.toUpperCase() > b.name.toUpperCase());
|
cols.sort((a, b) => a.name.toUpperCase() > b.name.toUpperCase());
|
||||||
}
|
}
|
||||||
metadata = (
|
}
|
||||||
|
const metadata = (
|
||||||
|
<Collapse
|
||||||
|
in={table.expanded}
|
||||||
|
timeout={this.props.timeout}
|
||||||
|
>
|
||||||
<div>
|
<div>
|
||||||
{header}
|
{this.renderHeader()}
|
||||||
<div className="table-columns">
|
<div className="table-columns">
|
||||||
{cols.map((col) => {
|
{cols && cols.map((col) => {
|
||||||
let name = col.name;
|
let name = col.name;
|
||||||
if (col.indexed) {
|
if (col.indexed) {
|
||||||
name = <strong>{col.name}</strong>;
|
name = <strong>{col.name}</strong>;
|
||||||
@ -137,18 +137,17 @@ class TableElement extends React.PureComponent {
|
|||||||
<hr />
|
<hr />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</Collapse>
|
||||||
);
|
);
|
||||||
} else {
|
return metadata;
|
||||||
buttonToggle = (
|
|
||||||
<a
|
|
||||||
href="#"
|
|
||||||
onClick={(e) => { this.expandTable(e); }}
|
|
||||||
>
|
|
||||||
{table.name}
|
|
||||||
<small className="m-l-5"><i className="fa fa-plus" /></small>
|
|
||||||
</a>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
removeFromStore() {
|
||||||
|
this.props.actions.removeTable(this.props.table);
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const table = this.props.table;
|
||||||
|
|
||||||
let keyLink;
|
let keyLink;
|
||||||
if (table.indexes && table.indexes.length > 0) {
|
if (table.indexes && table.indexes.length > 0) {
|
||||||
keyLink = (
|
keyLink = (
|
||||||
@ -171,10 +170,25 @@ class TableElement extends React.PureComponent {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
return (
|
return (
|
||||||
|
<Collapse
|
||||||
|
in={this.state.expanded}
|
||||||
|
timeout={this.props.timeout}
|
||||||
|
transitionAppear
|
||||||
|
onExited={this.removeFromStore.bind(this)}
|
||||||
|
>
|
||||||
<div className="TableElement">
|
<div className="TableElement">
|
||||||
<div className="clearfix">
|
<div className="clearfix">
|
||||||
<div className="pull-left">
|
<div className="pull-left">
|
||||||
{buttonToggle}
|
<a
|
||||||
|
href="#"
|
||||||
|
className="table-name"
|
||||||
|
onClick={(e) => { this.toggleTable(e); }}
|
||||||
|
>
|
||||||
|
<strong>{table.name}</strong>
|
||||||
|
<small className="m-l-5">
|
||||||
|
<i className={`fa fa-${table.expanded ? 'minus' : 'plus'}-square-o`} />
|
||||||
|
</small>
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div className="pull-right">
|
<div className="pull-right">
|
||||||
<ButtonGroup className="ws-el-controls pull-right">
|
<ButtonGroup className="ws-el-controls pull-right">
|
||||||
@ -196,6 +210,7 @@ class TableElement extends React.PureComponent {
|
|||||||
tooltip="Data preview"
|
tooltip="Data preview"
|
||||||
href="#"
|
href="#"
|
||||||
/>
|
/>
|
||||||
|
{table.selectStar &&
|
||||||
<CopyToClipboard
|
<CopyToClipboard
|
||||||
copyNode={
|
copyNode={
|
||||||
<a className="fa fa-clipboard pull-left m-l-2" />
|
<a className="fa fa-clipboard pull-left m-l-2" />
|
||||||
@ -204,8 +219,9 @@ class TableElement extends React.PureComponent {
|
|||||||
shouldShowText={false}
|
shouldShowText={false}
|
||||||
tooltipText="Copy SELECT statement to clipboard"
|
tooltipText="Copy SELECT statement to clipboard"
|
||||||
/>
|
/>
|
||||||
|
}
|
||||||
<Link
|
<Link
|
||||||
className="fa fa-trash pull-left m-l-2"
|
className="fa fa-trash table-remove pull-left m-l-2"
|
||||||
onClick={this.removeTable.bind(this)}
|
onClick={this.removeTable.bind(this)}
|
||||||
tooltip="Remove from panel"
|
tooltip="Remove from panel"
|
||||||
href="#"
|
href="#"
|
||||||
@ -214,9 +230,10 @@ class TableElement extends React.PureComponent {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
{metadata}
|
{this.renderMetadata()}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</Collapse>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -1,7 +1,5 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import CopyQueryTabUrl from '../../../javascripts/SqlLab/components/CopyQueryTabUrl';
|
import CopyQueryTabUrl from '../../../javascripts/SqlLab/components/CopyQueryTabUrl';
|
||||||
import CopyToClipboard from '../../../javascripts/components/CopyToClipboard';
|
|
||||||
import { shallow } from 'enzyme';
|
|
||||||
import { describe, it } from 'mocha';
|
import { describe, it } from 'mocha';
|
||||||
import { expect } from 'chai';
|
import { expect } from 'chai';
|
||||||
import { initialState } from './fixtures';
|
import { initialState } from './fixtures';
|
||||||
@ -10,16 +8,9 @@ describe('CopyQueryTabUrl', () => {
|
|||||||
const mockedProps = {
|
const mockedProps = {
|
||||||
queryEditor: initialState.queryEditors[0],
|
queryEditor: initialState.queryEditors[0],
|
||||||
};
|
};
|
||||||
it('should be valid', () => {
|
it('is valid with props', () => {
|
||||||
expect(React.isValidElement(<CopyQueryTabUrl />)).to.equal(true);
|
|
||||||
});
|
|
||||||
it('renders with props', () => {
|
|
||||||
expect(
|
expect(
|
||||||
React.isValidElement(<CopyQueryTabUrl {...mockedProps} />)
|
React.isValidElement(<CopyQueryTabUrl {...mockedProps} />)
|
||||||
).to.equal(true);
|
).to.equal(true);
|
||||||
});
|
});
|
||||||
it('renders a CopyToClipboard', () => {
|
|
||||||
const wrapper = shallow(<CopyQueryTabUrl {...mockedProps} />);
|
|
||||||
expect(wrapper.find(CopyToClipboard)).to.have.length(1);
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import Link from '../../../javascripts/SqlLab/components/Link';
|
import Link from '../../../javascripts/SqlLab/components/Link';
|
||||||
import TableElement from '../../../javascripts/SqlLab/components/TableElement';
|
import TableElement from '../../../javascripts/SqlLab/components/TableElement';
|
||||||
import { table } from './fixtures';
|
import { mockedActions, table } from './fixtures';
|
||||||
import { mount, shallow } from 'enzyme';
|
import { mount, shallow } from 'enzyme';
|
||||||
import { describe, it } from 'mocha';
|
import { describe, it } from 'mocha';
|
||||||
import { expect } from 'chai';
|
import { expect } from 'chai';
|
||||||
@ -9,7 +9,9 @@ import { expect } from 'chai';
|
|||||||
|
|
||||||
describe('TableElement', () => {
|
describe('TableElement', () => {
|
||||||
const mockedProps = {
|
const mockedProps = {
|
||||||
|
actions: mockedActions,
|
||||||
table,
|
table,
|
||||||
|
timeout: 0,
|
||||||
};
|
};
|
||||||
it('renders', () => {
|
it('renders', () => {
|
||||||
expect(
|
expect(
|
||||||
@ -40,4 +42,19 @@ describe('TableElement', () => {
|
|||||||
expect(wrapper.state().sortColumns).to.equal(true);
|
expect(wrapper.state().sortColumns).to.equal(true);
|
||||||
expect(wrapper.find('.col-name').first().text()).to.equal('last_login');
|
expect(wrapper.find('.col-name').first().text()).to.equal('last_login');
|
||||||
});
|
});
|
||||||
|
it('calls the collapseTable action', () => {
|
||||||
|
const wrapper = mount(<TableElement {...mockedProps} />);
|
||||||
|
expect(mockedActions.collapseTable.called).to.equal(false);
|
||||||
|
wrapper.find('.table-name').simulate('click');
|
||||||
|
expect(mockedActions.collapseTable.called).to.equal(true);
|
||||||
|
});
|
||||||
|
it('removes the table', () => {
|
||||||
|
const wrapper = mount(<TableElement {...mockedProps} />);
|
||||||
|
expect(wrapper.state().expanded).to.equal(true);
|
||||||
|
wrapper.find('.table-remove').simulate('click');
|
||||||
|
expect(wrapper.state().expanded).to.equal(false);
|
||||||
|
setTimeout(() => {
|
||||||
|
expect(mockedActions.removeTable.called).to.equal(true);
|
||||||
|
}, 10);
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
@ -1,3 +1,8 @@
|
|||||||
|
import * as actions from '../../../javascripts/SqlLab/actions';
|
||||||
|
import sinon from 'sinon';
|
||||||
|
|
||||||
|
export const mockedActions = sinon.stub(Object.assign({}, actions));
|
||||||
|
|
||||||
export const alert = { bsStyle: 'danger', msg: 'Ooops', id: 'lksvmcx32' };
|
export const alert = { bsStyle: 'danger', msg: 'Ooops', id: 'lksvmcx32' };
|
||||||
export const table = {
|
export const table = {
|
||||||
dbId: 1,
|
dbId: 1,
|
||||||
@ -6,6 +11,11 @@ export const table = {
|
|||||||
schema: 'caravel',
|
schema: 'caravel',
|
||||||
name: 'ab_user',
|
name: 'ab_user',
|
||||||
id: 'r11Vgt60',
|
id: 'r11Vgt60',
|
||||||
|
partitions: {
|
||||||
|
cols: ['username'],
|
||||||
|
latest: 'bob',
|
||||||
|
partitionQuery: 'SHOW PARTITIONS FROM ab_user',
|
||||||
|
},
|
||||||
indexes: [
|
indexes: [
|
||||||
{
|
{
|
||||||
unique: true,
|
unique: true,
|
||||||
|
Loading…
Reference in New Issue
Block a user