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 <corbin@Corbins-MacBook-Pro.local>

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 }) => (
+    <IconTooltip
+      css={css`
+        transform: rotate(90deg);
+      `}
+      aria-label="Collapse"
+      tooltip={t(`${isActive ? 'Collapse' : 'Expand'} table preview`)}
+    >
+      <Icons.RightOutlined
+        iconSize="s"
+        css={css`
+          transform: ${isActive ? 'rotateY(180deg)' : ''};
+        `}
+      />
+    </IconTooltip>
+  );
+
   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 => (
                 <TableElement