Merge pull request #5678 from marshmalien/5657-update-inventory-detail

Fetch new inventory when location changes

Reviewed-by: https://github.com/apps/softwarefactory-project-zuul

awx/ui_next/src/app.scss

@@ -183,10 +183,6 @@
   z-index: 20;
 }
 
-.at-u-textRight {
-  text-align: right;
-}
-
 //
 // AlertModal styles
 //

awx/ui_next/src/screens/Inventory/Inventories.jsx

@@ -101,22 +101,16 @@ class Inventories extends Component {
             path={`${match.path}/smart_inventory/add`}
             render={() => <SmartInventoryAdd />}
           />
-          <Route
-            path={`${match.path}/inventory/:id`}
-            render={({ match: newRouteMatch }) => (
-              <Config>
-                {({ me }) => (
-                  <Inventory
-                    history={history}
-                    location={location}
-                    setBreadcrumb={this.setBreadCrumbConfig}
-                    me={me || {}}
-                    match={newRouteMatch}
-                  />
-                )}
-              </Config>
-            )}
-          />
+          <Route path={`${match.path}/inventory/:id`}>
+            <Config>
+              {({ me }) => (
+                <Inventory
+                  setBreadcrumb={this.setBreadCrumbConfig}
+                  me={me || {}}
+                />
+              )}
+            </Config>
+          </Route>
           <Route
             path={`${match.path}/smart_inventory/:id`}
             render={({ match: newRouteMatch }) => (

awx/ui_next/src/screens/Inventory/Inventory.jsx

@@ -2,7 +2,15 @@ import React, { useEffect, useState } from 'react';
 import { t } from '@lingui/macro';
 import { withI18n } from '@lingui/react';
 import { Card, PageSection } from '@patternfly/react-core';
-import { Switch, Route, Redirect, withRouter, Link } from 'react-router-dom';
+import {
+  Switch,
+  Route,
+  Redirect,
+  Link,
+  useHistory,
+  useLocation,
+  useRouteMatch,
+} from 'react-router-dom';
 import { TabbedCardHeader } from '@components/Card';
 import CardCloseButton from '@components/CardCloseButton';
 import ContentError from '@components/ContentError';
@@ -18,10 +26,15 @@ import { InventoriesAPI } from '@api';
 import InventoryEdit from './InventoryEdit';
 import InventoryHosts from './InventoryHosts/InventoryHosts';
 
-function Inventory({ history, i18n, location, match, setBreadcrumb }) {
+function Inventory({ i18n, setBreadcrumb }) {
   const [contentError, setContentError] = useState(null);
   const [hasContentLoading, setHasContentLoading] = useState(true);
   const [inventory, setInventory] = useState(null);
+  const history = useHistory();
+  const location = useLocation();
+  const match = useRouteMatch({
+    path: '/inventories/inventory/:id',
+  });
 
   useEffect(() => {
     async function fetchData() {
@@ -37,7 +50,7 @@ function Inventory({ history, i18n, location, match, setBreadcrumb }) {
     }
 
     fetchData();
-  }, [match.params.id, setBreadcrumb]);
+  }, [match.params.id, location.pathname, setBreadcrumb]);
 
   const tabsArray = [
     { name: i18n._(t`Details`), link: `${match.url}/details`, id: 0 },
@@ -144,7 +157,6 @@ function Inventory({ history, i18n, location, match, setBreadcrumb }) {
                 <InventoryGroups
                   location={location}
                   match={match}
-                  history={history}
                   setBreadcrumb={setBreadcrumb}
                   inventory={inventory}
                 />
@@ -185,4 +197,4 @@ function Inventory({ history, i18n, location, match, setBreadcrumb }) {
 }
 
 export { Inventory as _Inventory };
-export default withI18n()(withRouter(Inventory));
+export default withI18n()(Inventory);

awx/ui_next/src/screens/Inventory/Inventory.test.jsx

@@ -7,6 +7,13 @@ import mockInventory from './shared/data.inventory.json';
 import Inventory from './Inventory';
 
 jest.mock('@api');
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useRouteMatch: () => ({
+    url: '/inventories/1',
+    params: { id: 1 },
+  }),
+}));
 
 InventoriesAPI.readDetail.mockResolvedValue({
   data: mockInventory,
@@ -17,9 +24,7 @@ describe('<Inventory />', () => {
 
   test('initially renders succesfully', async () => {
     await act(async () => {
-      wrapper = mountWithContexts(
-        <Inventory setBreadcrumb={() => {}} match={{ params: { id: 1 } }} />
-      );
+      wrapper = mountWithContexts(<Inventory setBreadcrumb={() => {}} />);
     });
     await waitForElement(wrapper, 'ContentLoading', el => el.length === 0);
     await waitForElement(wrapper, '.pf-c-tabs__item', el => el.length === 6);

awx/ui_next/src/screens/Inventory/InventoryEdit/InventoryEdit.jsx

@@ -90,12 +90,15 @@ function InventoryEdit({ inventory }) {
       setError(err);
     }
   };
+
   if (contentLoading) {
     return <ContentLoading />;
   }
+
   if (error) {
     return <ContentError />;
   }
+
   return (
     <CardBody>
       <InventoryForm

awx/ui_next/src/screens/Inventory/InventoryList/InventoryList.jsx

@@ -221,8 +221,8 @@ class InventoriesList extends Component {
                 inventory={inventory}
                 detailUrl={
                   inventory.kind === 'smart'
-                    ? `${match.url}/smart_inventory/${inventory.id}`
-                    : `${match.url}/inventory/${inventory.id}`
+                    ? `${match.url}/smart_inventory/${inventory.id}/details`
+                    : `${match.url}/inventory/${inventory.id}/details`
                 }
                 onSelect={() => this.handleSelect(inventory)}
                 isSelected={selected.some(row => row.id === inventory.id)}