react-router migration batch 3: Inventory and Setting screens

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/screens/Inventory/ConstructedInventory.js

@@ -1,13 +1,6 @@
 import React, { useCallback, useEffect } from 'react';
 import { useLingui } from '@lingui/react/macro';
-import {
-  Link,
-  Switch,
-  Route,
-  Redirect,
-  useRouteMatch,
-  useLocation,
-} from 'react-router-dom';
+import { Link, Switch, Route, Redirect, useRouteMatch, useLocation } from 'react-router-dom';
 import { CaretLeftIcon } from '@patternfly/react-icons';
 import { Card, PageSection } from '@patternfly/react-core';
 

awx/ui/src/screens/Inventory/ConstructedInventoryAdd/ConstructedInventoryAdd.js

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom-v5-compat';
 import { Card, PageSection } from '@patternfly/react-core';
 import { ConstructedInventoriesAPI, InventoriesAPI } from 'api';
 import useRequest from 'hooks/useRequest';
@@ -9,7 +9,7 @@ import ContentLoading from 'components/ContentLoading';
 import ConstructedInventoryForm from '../shared/ConstructedInventoryForm';
 
 function ConstructedInventoryAdd() {
-  const history = useHistory();
+  const navigate = useNavigate();
   const [submitError, setSubmitError] = useState(null);
 
   const {
@@ -39,7 +39,7 @@ function ConstructedInventoryAdd() {
   }
 
   const handleCancel = () => {
-    history.push('/inventories');
+    navigate('/inventories');
   };
 
   const handleSubmit = async (values) => {
@@ -63,7 +63,7 @@ function ConstructedInventoryAdd() {
       }
       /* eslint-enable no-await-in-loop, no-restricted-syntax */
 
-      history.push(`/inventories/constructed_inventory/${inventoryId}/details`);
+      navigate(`/inventories/constructed_inventory/${inventoryId}/details`);
     } catch (error) {
       setSubmitError(error);
     }

awx/ui/src/screens/Inventory/ConstructedInventoryDetail/ConstructedInventoryDetail.js

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect } from 'react';
-import { Link, useHistory } from 'react-router-dom';
+import { Link } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom-v5-compat';
 import { useLingui } from '@lingui/react/macro';
 
 import {
@@ -71,7 +72,7 @@ function JobStatusLabel({ job }) {
 
 function ConstructedInventoryDetail({ inventory }) {
   const { t } = useLingui();
-  const history = useHistory();
+  const navigate = useNavigate();
   const helpText = getHelpText(t);
 
   const {
@@ -126,8 +127,8 @@ function ConstructedInventoryDetail({ inventory }) {
   const { request: deleteInventory, error: deleteError } = useRequest(
     useCallback(async () => {
       await InventoriesAPI.destroy(inventory.id);
-      history.push(`/inventories`);
-    }, [inventory.id, history])
+      navigate(`/inventories`);
+    }, [inventory.id, navigate])
   );
 
   const { error, dismissError } = useDismissableError(deleteError);

awx/ui/src/screens/Inventory/ConstructedInventoryDetail/ConstructedInventoryDetail.test.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Router } from 'react-router-dom';
+import { Router as RouterV6 } from 'react-router-dom-v5-compat';
 import { InventoriesAPI, ConstructedInventoriesAPI } from 'api';
 import {
   render,
@@ -80,7 +81,9 @@ describe('<ConstructedInventoryDetail />', () => {
   const Component = (props) => (
     <I18nProvider i18n={i18n}>
       <Router history={history}>
+        <RouterV6 location={history.location} navigator={history}>
         <ConstructedInventoryDetail inventory={mockInventory} {...props} />
+        </RouterV6>
       </Router>
     </I18nProvider>
   );

awx/ui/src/screens/Inventory/ConstructedInventoryEdit/ConstructedInventoryEdit.js

@@ -1,5 +1,5 @@
 import React, { useState, useCallback, useEffect } from 'react';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom-v5-compat';
 import { ConstructedInventoriesAPI, InventoriesAPI } from 'api';
 import useRequest from 'hooks/useRequest';
 import { CardBody } from 'components/Card';
@@ -15,7 +15,7 @@ function isEqual(array1, array2) {
 }
 
 function ConstructedInventoryEdit({ inventory }) {
-  const history = useHistory();
+  const navigate = useNavigate();
   const [submitError, setSubmitError] = useState(null);
   const detailsUrl = `/inventories/constructed_inventory/${inventory.id}/details`;
   const constructedInventoryId = inventory.id;
@@ -111,15 +111,15 @@ function ConstructedInventoryEdit({ inventory }) {
       }
       /* eslint-enable no-await-in-loop, no-restricted-syntax */
 
-      history.push(
+      navigate(
         `/inventories/constructed_inventory/${constructedInventoryId}/details`
       );
     } catch (error) {
       setSubmitError(error);
     }
   };
 
-  const handleCancel = () => history.push(detailsUrl);
+  const handleCancel = () => navigate(detailsUrl);
 
   if (contentError || optionsError) {
     return <ContentError error={contentError || optionsError} />;

awx/ui/src/screens/Inventory/FederatedInventory.js

@@ -1,13 +1,6 @@
 import React, { useCallback, useEffect } from 'react';
 import { useLingui } from '@lingui/react/macro';
-import {
-  Link,
-  Switch,
-  Route,
-  Redirect,
-  useRouteMatch,
-  useLocation,
-} from 'react-router-dom';
+import { Link, Switch, Route, Redirect, useRouteMatch, useLocation } from 'react-router-dom';
 import { CaretLeftIcon } from '@patternfly/react-icons';
 import { Card, PageSection } from '@patternfly/react-core';
 

awx/ui/src/screens/Inventory/FederatedInventoryAdd/FederatedInventoryAdd.js

@@ -1,16 +1,16 @@
 import React, { useState } from 'react';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom-v5-compat';
 import { Card, PageSection } from '@patternfly/react-core';
 import { FederatedInventoriesAPI, InventoriesAPI } from 'api';
 import { CardBody } from 'components/Card';
 import FederatedInventoryForm from '../shared/FederatedInventoryForm';
 
 function FederatedInventoryAdd() {
-  const history = useHistory();
+  const navigate = useNavigate();
   const [submitError, setSubmitError] = useState(null);
 
   const handleCancel = () => {
-    history.push('/inventories');
+    navigate('/inventories');
   };
 
   const handleSubmit = async (values) => {
@@ -29,7 +29,7 @@ function FederatedInventoryAdd() {
       }
       /* eslint-enable no-await-in-loop, no-restricted-syntax */
 
-      history.push(`/inventories/federated_inventory/${inventoryId}/details`);
+      navigate(`/inventories/federated_inventory/${inventoryId}/details`);
     } catch (error) {
       setSubmitError(error);
     }

awx/ui/src/screens/Inventory/FederatedInventoryDetail/FederatedInventoryDetail.js

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect } from 'react';
-import { Link, useHistory } from 'react-router-dom';
+import { Link } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom-v5-compat';
 import { useLingui } from '@lingui/react/macro';
 
 import {
@@ -23,7 +24,7 @@ import ErrorDetail from 'components/ErrorDetail';
 
 function FederatedInventoryDetail({ inventory }) {
   const { t } = useLingui();
-  const history = useHistory();
+  const navigate = useNavigate();
 
   const {
     result: { inputInventories, actions },
@@ -56,8 +57,8 @@ function FederatedInventoryDetail({ inventory }) {
   const { request: deleteInventory, error: deleteError } = useRequest(
     useCallback(async () => {
       await InventoriesAPI.destroy(inventory.id);
-      history.push(`/inventories`);
-    }, [inventory.id, history])
+      navigate(`/inventories`);
+    }, [inventory.id, navigate])
   );
 
   const { error, dismissError } = useDismissableError(deleteError);

awx/ui/src/screens/Inventory/FederatedInventoryEdit/FederatedInventoryEdit.js

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom-v5-compat';
 import { Card, PageSection } from '@patternfly/react-core';
 import { Inventory } from 'types';
 import { FederatedInventoriesAPI, InventoriesAPI } from 'api';
@@ -10,7 +10,7 @@ import useRequest from 'hooks/useRequest';
 import FederatedInventoryForm from '../shared/FederatedInventoryForm';
 
 function FederatedInventoryEdit({ inventory }) {
-  const history = useHistory();
+  const navigate = useNavigate();
   const [submitError, setSubmitError] = useState(null);
 
   const {
@@ -38,7 +38,7 @@ function FederatedInventoryEdit({ inventory }) {
   }, [fetchRelatedDetails]);
 
   const handleCancel = () => {
-    history.push(
+    navigate(
       `/inventories/federated_inventory/${inventory.id}/details`
     );
   };
@@ -73,7 +73,7 @@ function FederatedInventoryEdit({ inventory }) {
       }
       /* eslint-enable no-await-in-loop, no-restricted-syntax */
 
-      history.push(
+      navigate(
         `/inventories/federated_inventory/${inventory.id}/details`
       );
     } catch (error) {

awx/ui/src/screens/Inventory/Inventory.js

@@ -1,14 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { useLingui } from '@lingui/react/macro';
 
-import {
-  Switch,
-  Route,
-  Redirect,
-  Link,
-  useLocation,
-  useRouteMatch,
-} from 'react-router-dom';
+import { Switch, Route, Redirect, Link, useLocation, useRouteMatch } from 'react-router-dom';
 import { CaretLeftIcon } from '@patternfly/react-icons';
 import { Card, PageSection } from '@patternfly/react-core';
 import ContentError from 'components/ContentError';

awx/ui/src/screens/Inventory/InventoryAdd/InventoryAdd.js

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { useHistory } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom-v5-compat';
 import { PageSection, Card } from '@patternfly/react-core';
 import { CardBody } from 'components/Card';
 
@@ -8,10 +8,11 @@ import InventoryForm from '../shared/InventoryForm';
 
 function InventoryAdd() {
   const [error, setError] = useState(null);
-  const history = useHistory();
+  const location = useLocation();
+  const navigate = useNavigate();
 
   const handleCancel = () => {
-    history.push('/inventories');
+    navigate('/inventories');
   };
 
   async function submitLabels(inventoryId, orgId, labels = []) {
@@ -39,13 +40,13 @@ function InventoryAdd() {
         await InventoriesAPI.associateInstanceGroup(inventoryId, group.id);
       }
       /* eslint-enable no-await-in-loop, no-restricted-syntax */
-      const url = history.location.pathname.startsWith(
+      const url = location.pathname.startsWith(
         '/inventories/smart_inventory'
       )
         ? `/inventories/smart_inventory/${inventoryId}/details`
         : `/inventories/inventory/${inventoryId}/details`;
 
-      history.push(`${url}`);
+      navigate(`${url}`);
     } catch (err) {
       setError(err);
     }