Show content error when the top-level inventory and host inventory do not match

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

@@ -23,6 +23,11 @@ import JobList from '@components/JobList';
 import InventoryHostDetail from '../InventoryHostDetail';
 import InventoryHostEdit from '../InventoryHostEdit';
 
+const checkHostInventory = (host, inventory) =>
+  host &&
+  inventory &&
+  host.summary_fields?.inventory?.id === parseInt(inventory.id, 10);
+
 function InventoryHost({ i18n, setBreadcrumb, inventory }) {
   const location = useLocation();
   const match = useRouteMatch('/inventories/inventory/:id/hosts/:hostId');
@@ -40,7 +45,7 @@ function InventoryHost({ i18n, setBreadcrumb, inventory }) {
       return {
         host: data,
       };
-    }, [match.params.hostId]), // eslint-disable-line react-hooks/exhaustive-deps
+    }, [match.params.hostId]),
     {
       host: null,
     }
@@ -48,7 +53,7 @@ function InventoryHost({ i18n, setBreadcrumb, inventory }) {
 
   useEffect(() => {
     fetchHost();
-  }, [fetchHost]);
+  }, [fetchHost, location.pathname]);
 
   useEffect(() => {
     if (inventory && host) {
@@ -89,24 +94,7 @@ function InventoryHost({ i18n, setBreadcrumb, inventory }) {
     },
   ];
 
-  let cardHeader = (
+  if (contentError) {
-    <TabbedCardHeader>
-      <RoutedTabs tabsArray={tabsArray} />
-      <CardActions>
-        <CardCloseButton linkTo={hostListUrl} />
-      </CardActions>
-    </TabbedCardHeader>
-  );
-
-  if (location.pathname.endsWith('edit')) {
-    cardHeader = null;
-  }
-
-  if (isLoading) {
-    return <ContentLoading />;
-  }
-
-  if (!isLoading && contentError) {
     return (
       <Card>
         <ContentError error={contentError}>
@@ -123,50 +111,62 @@ function InventoryHost({ i18n, setBreadcrumb, inventory }) {
     );
   }
 
+  const isInventoryValid = checkHostInventory(host, inventory);
+  if (!isLoading && !isInventoryValid) {
+    return (
+      <ContentError isNotFound>
+        <Link to={hostListUrl}>{i18n._(t`View all Inventory Hosts.`)}</Link>
+      </ContentError>
+    );
+  }
+
   return (
     <>
-      {cardHeader}
+      {['edit'].some(name => location.pathname.includes(name)) ? null : (
-      <Switch>
+        <TabbedCardHeader>
-        <Redirect
+          <RoutedTabs tabsArray={tabsArray} />
-          from="/inventories/inventory/:id/hosts/:hostId"
+          <CardActions>
-          to="/inventories/inventory/:id/hosts/:hostId/details"
+            <CardCloseButton linkTo={hostListUrl} />
-          exact
+          </CardActions>
-        />
+        </TabbedCardHeader>
-        {host &&
+      )}
-          inventory && [
+
-            <Route
+      {isLoading && <ContentLoading />}
-              key="details"
+
-              path="/inventories/inventory/:id/hosts/:hostId/details"
+      {!isLoading && isInventoryValid && (
-            >
+        <Switch>
-              <InventoryHostDetail host={host} />
+          <Redirect
-            </Route>,
+            from="/inventories/inventory/:id/hosts/:hostId"
-            <Route
+            to="/inventories/inventory/:id/hosts/:hostId/details"
-              key="edit"
+            exact
-              path="/inventories/inventory/:id/hosts/:hostId/edit"
+          />
-            >
+          <Route
-              <InventoryHostEdit host={host} inventory={inventory} />
+            key="details"
-            </Route>,
+            path="/inventories/inventory/:id/hosts/:hostId/details"
-            <Route
+          >
-              key="completed-jobs"
+            <InventoryHostDetail host={host} />
-              path="/inventories/inventory/:id/hosts/:hostId/completed_jobs"
+          </Route>
-            >
+          <Route
-              <JobList defaultParams={{ job__hosts: host.id }} />
+            key="edit"
-            </Route>,
+            path="/inventories/inventory/:id/hosts/:hostId/edit"
-          ]}
+          >
-        <Route
+            <InventoryHostEdit host={host} inventory={inventory} />
-          key="not-found"
+          </Route>
-          path="*"
+          <Route
-          render={() =>
+            key="completed-jobs"
-            !isLoading && (
+            path="/inventories/inventory/:id/hosts/:hostId/completed_jobs"
-              <ContentError isNotFound>
+          >
-                <Link to={`${match.url}/details`}>
+            <JobList defaultParams={{ job__hosts: host.id }} />
-                  {i18n._(`View Inventory Host Details`)}
+          </Route>
-                </Link>
+          <Route key="not-found" path="*">
-              </ContentError>
+            <ContentError isNotFound>
-            )
+              <Link to={`${match.url}/details`}>
-          }
+                {i18n._(`View Inventory Host Details`)}
-        />
+              </Link>
-      </Switch>
+            </ContentError>
+          </Route>
+        </Switch>
+      )}
     </>
   );
 }

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

@@ -76,4 +76,13 @@ describe('<InventoryHost />', () => {
     });
     await waitForElement(wrapper, 'ContentError', el => el.length === 1);
   });
+
+  test('should show content error when inventory id does not match host inventory', async () => {
+    await act(async () => {
+      wrapper = mountWithContexts(
+        <InventoryHost inventory={{ id: 99 }} setBreadcrumb={() => {}} />
+      );
+    });
+    await waitForElement(wrapper, 'ContentError', el => el.length === 1);
+  });
 });