mirror of
https://github.com/apache/superset.git
synced 2024-09-12 00:29:39 -04:00
refactor: Convert TableElement.jsx component from class to functional with hooks (#14830)
* Change TableElement from a class component to a functional component * Replace class state checks in TableElement_spec.jsx with checks testing elements they change * Refactor small bit of logic to use optional chaining * Add optional chaining to some logic * Fix IconTooltip and add IconTooltip to the collapse button * Fix custom icon using IconToolTip so it better matches the original * Update collapse/expand icon to use Icons component instead of importing from antdesign directly * Fix eslint errors * Clean up some code for readability Co-authored-by: Corbin Robb <corbin@Corbins-MacBook-Pro.local>
This commit is contained in:
parent
f652908a70
commit
004a6d9e54
@ -43,7 +43,7 @@ describe('TableElement', () => {
|
|||||||
it('renders with props', () => {
|
it('renders with props', () => {
|
||||||
expect(React.isValidElement(<TableElement {...mockedProps} />)).toBe(true);
|
expect(React.isValidElement(<TableElement {...mockedProps} />)).toBe(true);
|
||||||
});
|
});
|
||||||
it('has 4 IconTooltip elements', () => {
|
it('has 5 IconTooltip elements', () => {
|
||||||
const wrapper = mount(
|
const wrapper = mount(
|
||||||
<Provider store={store}>
|
<Provider store={store}>
|
||||||
<TableElement {...mockedProps} />
|
<TableElement {...mockedProps} />
|
||||||
@ -55,14 +55,14 @@ describe('TableElement', () => {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
expect(wrapper.find(IconTooltip)).toHaveLength(4);
|
expect(wrapper.find(IconTooltip)).toHaveLength(5);
|
||||||
});
|
});
|
||||||
it('has 14 columns', () => {
|
it('has 14 columns', () => {
|
||||||
const wrapper = shallow(<TableElement {...mockedProps} />);
|
const wrapper = shallow(<TableElement {...mockedProps} />);
|
||||||
expect(wrapper.find(ColumnElement)).toHaveLength(14);
|
expect(wrapper.find(ColumnElement)).toHaveLength(14);
|
||||||
});
|
});
|
||||||
it('mounts', () => {
|
it('mounts', () => {
|
||||||
mount(
|
const wrapper = mount(
|
||||||
<Provider store={store}>
|
<Provider store={store}>
|
||||||
<TableElement {...mockedProps} />
|
<TableElement {...mockedProps} />
|
||||||
</Provider>,
|
</Provider>,
|
||||||
@ -73,6 +73,8 @@ describe('TableElement', () => {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
|
|
||||||
|
expect(wrapper.find(TableElement)).toHaveLength(1);
|
||||||
});
|
});
|
||||||
it('fades table', async () => {
|
it('fades table', async () => {
|
||||||
const wrapper = mount(
|
const wrapper = mount(
|
||||||
@ -86,13 +88,11 @@ describe('TableElement', () => {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
expect(wrapper.find(TableElement).state().hovered).toBe(false);
|
|
||||||
expect(wrapper.find('[data-test="fade"]').first().props().hovered).toBe(
|
expect(wrapper.find('[data-test="fade"]').first().props().hovered).toBe(
|
||||||
false,
|
false,
|
||||||
);
|
);
|
||||||
wrapper.find('.header-container').hostNodes().simulate('mouseEnter');
|
wrapper.find('.header-container').hostNodes().simulate('mouseEnter');
|
||||||
await waitForComponentToPaint(wrapper, 300);
|
await waitForComponentToPaint(wrapper, 300);
|
||||||
expect(wrapper.find(TableElement).state().hovered).toBe(true);
|
|
||||||
expect(wrapper.find('[data-test="fade"]').first().props().hovered).toBe(
|
expect(wrapper.find('[data-test="fade"]').first().props().hovered).toBe(
|
||||||
true,
|
true,
|
||||||
);
|
);
|
||||||
@ -111,12 +111,22 @@ describe('TableElement', () => {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
expect(wrapper.find(TableElement).state().sortColumns).toBe(false);
|
expect(
|
||||||
|
wrapper.find(IconTooltip).at(2).hasClass('fa-sort-alpha-asc'),
|
||||||
|
).toEqual(true);
|
||||||
|
expect(
|
||||||
|
wrapper.find(IconTooltip).at(2).hasClass('fa-sort-numeric-asc'),
|
||||||
|
).toEqual(false);
|
||||||
wrapper.find('.header-container').hostNodes().simulate('click');
|
wrapper.find('.header-container').hostNodes().simulate('click');
|
||||||
expect(wrapper.find(ColumnElement).first().props().column.name).toBe('id');
|
expect(wrapper.find(ColumnElement).first().props().column.name).toBe('id');
|
||||||
wrapper.find('.header-container').simulate('mouseEnter');
|
wrapper.find('.header-container').simulate('mouseEnter');
|
||||||
wrapper.find('.sort-cols').hostNodes().simulate('click');
|
wrapper.find('.sort-cols').hostNodes().simulate('click');
|
||||||
expect(wrapper.find(TableElement).state().sortColumns).toBe(true);
|
expect(
|
||||||
|
wrapper.find(IconTooltip).at(2).hasClass('fa-sort-numeric-asc'),
|
||||||
|
).toEqual(true);
|
||||||
|
expect(
|
||||||
|
wrapper.find(IconTooltip).at(2).hasClass('fa-sort-alpha-asc'),
|
||||||
|
).toEqual(false);
|
||||||
expect(wrapper.find(ColumnElement).first().props().column.name).toBe(
|
expect(wrapper.find(ColumnElement).first().props().column.name).toBe(
|
||||||
'active',
|
'active',
|
||||||
);
|
);
|
||||||
|
@ -16,16 +16,16 @@
|
|||||||
* specific language governing permissions and limitations
|
* specific language governing permissions and limitations
|
||||||
* under the License.
|
* under the License.
|
||||||
*/
|
*/
|
||||||
import React from 'react';
|
import React, { useState } from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import Collapse from 'src/components/Collapse';
|
import Collapse from 'src/components/Collapse';
|
||||||
import Card from 'src/components/Card';
|
import Card from 'src/components/Card';
|
||||||
import ButtonGroup from 'src/components/ButtonGroup';
|
import ButtonGroup from 'src/components/ButtonGroup';
|
||||||
import shortid from 'shortid';
|
|
||||||
import { t, styled } from '@superset-ui/core';
|
import { t, styled } from '@superset-ui/core';
|
||||||
import { debounce } from 'lodash';
|
import { debounce } from 'lodash';
|
||||||
|
|
||||||
import { Tooltip } from 'src/components/Tooltip';
|
import { Tooltip } from 'src/components/Tooltip';
|
||||||
|
import Icons from 'src/components/Icons';
|
||||||
import CopyToClipboard from '../../components/CopyToClipboard';
|
import CopyToClipboard from '../../components/CopyToClipboard';
|
||||||
import { IconTooltip } from '../../components/IconTooltip';
|
import { IconTooltip } from '../../components/IconTooltip';
|
||||||
import ColumnElement from './ColumnElement';
|
import ColumnElement from './ColumnElement';
|
||||||
@ -56,44 +56,26 @@ const Fade = styled.div`
|
|||||||
opacity: ${props => (props.hovered ? 1 : 0)};
|
opacity: ${props => (props.hovered ? 1 : 0)};
|
||||||
`;
|
`;
|
||||||
|
|
||||||
class TableElement extends React.PureComponent {
|
const TableElement = props => {
|
||||||
constructor(props) {
|
const [sortColumns, setSortColumns] = useState(false);
|
||||||
super(props);
|
const [hovered, setHovered] = useState(false);
|
||||||
this.state = {
|
|
||||||
sortColumns: false,
|
|
||||||
hovered: false,
|
|
||||||
};
|
|
||||||
this.toggleSortColumns = this.toggleSortColumns.bind(this);
|
|
||||||
this.removeTable = this.removeTable.bind(this);
|
|
||||||
this.setHover = debounce(this.setHover.bind(this), 100);
|
|
||||||
}
|
|
||||||
|
|
||||||
setHover(hovered) {
|
const { table, actions, isActive } = props;
|
||||||
this.setState({ hovered });
|
|
||||||
}
|
|
||||||
|
|
||||||
popSelectStar() {
|
const setHover = hovered => {
|
||||||
const qe = {
|
debounce(() => setHovered(hovered), 100)();
|
||||||
id: shortid.generate(),
|
};
|
||||||
title: this.props.table.name,
|
|
||||||
dbId: this.props.table.dbId,
|
|
||||||
autorun: true,
|
|
||||||
sql: this.props.table.selectStar,
|
|
||||||
};
|
|
||||||
this.props.actions.addQueryEditor(qe);
|
|
||||||
}
|
|
||||||
|
|
||||||
removeTable() {
|
const removeTable = () => {
|
||||||
this.props.actions.removeDataPreview(this.props.table);
|
actions.removeDataPreview(table);
|
||||||
this.props.actions.removeTable(this.props.table);
|
actions.removeTable(table);
|
||||||
}
|
};
|
||||||
|
|
||||||
toggleSortColumns() {
|
const toggleSortColumns = () => {
|
||||||
this.setState(prevState => ({ sortColumns: !prevState.sortColumns }));
|
setSortColumns(prevState => !prevState);
|
||||||
}
|
};
|
||||||
|
|
||||||
renderWell() {
|
const renderWell = () => {
|
||||||
const { table } = this.props;
|
|
||||||
let header;
|
let header;
|
||||||
if (table.partitions) {
|
if (table.partitions) {
|
||||||
let partitionQuery;
|
let partitionQuery;
|
||||||
@ -126,12 +108,11 @@ class TableElement extends React.PureComponent {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
return header;
|
return header;
|
||||||
}
|
};
|
||||||
|
|
||||||
renderControls() {
|
const renderControls = () => {
|
||||||
let keyLink;
|
let keyLink;
|
||||||
const { table } = this.props;
|
if (table?.indexes?.length) {
|
||||||
if (table.indexes && table.indexes.length > 0) {
|
|
||||||
keyLink = (
|
keyLink = (
|
||||||
<ModalTrigger
|
<ModalTrigger
|
||||||
modalTitle={
|
modalTitle={
|
||||||
@ -156,12 +137,12 @@ class TableElement extends React.PureComponent {
|
|||||||
{keyLink}
|
{keyLink}
|
||||||
<IconTooltip
|
<IconTooltip
|
||||||
className={
|
className={
|
||||||
`fa fa-sort-${!this.state.sortColumns ? 'alpha' : 'numeric'}-asc ` +
|
`fa fa-sort-${sortColumns ? 'numeric' : 'alpha'}-asc ` +
|
||||||
'pull-left sort-cols m-l-2 pointer'
|
'pull-left sort-cols m-l-2 pointer'
|
||||||
}
|
}
|
||||||
onClick={this.toggleSortColumns}
|
onClick={toggleSortColumns}
|
||||||
tooltip={
|
tooltip={
|
||||||
!this.state.sortColumns
|
!sortColumns
|
||||||
? t('Sort columns alphabetically')
|
? t('Sort columns alphabetically')
|
||||||
: t('Original table column order')
|
: t('Original table column order')
|
||||||
}
|
}
|
||||||
@ -169,13 +150,15 @@ class TableElement extends React.PureComponent {
|
|||||||
{table.selectStar && (
|
{table.selectStar && (
|
||||||
<CopyToClipboard
|
<CopyToClipboard
|
||||||
copyNode={
|
copyNode={
|
||||||
<IconTooltip aria-label="Copy">
|
<IconTooltip
|
||||||
|
aria-label="Copy"
|
||||||
|
tooltip={t('Copy SELECT statement to the clipboard')}
|
||||||
|
>
|
||||||
<i aria-hidden className="fa fa-clipboard pull-left m-l-2" />
|
<i aria-hidden className="fa fa-clipboard pull-left m-l-2" />
|
||||||
</IconTooltip>
|
</IconTooltip>
|
||||||
}
|
}
|
||||||
text={table.selectStar}
|
text={table.selectStar}
|
||||||
shouldShowText={false}
|
shouldShowText={false}
|
||||||
tooltipText={t('Copy SELECT statement to the clipboard')}
|
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
{table.view && (
|
{table.view && (
|
||||||
@ -187,56 +170,52 @@ class TableElement extends React.PureComponent {
|
|||||||
)}
|
)}
|
||||||
<IconTooltip
|
<IconTooltip
|
||||||
className="fa fa-times table-remove pull-left m-l-2 pointer"
|
className="fa fa-times table-remove pull-left m-l-2 pointer"
|
||||||
onClick={this.removeTable}
|
onClick={removeTable}
|
||||||
tooltip={t('Remove table preview')}
|
tooltip={t('Remove table preview')}
|
||||||
/>
|
/>
|
||||||
</ButtonGroup>
|
</ButtonGroup>
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
renderHeader() {
|
const renderHeader = () => (
|
||||||
const { table } = this.props;
|
<div
|
||||||
return (
|
className="clearfix header-container"
|
||||||
<div
|
onMouseEnter={() => setHover(true)}
|
||||||
className="clearfix header-container"
|
onMouseLeave={() => setHover(false)}
|
||||||
onMouseEnter={() => this.setHover(true)}
|
>
|
||||||
onMouseLeave={() => this.setHover(false)}
|
<Tooltip
|
||||||
|
id="copy-to-clipboard-tooltip"
|
||||||
|
placement="topLeft"
|
||||||
|
style={{ cursor: 'pointer' }}
|
||||||
|
title={table.name}
|
||||||
|
trigger={['hover']}
|
||||||
>
|
>
|
||||||
<Tooltip
|
<StyledSpan data-test="collapse" className="table-name">
|
||||||
id="copy-to-clipboard-tooltip"
|
<strong>{table.name}</strong>
|
||||||
placement="topLeft"
|
</StyledSpan>
|
||||||
style={{ cursor: 'pointer' }}
|
</Tooltip>
|
||||||
title={table.name}
|
|
||||||
trigger={['hover']}
|
|
||||||
>
|
|
||||||
<StyledSpan data-test="collapse" className="table-name">
|
|
||||||
<strong>{table.name}</strong>
|
|
||||||
</StyledSpan>
|
|
||||||
</Tooltip>
|
|
||||||
|
|
||||||
<div className="pull-right header-right-side">
|
<div className="pull-right header-right-side">
|
||||||
{table.isMetadataLoading || table.isExtraMetadataLoading ? (
|
{table.isMetadataLoading || table.isExtraMetadataLoading ? (
|
||||||
<Loading position="inline" />
|
<Loading position="inline" />
|
||||||
) : (
|
) : (
|
||||||
<Fade
|
<Fade
|
||||||
data-test="fade"
|
data-test="fade"
|
||||||
hovered={this.state.hovered}
|
hovered={hovered}
|
||||||
onClick={e => e.stopPropagation()}
|
onClick={e => e.stopPropagation()}
|
||||||
>
|
>
|
||||||
{this.renderControls()}
|
{renderControls()}
|
||||||
</Fade>
|
</Fade>
|
||||||
)}
|
)}
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
</div>
|
||||||
}
|
);
|
||||||
|
|
||||||
renderBody() {
|
const renderBody = () => {
|
||||||
const { table } = this.props;
|
|
||||||
let cols;
|
let cols;
|
||||||
if (table.columns) {
|
if (table.columns) {
|
||||||
cols = table.columns.slice();
|
cols = table.columns.slice();
|
||||||
if (this.state.sortColumns) {
|
if (sortColumns) {
|
||||||
cols.sort((a, b) => {
|
cols.sort((a, b) => {
|
||||||
const colA = a.name.toUpperCase();
|
const colA = a.name.toUpperCase();
|
||||||
const colB = b.name.toUpperCase();
|
const colB = b.name.toUpperCase();
|
||||||
@ -253,33 +232,54 @@ class TableElement extends React.PureComponent {
|
|||||||
|
|
||||||
const metadata = (
|
const metadata = (
|
||||||
<div
|
<div
|
||||||
onMouseEnter={() => this.setHover(true)}
|
onMouseEnter={() => setHover(true)}
|
||||||
onMouseLeave={() => this.setHover(false)}
|
onMouseLeave={() => setHover(false)}
|
||||||
css={{ paddingTop: 6 }}
|
css={{ paddingTop: 6 }}
|
||||||
>
|
>
|
||||||
{this.renderWell()}
|
{renderWell()}
|
||||||
<div>
|
<div>
|
||||||
{cols &&
|
{cols?.map(col => (
|
||||||
cols.map(col => <ColumnElement column={col} key={col.name} />)}
|
<ColumnElement column={col} key={col.name} />
|
||||||
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
return metadata;
|
return metadata;
|
||||||
}
|
};
|
||||||
|
|
||||||
render() {
|
const collapseExpandIcon = () => (
|
||||||
return (
|
<IconTooltip
|
||||||
<Collapse.Panel
|
style={{
|
||||||
{...this.props}
|
position: 'fixed',
|
||||||
header={this.renderHeader()}
|
right: '16px',
|
||||||
className="TableElement"
|
left: 'auto',
|
||||||
forceRender="true"
|
fontSize: '12px',
|
||||||
>
|
transform: 'rotate(90deg)',
|
||||||
{this.renderBody()}
|
display: 'flex',
|
||||||
</Collapse.Panel>
|
alignItems: 'center',
|
||||||
);
|
}}
|
||||||
}
|
aria-label="Collapse"
|
||||||
}
|
tooltip={t(`${isActive ? 'Collapse' : 'Expand'} table preview`)}
|
||||||
|
>
|
||||||
|
<Icons.RightOutlined
|
||||||
|
iconSize="s"
|
||||||
|
style={isActive ? { transform: 'rotateY(180deg)' } : null}
|
||||||
|
/>
|
||||||
|
</IconTooltip>
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Collapse.Panel
|
||||||
|
{...props}
|
||||||
|
header={renderHeader()}
|
||||||
|
className="TableElement"
|
||||||
|
forceRender
|
||||||
|
expandIcon={collapseExpandIcon}
|
||||||
|
>
|
||||||
|
{renderBody()}
|
||||||
|
</Collapse.Panel>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
TableElement.propTypes = propTypes;
|
TableElement.propTypes = propTypes;
|
||||||
TableElement.defaultProps = defaultProps;
|
TableElement.defaultProps = defaultProps;
|
||||||
|
Loading…
Reference in New Issue
Block a user