Creates constructed inventory host lists by reusing, and renaming smart inventory host list components.

2026-01-09 23:12:08 -03:30 · 2023-02-21 16:28:14 -05:00 · 2023-02-21 16:28:14 -05:00 · 0d88cee6bf
commit 0d88cee6bf
parent 103b4567fe
23 changed files with 144 additions and 140 deletions
--- a/awx/ui/src/screens/Inventory/AdvancedInventoryHost/AdvancedInventoryHost.js
+++ b/awx/ui/src/screens/Inventory/AdvancedInventoryHost/AdvancedInventoryHost.js
@ -8,11 +8,11 @@ import ContentLoading from 'components/ContentLoading';
 import RoutedTabs from 'components/RoutedTabs';
 import useRequest from 'hooks/useRequest';
 import { InventoriesAPI } from 'api';
-import SmartInventoryHostDetail from '../SmartInventoryHostDetail';
+import AdvancedInventoryHostDetail from '../AdvancedInventoryHostDetail';

-function SmartInventoryHost({ inventory, setBreadcrumb }) {
+function AdvancedInventoryHost({ inventory, setBreadcrumb }) {
  const { params, path, url } = useRouteMatch(
-    '/inventories/smart_inventory/:id/hosts/:hostId'
+    '/inventories/:inventoryType/:id/hosts/:hostId'
  );

  const {
@ -28,7 +28,7 @@ function SmartInventoryHost({ inventory, setBreadcrumb }) {
      );
      return response;
    }, [inventory.id, params.hostId]),
-    null
+    { isLoading: true }
  );

  useEffect(() => {
@ -44,7 +44,6 @@ function SmartInventoryHost({ inventory, setBreadcrumb }) {
  if (error) {
    return <ContentError error={error} />;
  }
-
  const tabsArray = [
    {
      name: (
@ -53,7 +52,7 @@ function SmartInventoryHost({ inventory, setBreadcrumb }) {
          {t`Back to Hosts`}
        </>
      ),
-      link: `/inventories/smart_inventory/${inventory.id}/hosts`,
+      link: `/inventories/${params.inventoryType}/${inventory.id}/hosts`,
      id: 0,
    },
    {
@ -72,17 +71,19 @@ function SmartInventoryHost({ inventory, setBreadcrumb }) {
      {!isLoading && host && (
        <Switch>
          <Redirect
-            from="/inventories/smart_inventory/:id/hosts/:hostId"
+            from="/inventories/:inventoryType/:id/hosts/:hostId"
            to={`${path}/details`}
            exact
          />
          <Route key="details" path={`${path}/details`}>
-            <SmartInventoryHostDetail host={host} />
+            <AdvancedInventoryHostDetail host={host} />
          </Route>
          <Route key="not-found" path="*">
            <ContentError isNotFound>
              <Link to={`${url}/details`}>
-                {t`View smart inventory host details`}
+                {params.inventoryType === 'smart_inventory'
+                  ? t`View smart inventory host details`
+                  : t`View constructed inventory host details`}
              </Link>
            </ContentError>
          </Route>
@ -92,4 +93,4 @@ function SmartInventoryHost({ inventory, setBreadcrumb }) {
  );
 }

-export default SmartInventoryHost;
+export default AdvancedInventoryHost;
--- a/awx/ui/src/screens/Inventory/AdvancedInventoryHost/AdvancedInventoryHost.test.js
+++ b/awx/ui/src/screens/Inventory/AdvancedInventoryHost/AdvancedInventoryHost.test.js
@ -7,14 +7,14 @@ import {
  waitForElement,
 } from '../../../../testUtils/enzymeHelpers';
 import mockHost from '../shared/data.host.json';
-import SmartInventoryHost from './SmartInventoryHost';
+import AdvancedInventoryHost from './AdvancedInventoryHost';

 jest.mock('../../../api');
 jest.mock('react-router-dom', () => ({
  ...jest.requireActual('react-router-dom'),
  useRouteMatch: () => ({
    params: { id: 1234, hostId: 2 },
-    path: '/inventories/smart_inventory/:id/hosts/:hostId',
+    path: '/inventories/:inventoryType/:id/hosts/:hostId',
    url: '/inventories/smart_inventory/1234/hosts/2',
  }),
 }));
@ -24,7 +24,7 @@ const mockSmartInventory = {
  name: 'Mock Smart Inventory',
 };

-describe('<SmartInventoryHost />', () => {
+describe('<AdvancedInventoryHost />', () => {
  let wrapper;
  let history;

@ -36,7 +36,7 @@ describe('<SmartInventoryHost />', () => {
    InventoriesAPI.readHostDetail.mockResolvedValue(mockHost);
    await act(async () => {
      wrapper = mountWithContexts(
-        <SmartInventoryHost
+        <AdvancedInventoryHost
          inventory={mockSmartInventory}
          setBreadcrumb={() => {}}
        />
@ -55,7 +55,7 @@ describe('<SmartInventoryHost />', () => {
    InventoriesAPI.readHostDetail.mockRejectedValueOnce(new Error());
    await act(async () => {
      wrapper = mountWithContexts(
-        <SmartInventoryHost
+        <AdvancedInventoryHost
          inventory={mockSmartInventory}
          setBreadcrumb={() => {}}
        />
@ -76,7 +76,7 @@ describe('<SmartInventoryHost />', () => {
    });
    await act(async () => {
      wrapper = mountWithContexts(
-        <SmartInventoryHost
+        <AdvancedInventoryHost
          inventory={mockSmartInventory}
          setBreadcrumb={() => {}}
        />,
--- a/awx/ui/src/screens/Inventory/AdvancedInventoryHost/index.js
+++ b/awx/ui/src/screens/Inventory/AdvancedInventoryHost/index.js
@ -0,0 +1 @@
+export { default } from './AdvancedInventoryHost';
--- a/awx/ui/src/screens/Inventory/AdvancedInventoryHostDetail/AdvancedInventoryHostDetail.js
+++ b/awx/ui/src/screens/Inventory/AdvancedInventoryHostDetail/AdvancedInventoryHostDetail.js
@ -1,5 +1,5 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
+import { Link, useParams } from 'react-router-dom';

 import { t } from '@lingui/macro';
 import { Host } from 'types';
@ -8,7 +8,8 @@ import { Detail, DetailList, UserDateDetail } from 'components/DetailList';
 import Sparkline from 'components/Sparkline';
 import { VariablesDetail } from 'components/CodeEditor';

-function SmartInventoryHostDetail({ host }) {
+function AdvancedInventoryHostDetail({ host }) {
+  const { inventoryType } = useParams();
  const {
    created,
    description,
@ -24,6 +25,7 @@ function SmartInventoryHostDetail({ host }) {
    type: 'job',
  }));

+  const inventoryKind = inventory.kind === '' ? 'inventory' : inventoryType;
  return (
    <CardBody>
      <DetailList gutter="sm">
@ -37,7 +39,7 @@ function SmartInventoryHostDetail({ host }) {
        <Detail
          label={t`Inventory`}
          value={
-            <Link to={`/inventories/inventory/${inventory?.id}/details`}>
+            <Link to={`/inventories/${inventoryKind}/${inventory?.id}/details`}>
              {inventory?.name}
            </Link>
          }
@ -61,8 +63,8 @@ function SmartInventoryHostDetail({ host }) {
  );
 }

-SmartInventoryHostDetail.propTypes = {
+AdvancedInventoryHostDetail.propTypes = {
  host: Host.isRequired,
 };

-export default SmartInventoryHostDetail;
+export default AdvancedInventoryHostDetail;
--- a/awx/ui/src/screens/Inventory/AdvancedInventoryHostDetail/AdvancedInventoryHostDetail.test.js
+++ b/awx/ui/src/screens/Inventory/AdvancedInventoryHostDetail/AdvancedInventoryHostDetail.test.js
@ -1,15 +1,17 @@
 import React from 'react';
 import { mountWithContexts } from '../../../../testUtils/enzymeHelpers';
-import SmartInventoryHostDetail from './SmartInventoryHostDetail';
+import AdvancedInventoryHostDetail from './AdvancedInventoryHostDetail';
 import mockHost from '../shared/data.host.json';

 jest.mock('../../../api');

-describe('<SmartInventoryHostDetail />', () => {
+describe('<AdvancedInventoryHostDetail />', () => {
  let wrapper;

  beforeAll(() => {
-    wrapper = mountWithContexts(<SmartInventoryHostDetail host={mockHost} />);
+    wrapper = mountWithContexts(
+      <AdvancedInventoryHostDetail host={mockHost} />
+    );
  });

  test('should render Details', () => {
@ -30,11 +32,12 @@ describe('<SmartInventoryHostDetail />', () => {

  test('should not load Activity', () => {
    wrapper = mountWithContexts(
-      <SmartInventoryHostDetail
+      <AdvancedInventoryHostDetail
        host={{
          ...mockHost,
          summary_fields: {
            recent_jobs: [],
+            inventory: { kind: 'constructed', id: 2 },
          },
        }}
      />
--- a/awx/ui/src/screens/Inventory/AdvancedInventoryHostDetail/index.js
+++ b/awx/ui/src/screens/Inventory/AdvancedInventoryHostDetail/index.js
@ -0,0 +1 @@
+export { default } from './AdvancedInventoryHostDetail';
--- a/awx/ui/src/screens/Inventory/AdvancedInventoryHosts/AdvancedInventoryHostList.js
+++ b/awx/ui/src/screens/Inventory/AdvancedInventoryHosts/AdvancedInventoryHostList.js
@ -13,7 +13,7 @@ import { getQSConfig, parseQueryString } from 'util/qs';
 import { InventoriesAPI } from 'api';
 import { Inventory } from 'types';
 import AdHocCommands from 'components/AdHocCommands/AdHocCommands';
-import SmartInventoryHostListItem from './SmartInventoryHostListItem';
+import AdvancedInventoryHostListItem from './AdvancedInventoryHostListItem';

 const QS_CONFIG = getQSConfig('host', {
  page: 1,
@ -21,7 +21,7 @@ const QS_CONFIG = getQSConfig('host', {
  order_by: 'name',
 });

-function SmartInventoryHostList({ inventory }) {
+function AdvancedInventoryHostList({ inventory }) {
  const location = useLocation();
  const [isAdHocLaunchLoading, setIsAdHocLaunchLoading] = useState(false);
  const {
@ -61,7 +61,10 @@ function SmartInventoryHostList({ inventory }) {
  useEffect(() => {
    fetchHosts();
  }, [fetchHosts]);
-
+  const inventoryType =
+    inventory.kind === 'constructed'
+      ? 'constructed_inventory'
+      : 'smart_inventory';
  return (
    <PaginatedTable
      contentError={contentError}
@ -114,10 +117,11 @@ function SmartInventoryHostList({ inventory }) {
        </HeaderRow>
      }
      renderRow={(host, index) => (
-        <SmartInventoryHostListItem
+        <AdvancedInventoryHostListItem
          key={host.id}
          host={host}
-          detailUrl={`/inventories/smart_inventory/${inventory.id}/hosts/${host.id}/details`}
+          inventoryType={inventoryType}
+          detailUrl={`/inventories/${inventoryType}/${inventory.id}/hosts/${host.id}/details`}
          isSelected={selected.some((row) => row.id === host.id)}
          onSelect={() => handleSelect(host)}
          rowIndex={index}
@ -127,8 +131,8 @@ function SmartInventoryHostList({ inventory }) {
  );
 }

-SmartInventoryHostList.propTypes = {
+AdvancedInventoryHostList.propTypes = {
  inventory: Inventory.isRequired,
 };

-export default SmartInventoryHostList;
+export default AdvancedInventoryHostList;
--- a/awx/ui/src/screens/Inventory/AdvancedInventoryHosts/AdvancedInventoryHostList.test.js
+++ b/awx/ui/src/screens/Inventory/AdvancedInventoryHosts/AdvancedInventoryHostList.test.js
@ -5,13 +5,13 @@ import {
  mountWithContexts,
  waitForElement,
 } from '../../../../testUtils/enzymeHelpers';
-import SmartInventoryHostList from './SmartInventoryHostList';
+import AdvancedInventoryHostList from './AdvancedInventoryHostList';
 import mockInventory from '../shared/data.inventory.json';
 import mockHosts from '../shared/data.hosts.json';

 jest.mock('../../../api');

-describe('<SmartInventoryHostList />', () => {
+describe('<AdvancedInventoryHostList />', () => {
  let wrapper;
  const clonedInventory = {
    ...mockInventory,
@ -44,7 +44,7 @@ describe('<SmartInventoryHostList />', () => {
    });
    await act(async () => {
      wrapper = mountWithContexts(
-        <SmartInventoryHostList inventory={clonedInventory} />
+        <AdvancedInventoryHostList inventory={clonedInventory} />
      );
    });
    await waitForElement(wrapper, 'ContentLoading', (el) => el.length === 0);
@ -55,12 +55,12 @@ describe('<SmartInventoryHostList />', () => {
  });

  test('initially renders successfully', () => {
-    expect(wrapper.find('SmartInventoryHostList').length).toBe(1);
+    expect(wrapper.find('AdvancedInventoryHostList').length).toBe(1);
  });

  test('should fetch hosts from api and render them in the list', () => {
    expect(InventoriesAPI.readHosts).toHaveBeenCalled();
-    expect(wrapper.find('SmartInventoryHostListItem').length).toBe(3);
+    expect(wrapper.find('AdvancedInventoryHostListItem').length).toBe(3);
  });

  test('should select and deselect all items', async () => {
@ -87,7 +87,7 @@ describe('<SmartInventoryHostList />', () => {
    );
    await act(async () => {
      wrapper = mountWithContexts(
-        <SmartInventoryHostList inventory={mockInventory} />
+        <AdvancedInventoryHostList inventory={mockInventory} />
      );
    });
    await waitForElement(wrapper, 'ContentError', (el) => el.length === 1);
--- a/awx/ui/src/screens/Inventory/AdvancedInventoryHosts/AdvancedInventoryHostListItem.js
+++ b/awx/ui/src/screens/Inventory/AdvancedInventoryHosts/AdvancedInventoryHostListItem.js
@ -9,20 +9,26 @@ import { Tr, Td } from '@patternfly/react-table';
 import Sparkline from 'components/Sparkline';
 import { Host } from 'types';

-function SmartInventoryHostListItem({
+function AdvancedInventoryHostListItem({
  detailUrl,
-  host,
+  host: {
+    name,
+    id,
+    summary_fields: { recent_jobs, inventory },
+  },
  isSelected,
  onSelect,
  rowIndex,
+  inventoryType,
 }) {
-  const recentPlaybookJobs = host.summary_fields.recent_jobs.map((job) => ({
+  const recentPlaybookJobs = recent_jobs.map((job) => ({
    ...job,
    type: 'job',
  }));
-
+  const inventoryKind = inventory.kind === '' ? 'inventory' : inventoryType;
+  const inventoryLink = `/inventories/${inventoryKind}/${inventory.id}/details`;
  return (
-    <Tr id={`host-row-${host.id}`} ouiaId={`host-row-${host.id}`}>
+    <Tr id={`host-row-${id}`} ouiaId={`host-row-${id}`}>
      <Td
        select={{
          rowIndex,
@ -32,28 +38,24 @@ function SmartInventoryHostListItem({
      />
      <Td dataLabel={t`Name`}>
        <Link to={`${detailUrl}`}>
-          <b>{host.name}</b>
+          <b>{name}</b>
        </Link>
      </Td>
      <Td dataLabel={t`Recent jobs`}>
        <Sparkline jobs={recentPlaybookJobs} />
      </Td>
      <Td dataLabel={t`Inventory`}>
-        <Link
-          to={`/inventories/inventory/${host.summary_fields.inventory.id}/details`}
-        >
-          {host.summary_fields.inventory.name}
-        </Link>
+        <Link to={inventoryLink}>{inventory.name}</Link>
      </Td>
    </Tr>
  );
 }

-SmartInventoryHostListItem.propTypes = {
+AdvancedInventoryHostListItem.propTypes = {
  detailUrl: string.isRequired,
  host: Host.isRequired,
  isSelected: bool.isRequired,
  onSelect: func.isRequired,
 };

-export default SmartInventoryHostListItem;
+export default AdvancedInventoryHostListItem;
--- a/awx/ui/src/screens/Inventory/AdvancedInventoryHosts/AdvancedInventoryHostListItem.test.js
+++ b/awx/ui/src/screens/Inventory/AdvancedInventoryHosts/AdvancedInventoryHostListItem.test.js
@ -1,6 +1,6 @@
 import React from 'react';
 import { mountWithContexts } from '../../../../testUtils/enzymeHelpers';
-import SmartInventoryHostListItem from './SmartInventoryHostListItem';
+import AdvancedInventoryHostListItem from './AdvancedInventoryHostListItem';

 const mockHost = {
  id: 2,
@ -19,14 +19,14 @@ const mockHost = {
  },
 };

-describe('<SmartInventoryHostListItem />', () => {
+describe('<AdvancedInventoryHostListItem />', () => {
  let wrapper;

  beforeEach(() => {
    wrapper = mountWithContexts(
      <table>
        <tbody>
-          <SmartInventoryHostListItem
+          <AdvancedInventoryHostListItem
            detailUrl="/inventories/smart_inventory/1/hosts/2"
            host={mockHost}
            isSelected={false}
--- a/awx/ui/src/screens/Inventory/AdvancedInventoryHosts/AdvancedInventoryHosts.js
+++ b/awx/ui/src/screens/Inventory/AdvancedInventoryHosts/AdvancedInventoryHosts.js
@ -0,0 +1,27 @@
+import React from 'react';
+import { Route, Switch } from 'react-router-dom';
+import { Inventory } from 'types';
+import AdvancedInventoryHostList from './AdvancedInventoryHostList';
+import AdvancedInventoryHost from '../AdvancedInventoryHost';
+
+function AdvancedInventoryHosts({ inventory, setBreadcrumb }) {
+  return (
+    <Switch>
+      <Route key="host" path="/inventories/:inventoryType/:id/hosts/:hostId">
+        <AdvancedInventoryHost
+          setBreadcrumb={setBreadcrumb}
+          inventory={inventory}
+        />
+      </Route>
+      <Route key="host-list" path="/inventories/:inventoryType/:id/hosts">
+        <AdvancedInventoryHostList inventory={inventory} />
+      </Route>
+    </Switch>
+  );
+}
+
+AdvancedInventoryHosts.propTypes = {
+  inventory: Inventory.isRequired,
+};
+
+export default AdvancedInventoryHosts;
--- a/awx/ui/src/screens/Inventory/AdvancedInventoryHosts/AdvancedInventoryHosts.test.js
+++ b/awx/ui/src/screens/Inventory/AdvancedInventoryHosts/AdvancedInventoryHosts.test.js
@ -5,37 +5,39 @@ import {
  mountWithContexts,
  waitForElement,
 } from '../../../../testUtils/enzymeHelpers';
-import SmartInventoryHosts from './SmartInventoryHosts';
+import AdvancedInventoryHosts from './AdvancedInventoryHosts';

 jest.mock('../../../api');
-jest.mock('./SmartInventoryHostList', () => {
-  const SmartInventoryHostList = () => <div />;
+jest.mock('./AdvancedInventoryHostList', () => {
+  const AdvancedInventoryHostList = () => <div />;
  return {
    __esModule: true,
-    default: SmartInventoryHostList,
+    default: AdvancedInventoryHostList,
  };
 });

-describe('<SmartInventoryHosts />', () => {
+describe('<AdvancedInventoryHosts />', () => {
  test('should render smart inventory host list', () => {
    const history = createMemoryHistory({
      initialEntries: ['/inventories/smart_inventory/1/hosts'],
    });
    const match = {
-      path: '/inventories/smart_inventory/:id/hosts',
+      path: '/inventories/:inventoryType/:id/hosts',
      url: '/inventories/smart_inventory/1/hosts',
      isExact: true,
    };
    const wrapper = mountWithContexts(
-      <SmartInventoryHosts inventory={{ id: 1 }} />,
+      <AdvancedInventoryHosts inventory={{ id: 1 }} />,
      {
        context: { router: { history, route: { match } } },
      }
    );
-    expect(wrapper.find('SmartInventoryHostList').length).toBe(1);
-    expect(wrapper.find('SmartInventoryHostList').prop('inventory')).toEqual({
-      id: 1,
-    });
+    expect(wrapper.find('AdvancedInventoryHostList').length).toBe(1);
+    expect(wrapper.find('AdvancedInventoryHostList').prop('inventory')).toEqual(
+      {
+        id: 1,
+      }
+    );
    jest.clearAllMocks();
  });

@ -45,20 +47,23 @@ describe('<SmartInventoryHosts />', () => {
      initialEntries: ['/inventories/smart_inventory/1/hosts/2'],
    });
    const match = {
-      path: '/inventories/smart_inventory/:id/hosts/:hostId',
+      path: '/inventories/:inventoryType/:id/hosts/:hostId',
      url: '/inventories/smart_inventory/1/hosts/2',
      isExact: true,
    };
    await act(async () => {
      wrapper = mountWithContexts(
-        <SmartInventoryHosts inventory={{ id: 1 }} setBreadcrumb={() => {}} />,
+        <AdvancedInventoryHosts
+          inventory={{ id: 1 }}
+          setBreadcrumb={() => {}}
+        />,
        {
          context: { router: { history, route: { match } } },
        }
      );
    });
    await waitForElement(wrapper, 'ContentLoading', (el) => el.length === 0);
-    expect(wrapper.find('SmartInventoryHost').length).toBe(1);
+    expect(wrapper.find('AdvancedInventoryHost').length).toBe(1);
    jest.clearAllMocks();
  });
 });
--- a/awx/ui/src/screens/Inventory/AdvancedInventoryHosts/index.js
+++ b/awx/ui/src/screens/Inventory/AdvancedInventoryHosts/index.js
@ -0,0 +1 @@
+export { default } from './AdvancedInventoryHosts';
--- a/awx/ui/src/screens/Inventory/ConstructedInventory.js
+++ b/awx/ui/src/screens/Inventory/ConstructedInventory.js
@ -23,7 +23,7 @@ import RoutedTabs from 'components/RoutedTabs';
 import ConstructedInventoryDetail from './ConstructedInventoryDetail';
 import ConstructedInventoryEdit from './ConstructedInventoryEdit';
 import ConstructedInventoryGroups from './ConstructedInventoryGroups';
-import ConstructedInventoryHosts from './ConstructedInventoryHosts';
+import AdvancedInventoryHosts from './AdvancedInventoryHosts';
 import { getInventoryPath } from './shared/utils';

 function ConstructedInventory({ setBreadcrumb }) {
@ -42,8 +42,7 @@ function ConstructedInventory({ setBreadcrumb }) {
      );
      return data;
    }, [match.params.id]),
-
-    null
+    { isLoading: true }
  );

  useEffect(() => {
@ -111,7 +110,11 @@ function ConstructedInventory({ setBreadcrumb }) {
  }

  let showCardHeader = true;
-  if (['edit'].some((name) => location.pathname.includes(name))) {
+  if (
+    ['edit', 'add', 'groups/', 'hosts/'].some((name) =>
+      location.pathname.includes(name)
+    )
+  ) {
    showCardHeader = false;
  }

@ -154,7 +157,10 @@ function ConstructedInventory({ setBreadcrumb }) {
              path="/inventories/constructed_inventory/:id/hosts"
              key="hosts"
            >
-              <ConstructedInventoryHosts />
+              <AdvancedInventoryHosts
+                inventory={inventory}
+                setBreadcrumb={setBreadcrumb}
+              />
            </Route>,
            <Route
              path="/inventories/constructed_inventory/:id/groups"
--- a/awx/ui/src/screens/Inventory/ConstructedInventory.test.js
+++ b/awx/ui/src/screens/Inventory/ConstructedInventory.test.js
@ -2,7 +2,10 @@ import React from 'react';
 import { act } from 'react-dom/test-utils';
 import { createMemoryHistory } from 'history';
 import { ConstructedInventoriesAPI } from 'api';
-import { mountWithContexts } from '../../../testUtils/enzymeHelpers';
+import {
+  mountWithContexts,
+  waitForElement,
+} from '../../../testUtils/enzymeHelpers';
 import mockInventory from './shared/data.inventory.json';
 import ConstructedInventory from './ConstructedInventory';

@ -18,13 +21,16 @@ jest.mock('react-router-dom', () => ({
 describe('<ConstructedInventory />', () => {
  let wrapper;

-  beforeEach(async () => {
+  // beforeEach(async () => {
+  //   ConstructedInventoriesAPI.readDetail.mockResolvedValue({
+  //     data: mockInventory,
+  //   });
+  // });
+
+  test('should render expected tabs', async () => {
    ConstructedInventoriesAPI.readDetail.mockResolvedValue({
      data: mockInventory,
    });
-  });
-
-  test('should render expected tabs', async () => {
    const expectedTabs = [
      'Back to Inventories',
      'Details',
@ -45,6 +51,9 @@ describe('<ConstructedInventory />', () => {
  });

  test('should show content error when user attempts to navigate to erroneous route', async () => {
+    ConstructedInventoriesAPI.readDetail.mockResolvedValue({
+      data: { ...mockInventory, kind: 'constructed' },
+    });
    const history = createMemoryHistory({
      initialEntries: ['/inventories/constructed_inventory/1/foobar'],
    });
@ -60,7 +69,7 @@ describe('<ConstructedInventory />', () => {
                match: {
                  params: { id: 1 },
                  url: '/inventories/constructed_inventory/1/foobar',
-                  path: '/inventories/constructed_inventory/1/foobar',
+                  path: '/inventories/:inventoryType/:id/foobar',
                },
              },
            },
@ -68,6 +77,7 @@ describe('<ConstructedInventory />', () => {
        }
      );
    });
+    await waitForElement(wrapper, 'ContentLoading', (el) => el.length === 0);
    expect(wrapper.find('ContentError').length).toBe(1);
  });
 });
--- a/awx/ui/src/screens/Inventory/ConstructedInventoryHosts/ConstructedInventoryHosts.js
+++ b/awx/ui/src/screens/Inventory/ConstructedInventoryHosts/ConstructedInventoryHosts.js
@ -1,13 +0,0 @@
-/* eslint i18next/no-literal-string: "off" */
-import React from 'react';
-import { CardBody } from 'components/Card';
-
-function ConstructedInventoryHosts() {
-  return (
-    <CardBody>
-      <div>Coming Soon!</div>
-    </CardBody>
-  );
-}
-
-export default ConstructedInventoryHosts;
--- a/awx/ui/src/screens/Inventory/ConstructedInventoryHosts/ConstructedInventoryHosts.test.js
+++ b/awx/ui/src/screens/Inventory/ConstructedInventoryHosts/ConstructedInventoryHosts.test.js
@ -1,15 +0,0 @@
-import React from 'react';
-import { act } from 'react-dom/test-utils';
-import { mountWithContexts } from '../../../../testUtils/enzymeHelpers';
-import ConstructedInventoryHosts from './ConstructedInventoryHosts';
-
-describe('<ConstructedInventoryHosts />', () => {
-  test('initially renders successfully', async () => {
-    let wrapper;
-    await act(async () => {
-      wrapper = mountWithContexts(<ConstructedInventoryHosts />);
-    });
-    expect(wrapper.length).toBe(1);
-    expect(wrapper.find('ConstructedInventoryHosts').length).toBe(1);
-  });
-});
--- a/awx/ui/src/screens/Inventory/ConstructedInventoryHosts/index.js
+++ b/awx/ui/src/screens/Inventory/ConstructedInventoryHosts/index.js
@ -1 +0,0 @@
-export { default } from './ConstructedInventoryHosts';
--- a/awx/ui/src/screens/Inventory/SmartInventory.js
+++ b/awx/ui/src/screens/Inventory/SmartInventory.js
@ -22,7 +22,7 @@ import RoutedTabs from 'components/RoutedTabs';
 import RelatedTemplateList from 'components/RelatedTemplateList';
 import SmartInventoryDetail from './SmartInventoryDetail';
 import SmartInventoryEdit from './SmartInventoryEdit';
-import SmartInventoryHosts from './SmartInventoryHosts';
+import AdvancedInventoryHosts from './AdvancedInventoryHosts';
 import { getInventoryPath } from './shared/utils';

 function SmartInventory({ setBreadcrumb }) {
@ -142,7 +142,7 @@ function SmartInventory({ setBreadcrumb }) {
              />
            </Route>,
            <Route key="hosts" path="/inventories/smart_inventory/:id/hosts">
-              <SmartInventoryHosts
+              <AdvancedInventoryHosts
                inventory={inventory}
                setBreadcrumb={setBreadcrumb}
              />
--- a/awx/ui/src/screens/Inventory/SmartInventoryHost/index.js
+++ b/awx/ui/src/screens/Inventory/SmartInventoryHost/index.js
@ -1 +0,0 @@
-export { default } from './SmartInventoryHost';
--- a/awx/ui/src/screens/Inventory/SmartInventoryHostDetail/index.js
+++ b/awx/ui/src/screens/Inventory/SmartInventoryHostDetail/index.js
@ -1 +0,0 @@
-export { default } from './SmartInventoryHostDetail';
--- a/awx/ui/src/screens/Inventory/SmartInventoryHosts/SmartInventoryHosts.js
+++ b/awx/ui/src/screens/Inventory/SmartInventoryHosts/SmartInventoryHosts.js
@ -1,27 +0,0 @@
-import React from 'react';
-import { Route, Switch } from 'react-router-dom';
-import { Inventory } from 'types';
-import SmartInventoryHostList from './SmartInventoryHostList';
-import SmartInventoryHost from '../SmartInventoryHost';
-
-function SmartInventoryHosts({ inventory, setBreadcrumb }) {
-  return (
-    <Switch>
-      <Route key="host" path="/inventories/smart_inventory/:id/hosts/:hostId">
-        <SmartInventoryHost
-          setBreadcrumb={setBreadcrumb}
-          inventory={inventory}
-        />
-      </Route>
-      <Route key="host-list" path="/inventories/smart_inventory/:id/hosts">
-        <SmartInventoryHostList inventory={inventory} />
-      </Route>
-    </Switch>
-  );
-}
-
-SmartInventoryHosts.propTypes = {
-  inventory: Inventory.isRequired,
-};
-
-export default SmartInventoryHosts;
--- a/awx/ui/src/screens/Inventory/SmartInventoryHosts/index.js
+++ b/awx/ui/src/screens/Inventory/SmartInventoryHosts/index.js
@ -1 +0,0 @@
-export { default } from './SmartInventoryHosts';
				`@ -0,0 +1 @@`
				`export { default } from './AdvancedInventoryHost';`
				`@ -1 +0,0 @@`
				`export { default } from './ConstructedInventoryHosts';`
				`@ -1 +0,0 @@`
				`export { default } from './SmartInventoryHost';`