Update react version to v17 (#1847)

**What this PR does / why we need it**:

- Update tsconfig, eslint config to support react v17
- Update packages that dependent to React 
- Remove importing of `React`. See this [link](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#how-to-upgrade-to-the-new-jsx-transform) to more details.
  - I used `npx react-codemod update-react-imports` to replace current importing.

**Which issue(s) this PR fixes**:

Fixes #

**Does this PR introduce a user-facing change?**:
<!--
If no, just write "NONE" in the release-note block below.
-->
```release-note
NONE
```

This PR was merged by Kapetanios.

pkg/app/web/.eslintrc.js

@@ -14,6 +14,8 @@ module.exports = {
     "react-hooks/rules-of-hooks": "error",
     "react-hooks/exhaustive-deps": "warn",
     "react/prop-types": "off",
+    "react/jsx-uses-react": "off",
+    "react/react-in-jsx-scope": "off",
     "@typescript-eslint/explicit-function-return-type": [
       "error",
       {

pkg/app/web/.scaffdog/component.md

@@ -10,7 +10,7 @@ ignore: []
 # `{{ inputs.name }}/index.tsx`
 
 ```tsx
-import React, { FC } from "react";
+import { FC } from "react";
 import { makeStyles } from "@material-ui/core";
 
 const useStyles = makeStyles(() => ({}));
@@ -31,7 +31,6 @@ export const {{ inputs.name | pascal }}: FC<{{ inputs.name | pascal }}Props> = (
 # `{{ inputs.name }}/index.stories.tsx`
 
 ```tsx
-import React from "react";
 import { {{ inputs.name | pascal }}, {{ inputs.name | pascal }}Props } from "./";
 import { Story } from "@storybook/react/types-6-0";
 

pkg/app/web/.scaffdog/page.md

@@ -10,7 +10,7 @@ ignore: []
 # `{{ inputs.name }}.tsx`
 
 ```tsx
-import React, { memo, FC, useEffect } from "react";
+import { memo, FC, useEffect } from "react";
 import { useParams } from "react-router-dom";
 
 export const {{ inputs.name | pascal }}Page: FC = memo(() => {

pkg/app/web/.storybook/ThemeDecorator.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { theme } from "../src/theme";
 import CssBaseline from "@material-ui/core/CssBaseline";
 import { makeStyles, ThemeProvider } from "@material-ui/core";

pkg/app/web/.storybook/redux-decorator.tsx

@@ -1,5 +1,4 @@
 import { DeepPartial } from "@reduxjs/toolkit";
-import React from "react";
 import { Provider } from "react-redux";
 import { AppState } from "../src/modules";
 import { createStore } from "../test-utils";

pkg/app/web/package.json

@@ -18,9 +18,9 @@
     "@babel/core": "^7.12.9",
     "@bazel/labs": "^3.2.2",
     "@bazel/typescript": "^3.2.2",
-    "@storybook/addon-actions": "^6.1.16",
-    "@storybook/addon-essentials": "^6.1.16",
-    "@storybook/react": "^6.1.16",
+    "@storybook/addon-actions": "^6.2.7",
+    "@storybook/addon-essentials": "^6.2.7",
+    "@storybook/react": "^6.2.7",
     "@testing-library/dom": "^7.28.1",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^10.4.3",
@@ -31,8 +31,8 @@
     "@types/google-protobuf": "^3.7.2",
     "@types/jest": "^25.2.3",
     "@types/loadable__component": "^5.13.1",
-    "@types/react": "^16.9.35",
-    "@types/react-dom": "^16.9.8",
+    "@types/react": "^17.0.3",
+    "@types/react-dom": "^17.0.3",
     "@types/react-redux": "^7.1.9",
     "@types/react-router-dom": "^5.1.5",
     "@types/redux-mock-store": "^1.0.2",
@@ -55,12 +55,12 @@
     "msw": "^0.21.2",
     "prettier": "^2.0.5",
     "react-docgen-typescript-loader": "^3.7.2",
-    "react-test-renderer": "^16.13.1",
+    "react-test-renderer": "^17.0.2",
     "redux-mock-store": "^1.5.4",
     "scaffdog": "^1.0.0",
     "ts-jest": "^26.3.0",
     "ts-loader": "^7.0.2",
-    "typescript": "^4.0.2",
+    "typescript": "^4.2.4",
     "webpack": "^4.43.0",
     "webpack-cli": "^3.3.11",
     "webpack-dev-server": "^3.11.0",
@@ -88,9 +88,9 @@
     "grpc-web": "^1.0.7",
     "history": "^4.10.1",
     "query-string": "^6.14.1",
-    "react": "^16.13.1",
+    "react": "^17.0.2",
     "react-cookie": "^4.0.3",
-    "react-dom": "^16.13.1",
+    "react-dom": "^17.0.2",
     "react-draggable": "^4.4.3",
     "react-intersection-observer": "^8.26.2",
     "react-redux": "^7.2.0",

pkg/app/web/src/components/add-application-drawer/index.stories.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import { AddApplicationDrawer } from "./";
 import { action } from "@storybook/addon-actions";
 import { createDecoratorRedux } from "../../../.storybook/redux-decorator";

pkg/app/web/src/components/add-application-drawer/index.test.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { AddApplicationDrawer } from "./";
 import { createStore, render, screen, waitFor } from "../../../test-utils";
 import { UI_TEXT_CANCEL, UI_TEXT_SAVE } from "../../constants/ui-text";

pkg/app/web/src/components/add-application-drawer/index.tsx

@@ -7,7 +7,7 @@ import {
   Drawer,
 } from "@material-ui/core";
 import { useFormik } from "formik";
-import React, { FC, memo, useCallback, useState } from "react";
+import { FC, memo, useCallback, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { UI_TEXT_CANCEL, UI_TEXT_DISCARD } from "../../constants/ui-text";
 import { addApplication, fetchApplications } from "../../modules/applications";

pkg/app/web/src/components/add-env-form/index.stories.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import { AddEnvForm } from "./";
 import { action } from "@storybook/addon-actions";
 

pkg/app/web/src/components/add-env-form/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, memo } from "react";
+import { FC, memo } from "react";
 import {
   makeStyles,
   Divider,

pkg/app/web/src/components/add-piped-drawer/index.stories.tsx

@@ -1,5 +1,5 @@
 import { action } from "@storybook/addon-actions";
-import React from "react";
+import * as React from "react";
 import { createDecoratorRedux } from "../../../.storybook/redux-decorator";
 import { dummyEnv } from "../../__fixtures__/dummy-environment";
 import { AddPipedDrawer } from "./";

pkg/app/web/src/components/add-piped-drawer/index.tsx

@@ -1,6 +1,6 @@
 import { Drawer } from "@material-ui/core";
 import { useFormik } from "formik";
-import React, { FC, memo, useCallback } from "react";
+import { FC, memo, useCallback } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { ADD_PIPED_SUCCESS } from "../../constants/toast-text";
 import { selectProjectName } from "../../modules/me";

pkg/app/web/src/components/app-live-state/index.stories.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import { Provider } from "react-redux";
 import { createStore } from "../../../test-utils";
 import { dummyApplication } from "../../__fixtures__/dummy-application";

pkg/app/web/src/components/app-live-state/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, memo } from "react";
+import { FC, memo } from "react";
 import { Box, makeStyles, Typography } from "@material-ui/core";
 import { useSelector } from "react-redux";
 import { AppState } from "../../modules";

pkg/app/web/src/components/app-sync-status/index.stories.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import { dummyApplicationSyncState } from "../../__fixtures__/dummy-application";
 
 import { AppSyncStatus } from "./";

pkg/app/web/src/components/app-sync-status/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import { FC } from "react";
 import { Box, makeStyles, Typography } from "@material-ui/core";
 import { SyncStatusIcon } from "../sync-status-icon";
 import { APPLICATION_SYNC_STATUS_TEXT } from "../../constants/application-sync-status-text";

pkg/app/web/src/components/application-count/index.stories.tsx

@@ -1,5 +1,4 @@
 import { Story } from "@storybook/react/types-6-0";
-import React from "react";
 import { ApplicationCount, ApplicationCountProps } from "./";
 
 export default {

pkg/app/web/src/components/application-count/index.tsx

@@ -7,7 +7,7 @@ import {
   Typography,
 } from "@material-ui/core";
 import clsx from "clsx";
-import React, { FC, memo, useState } from "react";
+import { FC, memo, useState } from "react";
 
 const useStyles = makeStyles((theme) => ({
   root: {

pkg/app/web/src/components/application-counts/index.test.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { render, screen } from "../../../test-utils";
 import { ApplicationCounts } from "./index";
 

pkg/app/web/src/components/application-counts/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, memo } from "react";
+import { FC, memo } from "react";
 import { makeStyles } from "@material-ui/core";
 import { useSelector } from "react-redux";
 import { AppState } from "../../modules";

pkg/app/web/src/components/application-detail/index.stories.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import { Provider } from "react-redux";
 import { ApplicationSyncStatus } from "pipe/pkg/app/web/model/application_pb";
 import { createStore } from "../../../test-utils";

pkg/app/web/src/components/application-detail/index.test.tsx

@@ -1,6 +1,5 @@
 import { DeepPartial } from "@reduxjs/toolkit";
 import userEvent from "@testing-library/user-event";
-import React from "react";
 import { MemoryRouter } from "react-router-dom";
 import { createStore, render, screen, waitFor } from "../../../test-utils";
 import { server } from "../../mocks/server";

pkg/app/web/src/components/application-detail/index.tsx

@@ -12,7 +12,7 @@ import Skeleton from "@material-ui/lab/Skeleton/Skeleton";
 import { SerializedError } from "@reduxjs/toolkit";
 import clsx from "clsx";
 import dayjs from "dayjs";
-import React, { FC, memo } from "react";
+import { FC, memo } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { Link as RouterLink } from "react-router-dom";
 import { APPLICATION_KIND_TEXT } from "../../constants/application-kind";

pkg/app/web/src/components/application-filter/index.stories.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import { ApplicationFilter } from "./";
 import { action } from "@storybook/addon-actions";
 import { createDecoratorRedux } from "../../../.storybook/redux-decorator";

pkg/app/web/src/components/application-filter/index.test.tsx

@@ -1,5 +1,4 @@
 import userEvent from "@testing-library/user-event";
-import React from "react";
 import { render, screen } from "../../../test-utils";
 import { UI_TEXT_CLEAR } from "../../constants/ui-text";
 import {

pkg/app/web/src/components/application-filter/index.tsx

@@ -7,7 +7,7 @@ import {
   TextField,
 } from "@material-ui/core";
 import Autocomplete from "@material-ui/lab/Autocomplete";
-import React, { FC, memo } from "react";
+import { FC, memo } from "react";
 import { useSelector } from "react-redux";
 import { APPLICATION_KIND_TEXT } from "../../constants/application-kind";
 import { APPLICATION_SYNC_STATUS_TEXT } from "../../constants/application-sync-status-text";

pkg/app/web/src/components/application-form/index.tsx

@@ -10,7 +10,7 @@ import {
 } from "@material-ui/core";
 import { FormikProps } from "formik";
 import { ApplicationKind } from "pipe/pkg/app/web/model/common_pb";
-import React, { FC, memo, ReactElement } from "react";
+import { FC, memo, ReactElement } from "react";
 import { useSelector } from "react-redux";
 import * as Yup from "yup";
 import { APPLICATION_KIND_TEXT } from "../../constants/application-kind";

pkg/app/web/src/components/application-list-item/index.test.tsx

@@ -1,5 +1,4 @@
 import userEvent from "@testing-library/user-event";
-import React from "react";
 import { MemoryRouter } from "react-router-dom";
 import { createStore, render, screen } from "../../../test-utils";
 import { dummyApplication } from "../../__fixtures__/dummy-application";

pkg/app/web/src/components/application-list-item/index.tsx

@@ -11,7 +11,7 @@ import {
 import MenuIcon from "@material-ui/icons/MoreVert";
 import clsx from "clsx";
 import dayjs from "dayjs";
-import React, { FC, memo, useState } from "react";
+import { FC, memo, useState } from "react";
 import { useSelector } from "react-redux";
 import { Link as RouterLink } from "react-router-dom";
 import { APPLICATION_KIND_TEXT } from "../../constants/application-kind";

pkg/app/web/src/components/application-list/index.stories.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import { ApplicationList } from "./";
 import { createDecoratorRedux } from "../../../.storybook/redux-decorator";
 import { dummyApplication } from "../../__fixtures__/dummy-application";

pkg/app/web/src/components/application-list/index.test.tsx

@@ -1,5 +1,4 @@
 import userEvent from "@testing-library/user-event";
-import React from "react";
 import { MemoryRouter } from "react-router-dom";
 import { createStore, render, screen, waitFor } from "../../../test-utils";
 import { server } from "../../mocks/server";

pkg/app/web/src/components/application-list/index.tsx

@@ -10,7 +10,8 @@ import {
   TablePagination,
   TableRow,
 } from "@material-ui/core";
-import React, { FC, memo, useCallback, useState } from "react";
+import { FC, memo, useCallback, useState } from "react";
+import * as React from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { AppState } from "../../modules";
 import {

pkg/app/web/src/components/application-state-view/index.stories.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import { ApplicationStateView } from "./";
 import { createDecoratorRedux } from "../../../.storybook/redux-decorator";
 import { dummyApplicationLiveState } from "../../__fixtures__/dummy-application-live-state";

pkg/app/web/src/components/application-state-view/index.test.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { createStore, render, screen } from "../../../test-utils";
 import { ApplicationStateView } from "./";
 import { dummyApplicationLiveState } from "../../__fixtures__/dummy-application-live-state";

pkg/app/web/src/components/application-state-view/index.tsx

@@ -6,7 +6,7 @@ import {
   Typography,
 } from "@material-ui/core";
 import { ApplicationKind } from "pipe/pkg/app/web/model/common_pb";
-import React, { FC, memo } from "react";
+import { FC, memo } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { UI_TEXT_REFRESH } from "../../constants/ui-text";
 import { AppState } from "../../modules";

pkg/app/web/src/components/approval-stage/index.stories.tsx

@@ -1,5 +1,5 @@
 import { action } from "@storybook/addon-actions";
-import React from "react";
+import * as React from "react";
 import { ApprovalStage } from "./";
 
 export default {

pkg/app/web/src/components/approval-stage/index.test.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { ApprovalStage } from "./";
 import { render, screen } from "../../../test-utils";
 import userEvent from "@testing-library/user-event";

pkg/app/web/src/components/approval-stage/index.tsx

@@ -1,6 +1,6 @@
 import { makeStyles, Paper, Typography } from "@material-ui/core";
 import WaitIcon from "@material-ui/icons/PauseCircleOutline";
-import React, { FC, memo } from "react";
+import { FC, memo } from "react";
 
 const useStyles = makeStyles((theme) => ({
   root: (props: { active: boolean }) => ({

pkg/app/web/src/components/change-failure-rate-chart/index.stories.tsx

@@ -1,6 +1,5 @@
 import { Box } from "@material-ui/core";
 import { Story } from "@storybook/react/types-6-0";
-import React from "react";
 import { ChangeFailureRateChart, ChangeFailureRateChartProps } from ".";
 
 export default {

pkg/app/web/src/components/change-failure-rate-chart/index.tsx

@@ -1,6 +1,6 @@
 import chartColor from "@material-ui/core/colors/deepPurple";
 import { InsightDataPoint } from "pipe/pkg/app/web/model/insight_pb";
-import React, { FC } from "react";
+import { FC } from "react";
 import { ChartBase } from "../chart-base";
 
 export interface ChangeFailureRateChartProps {

pkg/app/web/src/components/chart-base/index.stories.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { ChartBase, ChartBaseProps } from "./";
 import { Story } from "@storybook/react/types-6-0";
 import chartColor from "@material-ui/core/colors/indigo";

pkg/app/web/src/components/chart-base/index.tsx

@@ -11,7 +11,7 @@ import {
 import * as echarts from "echarts/core";
 import { CanvasRenderer } from "echarts/renderers";
 import { InsightDataPoint } from "pipe/pkg/app/web/model/insight_pb";
-import React, { FC, useEffect, useState } from "react";
+import { FC, useEffect, useState } from "react";
 
 echarts.use([
   TitleComponent,

pkg/app/web/src/components/delete-application-dialog/index.stories.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import { createDecoratorRedux } from "../../../.storybook/redux-decorator";
 import { dummyApplication } from "../../__fixtures__/dummy-application";
 import { DeleteApplicationDialog } from "./";

pkg/app/web/src/components/delete-application-dialog/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, memo, useCallback } from "react";
+import { FC, memo, useCallback } from "react";
 import {
   makeStyles,
   Dialog,

pkg/app/web/src/components/deployment-config-form/index.stories.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import { DeploymentConfigForm } from "./";
 import { action } from "@storybook/addon-actions";
 import { createStore } from "../../../test-utils";

pkg/app/web/src/components/deployment-config-form/index.test.tsx

@@ -1,6 +1,5 @@
 import userEvent from "@testing-library/user-event";
 import { setupServer } from "msw/node";
-import React from "react";
 import { createReduxStore, render, screen, waitFor } from "../../../test-utils";
 import { listDeploymentConfigTemplatesHandler } from "../../mocks/services/deployment-config";
 import { dummyApplication } from "../../__fixtures__/dummy-application";

pkg/app/web/src/components/deployment-config-form/index.tsx

@@ -12,7 +12,8 @@ import {
 import CopyIcon from "@material-ui/icons/FileCopyOutlined";
 import OpenInNewIcon from "@material-ui/icons/OpenInNew";
 import copy from "copy-to-clipboard";
-import React, { FC, useEffect, useState, memo } from "react";
+import { FC, useEffect, useState, memo } from "react";
+import * as React from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { AppState } from "../../modules";
 import {

pkg/app/web/src/components/deployment-detail/index.stories.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import { createDecoratorRedux } from "../../../.storybook/redux-decorator";
 import { dummyDeployment } from "../../__fixtures__/dummy-deployment";
 import { DeploymentDetail } from "./";

pkg/app/web/src/components/deployment-detail/index.test.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { createStore, render, screen } from "../../../test-utils";
 import { DeploymentDetail } from "./";
 import { dummyDeployment } from "../../__fixtures__/dummy-deployment";