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

[constructed-inventory]Fix validation issue constructed

awx/api/serializers.py

@@ -2272,7 +2272,7 @@ class InventorySourceSerializer(UnifiedJobTemplateSerializer, InventorySourceOpt
         if get_field_from_model_or_attrs('source') == 'scm':
             if ('source' in attrs or 'source_project' in attrs) and get_field_from_model_or_attrs('source_project') is None:
                 raise serializers.ValidationError({"source_project": _("Project required for scm type sources.")})
-        elif get_field_from_model_or_attrs('source') == 'constructed':
+        elif (get_field_from_model_or_attrs('source') == 'constructed') and (self.instance and self.instance.source != 'constructed'):
             raise serializers.ValidationError({"Error": _('constructed not a valid source for inventory')})
         else:
             redundant_scm_fields = list(filter(lambda x: attrs.get(x, None), ['source_project', 'source_path']))

awx/ui/src/api/models/ConstructedInventories.js

@@ -5,96 +5,6 @@ class ConstructedInventories extends InstanceGroupsMixin(Base) {
   constructor(http) {
     super(http);
     this.baseUrl = 'api/v2/constructed_inventories/';
-
-    this.readAccessList = this.readAccessList.bind(this);
-    this.readAccessOptions = this.readAccessOptions.bind(this);
-    this.readHosts = this.readHosts.bind(this);
-    this.readHostDetail = this.readHostDetail.bind(this);
-    this.readGroups = this.readGroups.bind(this);
-    this.readGroupsOptions = this.readGroupsOptions.bind(this);
-    this.promoteGroup = this.promoteGroup.bind(this);
-  }
-
-  readAccessList(id, params) {
-    return this.http.get(`${this.baseUrl}${id}/access_list/`, {
-      params,
-    });
-  }
-
-  readAccessOptions(id) {
-    return this.http.options(`${this.baseUrl}${id}/access_list/`);
-  }
-
-  createHost(id, data) {
-    return this.http.post(`${this.baseUrl}${id}/hosts/`, data);
-  }
-
-  readHosts(id, params) {
-    return this.http.get(`${this.baseUrl}${id}/hosts/`, {
-      params,
-    });
-  }
-
-  async readHostDetail(inventoryId, hostId) {
-    const {
-      data: { results },
-    } = await this.http.get(
-      `${this.baseUrl}${inventoryId}/hosts/?id=${hostId}`
-    );
-
-    if (Array.isArray(results) && results.length) {
-      return results[0];
-    }
-
-    throw new Error(
-      `How did you get here? Host not found for Inventory ID: ${inventoryId}`
-    );
-  }
-
-  readGroups(id, params) {
-    return this.http.get(`${this.baseUrl}${id}/groups/`, {
-      params,
-    });
-  }
-
-  readGroupsOptions(id) {
-    return this.http.options(`${this.baseUrl}${id}/groups/`);
-  }
-
-  readHostsOptions(id) {
-    return this.http.options(`${this.baseUrl}${id}/hosts/`);
-  }
-
-  promoteGroup(inventoryId, groupId) {
-    return this.http.post(`${this.baseUrl}${inventoryId}/groups/`, {
-      id: groupId,
-      disassociate: true,
-    });
-  }
-
-  readAdHocOptions(inventoryId) {
-    return this.http.options(`${this.baseUrl}${inventoryId}/ad_hoc_commands/`);
-  }
-
-  launchAdHocCommands(inventoryId, values) {
-    return this.http.post(
-      `${this.baseUrl}${inventoryId}/ad_hoc_commands/`,
-      values
-    );
-  }
-
-  associateLabel(id, label, orgId) {
-    return this.http.post(`${this.baseUrl}${id}/labels/`, {
-      name: label.name,
-      organization: orgId,
-    });
-  }
-
-  disassociateLabel(id, label) {
-    return this.http.post(`${this.baseUrl}${id}/labels/`, {
-      id: label.id,
-      disassociate: true,
-    });
   }
 }
 

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;

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={() => {}}
         />,

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

@@ -0,0 +1 @@
+export { default } from './AdvancedInventoryHost';

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;

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 },
           },
         }}
       />

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

@@ -0,0 +1 @@
+export { default } from './AdvancedInventoryHostDetail';

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;

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);

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
+        <Link to={inventoryLink}>{inventory.name}</Link>
-          to={`/inventories/inventory/${host.summary_fields.inventory.id}/details`}
-        >
-          {host.summary_fields.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;

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}

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;

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', () => {
+jest.mock('./AdvancedInventoryHostList', () => {
-  const SmartInventoryHostList = () => <div />;
+  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('AdvancedInventoryHostList').length).toBe(1);
-    expect(wrapper.find('SmartInventoryHostList').prop('inventory')).toEqual({
+    expect(wrapper.find('AdvancedInventoryHostList').prop('inventory')).toEqual(
-      id: 1,
+      {
-    });
+        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();
   });
 });

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

@@ -0,0 +1 @@
+export { default } from './AdvancedInventoryHosts';

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

@@ -20,10 +20,10 @@ import JobList from 'components/JobList';
 import RelatedTemplateList from 'components/RelatedTemplateList';
 import { ResourceAccessList } from 'components/ResourceAccessList';
 import RoutedTabs from 'components/RoutedTabs';
-import ConstructedInventoryDetail from './InventoryDetail';
+import ConstructedInventoryDetail from './ConstructedInventoryDetail';
-import ConstructedInventoryEdit from './InventoryEdit';
+import ConstructedInventoryEdit from './ConstructedInventoryEdit';
-import ConstructedInventoryGroups from './InventoryGroups';
+import ConstructedInventoryGroups from './ConstructedInventoryGroups';
-import ConstructedInventoryHosts from './InventoryHosts';
+import AdvancedInventoryHosts from './AdvancedInventoryHosts';
 import { getInventoryPath } from './shared/utils';
 
 function ConstructedInventory({ setBreadcrumb }) {
@@ -42,8 +42,7 @@ function ConstructedInventory({ setBreadcrumb }) {
       );
       return data;
     }, [match.params.id]),
-
+    { isLoading: true }
-    null
   );
 
   useEffect(() => {
@@ -111,9 +110,8 @@ function ConstructedInventory({ setBreadcrumb }) {
   }
 
   let showCardHeader = true;
-
   if (
-    ['edit', 'add', 'groups/', 'hosts/', 'sources/'].some((name) =>
+    ['edit', 'add', 'groups/', 'hosts/'].some((name) =>
       location.pathname.includes(name)
     )
   ) {
@@ -157,21 +155,18 @@ function ConstructedInventory({ setBreadcrumb }) {
             </Route>,
             <Route
               path="/inventories/constructed_inventory/:id/hosts"
-              key="constructed_inventory_hosts"
+              key="hosts"
             >
-              <ConstructedInventoryHosts
+              <AdvancedInventoryHosts
                 inventory={inventory}
                 setBreadcrumb={setBreadcrumb}
               />
             </Route>,
             <Route
               path="/inventories/constructed_inventory/:id/groups"
-              key="constructed_inventory_groups"
+              key="groups"
             >
-              <ConstructedInventoryGroups
+              <ConstructedInventoryGroups />
-                inventory={inventory}
-                setBreadcrumb={setBreadcrumb}
-              />
             </Route>,
             <Route
               key="jobs"

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);
   });
 });

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

@@ -0,0 +1,288 @@
+import React, { useCallback, useEffect } from 'react';
+import { Link, useHistory } from 'react-router-dom';
+
+import { t } from '@lingui/macro';
+import {
+  Button,
+  Chip,
+  TextList,
+  TextListItem,
+  TextListItemVariants,
+  TextListVariants,
+} from '@patternfly/react-core';
+import AlertModal from 'components/AlertModal';
+import { CardBody, CardActionsRow } from 'components/Card';
+import { DetailList, Detail, UserDateDetail } from 'components/DetailList';
+import { VariablesDetail } from 'components/CodeEditor';
+import DeleteButton from 'components/DeleteButton';
+import ErrorDetail from 'components/ErrorDetail';
+import ContentError from 'components/ContentError';
+import ContentLoading from 'components/ContentLoading';
+import ChipGroup from 'components/ChipGroup';
+import Popover from 'components/Popover';
+import { InventoriesAPI, ConstructedInventoriesAPI } from 'api';
+import useRequest, { useDismissableError } from 'hooks/useRequest';
+import { Inventory } from 'types';
+import { relatedResourceDeleteRequests } from 'util/getRelatedResourceDeleteDetails';
+import InstanceGroupLabels from 'components/InstanceGroupLabels';
+import getHelpText from '../shared/Inventory.helptext';
+
+function ConstructedInventoryDetail({ inventory }) {
+  const history = useHistory();
+  const helpText = getHelpText();
+
+  const {
+    result: { instanceGroups, sourceInventories, actions },
+    request: fetchRelatedDetails,
+    error: contentError,
+    isLoading,
+  } = useRequest(
+    useCallback(async () => {
+      const [response, sourceInvResponse, options] = await Promise.all([
+        InventoriesAPI.readInstanceGroups(inventory.id),
+        InventoriesAPI.readSourceInventories(inventory.id),
+        ConstructedInventoriesAPI.readOptions(inventory.id),
+      ]);
+
+      return {
+        instanceGroups: response.data.results,
+        sourceInventories: sourceInvResponse.data.results,
+        actions: options.data.actions.GET,
+      };
+    }, [inventory.id]),
+    {
+      instanceGroups: [],
+      sourceInventories: [],
+      actions: {},
+      isLoading: true,
+    }
+  );
+
+  useEffect(() => {
+    fetchRelatedDetails();
+  }, [fetchRelatedDetails]);
+
+  const { request: deleteInventory, error: deleteError } = useRequest(
+    useCallback(async () => {
+      await InventoriesAPI.destroy(inventory.id);
+      history.push(`/inventories`);
+    }, [inventory.id, history])
+  );
+
+  const { error, dismissError } = useDismissableError(deleteError);
+
+  const { organization, user_capabilities: userCapabilities } =
+    inventory.summary_fields;
+
+  const deleteDetailsRequests =
+    relatedResourceDeleteRequests.inventory(inventory);
+
+  if (isLoading) {
+    return <ContentLoading />;
+  }
+
+  if (contentError) {
+    return <ContentError error={contentError} />;
+  }
+
+  return (
+    <CardBody>
+      <DetailList>
+        <Detail
+          label={t`Name`}
+          value={inventory.name}
+          dataCy="constructed-inventory-name"
+        />
+        <Detail
+          label={t`Description`}
+          value={inventory.description}
+          dataCy="constructed-inventory-description"
+        />
+        <Detail
+          label={t`Type`}
+          value={t`Constructed Inventory`}
+          dataCy="constructed-inventory-type"
+        />
+        <Detail
+          label={actions.limit.label}
+          value={inventory.limit}
+          helpText={actions.limit.help_text}
+          dataCy="constructed-inventory-limit"
+        />
+        <Detail
+          label={t`Organization`}
+          dataCy="constructed-inventory-organization"
+          value={
+            <Link to={`/organizations/${organization.id}/details`}>
+              {organization.name}
+            </Link>
+          }
+        />
+        <Detail
+          label={actions.total_groups.label}
+          value={inventory.total_groups}
+          helpText={actions.total_groups.help_text}
+          dataCy="constructed-inventory-total-groups"
+        />
+        <Detail
+          label={actions.total_hosts.label}
+          value={inventory.total_hosts}
+          helpText={actions.total_hosts.help_text}
+          dataCy="constructed-inventory-total-hosts"
+        />
+        <Detail
+          label={actions.total_inventory_sources.label}
+          value={inventory.total_inventory_sources}
+          helpText={actions.total_inventory_sources.help_text}
+          dataCy="constructed-inventory-sources"
+        />
+        <Detail
+          label={actions.update_cache_timeout.label}
+          value={inventory.update_cache_timeout}
+          helpText={actions.update_cache_timeout.help_text}
+          dataCy="constructed-inventory-cache-timeout"
+        />
+        <Detail
+          label={actions.inventory_sources_with_failures.label}
+          value={inventory.inventory_sources_with_failures}
+          helpText={actions.inventory_sources_with_failures.help_text}
+          dataCy="constructed-inventory-sources-with-failures"
+        />
+        <Detail
+          label={actions.verbosity.label}
+          value={inventory.verbosity}
+          helpText={actions.verbosity.help_text}
+          dataCy="constructed-inventory-verbosity"
+        />
+        {instanceGroups && (
+          <Detail
+            fullWidth
+            label={t`Instance Groups`}
+            value={<InstanceGroupLabels labels={instanceGroups} isLinkable />}
+            isEmpty={instanceGroups.length === 0}
+            dataCy="constructed-inventory-instance-groups"
+          />
+        )}
+        {inventory.prevent_instance_group_fallback && (
+          <Detail
+            fullWidth
+            label={t`Enabled Options`}
+            dataCy="constructed-inventory-instance-group-fallback"
+            value={
+              <TextList component={TextListVariants.ul}>
+                {inventory.prevent_instance_group_fallback && (
+                  <TextListItem component={TextListItemVariants.li}>
+                    {t`Prevent Instance Group Fallback`}
+                    <Popover
+                      header={t`Prevent Instance Group Fallback`}
+                      content={helpText.preventInstanceGroupFallback}
+                    />
+                  </TextListItem>
+                )}
+              </TextList>
+            }
+          />
+        )}
+        <Detail
+          fullWidth
+          helpText={helpText.labels}
+          dataCy="constructed-inventory-labels"
+          label={t`Labels`}
+          value={
+            <ChipGroup
+              numChips={5}
+              totalChips={inventory.summary_fields.labels?.results?.length}
+            >
+              {inventory.summary_fields.labels?.results?.map((l) => (
+                <Chip key={l.id} isReadOnly>
+                  {l.name}
+                </Chip>
+              ))}
+            </ChipGroup>
+          }
+          isEmpty={inventory.summary_fields.labels?.results?.length === 0}
+        />
+        <Detail
+          fullWidth
+          label={t`Source Inventories`}
+          value={
+            <ChipGroup
+              numChips={5}
+              totalChips={sourceInventories?.length}
+              ouiaId="source-inventory-chips"
+            >
+              {sourceInventories?.map((sourceInventory) => (
+                <Link
+                  key={sourceInventory.id}
+                  to={`/inventories/inventory/${sourceInventory.id}/details`}
+                >
+                  <Chip key={sourceInventory.id} isReadOnly>
+                    {sourceInventory.name}
+                  </Chip>
+                </Link>
+              ))}
+            </ChipGroup>
+          }
+          isEmpty={sourceInventories?.length === 0}
+        />
+        <VariablesDetail
+          label={actions.source_vars.label}
+          helpText={helpText.variables()}
+          value={inventory.source_vars}
+          rows={4}
+          name="variables"
+          dataCy="inventory-detail-variables"
+        />
+        <UserDateDetail
+          label={actions.created.label}
+          date={inventory.created}
+          user={inventory.summary_fields.created_by}
+        />
+        <UserDateDetail
+          label={actions.modified.label}
+          date={inventory.modified}
+          user={inventory.summary_fields.modified_by}
+        />
+      </DetailList>
+      <CardActionsRow>
+        {userCapabilities.edit && (
+          <Button
+            ouiaId="inventory-detail-edit-button"
+            component={Link}
+            to={`/inventories/constructed_inventory/${inventory.id}/edit`}
+          >
+            {t`Edit`}
+          </Button>
+        )}
+        {userCapabilities.delete && (
+          <DeleteButton
+            name={inventory.name}
+            modalTitle={t`Delete Inventory`}
+            onConfirm={deleteInventory}
+            deleteDetailsRequests={deleteDetailsRequests}
+            deleteMessage={t`This inventory is currently being used by other resources. Are you sure you want to delete it?`}
+          >
+            {t`Delete`}
+          </DeleteButton>
+        )}
+      </CardActionsRow>
+      {error && (
+        <AlertModal
+          isOpen={error}
+          variant="error"
+          title={t`Error!`}
+          onClose={dismissError}
+        >
+          {t`Failed to delete inventory.`}
+          <ErrorDetail error={error} />
+        </AlertModal>
+      )}
+    </CardBody>
+  );
+}
+
+ConstructedInventoryDetail.propTypes = {
+  inventory: Inventory.isRequired,
+};
+
+export default ConstructedInventoryDetail;

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

@@ -0,0 +1,66 @@
+import React from 'react';
+import { act } from 'react-dom/test-utils';
+import { InventoriesAPI, CredentialTypesAPI } from 'api';
+
+import { mountWithContexts } from '../../../../testUtils/enzymeHelpers';
+import ConstructedInventoryDetail from './ConstructedInventoryDetail';
+
+jest.mock('../../../api');
+
+const mockInventory = {
+  id: 1,
+  type: 'inventory',
+  summary_fields: {
+    organization: {
+      id: 1,
+      name: 'The Organization',
+      description: '',
+    },
+    created_by: {
+      username: 'the_creator',
+      id: 2,
+    },
+    modified_by: {
+      username: 'the_modifier',
+      id: 3,
+    },
+    user_capabilities: {
+      edit: true,
+      delete: true,
+      copy: true,
+      adhoc: true,
+    },
+  },
+  created: '2019-10-04T16:56:48.025455Z',
+  modified: '2019-10-04T16:56:48.025468Z',
+  name: 'Constructed Inv',
+  description: '',
+  organization: 1,
+  kind: 'constructed',
+  has_active_failures: false,
+  total_hosts: 0,
+  hosts_with_active_failures: 0,
+  total_groups: 0,
+  groups_with_active_failures: 0,
+  has_inventory_sources: false,
+  total_inventory_sources: 0,
+  inventory_sources_with_failures: 0,
+  pending_deletion: false,
+  prevent_instance_group_fallback: false,
+  update_cache_timeout: 0,
+  limit: '',
+  verbosity: 1,
+};
+
+describe('<ConstructedInventoryDetail />', () => {
+  test('initially renders successfully', async () => {
+    let wrapper;
+    await act(async () => {
+      wrapper = mountWithContexts(
+        <ConstructedInventoryDetail inventory={mockInventory} />
+      );
+    });
+    expect(wrapper.length).toBe(1);
+    expect(wrapper.find('ConstructedInventoryDetail').length).toBe(1);
+  });
+});

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

@@ -0,0 +1 @@
+export { default } from './ConstructedInventoryDetail';

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

@@ -0,0 +1,13 @@
+/* eslint i18next/no-literal-string: "off" */
+import React from 'react';
+import { CardBody } from 'components/Card';
+
+function ConstructedInventoryGroups() {
+  return (
+    <CardBody>
+      <div>Coming Soon!</div>
+    </CardBody>
+  );
+}
+
+export default ConstructedInventoryGroups;

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { act } from 'react-dom/test-utils';
+import { mountWithContexts } from '../../../../testUtils/enzymeHelpers';
+import ConstructedInventoryGroups from './ConstructedInventoryGroups';
+
+describe('<ConstructedInventoryGroups />', () => {
+  test('initially renders successfully', async () => {
+    let wrapper;
+    await act(async () => {
+      wrapper = mountWithContexts(<ConstructedInventoryGroups />);
+    });
+    expect(wrapper.length).toBe(1);
+    expect(wrapper.find('ConstructedInventoryGroups').length).toBe(1);
+  });
+});

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

@@ -0,0 +1 @@
+export { default } from './ConstructedInventoryGroups';

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

@@ -8,7 +8,6 @@ import {
   Link,
   useLocation,
   useRouteMatch,
-  useParams,
 } from 'react-router-dom';
 import { CaretLeftIcon } from '@patternfly/react-icons';
 import { Card, PageSection } from '@patternfly/react-core';
@@ -31,15 +30,14 @@ function Inventory({ setBreadcrumb }) {
   const [hasContentLoading, setHasContentLoading] = useState(true);
   const [inventory, setInventory] = useState(null);
   const location = useLocation();
-  const { id: inventoryId } = useParams();
   const match = useRouteMatch({
-    path: `/inventories/:inventoryType/:id`,
+    path: '/inventories/inventory/:id',
   });
 
   useEffect(() => {
     async function fetchData() {
       try {
-        const { data } = await InventoriesAPI.readDetail(inventoryId);
+        const { data } = await InventoriesAPI.readDetail(match.params.id);
         setBreadcrumb(data);
         setInventory(data);
       } catch (error) {
@@ -50,7 +48,7 @@ function Inventory({ setBreadcrumb }) {
     }
 
     fetchData();
-  }, [inventoryId, location.pathname, setBreadcrumb]);
+  }, [match.params.id, location.pathname, setBreadcrumb]);
 
   const tabsArray = [
     {
@@ -187,8 +185,10 @@ function Inventory({ setBreadcrumb }) {
             </Route>,
             <Route path="*" key="not-found">
               <ContentError isNotFound>
-                {inventoryId && (
+                {match.params.id && (
-                  <Link to={`/inventories/inventory/${inventoryId}/details`}>
+                  <Link
+                    to={`/inventories/inventory/${match.params.id}/details`}
+                  >
                     {t`View Inventory Details`}
                   </Link>
                 )}

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

@@ -24,7 +24,6 @@ import useRequest, { useDismissableError } from 'hooks/useRequest';
 import { Inventory } from 'types';
 import { relatedResourceDeleteRequests } from 'util/getRelatedResourceDeleteDetails';
 import InstanceGroupLabels from 'components/InstanceGroupLabels';
-import { VERBOSITY } from 'components/VerbositySelectField';
 import getHelpText from '../shared/Inventory.helptext';
 
 function InventoryDetail({ inventory }) {
@@ -103,7 +102,6 @@ function InventoryDetail({ inventory }) {
           }
         />
         <Detail label={t`Total hosts`} value={inventory.total_hosts} />
-        <Detail label={t`Total groups`} value={inventory.total_groups} />
         {instanceGroups && (
           <Detail
             fullWidth
@@ -119,21 +117,6 @@ function InventoryDetail({ inventory }) {
             helpText={helpText.preventInstanceGroupFallback}
           />
         )}
-        <Detail
-          label={t`Limit`}
-          dataCy="inv-detail-limit"
-          value={inventory.limit}
-        />
-        <Detail
-          label={t`Cache timeout`}
-          value={inventory.update_cache_timeout}
-          dataCy="inv-detail-cache-timeout"
-        />
-        <Detail
-          label={t`Verbosity`}
-          dataCy="inv-detail-verbosity"
-          value={VERBOSITY()[inventory.verbosity]}
-        />
         {renderOptionsField && (
           <Detail
             fullWidth
@@ -166,7 +149,7 @@ function InventoryDetail({ inventory }) {
         <VariablesDetail
           label={t`Variables`}
           helpText={helpText.variables()}
-          value={inventory.variables || inventory.source_vars}
+          value={inventory.variables}
           rows={4}
           name="variables"
           dataCy="inventory-detail-variables"
@@ -204,6 +187,7 @@ function InventoryDetail({ inventory }) {
           </DeleteButton>
         )}
       </CardActionsRow>
+      {/* Update delete modal to show dependencies https://github.com/ansible/awx/issues/5546 */}
       {error && (
         <AlertModal
           isOpen={error}

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

@@ -23,7 +23,7 @@ function InventoryGroup({ setBreadcrumb, inventory }) {
   const [inventoryGroup, setInventoryGroup] = useState(null);
   const [contentLoading, setContentLoading] = useState(true);
   const [contentError, setContentError] = useState(null);
-  const { id: inventoryId, groupId, inventoryType } = useParams();
+  const { id: inventoryId, groupId } = useParams();
   const location = useLocation();
 
   useEffect(() => {
@@ -50,22 +50,22 @@ function InventoryGroup({ setBreadcrumb, inventory }) {
           {t`Back to Groups`}
         </>
       ),
-      link: `/inventories/${inventoryType}/${inventoryId}/groups`,
+      link: `/inventories/inventory/${inventory.id}/groups`,
       id: 99,
     },
     {
       name: t`Details`,
-      link: `/inventories/${inventoryType}/${inventoryId}/groups/${inventoryGroup?.id}/details`,
+      link: `/inventories/inventory/${inventory.id}/groups/${inventoryGroup?.id}/details`,
       id: 0,
     },
     {
       name: t`Related Groups`,
-      link: `/inventories/${inventoryType}/${inventoryId}/groups/${inventoryGroup?.id}/nested_groups`,
+      link: `/inventories/inventory/${inventory.id}/groups/${inventoryGroup?.id}/nested_groups`,
       id: 1,
     },
     {
       name: t`Hosts`,
-      link: `/inventories/${inventoryType}/${inventoryId}/groups/${inventoryGroup?.id}/nested_hosts`,
+      link: `/inventories/inventory/${inventory.id}/groups/${inventoryGroup?.id}/nested_hosts`,
       id: 2,
     },
   ];
@@ -105,32 +105,32 @@ function InventoryGroup({ setBreadcrumb, inventory }) {
       {showCardHeader && <RoutedTabs tabsArray={tabsArray} />}
       <Switch>
         <Redirect
-          from="/inventories/:inventoryType/:id/groups/:groupId"
+          from="/inventories/inventory/:id/groups/:groupId"
-          to="/inventories/:inventoryType/:id/groups/:groupId/details"
+          to="/inventories/inventory/:id/groups/:groupId/details"
           exact
         />
         {inventoryGroup && [
           <Route
             key="edit"
-            path="/inventories/:inventoryType/:id/groups/:groupId/edit"
+            path="/inventories/inventory/:id/groups/:groupId/edit"
           >
             <InventoryGroupEdit inventoryGroup={inventoryGroup} />
           </Route>,
           <Route
             key="details"
-            path="/inventories/:inventoryType/:id/groups/:groupId/details"
+            path="/inventories/inventory/:id/groups/:groupId/details"
           >
             <InventoryGroupDetail inventoryGroup={inventoryGroup} />
           </Route>,
           <Route
             key="hosts"
-            path="/inventories/:inventoryType/:id/groups/:groupId/nested_hosts"
+            path="/inventories/inventory/:id/groups/:groupId/nested_hosts"
           >
             <InventoryGroupHosts inventoryGroup={inventoryGroup} />
           </Route>,
           <Route
             key="relatedGroups"
-            path="/inventories/:inventoryType/:id/groups/:groupId/nested_groups"
+            path="/inventories/inventory/:id/groups/:groupId/nested_groups"
           >
             <InventoryRelatedGroups />
           </Route>,
@@ -138,7 +138,7 @@ function InventoryGroup({ setBreadcrumb, inventory }) {
         <Route key="not-found" path="*">
           <ContentError>
             {inventory && (
-              <Link to={`/inventories/:inventoryType/${inventory.id}/details`}>
+              <Link to={`/inventories/inventory/${inventory.id}/details`}>
                 {t`View Inventory Details`}
               </Link>
             )}

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

@@ -11,16 +11,15 @@ import {
 import InventoryGroup from './InventoryGroup';
 
 jest.mock('../../../api');
-describe('<InventoryGroup />', () => {
+jest.mock('react-router-dom', () => ({
-  jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
-    ...jest.requireActual('react-router-dom'),
+  useParams: () => ({
-    useParams: () => ({
+    id: 1,
-      id: 1,
+    groupId: 2,
-      groupId: 2,
+  }),
-      inventoryType: 'inventory',
+}));
-    }),
-  }));
 
+describe('<InventoryGroup />', () => {
   let wrapper;
   let history;
   const inventory = { id: 1, name: 'Foo' };
@@ -42,11 +41,11 @@ describe('<InventoryGroup />', () => {
       },
     });
     history = createMemoryHistory({
-      initialEntries: [`/inventories/inventory/1/groups/1/details`],
+      initialEntries: ['/inventories/inventory/1/groups/1/details'],
     });
     await act(async () => {
       wrapper = mountWithContexts(
-        <Route path="/inventories/:inventoryType/:id/groups">
+        <Route path="/inventories/inventory/:id/groups">
           <InventoryGroup setBreadcrumb={() => {}} inventory={inventory} />
         </Route>,
         { context: { router: { history } } }
@@ -64,7 +63,7 @@ describe('<InventoryGroup />', () => {
     expect(routedTabs).toHaveLength(1);
 
     const tabs = routedTabs.prop('tabsArray');
-    expect(tabs[0].link).toEqual(`/inventories/inventory/1/groups`);
+    expect(tabs[0].link).toEqual('/inventories/inventory/1/groups');
     expect(tabs[1].name).toEqual('Details');
     expect(tabs[2].name).toEqual('Related Groups');
     expect(tabs[3].name).toEqual('Hosts');
@@ -72,7 +71,7 @@ describe('<InventoryGroup />', () => {
 
   test('should show content error when user attempts to navigate to erroneous route', async () => {
     history = createMemoryHistory({
-      initialEntries: [`/inventories/inventory/1/groups/1/foobar`],
+      initialEntries: ['/inventories/inventory/1/groups/1/foobar'],
     });
     await act(async () => {
       wrapper = mountWithContexts(
@@ -93,59 +92,3 @@ describe('<InventoryGroup />', () => {
     await waitForElement(wrapper, 'ContentError', (el) => el.length === 1);
   });
 });
-
-describe('constructed inventory', () => {
-  let wrapper;
-  let history;
-  const inventory = { id: 1, name: 'Foo' };
-
-  jest.mock('react-router-dom', () => ({
-    ...jest.requireActual('react-router-dom'),
-    useParams: () => ({
-      id: 1,
-      groupId: 2,
-      inventoryType: 'constructed_inventory',
-    }),
-  }));
-
-  beforeEach(async () => {
-    GroupsAPI.readDetail.mockResolvedValue({
-      data: {
-        id: 1,
-        name: 'Foo',
-        description: 'Bar',
-        variables: 'bizz: buzz',
-        summary_fields: {
-          inventory: { id: 1 },
-          created_by: { id: 1, username: 'Athena' },
-          modified_by: { id: 1, username: 'Apollo' },
-        },
-        created: '2020-04-25T01:23:45.678901Z',
-        modified: '2020-04-25T01:23:45.678901Z',
-      },
-    });
-    history = createMemoryHistory({
-      initialEntries: [`/inventories/constructed_inventory/1/groups/1/details`],
-    });
-
-    await act(async () => {
-      wrapper = mountWithContexts(
-        <Route path="/inventories/:inventoryType/:id/groups">
-          <InventoryGroup setBreadcrumb={() => {}} inventory={inventory} />
-        </Route>,
-        { context: { router: { history } } }
-      );
-    });
-    await waitForElement(wrapper, 'ContentLoading', (el) => el.length === 0);
-  });
-  test('Constructed Inventory expect all tabs to exist, including Back to Groups', async () => {
-    const routedTabs = wrapper.find('RoutedTabs');
-    expect(routedTabs).toHaveLength(1);
-
-    const tabs = routedTabs.prop('tabsArray');
-    expect(tabs[0].link).toEqual(`/inventories/constructed_inventory/1/groups`);
-    expect(tabs[1].name).toEqual('Details');
-    expect(tabs[2].name).toEqual('Related Groups');
-    expect(tabs[3].name).toEqual('Hosts');
-  });
-});

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

@@ -1,8 +1,9 @@
 import React, { useState } from 'react';
 import { t } from '@lingui/macro';
-import { useHistory, useParams } from 'react-router-dom';
+
 import { Button } from '@patternfly/react-core';
 
+import { useHistory, useParams } from 'react-router-dom';
 import { VariablesDetail } from 'components/CodeEditor';
 import { CardBody, CardActionsRow } from 'components/Card';
 import ErrorDetail from 'components/ErrorDetail';
@@ -11,7 +12,6 @@ import { DetailList, Detail, UserDateDetail } from 'components/DetailList';
 import InventoryGroupsDeleteModal from '../shared/InventoryGroupsDeleteModal';
 
 function InventoryGroupDetail({ inventoryGroup }) {
-  const { inventoryType } = useParams();
   const {
     summary_fields: { created_by, modified_by, user_capabilities },
     created,
@@ -47,33 +47,31 @@ function InventoryGroupDetail({ inventoryGroup }) {
           user={modified_by}
         />
       </DetailList>
-      {inventoryType !== 'constructed_inventory' && (
+      <CardActionsRow>
-        <CardActionsRow>
+        {user_capabilities?.edit && (
-          {user_capabilities?.edit && (
+          <Button
-            <Button
+            ouiaId="inventory-group-detail-edit-button"
-              ouiaId="inventory-group-detail-edit-button"
+            variant="primary"
-              variant="primary"
+            aria-label={t`Edit`}
-              aria-label={t`Edit`}
+            onClick={() =>
-              onClick={() =>
+              history.push(
-                history.push(
+                `/inventories/inventory/${params.id}/groups/${params.groupId}/edit`
-                  `/inventories/inventory/${params.id}/groups/${params.groupId}/edit`
+              )
-                )
+            }
-              }
+          >
-            >
+            {t`Edit`}
-              {t`Edit`}
+          </Button>
-            </Button>
+        )}
-          )}
+        {user_capabilities?.delete && (
-          {user_capabilities?.delete && (
+          <InventoryGroupsDeleteModal
-            <InventoryGroupsDeleteModal
+            groups={[inventoryGroup]}
-              groups={[inventoryGroup]}
+            isDisabled={false}
-              isDisabled={false}
+            onAfterDelete={() =>
-              onAfterDelete={() =>
+              history.push(`/inventories/inventory/${params.id}/groups`)
-                history.push(`/inventories/inventory/${params.id}/groups`)
+            }
-              }
+          />
-            />
+        )}
-          )}
+      </CardActionsRow>
-        </CardActionsRow>
-      )}
       {error && (
         <AlertModal
           variant="error"

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

@@ -39,14 +39,6 @@ describe('<InventoryGroupDetail />', () => {
   let history;
 
   describe('User has full permissions', () => {
-    jest.mock('react-router-dom', () => ({
-      ...jest.requireActual('react-router-dom'),
-      useParams: () => ({
-        id: 1,
-        groupId: 3,
-        inventoryType: 'inventory',
-      }),
-    }));
     beforeEach(async () => {
       await act(async () => {
         history = createMemoryHistory({
@@ -124,14 +116,6 @@ describe('<InventoryGroupDetail />', () => {
   });
 
   describe('User has read-only permissions', () => {
-    jest.mock('react-router-dom', () => ({
-      ...jest.requireActual('react-router-dom'),
-      useParams: () => ({
-        id: 1,
-        groupId: 3,
-        inventoryType: 'inventory',
-      }),
-    }));
     test('should hide edit/delete buttons', async () => {
       const readOnlyGroup = {
         ...inventoryGroup,
@@ -175,48 +159,4 @@ describe('<InventoryGroupDetail />', () => {
       expect(wrapper.find('button[aria-label="Delete"]').length).toBe(0);
     });
   });
-  describe('Cannot edit or delete constructed inventory group', () => {
-    beforeEach(async () => {
-      await act(async () => {
-        history = createMemoryHistory({
-          initialEntries: ['/inventories/inventory/1/groups/1/details'],
-        });
-        wrapper = mountWithContexts(
-          <Route path="/inventories/inventory/:id/groups/:groupId">
-            <InventoryGroupDetail inventoryGroup={inventoryGroup} />
-          </Route>,
-          {
-            context: {
-              router: {
-                history,
-                route: {
-                  location: history.location,
-                  match: {
-                    params: {
-                      id: 1,
-                      group: 2,
-                      inventoryType: 'constructed_inventory',
-                    },
-                  },
-                },
-              },
-            },
-          }
-        );
-        await waitForElement(
-          wrapper,
-          'ContentLoading',
-          (el) => el.length === 0
-        );
-      });
-    });
-    afterEach(() => {
-      jest.clearAllMocks();
-    });
-    test('should not show edit button', () => {
-      const editButton = wrapper.find('Button[aria-label="edit"]');
-      expect(editButton.length).toBe(0);
-      expect(wrapper.find('Button[aria-label="delete"]').length).toBe(0);
-    });
-  });
 });

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

@@ -34,7 +34,7 @@ const QS_CONFIG = getQSConfig('host', {
 function InventoryGroupHostList() {
   const [isAdHocLaunchLoading, setIsAdHocLaunchLoading] = useState(false);
   const [isModalOpen, setIsModalOpen] = useState(false);
-  const { id: inventoryId, groupId, inventoryType } = useParams();
+  const { id: inventoryId, groupId } = useParams();
   const location = useLocation();
 
   const {
@@ -259,8 +259,8 @@ function InventoryGroupHostList() {
             key={host.id}
             rowIndex={index}
             host={host}
-            detailUrl={`/inventories/${inventoryType}/${inventoryId}/hosts/${host.id}/details`}
+            detailUrl={`/inventories/inventory/${inventoryId}/hosts/${host.id}/details`}
-            editUrl={`/inventories/${inventoryType}/${inventoryId}/hosts/${host.id}/edit`}
+            editUrl={`/inventories/inventory/${inventoryId}/hosts/${host.id}/edit`}
             isSelected={selected.some((row) => row.id === host.id)}
             onSelect={() => handleSelect(host)}
           />

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

@@ -1,20 +1,25 @@
 import React from 'react';
-import { bool, func } from 'prop-types';
+import { bool, func, number, oneOfType, string } from 'prop-types';
 import { t } from '@lingui/macro';
 
 import { Button } from '@patternfly/react-core';
 import { Tr, Td } from '@patternfly/react-table';
 
-import { Link, useParams } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import { PencilAltIcon } from '@patternfly/react-icons';
 import { ActionsTd, ActionItem } from 'components/PaginatedTable';
 import { Group } from 'types';
 
-function InventoryGroupItem({ group, isSelected, onSelect, rowIndex }) {
+function InventoryGroupItem({
-  const { id: inventoryId, inventoryType } = useParams();
+  group,
+  inventoryId,
+  isSelected,
+  onSelect,
+  rowIndex,
+}) {
   const labelId = `check-action-${group.id}`;
-  const detailUrl = `/inventories/${inventoryType}/${inventoryId}/groups/${group.id}/details`;
+  const detailUrl = `/inventories/inventory/${inventoryId}/groups/${group.id}/details`;
-  const editUrl = `/inventories/${inventoryType}/${inventoryId}/groups/${group.id}/edit`;
+  const editUrl = `/inventories/inventory/${inventoryId}/groups/${group.id}/edit`;
 
   return (
     <Tr id={`group-row-${group.id}`} ouiaId={`group-row-${group.id}`}>
@@ -31,30 +36,29 @@ function InventoryGroupItem({ group, isSelected, onSelect, rowIndex }) {
           <b>{group.name}</b>
         </Link>
       </Td>
-      {inventoryType !== 'constructed_inventory' && (
+      <ActionsTd dataLabel={t`Actions`} gridColumns="auto 40px">
-        <ActionsTd dataLabel={t`Actions`} gridColumns="auto 40px">
+        <ActionItem
-          <ActionItem
+          visible={group.summary_fields.user_capabilities.edit}
-            visible={group.summary_fields.user_capabilities.edit}
+          tooltip={t`Edit group`}
-            tooltip={t`Edit group`}
+        >
+          <Button
+            ouiaId={`${group.id}-edit-button`}
+            aria-label={t`Edit Group`}
+            variant="plain"
+            component={Link}
+            to={editUrl}
           >
-            <Button
+            <PencilAltIcon />
-              ouiaId={`${group.id}-edit-button`}
+          </Button>
-              aria-label={t`Edit Group`}
+        </ActionItem>
-              variant="plain"
+      </ActionsTd>
-              component={Link}
-              to={editUrl}
-            >
-              <PencilAltIcon />
-            </Button>
-          </ActionItem>
-        </ActionsTd>
-      )}
     </Tr>
   );
 }
 
 InventoryGroupItem.propTypes = {
   group: Group.isRequired,
+  inventoryId: oneOfType([number, string]).isRequired,
   isSelected: bool.isRequired,
   onSelect: func.isRequired,
 };

awx/ui/src/screens/Inventory/InventoryGroups/InventoryGroupItem.test.js

@@ -1,6 +1,4 @@
 import React from 'react';
-import { Route } from 'react-router-dom';
-import { act } from 'react-dom/test-utils';
 import { mountWithContexts } from '../../../../testUtils/enzymeHelpers';
 import InventoryGroupItem from './InventoryGroupItem';
 
@@ -59,39 +57,4 @@ describe('<InventoryGroupItem />', () => {
     );
     expect(wrapper.find('PencilAltIcon').exists()).toBeFalsy();
   });
-  test('edit button should be hidden from constructed inventory group', async () => {
-    jest.mock('react-router-dom', () => ({
-      ...jest.requireActual('react-router-dom'),
-      useParams: () => ({ id: 42, inventoryType: 'constructed_inventory' }),
-    }));
-    const mockGroup = {
-      id: 2,
-      type: 'group',
-      name: 'foo',
-      inventory: 1,
-      summary_fields: {
-        user_capabilities: {
-          edit: true,
-        },
-      },
-    };
-
-    await act(async () => {
-      wrapper = mountWithContexts(
-        <Route path="/inventories/:inventoryType/:id/groups">
-          <table>
-            <tbody>
-              <InventoryGroupItem
-                group={mockGroup}
-                inventoryId={1}
-                isSelected={false}
-                onSelect={() => {}}
-              />
-            </tbody>
-          </table>
-        </Route>
-      );
-    });
-    expect(wrapper.find('PencilAltIcon').exists()).toBeFalsy();
-  });
 });

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

@@ -16,14 +16,11 @@ function InventoryGroups({ setBreadcrumb, inventory }) {
           inventory={inventory}
         />
       </Route>
-      <Route
+      <Route key="details" path="/inventories/inventory/:id/groups/:groupId/">
-        key="details"
-        path="/inventories/:inventoryType/:id/groups/:groupId/"
-      >
         <InventoryGroup inventory={inventory} setBreadcrumb={setBreadcrumb} />
       </Route>
-      <Route key="list" path="/inventories/:inventoryType/:id/groups">
+      <Route key="list" path="/inventories/inventory/:id/groups">
-        <InventoryGroupsList inventory={inventory} />
+        <InventoryGroupsList />
       </Route>
     </Switch>
   );

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

@@ -5,7 +5,7 @@ import { Tooltip } from '@patternfly/react-core';
 import { getQSConfig, parseQueryString } from 'util/qs';
 import useSelected from 'hooks/useSelected';
 import useRequest from 'hooks/useRequest';
-import { ConstructedInventoriesAPI, InventoriesAPI } from 'api';
+import { InventoriesAPI } from 'api';
 import DataListToolbar from 'components/DataListToolbar';
 import PaginatedTable, {
   HeaderRow,
@@ -29,7 +29,7 @@ function cannotDelete(item) {
 
 function InventoryGroupsList() {
   const location = useLocation();
-  const { id: inventoryId, inventoryType } = useParams();
+  const { id: inventoryId } = useParams();
   const [isAdHocLaunchLoading, setIsAdHocLaunchLoading] = useState(false);
 
   const {
@@ -104,10 +104,8 @@ function InventoryGroupsList() {
   };
 
   const canAdd =
-    actions &&
+    actions && Object.prototype.hasOwnProperty.call(actions, 'POST');
-    Object.prototype.hasOwnProperty.call(actions, 'POST') &&
+
-    inventoryType !== 'constructed_inventory';
-  const canDelete = inventoryType !== 'constructed_inventory';
   return (
     <PaginatedTable
       contentError={contentError}
@@ -141,15 +139,14 @@ function InventoryGroupsList() {
       headerRow={
         <HeaderRow qsConfig={QS_CONFIG}>
           <HeaderCell sortKey="name">{t`Name`}</HeaderCell>
-          {inventoryType !== 'constructed_inventory' && (
+          <HeaderCell>{t`Actions`}</HeaderCell>
-            <HeaderCell>{t`Actions`}</HeaderCell>
-          )}
         </HeaderRow>
       }
       renderRow={(item, index) => (
         <InventoryGroupItem
           key={item.id}
           group={item}
+          inventoryId={inventoryId}
           isSelected={selected.some((row) => row.id === item.id)}
           onSelect={() => handleSelect(item)}
           rowIndex={index}
@@ -180,28 +177,20 @@ function InventoryGroupsList() {
                   />,
                 ]
               : []),
-            ...(canDelete
+            <Tooltip content={renderTooltip()} position="top" key="delete">
-              ? [
+              <div>
-                  <Tooltip
+                <InventoryGroupsDeleteModal
-                    content={renderTooltip()}
+                  groups={selected}
-                    position="top"
+                  isDisabled={
-                    key="delete"
+                    selected.length === 0 || selected.some(cannotDelete)
-                  >
+                  }
-                    <div>
+                  onAfterDelete={() => {
-                      <InventoryGroupsDeleteModal
+                    fetchData();
-                        groups={selected}
+                    clearSelected();
-                        isDisabled={
+                  }}
-                          selected.length === 0 || selected.some(cannotDelete)
+                />
-                        }
+              </div>
-                        onAfterDelete={() => {
+            </Tooltip>,
-                          fetchData();
-                          clearSelected();
-                        }}
-                      />
-                    </div>
-                  </Tooltip>,
-                ]
-              : []),
           ]}
         />
       )}

awx/ui/src/screens/Inventory/InventoryGroups/InventoryGroupsList.test.js

@@ -10,6 +10,12 @@ import {
 import InventoryGroupsList from './InventoryGroupsList';
 
 jest.mock('../../../api');
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useParams: () => ({
+    id: 1,
+  }),
+}));
 const mockGroups = [
   {
     id: 1,
@@ -54,14 +60,7 @@ const mockGroups = [
 
 describe('<InventoryGroupsList />', () => {
   let wrapper;
-  jest.mock('react-router-dom', () => ({
+
-    ...jest.requireActual('react-router-dom'),
-    useParams: () => ({
-      id: 1,
-      groupId: 2,
-      inventoryType: 'inventory',
-    }),
-  }));
   beforeEach(async () => {
     InventoriesAPI.readGroups.mockResolvedValue({
       data: {
@@ -97,7 +96,7 @@ describe('<InventoryGroupsList />', () => {
     });
     await act(async () => {
       wrapper = mountWithContexts(
-        <Route path="/inventories/:inventoryType/:id/groups">
+        <Route path="/inventories/inventory/:id/groups">
           <InventoryGroupsList />
         </Route>,
         {
@@ -317,78 +316,3 @@ describe('<InventoryGroupsList/> error handling', () => {
     });
   });
 });
-
-describe('Constructed Inventory group', () => {
-  let wrapper;
-  let history;
-  jest.mock('react-router-dom', () => ({
-    ...jest.requireActual('react-router-dom'),
-    useParams: () => ({
-      id: 1,
-      groupId: 2,
-      inventoryType: 'constructed_inventory',
-    }),
-  }));
-
-  beforeEach(async () => {
-    InventoriesAPI.readGroups.mockResolvedValue({
-      data: {
-        count: mockGroups.length,
-        results: mockGroups,
-      },
-    });
-    InventoriesAPI.readGroupsOptions.mockResolvedValue({
-      data: {
-        actions: {
-          GET: {},
-          POST: {},
-        },
-      },
-    });
-    InventoriesAPI.readAdHocOptions.mockResolvedValue({
-      data: {
-        actions: {
-          GET: {
-            module_name: {
-              choices: [
-                ['command', 'command'],
-                ['shell', 'shell'],
-              ],
-            },
-          },
-          POST: {},
-        },
-      },
-    });
-    history = createMemoryHistory({
-      initialEntries: ['/inventories/constructed_inventory/3/groups'],
-    });
-    await act(async () => {
-      wrapper = mountWithContexts(
-        <Route path="/inventories/:inventoryType/:id/groups">
-          <InventoryGroupsList />
-        </Route>,
-        {
-          context: {
-            router: {
-              history,
-              route: {
-                location: history.location,
-              },
-            },
-          },
-        }
-      );
-    });
-    await waitForElement(wrapper, 'ContentLoading', (el) => el.length === 0);
-  });
-
-  afterEach(() => {
-    jest.clearAllMocks();
-  });
-  test('should not show add button', () => {
-    expect(wrapper.find('ToolbarAddButton').length).toBe(0);
-    expect(wrapper.find('ToolbarDeleteButton').length).toBe(0);
-    expect(wrapper.find('AdHocCommands').length).toBe(1);
-  });
-});

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

@@ -8,7 +8,6 @@ import {
   Link,
   useRouteMatch,
   useLocation,
-  useParams,
 } from 'react-router-dom';
 import { Card } from '@patternfly/react-core';
 import { CaretLeftIcon } from '@patternfly/react-icons';
@@ -26,9 +25,9 @@ import InventoryHostGroups from '../InventoryHostGroups';
 
 function InventoryHost({ setBreadcrumb, inventory }) {
   const location = useLocation();
-  const { hostId, id: inventoryId, inventoryType } = useParams();
+  const match = useRouteMatch('/inventories/inventory/:id/hosts/:hostId');
-  const match = useRouteMatch('/inventories/:inventoryType/:id/hosts/:hostId');
+  const hostListUrl = `/inventories/inventory/${inventory.id}/hosts`;
-  const hostListUrl = `/inventories/${inventoryType}/${inventory.id}/hosts`;
+
   const {
     result: { host },
     error: contentError,
@@ -36,11 +35,14 @@ function InventoryHost({ setBreadcrumb, inventory }) {
     request: fetchHost,
   } = useRequest(
     useCallback(async () => {
-      const response = await InventoriesAPI.readHostDetail(inventoryId, hostId);
+      const response = await InventoriesAPI.readHostDetail(
+        inventory.id,
+        match.params.hostId
+      );
       return {
         host: response,
       };
-    }, [inventoryId, hostId]),
+    }, [inventory.id, match.params.hostId]),
     {
       host: null,
     }
@@ -118,37 +120,37 @@ function InventoryHost({ setBreadcrumb, inventory }) {
       {!isLoading && host && (
         <Switch>
           <Redirect
-            from="/inventories/:inventoryType/:id/hosts/:hostId"
+            from="/inventories/inventory/:id/hosts/:hostId"
-            to="/inventories/:inventoryType/:id/hosts/:hostId/details"
+            to="/inventories/inventory/:id/hosts/:hostId/details"
             exact
           />
           <Route
             key="details"
-            path="/inventories/:inventoryType/:id/hosts/:hostId/details"
+            path="/inventories/inventory/:id/hosts/:hostId/details"
           >
             <InventoryHostDetail host={host} />
           </Route>
           <Route
             key="edit"
-            path="/inventories/:inventoryType/:id/hosts/:hostId/edit"
+            path="/inventories/inventory/:id/hosts/:hostId/edit"
           >
             <InventoryHostEdit host={host} inventory={inventory} />
           </Route>
           <Route
             key="facts"
-            path="/inventories/:inventoryType/:id/hosts/:hostId/facts"
+            path="/inventories/inventory/:id/hosts/:hostId/facts"
           >
             <InventoryHostFacts host={host} />
           </Route>
           <Route
             key="groups"
-            path="/inventories/:inventoryType/:id/hosts/:hostId/groups"
+            path="/inventories/inventory/:id/hosts/:hostId/groups"
           >
             <InventoryHostGroups />
           </Route>
           <Route
             key="jobs"
-            path="/inventories/:inventoryType/:id/hosts/:hostId/jobs"
+            path="/inventories/inventory/:id/hosts/:hostId/jobs"
           >
             <JobList defaultParams={{ job__hosts: host.id }} />
           </Route>

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

@@ -1,6 +1,6 @@
 import 'styled-components/macro';
 import React, { useState } from 'react';
-import { Link, useHistory, useParams } from 'react-router-dom';
+import { Link, useHistory } from 'react-router-dom';
 
 import { t } from '@lingui/macro';
 import { Button } from '@patternfly/react-core';
@@ -16,7 +16,6 @@ import { HostsAPI } from 'api';
 import HostToggle from 'components/HostToggle';
 
 function InventoryHostDetail({ host }) {
-  const { inventoryType } = useParams();
   const {
     created,
     description,
@@ -93,27 +92,25 @@ function InventoryHostDetail({ host }) {
           dataCy="inventory-host-detail-variables"
         />
       </DetailList>
-      {inventoryType !== 'constructed_inventory' && (
+      <CardActionsRow>
-        <CardActionsRow>
+        {user_capabilities?.edit && (
-          {user_capabilities?.edit && (
+          <Button
-            <Button
+            ouiaId="inventory-host-detail-edit-button"
-              ouiaId="inventory-host-detail-edit-button"
+            aria-label={t`edit`}
-              aria-label={t`edit`}
+            component={Link}
-              component={Link}
+            to={`/inventories/inventory/${inventory.id}/hosts/${id}/edit`}
-              to={`/inventories/inventory/${inventory.id}/hosts/${id}/edit`}
+          >
-            >
+            {t`Edit`}
-              {t`Edit`}
+          </Button>
-            </Button>
+        )}
-          )}
+        {user_capabilities?.delete && (
-          {user_capabilities?.delete && (
+          <DeleteButton
-            <DeleteButton
+            name={name}
-              name={name}
+            modalTitle={t`Delete Host`}
-              modalTitle={t`Delete Host`}
+            onConfirm={() => handleHostDelete()}
-              onConfirm={() => handleHostDelete()}
+          />
-            />
+        )}
-          )}
+      </CardActionsRow>
-        </CardActionsRow>
-      )}
       {deletionError && (
         <AlertModal
           isOpen={deletionError}

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

@@ -1,6 +1,4 @@
 import React from 'react';
-import { Route } from 'react-router-dom';
-import { createMemoryHistory } from 'history';
 import { act } from 'react-dom/test-utils';
 import { HostsAPI } from 'api';
 import {
@@ -12,119 +10,93 @@ import mockHost from '../shared/data.host.json';
 
 jest.mock('../../../api');
 
-describe('User has edit permissions', () => {
+describe('<InventoryHostDetail />', () => {
   let wrapper;
 
-  beforeEach(async () => {
+  describe('User has edit permissions', () => {
-    await act(async () => {
+    beforeAll(() => {
       wrapper = mountWithContexts(<InventoryHostDetail host={mockHost} />);
     });
-  });
-  test('should render Details', async () => {
-    function assertDetail(label, value) {
-      expect(wrapper.find(`Detail[label="${label}"] dt`).text()).toBe(label);
-      expect(wrapper.find(`Detail[label="${label}"] dd`).text()).toBe(value);
-    }
 
-    assertDetail('Name', 'localhost');
+    test('should render Details', async () => {
-    assertDetail('Description', 'localhost description');
+      function assertDetail(label, value) {
-    assertDetail('Created', '10/28/2019, 9:26:54 PM');
+        expect(wrapper.find(`Detail[label="${label}"] dt`).text()).toBe(label);
-    assertDetail('Last Modified', '10/29/2019, 8:18:41 PM');
+        expect(wrapper.find(`Detail[label="${label}"] dd`).text()).toBe(value);
-    expect(wrapper.find(`Detail[label="Activity"] Sparkline`)).toHaveLength(1);
+      }
-  });
 
-  test('should show edit button for users with edit permission', () => {
+      assertDetail('Name', 'localhost');
-    const editButton = wrapper.find('Button[aria-label="edit"]');
+      assertDetail('Description', 'localhost description');
-    expect(editButton.text()).toEqual('Edit');
+      assertDetail('Created', '10/28/2019, 9:26:54 PM');
-    expect(editButton.prop('to')).toBe('/inventories/inventory/3/hosts/2/edit');
+      assertDetail('Last Modified', '10/29/2019, 8:18:41 PM');
-  });
+      expect(wrapper.find(`Detail[label="Activity"] Sparkline`)).toHaveLength(
-
+        1
-  test('expected api call is made for delete', async () => {
+      );
-    await act(async () => {
-      wrapper.find('DeleteButton').invoke('onConfirm')();
     });
-    expect(HostsAPI.destroy).toHaveBeenCalledTimes(1);
-  });
 
-  test('Error dialog shown for failed deletion', async () => {
+    test('should show edit button for users with edit permission', () => {
-    HostsAPI.destroy.mockImplementationOnce(() => Promise.reject(new Error()));
+      const editButton = wrapper.find('Button[aria-label="edit"]');
-    await act(async () => {
+      expect(editButton.text()).toEqual('Edit');
-      wrapper.find('DeleteButton').invoke('onConfirm')();
+      expect(editButton.prop('to')).toBe(
+        '/inventories/inventory/3/hosts/2/edit'
+      );
     });
-    await waitForElement(
+
-      wrapper,
+    test('expected api call is made for delete', async () => {
-      'Modal[title="Error!"]',
+      await act(async () => {
-      (el) => el.length === 1
+        wrapper.find('DeleteButton').invoke('onConfirm')();
-    );
+      });
-    await act(async () => {
+      expect(HostsAPI.destroy).toHaveBeenCalledTimes(1);
-      wrapper.find('Modal[title="Error!"]').invoke('onClose')();
     });
-    await waitForElement(
-      wrapper,
-      'Modal[title="Error!"]',
-      (el) => el.length === 0
-    );
-  });
-});
 
-describe('User has read-only permissions', () => {
+    test('Error dialog shown for failed deletion', async () => {
-  let wrapper;
+      HostsAPI.destroy.mockImplementationOnce(() =>
-  beforeEach(async () => {
+        Promise.reject(new Error())
-    const readOnlyHost = {
+      );
-      ...mockHost,
+      await act(async () => {
-      summary_fields: {
+        wrapper.find('DeleteButton').invoke('onConfirm')();
-        ...mockHost.summary_fields,
+      });
-        user_capabilities: {
+      await waitForElement(
-          ...mockHost.summary_fields.user_capabilities,
+        wrapper,
-        },
+        'Modal[title="Error!"]',
-      },
+        (el) => el.length === 1
-    };
+      );
-    readOnlyHost.summary_fields.user_capabilities.edit = false;
+      await act(async () => {
-    readOnlyHost.summary_fields.recent_jobs = [];
+        wrapper.find('Modal[title="Error!"]').invoke('onClose')();
-    await act(async () => {
+      });
-      wrapper = mountWithContexts(<InventoryHostDetail host={readOnlyHost} />);
+      await waitForElement(
-    });
+        wrapper,
-  });
+        'Modal[title="Error!"]',
-
+        (el) => el.length === 0
-  test('should hide activity stream when there are no recent jobs', async () => {
-    expect(wrapper.find(`Detail[label="Activity"] Sparkline`)).toHaveLength(0);
-    const activity_detail = wrapper.find(`Detail[label="Activity"]`).at(0);
-    expect(activity_detail.prop('isEmpty')).toEqual(true);
-  });
-
-  test('should hide edit button for users without edit permission', async () => {
-    expect(wrapper.find('Button[aria-label="edit"]').length).toBe(0);
-  });
-});
-
-describe('Cannot delete a constructed inventory', () => {
-  let wrapper;
-  let history;
-  jest.mock('react-router-dom', () => ({
-    ...jest.requireActual('react-router-dom'),
-    useParams: () => ({
-      id: 42,
-      hostId: 3,
-      inventoryType: 'constructed_inventory',
-    }),
-  }));
-
-  beforeEach(async () => {
-    history = createMemoryHistory({
-      initialEntries: [`/inventories/constructed_inventory/1/hosts/1/details`],
-    });
-    await act(async () => {
-      wrapper = mountWithContexts(
-        <Route path="/inventories/:inventoryType/:id/hosts/:id/details">
-          <InventoryHostDetail host={mockHost} />
-        </Route>,
-        { context: { router: { history } } }
       );
     });
   });
-  test('should not show edit button', () => {
+
-    const editButton = wrapper.find('Button[aria-label="edit"]');
+  describe('User has read-only permissions', () => {
-    expect(editButton.length).toBe(0);
+    beforeAll(() => {
-    expect(wrapper.find('Button[aria-label="delete"]').length).toBe(0);
+      const readOnlyHost = {
+        ...mockHost,
+        summary_fields: {
+          ...mockHost.summary_fields,
+          user_capabilities: {
+            ...mockHost.summary_fields.user_capabilities,
+          },
+        },
+      };
+      readOnlyHost.summary_fields.user_capabilities.edit = false;
+      readOnlyHost.summary_fields.recent_jobs = [];
+      wrapper = mountWithContexts(<InventoryHostDetail host={readOnlyHost} />);
+    });
+
+    test('should hide activity stream when there are no recent jobs', async () => {
+      expect(wrapper.find(`Detail[label="Activity"] Sparkline`)).toHaveLength(
+        0
+      );
+      const activity_detail = wrapper.find(`Detail[label="Activity"]`).at(0);
+      expect(activity_detail.prop('isEmpty')).toEqual(true);
+    });
+
+    test('should hide edit button for users without edit permission', async () => {
+      expect(wrapper.find('Button[aria-label="edit"]').length).toBe(0);
+    });
   });
 });

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

@@ -1,19 +1,24 @@
 import React from 'react';
-import { bool, func } from 'prop-types';
+import { bool, func, number, oneOfType, string } from 'prop-types';
 import { t } from '@lingui/macro';
 import { Button } from '@patternfly/react-core';
 import { Tr, Td } from '@patternfly/react-table';
 
-import { Link, useParams } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import { PencilAltIcon } from '@patternfly/react-icons';
 import { ActionsTd, ActionItem } from 'components/PaginatedTable';
 import { Group } from 'types';
 
-function InventoryHostGroupItem({ group, isSelected, onSelect, rowIndex }) {
+function InventoryHostGroupItem({
-  const { id: inventoryId, inventoryType } = useParams();
+  group,
+  inventoryId,
+  isSelected,
+  onSelect,
+  rowIndex,
+}) {
   const labelId = `check-action-${group.id}`;
-  const detailUrl = `/inventories/${inventoryType}/${inventoryId}/groups/${group.id}/details`;
+  const detailUrl = `/inventories/inventory/${inventoryId}/groups/${group.id}/details`;
-  const editUrl = `/inventories/${inventoryType}/${inventoryId}/groups/${group.id}/edit`;
+  const editUrl = `/inventories/inventory/${inventoryId}/groups/${group.id}/edit`;
 
   return (
     <Tr
@@ -54,6 +59,7 @@ function InventoryHostGroupItem({ group, isSelected, onSelect, rowIndex }) {
 
 InventoryHostGroupItem.propTypes = {
   group: Group.isRequired,
+  inventoryId: oneOfType([number, string]).isRequired,
   isSelected: bool.isRequired,
   onSelect: func.isRequired,
 };

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

@@ -2,7 +2,7 @@ import React, { useCallback } from 'react';
 import { string, bool, func } from 'prop-types';
 import { t } from '@lingui/macro';
 import { Tr, Td } from '@patternfly/react-table';
-import { Link, useParams } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import { PencilAltIcon } from '@patternfly/react-icons';
 import { Button, Chip } from '@patternfly/react-core';
 import { HostsAPI } from 'api';
@@ -22,8 +22,6 @@ function InventoryHostItem({
   onSelect,
   rowIndex,
 }) {
-  const { inventoryType } = useParams();
-
   const labelId = `check-action-${host.id}`;
   const initialGroups = host?.summary_fields?.groups ?? {
     results: [],
@@ -97,22 +95,20 @@ function InventoryHostItem({
           gridColumns="auto 40px"
         >
           <HostToggle host={host} />
-          {inventoryType !== 'constructed_inventory' && (
+          <ActionItem
-            <ActionItem
+            visible={host.summary_fields.user_capabilities?.edit}
-              visible={host.summary_fields.user_capabilities?.edit}
+            tooltip={t`Edit host`}
-              tooltip={t`Edit host`}
+          >
+            <Button
+              aria-label={t`Edit host`}
+              ouiaId={`${host.id}-edit-button`}
+              variant="plain"
+              component={Link}
+              to={`${editUrl}`}
             >
-              <Button
+              <PencilAltIcon />
-                aria-label={t`Edit host`}
+            </Button>
-                ouiaId={`${host.id}-edit-button`}
+          </ActionItem>
-                variant="plain"
-                component={Link}
-                to={`${editUrl}`}
-              >
-                <PencilAltIcon />
-              </Button>
-            </ActionItem>
-          )}
         </ActionsTd>
       </Tr>
       {dismissableError && (

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

@@ -26,7 +26,7 @@ const QS_CONFIG = getQSConfig('host', {
 
 function InventoryHostList() {
   const [isAdHocLaunchLoading, setIsAdHocLaunchLoading] = useState(false);
-  const { id, inventoryType } = useParams();
+  const { id } = useParams();
   const { search } = useLocation();
 
   const {
@@ -100,10 +100,8 @@ function InventoryHostList() {
   };
 
   const canAdd =
-    actions &&
+    actions && Object.prototype.hasOwnProperty.call(actions, 'POST');
-    Object.prototype.hasOwnProperty.call(actions, 'POST') &&
+
-    inventoryType !== 'constructed_inventory';
-  const canDelete = inventoryType !== 'constructed_inventory';
   return (
     <>
       <PaginatedTable
@@ -168,16 +166,12 @@ function InventoryHostList() {
                     />,
                   ]
                 : []),
-              ...(canDelete
+              <ToolbarDeleteButton
-                ? [
+                key="delete"
-                    <ToolbarDeleteButton
+                onDelete={handleDeleteHosts}
-                      key="delete"
+                itemsToDelete={selected}
-                      onDelete={handleDeleteHosts}
+                pluralizedItemName={t`Hosts`}
-                      itemsToDelete={selected}
+              />,
-                      pluralizedItemName={t`Hosts`}
-                    />,
-                  ]
-                : []),
             ]}
           />
         )}
@@ -185,8 +179,8 @@ function InventoryHostList() {
           <InventoryHostItem
             key={host.id}
             host={host}
-            detailUrl={`/inventories/${inventoryType}/${id}/hosts/${host.id}/details`}
+            detailUrl={`/inventories/inventory/${id}/hosts/${host.id}/details`}
-            editUrl={`/inventories/${inventoryType}/${id}/hosts/${host.id}/edit`}
+            editUrl={`/inventories/inventory/${id}/hosts/${host.id}/edit`}
             isSelected={selected.some((row) => row.id === host.id)}
             onSelect={() => handleSelect(host)}
             rowIndex={index}

awx/ui/src/screens/Inventory/InventoryHosts/InventoryHostList.test.js

@@ -1,6 +1,4 @@
 import React from 'react';
-import { Route } from 'react-router-dom';
-import { createMemoryHistory } from 'history';
 import { act } from 'react-dom/test-utils';
 import { InventoriesAPI, HostsAPI } from 'api';
 import {
@@ -361,80 +359,3 @@ describe('<InventoryHostList />', () => {
     expect(wrapper.find('AdHocCommands')).toHaveLength(0);
   });
 });
-
-describe('Should not show add button for constructed inventory host list', () => {
-  let wrapper;
-  let history;
-  jest.mock('react-router-dom', () => ({
-    ...jest.requireActual('react-router-dom'),
-    useParams: () => ({
-      id: 1,
-      groupId: 2,
-      inventoryType: 'constructed_inventory',
-    }),
-  }));
-
-  beforeEach(async () => {
-    InventoriesAPI.readHosts.mockResolvedValue({
-      data: {
-        count: mockHosts.length,
-        results: mockHosts,
-      },
-    });
-    InventoriesAPI.readHostsOptions.mockResolvedValue({
-      data: {
-        actions: {
-          GET: {},
-          POST: {},
-        },
-        related_search_fields: ['first_key__search', 'ansible_facts'],
-      },
-    });
-
-    InventoriesAPI.readAdHocOptions.mockResolvedValue({
-      data: {
-        actions: {
-          GET: {
-            module_name: {
-              choices: [
-                ['command', 'command'],
-                ['shell', 'shell'],
-              ],
-            },
-          },
-          POST: {},
-        },
-      },
-    });
-    history = createMemoryHistory({
-      initialEntries: ['/inventories/constructed_inventory/3/hosts'],
-    });
-    await act(async () => {
-      wrapper = mountWithContexts(
-        <Route path="/inventories/:inventoryType/:id/hosts">
-          <InventoryHostList />
-        </Route>,
-        {
-          context: {
-            router: {
-              history,
-              route: {
-                location: history.location,
-              },
-            },
-          },
-        }
-      );
-    });
-    await waitForElement(wrapper, 'ContentLoading', (el) => el.length === 0);
-  });
-
-  afterEach(() => {
-    jest.clearAllMocks();
-  });
-  test('should not show add button', () => {
-    expect(wrapper.find('ToolbarAddButton').length).toBe(0);
-    expect(wrapper.find('ToolbarDeleteButton').length).toBe(0);
-    expect(wrapper.find('AdHocCommands').length).toBe(1);
-  });
-});

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

@@ -8,14 +8,14 @@ import InventoryHostList from './InventoryHostList';
 function InventoryHosts({ setBreadcrumb, inventory }) {
   return (
     <Switch>
-      <Route key="host-add" path="/inventories/:inventoryType/:id/hosts/add">
+      <Route key="host-add" path="/inventories/inventory/:id/hosts/add">
         <InventoryHostAdd inventory={inventory} />
       </Route>
-      <Route key="host" path="/inventories/:inventoryType/:id/hosts/:hostId">
+      <Route key="host" path="/inventories/inventory/:id/hosts/:hostId">
         <InventoryHost setBreadcrumb={setBreadcrumb} inventory={inventory} />
       </Route>
-      <Route key="host-list" path="/inventories/:inventoryType/:id/hosts">
+      <Route key="host-list" path="/inventories/inventory/:id/hosts">
-        <InventoryHostList inventory={inventory} />
+        <InventoryHostList />
       </Route>
     </Switch>
   );

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

@@ -1 +1 @@
-export { default } from './InventoryHosts';
+export { default } from './InventoryHostList';

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

@@ -195,6 +195,7 @@ function InventoryList() {
                 options: [
                   ['', t`Inventory`],
                   ['smart', t`Smart Inventory`],
+                  ['constructed', t`Constructed Inventory`],
                 ],
               },
               {

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

@@ -33,7 +33,7 @@ function InventoryRelatedGroupList() {
   const [isAdHocLaunchLoading, setIsAdHocLaunchLoading] = useState(false);
   const [associateError, setAssociateError] = useState(null);
   const [disassociateError, setDisassociateError] = useState(null);
-  const { id: inventoryId, groupId, inventoryType } = useParams();
+  const { id: inventoryId, groupId } = useParams();
   const location = useLocation();
 
   const {
@@ -69,10 +69,9 @@ function InventoryRelatedGroupList() {
         searchableKeys: getSearchableKeys(actions.data.actions?.GET),
         canAdd:
           actions.data.actions &&
-          Object.prototype.hasOwnProperty.call(actions.data.actions, 'POST') &&
+          Object.prototype.hasOwnProperty.call(actions.data.actions, 'POST'),
-          inventoryType !== 'constructed_inventory',
       };
-    }, [groupId, location.search, inventoryType, inventoryId]),
+    }, [groupId, location.search, inventoryId]),
     {
       groups: [],
       itemCount: 0,

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

@@ -8,13 +8,13 @@ function InventoryRelatedGroups() {
     <Switch>
       <Route
         key="addRelatedGroups"
-        path="/inventories/:inventoryType/:id/groups/:groupId/nested_groups/add"
+        path="/inventories/inventory/:id/groups/:groupId/nested_groups/add"
       >
         <InventoryRelatedGroupAdd />
       </Route>
       <Route
         key="relatedGroups"
-        path="/inventories/:inventoryType/:id/groups/:groupId/nested_groups"
+        path="/inventories/inventory/:id/groups/:groupId/nested_groups"
       >
         <InventoryRelatedGroupList />
       </Route>

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}
               />

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

@@ -1 +0,0 @@
-export { default } from './SmartInventoryHost';

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

@@ -1 +0,0 @@
-export { default } from './SmartInventoryHostDetail';

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;

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

@@ -1 +0,0 @@
-export { default } from './SmartInventoryHosts';