react-router migration batch 1: shared components, contexts and hooks

awx/ui/package.json

@@ -29,6 +29,7 @@
     "react-dom": "17.0.2",
     "react-error-boundary": "^3.1.4",
     "react-router-dom": "^5.3.3",
+    "react-router-dom-v5-compat": "^6.30.4",
     "react-virtualized": "^9.22.6",
     "rrule": "2.8.1",
     "styled-components": "5.3.11"

awx/ui/src/App.js

@@ -8,6 +8,7 @@ import {
   Redirect,
   useHistory,
 } from 'react-router-dom';
+import { CompatRouter } from 'react-router-dom-v5-compat';
 import { ErrorBoundary } from 'react-error-boundary';
 import locationReplace from 'util/navigation';
 import { I18nProvider } from '@lingui/react';
@@ -215,6 +216,8 @@ function App() {
 
 export default () => (
   <HashRouter>
-    <App />
+    <CompatRouter>
+      <App />
+    </CompatRouter>
   </HashRouter>
 );

awx/ui/src/components/AdHocCommands/AdHocCommands.js

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useState, useContext } from 'react';
-import { useHistory, useParams } from 'react-router-dom';
+import { useParams } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom-v5-compat';
 
 import { useLingui } from '@lingui/react/macro';
 
@@ -22,7 +23,7 @@ function AdHocCommands({
   moduleOptions,
 }) {
   const { t } = useLingui();
-  const history = useHistory();
+  const navigate = useNavigate();
   const { id } = useParams();
 
   const [isWizardOpen, setIsWizardOpen] = useState(false);
@@ -63,10 +64,10 @@ function AdHocCommands({
     useCallback(
       async (values) => {
         const { data } = await InventoriesAPI.launchAdHocCommands(id, values);
-        history.push(`/jobs/command/${data.id}/output`);
+        navigate(`/jobs/command/${data.id}/output`);
       },
 
-      [id, history]
+      [id, navigate]
     )
   );
 

awx/ui/src/components/AdHocCommands/AdHocCredentialStep.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useCallback } from 'react';
-import { useHistory } from 'react-router-dom';
+import { useLocation } from 'react-router-dom-v5-compat';
 import { useLingui } from '@lingui/react/macro';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
@@ -29,7 +29,7 @@ const QS_CONFIG = getQSConfig('credentials', {
 function AdHocCredentialStep({ credentialTypeId }) {
   const { t } = useLingui();
 
-  const history = useHistory();
+  const location = useLocation();
   const {
     error,
     isLoading,
@@ -42,7 +42,7 @@ function AdHocCredentialStep({ credentialTypeId }) {
     },
   } = useRequest(
     useCallback(async () => {
-      const params = parseQueryString(QS_CONFIG, history.location.search);
+      const params = parseQueryString(QS_CONFIG, location.search);
 
       const [
         {
@@ -64,7 +64,7 @@ function AdHocCredentialStep({ credentialTypeId }) {
         ).map((val) => val.slice(0, -8)),
         searchableKeys: getSearchableKeys(actionsResponse.data.actions?.GET),
       };
-    }, [credentialTypeId, history.location.search]),
+    }, [credentialTypeId, location.search]),
     {
       credentials: [],
       credentialCount: 0,

awx/ui/src/components/AdHocCommands/AdHocExecutionEnvironmentStep.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useCallback } from 'react';
-import { useHistory } from 'react-router-dom';
+import { useLocation } from 'react-router-dom-v5-compat';
 import { useLingui } from '@lingui/react/macro';
 import { useField } from 'formik';
 import { Form, FormGroup } from '@patternfly/react-core';
@@ -20,7 +20,7 @@ const QS_CONFIG = getQSConfig('execution_environments', {
 });
 function AdHocExecutionEnvironmentStep({ organizationId }) {
   const { t } = useLingui();
-  const history = useHistory();
+  const location = useLocation();
   const [executionEnvironmentField, , executionEnvironmentHelpers] = useField(
     'execution_environment'
   );
@@ -36,7 +36,7 @@ function AdHocExecutionEnvironmentStep({ organizationId }) {
     },
   } = useRequest(
     useCallback(async () => {
-      const params = parseQueryString(QS_CONFIG, history.location.search);
+      const params = parseQueryString(QS_CONFIG, location.search);
       const globallyAvailableParams = { or__organization__isnull: 'True' };
       const organizationIdParams = organizationId
         ? { or__organization__id: organizationId }
@@ -64,7 +64,7 @@ function AdHocExecutionEnvironmentStep({ organizationId }) {
         ).map((val) => val.slice(0, -8)),
         searchableKeys: getSearchableKeys(actionsResponse.data.actions?.GET),
       };
-    }, [history.location.search, organizationId]),
+    }, [location.search, organizationId]),
     {
       executionEnvironments: [],
       executionEnvironmentsCount: 0,

awx/ui/src/components/AddRole/AddResourceRole.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useMemo } from 'react';
 import PropTypes from 'prop-types';
-import { useHistory } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom-v5-compat';
 import { useLingui } from '@lingui/react/macro';
 import { TeamsAPI, UsersAPI } from 'api';
 import useSelected from 'hooks/useSelected';
@@ -74,7 +74,8 @@ function AddResourceRole({ onSave, onClose, roles, resource, onError }) {
       key: 'name',
     },
   ], [t]);
-  const history = useHistory();
+  const location = useLocation();
+  const navigate = useNavigate();
 
   const {
     selected: resourcesSelected,
@@ -93,9 +94,12 @@ function AddResourceRole({ onSave, onClose, roles, resource, onError }) {
 
   useEffect(() => {
     if (currentStepId === 1 && maxEnabledStep > 1) {
-      history.push(history.location.pathname);
+      navigate(location.pathname);
     }
-  }, [currentStepId, history, maxEnabledStep]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- navigate is not
+    // referentially stable in react-router-dom-v5-compat; including it refires
+    // this effect after unrelated navigations
+  }, [currentStepId, location.pathname, maxEnabledStep]);
 
   const handleResourceTypeSelect = (type) => {
     setResourceType(type);

awx/ui/src/components/AddRole/AddResourceRole.test.js

@@ -14,10 +14,6 @@ import AddResourceRole, { _AddResourceRole } from './AddResourceRole';
 jest.mock('../../api/models/Teams');
 jest.mock('../../api/models/Users');
 
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
-  useHistory: () => ({ push: jest.fn(), location: { pathname: {} } }),
-}));
 // TODO: Once error handling is functional in
 // this component write tests for it
 
@@ -200,7 +196,7 @@ describe('<_AddResourceRole />', () => {
   test('should update history properly', async () => {
     let wrapper;
     const history = createMemoryHistory({
-      initialEntries: ['organizations/2/access?resource.order_by=-username'],
+      initialEntries: ['/organizations/2/access?resource.order_by=-username'],
     });
     act(() => {
       wrapper = mountWithContexts(
@@ -233,7 +229,7 @@ describe('<_AddResourceRole />', () => {
       wrapper.find('PFWizard').prop('onGoToStep')({ id: 1 })
     );
     wrapper.update();
-    expect(history.location.pathname).toEqual('organizations/2/access');
+    expect(history.location.pathname).toEqual('/organizations/2/access');
   });
 
   test('should successfuly click user/team cards', async () => {

awx/ui/src/components/AppContainer/AppContainer.js

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { withRouter } from 'react-router-dom';
+
 import {
   Button,
   Nav,
@@ -167,4 +167,4 @@ function AppContainer({ navRouteConfig = [], children }) {
 }
 
 export { AppContainer as _AppContainer };
-export default withRouter(AppContainer);
+export default AppContainer;

awx/ui/src/components/AppContainer/NavExpandableGroup.js

@@ -1,10 +1,11 @@
 import React from 'react';
 import PropTypes, { oneOfType, string, arrayOf } from 'prop-types';
-import { matchPath, Link, useHistory } from 'react-router-dom';
+import { matchPath, Link } from 'react-router-dom';
+import { useLocation } from 'react-router-dom-v5-compat';
 import { NavExpandable, NavItem } from '@patternfly/react-core';
 
 function NavExpandableGroup(props) {
-  const history = useHistory();
+  const location = useLocation();
   const { groupId, groupTitle, routes } = props;
 
   // Extract a list of paths from the route params and store them for later. This creates
@@ -14,7 +15,7 @@ function NavExpandableGroup(props) {
   const isActive = navItemPaths.some(isActivePath);
 
   function isActivePath(path) {
-    return Boolean(matchPath(history.location.pathname, { path }));
+    return Boolean(matchPath(location.pathname, { path }));
   }
 
   if (routes.length === 1 && groupId === 'settings') {