update babel and ts config, remove 'React' imports (#4102)

* update babel and ts config, remove 'React' imports

* remove new file creation

* remove added file

* remove dumb component

* remove unused file and folder

* remove formatting

* fix react imports and merge conflict changes

web/babel.config.js

@@ -1,11 +1,11 @@
 module.exports = {
   presets: [
     "@babel/preset-env",
-    "@babel/preset-react",
-    "@babel/preset-typescript"
+    ["@babel/preset-react", { runtime: "automatic" }],
+    "@babel/preset-typescript",
   ],
   plugins: [
     ["@babel/plugin-proposal-class-properties", { loose: true }],
-    ["@babel/plugin-proposal-optional-chaining", { loose: true }]
-  ]
+    ["@babel/plugin-proposal-optional-chaining", { loose: true }],
+  ],
 };

web/src/ConnectionTerminated.jsx

@@ -1,8 +1,8 @@
-import * as React from "react";
-import { Utilities } from "./utilities/utilities";
+import { Component } from "react";
 import fetch from "./utilities/fetchWithTimeout";
+import { Utilities } from "./utilities/utilities";
 
-export default class ConnectionTerminated extends React.Component {
+export default class ConnectionTerminated extends Component {
   state = {
     seconds: 1,
     reconnectAttempts: 1,

web/src/Root.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useReducer } from "react";
+import { useReducer, useEffect, createContext } from "react";
 import { createBrowserHistory } from "history";
 import { Navigate, Route, Routes, useNavigate } from "react-router-dom";
 import { Helmet } from "react-helmet";
@@ -70,7 +70,7 @@ let history = connectHistory(browserHistory);
 
 // TODO:  pull in the react router hook
 
-const ThemeContext = React.createContext({
+const ThemeContext = createContext({
   setThemeState: (themeState?: ThemeState) => {
     console.log("setThemeState used before being set", themeState);
   },

web/src/components/AirgapUploadProgress.jsx

@@ -1,4 +1,3 @@
-import React from "react";
 import Loader from "./shared/Loader";
 import {
   formatByteSize,
@@ -10,9 +9,10 @@ import fetch from "../utilities/fetchWithTimeout";
 import "@src/scss/components/AirgapUploadProgress.scss";
 import get from "lodash/get";
 import Icon from "./Icon";
+import { Component } from "react";
 let processingImages = null;
 
-class AirgapUploadProgress extends React.Component {
+class AirgapUploadProgress extends Component {
   constructor(props) {
     super(props);
 

web/src/components/AppConfigRenderer.jsx

@@ -1,11 +1,11 @@
-import React from "react";
 import ConfigRender from "./config_render/ConfigRender";
 import PropTypes from "prop-types";
 import map from "lodash/map";
 import sortBy from "lodash/sortBy";
 import keyBy from "lodash/keyBy";
+import { Component } from "react";
 
-export class AppConfigRenderer extends React.Component {
+export class AppConfigRenderer extends Component {
   static propTypes = {
     groups: PropTypes.array.isRequired, // Config groups items to render
     handleChange: PropTypes.func,

web/src/components/BackupRestore.jsx

@@ -1,18 +1,17 @@
-import * as React from "react";
 import { Link } from "react-router-dom";
 import { KotsPageTitle } from "@components/Head";
 import isEmpty from "lodash/isEmpty";
 
 import "../scss/components/UploadLicenseFile.scss";
-import { Utilities } from "../utilities/utilities";
 
 import RestoreSnapshotRow from "./RestoreSnapshotRow";
 import UploadLicenseFile from "./UploadLicenseFile";
 import Loader from "./shared/Loader";
 import ConfigureSnapshots from "./snapshots/ConfigureSnapshots";
 import Icon from "./Icon";
+import { Component } from "react";
 
-class BackupRestore extends React.Component {
+class BackupRestore extends Component {
   state = {
     backups: [],
     isLoadingBackups: false,

web/src/components/Head/KotsPageTitle.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { useParams } from "react-router-dom";
 import { Helmet } from "react-helmet";
 

web/src/components/Home.jsx

@@ -1,11 +1,11 @@
-import * as React from "react";
 import { Route, Routes } from "react-router-dom";
 import NotFound from "../static/NotFound";
 
 import GitHubAuthBegin from "./GitHubAuthBegin";
 import GitHubAuthCallback from "./GitHubAuthCallback";
+import { Component } from "react";
 
-export default class GitHubAuth extends React.Component {
+export default class GitHubAuth extends Component {
   render() {
     return (
       <div className="flex-column flex1 Login-wrapper">

web/src/components/Icon.tsx

@@ -1,5 +1,4 @@
 // Icon.jsx
-import React from "react";
 import IcoMoon from "react-icomoon";
 import iconSet from "./selection.json";
 import "@src/css/icon.css";

web/src/components/LicenseUploadProgress.jsx

@@ -1,9 +1,8 @@
-import React from "react";
-import { Utilities } from "@src/utilities/utilities";
+import { Component } from "react";
 import { Repeater } from "@src/utilities/repeater";
 import "@src/scss/components/AirgapUploadProgress.scss";
 
-class LicenseUploadProgress extends React.Component {
+class LicenseUploadProgress extends Component {
   constructor(props) {
     super(props);
 

web/src/components/PreflightRenderer.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import classNames from "classnames";
 // TODO: find replacement for react-remarkable
 // @ts-ignore

web/src/components/PreflightResultErrors.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useReducer } from "react";
+import { useEffect, useReducer, useState } from "react";
 import { useParams } from "react-router-dom";
 import MonacoEditor from "@monaco-editor/react";
 import CodeSnippet from "./shared/CodeSnippet";
@@ -63,10 +63,10 @@ const PreflightResultErrors = (props: Props) => {
   const { slug, sequence = "0" } = useParams<keyof KotsParams>() as KotsParams;
   const selectedApp = useSelectedApp();
 
-  const [previousAppSlug, setPreviousAppSlug] = React.useState(slug);
-  const [previousSequence, setPreviousSequence] = React.useState<
-    string | undefined
-  >(sequence);
+  const [previousAppSlug, setPreviousAppSlug] = useState(slug);
+  const [previousSequence, setPreviousSequence] = useState<string | undefined>(
+    sequence
+  );
 
   const getPreflightCommand = async () => {
     try {

web/src/components/PreflightResultPage.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import { KotsPageTitle } from "@components/Head";
 import { useParams, useLocation } from "react-router-dom";

web/src/components/RestoreCompleted.jsx

@@ -1,8 +1,8 @@
-import * as React from "react";
+import { Component } from "react";
 import { Link } from "react-router-dom";
 import Icon from "./Icon";
 
-export default class RestoreCompleted extends React.Component {
+export default class RestoreCompleted extends Component {
   render() {
     return (
       <div className="u-width--full flex-column flex1 justifyContent--center u-position--relative">

web/src/components/RestoreSnapshotRow.jsx

@@ -1,10 +1,9 @@
-import React from "react";
-
+import { Component } from "react";
 import { Utilities } from "../utilities/utilities";
 import "../scss/components/RestoreSnapshotRow.scss";
 import Icon from "./Icon";
 
-class RestoreSnapshotRow extends React.Component {
+class RestoreSnapshotRow extends Component {
   state = {
     toggleVolumes: false,
     isLoadingBackupInfo: false,

web/src/components/UploadAirgapBundle.jsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import { Component } from "react";
 import classNames from "classnames";
 import { KotsPageTitle } from "@components/Head";
 import isEmpty from "lodash/isEmpty";
@@ -8,7 +8,6 @@ import MountAware from "@src/components/shared/MountAware";
 import AirgapUploadProgress from "@features/Dashboard/components/AirgapUploadProgress";
 import LicenseUploadProgress from "./LicenseUploadProgress";
 import AirgapRegistrySettings from "./shared/AirgapRegistrySettings";
-import { Utilities } from "../utilities/utilities";
 import { AirgapUploader } from "../utilities/airgapUploader";
 import { withRouter } from "@src/utilities/react-router-utilities";
 
@@ -21,7 +20,7 @@ const COMMON_ERRORS = {
   "no such host": "No such host",
 };
 
-class UploadAirgapBundle extends React.Component {
+class UploadAirgapBundle extends Component {
   state = {
     bundleFile: {},
     fileUploading: false,

web/src/components/UploadLicenseFile.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useReducer } from "react";
+import { useEffect, useReducer } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import yaml from "js-yaml";
 import isEmpty from "lodash/isEmpty";

web/src/components/apps/AppDetailPage.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment, useEffect, useReducer, useState } from "react";
+import { Fragment, useReducer, useEffect, useState } from "react";
 import classNames from "classnames";
 import { Outlet, useNavigate, useParams } from "react-router-dom";
 import Modal from "react-modal";

web/src/components/apps/AppIdentityServiceSettings.jsx

@@ -1,4 +1,4 @@
-import React, { Component } from "react";
+import { Component } from "react";
 import IdentityProviders from "@src/components/identity/IdentityProviders";
 
 import "@src/scss/components/identity/IdentityManagement.scss";

web/src/components/apps/AppLicense.tsx

@@ -1,4 +1,4 @@
-import React, { useReducer, useEffect } from "react";
+import { useReducer, useEffect, ReactNode } from "react";
 import { KotsPageTitle } from "@components/Head";
 // @ts-ignore
 import Dropzone from "react-dropzone";
@@ -323,7 +323,7 @@ const AppLicenseComponent = () => {
   const gitops = app.downstream?.gitops;
   const appName = app?.name || "Your application";
 
-  let nextModalBody: React.ReactNode;
+  let nextModalBody: ReactNode;
   if (isHelmManaged) {
     const sequence = app?.downstream?.currentVersion?.sequence;
     const versionLabel = app?.downstream?.currentVersion?.versionLabel;

web/src/components/apps/AppRegistrySettings.jsx

@@ -1,4 +1,4 @@
-import React, { Component } from "react";
+import { Component } from "react";
 import { KotsPageTitle } from "@components/Head";
 import AirgapRegistrySettings from "../shared/AirgapRegistrySettings";
 

web/src/components/apps/AppVersionHistory.tsx

@@ -1,4 +1,4 @@
-import React, { Component } from "react";
+import { ChangeEvent, Component, Fragment } from "react";
 import { Link } from "react-router-dom";
 import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
@@ -365,7 +365,7 @@ class AppVersionHistory extends Component<Props, State> {
     }
   };
 
-  setPageSize = (e: React.ChangeEvent<HTMLSelectElement>) => {
+  setPageSize = (e: ChangeEvent<HTMLSelectElement>) => {
     this.setState(
       { pageSize: parseInt(e.target.value), currentPage: 0 },
       () => {
@@ -1456,7 +1456,7 @@ class AppVersionHistory extends Component<Props, State> {
     }
 
     return (
-      <React.Fragment key={index}>
+      <Fragment key={index}>
         <AppVersionHistoryRow
           navigate={this.props.navigate}
           adminConsoleMetadata={this.props.outletContext.adminConsoleMetadata}
@@ -1617,7 +1617,7 @@ class AppVersionHistory extends Component<Props, State> {
               }}
             </UseDownloadValues>
           )}
-      </React.Fragment>
+      </Fragment>
     );
   };
 

web/src/components/apps/EmbeddedClusterManagement.tsx

@@ -1,7 +1,7 @@
 import { useQuery } from "@tanstack/react-query";
 import classNames from "classnames";
 import MaterialReactTable, { MRT_ColumnDef } from "material-react-table";
-import React, { ChangeEvent, useMemo, useReducer, useState } from "react";
+import { ChangeEvent, useMemo, useReducer, useState } from "react";
 import Modal from "react-modal";
 import { Link, useParams } from "react-router-dom";
 

web/src/components/apps/EmbeddedClusterViewNode.jsx

@@ -1,5 +1,5 @@
 import { MaterialReactTable } from "material-react-table";
-import React, { useMemo } from "react";
+import { useMemo } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { Link, useParams } from "react-router-dom";
 import Loader from "@components/shared/Loader";

web/src/components/apps/KurlClusterManagement.jsx

@@ -1,4 +1,4 @@
-import React, { Component, Fragment } from "react";
+import { Component, Fragment } from "react";
 import classNames from "classnames";
 import dayjs from "dayjs";
 import { KotsPageTitle } from "@components/Head";

web/src/components/apps/KurlNodeRow.jsx

@@ -1,4 +1,3 @@
-import React from "react";
 import classNames from "classnames";
 import Loader from "../shared/Loader";
 import { rbacRoles } from "../../constants/rbac";

web/src/components/apps/LicenseTester.jsx

@@ -1,6 +1,6 @@
 import useLicense from "@features/App/api/getLicense";
 import { useLicenseWithIntercept } from "@features/App/api/useLicense";
-import React, { useEffect } from "react";
+import { useEffect } from "react";
 import { usePrevious } from "@src/hooks/usePrevious";
 
 const LicenseTester = ({ appSlug, setLoader }) => {

web/src/components/clusters/GitOps.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import { Component } from "react";
 import { KotsPageTitle } from "@components/Head";
 import GitOpsDeploymentManager from "../../features/Gitops/GitOpsDeploymentManager";
 import { GitOpsProvider } from "../../features/Gitops/context";
@@ -9,7 +9,7 @@ import "../../scss/components/watches/WatchCard.scss";
 interface Props {
   appName: string;
 }
-export class GitOps extends React.Component<Props> {
+export class GitOps extends Component<Props> {
   render() {
     return (
       <GitOpsProvider>

web/src/components/config_render/ConfigCheckbox.tsx

@@ -1,4 +1,4 @@
-import React, { createRef } from "react";
+import { ChangeEvent, Component, createRef } from "react";
 // TODO: add type checking support for react-remarkable or add a global ignore
 // @ts-ignore
 import Markdown from "react-remarkable";
@@ -26,10 +26,10 @@ type Props = {
   recommended: boolean;
 };
 
-export default class ConfigCheckbox extends React.Component<Props> {
+export default class ConfigCheckbox extends Component<Props> {
   private checkbox = createRef<HTMLInputElement>();
 
-  handleOnChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
+  handleOnChange = (e: ChangeEvent<HTMLInputElement>): void => {
     const { handleOnChange, name } = this.props;
     var val = e.target.checked ? "1" : "0";
     if (this.props.handleOnChange && typeof handleOnChange === "function") {

web/src/components/config_render/ConfigFileInput.jsx

@@ -1,11 +1,10 @@
-import React from "react";
+import { Component } from "react";
 import FileInput from "./FileInput";
 import ConfigItemTitle from "./ConfigItemTitle";
 import map from "lodash/map";
-import { Utilities } from "../../utilities/utilities";
 import Markdown from "react-remarkable";
 
-export default class ConfigFileInput extends React.Component {
+export default class ConfigFileInput extends Component {
   handleOnChange = (files) => {
     if (this.props.handleChange) {
       if (this.props.repeatable) {

web/src/components/config_render/ConfigGroup.jsx

@@ -1,6 +1,5 @@
-import React from "react";
+import { createRef } from "react";
 import Markdown from "react-remarkable";
-import each from "lodash/each";
 import some from "lodash/some";
 import isEmpty from "lodash/isEmpty";
 import { ConfigService } from "../../services/ConfigService";
@@ -12,11 +11,11 @@ import ConfigItemTitle from "./ConfigItemTitle";
 import ConfigCheckbox from "./ConfigCheckbox";
 import ConfigFileInput from "./ConfigFileInput";
 import { setOrder } from "./ConfigUtil";
-import { ConfigWrapper, ConfigItems } from "./ConfigComponents";
+import { ConfigWrapper } from "./ConfigComponents";
 import Icon from "../Icon";
 
 const ConfigGroup = (props) => {
-  const markdownNode = React.createRef();
+  const markdownNode = createRef();
 
   const handleItemChange = (itemName, value, data) => {
     if (props.handleChange) {

web/src/components/config_render/ConfigGroups.jsx

@@ -1,7 +1,7 @@
-import React from "react";
+import { Component } from "react";
 import ConfigGroup from "./ConfigGroup";
 
-export default class ConfigGroups extends React.Component {
+export default class ConfigGroups extends Component {
   handleGroupChange = (groupName, itemName, value, data) => {
     if (this.props.handleChange) {
       this.props.handleChange(groupName, itemName, value, data);