Adds constructed inventory groups and related groups.

Merge pull request #13590 from ansible/constructedInventoryHosts
Constructed inventory hosts
2026-02-04 19:18:13 -03:30 · 2023-02-23 14:03:58 -05:00 · 2023-02-22 11:07:25 -05:00 · 2023-02-22 10:20:45 -05:00 · 2023-02-22 10:01:31 -05:00 · 2023-02-21 17:47:56 -05:00
57 changed files with 1414 additions and 520 deletions
--- a/awx/api/serializers.py
+++ b/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']))
--- a/awx/ui/src/api/models/ConstructedInventories.js
+++ b/awx/ui/src/api/models/ConstructedInventories.js
@@ -7,5 +7,4 @@ class ConstructedInventories extends InstanceGroupsMixin(Base) {
    this.baseUrl = 'api/v2/constructed_inventories/';
  }
 }
-
 export default ConstructedInventories;
--- a/awx/ui/src/api/models/Inventories.js
+++ b/awx/ui/src/api/models/Inventories.js
@@ -13,7 +13,7 @@ class Inventories extends InstanceGroupsMixin(Base) {
    this.readGroups = this.readGroups.bind(this);
    this.readGroupsOptions = this.readGroupsOptions.bind(this);
    this.promoteGroup = this.promoteGroup.bind(this);
-    this.readSourceInventories = this.readSourceInventories.bind(this);
+    this.readInputInventories = this.readInputInventories.bind(this);
  }

  readAccessList(id, params) {
@@ -73,7 +73,7 @@ class Inventories extends InstanceGroupsMixin(Base) {
    });
  }

-  readSourceInventories(inventoryId, params) {
+  readInputInventories(inventoryId, params) {
    return this.http.get(`${this.baseUrl}${inventoryId}/input_inventories/`, {
      params,
    });
--- a/awx/ui/src/screens/Inventory/AdvancedInventoryHost/AdvancedInventoryHost.js
+++ b/awx/ui/src/screens/Inventory/AdvancedInventoryHost/AdvancedInventoryHost.js
@@ -8,11 +8,11 @@ import ContentLoading from 'components/ContentLoading';
 import RoutedTabs from 'components/RoutedTabs';
 import useRequest from 'hooks/useRequest';
 import { InventoriesAPI } from 'api';
-import SmartInventoryHostDetail from '../SmartInventoryHostDetail';
+import AdvancedInventoryHostDetail from '../AdvancedInventoryHostDetail';

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

-  beforeEach(async () => {
+  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 +45,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 +63,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 +71,7 @@ describe('<ConstructedInventory />', () => {
        }
      );
    });
+    await waitForElement(wrapper, 'ContentLoading', (el) => el.length === 0);
    expect(wrapper.find('ContentError').length).toBe(1);
  });
 });
--- a/awx/ui/src/screens/Inventory/ConstructedInventoryDetail/ConstructedInventoryDetail.js
+++ b/awx/ui/src/screens/Inventory/ConstructedInventoryDetail/ConstructedInventoryDetail.js
@@ -5,54 +5,103 @@ import { t } from '@lingui/macro';
 import {
  Button,
  Chip,
+  Label,
+  LabelGroup,
  TextList,
  TextListItem,
  TextListItemVariants,
  TextListVariants,
+  Tooltip,
 } from '@patternfly/react-core';
+import { InventoriesAPI, ConstructedInventoriesAPI } from 'api';
+import { Inventory } from 'types';
+import { formatDateString } from 'util/dates';
+import { relatedResourceDeleteRequests } from 'util/getRelatedResourceDeleteDetails';
+import useRequest, { useDismissableError } from 'hooks/useRequest';
 import AlertModal from 'components/AlertModal';
 import { CardBody, CardActionsRow } from 'components/Card';
-import { DetailList, Detail, UserDateDetail } from 'components/DetailList';
+import ChipGroup from 'components/ChipGroup';
 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 { DetailList, Detail, UserDateDetail } from 'components/DetailList';
+import DeleteButton from 'components/DeleteButton';
+import ErrorDetail from 'components/ErrorDetail';
 import InstanceGroupLabels from 'components/InstanceGroupLabels';
+import JobCancelButton from 'components/JobCancelButton';
+import Popover from 'components/Popover';
+import StatusLabel from 'components/StatusLabel';
+import ConstructedInventorySyncButton from './ConstructedInventorySyncButton';
+import useWsInventorySourcesDetails from '../shared/useWsInventorySourcesDetails';
 import getHelpText from '../shared/Inventory.helptext';

+function JobStatusLabel({ job }) {
+  if (!job) {
+    return null;
+  }
+
+  return (
+    <Tooltip
+      position="top"
+      content={
+        <>
+          <div>{t`MOST RECENT SYNC`}</div>
+          <div>
+            {t`JOB ID:`} {job.id}
+          </div>
+          <div>
+            {t`STATUS:`} {job.status.toUpperCase()}
+          </div>
+          {job.finished && (
+            <div>
+              {t`FINISHED:`} {formatDateString(job.finished)}
+            </div>
+          )}
+        </>
+      }
+      key={job.id}
+    >
+      <Link to={`/jobs/inventory/${job.id}`}>
+        <StatusLabel status={job.status} />
+      </Link>
+    </Tooltip>
+  );
+}
+
 function ConstructedInventoryDetail({ inventory }) {
  const history = useHistory();
  const helpText = getHelpText();

  const {
-    result: { instanceGroups, sourceInventories, actions },
+    result: { instanceGroups, inputInventories, inventorySource, actions },
    request: fetchRelatedDetails,
    error: contentError,
    isLoading,
  } = useRequest(
    useCallback(async () => {
-      const [response, sourceInvResponse, options] = await Promise.all([
+      const [
+        instanceGroupsResponse,
+        inputInventoriesResponse,
+        inventorySourceResponse,
+        optionsResponse,
+      ] = await Promise.all([
        InventoriesAPI.readInstanceGroups(inventory.id),
-        InventoriesAPI.readSourceInventories(inventory.id),
-        ConstructedInventoriesAPI.readOptions(inventory.id),
+        InventoriesAPI.readInputInventories(inventory.id),
+        InventoriesAPI.readSources(inventory.id),
+        ConstructedInventoriesAPI.readOptions(),
      ]);

      return {
-        instanceGroups: response.data.results,
-        sourceInventories: sourceInvResponse.data.results,
-        actions: options.data.actions.GET,
+        instanceGroups: instanceGroupsResponse.data.results,
+        inputInventories: inputInventoriesResponse.data.results,
+        inventorySource: inventorySourceResponse.data.results[0],
+        actions: optionsResponse.data.actions.GET,
      };
    }, [inventory.id]),
    {
      instanceGroups: [],
-      sourceInventories: [],
+      inputInventories: [],
+      inventorySource: {},
      actions: {},
      isLoading: true,
    }
@@ -62,6 +111,16 @@ function ConstructedInventoryDetail({ inventory }) {
    fetchRelatedDetails();
  }, [fetchRelatedDetails]);

+  const wsInventorySource = useWsInventorySourcesDetails(inventorySource);
+  const inventorySourceSyncJob =
+    wsInventorySource.summary_fields?.current_job ||
+    wsInventorySource.summary_fields?.last_job ||
+    null;
+  const wsInventory = {
+    ...inventory,
+    ...wsInventorySource?.summary_fields?.inventory,
+  };
+
  const { request: deleteInventory, error: deleteError } = useRequest(
    useCallback(async () => {
      await InventoriesAPI.destroy(inventory.id);
@@ -71,9 +130,6 @@ function ConstructedInventoryDetail({ inventory }) {

  const { error, dismissError } = useDismissableError(deleteError);

-  const { organization, user_capabilities: userCapabilities } =
-    inventory.summary_fields;
-
  const deleteDetailsRequests =
    relatedResourceDeleteRequests.inventory(inventory);

@@ -93,6 +149,14 @@ function ConstructedInventoryDetail({ inventory }) {
          value={inventory.name}
          dataCy="constructed-inventory-name"
        />
+        <Detail
+          label={t`Last Job Status`}
+          value={
+            inventorySourceSyncJob && (
+              <JobStatusLabel job={inventorySourceSyncJob} />
+            )
+          }
+        />
        <Detail
          label={t`Description`}
          value={inventory.description}
@@ -113,26 +177,28 @@ function ConstructedInventoryDetail({ inventory }) {
          label={t`Organization`}
          dataCy="constructed-inventory-organization"
          value={
-            <Link to={`/organizations/${organization.id}/details`}>
-              {organization.name}
+            <Link
+              to={`/organizations/${inventory.summary_fields?.organization.id}/details`}
+            >
+              {inventory.summary_fields?.organization.name}
            </Link>
          }
        />
        <Detail
          label={actions.total_groups.label}
-          value={inventory.total_groups}
+          value={wsInventory.total_groups}
          helpText={actions.total_groups.help_text}
          dataCy="constructed-inventory-total-groups"
        />
        <Detail
          label={actions.total_hosts.label}
-          value={inventory.total_hosts}
+          value={wsInventory.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}
+          value={wsInventory.total_inventory_sources}
          helpText={actions.total_inventory_sources.help_text}
          dataCy="constructed-inventory-sources"
        />
@@ -144,7 +210,7 @@ function ConstructedInventoryDetail({ inventory }) {
        />
        <Detail
          label={actions.inventory_sources_with_failures.label}
-          value={inventory.inventory_sources_with_failures}
+          value={wsInventory.inventory_sources_with_failures}
          helpText={actions.inventory_sources_with_failures.help_text}
          dataCy="constructed-inventory-sources-with-failures"
        />
@@ -204,26 +270,29 @@ function ConstructedInventoryDetail({ inventory }) {
        />
        <Detail
          fullWidth
-          label={t`Source Inventories`}
+          label={t`Input 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`}
+            <LabelGroup numLabels={5}>
+              {inputInventories?.map((inputInventory) => (
+                <Label
+                  color="blue"
+                  key={inputInventory.id}
+                  render={({ className, content, componentRef }) => (
+                    <Link
+                      className={className}
+                      innerRef={componentRef}
+                      to={`/inventories/inventory/${inputInventory.id}/details`}
+                    >
+                      {content}
+                    </Link>
+                  )}
                >
-                  <Chip key={sourceInventory.id} isReadOnly>
-                    {sourceInventory.name}
-                  </Chip>
-                </Link>
+                  {inputInventory.name}
+                </Label>
              ))}
-            </ChipGroup>
+            </LabelGroup>
          }
-          isEmpty={sourceInventories?.length === 0}
+          isEmpty={inputInventories?.length === 0}
        />
        <VariablesDetail
          label={actions.source_vars.label}
@@ -245,7 +314,7 @@ function ConstructedInventoryDetail({ inventory }) {
        />
      </DetailList>
      <CardActionsRow>
-        {userCapabilities.edit && (
+        {inventory?.summary_fields?.user_capabilities?.edit && (
          <Button
            ouiaId="inventory-detail-edit-button"
            component={Link}
@@ -254,7 +323,21 @@ function ConstructedInventoryDetail({ inventory }) {
            {t`Edit`}
          </Button>
        )}
-        {userCapabilities.delete && (
+        {inventorySource?.summary_fields?.user_capabilities?.start &&
+          (['new', 'running', 'pending', 'waiting'].includes(
+            inventorySourceSyncJob?.status
+          ) ? (
+            <JobCancelButton
+              job={{ id: inventorySourceSyncJob.id, type: 'inventory_update' }}
+              errorTitle={t`Constructed Inventory Source Sync Error`}
+              title={t`Cancel Constructed Inventory Source Sync`}
+              errorMessage={t`Failed to cancel Constructed Inventory Source Sync`}
+              buttonText={t`Cancel Sync`}
+            />
+          ) : (
+            <ConstructedInventorySyncButton inventoryId={inventory.id} />
+          ))}
+        {inventory?.summary_fields?.user_capabilities?.delete && (
          <DeleteButton
            name={inventory.name}
            modalTitle={t`Delete Inventory`}
--- a/awx/ui/src/screens/Inventory/ConstructedInventoryDetail/ConstructedInventoryDetail.test.js
+++ b/awx/ui/src/screens/Inventory/ConstructedInventoryDetail/ConstructedInventoryDetail.test.js
@@ -1,8 +1,17 @@
 import React from 'react';
-import { act } from 'react-dom/test-utils';
-import { InventoriesAPI, CredentialTypesAPI } from 'api';
-
-import { mountWithContexts } from '../../../../testUtils/enzymeHelpers';
+import { Router } from 'react-router-dom';
+import { InventoriesAPI, ConstructedInventoriesAPI } from 'api';
+import {
+  render,
+  screen,
+  waitForElementToBeRemoved,
+} from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { createMemoryHistory } from 'history';
+import { I18nProvider } from '@lingui/react';
+import { i18n } from '@lingui/core';
+import { en } from 'make-plural/plurals';
+import english from '../../../locales/en/messages';
 import ConstructedInventoryDetail from './ConstructedInventoryDetail';

 jest.mock('../../../api');
@@ -30,6 +39,15 @@ const mockInventory = {
      copy: true,
      adhoc: true,
    },
+    labels: {
+      count: 1,
+      results: [
+        {
+          id: 17,
+          name: 'seventeen',
+        },
+      ],
+    },
  },
  created: '2019-10-04T16:56:48.025455Z',
  modified: '2019-10-04T16:56:48.025468Z',
@@ -46,21 +64,187 @@ const mockInventory = {
  total_inventory_sources: 0,
  inventory_sources_with_failures: 0,
  pending_deletion: false,
-  prevent_instance_group_fallback: false,
+  prevent_instance_group_fallback: true,
  update_cache_timeout: 0,
  limit: '',
  verbosity: 1,
+  source_vars:
+    '{\n    "plugin": "constructed",\n    "strict": true,\n    "groups": {\n        "shutdown": "resolved_state == \\"shutdown\\"",\n        "shutdown_in_product_dev": "resolved_state == \\"shutdown\\" and account_alias == \\"product_dev\\""\n    },\n    "compose": {\n        "resolved_state": "state | default(\\"running\\")"\n    }\n}',
 };

 describe('<ConstructedInventoryDetail />', () => {
-  test('initially renders successfully', async () => {
-    let wrapper;
-    await act(async () => {
-      wrapper = mountWithContexts(
-        <ConstructedInventoryDetail inventory={mockInventory} />
-      );
+  const history = createMemoryHistory({
+    initialEntries: ['/inventories/constructed_inventory/1/details'],
+  });
+
+  const Component = (props) => (
+    <I18nProvider i18n={i18n}>
+      <Router history={history}>
+        <ConstructedInventoryDetail inventory={mockInventory} {...props} />
+      </Router>
+    </I18nProvider>
+  );
+
+  beforeEach(() => {
+    i18n.loadLocaleData({ en: { plurals: en } });
+    i18n.load({ en: english });
+    i18n.activate('en');
+
+    InventoriesAPI.readInstanceGroups.mockResolvedValue({
+      data: { results: [] },
    });
-    expect(wrapper.length).toBe(1);
-    expect(wrapper.find('ConstructedInventoryDetail').length).toBe(1);
+    InventoriesAPI.readInputInventories.mockResolvedValue({
+      data: {
+        results: [
+          {
+            id: 123,
+            name: 'input_inventory_123',
+          },
+          {
+            id: 456,
+            name: 'input_inventory_456',
+          },
+        ],
+      },
+    });
+    InventoriesAPI.readSources.mockResolvedValue({
+      data: {
+        results: [
+          {
+            id: 999,
+            type: 'inventory_source',
+            summary_fields: {
+              last_job: {
+                id: 101,
+                name: 'Auto-created source for: Constructed Inv',
+                status: 'successful',
+                finished: '2023-02-02T22:22:22.222220Z',
+              },
+              user_capabilities: {
+                start: true,
+              },
+            },
+          },
+        ],
+      },
+    });
+    ConstructedInventoriesAPI.readOptions.mockResolvedValue({
+      data: {
+        related: {},
+        actions: {
+          GET: {
+            limit: {
+              label: 'Limit',
+              help_text: '',
+            },
+            total_groups: {
+              label: 'Total Groups',
+              help_text: '',
+            },
+            total_hosts: {
+              label: 'Total Hosts',
+              help_text: '',
+            },
+            total_inventory_sources: {
+              label: 'Total inventory sources',
+              help_text: '',
+            },
+            update_cache_timeout: {
+              label: 'Update cache timeout',
+              help_text: '',
+            },
+            inventory_sources_with_failures: {
+              label: 'Inventory sources with failures',
+              help_text: '',
+            },
+            source_vars: {
+              label: 'Source vars',
+              help_text: '',
+            },
+            verbosity: {
+              label: 'Verbosity',
+              help_text: '',
+            },
+            created: {
+              label: 'Created by',
+              help_text: '',
+            },
+            modified: {
+              label: 'Modified by',
+              help_text: '',
+            },
+          },
+        },
+      },
+    });
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test('should render details', async () => {
+    render(<Component />);
+    await waitForElementToBeRemoved(() => screen.getByRole('progressbar'));
+    expect(screen.getByText('Name')).toBeInTheDocument();
+    expect(screen.getByText('Constructed Inv')).toBeInTheDocument();
+    expect(screen.getByText('Last Job Status')).toBeInTheDocument();
+    expect(screen.getByText('Successful')).toBeInTheDocument();
+    expect(screen.getByText('Type')).toBeInTheDocument();
+    expect(screen.getByText('Constructed Inventory')).toBeInTheDocument();
+  });
+
+  test('should render action buttons', async () => {
+    render(<Component />);
+    await waitForElementToBeRemoved(() => screen.getByRole('progressbar'));
+    expect(screen.getByRole('link', { name: 'Edit' })).toHaveAttribute(
+      'href',
+      '/inventories/constructed_inventory/1/edit'
+    );
+    expect(
+      screen.getByRole('button', { name: 'Start inventory source sync' })
+    ).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Delete' })).toBeInTheDocument();
+  });
+
+  test('should show cancel sync button during an inventory source sync running job', async () => {
+    InventoriesAPI.readSources.mockResolvedValue({
+      data: {
+        results: [
+          {
+            id: 999,
+            type: 'inventory_source',
+            summary_fields: {
+              current_job: {
+                id: 111,
+                name: 'Auto-created source for: Constructed Inv',
+                status: 'running',
+              },
+              user_capabilities: {
+                start: true,
+              },
+            },
+          },
+        ],
+      },
+    });
+    render(<Component />);
+    await waitForElementToBeRemoved(() => screen.getByRole('progressbar'));
+    expect(
+      screen.getByRole('button', {
+        name: 'Cancel Constructed Inventory Source Sync',
+      })
+    ).toBeInTheDocument();
+  });
+
+  test('should show error when the api throws while fetching details', async () => {
+    InventoriesAPI.readInputInventories.mockRejectedValueOnce(new Error());
+    render(<Component />);
+    await waitForElementToBeRemoved(() => screen.getByRole('progressbar'));
+    expect(
+      screen.getByText(
+        'There was an error loading this content. Please reload the page.'
+      )
+    ).toBeInTheDocument();
  });
 });
--- a/awx/ui/src/screens/Inventory/ConstructedInventoryDetail/ConstructedInventorySyncButton.js
+++ b/awx/ui/src/screens/Inventory/ConstructedInventoryDetail/ConstructedInventorySyncButton.js
@@ -0,0 +1,59 @@
+import React, { useCallback } from 'react';
+import { t } from '@lingui/macro';
+import PropTypes from 'prop-types';
+import { Button, Tooltip } from '@patternfly/react-core';
+import useRequest, { useDismissableError } from 'hooks/useRequest';
+import AlertModal from 'components/AlertModal/AlertModal';
+import ErrorDetail from 'components/ErrorDetail/ErrorDetail';
+import { InventoriesAPI } from 'api';
+
+function ConstructedInventorySyncButton({ inventoryId }) {
+  const testId = `constructed-inventory-${inventoryId}-sync`;
+  const {
+    isLoading: startSyncLoading,
+    error: startSyncError,
+    request: startSyncProcess,
+  } = useRequest(
+    useCallback(
+      async () => InventoriesAPI.syncAllSources(inventoryId),
+      [inventoryId]
+    ),
+    {}
+  );
+
+  const { error: startError, dismissError: dismissStartError } =
+    useDismissableError(startSyncError);
+
+  return (
+    <>
+      <Tooltip content={t`Start sync process`} position="top">
+        <Button
+          ouiaId={testId}
+          isDisabled={startSyncLoading}
+          aria-label={t`Start inventory source sync`}
+          variant="secondary"
+          onClick={startSyncProcess}
+        >
+          {t`Sync`}
+        </Button>
+      </Tooltip>
+      {startError && (
+        <AlertModal
+          isOpen={startError}
+          variant="error"
+          title={t`Error!`}
+          onClose={dismissStartError}
+        >
+          {t`Failed to sync constructed inventory source`}
+          <ErrorDetail error={startError} />
+        </AlertModal>
+      )}
+    </>
+  );
+}
+
+ConstructedInventorySyncButton.propTypes = {
+  inventoryId: PropTypes.number.isRequired,
+};
+
+export default ConstructedInventorySyncButton;
--- a/awx/ui/src/screens/Inventory/ConstructedInventoryDetail/ConstructedInventorySyncButton.test.js
+++ b/awx/ui/src/screens/Inventory/ConstructedInventoryDetail/ConstructedInventorySyncButton.test.js
@@ -0,0 +1,41 @@
+import React from 'react';
+import { InventoriesAPI } from 'api';
+import ConstructedInventorySyncButton from './ConstructedInventorySyncButton';
+import { render, fireEvent, screen, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+jest.mock('../../../api');
+
+const inventory = { id: 100, name: 'Constructed Inventory' };
+
+describe('<ConstructedInventorySyncButton />', () => {
+  const Component = () => (
+    <ConstructedInventorySyncButton inventoryId={inventory.id} />
+  );
+
+  test('should render start sync button', () => {
+    render(<Component />);
+    expect(
+      screen.getByRole('button', { name: 'Start inventory source sync' })
+    ).toBeInTheDocument();
+  });
+
+  test('should make expected api request on sync', async () => {
+    render(<Component />);
+    const syncButton = screen.queryByText('Sync');
+    fireEvent.click(syncButton);
+    await waitFor(() =>
+      expect(InventoriesAPI.syncAllSources).toHaveBeenCalledWith(100)
+    );
+  });
+
+  test('should show alert modal on throw', async () => {
+    InventoriesAPI.syncAllSources.mockRejectedValueOnce(new Error());
+    render(<Component />);
+    await waitFor(() => {
+      const syncButton = screen.queryByText('Sync');
+      fireEvent.click(syncButton);
+    });
+    expect(screen.getByRole('dialog', { name: 'Alert modal Error!' }));
+  });
+});
--- a/awx/ui/src/screens/Inventory/ConstructedInventoryGroups/ConstructedInventoryGroups.js
+++ b/awx/ui/src/screens/Inventory/ConstructedInventoryGroups/ConstructedInventoryGroups.js
@@ -1,13 +0,0 @@
-/* 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;
--- a/awx/ui/src/screens/Inventory/ConstructedInventoryGroups/ConstructedInventoryGroups.test.js
+++ b/awx/ui/src/screens/Inventory/ConstructedInventoryGroups/ConstructedInventoryGroups.test.js
@@ -1,15 +0,0 @@
-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);
-  });
-});
--- a/awx/ui/src/screens/Inventory/ConstructedInventoryGroups/index.js
+++ b/awx/ui/src/screens/Inventory/ConstructedInventoryGroups/index.js
@@ -1 +0,0 @@
-export { default } from './ConstructedInventoryGroups';
--- a/awx/ui/src/screens/Inventory/ConstructedInventoryHosts/ConstructedInventoryHosts.js
+++ b/awx/ui/src/screens/Inventory/ConstructedInventoryHosts/ConstructedInventoryHosts.js
@@ -1,13 +0,0 @@
-/* eslint i18next/no-literal-string: "off" */
-import React from 'react';
-import { CardBody } from 'components/Card';
-
-function ConstructedInventoryHosts() {
-  return (
-    <CardBody>
-      <div>Coming Soon!</div>
-    </CardBody>
-  );
-}
-
-export default ConstructedInventoryHosts;
--- a/awx/ui/src/screens/Inventory/ConstructedInventoryHosts/ConstructedInventoryHosts.test.js
+++ b/awx/ui/src/screens/Inventory/ConstructedInventoryHosts/ConstructedInventoryHosts.test.js
@@ -1,15 +0,0 @@
-import React from 'react';
-import { act } from 'react-dom/test-utils';
-import { mountWithContexts } from '../../../../testUtils/enzymeHelpers';
-import ConstructedInventoryHosts from './ConstructedInventoryHosts';
-
-describe('<ConstructedInventoryHosts />', () => {
-  test('initially renders successfully', async () => {
-    let wrapper;
-    await act(async () => {
-      wrapper = mountWithContexts(<ConstructedInventoryHosts />);
-    });
-    expect(wrapper.length).toBe(1);
-    expect(wrapper.find('ConstructedInventoryHosts').length).toBe(1);
-  });
-});
--- a/awx/ui/src/screens/Inventory/ConstructedInventoryHosts/index.js
+++ b/awx/ui/src/screens/Inventory/ConstructedInventoryHosts/index.js
@@ -1 +0,0 @@
-export { default } from './ConstructedInventoryHosts';
--- a/awx/ui/src/screens/Inventory/InventoryGroup/InventoryGroup.js
+++ b/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 } = useParams();
+  const { id: inventoryId, groupId, inventoryType } = useParams();
  const location = useLocation();

  useEffect(() => {
@@ -50,22 +50,22 @@ function InventoryGroup({ setBreadcrumb, inventory }) {
          {t`Back to Groups`}
        </>
      ),
-      link: `/inventories/inventory/${inventory.id}/groups`,
+      link: `/inventories/${inventoryType}/${inventoryId}/groups`,
      id: 99,
    },
    {
      name: t`Details`,
-      link: `/inventories/inventory/${inventory.id}/groups/${inventoryGroup?.id}/details`,
+      link: `/inventories/${inventoryType}/${inventoryId}/groups/${inventoryGroup?.id}/details`,
      id: 0,
    },
    {
      name: t`Related Groups`,
-      link: `/inventories/inventory/${inventory.id}/groups/${inventoryGroup?.id}/nested_groups`,
+      link: `/inventories/${inventoryType}/${inventoryId}/groups/${inventoryGroup?.id}/nested_groups`,
      id: 1,
    },
    {
      name: t`Hosts`,
-      link: `/inventories/inventory/${inventory.id}/groups/${inventoryGroup?.id}/nested_hosts`,
+      link: `/inventories/${inventoryType}/${inventoryId}/groups/${inventoryGroup?.id}/nested_hosts`,
      id: 2,
    },
  ];
@@ -105,32 +105,32 @@ function InventoryGroup({ setBreadcrumb, inventory }) {
      {showCardHeader && <RoutedTabs tabsArray={tabsArray} />}
      <Switch>
        <Redirect
-          from="/inventories/inventory/:id/groups/:groupId"
-          to="/inventories/inventory/:id/groups/:groupId/details"
+          from="/inventories/:inventoryType/:id/groups/:groupId"
+          to="/inventories/:inventoryType/:id/groups/:groupId/details"
          exact
        />
        {inventoryGroup && [
          <Route
            key="edit"
-            path="/inventories/inventory/:id/groups/:groupId/edit"
+            path="/inventories/:inventoryType/:id/groups/:groupId/edit"
          >
            <InventoryGroupEdit inventoryGroup={inventoryGroup} />
          </Route>,
          <Route
            key="details"
-            path="/inventories/inventory/:id/groups/:groupId/details"
+            path="/inventories/:inventoryType/:id/groups/:groupId/details"
          >
            <InventoryGroupDetail inventoryGroup={inventoryGroup} />
          </Route>,
          <Route
            key="hosts"
-            path="/inventories/inventory/:id/groups/:groupId/nested_hosts"
+            path="/inventories/:inventoryType/:id/groups/:groupId/nested_hosts"
          >
            <InventoryGroupHosts inventoryGroup={inventoryGroup} />
          </Route>,
          <Route
            key="relatedGroups"
-            path="/inventories/inventory/:id/groups/:groupId/nested_groups"
+            path="/inventories/:inventoryType/: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/inventory/${inventory.id}/details`}>
+              <Link to={`/inventories/:inventoryType/${inventory.id}/details`}>
                {t`View Inventory Details`}
              </Link>
            )}
--- a/awx/ui/src/screens/Inventory/InventoryGroup/InventoryGroup.test.js
+++ b/awx/ui/src/screens/Inventory/InventoryGroup/InventoryGroup.test.js
@@ -11,15 +11,16 @@ import {
 import InventoryGroup from './InventoryGroup';

 jest.mock('../../../api');
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
-  useParams: () => ({
-    id: 1,
-    groupId: 2,
-  }),
-}));
-
 describe('<InventoryGroup />', () => {
+  jest.mock('react-router-dom', () => ({
+    ...jest.requireActual('react-router-dom'),
+    useParams: () => ({
+      id: 1,
+      groupId: 1,
+      inventoryType: 'inventory',
+    }),
+  }));
+
  let wrapper;
  let history;
  const inventory = { id: 1, name: 'Foo' };
@@ -41,11 +42,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/inventory/:id/groups">
+        <Route path="/inventories/:inventoryType/:id/groups">
          <InventoryGroup setBreadcrumb={() => {}} inventory={inventory} />
        </Route>,
        { context: { router: { history } } }
@@ -63,7 +64,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');
@@ -71,7 +72,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(
@@ -92,3 +93,60 @@ 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', () => {
+    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');
+  });
+});
--- a/awx/ui/src/screens/Inventory/InventoryGroupDetail/InventoryGroupDetail.js
+++ b/awx/ui/src/screens/Inventory/InventoryGroupDetail/InventoryGroupDetail.js
@@ -1,9 +1,8 @@
 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';
@@ -12,6 +11,7 @@ import { DetailList, Detail, UserDateDetail } from 'components/DetailList';
 import InventoryGroupsDeleteModal from '../shared/InventoryGroupsDeleteModal';

 function InventoryGroupDetail({ inventoryGroup }) {
+  const { inventoryType, id, groupId } = useParams();
  const {
    summary_fields: { created_by, modified_by, user_capabilities },
    created,
@@ -22,7 +22,6 @@ function InventoryGroupDetail({ inventoryGroup }) {
  } = inventoryGroup;
  const [error, setError] = useState(false);
  const history = useHistory();
-  const params = useParams();

  return (
    <CardBody>
@@ -47,31 +46,33 @@ function InventoryGroupDetail({ inventoryGroup }) {
          user={modified_by}
        />
      </DetailList>
-      <CardActionsRow>
-        {user_capabilities?.edit && (
-          <Button
-            ouiaId="inventory-group-detail-edit-button"
-            variant="primary"
-            aria-label={t`Edit`}
-            onClick={() =>
-              history.push(
-                `/inventories/inventory/${params.id}/groups/${params.groupId}/edit`
-              )
-            }
-          >
-            {t`Edit`}
-          </Button>
-        )}
-        {user_capabilities?.delete && (
-          <InventoryGroupsDeleteModal
-            groups={[inventoryGroup]}
-            isDisabled={false}
-            onAfterDelete={() =>
-              history.push(`/inventories/inventory/${params.id}/groups`)
-            }
-          />
-        )}
-      </CardActionsRow>
+      {inventoryType !== 'constructed_inventory' && (
+        <CardActionsRow>
+          {user_capabilities?.edit && (
+            <Button
+              ouiaId="inventory-group-detail-edit-button"
+              variant="primary"
+              aria-label={t`Edit`}
+              onClick={() =>
+                history.push(
+                  `/inventories/inventory/${id}/groups/${groupId}/edit`
+                )
+              }
+            >
+              {t`Edit`}
+            </Button>
+          )}
+          {user_capabilities?.delete && (
+            <InventoryGroupsDeleteModal
+              groups={[inventoryGroup]}
+              isDisabled={false}
+              onAfterDelete={() =>
+                history.push(`/inventories/inventory/${id}/groups`)
+              }
+            />
+          )}
+        </CardActionsRow>
+      )}
      {error && (
        <AlertModal
          variant="error"
--- a/awx/ui/src/screens/Inventory/InventoryGroupDetail/InventoryGroupDetail.test.js
+++ b/awx/ui/src/screens/Inventory/InventoryGroupDetail/InventoryGroupDetail.test.js
@@ -39,6 +39,14 @@ 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({
@@ -116,6 +124,14 @@ 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,
@@ -159,4 +175,48 @@ 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);
+    });
+  });
 });
--- a/awx/ui/src/screens/Inventory/InventoryGroupHosts/InventoryGroupHostList.js
+++ b/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 } = useParams();
+  const { id: inventoryId, groupId, inventoryType } = useParams();
  const location = useLocation();

  const {
@@ -145,9 +145,11 @@ function InventoryGroupHostList() {
    useDismissableError(associateErr);
  const { error: disassociateError, dismissError: dismissDisassociateError } =
    useDismissableError(disassociateErr);
-
+  const isNotConstructedInventory = inventoryType !== 'constructed_inventory';
  const canAdd =
-    actions && Object.prototype.hasOwnProperty.call(actions, 'POST');
+    actions &&
+    Object.prototype.hasOwnProperty.call(actions, 'POST') &&
+    isNotConstructedInventory;
  const addFormUrl = `/inventories/inventory/${inventoryId}/groups/${groupId}/nested_hosts/add`;
  const addExistingHost = t`Add existing host`;
  const addNewHost = t`Add new host`;
@@ -240,17 +242,21 @@ function InventoryGroupHostList() {
                    />,
                  ]
                : []),
-              <DisassociateButton
-                key="disassociate"
-                onDisassociate={handleDisassociate}
-                itemsToDisassociate={selected}
-                modalTitle={t`Disassociate host from group?`}
-                modalNote={t`
+              ...(isNotConstructedInventory
+                ? [
+                    <DisassociateButton
+                      key="disassociate"
+                      onDisassociate={handleDisassociate}
+                      itemsToDisassociate={selected}
+                      modalTitle={t`Disassociate host from group?`}
+                      modalNote={t`
                        Note that only hosts directly in this group can
                        be disassociated. Hosts in sub-groups must be disassociated
                        directly from the sub-group level that they belong.
                      `}
-              />,
+                    />,
+                  ]
+                : []),
            ]}
          />
        )}
@@ -259,8 +265,8 @@ function InventoryGroupHostList() {
            key={host.id}
            rowIndex={index}
            host={host}
-            detailUrl={`/inventories/inventory/${inventoryId}/hosts/${host.id}/details`}
-            editUrl={`/inventories/inventory/${inventoryId}/hosts/${host.id}/edit`}
+            detailUrl={`/inventories/${inventoryType}/${inventoryId}/hosts/${host.id}/details`}
+            editUrl={`/inventories/${inventoryType}/${inventoryId}/hosts/${host.id}/edit`}
            isSelected={selected.some((row) => row.id === host.id)}
            onSelect={() => handleSelect(host)}
          />
--- a/awx/ui/src/screens/Inventory/InventoryGroupHosts/InventoryGroupHostList.test.js
+++ b/awx/ui/src/screens/Inventory/InventoryGroupHosts/InventoryGroupHostList.test.js
@@ -8,19 +8,20 @@ import {
 } from '../../../../testUtils/enzymeHelpers';
 import InventoryGroupHostList from './InventoryGroupHostList';
 import mockHosts from '../shared/data.hosts.json';
+import { Route } from 'react-router-dom';

 jest.mock('../../../api/models/Groups');
 jest.mock('../../../api/models/Inventories');
 jest.mock('../../../api/models/CredentialTypes');
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
-  useParams: () => ({
-    id: 1,
-    groupId: 2,
-  }),
-}));

 describe('<InventoryGroupHostList />', () => {
+  jest.mock('react-router-dom', () => ({
+    ...jest.requireActual('react-router-dom'),
+    useParams: () => ({
+      id: 1,
+      groupId: 2,
+    }),
+  }));
  let wrapper;

  beforeEach(async () => {
@@ -303,3 +304,64 @@ describe('<InventoryGroupHostList />', () => {
    expect(wrapper.find('AdHocCommands')).toHaveLength(0);
  });
 });
+
+describe('<InventoryGroupHostList> for constructed inventories', () => {
+  jest.mock('react-router-dom', () => ({
+    ...jest.requireActual('react-router-dom'),
+    useParams: () => ({
+      id: 1,
+      groupId: 2,
+      inventoryType: 'constructed_inventory',
+    }),
+  }));
+  let wrapper;
+
+  beforeEach(async () => {
+    GroupsAPI.readAllHosts.mockResolvedValue({
+      data: { ...mockHosts },
+    });
+    InventoriesAPI.readHostsOptions.mockResolvedValue({
+      data: {
+        actions: {
+          GET: {},
+          POST: {},
+        },
+      },
+    });
+    InventoriesAPI.readAdHocOptions.mockResolvedValue({
+      data: {
+        actions: {
+          GET: {
+            module_name: {
+              choices: [
+                ['command', 'command'],
+                ['shell', 'shell'],
+              ],
+            },
+          },
+          POST: {},
+        },
+      },
+    });
+    const history = createMemoryHistory({
+      initialEntries: ['/inventories/constructed_inventory/1/groups/2/hosts'],
+    });
+    await act(async () => {
+      wrapper = mountWithContexts(
+        <Route path="/inventories/:inventoryType/:id/groups/:groupId/hosts">
+          <InventoryGroupHostList />
+        </Route>,
+        { context: { router: { history } } }
+      );
+    });
+    await waitForElement(wrapper, 'ContentLoading', (el) => el.length === 0);
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+  test('Should not show associate, or disassociate button', async () => {
+    expect(wrapper.find('AddDropDownButton').length).toBe(0);
+    expect(wrapper.find('DisassociateButton').length).toBe(0);
+  });
+});
--- a/awx/ui/src/screens/Inventory/InventoryGroupHosts/InventoryGroupHostListItem.js
+++ b/awx/ui/src/screens/Inventory/InventoryGroupHosts/InventoryGroupHostListItem.js
@@ -1,6 +1,6 @@
 import 'styled-components/macro';
 import React from 'react';
-import { Link } from 'react-router-dom';
+import { Link, useParams } from 'react-router-dom';
 import { string, bool, func, number } from 'prop-types';
 import { t } from '@lingui/macro';
 import { Button, Tooltip } from '@patternfly/react-core';
@@ -24,7 +24,7 @@ function InventoryGroupHostListItem({
    ...job,
    type: 'job',
  }));
-
+  const { inventoryType } = useParams();
  const labelId = `check-action-${host.id}`;

  return (
@@ -57,22 +57,24 @@ function InventoryGroupHostListItem({
        >
          <HostToggle host={host} />
        </ActionItem>
-        <ActionItem
-          tooltip={t`Edit Host`}
-          visible={host.summary_fields.user_capabilities?.edit}
-        >
-          <Tooltip content={t`Edit Host`} position="top">
-            <Button
-              ouiaId={`${host.id}-edit-button`}
-              aria-label={t`Edit Host`}
-              variant="plain"
-              component={Link}
-              to={`${editUrl}`}
-            >
-              <PencilAltIcon />
-            </Button>
-          </Tooltip>
-        </ActionItem>
+        {inventoryType !== 'constructed_inventory' && (
+          <ActionItem
+            tooltip={t`Edit Host`}
+            visible={host.summary_fields.user_capabilities?.edit}
+          >
+            <Tooltip content={t`Edit Host`} position="top">
+              <Button
+                ouiaId={`${host.id}-edit-button`}
+                aria-label={t`Edit Host`}
+                variant="plain"
+                component={Link}
+                to={`${editUrl}`}
+              >
+                <PencilAltIcon />
+              </Button>
+            </Tooltip>
+          </ActionItem>
+        )}
      </ActionsTd>
    </Tr>
  );
--- a/awx/ui/src/screens/Inventory/InventoryGroupHosts/InventoryGroupHostListItem.test.js
+++ b/awx/ui/src/screens/Inventory/InventoryGroupHosts/InventoryGroupHostListItem.test.js
@@ -1,28 +1,35 @@
 import React from 'react';
+import { createMemoryHistory } from 'history';
 import { mountWithContexts } from '../../../../testUtils/enzymeHelpers';
 import InventoryGroupHostListItem from './InventoryGroupHostListItem';
 import mockHosts from '../shared/data.hosts.json';
+import { Route } from 'react-router-dom';

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

 describe('<InventoryGroupHostListItem />', () => {
  let wrapper;
  const mockHost = mockHosts.results[0];
-
+  const history = createMemoryHistory({
+    initialEntries: ['/inventories/inventory/1/groups/2/hosts'],
+  });
  beforeEach(() => {
    wrapper = mountWithContexts(
-      <table>
-        <tbody>
-          <InventoryGroupHostListItem
-            detailUrl="/host/1"
-            editUrl="/host/1"
-            host={mockHost}
-            isSelected={false}
-            onSelect={() => {}}
-            rowIndex={0}
-          />
-        </tbody>
-      </table>
+      <Route path="/inventories/:inventoryType/:id/groups/:groupId/hosts">
+        <table>
+          <tbody>
+            <InventoryGroupHostListItem
+              detailUrl="/host/1"
+              editUrl="/host/1"
+              host={mockHost}
+              isSelected={false}
+              onSelect={() => {}}
+              rowIndex={0}
+            />
+          </tbody>
+        </table>
+      </Route>,
+      { context: { router: { history } } }
    );
  });

@@ -52,19 +59,60 @@ describe('<InventoryGroupHostListItem />', () => {
    const copyMockHost = { ...mockHost };
    copyMockHost.summary_fields.user_capabilities.edit = false;
    wrapper = mountWithContexts(
-      <table>
-        <tbody>
-          <InventoryGroupHostListItem
-            detailUrl="/host/1"
-            editUrl="/host/1"
-            host={mockHost}
-            isSelected={false}
-            onSelect={() => {}}
-            rowIndex={0}
-          />
-        </tbody>
-      </table>
+      <Route path="/inventories/:inventoryType/:id/groups/:groupId/hosts">
+        <table>
+          <tbody>
+            <InventoryGroupHostListItem
+              detailUrl="/host/1"
+              editUrl="/host/1"
+              host={mockHost}
+              isSelected={false}
+              onSelect={() => {}}
+              rowIndex={0}
+            />
+          </tbody>
+        </table>
+      </Route>,
+      { context: { router: { history } } }
    );
    expect(wrapper.find('PencilAltIcon').exists()).toBeFalsy();
  });
 });
+
+describe('<InventoryGroupHostListItem> inside constructed inventories', () => {
+  jest.mock('react-router-dom', () => ({
+    ...jest.requireActual('react-router-dom'),
+    useParams: () => ({
+      id: 1,
+      groupId: 2,
+      inventoryType: 'constructed_inventory',
+    }),
+  }));
+  let wrapper;
+  const mockHost = mockHosts.results[0];
+  const history = createMemoryHistory({
+    initialEntries: ['/inventories/constructed_inventory/1/groups/2/hosts'],
+  });
+  beforeEach(() => {
+    wrapper = mountWithContexts(
+      <Route path="/inventories/:inventoryType/:id/groups/:groupId/hosts">
+        <table>
+          <tbody>
+            <InventoryGroupHostListItem
+              detailUrl="/host/1"
+              editUrl="/host/1"
+              host={mockHost}
+              isSelected={false}
+              onSelect={() => {}}
+              rowIndex={0}
+            />
+          </tbody>
+        </table>
+      </Route>,
+      { context: { router: { history } } }
+    );
+  });
+  test('Edit button hidden for constructed inventory', () => {
+    expect(wrapper.find('PencilAltIcon').exists()).toBeFalsy();
+  });
+});
--- a/awx/ui/src/screens/Inventory/InventoryGroupHosts/InventoryGroupHosts.js
+++ b/awx/ui/src/screens/Inventory/InventoryGroupHosts/InventoryGroupHosts.js
@@ -9,7 +9,7 @@ function InventoryGroupHosts({ inventoryGroup }) {
      <Route path="/inventories/inventory/:id/groups/:groupId/nested_hosts/add">
        <InventoryGroupHostAdd inventoryGroup={inventoryGroup} />
      </Route>
-      <Route path="/inventories/inventory/:id/groups/:groupId/nested_hosts">
+      <Route path="/inventories/:inventoryType/:id/groups/:groupId/nested_hosts">
        <InventoryGroupHostList />
      </Route>
    </Switch>
--- a/awx/ui/src/screens/Inventory/InventoryGroups/InventoryGroupItem.js
+++ b/awx/ui/src/screens/Inventory/InventoryGroups/InventoryGroupItem.js
@@ -1,25 +1,20 @@
 import React from 'react';
-import { bool, func, number, oneOfType, string } from 'prop-types';
+import { bool, func } from 'prop-types';
 import { t } from '@lingui/macro';

 import { Button } from '@patternfly/react-core';
 import { Tr, Td } from '@patternfly/react-table';

-import { Link } from 'react-router-dom';
+import { Link, useParams } from 'react-router-dom';
 import { PencilAltIcon } from '@patternfly/react-icons';
 import { ActionsTd, ActionItem } from 'components/PaginatedTable';
 import { Group } from 'types';

-function InventoryGroupItem({
-  group,
-  inventoryId,
-  isSelected,
-  onSelect,
-  rowIndex,
-}) {
+function InventoryGroupItem({ group, isSelected, onSelect, rowIndex }) {
+  const { id: inventoryId, inventoryType } = useParams();
  const labelId = `check-action-${group.id}`;
-  const detailUrl = `/inventories/inventory/${inventoryId}/groups/${group.id}/details`;
-  const editUrl = `/inventories/inventory/${inventoryId}/groups/${group.id}/edit`;
+  const detailUrl = `/inventories/${inventoryType}/${inventoryId}/groups/${group.id}/details`;
+  const editUrl = `/inventories/${inventoryType}/${inventoryId}/groups/${group.id}/edit`;

  return (
    <Tr id={`group-row-${group.id}`} ouiaId={`group-row-${group.id}`}>
@@ -36,29 +31,30 @@ function InventoryGroupItem({
          <b>{group.name}</b>
        </Link>
      </Td>
-      <ActionsTd dataLabel={t`Actions`} gridColumns="auto 40px">
-        <ActionItem
-          visible={group.summary_fields.user_capabilities.edit}
-          tooltip={t`Edit group`}
-        >
-          <Button
-            ouiaId={`${group.id}-edit-button`}
-            aria-label={t`Edit Group`}
-            variant="plain"
-            component={Link}
-            to={editUrl}
+      {inventoryType !== 'constructed_inventory' && (
+        <ActionsTd dataLabel={t`Actions`} gridColumns="auto 40px">
+          <ActionItem
+            visible={group.summary_fields.user_capabilities.edit}
+            tooltip={t`Edit group`}
          >
-            <PencilAltIcon />
-          </Button>
-        </ActionItem>
-      </ActionsTd>
+            <Button
+              ouiaId={`${group.id}-edit-button`}
+              aria-label={t`Edit Group`}
+              variant="plain"
+              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,
 };
--- a/awx/ui/src/screens/Inventory/InventoryGroups/InventoryGroupItem.test.js
+++ b/awx/ui/src/screens/Inventory/InventoryGroups/InventoryGroupItem.test.js
@@ -1,4 +1,6 @@
 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';

@@ -57,4 +59,39 @@ 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();
+  });
 });
--- a/awx/ui/src/screens/Inventory/InventoryGroups/InventoryGroups.js
+++ b/awx/ui/src/screens/Inventory/InventoryGroups/InventoryGroups.js
@@ -16,11 +16,14 @@ function InventoryGroups({ setBreadcrumb, inventory }) {
          inventory={inventory}
        />
      </Route>
-      <Route key="details" path="/inventories/inventory/:id/groups/:groupId/">
+      <Route
+        key="details"
+        path="/inventories/:inventoryType/:id/groups/:groupId/"
+      >
        <InventoryGroup inventory={inventory} setBreadcrumb={setBreadcrumb} />
      </Route>
-      <Route key="list" path="/inventories/inventory/:id/groups">
-        <InventoryGroupsList />
+      <Route key="list" path="/inventories/:inventoryType/:id/groups">
+        <InventoryGroupsList inventory={inventory} />
      </Route>
    </Switch>
  );
--- a/awx/ui/src/screens/Inventory/InventoryGroups/InventoryGroupsList.js
+++ b/awx/ui/src/screens/Inventory/InventoryGroups/InventoryGroupsList.js
@@ -29,7 +29,7 @@ function cannotDelete(item) {

 function InventoryGroupsList() {
  const location = useLocation();
-  const { id: inventoryId } = useParams();
+  const { id: inventoryId, inventoryType } = useParams();
  const [isAdHocLaunchLoading, setIsAdHocLaunchLoading] = useState(false);

  const {
@@ -102,9 +102,11 @@ function InventoryGroupsList() {
    }
    return t`Select a row to delete`;
  };
-
+  const isNotConstructedInventory = inventoryType !== 'constructed_inventory';
  const canAdd =
-    actions && Object.prototype.hasOwnProperty.call(actions, 'POST');
+    actions &&
+    Object.prototype.hasOwnProperty.call(actions, 'POST') &&
+    isNotConstructedInventory;

  return (
    <PaginatedTable
@@ -139,14 +141,13 @@ function InventoryGroupsList() {
      headerRow={
        <HeaderRow qsConfig={QS_CONFIG}>
          <HeaderCell sortKey="name">{t`Name`}</HeaderCell>
-          <HeaderCell>{t`Actions`}</HeaderCell>
+          {isNotConstructedInventory && <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}
@@ -177,20 +178,28 @@ function InventoryGroupsList() {
                  />,
                ]
              : []),
-            <Tooltip content={renderTooltip()} position="top" key="delete">
-              <div>
-                <InventoryGroupsDeleteModal
-                  groups={selected}
-                  isDisabled={
-                    selected.length === 0 || selected.some(cannotDelete)
-                  }
-                  onAfterDelete={() => {
-                    fetchData();
-                    clearSelected();
-                  }}
-                />
-              </div>
-            </Tooltip>,
+            ...(isNotConstructedInventory
+              ? [
+                  <Tooltip
+                    content={renderTooltip()}
+                    position="top"
+                    key="delete"
+                  >
+                    <div>
+                      <InventoryGroupsDeleteModal
+                        groups={selected}
+                        isDisabled={
+                          selected.length === 0 || selected.some(cannotDelete)
+                        }
+                        onAfterDelete={() => {
+                          fetchData();
+                          clearSelected();
+                        }}
+                      />
+                    </div>
+                  </Tooltip>,
+                ]
+              : []),
          ]}
        />
      )}
--- a/awx/ui/src/screens/Inventory/InventoryGroups/InventoryGroupsList.test.js
+++ b/awx/ui/src/screens/Inventory/InventoryGroups/InventoryGroupsList.test.js
@@ -10,12 +10,6 @@ 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,
@@ -60,7 +54,14 @@ 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: {
@@ -96,7 +97,7 @@ describe('<InventoryGroupsList />', () => {
    });
    await act(async () => {
      wrapper = mountWithContexts(
-        <Route path="/inventories/inventory/:id/groups">
+        <Route path="/inventories/:inventoryType/:id/groups">
          <InventoryGroupsList />
        </Route>,
        {
@@ -316,3 +317,77 @@ describe('<InventoryGroupsList/> error handling', () => {
    });
  });
 });
+
+describe('Constructed Inventory group', () => {
+  let wrapper;
+  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: {},
+        },
+      },
+    });
+    const 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);
+  });
+});
--- a/awx/ui/src/screens/Inventory/InventoryList/InventoryList.js
+++ b/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`],
                ],
              },
              {
--- a/awx/ui/src/screens/Inventory/InventoryRelatedGroups/InventoryRelatedGroupList.js
+++ b/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 } = useParams();
+  const { id: inventoryId, groupId, inventoryType } = useParams();
  const location = useLocation();

  const {
@@ -69,9 +69,10 @@ 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, inventoryId]),
+    }, [groupId, location.search, inventoryType, inventoryId]),
    {
      groups: [],
      itemCount: 0,
@@ -164,7 +165,7 @@ function InventoryRelatedGroupList() {
      ]}
    />
  );
-
+  const isNotConstructedInventory = inventoryType !== 'constructed_inventory';
  return (
    <>
      <PaginatedTable
@@ -218,19 +219,23 @@ function InventoryRelatedGroupList() {
                    />,
                  ]
                : []),
-              <DisassociateButton
-                key="disassociate"
-                onDisassociate={disassociateGroups}
-                itemsToDisassociate={selected}
-                modalTitle={t`Disassociate related group(s)?`}
-              />,
+              ...(isNotConstructedInventory
+                ? [
+                    <DisassociateButton
+                      key="disassociate"
+                      onDisassociate={disassociateGroups}
+                      itemsToDisassociate={selected}
+                      modalTitle={t`Disassociate related group(s)?`}
+                    />,
+                  ]
+                : []),
            ]}
          />
        )}
        headerRow={
          <HeaderRow qsConfig={QS_CONFIG}>
            <HeaderCell sortKey="name">{t`Name`}</HeaderCell>
-            <HeaderCell>{t`Actions`}</HeaderCell>
+            {isNotConstructedInventory && <HeaderCell>{t`Actions`}</HeaderCell>}
          </HeaderRow>
        }
        renderRow={(group, index) => (
--- a/awx/ui/src/screens/Inventory/InventoryRelatedGroups/InventoryRelatedGroupList.test.js
+++ b/awx/ui/src/screens/Inventory/InventoryRelatedGroups/InventoryRelatedGroupList.test.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import { act } from 'react-dom/test-utils';
-
+import { createMemoryHistory } from 'history';
+import { Route } from 'react-router-dom';
 import { GroupsAPI, InventoriesAPI } from 'api';
 import {
  mountWithContexts,
@@ -13,14 +14,6 @@ jest.mock('../../../api/models/Groups');
 jest.mock('../../../api/models/Inventories');
 jest.mock('../../../api/models/CredentialTypes');

-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
-  useParams: () => ({
-    id: 1,
-    groupId: 2,
-  }),
-}));
-
 const mockGroups = [
  {
    id: 1,
@@ -65,6 +58,14 @@ const mockGroups = [

 describe('<InventoryRelatedGroupList />', () => {
  let wrapper;
+  jest.mock('react-router-dom', () => ({
+    ...jest.requireActual('react-router-dom'),
+    useParams: () => ({
+      id: 2,
+      groupId: 2,
+      inventoryType: 'inventory',
+    }),
+  }));

  beforeEach(async () => {
    GroupsAPI.readChildren.mockResolvedValue({
@@ -210,11 +211,22 @@ describe('<InventoryRelatedGroupList />', () => {
    GroupsAPI.readPotentialGroups.mockResolvedValue({
      data: { count: mockGroups.length, results: mockGroups },
    });
-    await act(async () => {
-      wrapper = mountWithContexts(<InventoryRelatedGroupList />);
+    const history = createMemoryHistory({
+      initialEntries: ['/inventories/inventory/2/groups/2/nested_groups'],
    });
-    await waitForElement(wrapper, 'ContentLoading', (el) => el.length === 0);
-
+    await act(async () => {
+      wrapper = mountWithContexts(
+        <Route path="/inventories/:inventoryType/:id/groups/:groupId/nested_groups">
+          <InventoryRelatedGroupList />
+        </Route>,
+        { context: { router: { history } } }
+      );
+    });
+    await waitForElement(
+      wrapper,
+      'InventoryRelatedGroupList',
+      (el) => el.length > 0
+    );
    act(() => wrapper.find('Button[aria-label="Add"]').prop('onClick')());
    wrapper.update();
    await act(async () =>
@@ -222,9 +234,9 @@ describe('<InventoryRelatedGroupList />', () => {
        .find('DropdownItem[aria-label="Add existing group"]')
        .prop('onClick')()
    );
-    expect(GroupsAPI.readPotentialGroups).toBeCalledWith(2, {
-      not__id: 2,
-      not__parents: 2,
+    expect(GroupsAPI.readPotentialGroups).toBeCalledWith('2', {
+      not__id: '2',
+      not__parents: '2',
      order_by: 'name',
      page: 1,
      page_size: 5,
@@ -261,3 +273,85 @@ describe('<InventoryRelatedGroupList />', () => {
    expect(wrapper.find('AdHocCommands')).toHaveLength(0);
  });
 });
+
+describe('<InventoryRelatedGroupList> for constructed inventories', () => {
+  jest.mock('react-router-dom', () => ({
+    ...jest.requireActual('react-router-dom'),
+    useParams: () => ({
+      id: 1,
+      groupId: 2,
+      inventoryType: 'constructed_inventory',
+    }),
+  }));
+  let wrapper;
+
+  beforeEach(async () => {
+    GroupsAPI.readChildren.mockResolvedValue({
+      data: { ...mockRelatedGroups },
+    });
+    InventoriesAPI.readGroupsOptions.mockResolvedValue({
+      data: {
+        actions: {
+          GET: {},
+          POST: {},
+        },
+        related_search_fields: [
+          'parents__search',
+          'inventory__search',
+          'inventory_sources__search',
+          'created_by__search',
+          'children__search',
+          'modified_by__search',
+          'hosts__search',
+        ],
+      },
+    });
+    InventoriesAPI.readAdHocOptions.mockResolvedValue({
+      data: {
+        actions: {
+          GET: {
+            module_name: {
+              choices: [
+                ['command', 'command'],
+                ['shell', 'shell'],
+              ],
+            },
+          },
+          POST: {},
+        },
+      },
+    });
+    const history = createMemoryHistory({
+      initialEntries: [
+        '/inventories/constructed_inventory/1/groups/2/nested_groupss',
+      ],
+    });
+    await act(async () => {
+      wrapper = mountWithContexts(
+        <Route path="/inventories/:inventoryType/:id/groups/:groupId/nested_groups">
+          <InventoryRelatedGroupList />
+        </Route>,
+        { context: { router: { history } } }
+      );
+    });
+    await waitForElement(wrapper, 'ContentLoading', (el) => el.length === 0);
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test('Should not show associate, or disassociate button', async () => {
+    InventoriesAPI.readHostsOptions.mockResolvedValueOnce({
+      data: {
+        actions: {
+          GET: {},
+        },
+      },
+    });
+
+    await waitForElement(wrapper, 'ContentLoading', (el) => el.length === 0);
+    expect(wrapper.find('AddDropDownButton').length).toBe(0);
+    expect(wrapper.find('DisassociateButton').length).toBe(0);
+  });
+});
--- a/awx/ui/src/screens/Inventory/InventoryRelatedGroups/InventoryRelatedGroupListItem.js
+++ b/awx/ui/src/screens/Inventory/InventoryRelatedGroups/InventoryRelatedGroupListItem.js
@@ -1,6 +1,6 @@
 import 'styled-components/macro';
 import React from 'react';
-import { Link } from 'react-router-dom';
+import { Link, useParams } from 'react-router-dom';
 import { string, bool, func, number } from 'prop-types';

 import { t } from '@lingui/macro';
@@ -21,7 +21,7 @@ function InventoryRelatedGroupListItem({
  onSelect,
 }) {
  const labelId = `check-action-${group.id}`;
-
+  const { inventoryType } = useParams();
  return (
    <Tr
      id={group.id}
@@ -41,22 +41,24 @@ function InventoryRelatedGroupListItem({
          <b>{group.name}</b>
        </Link>
      </Td>
-      <ActionsTd dataLabel={t`Actions`}>
-        <ActionItem
-          tooltip={t`Edit Group`}
-          visible={group.summary_fields.user_capabilities?.edit}
-        >
-          <Button
-            ouiaId={`${group.id}-edit-button`}
-            aria-label={t`Edit Group`}
-            variant="plain"
-            component={Link}
-            to={`${editUrl}`}
+      {inventoryType !== 'constructed_inventory' && (
+        <ActionsTd dataLabel={t`Actions`}>
+          <ActionItem
+            tooltip={t`Edit Group`}
+            visible={group.summary_fields.user_capabilities?.edit}
          >
-            <PencilAltIcon />
-          </Button>
-        </ActionItem>
-      </ActionsTd>
+            <Button
+              ouiaId={`${group.id}-edit-button`}
+              aria-label={t`Edit Group`}
+              variant="plain"
+              component={Link}
+              to={`${editUrl}`}
+            >
+              <PencilAltIcon />
+            </Button>
+          </ActionItem>
+        </ActionsTd>
+      )}
    </Tr>
  );
 }
--- a/awx/ui/src/screens/Inventory/InventoryRelatedGroups/InventoryRelatedGroupListItem.test.js
+++ b/awx/ui/src/screens/Inventory/InventoryRelatedGroups/InventoryRelatedGroupListItem.test.js
@@ -1,28 +1,43 @@
 import React from 'react';
+import { createMemoryHistory } from 'history';
 import { mountWithContexts } from '../../../../testUtils/enzymeHelpers';
 import InventoryRelatedGroupListItem from './InventoryRelatedGroupListItem';
 import mockRelatedGroups from '../shared/data.relatedGroups.json';
+import { Route } from 'react-router-dom';

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

+const mockGroup = mockRelatedGroups.results[0];
 describe('<InventoryRelatedGroupListItem />', () => {
  let wrapper;
-  const mockGroup = mockRelatedGroups.results[0];
-
+  const history = createMemoryHistory({
+    initialEntries: ['/inventories/inventory/1/groups/2/nested_groups'],
+  });
+  jest.mock('react-router-dom', () => ({
+    ...jest.requireActual('react-router-dom'),
+    useParams: () => ({
+      id: 1,
+      groupId: 2,
+      inventoryType: 'inventory',
+    }),
+  }));
  beforeEach(() => {
    wrapper = mountWithContexts(
-      <table>
-        <tbody>
-          <InventoryRelatedGroupListItem
-            detailUrl="/group/1"
-            editUrl="/group/1"
-            group={mockGroup}
-            isSelected={false}
-            onSelect={() => {}}
-            rowIndex={0}
-          />
-        </tbody>
-      </table>
+      <Route path="/inventories/:inventoryType/:id/groups/:groupId/nested_groups">
+        <table>
+          <tbody>
+            <InventoryRelatedGroupListItem
+              detailUrl="/group/1"
+              editUrl="/group/1"
+              group={mockGroup}
+              isSelected={false}
+              onSelect={() => {}}
+              rowIndex={0}
+            />
+          </tbody>
+        </table>
+      </Route>,
+      { context: { router: { history } } }
    );
  });

@@ -36,18 +51,60 @@ describe('<InventoryRelatedGroupListItem />', () => {

  test('edit button hidden from users without edit capabilities', () => {
    wrapper = mountWithContexts(
-      <table>
-        <tbody>
-          <InventoryRelatedGroupListItem
-            detailUrl="/group/1"
-            editUrl="/group/1"
-            group={mockRelatedGroups.results[2]}
-            isSelected={false}
-            onSelect={() => {}}
-            rowIndex={0}
-          />
-        </tbody>
-      </table>
+      <Route path="/inventories/:inventoryType/:id/groups/:groupId/nested_groups">
+        <table>
+          <tbody>
+            <InventoryRelatedGroupListItem
+              detailUrl="/group/1"
+              editUrl="/group/1"
+              group={mockRelatedGroups.results[2]}
+              isSelected={false}
+              onSelect={() => {}}
+              rowIndex={0}
+            />
+          </tbody>
+        </table>
+      </Route>,
+      { context: { router: { history } } }
+    );
+    expect(wrapper.find('PencilAltIcon').exists()).toBeFalsy();
+  });
+});
+
+describe('<InventoryRelatedGroupList> for constructed inventories', () => {
+  jest.mock('react-router-dom', () => ({
+    ...jest.requireActual('react-router-dom'),
+    useParams: () => ({
+      id: 1,
+      groupId: 2,
+      inventoryType: 'constructed_inventory',
+    }),
+  }));
+
+  let wrapper;
+
+  test('edit button hidden from users without edit capabilities', () => {
+    const history = createMemoryHistory({
+      initialEntries: [
+        '/inventories/constructed_inventory/1/groups/2/nested_groups',
+      ],
+    });
+    wrapper = mountWithContexts(
+      <Route path="/inventories/:inventoryType/:id/groups/:groupId/nested_groups">
+        <table>
+          <tbody>
+            <InventoryRelatedGroupListItem
+              detailUrl="/group/1"
+              editUrl="/group/1"
+              group={mockGroup}
+              isSelected={false}
+              onSelect={() => {}}
+              rowIndex={0}
+            />
+          </tbody>
+        </table>
+      </Route>,
+      { context: { router: { history } } }
    );
    expect(wrapper.find('PencilAltIcon').exists()).toBeFalsy();
  });
--- a/awx/ui/src/screens/Inventory/InventoryRelatedGroups/InventoryRelatedGroups.js
+++ b/awx/ui/src/screens/Inventory/InventoryRelatedGroups/InventoryRelatedGroups.js
@@ -8,13 +8,13 @@ function InventoryRelatedGroups() {
    <Switch>
      <Route
        key="addRelatedGroups"
-        path="/inventories/inventory/:id/groups/:groupId/nested_groups/add"
+        path="/inventories/:inventoryType/:id/groups/:groupId/nested_groups/add"
      >
        <InventoryRelatedGroupAdd />
      </Route>
      <Route
        key="relatedGroups"
-        path="/inventories/inventory/:id/groups/:groupId/nested_groups"
+        path="/inventories/:inventoryType/:id/groups/:groupId/nested_groups"
      >
        <InventoryRelatedGroupList />
      </Route>
--- a/awx/ui/src/screens/Inventory/InventorySourceDetail/InventorySourceDetail.js
+++ b/awx/ui/src/screens/Inventory/InventorySourceDetail/InventorySourceDetail.js
@@ -31,7 +31,7 @@ import { formatDateString } from 'util/dates';
 import Popover from 'components/Popover';
 import { VERBOSITY } from 'components/VerbositySelectField';
 import InventorySourceSyncButton from '../shared/InventorySourceSyncButton';
-import useWsInventorySourcesDetails from '../InventorySources/useWsInventorySourcesDetails';
+import useWsInventorySourcesDetails from '../shared/useWsInventorySourcesDetails';
 import getHelpText from '../shared/Inventory.helptext';

 function InventorySourceDetail({ inventorySource }) {
--- a/awx/ui/src/screens/Inventory/InventorySources/useWsInventorySourcesDetails.js
+++ b/awx/ui/src/screens/Inventory/InventorySources/useWsInventorySourcesDetails.js
@@ -1,42 +0,0 @@
-import { useState, useEffect } from 'react';
-import useWebsocket from 'hooks/useWebsocket';
-
-export default function useWsInventorySourcesDetails(initialSources) {
-  const [sources, setSources] = useState(initialSources);
-  const lastMessage = useWebsocket({
-    jobs: ['status_changed'],
-    control: ['limit_reached_1'],
-  });
-
-  useEffect(() => {
-    setSources(initialSources);
-  }, [initialSources]);
-
-  useEffect(
-    () => {
-      if (
-        !lastMessage?.unified_job_id ||
-        !lastMessage?.inventory_source_id ||
-        lastMessage.type !== 'inventory_update'
-      ) {
-        return;
-      }
-      const updateSource = {
-        ...sources,
-        summary_fields: {
-          ...sources.summary_fields,
-          current_job: {
-            id: lastMessage.unified_job_id,
-            status: lastMessage.status,
-            finished: lastMessage.finished,
-          },
-        },
-      };
-
-      setSources(updateSource);
-    },
-    [lastMessage] // eslint-disable-line react-hooks/exhaustive-deps
-  );
-
-  return sources;
-}
--- a/awx/ui/src/screens/Inventory/SmartInventory.js
+++ b/awx/ui/src/screens/Inventory/SmartInventory.js
@@ -22,7 +22,7 @@ import RoutedTabs from 'components/RoutedTabs';
 import RelatedTemplateList from 'components/RelatedTemplateList';
 import SmartInventoryDetail from './SmartInventoryDetail';
 import SmartInventoryEdit from './SmartInventoryEdit';
-import SmartInventoryHosts from './SmartInventoryHosts';
+import AdvancedInventoryHosts from './AdvancedInventoryHosts';
 import { getInventoryPath } from './shared/utils';

 function SmartInventory({ setBreadcrumb }) {
@@ -142,7 +142,7 @@ function SmartInventory({ setBreadcrumb }) {
              />
            </Route>,
            <Route key="hosts" path="/inventories/smart_inventory/:id/hosts">
-              <SmartInventoryHosts
+              <AdvancedInventoryHosts
                inventory={inventory}
                setBreadcrumb={setBreadcrumb}
              />
--- a/awx/ui/src/screens/Inventory/SmartInventoryHost/index.js
+++ b/awx/ui/src/screens/Inventory/SmartInventoryHost/index.js
@@ -1 +0,0 @@
-export { default } from './SmartInventoryHost';
--- a/awx/ui/src/screens/Inventory/SmartInventoryHostDetail/index.js
+++ b/awx/ui/src/screens/Inventory/SmartInventoryHostDetail/index.js
@@ -1 +0,0 @@
-export { default } from './SmartInventoryHostDetail';
--- a/awx/ui/src/screens/Inventory/SmartInventoryHosts/SmartInventoryHosts.js
+++ b/awx/ui/src/screens/Inventory/SmartInventoryHosts/SmartInventoryHosts.js
@@ -1,27 +0,0 @@
-import React from 'react';
-import { Route, Switch } from 'react-router-dom';
-import { Inventory } from 'types';
-import SmartInventoryHostList from './SmartInventoryHostList';
-import SmartInventoryHost from '../SmartInventoryHost';
-
-function SmartInventoryHosts({ inventory, setBreadcrumb }) {
-  return (
-    <Switch>
-      <Route key="host" path="/inventories/smart_inventory/:id/hosts/:hostId">
-        <SmartInventoryHost
-          setBreadcrumb={setBreadcrumb}
-          inventory={inventory}
-        />
-      </Route>
-      <Route key="host-list" path="/inventories/smart_inventory/:id/hosts">
-        <SmartInventoryHostList inventory={inventory} />
-      </Route>
-    </Switch>
-  );
-}
-
-SmartInventoryHosts.propTypes = {
-  inventory: Inventory.isRequired,
-};
-
-export default SmartInventoryHosts;
--- a/awx/ui/src/screens/Inventory/SmartInventoryHosts/index.js
+++ b/awx/ui/src/screens/Inventory/SmartInventoryHosts/index.js
@@ -1 +0,0 @@
-export { default } from './SmartInventoryHosts';
--- a/awx/ui/src/screens/Inventory/shared/useWsInventorySourcesDetails.js
+++ b/awx/ui/src/screens/Inventory/shared/useWsInventorySourcesDetails.js
@@ -0,0 +1,58 @@
+import { useState, useEffect } from 'react';
+import useWebsocket from 'hooks/useWebsocket';
+import { InventorySourcesAPI } from 'api';
+
+export default function useWsInventorySourcesDetails(initialSource) {
+  const [source, setSource] = useState(initialSource);
+  const lastMessage = useWebsocket({
+    jobs: ['status_changed'],
+    control: ['limit_reached_1'],
+  });
+
+  useEffect(() => {
+    setSource(initialSource);
+  }, [initialSource]);
+
+  useEffect(
+    () => {
+      if (
+        !lastMessage?.unified_job_id ||
+        !lastMessage?.inventory_source_id ||
+        lastMessage.type !== 'inventory_update'
+      ) {
+        return;
+      }
+
+      if (
+        ['successful', 'failed', 'error', 'cancelled'].includes(
+          lastMessage.status
+        )
+      ) {
+        fetchSource();
+      }
+      setSource(updateSource(source, lastMessage));
+    },
+    [lastMessage] // eslint-disable-line react-hooks/exhaustive-deps
+  );
+
+  async function fetchSource() {
+    const { data } = await InventorySourcesAPI.readDetail(source.id);
+    setSource(data);
+  }
+
+  return source;
+}
+
+function updateSource(source, message) {
+  return {
+    ...source,
+    summary_fields: {
+      ...source.summary_fields,
+      current_job: {
+        id: message.unified_job_id,
+        status: message.status,
+        finished: message.finished,
+      },
+    },
+  };
+}
--- a/awx/ui/src/screens/Inventory/InventorySources/useWsInventorySourcesDetails.test.js
+++ b/awx/ui/src/screens/Inventory/InventorySources/useWsInventorySourcesDetails.test.js
@@ -1,9 +1,12 @@
 import React from 'react';
 import { act } from 'react-dom/test-utils';
 import WS from 'jest-websocket-mock';
+import { InventorySourcesAPI } from 'api';
 import { mountWithContexts } from '../../../../testUtils/enzymeHelpers';
 import useWsInventorySourceDetails from './useWsInventorySourcesDetails';

+jest.mock('../../../api/models/InventorySources');
+
 function TestInner() {
  return <div />;
 }
@@ -111,6 +114,27 @@ describe('useWsProject', () => {
      status: 'running',
      finished: null,
    });
+
+    expect(InventorySourcesAPI.readDetail).toHaveBeenCalledTimes(0);
+    InventorySourcesAPI.readDetail.mockResolvedValue({
+      data: {},
+    });
+    await act(async () => {
+      mockServer.send(
+        JSON.stringify({
+          group_name: 'jobs',
+          inventory_id: 1,
+          status: 'successful',
+          type: 'inventory_update',
+          unified_job_id: 2,
+          unified_job_template_id: 1,
+          inventory_source_id: 1,
+        })
+      );
+    });
+    expect(InventorySourcesAPI.readDetail).toHaveBeenCalledTimes(1);
+
+    jest.clearAllMocks();
    WS.clean();
  });
 });
Author	SHA1	Message	Date
Alex Corey	e985b98d61	Adds constructed inventory groups and related groups.	2023-02-23 14:03:58 -05:00
Alex Corey	0fae313338	Merge pull request #13590 from ansible/constructedInventoryHosts Constructed inventory hosts	2023-02-22 11:07:25 -05:00
Marliana Lara	f1cab55051	Merge pull request #13598 from marshmalien/constructed-inventory-sync-button Add constructed inventory detail sync button	2023-02-22 10:20:45 -05:00
Alex Corey	0d88cee6bf	Creates constructed inventory host lists by reusing, and renaming smart inventory host list components.	2023-02-22 10:01:31 -05:00
Marliana Lara	295ec4f22a	Update inventory details after inventory source sync	2023-02-21 17:47:56 -05:00
Hao Liu	103b4567fe	Merge pull request #13600 from gamuniz/fix_validation_bug_constructed [constructed-inventory]Fix validation issue constructed	2023-02-20 10:33:21 -05:00
Gabe Muniz	8ba2b1b50c	[constructed-inventory]Fix validation issue constructed	2023-02-20 10:20:23 -05:00
Marliana Lara	83ccf1dd36	Add constructed inventory detail's sync button	2023-02-18 14:51:01 -05:00
Marliana Lara	dc049af0eb	Merge pull request #13578 from marshmalien/constructed-inv-search-option [constructed-inventory] Add "constructed" option to search columns	2023-02-16 13:05:22 -05:00
Marliana Lara	8ea8558605	Add constructed inv option to search columns	2023-02-15 17:21:23 -05:00
				`@@ -0,0 +1 @@`
				`export { default } from './AdvancedInventoryHost';`
				`@@ -1 +0,0 @@`
				`export { default } from './ConstructedInventoryGroups';`
				`@@ -1 +0,0 @@`
				`export { default } from './SmartInventoryHost';`