chore: add typing to more sqllab components (#10278)

superset-frontend/spec/javascripts/sqllab/fixtures.ts

@@ -18,6 +18,7 @@
  */
 import sinon from 'sinon';
 import * as actions from 'src/SqlLab/actions/sqlLab';
+import { ColumnKeyTypeType } from 'src/SqlLab/components/ColumnElement';
 
 export const mockedActions = sinon.stub({ ...actions });
 
@@ -68,7 +69,7 @@ export const table = {
       keys: [
         {
           column_names: ['id'],
-          type: 'pk',
+          type: 'pk' as ColumnKeyTypeType,
           name: null,
         },
       ],
@@ -84,14 +85,14 @@ export const table = {
           name: 'slices_ibfk_1',
           referred_columns: ['id'],
           referred_table: 'datasources',
-          type: 'fk',
+          type: 'fk' as ColumnKeyTypeType,
           referred_schema: 'carapal',
           options: {},
         },
         {
           unique: false,
           column_names: ['druid_datasource_id'],
-          type: 'index',
+          type: 'index' as ColumnKeyTypeType,
           name: 'druid_datasource_id',
         },
       ],
@@ -283,7 +284,7 @@ export const queries = [
 export const queryWithBadColumns = {
   ...queries[0],
   results: {
-    data: queries[0].results.data,
+    data: queries[0].results?.data,
     selected_columns: [
       {
         is_date: true,

superset-frontend/src/SqlLab/components/ColumnElement.tsx

@@ -36,13 +36,22 @@ const tooltipTitleMap = {
   index: 'Index',
 };
 
-export default function ColumnElement(props) {
-  const col = props.column;
-  let name = col.name;
+export type ColumnKeyTypeType = keyof typeof tooltipTitleMap;
+
+interface ColumnElementProps {
+  column: {
+    name: string;
+    keys?: { type: ColumnKeyTypeType }[];
+    type: string;
+  };
+}
+
+export default function ColumnElement({ column }: ColumnElementProps) {
+  let name: React.ReactNode = column.name;
   let icons;
-  if (col.keys && col.keys.length > 0) {
-    name = <strong>{col.name}</strong>;
-    icons = col.keys.map((key, i) => (
+  if (column.keys && column.keys.length > 0) {
+    name = <strong>{column.name}</strong>;
+    icons = column.keys.map((key, i) => (
       <span key={i} className="ColumnElement">
         <OverlayTrigger
           placement="right"
@@ -68,7 +77,7 @@ export default function ColumnElement(props) {
         {icons}
       </div>
       <div className="pull-right text-muted">
-        <small> {col.type}</small>
+        <small> {column.type}</small>
       </div>
     </div>
   );

superset-frontend/src/SqlLab/components/ShowSQL.tsx

@@ -17,58 +17,48 @@
  * under the License.
  */
 import React from 'react';
-import PropTypes from 'prop-types';
 import SyntaxHighlighter, {
   registerLanguage,
+  // @ts-ignore
 } from 'react-syntax-highlighter/dist/light';
+// @ts-ignore
 import sql from 'react-syntax-highlighter/dist/languages/hljs/sql';
+// @ts-ignore
 import github from 'react-syntax-highlighter/dist/styles/hljs/github';
 
-import { t } from '@superset-ui/translation';
-
 import Link from '../../components/Link';
 import ModalTrigger from '../../components/ModalTrigger';
 
 registerLanguage('sql', sql);
 
-const propTypes = {
-  tooltipText: PropTypes.string,
-  title: PropTypes.string,
-  sql: PropTypes.string,
-};
-
-const defaultProps = {
-  tooltipText: t('Show SQL'),
-  title: t('SQL statement'),
-  sql: '',
-};
-
-export default class ShowSQL extends React.PureComponent {
-  renderModalBody() {
-    return (
-      <div>
-        <SyntaxHighlighter language="sql" style={github}>
-          {this.props.sql}
-        </SyntaxHighlighter>
-      </div>
-    );
-  }
-  render() {
-    return (
-      <ModalTrigger
-        modalTitle={this.props.title}
-        triggerNode={
-          <Link
-            className="fa fa-eye pull-left m-l-2"
-            tooltip={this.props.tooltipText}
-            href="#"
-          />
-        }
-        modalBody={this.renderModalBody()}
-      />
-    );
-  }
+interface ShowSQLProps {
+  sql: string;
+  title: string;
+  tooltipText: string;
 }
 
-ShowSQL.propTypes = propTypes;
-ShowSQL.defaultProps = defaultProps;
+export default function ShowSQL({
+  tooltipText,
+  title,
+  sql: sqlString,
+}: ShowSQLProps) {
+  return (
+    <ModalTrigger
+      modalTitle={title}
+      triggerNode={
+        <Link
+          className="fa fa-eye pull-left m-l-2"
+          tooltip={tooltipText}
+          href="#"
+        />
+      }
+      modalBody={
+        <div>
+          <SyntaxHighlighter language="sql" style={github}>
+            {sqlString}
+          </SyntaxHighlighter>
+        </div>
+      }
+    />
+  );
+}

superset-frontend/webpack.config.js

@@ -180,7 +180,7 @@ const config = {
     addSlice: addPreamble('/src/addSlice/index.tsx'),
     explore: addPreamble('/src/explore/index.jsx'),
     dashboard: addPreamble('/src/dashboard/index.jsx'),
-    sqllab: addPreamble('/src/SqlLab/index.jsx'),
+    sqllab: addPreamble('/src/SqlLab/index.tsx'),
     welcome: addPreamble('/src/welcome/index.jsx'),
     profile: addPreamble('/src/profile/index.tsx'),
     showSavedQuery: [path.join(APP_DIR, '/src/showSavedQuery/index.jsx')],