Add typescript (#24337)

(cherry picked from commit 74ac9f7)

airflow/www/.babelrc

@@ -1,7 +1,7 @@
 {
   "env": {
     "test": {
-      "presets": ["@babel/preset-env", "@babel/preset-react"],
+      "presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"],
       "plugins": ["@babel/plugin-transform-runtime"]
     }
   }

airflow/www/.eslintrc

@@ -5,6 +5,49 @@
   "rules": {
     "no-param-reassign": 1,
     "react/prop-types": 0,
-    "react/jsx-props-no-spreading": 0
-  }
+    "react/jsx-props-no-spreading": 0,
+    "import/extensions": [
+      "error",
+      "ignorePackages",
+      {
+        "js": "never",
+        "jsx": "never",
+        "ts": "never",
+        "tsx": "never"
+      }
+   ],
+    "import/no-extraneous-dependencies": [
+      "error",
+      {
+        "devDependencies": true,
+        "optionalDependencies": false,
+        "peerDependencies": false
+      }
+    ]
+  },
+  "settings": {
+    "import/resolver": {
+      "node": {
+        "extensions": [".js", ".jsx", ".ts", ".tsx"]
+      }
+    }
+  },
+  // eslint that apply only to typescript files
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx"],
+      "extends": [
+        "airbnb-typescript"
+      ],
+      "parser": "@typescript-eslint/parser",
+      "plugins": [ "@typescript-eslint" ],
+      "parserOptions": {
+        "project": "./tsconfig.json"
+      },
+      "rules": {
+        "react/require-default-props": 0,
+        "@typescript-eslint/no-explicit-any": 1
+      }
+    }
+  ]
 }

airflow/www/jest.config.js

@@ -20,7 +20,7 @@
 const config = {
   verbose: true,
   transform: {
-    '^.+\\.jsx?$': 'babel-jest',
+    '^.+\\.[jt]sx?$': 'babel-jest',
   },
   testEnvironment: 'jsdom',
   setupFilesAfterEnv: ['./jest-setup.js'],

airflow/www/package.json

@@ -5,8 +5,8 @@
     "dev": "NODE_ENV=dev webpack --watch --colors --progress --debug --output-pathinfo --devtool eval-cheap-source-map --mode development",
     "prod": "NODE_ENV=production node --max_old_space_size=4096 ./node_modules/webpack/bin/webpack.js -p --colors --progress",
     "build": "NODE_ENV=production webpack --colors --progress",
-    "lint": "eslint --ignore-path=.eslintignore --ext .js,.jsx .",
-    "lint:fix": "eslint --fix --ignore-path=.eslintignore --ext .js,.jsx ."
+    "lint": "eslint --ignore-path=.eslintignore --ext .js,.jsx,.ts,.tsx . && tsc --noEmit",
+    "lint:fix": "eslint --fix --ignore-path=.eslintignore --ext .js,.jsx,.ts,.tsx . && tsc --noEmit"
   },
   "author": "Apache",
   "license": "Apache-2.0",
@@ -29,9 +29,12 @@
     "@babel/plugin-transform-runtime": "^7.16.0",
     "@babel/preset-env": "^7.16.0",
     "@babel/preset-react": "^7.16.0",
+    "@babel/preset-typescript": "^7.17.12",
     "@testing-library/jest-dom": "^5.15.0",
     "@testing-library/react": "^12.1.2",
     "@testing-library/react-hooks": "^7.0.2",
+    "@typescript-eslint/eslint-plugin": "^5.13.0",
+    "@typescript-eslint/parser": "^5.0.0",
     "babel": "^6.23.0",
     "babel-core": "^6.26.3",
     "babel-eslint": "^10.1.0",
@@ -44,6 +47,7 @@
     "css-loader": "^3.4.2",
     "eslint": "^7.2.0",
     "eslint-config-airbnb": "18.2.1",
+    "eslint-config-airbnb-typescript": "^17.0.0",
     "eslint-plugin-html": "^6.0.2",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-jsx-a11y": "^6.4.1",
@@ -56,14 +60,15 @@
     "imports-loader": "^1.1.0",
     "jest": "^27.3.1",
     "mini-css-extract-plugin": "1.6.0",
-    "moment": "^2.29.2",
+    "moment": "^2.29.3",
     "moment-locales-webpack-plugin": "^1.2.0",
     "nock": "^13.2.4",
     "optimize-css-assets-webpack-plugin": "6.0.0",
     "style-loader": "^1.2.1",
     "stylelint": "^13.6.1",
     "stylelint-config-standard": "^20.0.0",
     "terser-webpack-plugin": "<5.0.0",
+    "typescript": "^4.6.3",
     "url-loader": "4.1.0",
     "webpack": "4.44.2",
     "webpack-cli": "^3.3.12",
@@ -90,7 +95,7 @@
     "jquery": ">=3.5.0",
     "jshint": "^2.13.4",
     "lodash": "^4.17.21",
-    "moment-timezone": "^0.5.28",
+    "moment-timezone": "^0.5.34",
     "nvd3": "^1.8.6",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

airflow/www/static/js/dag.js

@@ -17,7 +17,7 @@
  * under the License.
  */
 
-/* global document, window, Event, $ */
+/* global document, window, CustomEvent, $ */
 
 import { getMetaValue } from './utils';
 import { approxTimeFromNow, formatDateTime } from './datetime_utils';
@@ -367,9 +367,7 @@ $('#pause_resume').on('change', function onChange() {
   $input.removeClass('switch-input--error');
 
   // dispatch an event that React can listen for
-  const event = new Event('paused');
-  event.value = isPaused;
-  event.key = 'isPaused';
+  const event = new CustomEvent('paused', { detail: isPaused });
   document.dispatchEvent(event);
 
   $.post(url).fail(() => {

airflow/www/static/js/grid/components/Time.test.jsx → airflow/www/static/js/grid/components/Time.test.tsx

@@ -17,7 +17,7 @@
  * under the License.
  */
 
-/* global describe, test, expect, document, Event */
+/* global describe, test, expect, document, CustomEvent */
 
 import React from 'react';
 import {
@@ -33,7 +33,7 @@ describe('Test Time and TimezoneProvider', () => {
   test('Displays a UTC time correctly', () => {
     const now = new Date();
     const { getByText } = render(
-      <Time dateTime={now} />,
+      <Time dateTime={now.toISOString()} />,
       { wrapper: Wrapper },
     );
 
@@ -48,7 +48,7 @@ describe('Test Time and TimezoneProvider', () => {
     moment.tz.setDefault(tz);
 
     const { getByText } = render(
-      <Time dateTime={now} />,
+      <Time dateTime={now.toISOString()} />,
       { wrapper: Wrapper },
     );
 
@@ -60,17 +60,17 @@ describe('Test Time and TimezoneProvider', () => {
   test('Updates based on timezone change', async () => {
     const now = new Date();
     const { getByText, queryByText } = render(
-      <Time dateTime={now} />,
+      <Time dateTime={now.toISOString()} />,
       { wrapper: Wrapper },
     );
 
     const utcTime = queryByText(moment.utc(now).format(defaultFormatWithTZ));
     expect(utcTime).toBeDefined();
 
     // Fire a custom timezone change event
-    const event = new Event(TimezoneEvent);
-    event.value = 'EST';
-    event.key = 'selected-timezone';
+    const event = new CustomEvent(TimezoneEvent, {
+      detail: 'EST',
+    });
     await act(async () => {
       fireEvent(document, event);
     });

airflow/www/static/js/grid/components/Time.jsx → airflow/www/static/js/grid/components/Time.tsx

@@ -17,18 +17,21 @@
  * under the License.
  */
 
-/* global moment */
-
 import React from 'react';
+import moment from 'moment-timezone';
 import { useTimezone } from '../context/timezone';
 import { defaultFormatWithTZ } from '../../datetime_utils';
 
-const Time = ({ dateTime, format = defaultFormatWithTZ }) => {
+interface Props {
+  dateTime: string;
+  format?: string;
+}
+
+const Time: React.FC<Props> = ({ dateTime, format = defaultFormatWithTZ }) => {
   const { timezone } = useTimezone();
   const time = moment(dateTime);
 
-  // eslint-disable-next-line no-underscore-dangle
-  if (!dateTime || !time._isValid) return null;
+  if (!dateTime || !time.isValid()) return null;
 
   const formattedTime = time.tz(timezone).format(format);
   const utcTime = time.tz('UTC').format(defaultFormatWithTZ);

airflow/www/static/js/grid/context/autorefresh.jsx

@@ -55,8 +55,8 @@ export const AutoRefreshProvider = ({ children }) => {
 
   useEffect(() => {
     const handleChange = (e) => {
-      setIsPaused(!e.value);
-      if (!e.value) {
+      setIsPaused(!e.detail);
+      if (!e.detail) {
         stopRefresh();
       }
     };

airflow/www/static/js/grid/context/timezone.jsx

@@ -22,13 +22,13 @@
 import React, { useContext, useEffect, useState } from 'react';
 import { TimezoneEvent } from '../../datetime_utils';
 
-const TimezoneContext = React.createContext(null);
+const TimezoneContext = React.createContext({ timezone: 'UTC' });
 
 export const TimezoneProvider = ({ children }) => {
   const [timezone, setTimezone] = useState((moment.defaultZone && moment.defaultZone.name) || 'UTC');
 
   const handleChange = (e) => {
-    if (e.value && e.value !== timezone) setTimezone(e.value);
+    if (e.detail && e.detail !== timezone) setTimezone(e.detail);
   };
 
   useEffect(() => {

airflow/www/static/js/main.js

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-/* global $, moment, Airflow, window, localStorage, document, hostName, csrfToken, Event */
+/* global $, moment, Airflow, window, localStorage, document, hostName, csrfToken, CustomEvent */
 
 import {
   dateTimeAttrFormat,
@@ -46,9 +46,9 @@ function changeDisplayedTimezone(tz) {
   localStorage.setItem('selected-timezone', tz);
 
   // dispatch an event that React can listen for
-  const event = new Event(TimezoneEvent);
-  event.value = tz;
-  event.key = 'selected-timezone';
+  const event = new CustomEvent(TimezoneEvent, {
+    detail: tz,
+  });
   document.dispatchEvent(event);
 
   setDisplayedTimezone(tz);

airflow/www/tsconfig.json

@@ -0,0 +1,42 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+/*
+*  TypeScript config
+*/
+{
+  "compilerOptions": {
+    "strict": true,
+    "allowJs": true,
+    "importsNotUsedAsValues": "error",
+    "target": "esnext",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "jsx": "preserve",
+    "types": ["node", "jest"],
+  },
+  "include": [
+    "static/js",
+  ],
+  "exclude": ["node_modules", "static/dist"]
+}

airflow/www/webpack.config.js

@@ -90,6 +90,8 @@ const config = {
     extensions: [
       '.js',
       '.jsx',
+      '.ts',
+      '.tsx',
       '.css',
     ],
   },
@@ -100,11 +102,11 @@ const config = {
         loader: 'imports-loader?define=>false',
       },
       {
-        test: /\.jsx?$/,
+        test: /\.[j|t]sx?$/,
         exclude: /node_modules/,
         loader: 'babel-loader',
         options: {
-          presets: ['@babel/preset-react'],
+          presets: ['@babel/preset-react', '@babel/preset-typescript'],
         },
       },
       // Extract css files