feat: Add antd to the codebase

superset-frontend/.eslintrc.js

@@ -87,6 +87,12 @@ module.exports = {
         'no-prototype-builtins': 0,
         'no-restricted-properties': 0,
         'no-restricted-syntax': 0,
+        'no-restricted-imports': ['error', {
+          'paths': [{
+            'name': 'antd',
+            'message': 'Please import Ant components from the index of common/components',
+          }]
+        }],
         'padded-blocks': 0,
         'prefer-arrow-callback': 0,
         'react/forbid-prop-types': 0,
@@ -146,6 +152,12 @@ module.exports = {
     'no-prototype-builtins': 0,
     'no-restricted-properties': 0,
     'no-restricted-syntax': 0,
+    'no-restricted-imports': ['error', {
+      'paths': [{
+        'name': 'antd',
+        'message': 'Please import Ant components from the index of common/components',
+      }]
+    }],
     'padded-blocks': 0,
     'prefer-arrow-callback': 0,
     'prefer-object-spread': 1,

superset-frontend/package.json

@@ -58,35 +58,35 @@
   },
   "homepage": "https://superset.apache.org/",
   "dependencies": {
-    "@babel/runtime-corejs3": "^7.8.4",
+    "@babel/runtime-corejs3": "^7.11.0",
     "@data-ui/sparkline": "^0.0.54",
     "@emotion/core": "^10.0.28",
     "@storybook/addon-actions": "^5.3.19",
     "@storybook/addon-knobs": "^5.3.19",
-    "@superset-ui/chart": "^0.14.9",
-    "@superset-ui/chart-composition": "^0.14.9",
+    "@superset-ui/chart": "^0.14.11",
+    "@superset-ui/chart-composition": "^0.14.11",
     "@superset-ui/chart-controls": "^0.14.9",
     "@superset-ui/color": "^0.14.9",
     "@superset-ui/connection": "^0.14.19",
     "@superset-ui/core": "^0.14.9",
     "@superset-ui/dimension": "^0.14.9",
-    "@superset-ui/legacy-plugin-chart-calendar": "^0.14.9",
+    "@superset-ui/legacy-plugin-chart-calendar": "^0.14.11",
     "@superset-ui/legacy-plugin-chart-chord": "^0.14.9",
     "@superset-ui/legacy-plugin-chart-country-map": "^0.14.9",
-    "@superset-ui/legacy-plugin-chart-event-flow": "^0.14.9",
-    "@superset-ui/legacy-plugin-chart-force-directed": "^0.14.9",
-    "@superset-ui/legacy-plugin-chart-heatmap": "^0.14.9",
-    "@superset-ui/legacy-plugin-chart-histogram": "^0.14.9",
+    "@superset-ui/legacy-plugin-chart-event-flow": "^0.14.11",
+    "@superset-ui/legacy-plugin-chart-force-directed": "^0.14.11",
+    "@superset-ui/legacy-plugin-chart-heatmap": "^0.14.11",
+    "@superset-ui/legacy-plugin-chart-histogram": "^0.14.16",
     "@superset-ui/legacy-plugin-chart-horizon": "^0.14.9",
     "@superset-ui/legacy-plugin-chart-iframe": "^0.14.9",
     "@superset-ui/legacy-plugin-chart-map-box": "^0.14.9",
     "@superset-ui/legacy-plugin-chart-markup": "^0.14.9",
-    "@superset-ui/legacy-plugin-chart-paired-t-test": "^0.14.9",
-    "@superset-ui/legacy-plugin-chart-parallel-coordinates": "^0.14.9",
+    "@superset-ui/legacy-plugin-chart-paired-t-test": "^0.14.11",
+    "@superset-ui/legacy-plugin-chart-parallel-coordinates": "^0.14.16",
     "@superset-ui/legacy-plugin-chart-partition": "^0.14.9",
     "@superset-ui/legacy-plugin-chart-pivot-table": "^0.14.14",
     "@superset-ui/legacy-plugin-chart-rose": "^0.14.14",
-    "@superset-ui/legacy-plugin-chart-sankey": "^0.14.9",
+    "@superset-ui/legacy-plugin-chart-sankey": "^0.14.11",
     "@superset-ui/legacy-plugin-chart-sankey-loop": "^0.14.9",
     "@superset-ui/legacy-plugin-chart-sunburst": "^0.14.18",
     "@superset-ui/legacy-plugin-chart-treemap": "^0.14.13",
@@ -96,56 +96,56 @@
     "@superset-ui/legacy-preset-chart-nvd3": "^0.14.17",
     "@superset-ui/number-format": "^0.14.9",
     "@superset-ui/plugin-chart-table": "^0.14.16",
-    "@superset-ui/plugin-chart-word-cloud": "^0.14.9",
-    "@superset-ui/preset-chart-xy": "^0.14.9",
+    "@superset-ui/plugin-chart-word-cloud": "^0.14.12",
+    "@superset-ui/preset-chart-xy": "^0.14.17",
     "@superset-ui/query": "^0.14.15",
     "@superset-ui/style": "^0.14.9",
-    "@superset-ui/superset-ui": "^0.14.9",
+    "@superset-ui/superset-ui": "^0.14.19",
     "@superset-ui/time-format": "^0.14.9",
     "@superset-ui/translation": "^0.14.9",
     "@superset-ui/validator": "^0.14.9",
-    "@types/classnames": "^2.2.9",
     "@types/enzyme": "^3.10.5",
     "@types/fetch-mock": "^7.3.2",
-    "@types/react-bootstrap": "^0.32.21",
+    "@types/react-bootstrap": "^0.32.22",
     "@types/react-gravatar": "^2.6.8",
     "@types/react-json-tree": "^0.6.11",
     "@types/react-router-dom": "^5.1.5",
-    "@types/react-select": "^3.0.12",
+    "@types/react-select": "^3.0.15",
     "@types/react-virtualized": "^9.21.10",
     "@types/react-window": "^1.8.2",
     "@types/redux-localstorage": "^1.0.8",
     "@types/redux-mock-store": "^1.0.2",
     "@types/rison": "0.0.6",
     "@types/sinon": "^9.0.4",
     "@vx/responsive": "^0.0.195",
-    "abortcontroller-polyfill": "^1.1.9",
-    "aphrodite": "^2.3.1",
-    "array-move": "^2.2.1",
+    "abortcontroller-polyfill": "^1.5.0",
+    "antd": "^4.5.2",
+    "aphrodite": "^2.4.0",
+    "array-move": "^2.2.2",
     "bootstrap": "^3.4.1",
-    "bootstrap-slider": "^10.0.0",
+    "bootstrap-slider": "^10.6.2",
     "brace": "^0.11.1",
-    "chrono-node": "^1.3.11",
+    "chrono-node": "^1.4.8",
     "classnames": "^2.2.5",
-    "core-js": "^3.2.1",
+    "core-js": "^3.6.5",
     "d3-array": "^1.2.4",
-    "d3-color": "^1.2.0",
-    "d3-scale": "^2.1.2",
+    "d3-color": "^1.4.1",
+    "d3-scale": "^2.2.2",
     "dnd-core": "^2.6.0",
     "dom-to-image": "^2.6.0",
     "geolib": "^2.0.24",
     "immutable": "^3.8.2",
     "interweave": "^11.2.0",
-    "jquery": "^3.4.1",
-    "json-bigint": "^0.3.0",
-    "lodash": "^4.17.15",
+    "jquery": "^3.5.1",
+    "json-bigint": "^0.3.1",
+    "lodash": "^4.17.19",
     "lodash-es": "^4.17.14",
     "mathjs": "^3.20.2",
     "memoize-one": "^5.1.1",
-    "moment": "^2.20.1",
-    "mousetrap": "^1.6.1",
+    "moment": "^2.27.0",
+    "mousetrap": "^1.6.5",
     "mustache": "^2.2.1",
-    "omnibar": "^2.1.1",
+    "omnibar": "^2.3.0",
     "prop-types": "^15.7.2",
     "re-resizable": "^4.3.1",
     "react": "^16.13.1",
@@ -154,29 +154,29 @@
     "react-bootstrap": "^0.33.1",
     "react-bootstrap-dialog": "^0.10.0",
     "react-bootstrap-slider": "2.1.5",
-    "react-checkbox-tree": "^1.5.1",
-    "react-color": "^2.13.8",
+    "react-checkbox-tree": "^1.6.0",
+    "react-color": "^2.18.1",
     "react-datetime": "^2.14.0",
     "react-dnd": "^2.5.4",
     "react-dnd-html5-backend": "^2.5.4",
-    "react-dom": "^16.13.0",
+    "react-dom": "^16.13.1",
     "react-gravatar": "^2.6.1",
-    "react-hot-loader": "^4.12.20",
+    "react-hot-loader": "^4.12.21",
     "react-json-tree": "^0.11.2",
-    "react-jsonschema-form": "^1.2.0",
+    "react-jsonschema-form": "^1.8.1",
     "react-markdown": "^4.3.1",
-    "react-redux": "^5.0.2",
-    "react-router-dom": "^5.1.2",
+    "react-redux": "^5.1.2",
+    "react-router-dom": "^5.2.0",
     "react-search-input": "^0.11.3",
     "react-select": "^3.1.0",
-    "react-select-async-paginate": "^0.4.0-alpha.1",
+    "react-select-async-paginate": "^0.4.0",
     "react-select-fast-filter-options": "^0.2.1",
     "react-sortable-hoc": "^1.11.0",
-    "react-split": "^2.0.4",
+    "react-split": "^2.0.9",
     "react-sticky": "^6.0.2",
     "react-syntax-highlighter": "^7.0.4",
-    "react-table": "^7.2.1",
-    "react-transition-group": "^2.5.3",
+    "react-table": "^7.3.5",
+    "react-transition-group": "^2.9.0",
     "react-ultimate-pagination": "^1.2.0",
     "react-virtualized": "9.19.1",
     "react-virtualized-auto-sizer": "^1.0.2",
@@ -186,25 +186,25 @@
     "redux": "^3.5.2",
     "redux-localstorage": "^0.4.1",
     "redux-thunk": "^2.1.0",
-    "redux-undo": "^1.0.0-beta9-9-7",
-    "regenerator-runtime": "^0.13.5",
+    "redux-undo": "^1.0.1",
+    "regenerator-runtime": "^0.13.7",
     "rison": "^0.1.1",
-    "shortid": "^2.2.6",
-    "urijs": "^1.18.10",
-    "use-query-params": "^0.4.5"
+    "shortid": "^2.2.15",
+    "urijs": "^1.19.2",
+    "use-query-params": "^0.4.6"
   },
   "devDependencies": {
-    "@babel/cli": "^7.8.4",
-    "@babel/compat-data": "^7.9.6",
-    "@babel/core": "^7.8.7",
-    "@babel/node": "^7.8.7",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
-    "@babel/plugin-proposal-optional-chaining": "^7.8.3",
+    "@babel/cli": "^7.10.5",
+    "@babel/compat-data": "^7.11.0",
+    "@babel/core": "^7.11.0",
+    "@babel/node": "^7.10.5",
+    "@babel/plugin-proposal-class-properties": "^7.10.4",
+    "@babel/plugin-proposal-optional-chaining": "^7.11.0",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/plugin-transform-runtime": "^7.8.3",
-    "@babel/preset-env": "^7.8.7",
-    "@babel/preset-react": "^7.8.3",
-    "@babel/register": "^7.8.6",
+    "@babel/plugin-transform-runtime": "^7.11.0",
+    "@babel/preset-env": "^7.11.0",
+    "@babel/preset-react": "^7.10.4",
+    "@babel/register": "^7.10.5",
     "@emotion/babel-preset-css-prop": "^10.0.27",
     "@hot-loader/react-dom": "^16.13.0",
     "@istanbuljs/nyc-config-typescript": "^1.0.1",
@@ -213,82 +213,83 @@
     "@storybook/preset-typescript": "^3.0.0",
     "@storybook/react": "^5.3.19",
     "@svgr/webpack": "^5.4.0",
-    "@types/classnames": "^2.2.9",
-    "@types/dom-to-image": "^2.6.0",
+    "@types/classnames": "^2.2.10",
+    "@types/dom-to-image": "^2.6.1",
     "@types/enzyme-adapter-react-16": "^1.0.6",
-    "@types/jest": "^26.0.3",
-    "@types/jquery": "^3.3.32",
-    "@types/react": "^16.9.43",
+    "@types/jest": "^26.0.8",
+    "@types/jquery": "^3.5.1",
+    "@types/react": "^16.9.44",
     "@types/react-dom": "^16.9.8",
     "@types/react-json-tree": "^0.6.11",
     "@types/react-redux": "^5.0.2",
-    "@types/react-table": "^7.0.19",
+    "@types/react-table": "^7.0.20",
     "@types/react-ultimate-pagination": "^1.2.0",
-    "@types/yargs": "12 - 15",
-    "@typescript-eslint/eslint-plugin": "^2.20.0",
-    "@typescript-eslint/parser": "^2.20.0",
+    "@types/yargs": "^15.0.5",
+    "@typescript-eslint/eslint-plugin": "^2.34.0",
+    "@typescript-eslint/parser": "^2.34.0",
     "babel-eslint": "^10.1.0",
-    "babel-jest": "^26.1.0",
-    "babel-loader": "^8.0.6",
-    "babel-plugin-dynamic-import-node": "^2.3.0",
-    "babel-plugin-emotion": "^10.0.29",
+    "babel-jest": "^26.2.2",
+    "babel-loader": "^8.1.0",
+    "babel-plugin-dynamic-import-node": "^2.3.3",
+    "babel-plugin-emotion": "^10.0.33",
     "babel-plugin-lodash": "^3.3.4",
     "cache-loader": "^1.2.2",
     "clean-webpack-plugin": "^3.0.0",
     "copy-webpack-plugin": "^5.1.1",
-    "cross-env": "^5.2.0",
+    "cross-env": "^5.2.1",
     "css-loader": "^1.0.0",
     "emotion-ts-plugin": "^0.5.3",
-    "enzyme": "^3.10.0",
-    "enzyme-adapter-react-16": "^1.14.0",
-    "eslint": "^6.2.2",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.2",
+    "eslint": "^6.8.0",
     "eslint-config-airbnb": "^15.0.1",
     "eslint-config-prettier": "^6.11.0",
     "eslint-import-resolver-webpack": "^0.10.1",
-    "eslint-plugin-cypress": "^2.0.1",
-    "eslint-plugin-import": "^2.2.0",
-    "eslint-plugin-jest": "^23.17.1",
+    "eslint-plugin-cypress": "^2.11.1",
+    "eslint-plugin-import": "^2.22.0",
+    "eslint-plugin-jest": "^23.20.0",
     "eslint-plugin-jsx-a11y": "^5.1.1",
-    "eslint-plugin-no-only-tests": "^2.0.1",
-    "eslint-plugin-prettier": "^3.1.3",
-    "eslint-plugin-react": "^7.16.0",
+    "eslint-plugin-no-only-tests": "^2.4.0",
+    "eslint-plugin-prettier": "^3.1.4",
+    "eslint-plugin-react": "^7.20.5",
     "exports-loader": "^0.7.0",
-    "fetch-mock": "^7.0.0-alpha.6",
+    "fetch-mock": "^7.7.3",
     "file-loader": "^6.0.0",
     "fork-ts-checker-webpack-plugin": "^0.4.9",
     "ignore-styles": "^5.0.1",
     "imports-loader": "^0.7.1",
-    "jest": "^26.1.0",
+    "jest": "^26.2.2",
     "jest-environment-enzyme": "^7.1.2",
     "jest-enzyme": "^7.1.2",
-    "jsdom": "^16.2.2",
-    "less": "^3.9.0",
+    "jsdom": "^16.3.0",
+    "less": "^3.12.2",
     "less-loader": "^5.0.0",
     "mini-css-extract-plugin": "^0.4.0",
-    "optimize-css-assets-webpack-plugin": "^5.0.1",
+    "optimize-css-assets-webpack-plugin": "^5.0.3",
     "po2json": "^0.4.5",
+    "postcss-loader": "^3.0.0",
     "prettier": "^2.0.5",
-    "react-test-renderer": "^16.9.0",
-    "redux-mock-store": "^1.2.3",
+    "react-test-renderer": "^16.13.1",
+    "redux-mock-store": "^1.5.4",
     "sinon": "^9.0.2",
-    "source-map-support": "^0.5.16",
-    "speed-measure-webpack-plugin": "^1.2.3",
+    "source-map-support": "^0.5.19",
+    "speed-measure-webpack-plugin": "^1.3.3",
     "storybook-addon-jsx": "^7.3.3",
-    "style-loader": "^1.0.0",
-    "terser-webpack-plugin": "^1.1.0",
+    "style-loader": "^1.2.1",
+    "terser-webpack-plugin": "^1.4.4",
     "thread-loader": "^1.2.0",
     "transform-loader": "^0.2.3",
-    "ts-jest": "^26.1.1",
-    "ts-loader": "^6.2.1",
-    "typescript": "^3.8.3",
+    "ts-jest": "^26.1.4",
+    "ts-loader": "^6.2.2",
+    "typescript": "^3.9.7",
     "url-loader": "^1.0.1",
-    "webpack": "^4.42.0",
-    "webpack-bundle-analyzer": "^3.6.1",
-    "webpack-cli": "^3.3.11",
-    "webpack-dev-server": "^3.10.3",
+    "webpack": "^4.44.1",
+    "webpack-bundle-analyzer": "^3.8.0",
+    "webpack-cli": "^3.3.12",
+    "webpack-dev-server": "^3.11.0",
     "webpack-manifest-plugin": "^2.2.0",
     "webpack-sources": "^1.4.3",
-    "yargs": "12 - 15"
+    "yargs": "^15.4.1"
   },
   "optionalDependencies": {
     "fsevents": "^2.0.7"

superset-frontend/src/common/components/index.js

@@ -0,0 +1,7 @@
+/*
+  Antd is exported from here so we can override components with Emotion as needed.
+
+  For documentation, see https://ant.design/components/overview/
+ */
+/* eslint no-restricted-imports: 0 */
+export * from 'antd';

superset-frontend/src/theme.ts

@@ -17,3 +17,6 @@
  * under the License.
  */
 import '../stylesheets/superset.less';
+
+// Importing Antd under its own stylesheet to prevent unintentional theming.
+import '../stylesheets/antd/index.less';

superset-frontend/src/welcome/App.tsx

@@ -23,7 +23,6 @@ import { createStore, applyMiddleware, compose, combineReducers } from 'redux';
 import { Provider } from 'react-redux';
 import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
 import { QueryParamProvider } from 'use-query-params';
-
 import { initFeatureFlags } from 'src/featureFlags';
 import { supersetTheme, ThemeProvider } from '@superset-ui/style';
 import ErrorBoundary from 'src/components/ErrorBoundary';