Run codemod to update React imports

npx react-codemod update-react-imports

src/app/utils.js

@@ -1,4 +1,3 @@
-import React from "react";
 import cloneDeep from "clone-deep";
 
 import defaultCharmIcon from "static/images/icons/default-charm-icon.svg";

src/components/App/App.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { useSelector } from "react-redux";
 import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
 import { QueryParamProvider } from "use-query-params";

src/components/App/App.test.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { Provider } from "react-redux";
 import configureStore from "redux-mock-store";
 import { mount } from "enzyme";

src/components/Banner/Banner.js

@@ -1,5 +1,3 @@
-import React from "react";
-
 import "./_banner.scss";
 
 export default function Banner({ isActive, children, type }) {

src/components/Banner/Banner.test.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { shallow } from "enzyme";
 
 import Banner from "./Banner";

src/components/Button/Button.js

@@ -1,5 +1,3 @@
-import React from "react";
-
 import "./_button.scss";
 
 const Button = ({ onClick, children }) => {

src/components/Button/Button.test.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { shallow } from "enzyme";
 
 import Button from "./Button";

src/components/ButtonGroup/ButtonGroup.js

@@ -1,4 +1,3 @@
-import React from "react";
 import classNames from "classnames";
 
 import "./_button-group.scss";

src/components/ButtonGroup/ButtonGroup.test.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { mount } from "enzyme";
 
 import ButtonGroup from "./ButtonGroup";

src/components/Counts/Counts.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { pluralize } from "app/utils";
 
 import "./_counts.scss";

src/components/Counts/Counts.test.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { mount } from "enzyme";
 
 import Counts from "./Counts";

src/components/DonutChart/DonutChart.js

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect } from "react";
+import { useRef, useEffect } from "react";
 import * as d3 from "d3";
 
 const DonutChart = ({ chartData }) => {

src/components/DonutChart/DonutChart.test.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { mount } from "enzyme";
 
 import DonutChart from "./DonutChart";

src/components/ErrorBoundary/ErrorBoundary.js

@@ -1,4 +1,4 @@
-import React, { Component } from "react";
+import { Component } from "react";
 import * as Sentry from "@sentry/browser";
 
 export default class ErrorBoundary extends Component {

src/components/ErrorBoundary/ErrorBoundary.test.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { mount } from "enzyme";
 
 import ErrorBoundary from "./ErrorBoundary";

src/components/Filter/Filter.js

@@ -1,4 +1,3 @@
-import React from "react";
 import Button from "components/Button/Button";
 import classNames from "classnames";
 

src/components/Filter/Filter.test.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { mount } from "enzyme";
 
 import Filter from "./Filter";

src/components/FilterTags/FilterTags.js

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect } from "react";
+import { useState, useRef, useEffect } from "react";
 import classNames from "classnames";
 import { useSelector } from "react-redux";
 import { useHistory, useLocation } from "react-router-dom";

src/components/FilterTags/FilterTags.test.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { MemoryRouter, Router } from "react-router";
 import { mount } from "enzyme";
 import { Provider } from "react-redux";

src/components/Header/Header.js

@@ -1,5 +1,3 @@
-import React from "react";
-
 import "./_header.scss";
 
 export default function Header({ children }) {

src/components/Header/Header.test.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { mount } from "enzyme";
 
 import Header from "./Header";

src/components/InfoPanel/InfoPanel.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import { useState, useEffect } from "react";
 import { useParams } from "react-router-dom";
 
 import Topology from "components/Topology/Topology";

src/components/InfoPanel/InfoPanel.test.js

@@ -1,4 +1,3 @@
-import React from "react";
 import configureStore from "redux-mock-store";
 import { Provider } from "react-redux";
 import { mount } from "enzyme";

src/components/Layout/Layout.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useRef } from "react";
+import { useEffect, useState, useRef } from "react";
 import { useSelector, useStore, useDispatch } from "react-redux";
 import { isLoggedIn, getWSControllerURL } from "app/selectors";
 import Notification from "@canonical/react-components/dist/components/Notification/Notification";

src/components/Layout/Layout.test.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { BrowserRouter as Router } from "react-router-dom";
 import { mount } from "enzyme";
 import configureStore from "redux-mock-store";

src/components/LogIn/LogIn.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from "react";
+import { useEffect, useRef } from "react";
 import { useDispatch, useSelector, useStore } from "react-redux";
 import {
   isLoggedIn,

src/components/LogIn/LogIn.test.js

@@ -1,4 +1,3 @@
-import React from "react";
 import configureStore from "redux-mock-store";
 import { Provider } from "react-redux";
 import { mount } from "enzyme";

src/components/ModelTableList/CloudGroup.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { useSelector } from "react-redux";
 import MainTable from "@canonical/react-components/dist/components/MainTable";
 import {

src/components/ModelTableList/CloudGroup.test.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { MemoryRouter } from "react-router";
 import { mount } from "enzyme";
 import { Provider } from "react-redux";

src/components/ModelTableList/ModelTableList.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { useSelector, useStore } from "react-redux";
 
 import { getActiveUserTag, getWSControllerURL } from "app/selectors";

src/components/ModelTableList/ModelTableList.test.js

@@ -1,4 +1,3 @@
-import React from "react";
 import cloneDeep from "clone-deep";
 import { MemoryRouter } from "react-router";
 import { mount } from "enzyme";

src/components/ModelTableList/OwnerGroup.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { useSelector } from "react-redux";
 import MainTable from "@canonical/react-components/dist/components/MainTable";
 import { generateStatusElement, getModelStatusGroupData } from "app/utils";

src/components/ModelTableList/OwnerGroup.test.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { MemoryRouter } from "react-router";
 import { mount } from "enzyme";
 import { Provider } from "react-redux";

src/components/ModelTableList/StatusGroup.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { useSelector } from "react-redux";
 import MainTable from "@canonical/react-components/dist/components/MainTable";
 

src/components/ModelTableList/StatusGroup.test.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { MemoryRouter } from "react-router";
 import { mount } from "enzyme";
 import { Provider } from "react-redux";

src/components/ModelTableList/shared.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { Link } from "react-router-dom";
 import { extractCloudName, extractCredentialName } from "app/utils";
 

src/components/PrimaryNav/PrimaryNav.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import { useState, useEffect } from "react";
 import { useSelector, useDispatch } from "react-redux";
 import { NavLink, useLocation } from "react-router-dom";
 import classNames from "classnames";

src/components/PrimaryNav/PrimaryNav.test.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { BrowserRouter as Router, MemoryRouter } from "react-router-dom";
 import { mount } from "enzyme";
 import configureStore from "redux-mock-store";

src/components/Routes/Routes.js

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import { useEffect } from "react";
 import { Route, Redirect, useLocation } from "react-router-dom";
 
 import Controllers from "pages/Controllers/Controllers";

src/components/Routes/TestRoute.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { Route } from "react-router-dom";
 
 import { paths } from "./Routes";

src/components/SlidePanel/SlidePanel.js

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import { useEffect } from "react";
 import classnames from "classnames";
 import Spinner from "@canonical/react-components/dist/components/Spinner";
 

src/components/SlidePanel/SlidePanel.test.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { shallow, mount } from "enzyme";
 
 import SlidePanel from "./SlidePanel";

src/components/Terminal/Terminal.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useHistory } from "react-router-dom";
 // import { useSelector } from "react-redux";
 // import { getMacaroons } from "app/selectors";

src/components/Topology/Topology.js

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect } from "react";
+import { useRef, useEffect } from "react";
 import * as d3 from "d3";
 
 import { generateIconPath } from "app/utils";

src/components/UserMenu/UserMenu.js

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import { useEffect } from "react";
 import { useSelector, useDispatch, useStore } from "react-redux";
 import { Link, NavLink } from "react-router-dom";
 import classNames from "classnames";

src/components/UserMenu/UserMenu.test.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { BrowserRouter as Router } from "react-router-dom";
 import configureStore from "redux-mock-store";
 import { Provider } from "react-redux";

src/components/panels/AppsPanel/AppsPanel.js

@@ -1,4 +1,4 @@
-import React, { useMemo } from "react";
+import { useMemo } from "react";
 import { useSelector } from "react-redux";
 import { getConfig } from "app/selectors";
 import MainTable from "@canonical/react-components/dist/components/MainTable";

src/components/panels/MachinesPanel/MachinesPanel.js

@@ -1,4 +1,4 @@
-import React, { useMemo, useCallback } from "react";
+import { useMemo, useCallback } from "react";
 import MainTable from "@canonical/react-components/dist/components/MainTable";
 import cloneDeep from "clone-deep";
 

src/components/panels/UnitsPanel/UnitsPanel.js

@@ -1,4 +1,4 @@
-import React, { useMemo, useCallback } from "react";
+import { useMemo, useCallback } from "react";
 import MainTable from "@canonical/react-components/dist/components/MainTable";
 import cloneDeep from "clone-deep";
 

src/index.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { StrictMode } from "react";
 import ReactDOM from "react-dom";
 import { Provider } from "react-redux";
 import { applyMiddleware, combineReducers, createStore } from "redux";
@@ -106,9 +106,9 @@ function bootstrap() {
 
   ReactDOM.render(
     <Provider store={reduxStore}>
-      <React.StrictMode>
+      <StrictMode>
         <App />
-      </React.StrictMode>
+      </StrictMode>
     </Provider>,
     rootElement
   );

src/pages/Controllers/ControllerChart/ControllerChart.js

@@ -1,5 +1,3 @@
-import React from "react";
-
 import DonutChart from "components/DonutChart/DonutChart";
 
 import { pluralize } from "app/utils";

src/pages/Controllers/ControllerChart/ControllerChart.test.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { mount } from "enzyme";
 
 import ControllerChart from "./ControllerChart";

src/pages/Controllers/ControllerOverview/ControllerOverview.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { useSelector } from "react-redux";
 
 import {

src/pages/Controllers/Controllers.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import { useDispatch, useSelector, useStore } from "react-redux";
 import { Link } from "react-router-dom";
 import cloneDeep from "clone-deep";

src/pages/Controllers/Controllers.test.js

@@ -1,4 +1,3 @@
-import React from "react";
 import cloneDeep from "clone-deep";
 import { mount } from "enzyme";
 import { MemoryRouter } from "react-router";

src/pages/Logs/Logs.js

@@ -1,4 +1,3 @@
-import React from "react";
 import Notification from "@canonical/react-components/dist/components/Notification/Notification";
 
 import Layout from "components/Layout/Layout";

src/pages/Logs/Logs.test.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { shallow } from "enzyme";
 import Logs from "./Logs";
 

src/pages/Models/Details/ModelDetails.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useCallback } from "react";
+import { useEffect, useMemo, useCallback } from "react";
 import MainTable from "@canonical/react-components/dist/components/MainTable";
 import Spinner from "@canonical/react-components/dist/components/Spinner";
 import { useDispatch, useSelector } from "react-redux";

src/pages/Models/Details/ModelDetails.test.js

@@ -1,4 +1,3 @@
-import React from "react";
 import configureStore from "redux-mock-store";
 import { Provider } from "react-redux";
 import { mount } from "enzyme";

src/pages/Models/Details/generators.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { URL } from "@canonical/jaaslib/lib/urls";
 import cloneDeep from "clone-deep";
 

src/pages/Models/Models.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { useSelector } from "react-redux";
 import { useLocation } from "react-router-dom";
 import queryString from "query-string";

src/pages/Models/Models.test.js

@@ -1,4 +1,3 @@
-import React from "react";
 import configureStore from "redux-mock-store";
 import { Provider } from "react-redux";
 import { mount } from "enzyme";

src/pages/NotFound/NotFound.js

@@ -1,5 +1,3 @@
-import React from "react";
-
 import Layout from "components/Layout/Layout";
 
 export default function NotFound() {

src/pages/NotFound/NotFound.test.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { shallow } from "enzyme";
 import NotFound from "./NotFound";
 

src/pages/Settings/Settings.js

@@ -1,4 +1,3 @@
-import React from "react";
 import Header from "components/Header/Header";
 import Layout from "components/Layout/Layout";
 

src/pages/Usage/Usage.js

@@ -1,4 +1,3 @@
-import React from "react";
 import Layout from "components/Layout/Layout";
 import Notification from "@canonical/react-components/dist/components/Notification/Notification";
 

src/pages/Usage/Usage.test.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { shallow } from "enzyme";
 import Usage from "./Usage";
 

src/testing/utils.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { shallow } from "enzyme";
 
 /**