pt/superset
1
0
Fork 0
mirror of https://github.com/apache/superset.git synced 2024-09-12 00:29:39 -04:00
Code Issues Packages Projects Releases Wiki Activity

refactor: Convert TableElement.jsx component from class to functional with hooks (#14830)

Browse Source 
* 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:
Corbin Robb 2021-06-03 17:04:56 -06:00 committed by GitHub
parent f652908a70
commit 004a6d9e54
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 118 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
superset-frontend/spec/javascripts/sqllab/TableElement_spec.jsx
View File

@ -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',
); );

202
superset-frontend/src/SqlLab/components/TableElement.jsx
View File

@ -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;