Adds constructed inventory groups and related groups.

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;

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

@@ -22,7 +22,7 @@ import { ResourceAccessList } from 'components/ResourceAccessList';
 import RoutedTabs from 'components/RoutedTabs';
 import ConstructedInventoryDetail from './ConstructedInventoryDetail';
 import ConstructedInventoryEdit from './ConstructedInventoryEdit';
-import ConstructedInventoryGroups from './ConstructedInventoryGroups';
+import InventoryGroups from './InventoryGroups';
 import AdvancedInventoryHosts from './AdvancedInventoryHosts';
 import { getInventoryPath } from './shared/utils';
 
@@ -164,9 +164,12 @@ function ConstructedInventory({ 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"

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

@@ -21,12 +21,6 @@ jest.mock('react-router-dom', () => ({
 describe('<ConstructedInventory />', () => {
   let wrapper;
 
-  // beforeEach(async () => {
-  //   ConstructedInventoriesAPI.readDetail.mockResolvedValue({
-  //     data: mockInventory,
-  //   });
-  // });
-
   test('should render expected tabs', async () => {
     ConstructedInventoriesAPI.readDetail.mockResolvedValue({
       data: mockInventory,

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;

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

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

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

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"
+          from="/inventories/:inventoryType/:id/groups/:groupId"
-          to="/inventories/inventory/:id/groups/:groupId/details"
+          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>
             )}

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', () => ({
+describe('<InventoryGroup />', () => {
+  jest.mock('react-router-dom', () => ({
     ...jest.requireActual('react-router-dom'),
     useParams: () => ({
       id: 1,
-    groupId: 2,
+      groupId: 1,
+      inventoryType: 'inventory',
     }),
-}));
+  }));
 
-describe('<InventoryGroup />', () => {
   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');
+  });
+});

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,6 +46,7 @@ function InventoryGroupDetail({ inventoryGroup }) {
           user={modified_by}
         />
       </DetailList>
+      {inventoryType !== 'constructed_inventory' && (
         <CardActionsRow>
           {user_capabilities?.edit && (
             <Button
@@ -55,7 +55,7 @@ function InventoryGroupDetail({ inventoryGroup }) {
               aria-label={t`Edit`}
               onClick={() =>
                 history.push(
-                `/inventories/inventory/${params.id}/groups/${params.groupId}/edit`
+                  `/inventories/inventory/${id}/groups/${groupId}/edit`
                 )
               }
             >
@@ -67,11 +67,12 @@ function InventoryGroupDetail({ inventoryGroup }) {
               groups={[inventoryGroup]}
               isDisabled={false}
               onAfterDelete={() =>
-              history.push(`/inventories/inventory/${params.id}/groups`)
+                history.push(`/inventories/inventory/${id}/groups`)
               }
             />
           )}
         </CardActionsRow>
+      )}
       {error && (
         <AlertModal
           variant="error"

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

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,6 +242,8 @@ function InventoryGroupHostList() {
                     />,
                   ]
                 : []),
+              ...(isNotConstructedInventory
+                ? [
                     <DisassociateButton
                       key="disassociate"
                       onDisassociate={handleDisassociate}
@@ -251,6 +255,8 @@ function InventoryGroupHostList() {
                         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`}
+            detailUrl={`/inventories/${inventoryType}/${inventoryId}/hosts/${host.id}/details`}
-            editUrl={`/inventories/inventory/${inventoryId}/hosts/${host.id}/edit`}
+            editUrl={`/inventories/${inventoryType}/${inventoryId}/hosts/${host.id}/edit`}
             isSelected={selected.some((row) => row.id === host.id)}
             onSelect={() => handleSelect(host)}
           />

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

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,6 +57,7 @@ function InventoryGroupHostListItem({
         >
           <HostToggle host={host} />
         </ActionItem>
+        {inventoryType !== 'constructed_inventory' && (
           <ActionItem
             tooltip={t`Edit Host`}
             visible={host.summary_fields.user_capabilities?.edit}
@@ -73,6 +74,7 @@ function InventoryGroupHostListItem({
               </Button>
             </Tooltip>
           </ActionItem>
+        )}
       </ActionsTd>
     </Tr>
   );

awx/ui/src/screens/Inventory/InventoryGroupHosts/InventoryGroupHostListItem.test.js

@@ -1,16 +1,21 @@
 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(
+      <Route path="/inventories/:inventoryType/:id/groups/:groupId/hosts">
         <table>
           <tbody>
             <InventoryGroupHostListItem
@@ -23,6 +28,8 @@ describe('<InventoryGroupHostListItem />', () => {
             />
           </tbody>
         </table>
+      </Route>,
+      { context: { router: { history } } }
     );
   });
 
@@ -52,6 +59,7 @@ describe('<InventoryGroupHostListItem />', () => {
     const copyMockHost = { ...mockHost };
     copyMockHost.summary_fields.user_capabilities.edit = false;
     wrapper = mountWithContexts(
+      <Route path="/inventories/:inventoryType/:id/groups/:groupId/hosts">
         <table>
           <tbody>
             <InventoryGroupHostListItem
@@ -64,7 +72,47 @@ describe('<InventoryGroupHostListItem />', () => {
             />
           </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();
+  });
+});

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>

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({
+function InventoryGroupItem({ group, isSelected, onSelect, rowIndex }) {
-  group,
+  const { id: inventoryId, inventoryType } = useParams();
-  inventoryId,
-  isSelected,
-  onSelect,
-  rowIndex,
-}) {
   const labelId = `check-action-${group.id}`;
-  const detailUrl = `/inventories/inventory/${inventoryId}/groups/${group.id}/details`;
+  const detailUrl = `/inventories/${inventoryType}/${inventoryId}/groups/${group.id}/details`;
-  const editUrl = `/inventories/inventory/${inventoryId}/groups/${group.id}/edit`;
+  const editUrl = `/inventories/${inventoryType}/${inventoryId}/groups/${group.id}/edit`;
 
   return (
     <Tr id={`group-row-${group.id}`} ouiaId={`group-row-${group.id}`}>
@@ -36,6 +31,7 @@ function InventoryGroupItem({
           <b>{group.name}</b>
         </Link>
       </Td>
+      {inventoryType !== 'constructed_inventory' && (
         <ActionsTd dataLabel={t`Actions`} gridColumns="auto 40px">
           <ActionItem
             visible={group.summary_fields.user_capabilities.edit}
@@ -52,13 +48,13 @@ function InventoryGroupItem({
             </Button>
           </ActionItem>
         </ActionsTd>
+      )}
     </Tr>
   );
 }
 
 InventoryGroupItem.propTypes = {
   group: Group.isRequired,
-  inventoryId: oneOfType([number, string]).isRequired,
   isSelected: bool.isRequired,
   onSelect: func.isRequired,
 };

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

@@ -1,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();
+  });
 });

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">
+      <Route key="list" path="/inventories/:inventoryType/:id/groups">
-        <InventoryGroupsList />
+        <InventoryGroupsList inventory={inventory} />
       </Route>
     </Switch>
   );

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,7 +178,13 @@ function InventoryGroupsList() {
                   />,
                 ]
               : []),
-            <Tooltip content={renderTooltip()} position="top" key="delete">
+            ...(isNotConstructedInventory
+              ? [
+                  <Tooltip
+                    content={renderTooltip()}
+                    position="top"
+                    key="delete"
+                  >
                     <div>
                       <InventoryGroupsDeleteModal
                         groups={selected}
@@ -191,6 +198,8 @@ function InventoryGroupsList() {
                       />
                     </div>
                   </Tooltip>,
+                ]
+              : []),
           ]}
         />
       )}

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

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() {
                     />,
                   ]
                 : []),
+              ...(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) => (

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 () => {
+    const history = createMemoryHistory({
-      wrapper = mountWithContexts(<InventoryRelatedGroupList />);
+      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, {
+    expect(GroupsAPI.readPotentialGroups).toBeCalledWith('2', {
-      not__id: 2,
+      not__id: '2',
-      not__parents: 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);
+  });
+});

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,6 +41,7 @@ function InventoryRelatedGroupListItem({
           <b>{group.name}</b>
         </Link>
       </Td>
+      {inventoryType !== 'constructed_inventory' && (
         <ActionsTd dataLabel={t`Actions`}>
           <ActionItem
             tooltip={t`Edit Group`}
@@ -57,6 +58,7 @@ function InventoryRelatedGroupListItem({
             </Button>
           </ActionItem>
         </ActionsTd>
+      )}
     </Tr>
   );
 }

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

@@ -1,16 +1,29 @@
 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(
+      <Route path="/inventories/:inventoryType/:id/groups/:groupId/nested_groups">
         <table>
           <tbody>
             <InventoryRelatedGroupListItem
@@ -23,6 +36,8 @@ describe('<InventoryRelatedGroupListItem />', () => {
             />
           </tbody>
         </table>
+      </Route>,
+      { context: { router: { history } } }
     );
   });
 
@@ -36,6 +51,7 @@ describe('<InventoryRelatedGroupListItem />', () => {
 
   test('edit button hidden from users without edit capabilities', () => {
     wrapper = mountWithContexts(
+      <Route path="/inventories/:inventoryType/:id/groups/:groupId/nested_groups">
         <table>
           <tbody>
             <InventoryRelatedGroupListItem
@@ -48,6 +64,47 @@ describe('<InventoryRelatedGroupListItem />', () => {
             />
           </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();
   });

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>