From 6f0d43709e20afb210385ca5c84dc15de2dc8970 Mon Sep 17 00:00:00 2001 From: Kamil Gabryjelski Date: Tue, 22 Sep 2020 00:47:33 +0200 Subject: [PATCH] ESLint: Remove ts-ignore comments (#10933) * Upgrade json-bigint, add @types/json-bigint to deps * Upgrade react-bootstrap-dialog * Fix ts-ignore * Fix ts-ignore * Fix ts-ignore * Upgrade react-syntax-highlighter, fix ts-ignore * Fix ts-ignore * Fix ts-ignore in styles.tsx * Wrap Input in div to pass onPaste * Change esm to cjs imports for highlighter to fix tests * Add null checks --- superset-frontend/package-lock.json | 138 +++++++++++++----- superset-frontend/package.json | 9 +- .../src/SqlLab/components/HighlightedSql.jsx | 10 +- .../src/SqlLab/components/LimitControl.tsx | 17 ++- .../src/SqlLab/components/ShowSQL.tsx | 13 +- .../src/components/DeleteModal.tsx | 12 +- .../FilterableTable/FilterableTable.tsx | 18 +-- superset-frontend/src/components/Link.tsx | 1 - .../src/components/ListView/Filters.tsx | 3 - .../Select/SupersetStyledSelect.tsx | 7 +- .../WindowedSelect/WindowedMenuList.tsx | 1 - .../src/components/Select/styles.tsx | 26 ++-- .../src/datasource/ChangeDatasourceModal.tsx | 9 +- .../src/datasource/DatasourceModal.tsx | 1 - .../explore/components/DisplayQueryButton.jsx | 22 ++- .../explore/components/PropertiesModal.tsx | 28 ++-- superset-frontend/src/featureFlags.ts | 2 + superset-frontend/src/setup/setupApp.ts | 2 - .../src/views/CRUD/welcome/Welcome.tsx | 30 +++- 19 files changed, 217 insertions(+), 132 deletions(-) diff --git a/superset-frontend/package-lock.json b/superset-frontend/package-lock.json index 0a8b674d0949b..4c73a398a4055 100644 --- a/superset-frontend/package-lock.json +++ b/superset-frontend/package-lock.json @@ -3399,6 +3399,11 @@ "inline-style-prefixer": "^3.0.1", "string-hash": "^1.1.3" } + }, + "immutable": { + "version": "3.8.2", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-3.8.2.tgz", + "integrity": "sha1-wkOZUUVbs5kT2vKBN28VMOEErfM=" } } }, @@ -15494,6 +15499,13 @@ "react-map-gl": "^4.0.10", "supercluster": "^4.1.1", "viewport-mercator-project": "^6.1.1" + }, + "dependencies": { + "immutable": { + "version": "3.8.2", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-3.8.2.tgz", + "integrity": "sha1-wkOZUUVbs5kT2vKBN28VMOEErfM=" + } } }, "@superset-ui/legacy-plugin-chart-paired-t-test": { @@ -17257,6 +17269,12 @@ "@types/sizzle": "*" } }, + "@types/json-bigint": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@types/json-bigint/-/json-bigint-1.0.0.tgz", + "integrity": "sha512-WW+0cfH3ovFN6ROV+p/Xfw36dT6s16hbXBYIG49PYw6+j6e+AkpqYccctgxwyicBmC8CZDBnPhOH94shFhXgHQ==", + "dev": true + }, "@types/json-schema": { "version": "7.0.4", "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.4.tgz", @@ -20306,9 +20324,9 @@ "integrity": "sha512-+hN/Zh2D08Mx65pZ/4g5bsmNiZUuChDiQfTUQ7qJr4/kuopCr88xZsAXv6mBoZEsUI4OuGHlX59qE94K2mMW8Q==" }, "bignumber.js": { - "version": "7.2.1", - "resolved": "https://registry.npmjs.org/bignumber.js/-/bignumber.js-7.2.1.tgz", - "integrity": "sha512-S4XzBk5sMB+Rcb/LNcpzXr57VRTxgAvaAEDAl1AwRx27j00hT84O6OkteE7u8UB3NuaaygCRrEpqox4uDOrbdQ==" + "version": "9.0.0", + "resolved": "https://registry.npmjs.org/bignumber.js/-/bignumber.js-9.0.0.tgz", + "integrity": "sha512-t/OYhhJ2SD+YGBQcjY8GzzDHEk9f3nerxjtfa6tlMXfe7frs/WozhvCNoGvpM0P3bNf3Gq5ZRMlGr5f3r4/N8A==" }, "binary-extensions": { "version": "1.12.0", @@ -27635,9 +27653,9 @@ "dev": true }, "highlight.js": { - "version": "9.12.0", - "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-9.12.0.tgz", - "integrity": "sha1-5tnb5Xy+/mB1HwKvM2GVhwyQwB4=" + "version": "10.2.0", + "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.2.0.tgz", + "integrity": "sha512-OryzPiqqNCfO/wtFo619W+nPYALM6u7iCQkum4bqRmmlcTikOkmlL06i009QelynBPAlNByTQU6cBB2cOBQtCw==" }, "history": { "version": "4.10.1", @@ -28094,9 +28112,9 @@ "dev": true }, "immutable": { - "version": "3.8.2", - "resolved": "https://registry.npmjs.org/immutable/-/immutable-3.8.2.tgz", - "integrity": "sha1-wkOZUUVbs5kT2vKBN28VMOEErfM=" + "version": "4.0.0-rc.12", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.0.0-rc.12.tgz", + "integrity": "sha512-0M2XxkZLx/mi3t8NVwIm1g8nHoEmM9p9UBl/G9k4+hm0kBgOVdMV/B3CY5dQ8qG8qc80NN4gDV4HQv6FTJ5q7A==" }, "import-cwd": { "version": "2.1.0", @@ -32799,11 +32817,11 @@ "dev": true }, "json-bigint": { - "version": "0.3.0", - "resolved": "https://registry.npmjs.org/json-bigint/-/json-bigint-0.3.0.tgz", - "integrity": "sha1-DM2RLEuCcNBfBW+9E4FLU9OCWx4=", + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/json-bigint/-/json-bigint-1.0.0.tgz", + "integrity": "sha512-SiPv/8VpZuWbvLSMtTDU8hEfrZWg/mH/nV/b4o0CYbSxu1UIQPLdwKOCIyLQX+VIPO5vrLX3i8qtqFyhdPSUSQ==", "requires": { - "bignumber.js": "^7.0.0" + "bignumber.js": "^9.0.0" } }, "json-parse-better-errors": { @@ -33417,12 +33435,19 @@ } }, "lowlight": { - "version": "1.9.2", - "resolved": "https://registry.npmjs.org/lowlight/-/lowlight-1.9.2.tgz", - "integrity": "sha512-Ek18ElVCf/wF/jEm1b92gTnigh94CtBNWiZ2ad+vTgW7cTmQxUY3I98BjHK68gZAJEWmybGBZgx9qv3QxLQB/Q==", + "version": "1.14.0", + "resolved": "https://registry.npmjs.org/lowlight/-/lowlight-1.14.0.tgz", + "integrity": "sha512-N2E7zTM7r1CwbzwspPxJvmjAbxljCPThTFawEX2Z7+P3NGrrvY54u8kyU16IY4qWfoVIxY8SYCS8jTkuG7TqYA==", "requires": { - "fault": "^1.0.2", - "highlight.js": "~9.12.0" + "fault": "^1.0.0", + "highlight.js": "~10.1.0" + }, + "dependencies": { + "highlight.js": { + "version": "10.1.2", + "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.1.2.tgz", + "integrity": "sha512-Q39v/Mn5mfBlMff9r+zzA+gWxRsCRKwEMvYTiisLr/XUiFI/4puWt0Ojdko3R3JCNWGdOWaA5g/Yxqa23kC5AA==" + } } }, "lru-cache": { @@ -37777,6 +37802,7 @@ "version": "1.15.0", "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.15.0.tgz", "integrity": "sha512-Lf2JrFYx8FanHrjoV5oL8YHCclLQgbJcVZR+gikGGMqz6ub5QVWDTM6YIwm3BuPxM/LOV+rKns3LssXNLIf+DA==", + "dev": true, "requires": { "clipboard": "^2.0.0" } @@ -39048,9 +39074,9 @@ } }, "react-bootstrap-dialog": { - "version": "0.10.0", - "resolved": "https://registry.npmjs.org/react-bootstrap-dialog/-/react-bootstrap-dialog-0.10.0.tgz", - "integrity": "sha1-/KXISATqK23r44M8bUt0gLz/AXU=" + "version": "0.13.0", + "resolved": "https://registry.npmjs.org/react-bootstrap-dialog/-/react-bootstrap-dialog-0.13.0.tgz", + "integrity": "sha512-mchodv4gJKFINq87OAJR8E3fpOHPyq3BY1xg3DUSH64j7T38DK0aOOK/zOcLuBxIEy9Wc2QWsjJqILXc8eWkoQ==" }, "react-bootstrap-slider": { "version": "2.1.5", @@ -40311,9 +40337,9 @@ "integrity": "sha512-p84kBqGaMoa7VYT0vZ/aOYRfJB+gw34yjpda1Z5KeLflg70HipZOT+MXQenEhdkPAABuE2Astq4zEPdMqUQxcg==" }, "react-overlays": { - "version": "0.9.1", - "resolved": "https://registry.npmjs.org/react-overlays/-/react-overlays-0.9.1.tgz", - "integrity": "sha512-b0asy/zHtRd0i2+2/uNxe3YVprF3bRT1guyr791DORjCzE/HSBMog+ul83CdtKQ1kZ+pLnxWCu5W3BMysFhHdQ==", + "version": "0.9.2", + "resolved": "https://registry.npmjs.org/react-overlays/-/react-overlays-0.9.2.tgz", + "integrity": "sha512-wOi+WqO0acnUAMCbTTW06/GRkYjHdlvIoyX4bYkLvxKrLgl2kX9WzFVyBdwukl2jvN7I7oX7ZXAz7MNOWYdgCA==", "requires": { "classnames": "^2.2.5", "dom-helpers": "^3.2.1", @@ -40580,15 +40606,56 @@ } }, "react-syntax-highlighter": { - "version": "7.0.4", - "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-7.0.4.tgz", - "integrity": "sha512-WtaHAlI5++csZ5uTnJc5+ozqqIzUkO/rnkv1GJ3CeRtjhTzbo12r9F0BICzhibr7gBWECd1Xgj1FKJEWZxcP4w==", + "version": "13.5.3", + "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-13.5.3.tgz", + "integrity": "sha512-crPaF+QGPeHNIblxxCdf2Lg936NAHKhNhuMzRL3F9ct6aYXL3NcZtCL0Rms9+qVo6Y1EQLdXGypBNSbPL/r+qg==", "requires": { - "babel-runtime": "^6.18.0", - "highlight.js": "~9.12.0", - "lowlight": "~1.9.1", - "prismjs": "^1.8.4", - "refractor": "^2.4.1" + "@babel/runtime": "^7.3.1", + "highlight.js": "^10.1.1", + "lowlight": "^1.14.0", + "prismjs": "^1.21.0", + "refractor": "^3.1.0" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.11.2", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.11.2.tgz", + "integrity": "sha512-TeWkU52so0mPtDcaCTxNBI/IHiz0pZgr8VEFqXFtZWpYD08ZB6FaSwVAS8MKRQAP3bYKiVjwysOJgMFY28o6Tw==", + "requires": { + "regenerator-runtime": "^0.13.4" + } + }, + "parse-entities": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-2.0.0.tgz", + "integrity": "sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ==", + "requires": { + "character-entities": "^1.0.0", + "character-entities-legacy": "^1.0.0", + "character-reference-invalid": "^1.0.0", + "is-alphanumerical": "^1.0.0", + "is-decimal": "^1.0.0", + "is-hexadecimal": "^1.0.0" + } + }, + "prismjs": { + "version": "1.21.0", + "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.21.0.tgz", + "integrity": "sha512-uGdSIu1nk3kej2iZsLyDoJ7e9bnPzIgY0naW/HdknGj61zScaprVEVGHrPoXqI+M9sP0NDnTK2jpkvmldpuqDw==", + "requires": { + "clipboard": "^2.0.0" + } + }, + "refractor": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/refractor/-/refractor-3.1.0.tgz", + "integrity": "sha512-bN8GvY6hpeXfC4SzWmYNQGLLF2ZakRDNBkgCL0vvl5hnpMrnyURk8Mv61v6pzn4/RBHzSWLp44SzMmVHqMGNww==", + "requires": { + "hastscript": "^5.0.0", + "parse-entities": "^2.0.0", + "prismjs": "~1.21.0" + } + } } }, "react-table": { @@ -41041,6 +41108,7 @@ "version": "2.6.2", "resolved": "https://registry.npmjs.org/refractor/-/refractor-2.6.2.tgz", "integrity": "sha512-AMNEGkhaXfhoa0/0mW0bHdfizDJnuHDK29/D5oQaKICf6DALQ+kDEHW/36oDHCdfva4XrZ+cdMhRvPsTI4OIjA==", + "dev": true, "requires": { "hastscript": "^5.0.0", "parse-entities": "^1.1.2", @@ -45266,9 +45334,9 @@ }, "dependencies": { "@babel/runtime": { - "version": "7.9.2", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.9.2.tgz", - "integrity": "sha512-NE2DtOdufG7R5vnfQUTehdTfNycfUANEtCa9PssN9O/xmTzP4E08UI797ixaei6hBEVL9BI/PsdJS5x7mWoB9Q==", + "version": "7.11.2", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.11.2.tgz", + "integrity": "sha512-TeWkU52so0mPtDcaCTxNBI/IHiz0pZgr8VEFqXFtZWpYD08ZB6FaSwVAS8MKRQAP3bYKiVjwysOJgMFY28o6Tw==", "requires": { "regenerator-runtime": "^0.13.4" } diff --git a/superset-frontend/package.json b/superset-frontend/package.json index f8f098012aeb5..786734a8e5878 100644 --- a/superset-frontend/package.json +++ b/superset-frontend/package.json @@ -108,10 +108,10 @@ "dom-to-image": "^2.6.0", "geolib": "^2.0.24", "global-box": "^1.2.0", - "immutable": "^3.8.2", + "immutable": "^4.0.0-rc.12", "interweave": "^11.2.0", "jquery": "^3.5.1", - "json-bigint": "^0.3.0", + "json-bigint": "^1.0.0", "lodash": "^4.17.20", "lodash-es": "^4.17.14", "mathjs": "^3.20.2", @@ -127,7 +127,7 @@ "react-ace": "^5.10.0", "react-avatar": "^3.9.7", "react-bootstrap": "^0.33.1", - "react-bootstrap-dialog": "^0.10.0", + "react-bootstrap-dialog": "^0.13.0", "react-bootstrap-slider": "2.1.5", "react-checkbox-tree": "^1.5.1", "react-color": "^2.13.8", @@ -150,7 +150,7 @@ "react-sortable-hoc": "^1.11.0", "react-split": "^2.0.4", "react-sticky": "^6.0.2", - "react-syntax-highlighter": "^7.0.4", + "react-syntax-highlighter": "^13.5.3", "react-table": "^7.2.1", "react-transition-group": "^2.5.3", "react-ultimate-pagination": "^1.2.0", @@ -200,6 +200,7 @@ "@types/fetch-mock": "^7.3.2", "@types/jest": "^26.0.3", "@types/jquery": "^3.3.32", + "@types/json-bigint": "^1.0.0", "@types/react": "^16.9.43", "@types/react-bootstrap": "^0.32.22", "@types/react-dom": "^16.9.8", diff --git a/superset-frontend/src/SqlLab/components/HighlightedSql.jsx b/superset-frontend/src/SqlLab/components/HighlightedSql.jsx index 57ce579106ea3..b143b37c74f76 100644 --- a/superset-frontend/src/SqlLab/components/HighlightedSql.jsx +++ b/superset-frontend/src/SqlLab/components/HighlightedSql.jsx @@ -18,16 +18,14 @@ */ import React from 'react'; import PropTypes from 'prop-types'; -import SyntaxHighlighter, { - registerLanguage, -} from 'react-syntax-highlighter/dist/light'; -import sql from 'react-syntax-highlighter/dist/languages/hljs/sql'; -import github from 'react-syntax-highlighter/dist/styles/hljs/github'; +import SyntaxHighlighter from 'react-syntax-highlighter/dist/cjs/light'; +import sql from 'react-syntax-highlighter/dist/cjs/languages/hljs/sql'; +import github from 'react-syntax-highlighter/dist/cjs/styles/hljs/github'; import { t } from '@superset-ui/core'; import ModalTrigger from '../../components/ModalTrigger'; -registerLanguage('sql', sql); +SyntaxHighlighter.registerLanguage('sql', sql); const defaultProps = { maxWidth: 50, diff --git a/superset-frontend/src/SqlLab/components/LimitControl.tsx b/superset-frontend/src/SqlLab/components/LimitControl.tsx index d0def628b3bf9..b5cca6375648a 100644 --- a/superset-frontend/src/SqlLab/components/LimitControl.tsx +++ b/superset-frontend/src/SqlLab/components/LimitControl.tsx @@ -17,7 +17,13 @@ * under the License. */ import React from 'react'; -import { FormGroup, FormControl, Overlay, Popover } from 'react-bootstrap'; +import { + FormGroup, + FormControl, + Overlay, + Popover, + FormControlProps, +} from 'react-bootstrap'; import Button from 'src/components/Button'; import { t, styled } from '@superset-ui/core'; @@ -105,9 +111,12 @@ export default class LimitControl extends React.PureComponent< value={textValue} placeholder={t(`Max: ${this.props.maxRow}`)} bsSize="small" - // @ts-ignore - onChange={(event: React.ChangeEvent) => - this.setState({ textValue: event.target.value }) + onChange={( + event: React.FormEvent, + ) => + this.setState({ + textValue: (event.currentTarget?.value as string) ?? '', + }) } /> diff --git a/superset-frontend/src/SqlLab/components/ShowSQL.tsx b/superset-frontend/src/SqlLab/components/ShowSQL.tsx index 002d16422fc7e..91134581a51d4 100644 --- a/superset-frontend/src/SqlLab/components/ShowSQL.tsx +++ b/superset-frontend/src/SqlLab/components/ShowSQL.tsx @@ -17,19 +17,14 @@ * under the License. */ import React from 'react'; -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 SyntaxHighlighter from 'react-syntax-highlighter/dist/cjs/light'; +import sql from 'react-syntax-highlighter/dist/cjs/languages/hljs/sql'; +import github from 'react-syntax-highlighter/dist/cjs/styles/hljs/github'; import Link from '../../components/Link'; import ModalTrigger from '../../components/ModalTrigger'; -registerLanguage('sql', sql); +SyntaxHighlighter.registerLanguage('sql', sql); interface ShowSQLProps { sql: string; diff --git a/superset-frontend/src/components/DeleteModal.tsx b/superset-frontend/src/components/DeleteModal.tsx index 62421ea128fb1..6e2bc90901b07 100644 --- a/superset-frontend/src/components/DeleteModal.tsx +++ b/superset-frontend/src/components/DeleteModal.tsx @@ -18,7 +18,7 @@ */ import { t, styled } from '@superset-ui/core'; import React, { useState } from 'react'; -import { FormGroup, FormControl } from 'react-bootstrap'; +import { FormGroup, FormControl, FormControlProps } from 'react-bootstrap'; import Modal from 'src/components/Modal'; import FormLabel from 'src/components/FormLabel'; @@ -70,10 +70,12 @@ export default function DeleteModal({ id="delete" type="text" bsSize="sm" - // @ts-ignore - onChange={(event: React.ChangeEvent) => - setDisableChange(event.target.value.toUpperCase() !== 'DELETE') - } + onChange={( + event: React.FormEvent, + ) => { + const targetValue = (event.currentTarget?.value as string) ?? ''; + setDisableChange(targetValue.toUpperCase() !== 'DELETE'); + }} /> diff --git a/superset-frontend/src/components/FilterableTable/FilterableTable.tsx b/superset-frontend/src/components/FilterableTable/FilterableTable.tsx index 047698adaa4cc..77b27108e5106 100644 --- a/superset-frontend/src/components/FilterableTable/FilterableTable.tsx +++ b/superset-frontend/src/components/FilterableTable/FilterableTable.tsx @@ -17,7 +17,6 @@ * under the License. */ import { List } from 'immutable'; -// @ts-ignore import JSONbig from 'json-bigint'; import React, { PureComponent } from 'react'; import JSONTree from 'react-json-tree'; @@ -185,15 +184,12 @@ export default class FilterableTable extends PureComponent< const PADDING = 40; // accounts for cell padding and width of sorting icon const widthsByColumnKey = {}; const cellContent = [].concat( - ...this.props.orderedColumnKeys.map(key => - this.list - .map((data: Datum) => - this.getCellContent({ cellData: data[key], columnKey: key }), - ) - // @ts-ignore - .push(key) - .toJS(), - ), + ...this.props.orderedColumnKeys.map(key => { + const cellContentList = this.list.map((data: Datum) => + this.getCellContent({ cellData: data[key], columnKey: key }), + ) as List; + return cellContentList.push(key).toJS(); + }), ); const colWidths = getMultipleTextDimensions({ @@ -223,7 +219,7 @@ export default class FilterableTable extends PureComponent< }: { cellData: CellDataType; columnKey: string; - }) { + }): string | JSX.Element { if (cellData === null) { return NULL; } diff --git a/superset-frontend/src/components/Link.tsx b/superset-frontend/src/components/Link.tsx index f35bdf7251ce9..6b75ff96b7b1f 100644 --- a/superset-frontend/src/components/Link.tsx +++ b/superset-frontend/src/components/Link.tsx @@ -17,7 +17,6 @@ * under the License. */ import React, { ReactNode } from 'react'; -// @ts-ignore import { OverlayTrigger, Tooltip } from 'react-bootstrap'; interface Props { diff --git a/superset-frontend/src/components/ListView/Filters.tsx b/superset-frontend/src/components/ListView/Filters.tsx index 3f17d2a3b693e..e9784d5282bd3 100644 --- a/superset-frontend/src/components/ListView/Filters.tsx +++ b/superset-frontend/src/components/ListView/Filters.tsx @@ -137,11 +137,8 @@ function SelectFilter({ defaultOptions themeConfig={filterSelectTheme} stylesConfig={filterSelectStyles} - // @ts-ignore value={selectedOption} - // @ts-ignore onChange={onChange} - // @ts-ignore loadOptions={fetchAndFormatSelects} placeholder={emptyLabel} clearable={false} diff --git a/superset-frontend/src/components/Select/SupersetStyledSelect.tsx b/superset-frontend/src/components/Select/SupersetStyledSelect.tsx index 317a7b73fadd7..e605e77fb7289 100644 --- a/superset-frontend/src/components/Select/SupersetStyledSelect.tsx +++ b/superset-frontend/src/components/Select/SupersetStyledSelect.tsx @@ -224,8 +224,11 @@ function styled< // Handle onPaste event if (onPaste) { const Input = components.Input || defaultComponents.Input; - // @ts-ignore (needed for passing `onPaste`) - components.Input = props => ; + components.Input = props => ( +
+ +
+ ); } // for CreaTable if (SelectComponent === WindowedCreatableSelect) { diff --git a/superset-frontend/src/components/Select/WindowedSelect/WindowedMenuList.tsx b/superset-frontend/src/components/Select/WindowedSelect/WindowedMenuList.tsx index 356c8a646ce81..f3d4ca1fcf046 100644 --- a/superset-frontend/src/components/Select/WindowedSelect/WindowedMenuList.tsx +++ b/superset-frontend/src/components/Select/WindowedSelect/WindowedMenuList.tsx @@ -138,7 +138,6 @@ export default function WindowedMenuList({ return ( = { Option: ({ children, innerProps, data, ...props }) => ( - + + {({ css }) => ( + + )} + ), ClearIndicator: props => ( diff --git a/superset-frontend/src/datasource/ChangeDatasourceModal.tsx b/superset-frontend/src/datasource/ChangeDatasourceModal.tsx index d2c462c5712a2..b5895c122beb9 100644 --- a/superset-frontend/src/datasource/ChangeDatasourceModal.tsx +++ b/superset-frontend/src/datasource/ChangeDatasourceModal.tsx @@ -19,7 +19,7 @@ import React, { FunctionComponent, useState, useRef } from 'react'; // @ts-ignore import { Table } from 'reactable-arc'; -import { Alert, FormControl, Modal } from 'react-bootstrap'; +import { Alert, FormControl, FormControlProps, Modal } from 'react-bootstrap'; import { SupersetClient, t } from '@superset-ui/core'; import getClientErrorObject from '../utils/getClientErrorObject'; @@ -114,8 +114,10 @@ const ChangeDatasourceModal: FunctionComponent = ({ searchRef = ref; }; - const changeSearch = (event: React.ChangeEvent) => { - setFilter(event.target.value); + const changeSearch = ( + event: React.FormEvent, + ) => { + setFilter((event.currentTarget?.value as string) ?? ''); }; return ( @@ -136,7 +138,6 @@ const ChangeDatasourceModal: FunctionComponent = ({ bsSize="sm" value={filter} placeholder={t('Search / Filter')} - // @ts-ignore onChange={changeSearch} /> diff --git a/superset-frontend/src/datasource/DatasourceModal.tsx b/superset-frontend/src/datasource/DatasourceModal.tsx index 9ff1de7f6b12d..2a7227642c284 100644 --- a/superset-frontend/src/datasource/DatasourceModal.tsx +++ b/superset-frontend/src/datasource/DatasourceModal.tsx @@ -19,7 +19,6 @@ import React, { FunctionComponent, useState, useRef } from 'react'; import { Alert, Modal } from 'react-bootstrap'; import Button from 'src/components/Button'; -// @ts-ignore import Dialog from 'react-bootstrap-dialog'; import { t, SupersetClient } from '@superset-ui/core'; import AsyncEsmComponent from 'src/components/AsyncEsmComponent'; diff --git a/superset-frontend/src/explore/components/DisplayQueryButton.jsx b/superset-frontend/src/explore/components/DisplayQueryButton.jsx index cc0ba2f87787b..7d07651618ac2 100644 --- a/superset-frontend/src/explore/components/DisplayQueryButton.jsx +++ b/superset-frontend/src/explore/components/DisplayQueryButton.jsx @@ -20,14 +20,12 @@ import React from 'react'; import { connect } from 'react-redux'; import { bindActionCreators } from 'redux'; import PropTypes from 'prop-types'; -import SyntaxHighlighter, { - registerLanguage, -} from 'react-syntax-highlighter/light'; -import htmlSyntax from 'react-syntax-highlighter/languages/hljs/htmlbars'; -import markdownSyntax from 'react-syntax-highlighter/languages/hljs/markdown'; -import sqlSyntax from 'react-syntax-highlighter/languages/hljs/sql'; -import jsonSyntax from 'react-syntax-highlighter/languages/hljs/json'; -import github from 'react-syntax-highlighter/styles/hljs/github'; +import SyntaxHighlighter from 'react-syntax-highlighter/dist/cjs/light'; +import htmlSyntax from 'react-syntax-highlighter/dist/cjs/languages/hljs/htmlbars'; +import markdownSyntax from 'react-syntax-highlighter/dist/cjs/languages/hljs/markdown'; +import sqlSyntax from 'react-syntax-highlighter/dist/cjs/languages/hljs/sql'; +import jsonSyntax from 'react-syntax-highlighter/dist/cjs/languages/hljs/json'; +import github from 'react-syntax-highlighter/dist/cjs/styles/hljs/github'; import { DropdownButton, MenuItem, @@ -53,10 +51,10 @@ import { import PropertiesModal from './PropertiesModal'; import { sliceUpdated } from '../actions/exploreActions'; -registerLanguage('markdown', markdownSyntax); -registerLanguage('html', htmlSyntax); -registerLanguage('sql', sqlSyntax); -registerLanguage('json', jsonSyntax); +SyntaxHighlighter.registerLanguage('markdown', markdownSyntax); +SyntaxHighlighter.registerLanguage('html', htmlSyntax); +SyntaxHighlighter.registerLanguage('sql', sqlSyntax); +SyntaxHighlighter.registerLanguage('json', jsonSyntax); const propTypes = { onOpenInEditor: PropTypes.func, diff --git a/superset-frontend/src/explore/components/PropertiesModal.tsx b/superset-frontend/src/explore/components/PropertiesModal.tsx index 21fd3b0f4ba57..c1e7777f88f17 100644 --- a/superset-frontend/src/explore/components/PropertiesModal.tsx +++ b/superset-frontend/src/explore/components/PropertiesModal.tsx @@ -23,10 +23,9 @@ import { Col, FormControl, FormGroup, - // @ts-ignore + FormControlProps, } from 'react-bootstrap'; import Button from 'src/components/Button'; -// @ts-ignore import Dialog from 'react-bootstrap-dialog'; import { OptionsType } from 'react-select/src/types'; import { AsyncSelect } from 'src/components/Select'; @@ -176,10 +175,9 @@ function PropertiesModal({ slice, onHide, onSave }: InternalProps) { type="text" bsSize="sm" value={name} - // @ts-ignore - onChange={(event: React.ChangeEvent) => - setName(event.target.value) - } + onChange={( + event: React.FormEvent, + ) => setName((event.currentTarget?.value as string) ?? '')} /> @@ -190,9 +188,10 @@ function PropertiesModal({ slice, onHide, onSave }: InternalProps) { componentClass="textarea" bsSize="sm" value={description} - // @ts-ignore - onChange={(event: React.ChangeEvent) => - setDescription(event.target.value) + onChange={( + event: React.FormEvent, + ) => + setDescription((event.currentTarget?.value as string) ?? '') } style={{ maxWidth: '100%' }} /> @@ -212,10 +211,13 @@ function PropertiesModal({ slice, onHide, onSave }: InternalProps) { type="text" bsSize="sm" value={cacheTimeout} - // @ts-ignore - onChange={(event: React.ChangeEvent) => - setCacheTimeout(event.target.value.replace(/[^0-9]/, '')) - } + onChange={( + event: React.FormEvent, + ) => { + const targetValue = + (event.currentTarget?.value as string) ?? ''; + setCacheTimeout(targetValue.replace(/[^0-9]/, '')); + }} />

{t( diff --git a/superset-frontend/src/featureFlags.ts b/superset-frontend/src/featureFlags.ts index db6434aa1d105..3b9acb1bfa7e1 100644 --- a/superset-frontend/src/featureFlags.ts +++ b/superset-frontend/src/featureFlags.ts @@ -38,6 +38,8 @@ export type FeatureFlagMap = { declare global { interface Window { featureFlags: FeatureFlagMap; + $: any; + jQuery: any; } } diff --git a/superset-frontend/src/setup/setupApp.ts b/superset-frontend/src/setup/setupApp.ts index c51b42a508884..1eef937bc7d73 100644 --- a/superset-frontend/src/setup/setupApp.ts +++ b/superset-frontend/src/setup/setupApp.ts @@ -82,9 +82,7 @@ export default function setupApp() { // A set of hacks to allow apps to run within a FAB template // this allows for the server side generated menus to function - // @ts-ignore window.$ = $; - // @ts-ignore window.jQuery = $; require('bootstrap'); diff --git a/superset-frontend/src/views/CRUD/welcome/Welcome.tsx b/superset-frontend/src/views/CRUD/welcome/Welcome.tsx index 68f6d10c6f32f..256fe3a9e4fa3 100644 --- a/superset-frontend/src/views/CRUD/welcome/Welcome.tsx +++ b/superset-frontend/src/views/CRUD/welcome/Welcome.tsx @@ -16,8 +16,16 @@ * specific language governing permissions and limitations * under the License. */ -import React, { useState } from 'react'; -import { Panel, Row, Col, Tabs, Tab, FormControl } from 'react-bootstrap'; +import React, { useCallback, useState } from 'react'; +import { + Panel, + Row, + Col, + Tabs, + Tab, + FormControl, + FormControlProps, +} from 'react-bootstrap'; import { t } from '@superset-ui/core'; import { useQueryParam, StringParam, QueryParamConfig } from 'use-query-params'; import { User } from 'src/types/bootstrapTypes'; @@ -61,12 +69,23 @@ export default function Welcome({ user }: WelcomeProps) { '', ); + const onFormControlChange = useCallback( + (e: React.FormEvent) => { + const { value } = e.currentTarget; + setSearchQuery((value as string) ?? ''); + }, + [], + ); + + const onTabsSelect = useCallback((e: any) => { + setActiveTab(e as string); + }, []); + return (

@@ -83,8 +102,7 @@ export default function Welcome({ user }: WelcomeProps) { style={{ marginTop: '25px' }} placeholder="Search" value={searchQuery} - // @ts-ignore React bootstrap types aren't quite right here - onChange={e => setSearchQuery(e.currentTarget.value)} + onChange={onFormControlChange} />