Replace withRouter HOC with route hooks

awx/ui_next/src/screens/Organization/OrganizationAdd/OrganizationAdd.jsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { withRouter } from 'react-router-dom';
+import { useHistory } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import {
@@ -16,7 +16,8 @@ import { Config } from '@contexts/Config';
 import CardCloseButton from '@components/CardCloseButton';
 import OrganizationForm from '../shared/OrganizationForm';
 
-function OrganizationAdd({ history, i18n }) {
+function OrganizationAdd({ i18n }) {
+  const history = useHistory();
   const [formError, setFormError] = useState(null);
 
   const handleSubmit = async (values, groupsToAssociate) => {
@@ -67,4 +68,4 @@ OrganizationAdd.contextTypes = {
 };
 
 export { OrganizationAdd as _OrganizationAdd };
-export default withI18n()(withRouter(OrganizationAdd));
+export default withI18n()(OrganizationAdd);

awx/ui_next/src/screens/Organization/OrganizationDetail/OrganizationDetail.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Link, withRouter } from 'react-router-dom';
+import { Link, useRouteMatch } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import { CardBody as PFCardBody, Button } from '@patternfly/react-core';
@@ -16,10 +16,10 @@ const CardBody = styled(PFCardBody)`
   padding-top: 20px;
 `;
 
-function OrganizationDetail({ i18n, match, organization }) {
+function OrganizationDetail({ i18n, organization }) {
   const {
     params: { id },
-  } = match;
+  } = useRouteMatch();
   const {
     name,
     description,
@@ -104,4 +104,4 @@ function OrganizationDetail({ i18n, match, organization }) {
   );
 }
 
-export default withI18n()(withRouter(OrganizationDetail));
+export default withI18n()(OrganizationDetail);

awx/ui_next/src/screens/Organization/OrganizationEdit/OrganizationEdit.jsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { withRouter } from 'react-router-dom';
+import { useHistory } from 'react-router-dom';
 import { CardBody } from '@patternfly/react-core';
 
 import { OrganizationsAPI } from '@api';
@@ -8,8 +8,9 @@ import { Config } from '@contexts/Config';
 
 import OrganizationForm from '../shared/OrganizationForm';
 
-function OrganizationEdit({ history, organization }) {
+function OrganizationEdit({ organization }) {
   const detailsUrl = `/organizations/${organization.id}/details`;
+  const history = useHistory();
   const [formError, setFormError] = useState(null);
 
   const handleSubmit = async (
@@ -65,4 +66,4 @@ OrganizationEdit.contextTypes = {
 };
 
 export { OrganizationEdit as _OrganizationEdit };
-export default withRouter(OrganizationEdit);
+export default OrganizationEdit;

awx/ui_next/src/screens/Organization/OrganizationList/OrganizationList.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { withRouter } from 'react-router-dom';
+import { useLocation, useRouteMatch } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import { Card, PageSection } from '@patternfly/react-core';
@@ -22,7 +22,9 @@ const QS_CONFIG = getQSConfig('organization', {
   order_by: 'name',
 });
 
-function OrganizationsList({ i18n, location, match }) {
+function OrganizationsList({ i18n }) {
+  const location = useLocation();
+  const match = useRouteMatch();
   const [contentError, setContentError] = useState(null);
   const [deletionError, setDeletionError] = useState(null);
   const [hasContentLoading, setHasContentLoading] = useState(true);
@@ -185,4 +187,4 @@ function OrganizationsList({ i18n, location, match }) {
 }
 
 export { OrganizationsList as _OrganizationsList };
-export default withI18n()(withRouter(OrganizationsList));
+export default withI18n()(OrganizationsList);

awx/ui_next/src/screens/Organization/OrganizationTeams/OrganizationTeams.jsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import { withRouter } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 
 import { OrganizationsAPI } from '@api';
 import PaginatedDataList from '@components/PaginatedDataList';
@@ -12,7 +12,8 @@ const QS_CONFIG = getQSConfig('team', {
   order_by: 'name',
 });
 
-function OrganizationTeams({ id, location }) {
+function OrganizationTeams({ id }) {
+  const location = useLocation();
   const [contentError, setContentError] = useState(null);
   const [hasContentLoading, setHasContentLoading] = useState(false);
   const [itemCount, setItemCount] = useState(0);
@@ -54,4 +55,4 @@ OrganizationTeams.propTypes = {
 };
 
 export { OrganizationTeams as _OrganizationTeams };
-export default withRouter(OrganizationTeams);
+export default OrganizationTeams;

awx/ui_next/src/screens/Organization/OrganizationTeams/OrganizationTeams.test.jsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { act } from 'react-dom/test-utils';
-import { shallow } from 'enzyme';
 
 import { OrganizationsAPI } from '@api';
 import { mountWithContexts } from '@testUtils/enzymeHelpers';
@@ -32,14 +31,16 @@ describe('<OrganizationTeams />', () => {
     jest.clearAllMocks();
   });
 
-  test('renders succesfully', () => {
-    shallow(
-      <OrganizationTeams
-        id={1}
-        searchString=""
-        location={{ search: '', pathname: '/organizations/1/teams' }}
-      />
-    );
+  test('renders succesfully', async () => {
+    await act(async () => {
+      mountWithContexts(
+        <OrganizationTeams
+          id={1}
+          searchString=""
+          location={{ search: '', pathname: '/organizations/1/teams' }}
+        />
+      );
+    });
   });
 
   test('should load teams on mount', async () => {