Adds nested lists for constructed inventories

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') and (self.instance and self.instance.source != 'constructed'):
+        elif get_field_from_model_or_attrs('source') == 'constructed':
             raise serializers.ValidationError({"Error": _('constructed not a valid source for inventory')})
         else:
             redundant_scm_fields = list(filter(lambda x: attrs.get(x, None), ['source_project', 'source_path']))

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

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

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.readInputInventories = this.readInputInventories.bind(this);
+    this.readSourceInventories = this.readSourceInventories.bind(this);
   }
 
   readAccessList(id, params) {
@@ -73,7 +73,7 @@ class Inventories extends InstanceGroupsMixin(Base) {
     });
   }
 
-  readInputInventories(inventoryId, params) {
+  readSourceInventories(inventoryId, params) {
     return this.http.get(`${this.baseUrl}${inventoryId}/input_inventories/`, {
       params,
     });

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

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

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

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

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

@@ -1,27 +0,0 @@
-import React from 'react';
-import { Route, Switch } from 'react-router-dom';
-import { Inventory } from 'types';
-import AdvancedInventoryHostList from './AdvancedInventoryHostList';
-import AdvancedInventoryHost from '../AdvancedInventoryHost';
-
-function AdvancedInventoryHosts({ inventory, setBreadcrumb }) {
-  return (
-    <Switch>
-      <Route key="host" path="/inventories/:inventoryType/:id/hosts/:hostId">
-        <AdvancedInventoryHost
-          setBreadcrumb={setBreadcrumb}
-          inventory={inventory}
-        />
-      </Route>
-      <Route key="host-list" path="/inventories/:inventoryType/:id/hosts">
-        <AdvancedInventoryHostList inventory={inventory} />
-      </Route>
-    </Switch>
-  );
-}
-
-AdvancedInventoryHosts.propTypes = {
-  inventory: Inventory.isRequired,
-};
-
-export default AdvancedInventoryHosts;

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

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

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

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

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

@@ -2,10 +2,7 @@ import React from 'react';
 import { act } from 'react-dom/test-utils';
 import { createMemoryHistory } from 'history';
 import { ConstructedInventoriesAPI } from 'api';
-import {
+import { mountWithContexts } from '../../../testUtils/enzymeHelpers';
-  mountWithContexts,
-  waitForElement,
-} from '../../../testUtils/enzymeHelpers';
 import mockInventory from './shared/data.inventory.json';
 import ConstructedInventory from './ConstructedInventory';
 
@@ -21,10 +18,13 @@ jest.mock('react-router-dom', () => ({
 describe('<ConstructedInventory />', () => {
   let wrapper;
 
-  test('should render expected tabs', async () => {
+  beforeEach(async () => {
     ConstructedInventoriesAPI.readDetail.mockResolvedValue({
       data: mockInventory,
     });
+  });
+
+  test('should render expected tabs', async () => {
     const expectedTabs = [
       'Back to Inventories',
       'Details',
@@ -45,9 +45,6 @@ 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'],
     });
@@ -63,7 +60,7 @@ describe('<ConstructedInventory />', () => {
                 match: {
                   params: { id: 1 },
                   url: '/inventories/constructed_inventory/1/foobar',
-                  path: '/inventories/:inventoryType/:id/foobar',
+                  path: '/inventories/constructed_inventory/1/foobar',
                 },
               },
             },
@@ -71,7 +68,6 @@ describe('<ConstructedInventory />', () => {
         }
       );
     });
-    await waitForElement(wrapper, 'ContentLoading', (el) => el.length === 0);
     expect(wrapper.find('ContentError').length).toBe(1);
   });
 });

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

@@ -1,371 +0,0 @@
-import React, { useCallback, useEffect } from 'react';
-import { Link, useHistory } from 'react-router-dom';
-
-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 ChipGroup from 'components/ChipGroup';
-import { VariablesDetail } from 'components/CodeEditor';
-import ContentError from 'components/ContentError';
-import ContentLoading from 'components/ContentLoading';
-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, inputInventories, inventorySource, actions },
-    request: fetchRelatedDetails,
-    error: contentError,
-    isLoading,
-  } = useRequest(
-    useCallback(async () => {
-      const [
-        instanceGroupsResponse,
-        inputInventoriesResponse,
-        inventorySourceResponse,
-        optionsResponse,
-      ] = await Promise.all([
-        InventoriesAPI.readInstanceGroups(inventory.id),
-        InventoriesAPI.readInputInventories(inventory.id),
-        InventoriesAPI.readSources(inventory.id),
-        ConstructedInventoriesAPI.readOptions(),
-      ]);
-
-      return {
-        instanceGroups: instanceGroupsResponse.data.results,
-        inputInventories: inputInventoriesResponse.data.results,
-        inventorySource: inventorySourceResponse.data.results[0],
-        actions: optionsResponse.data.actions.GET,
-      };
-    }, [inventory.id]),
-    {
-      instanceGroups: [],
-      inputInventories: [],
-      inventorySource: {},
-      actions: {},
-      isLoading: true,
-    }
-  );
-
-  useEffect(() => {
-    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);
-      history.push(`/inventories`);
-    }, [inventory.id, history])
-  );
-
-  const { error, dismissError } = useDismissableError(deleteError);
-
-  const deleteDetailsRequests =
-    relatedResourceDeleteRequests.inventory(inventory);
-
-  if (isLoading) {
-    return <ContentLoading />;
-  }
-
-  if (contentError) {
-    return <ContentError error={contentError} />;
-  }
-
-  return (
-    <CardBody>
-      <DetailList>
-        <Detail
-          label={t`Name`}
-          value={inventory.name}
-          dataCy="constructed-inventory-name"
-        />
-        <Detail
-          label={t`Last Job Status`}
-          value={
-            inventorySourceSyncJob && (
-              <JobStatusLabel job={inventorySourceSyncJob} />
-            )
-          }
-        />
-        <Detail
-          label={t`Description`}
-          value={inventory.description}
-          dataCy="constructed-inventory-description"
-        />
-        <Detail
-          label={t`Type`}
-          value={t`Constructed Inventory`}
-          dataCy="constructed-inventory-type"
-        />
-        <Detail
-          label={actions.limit.label}
-          value={inventory.limit}
-          helpText={actions.limit.help_text}
-          dataCy="constructed-inventory-limit"
-        />
-        <Detail
-          label={t`Organization`}
-          dataCy="constructed-inventory-organization"
-          value={
-            <Link
-              to={`/organizations/${inventory.summary_fields?.organization.id}/details`}
-            >
-              {inventory.summary_fields?.organization.name}
-            </Link>
-          }
-        />
-        <Detail
-          label={actions.total_groups.label}
-          value={wsInventory.total_groups}
-          helpText={actions.total_groups.help_text}
-          dataCy="constructed-inventory-total-groups"
-        />
-        <Detail
-          label={actions.total_hosts.label}
-          value={wsInventory.total_hosts}
-          helpText={actions.total_hosts.help_text}
-          dataCy="constructed-inventory-total-hosts"
-        />
-        <Detail
-          label={actions.total_inventory_sources.label}
-          value={wsInventory.total_inventory_sources}
-          helpText={actions.total_inventory_sources.help_text}
-          dataCy="constructed-inventory-sources"
-        />
-        <Detail
-          label={actions.update_cache_timeout.label}
-          value={inventory.update_cache_timeout}
-          helpText={actions.update_cache_timeout.help_text}
-          dataCy="constructed-inventory-cache-timeout"
-        />
-        <Detail
-          label={actions.inventory_sources_with_failures.label}
-          value={wsInventory.inventory_sources_with_failures}
-          helpText={actions.inventory_sources_with_failures.help_text}
-          dataCy="constructed-inventory-sources-with-failures"
-        />
-        <Detail
-          label={actions.verbosity.label}
-          value={inventory.verbosity}
-          helpText={actions.verbosity.help_text}
-          dataCy="constructed-inventory-verbosity"
-        />
-        {instanceGroups && (
-          <Detail
-            fullWidth
-            label={t`Instance Groups`}
-            value={<InstanceGroupLabels labels={instanceGroups} isLinkable />}
-            isEmpty={instanceGroups.length === 0}
-            dataCy="constructed-inventory-instance-groups"
-          />
-        )}
-        {inventory.prevent_instance_group_fallback && (
-          <Detail
-            fullWidth
-            label={t`Enabled Options`}
-            dataCy="constructed-inventory-instance-group-fallback"
-            value={
-              <TextList component={TextListVariants.ul}>
-                {inventory.prevent_instance_group_fallback && (
-                  <TextListItem component={TextListItemVariants.li}>
-                    {t`Prevent Instance Group Fallback`}
-                    <Popover
-                      header={t`Prevent Instance Group Fallback`}
-                      content={helpText.preventInstanceGroupFallback}
-                    />
-                  </TextListItem>
-                )}
-              </TextList>
-            }
-          />
-        )}
-        <Detail
-          fullWidth
-          helpText={helpText.labels}
-          dataCy="constructed-inventory-labels"
-          label={t`Labels`}
-          value={
-            <ChipGroup
-              numChips={5}
-              totalChips={inventory.summary_fields.labels?.results?.length}
-            >
-              {inventory.summary_fields.labels?.results?.map((l) => (
-                <Chip key={l.id} isReadOnly>
-                  {l.name}
-                </Chip>
-              ))}
-            </ChipGroup>
-          }
-          isEmpty={inventory.summary_fields.labels?.results?.length === 0}
-        />
-        <Detail
-          fullWidth
-          label={t`Input Inventories`}
-          value={
-            <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>
-                  )}
-                >
-                  {inputInventory.name}
-                </Label>
-              ))}
-            </LabelGroup>
-          }
-          isEmpty={inputInventories?.length === 0}
-        />
-        <VariablesDetail
-          label={actions.source_vars.label}
-          helpText={helpText.variables()}
-          value={inventory.source_vars}
-          rows={4}
-          name="variables"
-          dataCy="inventory-detail-variables"
-        />
-        <UserDateDetail
-          label={actions.created.label}
-          date={inventory.created}
-          user={inventory.summary_fields.created_by}
-        />
-        <UserDateDetail
-          label={actions.modified.label}
-          date={inventory.modified}
-          user={inventory.summary_fields.modified_by}
-        />
-      </DetailList>
-      <CardActionsRow>
-        {inventory?.summary_fields?.user_capabilities?.edit && (
-          <Button
-            ouiaId="inventory-detail-edit-button"
-            component={Link}
-            to={`/inventories/constructed_inventory/${inventory.id}/edit`}
-          >
-            {t`Edit`}
-          </Button>
-        )}
-        {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`}
-            onConfirm={deleteInventory}
-            deleteDetailsRequests={deleteDetailsRequests}
-            deleteMessage={t`This inventory is currently being used by other resources. Are you sure you want to delete it?`}
-          >
-            {t`Delete`}
-          </DeleteButton>
-        )}
-      </CardActionsRow>
-      {error && (
-        <AlertModal
-          isOpen={error}
-          variant="error"
-          title={t`Error!`}
-          onClose={dismissError}
-        >
-          {t`Failed to delete inventory.`}
-          <ErrorDetail error={error} />
-        </AlertModal>
-      )}
-    </CardBody>
-  );
-}
-
-ConstructedInventoryDetail.propTypes = {
-  inventory: Inventory.isRequired,
-};
-
-export default ConstructedInventoryDetail;

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

@@ -1,250 +0,0 @@
-import React from 'react';
-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');
-
-const mockInventory = {
-  id: 1,
-  type: 'inventory',
-  summary_fields: {
-    organization: {
-      id: 1,
-      name: 'The Organization',
-      description: '',
-    },
-    created_by: {
-      username: 'the_creator',
-      id: 2,
-    },
-    modified_by: {
-      username: 'the_modifier',
-      id: 3,
-    },
-    user_capabilities: {
-      edit: true,
-      delete: true,
-      copy: true,
-      adhoc: true,
-    },
-    labels: {
-      count: 1,
-      results: [
-        {
-          id: 17,
-          name: 'seventeen',
-        },
-      ],
-    },
-  },
-  created: '2019-10-04T16:56:48.025455Z',
-  modified: '2019-10-04T16:56:48.025468Z',
-  name: 'Constructed Inv',
-  description: '',
-  organization: 1,
-  kind: 'constructed',
-  has_active_failures: false,
-  total_hosts: 0,
-  hosts_with_active_failures: 0,
-  total_groups: 0,
-  groups_with_active_failures: 0,
-  has_inventory_sources: false,
-  total_inventory_sources: 0,
-  inventory_sources_with_failures: 0,
-  pending_deletion: false,
-  prevent_instance_group_fallback: 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 />', () => {
-  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: [] },
-    });
-    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();
-  });
-});

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

@@ -1,59 +0,0 @@
-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;

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

@@ -1,41 +0,0 @@
-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!' }));
-  });
-});

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

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

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

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

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

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

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

@@ -16,7 +16,7 @@ describe('<InventoryGroup />', () => {
     ...jest.requireActual('react-router-dom'),
     useParams: () => ({
       id: 1,
-      groupId: 1,
+      groupId: 2,
       inventoryType: 'inventory',
     }),
   }));
@@ -138,8 +138,7 @@ describe('constructed inventory', () => {
     });
     await waitForElement(wrapper, 'ContentLoading', (el) => el.length === 0);
   });
-
+  test('Constructed Inventory expect all tabs to exist, including Back to Groups', async () => {
-  test('Constructed Inventory expect all tabs to exist, including Back to Groups', () => {
     const routedTabs = wrapper.find('RoutedTabs');
     expect(routedTabs).toHaveLength(1);
 

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

@@ -11,7 +11,7 @@ import { DetailList, Detail, UserDateDetail } from 'components/DetailList';
 import InventoryGroupsDeleteModal from '../shared/InventoryGroupsDeleteModal';
 
 function InventoryGroupDetail({ inventoryGroup }) {
-  const { inventoryType, id, groupId } = useParams();
+  const { inventoryType } = useParams();
   const {
     summary_fields: { created_by, modified_by, user_capabilities },
     created,
@@ -22,6 +22,7 @@ function InventoryGroupDetail({ inventoryGroup }) {
   } = inventoryGroup;
   const [error, setError] = useState(false);
   const history = useHistory();
+  const params = useParams();
 
   return (
     <CardBody>
@@ -55,7 +56,7 @@ function InventoryGroupDetail({ inventoryGroup }) {
               aria-label={t`Edit`}
               onClick={() =>
                 history.push(
-                  `/inventories/inventory/${id}/groups/${groupId}/edit`
+                  `/inventories/inventory/${params.id}/groups/${params.groupId}/edit`
                 )
               }
             >
@@ -67,7 +68,7 @@ function InventoryGroupDetail({ inventoryGroup }) {
               groups={[inventoryGroup]}
               isDisabled={false}
               onAfterDelete={() =>
-                history.push(`/inventories/inventory/${id}/groups`)
+                history.push(`/inventories/inventory/${params.id}/groups`)
               }
             />
           )}

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

@@ -145,11 +145,9 @@ function InventoryGroupHostList() {
     useDismissableError(associateErr);
   const { error: disassociateError, dismissError: dismissDisassociateError } =
     useDismissableError(disassociateErr);
-  const isNotConstructedInventory = inventoryType !== 'constructed_inventory';
+
   const canAdd =
-    actions &&
+    actions && Object.prototype.hasOwnProperty.call(actions, 'POST');
-    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`;
@@ -242,21 +240,17 @@ function InventoryGroupHostList() {
                     />,
                   ]
                 : []),
-              ...(isNotConstructedInventory
+              <DisassociateButton
-                ? [
+                key="disassociate"
-                    <DisassociateButton
+                onDisassociate={handleDisassociate}
-                      key="disassociate"
+                itemsToDisassociate={selected}
-                      onDisassociate={handleDisassociate}
+                modalTitle={t`Disassociate host from group?`}
-                      itemsToDisassociate={selected}
+                modalNote={t`
-                      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.
                       `}
-                    />,
+              />,
-                  ]
-                : []),
             ]}
           />
         )}

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

@@ -8,20 +8,19 @@ 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 () => {
@@ -304,64 +303,3 @@ 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, useParams } from 'react-router-dom';
+import { Link } 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,24 +57,22 @@ function InventoryGroupHostListItem({
         >
           <HostToggle host={host} />
         </ActionItem>
-        {inventoryType !== 'constructed_inventory' && (
+        <ActionItem
-          <ActionItem
+          tooltip={t`Edit Host`}
-            tooltip={t`Edit Host`}
+          visible={host.summary_fields.user_capabilities?.edit}
-            visible={host.summary_fields.user_capabilities?.edit}
+        >
-          >
+          <Tooltip content={t`Edit Host`} position="top">
-            <Tooltip content={t`Edit Host`} position="top">
+            <Button
-              <Button
+              ouiaId={`${host.id}-edit-button`}
-                ouiaId={`${host.id}-edit-button`}
+              aria-label={t`Edit Host`}
-                aria-label={t`Edit Host`}
+              variant="plain"
-                variant="plain"
+              component={Link}
-                component={Link}
+              to={`${editUrl}`}
-                to={`${editUrl}`}
+            >
-              >
+              <PencilAltIcon />
-                <PencilAltIcon />
+            </Button>
-              </Button>
+          </Tooltip>
-            </Tooltip>
+        </ActionItem>
-          </ActionItem>
-        )}
       </ActionsTd>
     </Tr>
   );

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

@@ -1,35 +1,28 @@
 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>
-        <table>
+        <tbody>
-          <tbody>
+          <InventoryGroupHostListItem
-            <InventoryGroupHostListItem
+            detailUrl="/host/1"
-              detailUrl="/host/1"
+            editUrl="/host/1"
-              editUrl="/host/1"
+            host={mockHost}
-              host={mockHost}
+            isSelected={false}
-              isSelected={false}
+            onSelect={() => {}}
-              onSelect={() => {}}
+            rowIndex={0}
-              rowIndex={0}
+          />
-            />
+        </tbody>
-          </tbody>
+      </table>
-        </table>
-      </Route>,
-      { context: { router: { history } } }
     );
   });
 
@@ -59,60 +52,19 @@ describe('<InventoryGroupHostListItem />', () => {
     const copyMockHost = { ...mockHost };
     copyMockHost.summary_fields.user_capabilities.edit = false;
     wrapper = mountWithContexts(
-      <Route path="/inventories/:inventoryType/:id/groups/:groupId/hosts">
+      <table>
-        <table>
+        <tbody>
-          <tbody>
+          <InventoryGroupHostListItem
-            <InventoryGroupHostListItem
+            detailUrl="/host/1"
-              detailUrl="/host/1"
+            editUrl="/host/1"
-              editUrl="/host/1"
+            host={mockHost}
-              host={mockHost}
+            isSelected={false}
-              isSelected={false}
+            onSelect={() => {}}
-              onSelect={() => {}}
+            rowIndex={0}
-              rowIndex={0}
+          />
-            />
+        </tbody>
-          </tbody>
+      </table>
-        </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/:inventoryType/:id/groups/:groupId/nested_hosts">
+      <Route path="/inventories/inventory/:id/groups/:groupId/nested_hosts">
         <InventoryGroupHostList />
       </Route>
     </Switch>

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

@@ -5,7 +5,7 @@ import { Tooltip } from '@patternfly/react-core';
 import { getQSConfig, parseQueryString } from 'util/qs';
 import useSelected from 'hooks/useSelected';
 import useRequest from 'hooks/useRequest';
-import { InventoriesAPI } from 'api';
+import { ConstructedInventoriesAPI, InventoriesAPI } from 'api';
 import DataListToolbar from 'components/DataListToolbar';
 import PaginatedTable, {
   HeaderRow,
@@ -102,12 +102,12 @@ function InventoryGroupsList() {
     }
     return t`Select a row to delete`;
   };
-  const isNotConstructedInventory = inventoryType !== 'constructed_inventory';
+
   const canAdd =
     actions &&
     Object.prototype.hasOwnProperty.call(actions, 'POST') &&
-    isNotConstructedInventory;
+    inventoryType !== 'constructed_inventory';
-
+  const canDelete = inventoryType !== 'constructed_inventory';
   return (
     <PaginatedTable
       contentError={contentError}
@@ -141,7 +141,9 @@ function InventoryGroupsList() {
       headerRow={
         <HeaderRow qsConfig={QS_CONFIG}>
           <HeaderCell sortKey="name">{t`Name`}</HeaderCell>
-          {isNotConstructedInventory && <HeaderCell>{t`Actions`}</HeaderCell>}
+          {inventoryType !== 'constructed_inventory' && (
+            <HeaderCell>{t`Actions`}</HeaderCell>
+          )}
         </HeaderRow>
       }
       renderRow={(item, index) => (
@@ -178,7 +180,7 @@ function InventoryGroupsList() {
                   />,
                 ]
               : []),
-            ...(isNotConstructedInventory
+            ...(canDelete
               ? [
                   <Tooltip
                     content={renderTooltip()}

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

@@ -320,6 +320,7 @@ describe('<InventoryGroupsList/> error handling', () => {
 
 describe('Constructed Inventory group', () => {
   let wrapper;
+  let history;
   jest.mock('react-router-dom', () => ({
     ...jest.requireActual('react-router-dom'),
     useParams: () => ({
@@ -359,7 +360,7 @@ describe('Constructed Inventory group', () => {
         },
       },
     });
-    const history = createMemoryHistory({
+    history = createMemoryHistory({
       initialEntries: ['/inventories/constructed_inventory/3/groups'],
     });
     await act(async () => {

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

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

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

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

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

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

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

@@ -1,24 +1,19 @@
 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 InventoryHostGroupItem({
+function InventoryHostGroupItem({ 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
@@ -59,7 +54,6 @@ function InventoryHostGroupItem({
 
 InventoryHostGroupItem.propTypes = {
   group: Group.isRequired,
-  inventoryId: oneOfType([number, string]).isRequired,
   isSelected: bool.isRequired,
   onSelect: func.isRequired,
 };

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -165,7 +165,7 @@ function InventoryRelatedGroupList() {
       ]}
     />
   );
-  const isNotConstructedInventory = inventoryType !== 'constructed_inventory';
+
   return (
     <>
       <PaginatedTable
@@ -219,23 +219,19 @@ function InventoryRelatedGroupList() {
                     />,
                   ]
                 : []),
-              ...(isNotConstructedInventory
+              <DisassociateButton
-                ? [
+                key="disassociate"
-                    <DisassociateButton
+                onDisassociate={disassociateGroups}
-                      key="disassociate"
+                itemsToDisassociate={selected}
-                      onDisassociate={disassociateGroups}
+                modalTitle={t`Disassociate related group(s)?`}
-                      itemsToDisassociate={selected}
+              />,
-                      modalTitle={t`Disassociate related group(s)?`}
-                    />,
-                  ]
-                : []),
             ]}
           />
         )}
         headerRow={
           <HeaderRow qsConfig={QS_CONFIG}>
             <HeaderCell sortKey="name">{t`Name`}</HeaderCell>
-            {isNotConstructedInventory && <HeaderCell>{t`Actions`}</HeaderCell>}
+            <HeaderCell>{t`Actions`}</HeaderCell>
           </HeaderRow>
         }
         renderRow={(group, index) => (

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

@@ -1,7 +1,6 @@
 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,
@@ -14,6 +13,14 @@ 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,
@@ -58,14 +65,6 @@ 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({
@@ -211,22 +210,11 @@ describe('<InventoryRelatedGroupList />', () => {
     GroupsAPI.readPotentialGroups.mockResolvedValue({
       data: { count: mockGroups.length, results: mockGroups },
     });
-    const history = createMemoryHistory({
-      initialEntries: ['/inventories/inventory/2/groups/2/nested_groups'],
-    });
     await act(async () => {
-      wrapper = mountWithContexts(
+      wrapper = mountWithContexts(<InventoryRelatedGroupList />);
-        <Route path="/inventories/:inventoryType/:id/groups/:groupId/nested_groups">
-          <InventoryRelatedGroupList />
-        </Route>,
-        { context: { router: { history } } }
-      );
     });
-    await waitForElement(
+    await waitForElement(wrapper, 'ContentLoading', (el) => el.length === 0);
-      wrapper,
+
-      'InventoryRelatedGroupList',
-      (el) => el.length > 0
-    );
     act(() => wrapper.find('Button[aria-label="Add"]').prop('onClick')());
     wrapper.update();
     await act(async () =>
@@ -234,9 +222,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,
@@ -273,85 +261,3 @@ 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, useParams } from 'react-router-dom';
+import { Link } 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,24 +41,22 @@ function InventoryRelatedGroupListItem({
           <b>{group.name}</b>
         </Link>
       </Td>
-      {inventoryType !== 'constructed_inventory' && (
+      <ActionsTd dataLabel={t`Actions`}>
-        <ActionsTd dataLabel={t`Actions`}>
+        <ActionItem
-          <ActionItem
+          tooltip={t`Edit Group`}
-            tooltip={t`Edit Group`}
+          visible={group.summary_fields.user_capabilities?.edit}
-            visible={group.summary_fields.user_capabilities?.edit}
+        >
+          <Button
+            ouiaId={`${group.id}-edit-button`}
+            aria-label={t`Edit Group`}
+            variant="plain"
+            component={Link}
+            to={`${editUrl}`}
           >
-            <Button
+            <PencilAltIcon />
-              ouiaId={`${group.id}-edit-button`}
+          </Button>
-              aria-label={t`Edit Group`}
+        </ActionItem>
-              variant="plain"
+      </ActionsTd>
-              component={Link}
-              to={`${editUrl}`}
-            >
-              <PencilAltIcon />
-            </Button>
-          </ActionItem>
-        </ActionsTd>
-      )}
     </Tr>
   );
 }

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

@@ -1,43 +1,28 @@
 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 history = createMemoryHistory({
+  const mockGroup = mockRelatedGroups.results[0];
-    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>
-        <table>
+        <tbody>
-          <tbody>
+          <InventoryRelatedGroupListItem
-            <InventoryRelatedGroupListItem
+            detailUrl="/group/1"
-              detailUrl="/group/1"
+            editUrl="/group/1"
-              editUrl="/group/1"
+            group={mockGroup}
-              group={mockGroup}
+            isSelected={false}
-              isSelected={false}
+            onSelect={() => {}}
-              onSelect={() => {}}
+            rowIndex={0}
-              rowIndex={0}
+          />
-            />
+        </tbody>
-          </tbody>
+      </table>
-        </table>
-      </Route>,
-      { context: { router: { history } } }
     );
   });
 
@@ -51,60 +36,18 @@ describe('<InventoryRelatedGroupListItem />', () => {
 
   test('edit button hidden from users without edit capabilities', () => {
     wrapper = mountWithContexts(
-      <Route path="/inventories/:inventoryType/:id/groups/:groupId/nested_groups">
+      <table>
-        <table>
+        <tbody>
-          <tbody>
+          <InventoryRelatedGroupListItem
-            <InventoryRelatedGroupListItem
+            detailUrl="/group/1"
-              detailUrl="/group/1"
+            editUrl="/group/1"
-              editUrl="/group/1"
+            group={mockRelatedGroups.results[2]}
-              group={mockRelatedGroups.results[2]}
+            isSelected={false}
-              isSelected={false}
+            onSelect={() => {}}
-              onSelect={() => {}}
+            rowIndex={0}
-              rowIndex={0}
+          />
-            />
+        </tbody>
-          </tbody>
+      </table>
-        </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/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 '../shared/useWsInventorySourcesDetails';
+import useWsInventorySourcesDetails from '../InventorySources/useWsInventorySourcesDetails';
 import getHelpText from '../shared/Inventory.helptext';
 
 function InventorySourceDetail({ inventorySource }) {

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

@@ -0,0 +1,42 @@
+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;
+}

awx/ui/src/screens/Inventory/InventorySources/useWsInventorySourcesDetails.test.js

@@ -1,12 +1,9 @@
 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 />;
 }
@@ -114,27 +111,6 @@ 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();
   });
 });

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 AdvancedInventoryHosts from './AdvancedInventoryHosts';
+import SmartInventoryHosts from './SmartInventoryHosts';
 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">
-              <AdvancedInventoryHosts
+              <SmartInventoryHosts
                 inventory={inventory}
                 setBreadcrumb={setBreadcrumb}
               />

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

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

@@ -7,14 +7,14 @@ import {
   waitForElement,
 } from '../../../../testUtils/enzymeHelpers';
 import mockHost from '../shared/data.host.json';
-import AdvancedInventoryHost from './AdvancedInventoryHost';
+import SmartInventoryHost from './SmartInventoryHost';
 
 jest.mock('../../../api');
 jest.mock('react-router-dom', () => ({
   ...jest.requireActual('react-router-dom'),
   useRouteMatch: () => ({
     params: { id: 1234, hostId: 2 },
-    path: '/inventories/:inventoryType/:id/hosts/:hostId',
+    path: '/inventories/smart_inventory/:id/hosts/:hostId',
     url: '/inventories/smart_inventory/1234/hosts/2',
   }),
 }));
@@ -24,7 +24,7 @@ const mockSmartInventory = {
   name: 'Mock Smart Inventory',
 };
 
-describe('<AdvancedInventoryHost />', () => {
+describe('<SmartInventoryHost />', () => {
   let wrapper;
   let history;
 
@@ -36,7 +36,7 @@ describe('<AdvancedInventoryHost />', () => {
     InventoriesAPI.readHostDetail.mockResolvedValue(mockHost);
     await act(async () => {
       wrapper = mountWithContexts(
-        <AdvancedInventoryHost
+        <SmartInventoryHost
           inventory={mockSmartInventory}
           setBreadcrumb={() => {}}
         />
@@ -55,7 +55,7 @@ describe('<AdvancedInventoryHost />', () => {
     InventoriesAPI.readHostDetail.mockRejectedValueOnce(new Error());
     await act(async () => {
       wrapper = mountWithContexts(
-        <AdvancedInventoryHost
+        <SmartInventoryHost
           inventory={mockSmartInventory}
           setBreadcrumb={() => {}}
         />
@@ -76,7 +76,7 @@ describe('<AdvancedInventoryHost />', () => {
     });
     await act(async () => {
       wrapper = mountWithContexts(
-        <AdvancedInventoryHost
+        <SmartInventoryHost
           inventory={mockSmartInventory}
           setBreadcrumb={() => {}}
         />,

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

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

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Link, useParams } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 
 import { t } from '@lingui/macro';
 import { Host } from 'types';
@@ -8,8 +8,7 @@ import { Detail, DetailList, UserDateDetail } from 'components/DetailList';
 import Sparkline from 'components/Sparkline';
 import { VariablesDetail } from 'components/CodeEditor';
 
-function AdvancedInventoryHostDetail({ host }) {
+function SmartInventoryHostDetail({ host }) {
-  const { inventoryType } = useParams();
   const {
     created,
     description,
@@ -25,7 +24,6 @@ function AdvancedInventoryHostDetail({ host }) {
     type: 'job',
   }));
 
-  const inventoryKind = inventory.kind === '' ? 'inventory' : inventoryType;
   return (
     <CardBody>
       <DetailList gutter="sm">
@@ -39,7 +37,7 @@ function AdvancedInventoryHostDetail({ host }) {
         <Detail
           label={t`Inventory`}
           value={
-            <Link to={`/inventories/${inventoryKind}/${inventory?.id}/details`}>
+            <Link to={`/inventories/inventory/${inventory?.id}/details`}>
               {inventory?.name}
             </Link>
           }
@@ -63,8 +61,8 @@ function AdvancedInventoryHostDetail({ host }) {
   );
 }
 
-AdvancedInventoryHostDetail.propTypes = {
+SmartInventoryHostDetail.propTypes = {
   host: Host.isRequired,
 };
 
-export default AdvancedInventoryHostDetail;
+export default SmartInventoryHostDetail;

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

@@ -1,17 +1,15 @@
 import React from 'react';
 import { mountWithContexts } from '../../../../testUtils/enzymeHelpers';
-import AdvancedInventoryHostDetail from './AdvancedInventoryHostDetail';
+import SmartInventoryHostDetail from './SmartInventoryHostDetail';
 import mockHost from '../shared/data.host.json';
 
 jest.mock('../../../api');
 
-describe('<AdvancedInventoryHostDetail />', () => {
+describe('<SmartInventoryHostDetail />', () => {
   let wrapper;
 
   beforeAll(() => {
-    wrapper = mountWithContexts(
+    wrapper = mountWithContexts(<SmartInventoryHostDetail host={mockHost} />);
-      <AdvancedInventoryHostDetail host={mockHost} />
-    );
   });
 
   test('should render Details', () => {
@@ -32,12 +30,11 @@ describe('<AdvancedInventoryHostDetail />', () => {
 
   test('should not load Activity', () => {
     wrapper = mountWithContexts(
-      <AdvancedInventoryHostDetail
+      <SmartInventoryHostDetail
         host={{
           ...mockHost,
           summary_fields: {
             recent_jobs: [],
-            inventory: { kind: 'constructed', id: 2 },
           },
         }}
       />

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

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

awx/ui/src/screens/Inventory/SmartInventoryHosts/SmartInventoryHostList.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 AdvancedInventoryHostListItem from './AdvancedInventoryHostListItem';
+import SmartInventoryHostListItem from './SmartInventoryHostListItem';
 
 const QS_CONFIG = getQSConfig('host', {
   page: 1,
@@ -21,7 +21,7 @@ const QS_CONFIG = getQSConfig('host', {
   order_by: 'name',
 });
 
-function AdvancedInventoryHostList({ inventory }) {
+function SmartInventoryHostList({ inventory }) {
   const location = useLocation();
   const [isAdHocLaunchLoading, setIsAdHocLaunchLoading] = useState(false);
   const {
@@ -61,10 +61,7 @@ function AdvancedInventoryHostList({ inventory }) {
   useEffect(() => {
     fetchHosts();
   }, [fetchHosts]);
-  const inventoryType =
+
-    inventory.kind === 'constructed'
-      ? 'constructed_inventory'
-      : 'smart_inventory';
   return (
     <PaginatedTable
       contentError={contentError}
@@ -117,11 +114,10 @@ function AdvancedInventoryHostList({ inventory }) {
         </HeaderRow>
       }
       renderRow={(host, index) => (
-        <AdvancedInventoryHostListItem
+        <SmartInventoryHostListItem
           key={host.id}
           host={host}
-          inventoryType={inventoryType}
+          detailUrl={`/inventories/smart_inventory/${inventory.id}/hosts/${host.id}/details`}
-          detailUrl={`/inventories/${inventoryType}/${inventory.id}/hosts/${host.id}/details`}
           isSelected={selected.some((row) => row.id === host.id)}
           onSelect={() => handleSelect(host)}
           rowIndex={index}
@@ -131,8 +127,8 @@ function AdvancedInventoryHostList({ inventory }) {
   );
 }
 
-AdvancedInventoryHostList.propTypes = {
+SmartInventoryHostList.propTypes = {
   inventory: Inventory.isRequired,
 };
 
-export default AdvancedInventoryHostList;
+export default SmartInventoryHostList;

awx/ui/src/screens/Inventory/SmartInventoryHosts/SmartInventoryHostList.test.js

@@ -5,13 +5,13 @@ import {
   mountWithContexts,
   waitForElement,
 } from '../../../../testUtils/enzymeHelpers';
-import AdvancedInventoryHostList from './AdvancedInventoryHostList';
+import SmartInventoryHostList from './SmartInventoryHostList';
 import mockInventory from '../shared/data.inventory.json';
 import mockHosts from '../shared/data.hosts.json';
 
 jest.mock('../../../api');
 
-describe('<AdvancedInventoryHostList />', () => {
+describe('<SmartInventoryHostList />', () => {
   let wrapper;
   const clonedInventory = {
     ...mockInventory,
@@ -44,7 +44,7 @@ describe('<AdvancedInventoryHostList />', () => {
     });
     await act(async () => {
       wrapper = mountWithContexts(
-        <AdvancedInventoryHostList inventory={clonedInventory} />
+        <SmartInventoryHostList inventory={clonedInventory} />
       );
     });
     await waitForElement(wrapper, 'ContentLoading', (el) => el.length === 0);
@@ -55,12 +55,12 @@ describe('<AdvancedInventoryHostList />', () => {
   });
 
   test('initially renders successfully', () => {
-    expect(wrapper.find('AdvancedInventoryHostList').length).toBe(1);
+    expect(wrapper.find('SmartInventoryHostList').length).toBe(1);
   });
 
   test('should fetch hosts from api and render them in the list', () => {
     expect(InventoriesAPI.readHosts).toHaveBeenCalled();
-    expect(wrapper.find('AdvancedInventoryHostListItem').length).toBe(3);
+    expect(wrapper.find('SmartInventoryHostListItem').length).toBe(3);
   });
 
   test('should select and deselect all items', async () => {
@@ -87,7 +87,7 @@ describe('<AdvancedInventoryHostList />', () => {
     );
     await act(async () => {
       wrapper = mountWithContexts(
-        <AdvancedInventoryHostList inventory={mockInventory} />
+        <SmartInventoryHostList inventory={mockInventory} />
       );
     });
     await waitForElement(wrapper, 'ContentError', (el) => el.length === 1);

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

@@ -9,26 +9,20 @@ import { Tr, Td } from '@patternfly/react-table';
 import Sparkline from 'components/Sparkline';
 import { Host } from 'types';
 
-function AdvancedInventoryHostListItem({
+function SmartInventoryHostListItem({
   detailUrl,
-  host: {
+  host,
-    name,
-    id,
-    summary_fields: { recent_jobs, inventory },
-  },
   isSelected,
   onSelect,
   rowIndex,
-  inventoryType,
 }) {
-  const recentPlaybookJobs = recent_jobs.map((job) => ({
+  const recentPlaybookJobs = host.summary_fields.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-${id}`} ouiaId={`host-row-${id}`}>
+    <Tr id={`host-row-${host.id}`} ouiaId={`host-row-${host.id}`}>
       <Td
         select={{
           rowIndex,
@@ -38,24 +32,28 @@ function AdvancedInventoryHostListItem({
       />
       <Td dataLabel={t`Name`}>
         <Link to={`${detailUrl}`}>
-          <b>{name}</b>
+          <b>{host.name}</b>
         </Link>
       </Td>
       <Td dataLabel={t`Recent jobs`}>
         <Sparkline jobs={recentPlaybookJobs} />
       </Td>
       <Td dataLabel={t`Inventory`}>
-        <Link to={inventoryLink}>{inventory.name}</Link>
+        <Link
+          to={`/inventories/inventory/${host.summary_fields.inventory.id}/details`}
+        >
+          {host.summary_fields.inventory.name}
+        </Link>
       </Td>
     </Tr>
   );
 }
 
-AdvancedInventoryHostListItem.propTypes = {
+SmartInventoryHostListItem.propTypes = {
   detailUrl: string.isRequired,
   host: Host.isRequired,
   isSelected: bool.isRequired,
   onSelect: func.isRequired,
 };
 
-export default AdvancedInventoryHostListItem;
+export default SmartInventoryHostListItem;

awx/ui/src/screens/Inventory/SmartInventoryHosts/SmartInventoryHostListItem.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { mountWithContexts } from '../../../../testUtils/enzymeHelpers';
-import AdvancedInventoryHostListItem from './AdvancedInventoryHostListItem';
+import SmartInventoryHostListItem from './SmartInventoryHostListItem';
 
 const mockHost = {
   id: 2,
@@ -19,14 +19,14 @@ const mockHost = {
   },
 };
 
-describe('<AdvancedInventoryHostListItem />', () => {
+describe('<SmartInventoryHostListItem />', () => {
   let wrapper;
 
   beforeEach(() => {
     wrapper = mountWithContexts(
       <table>
         <tbody>
-          <AdvancedInventoryHostListItem
+          <SmartInventoryHostListItem
             detailUrl="/inventories/smart_inventory/1/hosts/2"
             host={mockHost}
             isSelected={false}

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Route, Switch } from 'react-router-dom';
+import { Inventory } from 'types';
+import SmartInventoryHostList from './SmartInventoryHostList';
+import SmartInventoryHost from '../SmartInventoryHost';
+
+function SmartInventoryHosts({ inventory, setBreadcrumb }) {
+  return (
+    <Switch>
+      <Route key="host" path="/inventories/smart_inventory/:id/hosts/:hostId">
+        <SmartInventoryHost
+          setBreadcrumb={setBreadcrumb}
+          inventory={inventory}
+        />
+      </Route>
+      <Route key="host-list" path="/inventories/smart_inventory/:id/hosts">
+        <SmartInventoryHostList inventory={inventory} />
+      </Route>
+    </Switch>
+  );
+}
+
+SmartInventoryHosts.propTypes = {
+  inventory: Inventory.isRequired,
+};
+
+export default SmartInventoryHosts;

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

@@ -5,39 +5,37 @@ import {
   mountWithContexts,
   waitForElement,
 } from '../../../../testUtils/enzymeHelpers';
-import AdvancedInventoryHosts from './AdvancedInventoryHosts';
+import SmartInventoryHosts from './SmartInventoryHosts';
 
 jest.mock('../../../api');
-jest.mock('./AdvancedInventoryHostList', () => {
+jest.mock('./SmartInventoryHostList', () => {
-  const AdvancedInventoryHostList = () => <div />;
+  const SmartInventoryHostList = () => <div />;
   return {
     __esModule: true,
-    default: AdvancedInventoryHostList,
+    default: SmartInventoryHostList,
   };
 });
 
-describe('<AdvancedInventoryHosts />', () => {
+describe('<SmartInventoryHosts />', () => {
   test('should render smart inventory host list', () => {
     const history = createMemoryHistory({
       initialEntries: ['/inventories/smart_inventory/1/hosts'],
     });
     const match = {
-      path: '/inventories/:inventoryType/:id/hosts',
+      path: '/inventories/smart_inventory/:id/hosts',
       url: '/inventories/smart_inventory/1/hosts',
       isExact: true,
     };
     const wrapper = mountWithContexts(
-      <AdvancedInventoryHosts inventory={{ id: 1 }} />,
+      <SmartInventoryHosts inventory={{ id: 1 }} />,
       {
         context: { router: { history, route: { match } } },
       }
     );
-    expect(wrapper.find('AdvancedInventoryHostList').length).toBe(1);
+    expect(wrapper.find('SmartInventoryHostList').length).toBe(1);
-    expect(wrapper.find('AdvancedInventoryHostList').prop('inventory')).toEqual(
+    expect(wrapper.find('SmartInventoryHostList').prop('inventory')).toEqual({
-      {
+      id: 1,
-        id: 1,
+    });
-      }
-    );
     jest.clearAllMocks();
   });
 
@@ -47,23 +45,20 @@ describe('<AdvancedInventoryHosts />', () => {
       initialEntries: ['/inventories/smart_inventory/1/hosts/2'],
     });
     const match = {
-      path: '/inventories/:inventoryType/:id/hosts/:hostId',
+      path: '/inventories/smart_inventory/:id/hosts/:hostId',
       url: '/inventories/smart_inventory/1/hosts/2',
       isExact: true,
     };
     await act(async () => {
       wrapper = mountWithContexts(
-        <AdvancedInventoryHosts
+        <SmartInventoryHosts inventory={{ id: 1 }} setBreadcrumb={() => {}} />,
-          inventory={{ id: 1 }}
-          setBreadcrumb={() => {}}
-        />,
         {
           context: { router: { history, route: { match } } },
         }
       );
     });
     await waitForElement(wrapper, 'ContentLoading', (el) => el.length === 0);
-    expect(wrapper.find('AdvancedInventoryHost').length).toBe(1);
+    expect(wrapper.find('SmartInventoryHost').length).toBe(1);
     jest.clearAllMocks();
   });
 });

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

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

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

@@ -1,58 +0,0 @@
-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,
-      },
-    },
-  };
-}