refactor: sqleditorleftbar to typescript (#17926)

* Creating draft PR to address bug

* Still working on solving re rendering bug

* Cleaning up in preparation for push

* Starting conversion to TypeScript

* Working on conversion

* Continued working on typescript conversion, referenced other files for different types, still a rough version of final product

* Added type assertion to actions in props, and added types to some component functions

* Progress on typescript conversion

* Fixed typing issue on collapseStyles

* Fixed styling on div, child of StyledScrollbarContainer

* Attempting to address issues with the actions passed into the TableElement

* Resolved typescript warning on actions of the TableElement component

* Made changes suggested by Arash

* Tested the component without dbId, cleaned up lingering comments

* Made more changes suggested by Arash, removed offline from the SqlEditorLeftBarProps interface

* Made change suggested by Hugh

* Changed the expanded type from any to boolean

superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx

@@ -17,39 +17,50 @@
  * under the License.
  */
 import React from 'react';
-import PropTypes from 'prop-types';
 import Button from 'src/components/Button';
-import { t, styled, css } from '@superset-ui/core';
+import { t, styled, css, SupersetTheme } from '@superset-ui/core';
 import Collapse from 'src/components/Collapse';
 import Icons from 'src/components/Icons';
 import TableSelector from 'src/components/TableSelector';
 import { IconTooltip } from 'src/components/IconTooltip';
-import TableElement from '../TableElement';
+import { QueryEditor } from 'src/SqlLab/types';
+import { DatabaseObject } from 'src/components/DatabaseSelector';
+import TableElement, { Table, TableElementProps } from '../TableElement';
 
-const propTypes = {
-  queryEditor: PropTypes.object.isRequired,
-  height: PropTypes.number,
-  tables: PropTypes.array,
-  actions: PropTypes.object,
-  database: PropTypes.object,
-  offline: PropTypes.bool,
-};
+interface ExtendedTable extends Table {
+  expanded: boolean;
+}
 
-const defaultProps = {
-  actions: {},
-  height: 500,
-  offline: false,
-  tables: [],
-};
+interface actionsTypes {
+  queryEditorSetDb: (queryEditor: QueryEditor, dbId: number) => void;
+  queryEditorSetFunctionNames: (queryEditor: QueryEditor, dbId: number) => void;
+  collapseTable: (table: Table) => void;
+  expandTable: (table: Table) => void;
+  addTable: (queryEditor: any, value: any, schema: any) => void;
+  setDatabases: (arg0: any) => {};
+  addDangerToast: (msg: string) => void;
+  queryEditorSetSchema: (schema?: string) => void;
+  queryEditorSetSchemaOptions: () => void;
+  queryEditorSetTableOptions: (options: Array<any>) => void;
+  resetState: () => void;
+}
+
+interface SqlEditorLeftBarProps {
+  queryEditor: QueryEditor;
+  height?: number;
+  tables?: ExtendedTable[];
+  actions: actionsTypes & TableElementProps['actions'];
+  database: DatabaseObject;
+}
 
 const StyledScrollbarContainer = styled.div`
   flex: 1 1 auto;
   overflow: auto;
 `;
 
-const collapseStyles = css`
+const collapseStyles = (theme: SupersetTheme) => css`
   .ant-collapse-item {
-    margin-bottom: ${({ theme }) => theme.gridUnit * 3}px;
+    margin-bottom: ${theme.gridUnit * 3}px;
   }
   .ant-collapse-header {
     padding: 0px !important;
@@ -57,13 +68,13 @@ const collapseStyles = css`
     align-items: center;
   }
   .ant-collapse-content-box {
-    padding: 0px ${({ theme }) => theme.gridUnit * 4}px 0px 0px !important;
+    padding: 0px ${theme.gridUnit * 4}px 0px 0px !important;
   }
   .ant-collapse-arrow {
-    top: ${({ theme }) => theme.gridUnit * 2}px !important;
-    color: ${({ theme }) => theme.colors.primary.dark1} !important;
+    top: ${theme.gridUnit * 2}px !important;
+    color: ${theme.colors.primary.dark1} !important;
     &: hover {
-      color: ${({ theme }) => theme.colors.primary.dark2} !important;
+      color: ${theme.colors.primary.dark2} !important;
     }
   }
 `;
@@ -71,32 +82,35 @@ const collapseStyles = css`
 export default function SqlEditorLeftBar({
   actions,
   database,
-  height,
   queryEditor,
-  tables: tb,
-}) {
-  const onDbChange = db => {
-    actions.queryEditorSetDb(queryEditor, db.id);
-    actions.queryEditorSetFunctionNames(queryEditor, db.id);
+  tables = [],
+  height = 500,
+}: SqlEditorLeftBarProps) {
+  const onDbChange = ({ id: dbId }: { id: number }) => {
+    actions.queryEditorSetDb(queryEditor, dbId);
+    actions.queryEditorSetFunctionNames(queryEditor, dbId);
   };
 
-  const onTableChange = (tableName, schemaName) => {
+  const onTableChange = (tableName: string, schemaName: string) => {
     if (tableName && schemaName) {
       actions.addTable(queryEditor, tableName, schemaName);
     }
   };
 
-  const onToggleTable = tables => {
-    tb.forEach(table => {
-      if (!tables.includes(table.id.toString()) && table.expanded) {
+  const onToggleTable = (updatedTables: string[]) => {
+    tables.forEach((table: ExtendedTable) => {
+      if (!updatedTables.includes(table.id.toString()) && table.expanded) {
         actions.collapseTable(table);
-      } else if (tables.includes(table.id.toString()) && !table.expanded) {
+      } else if (
+        updatedTables.includes(table.id.toString()) &&
+        !table.expanded
+      ) {
         actions.expandTable(table);
       }
     });
   };
 
-  const renderExpandIconWithTooltip = ({ isActive }) => (
+  const renderExpandIconWithTooltip = ({ isActive }: { isActive: boolean }) => (
     <IconTooltip
       css={css`
         transform: rotate(90deg);
@@ -122,7 +136,6 @@ export default function SqlEditorLeftBar({
     <div className="SqlEditorLeftBar">
       <TableSelector
         database={database}
-        dbId={queryEditor.dbId}
         getDbList={actions.setDatabases}
         handleError={actions.addDangerToast}
         onDbChange={onDbChange}
@@ -137,12 +150,11 @@ export default function SqlEditorLeftBar({
       <StyledScrollbarContainer>
         <div
           css={css`
-            height: ${props => props.contentHeight}px;
+            height: ${tableMetaDataHeight}px;
           `}
-          contentHeight={tableMetaDataHeight}
         >
           <Collapse
-            activeKey={tb
+            activeKey={tables
               .filter(({ expanded }) => expanded)
               .map(({ id }) => id)}
             css={collapseStyles}
@@ -151,7 +163,7 @@ export default function SqlEditorLeftBar({
             onChange={onToggleTable}
             expandIcon={renderExpandIconWithTooltip}
           >
-            {tb.map(table => (
+            {tables.map(table => (
               <TableElement table={table} key={table.id} actions={actions} />
             ))}
           </Collapse>
@@ -169,6 +181,3 @@ export default function SqlEditorLeftBar({
     </div>
   );
 }
-
-SqlEditorLeftBar.propTypes = propTypes;
-SqlEditorLeftBar.defaultProps = defaultProps;

superset-frontend/src/SqlLab/components/TableElement/index.tsx

@@ -37,7 +37,7 @@ interface Column {
   type: string;
 }
 
-interface Table {
+export interface Table {
   id: string;
   name: string;
   partitions?: {
@@ -53,7 +53,7 @@ interface Table {
   columns: Column[];
 }
 
-interface TableElementProps {
+export interface TableElementProps {
   table: Table;
   actions: {
     removeDataPreview: (table: Table) => void;