From b179863e250317d617b388a28a01583124fe65ee Mon Sep 17 00:00:00 2001 From: Corbin Robb <31329271+corbinrobb@users.noreply.github.com> Date: Tue, 15 Jun 2021 14:29:45 -0600 Subject: [PATCH] refactor: Convert TableElement to TypeScript (#14978) * Convert TableElement to typescript * Change type names to better match naming conventions in other files * Fix import order and update tests on TableElement * Remove defaultProps * Destructure the props * Use Rest and Spread syntax to condense props destructuring * Fix TypeScript errors and add comment to explain antd props and types weirdness * Remove comment, add consistency with other files, and use method chaining to make more concise Co-authored-by: Corbin Robb --- .../javascripts/sqllab/TableElement_spec.jsx | 10 +- .../SqlLab/components/SqlEditorLeftBar.jsx | 20 ++++ .../{TableElement.jsx => TableElement.tsx} | 97 ++++++++----------- 3 files changed, 66 insertions(+), 61 deletions(-) rename superset-frontend/src/SqlLab/components/{TableElement.jsx => TableElement.tsx} (80%) diff --git a/superset-frontend/spec/javascripts/sqllab/TableElement_spec.jsx b/superset-frontend/spec/javascripts/sqllab/TableElement_spec.jsx index 8c07008815..c10e12048e 100644 --- a/superset-frontend/spec/javascripts/sqllab/TableElement_spec.jsx +++ b/superset-frontend/spec/javascripts/sqllab/TableElement_spec.jsx @@ -55,7 +55,7 @@ describe('TableElement', () => { }, }, ); - expect(wrapper.find(IconTooltip)).toHaveLength(5); + expect(wrapper.find(IconTooltip)).toHaveLength(4); }); it('has 14 columns', () => { const wrapper = shallow(); @@ -112,20 +112,20 @@ describe('TableElement', () => { }, ); expect( - wrapper.find(IconTooltip).at(2).hasClass('fa-sort-alpha-asc'), + wrapper.find(IconTooltip).at(1).hasClass('fa-sort-alpha-asc'), ).toEqual(true); expect( - wrapper.find(IconTooltip).at(2).hasClass('fa-sort-numeric-asc'), + wrapper.find(IconTooltip).at(1).hasClass('fa-sort-numeric-asc'), ).toEqual(false); wrapper.find('.header-container').hostNodes().simulate('click'); expect(wrapper.find(ColumnElement).first().props().column.name).toBe('id'); wrapper.find('.header-container').simulate('mouseEnter'); wrapper.find('.sort-cols').hostNodes().simulate('click'); expect( - wrapper.find(IconTooltip).at(2).hasClass('fa-sort-numeric-asc'), + wrapper.find(IconTooltip).at(1).hasClass('fa-sort-numeric-asc'), ).toEqual(true); expect( - wrapper.find(IconTooltip).at(2).hasClass('fa-sort-alpha-asc'), + wrapper.find(IconTooltip).at(1).hasClass('fa-sort-alpha-asc'), ).toEqual(false); expect(wrapper.find(ColumnElement).first().props().column.name).toBe( 'active', diff --git a/superset-frontend/src/SqlLab/components/SqlEditorLeftBar.jsx b/superset-frontend/src/SqlLab/components/SqlEditorLeftBar.jsx index 59af1d345d..3989a23b6a 100644 --- a/superset-frontend/src/SqlLab/components/SqlEditorLeftBar.jsx +++ b/superset-frontend/src/SqlLab/components/SqlEditorLeftBar.jsx @@ -21,8 +21,10 @@ import PropTypes from 'prop-types'; import Button from 'src/components/Button'; import { t, styled, css } from '@superset-ui/core'; import Collapse from 'src/components/Collapse'; +import Icons from 'src/components/Icons'; import TableElement from './TableElement'; import TableSelector from '../../components/TableSelector'; +import { IconTooltip } from '../../components/IconTooltip'; const propTypes = { queryEditor: PropTypes.object.isRequired, @@ -134,6 +136,23 @@ export default class SqlEditorLeftBar extends React.PureComponent { this.props.actions.addTable(this.props.queryEditor, tableName, schemaName); } + renderExpandIconWithTooltip = ({ isActive }) => ( + + + + ); + render() { const shouldShowReset = window.location.search === '?reset=1'; const tableMetaDataHeight = this.props.height - 130; // 130 is the height of the selects above @@ -184,6 +203,7 @@ export default class SqlEditorLeftBar extends React.PureComponent { expandIconPosition="right" ghost onChange={this.onToggleTable} + expandIcon={this.renderExpandIconWithTooltip} > {this.props.tables.map(table => ( void; + removeTable: (table: Table) => void; + }; +} const StyledSpan = styled.span` color: ${({ theme }) => theme.colors.primary.dark1}; @@ -53,16 +70,14 @@ const StyledSpan = styled.span` const Fade = styled.div` transition: all ${({ theme }) => theme.transitionTiming}s; - opacity: ${props => (props.hovered ? 1 : 0)}; + opacity: ${(props: { hovered: boolean }) => (props.hovered ? 1 : 0)}; `; -const TableElement = props => { +const TableElement = ({ table, actions, ...props }: TableElementProps) => { const [sortColumns, setSortColumns] = useState(false); const [hovered, setHovered] = useState(false); - const { table, actions, isActive } = props; - - const setHover = hovered => { + const setHover = (hovered: boolean) => { debounce(() => setHovered(hovered), 100)(); }; @@ -92,10 +107,10 @@ const TableElement = props => { /> ); } - let latest = Object.entries(table.partitions?.latest || []).map( - ([key, value]) => `${key}=${value}`, - ); - latest = latest.join('/'); + const latest = Object.entries(table.partitions?.latest || []) + .map(([key, value]) => `${key}=${value}`) + .join('/'); + header = (
@@ -142,9 +157,9 @@ const TableElement = props => { } onClick={toggleSortColumns} tooltip={ - !sortColumns - ? t('Sort columns alphabetically') - : t('Original table column order') + sortColumns + ? t('Original table column order') + : t('Sort columns alphabetically') } /> {table.selectStar && ( @@ -216,16 +231,10 @@ const TableElement = props => { if (table.columns) { cols = table.columns.slice(); if (sortColumns) { - cols.sort((a, b) => { + cols.sort((a: Column, b: Column) => { const colA = a.name.toUpperCase(); const colB = b.name.toUpperCase(); - if (colA < colB) { - return -1; - } - if (colA > colB) { - return 1; - } - return 0; + return colA < colB ? -1 : colA > colB ? 1 : 0; }); } } @@ -247,41 +256,17 @@ const TableElement = props => { return metadata; }; - const collapseExpandIcon = () => ( - - - - ); - return ( {renderBody()} ); }; -TableElement.propTypes = propTypes; -TableElement.defaultProps = defaultProps; - export default TableElement;