Add typescript

(cherry picked from commit 910511dba03196f14bb238c8e15f060c12183c08)

Closes #2185

frontend/.eslintignore

@@ -1 +1,2 @@
 **/JsLibraries/**
+**/*.css.d.ts

frontend/.eslintrc.js

@@ -1,5 +1,9 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
 const fs = require('fs');
+// eslint-disable-next-line @typescript-eslint/no-var-requires
 const path = require('path');
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const typescriptEslintRecommended = require('@typescript-eslint/eslint-plugin').configs.recommended;
 
 const frontendFolder = __dirname;
 
@@ -44,7 +48,8 @@ module.exports = {
     'react',
     'react-hooks',
     'simple-import-sort',
-    'import'
+    'import',
+    '@typescript-eslint'
   ],
 
   settings: {
@@ -227,7 +232,7 @@ module.exports = {
     'consistent-this': ['error', 'self'],
     'eol-last': 'error',
     'func-names': 'off',
-    'func-style': ['error', 'declaration'],
+    'func-style': ['error', 'declaration', { allowArrowFunctions: true }],
     indent: ['error', 2, { SwitchCase: 1 }],
     'key-spacing': ['error', { beforeColon: false, afterColon: true }],
     'keyword-spacing': ['error', { before: true, after: true }],
@@ -318,7 +323,9 @@ module.exports = {
   },
   overrides: [
     {
-      files: ['*.js'],
+      files: [
+        '*.js'
+      ],
       rules: {
         'simple-import-sort/imports': [
           'error',
@@ -333,6 +340,47 @@ module.exports = {
           }
         ]
       }
+    },
+    {
+      files: [
+        '*.ts',
+        '*.tsx'
+      ],
+
+      parser: '@typescript-eslint/parser',
+      parserOptions: {
+        project: './tsconfig.json'
+      },
+
+      rules: Object.assign(typescriptEslintRecommended.rules, {
+        'no-shadow': 'off',
+        // These should be enabled after cleaning things up
+        '@typescript-eslint/no-unused-vars': 'warn',
+        '@typescript-eslint/explicit-function-return-type': 'off',
+        'react/prop-types': 'off',
+        'simple-import-sort/imports': [
+          'error',
+          {
+            groups: [
+              // Packages
+              // Absolute Paths
+              // Relative Paths
+              // Css
+              ['^@?\\w', `^(${dirs})(/.*|$)`, '^\\.', '^\\..*css$']
+            ]
+          }
+        ]
+      })
+    },
+    {
+      files: [
+        '*.css.d.ts'
+      ],
+      rules: {
+        'filenames/match-exported': 'off',
+        'init-declarations': 'off',
+        'prettier/prettier': 'off'
+      }
     }
   ]
 };

frontend/babel.config.js

@@ -17,7 +17,8 @@ module.exports = {
   env: {
     development: {
       presets: [
-        ['@babel/preset-react', { development: true }]
+        ['@babel/preset-react', { development: true }],
+        '@babel/preset-typescript'
       ],
       plugins: [
         'babel-plugin-inline-classnames'
@@ -25,7 +26,8 @@ module.exports = {
     },
     production: {
       presets: [
-        '@babel/preset-react'
+        '@babel/preset-react',
+        '@babel/preset-typescript'
       ],
       plugins: [
         'babel-plugin-transform-react-remove-prop-types'

frontend/build/webpack.config.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
 const path = require('path');
 const webpack = require('webpack');
 const FileManagerPlugin = require('filemanager-webpack-plugin');
@@ -5,6 +6,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const LiveReloadPlugin = require('webpack-livereload-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 
 module.exports = (env) => {
   const uiFolder = 'UI';
@@ -38,6 +40,11 @@ module.exports = (env) => {
     },
 
     resolve: {
+      extensions: [
+        '.ts',
+        '.tsx',
+        '.js'
+      ],
       modules: [
         srcFolder,
         path.join(srcFolder, 'Shims'),
@@ -131,6 +138,8 @@ module.exports = (env) => {
         }
       }),
 
+      new ForkTsCheckerWebpackPlugin(),
+
       new LiveReloadPlugin()
     ],
 
@@ -154,7 +163,7 @@ module.exports = (env) => {
           }
         },
         {
-          test: /\.js?$/,
+          test: [/\.jsx?$/, /\.tsx?$/],
           exclude: /(node_modules|JsLibraries)/,
           use: [
             {
@@ -185,6 +194,7 @@ module.exports = (env) => {
           exclude: /(node_modules|globals.css)/,
           use: [
             { loader: MiniCssExtractPlugin.loader },
+            { loader: 'css-modules-typescript-loader' },
             {
               loader: 'css-loader',
               options: {

frontend/src/Components/Form/Form.js

@@ -4,7 +4,15 @@ import Alert from 'Components/Alert';
 import { kinds } from 'Helpers/Props';
 import styles from './Form.css';
 
-function Form({ children, validationErrors, validationWarnings, ...otherProps }) {
+function Form(props) {
+  const {
+    children,
+    validationErrors,
+    validationWarnings,
+    // eslint-disable-next-line no-unused-vars
+    ...otherProps
+  } = props;
+
   return (
     <div>
       {

frontend/src/Components/Menu/SortMenuItem.js

@@ -27,6 +27,7 @@ SortMenuItem.propTypes = {
   name: PropTypes.string,
   sortKey: PropTypes.string,
   sortDirection: PropTypes.oneOf(sortDirections.all),
+  children: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
   onPress: PropTypes.func.isRequired
 };
 

frontend/src/Components/Menu/ViewMenuItem.js

@@ -22,7 +22,9 @@ function ViewMenuItem(props) {
 
 ViewMenuItem.propTypes = {
   name: PropTypes.string,
-  selectedView: PropTypes.string.isRequired
+  selectedView: PropTypes.string.isRequired,
+  children: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
+  onPress: PropTypes.func.isRequired
 };
 
 export default ViewMenuItem;

frontend/src/Components/Scroller/OverlayScroller.js

@@ -173,7 +173,7 @@ OverlayScroller.defaultProps = {
   scrollDirection: scrollDirections.VERTICAL,
   autoHide: false,
   autoScroll: true,
-  registerScroller: () => {}
+  registerScroller: () => { /* no-op */ }
 };
 
 export default OverlayScroller;

frontend/src/Components/Scroller/Scroller.js

@@ -89,7 +89,7 @@ Scroller.defaultProps = {
   scrollDirection: scrollDirections.VERTICAL,
   autoFocus: true,
   autoScroll: true,
-  registerScroller: () => {}
+  registerScroller: () => { /* no-op */ }
 };
 
 export default Scroller;

frontend/src/Components/Table/Cells/VirtualTableSelectCell.js

@@ -13,6 +13,7 @@ export function virtualTableSelectCellRenderer(cellProps) {
   } = cellProps;
 
   return (
+    // eslint-disable-next-line no-use-before-define
     <VirtualTableSelectCell
       key={cellKey}
       id={rowData.name}

frontend/src/Components/Table/VirtualTableHeaderCell.js

@@ -13,6 +13,8 @@ export function headerRenderer(headerProps) {
   } = headerProps;
 
   return (
+
+    // eslint-disable-next-line no-use-before-define
     <VirtualTableHeaderCell
       name={dataKey}
       {...columnData}

frontend/src/polyfills.js

@@ -1,4 +1,4 @@
-/* eslint no-empty-function: 0 no-extend-native: 0 */
+/* eslint no-empty-function: 0, no-extend-native: 0, "@typescript-eslint/no-empty-function": 0 */
 
 window.console = window.console || {};
 window.console.log = window.console.log || function() {};

frontend/tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+      "target": "es6",
+      "allowJs": true,
+      "checkJs": false,
+      "baseUrl": "src",
+      "jsx": "react",
+      "module": "commonjs",
+      "moduleResolution": "node",
+      "noEmit": true,
+      "esModuleInterop": true,
+      "typeRoots": ["node_modules/@types", "typings"],
+      "paths": {
+          "*": [
+              "*"
+          ]
+      },
+      "plugins": [{ "name": "typescript-plugin-css-modules" }]
+  },
+  "include": [
+      "./src/**/*",
+      "./.eslintrc.js",
+      "./build/webpack.config.js",
+      "./typings/*.ts",
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

frontend/typings/Globals.d.ts

@@ -0,0 +1 @@
+declare module '*.module.css';

package.json

@@ -33,6 +33,9 @@
     "@microsoft/signalr": "6.0.16",
     "@sentry/browser": "7.51.2",
     "@sentry/integrations": "7.51.2",
+    "@types/node": "18.16.16",
+    "@types/react": "18.2.7",
+    "@types/react-dom": "18.2.4",
     "ansi-colors": "4.1.3",
     "classnames": "2.3.2",
     "clipboard": "2.0.11",
@@ -79,7 +82,8 @@
     "redux-batched-actions": "0.5.0",
     "redux-localstorage": "0.4.1",
     "redux-thunk": "2.3.0",
-    "reselect": "4.1.8"
+    "reselect": "4.1.8",
+    "typescript": "4.9.5"
   },
   "devDependencies": {
     "@babel/core": "7.21.8",
@@ -92,12 +96,16 @@
     "@babel/plugin-syntax-dynamic-import": "7.8.3",
     "@babel/preset-env": "7.21.5",
     "@babel/preset-react": "7.18.6",
+    "@babel/preset-typescript": "7.21.5",
+    "@typescript-eslint/eslint-plugin": "5.59.7",
+    "@typescript-eslint/parser": "5.59.7",
     "autoprefixer": "10.4.14",
     "babel-loader": "9.1.2",
     "babel-plugin-inline-classnames": "2.0.1",
     "babel-plugin-transform-react-remove-prop-types": "0.4.24",
     "core-js": "3.30.2",
     "css-loader": "6.7.3",
+    "css-modules-typescript-loader": "4.0.1",
     "eslint": "8.40.0",
     "eslint-plugin-filenames": "1.3.2",
     "eslint-plugin-import": "2.27.5",
@@ -107,6 +115,7 @@
     "eslint-plugin-simple-import-sort": "10.0.0",
     "file-loader": "6.2.0",
     "filemanager-webpack-plugin": "8.0.0",
+    "fork-ts-checker-webpack-plugin": "8.0.0",
     "html-webpack-plugin": "5.5.1",
     "loader-utils": "^3.2.1",
     "mini-css-extract-plugin": "2.7.5",
@@ -125,6 +134,8 @@
     "stylelint": "15.6.1",
     "stylelint-order": "6.0.3",
     "terser-webpack-plugin": "5.3.8",
+    "ts-loader": "9.4.3",
+    "typescript-plugin-css-modules": "5.0.1",
     "url-loader": "4.1.1",
     "webpack": "5.82.1",
     "webpack-cli": "5.1.1",

tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "./frontend/tsconfig.json",
+}