add basic typescript configuration (metabase#18284)

* add basic typescript configuration

* convert a tiny hook use-debounced-value to typescript

* allow any for now?

* update terser and static viz configs

* adjust config

* change extension of QuestionActivityTimeline from jsx to js to match jest config

* adjust config

* skip failing tests

* Fix missing question method in unit tests (metabase#18314)

* review fix

* fix

Co-authored-by: Anton Kulyk <[email protected]>

Author: alxnddr

.babelrc

@@ -5,7 +5,11 @@
     "@babel/plugin-proposal-export-default-from",
     ["@babel/plugin-proposal-decorators", { "legacy": true }]
   ],
-  "presets": ["@babel/preset-env", "@babel/preset-react"],
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react",
+    "@babel/preset-typescript"
+  ],
   "env": {
     "development": {
       "presets": []

.eslintrc

@@ -58,5 +58,25 @@
     "ecmaFeatures": {
       "legacyDecorators": true
     }
-  }
+  },
+  "overrides": [
+    {
+      "extends": ["plugin:@typescript-eslint/recommended"],
+      "files": ["*.ts", "*.tsx"],
+      "parser": "@typescript-eslint/parser",
+      "parserOptions": {
+        "project": "./tsconfig.json"
+      },
+      "plugins": ["@typescript-eslint"],
+      "rules": {
+        "@typescript-eslint/explicit-module-boundary-types": "off",
+        "@typescript-eslint/no-inferrable-types": "off",
+        "@typescript-eslint/no-explicit-any": "off",
+        "@typescript-eslint/no-use-before-define": [
+          "error",
+          { "functions": false }
+        ]
+      }
+    }
+  ]
 }

frontend/src/metabase/hooks/use-debounced-value.js renamed to frontend/src/metabase/hooks/use-debounced-value.ts

@@ -1,6 +1,6 @@
 import { useState, useEffect } from "react";
 
-export function useDebouncedValue(value, delay) {
+export function useDebouncedValue<TVALUE>(value: TVALUE, delay: number) {
   const [debouncedValue, setDebouncedValue] = useState(value);
 
   useEffect(() => {

frontend/test/metabase/query_builder/components/QuestionActivityTimeline.unit.spec.jsx renamed to frontend/test/metabase/query_builder/components/QuestionActivityTimeline.unit.spec.js

@@ -34,6 +34,7 @@ describe("QuestionActivityTimeline", () => {
     beforeEach(() => {
       question = {
         canWrite: () => false,
+        getModerationReviews: () => [],
       };
 
       render(
@@ -54,6 +55,7 @@ describe("QuestionActivityTimeline", () => {
     beforeEach(() => {
       question = {
         canWrite: () => true,
+        getModerationReviews: () => [],
       };
 
       render(

jest.tz.unit.conf.json

@@ -4,7 +4,7 @@
     "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/frontend/test/__mocks__/fileMock.js",
     "^promise-loader\\?global\\!metabase\\/lib\\/ga-metadata$": "<rootDir>/frontend/src/metabase/lib/ga-metadata.js"
   },
-  "testMatch": ["<rootDir>/frontend/test/**/*.tz.unit.spec.js?(x)"],
+  "testMatch": ["<rootDir>/frontend/test/**/*.tz.unit.spec.{js,ts,jsx,tsx}"],
   "modulePaths": ["<rootDir>/frontend/test", "<rootDir>/frontend/src"],
   "setupFiles": [
     "<rootDir>/frontend/test/jest-setup.js",
@@ -18,7 +18,7 @@
   },
   "coverageDirectory": "./",
   "coverageReporters": ["text", "json-summary"],
-  "collectCoverageFrom": ["frontend/src/**/*.js", "frontend/src/**/*.jsx"],
+  "collectCoverageFrom": ["frontend/src/**/*.{js,ts,jsx,tsx}"],
   "coveragePathIgnorePatterns": [
     "/node_modules/",
     "/frontend/src/metabase/visualizations/lib/errors.js"

jest.unit.conf.json

@@ -4,8 +4,8 @@
     "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/frontend/test/__mocks__/fileMock.js",
     "^promise-loader\\?global\\!metabase\\/lib\\/ga-metadata$": "<rootDir>/frontend/src/metabase/lib/ga-metadata.js"
   },
-  "testPathIgnorePatterns": ["<rootDir>/frontend/test/.*/.*.tz.unit.spec.js"],
-  "testMatch": ["<rootDir>/**/*.unit.spec.js"],
+  "testPathIgnorePatterns": ["<rootDir>/frontend/test/.*/.*.tz.unit.spec.{js,ts}"],
+  "testMatch": ["<rootDir>/**/*.unit.spec.js", "<rootDir>/**/*.unit.spec.{js,ts}"],
   "modulePaths": [
     "<rootDir>/frontend/test",
     "<rootDir>/frontend/src",
@@ -25,18 +25,16 @@
   "coverageDirectory": "./coverage",
   "coverageReporters": ["text", "html", "lcov"],
   "collectCoverageFrom": [
-    "frontend/src/**/*.js",
-    "frontend/src/**/*.jsx",
-    "enterprise/frontend/src/**/*.js",
-    "enterprise/frontend/src/**/*.jsx"
+    "frontend/src/**/*.{js,jsx,ts,tsx}",
+    "enterprise/frontend/src/**/*.{js,jsx,ts,tsx}"
   ],
   "coveragePathIgnorePatterns": [
     "/node_modules/",
     "/frontend/src/metabase/visualizations/lib/errors.js",
     "/frontend/src/cljs/",
     "/frontend/src/metabase/internal/",
     "/frontend/test/",
-    ".styled.jsx",
+    ".styled.{jsx,tsx}",
     ".info.js"
   ],
   "testEnvironment": "jsdom",

package.json

@@ -105,6 +105,7 @@
     "@babel/plugin-transform-flow-strip-types": "^7.14.5",
     "@babel/preset-env": "^7.14.7",
     "@babel/preset-react": "^7.14.5",
+    "@babel/preset-typescript": "^7.15.0",
     "@cypress/skip-test": "^2.6.0",
     "@cypress/webpack-preprocessor": "^5.9.1",
     "@percy/cli": "^1.0.0-beta.48",
@@ -114,6 +115,9 @@
     "@testing-library/jest-dom": "^4.0.0",
     "@testing-library/react": "^11.0.2",
     "@testing-library/user-event": "^12.6.0",
+    "@types/styled-components": "^3.0.4",
+    "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "@typescript-eslint/parser": "^4.33.0",
     "babel-eslint": "10.1.0",
     "babel-jest": "^27.0.6",
     "babel-loader": "^8.2.2",
@@ -154,6 +158,7 @@
     "raf": "^3.4.0",
     "shadow-cljs": "2.11.20",
     "style-loader": "^0.19.0",
+    "typescript": "^4.4.3",
     "webpack": "^5.37.0",
     "webpack-cli": "^4.7.0",
     "webpack-dev-server": "^3.11.2",
@@ -167,7 +172,8 @@
     "concurrently": "yarn && concurrently --kill-others -p name",
     "dev": "yarn concurrently -n 'backend,frontend,cljs,docs' -c 'blue,green,yellow,magenta' 'clojure -M:run' 'yarn build-hot:js' 'yarn build-hot:cljs' 'yarn docs'",
     "dev-ee": "yarn concurrently -n 'backend,frontend,cljs,docs' -c 'blue,green,yellow,magenta' 'clojure -M:run:ee' 'MB_EDITION=ee yarn build-hot:js' 'MB_EDITION=ee yarn build-hot:cljs' 'yarn docs'",
-    "lint": "yarn lint-eslint && yarn lint-prettier && yarn lint-docs-links && yarn lint-yaml",
+    "type-check": "yarn && tsc --noEmit",
+    "lint": "yarn lint-eslint && yarn lint-prettier && yarn lint-docs-links && yarn lint-yaml && yarn type-check",
     "lint-eslint": "yarn build-quick:cljs && eslint --ext .js --ext .jsx --rulesdir frontend/lint/eslint-rules --max-warnings 0 enterprise/frontend/src frontend/src frontend/test",
     "lint-prettier": "yarn && prettier -l '{enterprise/,}frontend/**/*.{js,jsx,css}' || (echo '\nThese files are not formatted correctly. Did you forget to \"yarn prettier\"?' && false)",
     "lint-docs-links": "yarn && ./bin/verify-doc-links",

tsconfig.json

@@ -0,0 +1,33 @@
+{
+  "compilerOptions": {
+    "jsx": "react",
+    "target": "esnext",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowSyntheticDefaultImports": true,
+    "module": "commonjs",
+    "isolatedModules": true,
+    "strict": true,
+    "moduleResolution": "node",
+    "skipLibCheck": true,
+    "paths": {
+      "*": [
+        "./frontend/src/*",
+        "./frontend/test/*",
+        "./enterprise/frontend/src/*",
+        "./enterprise/frontend/test/*"
+      ]
+    },
+    "forceConsistentCasingInFileNames": true
+  },
+  "include": [
+    "frontend/src/**/*.ts",
+    "frontend/src/**/*.tsx",
+    "enterprise/frontend/src/**/*.ts",
+    "enterprise/frontend/src/**/*.tsx",
+    "frontend/test/**/*.ts",
+    "frontend/test/**/*.tsx",
+    "enterprise/frontend/test/**/*.ts",
+    "enterprise/frontend/test/**/*.tsx"
+  ],
+  "exclude": ["node_modules"]
+}

webpack.config.js

@@ -63,12 +63,12 @@ const config = (module.exports = {
   module: {
     rules: [
       {
-        test: /\.(js|jsx)$/,
+        test: /\.(tsx?|jsx?)$/,
         exclude: /node_modules|cljs/,
         use: [{ loader: "babel-loader", options: BABEL_CONFIG }],
       },
       {
-        test: /\.(js|jsx)$/,
+        test: /\.(tsx?|jsx?)$/,
         exclude: /node_modules|cljs|\.spec\.js/,
         use: [
           {
@@ -101,7 +101,16 @@ const config = (module.exports = {
     ],
   },
   resolve: {
-    extensions: [".webpack.js", ".web.js", ".js", ".jsx", ".css", ".svg"],
+    extensions: [
+      ".webpack.js",
+      ".web.js",
+      ".js",
+      ".jsx",
+      ".ts",
+      ".tsx",
+      ".css",
+      ".svg",
+    ],
     alias: {
       assets: ASSETS_PATH,
       fonts: FONTS_PATH,
@@ -269,14 +278,15 @@ if (WEBPACK_BUNDLE !== "production") {
     }),
   );
 } else {
-
   // Don't bother with ESLint for CI/production (we catch linting errors with another CI run)
   config.module.rules = config.module.rules.filter(rule => {
-    return Array.isArray(rule.use) ? rule.use[0].loader != "eslint-loader" : true
+    return Array.isArray(rule.use)
+      ? rule.use[0].loader != "eslint-loader"
+      : true;
   });
 
   config.plugins.push(
-    new TerserPlugin({ parallel: true, test: /\.jsx?($|\?)/i }),
+    new TerserPlugin({ parallel: true, test: /\.(tsx?|jsx?)($|\?)/i }),
   );
 
   config.devtool = "source-map";

webpack.static-viz.config.js

@@ -27,12 +27,12 @@ module.exports = {
   module: {
     rules: [
       {
-        test: /\.(js|jsx)$/,
+        test: /\.(tsx?|jsx?)$/,
         exclude: /node_modules/,
         use: [{ loader: "babel-loader", options: BABEL_CONFIG }],
       },
       {
-        test: /\.(js|jsx)$/,
+        test: /\.(tsx?|jsx?)$/,
         exclude: /node_modules/,
         use: [
           {
@@ -46,11 +46,9 @@ module.exports = {
     ],
   },
   resolve: {
-    extensions: [".webpack.js", ".web.js", ".js", ".jsx"],
+    extensions: [".webpack.js", ".web.js", ".js", ".jsx", ".ts", ".tsx"],
     alias: {
       metabase: SRC_PATH,
     },
   },
-
-}
-
+};