Update react monorepo to v17 (major)

package.json

@@ -60,22 +60,19 @@
     "classnames": "2.2.6",
     "clone-deep": "4.0.1",
     "d3": "6.3.0",
-    "enzyme": "3.11.0",
-    "enzyme-adapter-react-16": "1.15.5",
-    "enzyme-to-json": "3.6.1",
     "framer-motion": "2.9.5",
     "immer": "8.0.0",
     "mock-socket": "^9.0.3",
     "node-sass": "4.14.1",
     "prop-types": "15.7.2",
     "query-string": "6.13.7",
-    "react": "16.14.0",
-    "react-dom": "16.14.0",
+    "react": "17.0.1",
+    "react-dom": "17.0.1",
     "react-ga": "3.3.0",
     "react-redux": "7.2.2",
     "react-router-dom": "5.2.0",
     "react-scripts": "4.0.1",
-    "react-test-renderer": "16.14.0",
+    "react-test-renderer": "17.0.1",
     "redux": "4.0.5",
     "redux-devtools-extension": "2.13.8",
     "redux-mock-store": "1.5.4",
@@ -92,6 +89,9 @@
     "@types/react": "17.0.0",
     "@types/react-dom": "17.0.0",
     "eslint-config-prettier": "7.0.0",
+    "@wojtekmaj/enzyme-adapter-react-17": "0.1.1",
+    "enzyme": "3.11.0",
+    "enzyme-to-json": "3.6.1",
     "eslint-plugin-import": "2.22.1",
     "eslint-plugin-jest": "24.1.3",
     "eslint-plugin-jsx-a11y": "6.4.1",

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 } 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/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/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 } from "react";
+import { useState } 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, { useState } from "react";
+import { useState } from "react";
 import { useSelector, useStore } 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/Logo/Logo.js

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

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 } from "react-redux";
 import { NavLink, useLocation } from "react-router-dom";
 

src/components/PrimaryNav/PrimaryNav.test.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { 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, Switch, useLocation } from "react-router-dom";
 
 import Login from "components/LogIn/LogIn";

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,3 @@
-import React 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/StatusStrip/StatusStrip.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import { useState, useEffect } from "react";
 import { pluralize } from "app/utils";
 
 import "./_status-strip.scss";

src/components/StatusStrip/StatusStrip.test.js

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

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/WebCLI/Output.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 
 // Colors taken from the VSCode section of
 // https://en.wikipedia.org/wiki/ANSI_escape_code#3/4_bit

src/components/WebCLI/WebCLI.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 
 import useAnalytics from "../../hooks/useAnalytics";
 

src/components/WebCLI/WebCLI.test.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { mount } from "enzyme";
 import { act } from "react-dom/test-utils";
 import WS from "jest-websocket-mock";

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";
@@ -103,9 +103,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/Models/Details/ModelDetails.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState, useCallback } from "react";
+import { useEffect, useMemo, useState, useCallback } from "react";
 import MainTable from "@canonical/react-components/dist/components/MainTable";
 import Spinner from "@canonical/react-components/dist/components/Spinner";
 import { useDispatch, useSelector, useStore } 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 Spinner from "@canonical/react-components/dist/components/Spinner";
 

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,4 +1,3 @@
-import React from "react";
 import { Link } from "react-router-dom";
 
 import Layout from "components/Layout/Layout";

src/pages/NotFound/NotFound.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/Settings/Settings.js

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

src/setupTests.js

@@ -1,5 +1,5 @@
 import { configure } from "enzyme";
-import Adapter from "enzyme-adapter-react-16";
+import Adapter from "@wojtekmaj/enzyme-adapter-react-17";
 
 configure({ adapter: new Adapter() });
 

src/testing/utils.js

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