Merge pull request #8243 from AlexSCorey/AdHocCommandsOnLists

Adds Ad Hoc Commands To Remaining Lists Reviewed-by: https://github.com/apps/softwarefactory-project-zuul
2026-02-28 16:28:43 -03:30 · 2020-10-07 21:55:14 +00:00
parent 503886b704 b04be850b5
commit a1700404cd
18 changed files with 848 additions and 548 deletions
--- a/awx/ui_next/src/api/models/Groups.js
+++ b/awx/ui_next/src/api/models/Groups.js
@@ -12,7 +12,9 @@ class Groups extends Base {
  }

  associateHost(id, hostId) {
-    return this.http.post(`${this.baseUrl}${id}/hosts/`, { id: hostId });
+    return this.http.post(`${this.baseUrl}${id}/hosts/`, {
+      id: hostId,
+    });
  }

  createHost(id, data) {
@@ -20,7 +22,9 @@ class Groups extends Base {
  }

  readAllHosts(id, params) {
-    return this.http.get(`${this.baseUrl}${id}/all_hosts/`, { params });
+    return this.http.get(`${this.baseUrl}${id}/all_hosts/`, {
+      params,
+    });
  }

  disassociateHost(id, host) {
@@ -29,6 +33,10 @@ class Groups extends Base {
      disassociate: true,
    });
  }
+
+  readChildren(id, params) {
+    return this.http.get(`${this.baseUrl}${id}/children/`, params);
+  }
 }

 export default Groups;
--- a/awx/ui_next/src/components/AdHocCommands/AdHocCommands.jsx
+++ b/awx/ui_next/src/components/AdHocCommands/AdHocCommands.jsx
@@ -1,19 +1,25 @@
-import React, { useState, Fragment, useCallback, useEffect } from 'react';
+import React, { useCallback } from 'react';
 import { useHistory } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import PropTypes from 'prop-types';

 import useRequest, { useDismissableError } from '../../util/useRequest';
+import { InventoriesAPI } from '../../api';
+
 import AlertModal from '../AlertModal';
-import { CredentialTypesAPI } from '../../api';
 import ErrorDetail from '../ErrorDetail';
 import AdHocCommandsWizard from './AdHocCommandsWizard';
 import ContentLoading from '../ContentLoading';
-import ContentError from '../ContentError';

-function AdHocCommands({ children, apiModule, adHocItems, itemId, i18n }) {
-  const [isWizardOpen, setIsWizardOpen] = useState(false);
+function AdHocCommands({
+  onClose,
+  adHocItems,
+  itemId,
+  i18n,
+  moduleOptions,
+  credentialTypeId,
+}) {
  const history = useHistory();
  const verbosityOptions = [
    { value: '0', key: '0', label: i18n._(t`0 (Normal)`) },
@@ -22,59 +28,26 @@ function AdHocCommands({ children, apiModule, adHocItems, itemId, i18n }) {
    { value: '3', key: '3', label: i18n._(t`3 (Debug)`) },
    { value: '4', key: '4', label: i18n._(t`4 (Connection Debug)`) },
  ];
-  const {
-    error: fetchError,
-    request: fetchModuleOptions,
-    result: { moduleOptions, credentialTypeId },
-  } = useRequest(
-    useCallback(async () => {
-      const [choices, credId] = await Promise.all([
-        apiModule.readAdHocOptions(itemId),
-        CredentialTypesAPI.read({ namespace: 'ssh' }),
-      ]);
-      const itemObject = (item, index) => {
-        return {
-          key: index,
-          value: item,
-          label: `${item}`,
-          isDisabled: false,
-        };
-      };
-
-      const options = choices.data.actions.GET.module_name.choices.map(
-        (choice, index) => itemObject(choice[0], index)
-      );
-
-      return {
-        moduleOptions: [itemObject('', -1), ...options],
-        credentialTypeId: credId.data.results[0].id,
-      };
-    }, [itemId, apiModule]),
-    { moduleOptions: [] }
-  );
-
-  useEffect(() => {
-    fetchModuleOptions();
-  }, [fetchModuleOptions]);

  const {
    isloading: isLaunchLoading,
-    error: launchError,
+    error,
    request: launchAdHocCommands,
  } = useRequest(
    useCallback(
      async values => {
-        const { data } = await apiModule.launchAdHocCommands(itemId, values);
+        const { data } = await InventoriesAPI.launchAdHocCommands(
+          itemId,
+          values
+        );
        history.push(`/jobs/command/${data.id}/output`);
      },

-      [apiModule, itemId, history]
+      [itemId, history]
    )
  );

-  const { error, dismissError } = useDismissableError(
-    launchError || fetchError
-  );
+  const { dismissError } = useDismissableError(error);

  const handleSubmit = async values => {
    const { credential, ...remainingValues } = values;
@@ -85,14 +58,13 @@ function AdHocCommands({ children, apiModule, adHocItems, itemId, i18n }) {
      ...remainingValues,
    };
    await launchAdHocCommands(manipulatedValues);
-    setIsWizardOpen(false);
  };

  if (isLaunchLoading) {
    return <ContentLoading />;
  }

-  if (error && isWizardOpen) {
+  if (error) {
    return (
      <AlertModal
        isOpen={error}
@@ -100,43 +72,29 @@ function AdHocCommands({ children, apiModule, adHocItems, itemId, i18n }) {
        title={i18n._(t`Error!`)}
        onClose={() => {
          dismissError();
-          setIsWizardOpen(false);
        }}
      >
-        {launchError ? (
-          <>
-            {i18n._(t`Failed to launch job.`)}
-            <ErrorDetail error={error} />
-          </>
-        ) : (
-          <ContentError error={error} />
-        )}
+        <>
+          {i18n._(t`Failed to launch job.`)}
+          <ErrorDetail error={error} />
+        </>
      </AlertModal>
    );
  }
  return (
-    <Fragment>
-      {children({
-        openAdHocCommands: () => setIsWizardOpen(true),
-      })}
-
-      {isWizardOpen && (
-        <AdHocCommandsWizard
-          adHocItems={adHocItems}
-          moduleOptions={moduleOptions}
-          verbosityOptions={verbosityOptions}
-          credentialTypeId={credentialTypeId}
-          onCloseWizard={() => setIsWizardOpen(false)}
-          onLaunch={handleSubmit}
-          onDismissError={() => dismissError()}
-        />
-      )}
-    </Fragment>
+    <AdHocCommandsWizard
+      adHocItems={adHocItems}
+      moduleOptions={moduleOptions}
+      verbosityOptions={verbosityOptions}
+      credentialTypeId={credentialTypeId}
+      onCloseWizard={onClose}
+      onLaunch={handleSubmit}
+      onDismissError={() => dismissError()}
+    />
  );
 }

 AdHocCommands.propTypes = {
-  children: PropTypes.func.isRequired,
  adHocItems: PropTypes.arrayOf(PropTypes.object).isRequired,
  itemId: PropTypes.number.isRequired,
 };
--- a/awx/ui_next/src/components/AdHocCommands/AdHocCommands.test.jsx
+++ b/awx/ui_next/src/components/AdHocCommands/AdHocCommands.test.jsx
@@ -18,6 +18,10 @@ const credentials = [
  { id: 4, kind: 'Machine', name: 'Cred 4', url: 'www.google.com' },
  { id: 5, kind: 'Machine', name: 'Cred 5', url: 'www.google.com' },
 ];
+const moduleOptions = [
+  ['command', 'command'],
+  ['shell', 'shell'],
+];
 const adHocItems = [
  {
    name: 'Inventory 1 Org 0',
@@ -25,10 +29,6 @@ const adHocItems = [
  { name: 'Inventory 2 Org 0' },
 ];

-const children = ({ openAdHocCommands }) => (
-  <button type="submit" onClick={() => openAdHocCommands()} />
-);
-
 describe('<AdHocCommands />', () => {
  let wrapper;
  afterEach(() => {
@@ -40,111 +40,38 @@ describe('<AdHocCommands />', () => {
    await act(async () => {
      wrapper = mountWithContexts(
        <AdHocCommands
-          apiModule={InventoriesAPI}
-          adHocItems={adHocItems}
+          css="margin-right: 20px"
+          onClose={() => {}}
          itemId={1}
          credentialTypeId={1}
-        >
-          {children}
-        </AdHocCommands>
+          adHocItems={adHocItems}
+          moduleOptions={moduleOptions}
+        />
      );
    });
    expect(wrapper.find('AdHocCommands').length).toBe(1);
  });
-  test('calls api on Mount', async () => {
-    await act(async () => {
-      wrapper = mountWithContexts(
-        <AdHocCommands
-          apiModule={InventoriesAPI}
-          adHocItems={adHocItems}
-          itemId={1}
-          credentialTypeId={1}
-        >
-          {children}
-        </AdHocCommands>
-      );
-    });
-    expect(wrapper.find('AdHocCommands').length).toBe(1);
-    expect(InventoriesAPI.readAdHocOptions).toBeCalledWith(1);
-    expect(CredentialTypesAPI.read).toBeCalledWith({ namespace: 'ssh' });
-  });
-  test('should open the wizard', async () => {
-    InventoriesAPI.readAdHocOptions.mockResolvedValue({
-      data: {
-        actions: {
-          GET: {
-            module_name: {
-              choices: [
-                ['command', 'command'],
-                ['foo', 'foo'],
-              ],
-            },
-            verbosity: { choices: [[1], [2]] },
-          },
-        },
-      },
-    });
-    CredentialTypesAPI.read.mockResolvedValue({
-      data: { results: [{ id: 1 }] },
-    });
-    await act(async () => {
-      wrapper = mountWithContexts(
-        <AdHocCommands
-          apiModule={InventoriesAPI}
-          adHocItems={adHocItems}
-          itemId={1}
-          credentialTypeId={1}
-        >
-          {children}
-        </AdHocCommands>
-      );
-    });
-    await act(async () => wrapper.find('button').prop('onClick')());
-
-    wrapper.update();
-
-    expect(wrapper.find('AdHocCommandsWizard').length).toBe(1);
-  });

  test('should submit properly', async () => {
-    InventoriesAPI.readAdHocOptions.mockResolvedValue({
-      data: {
-        actions: {
-          GET: {
-            module_name: {
-              choices: [
-                ['command', 'command'],
-                ['foo', 'foo'],
-              ],
-            },
-            verbosity: { choices: [[1], [2]] },
-          },
-        },
-      },
-    });
-    CredentialTypesAPI.read.mockResolvedValue({
-      data: { results: [{ id: 1 }] },
-    });
+    InventoriesAPI.launchAdHocCommands.mockResolvedValue({ data: { id: 1 } });
    CredentialsAPI.read.mockResolvedValue({
      data: {
        results: credentials,
        count: 5,
      },
    });
-    InventoriesAPI.launchAdHocCommands.mockResolvedValue({ data: { id: 1 } });
    await act(async () => {
      wrapper = mountWithContexts(
        <AdHocCommands
-          apiModule={InventoriesAPI}
-          adHocItems={adHocItems}
+          css="margin-right: 20px"
+          onClose={() => {}}
          itemId={1}
          credentialTypeId={1}
-        >
-          {children}
-        </AdHocCommands>
+          adHocItems={adHocItems}
+          moduleOptions={moduleOptions}
+        />
      );
    });
-    await act(async () => wrapper.find('button').prop('onClick')());

    wrapper.update();

@@ -177,6 +104,7 @@ describe('<AdHocCommands />', () => {
    );
    await waitForElement(wrapper, 'ContentEmpty', el => el.length === 0);
    // second step of wizard
+
    await act(async () => {
      wrapper
        .find('input[aria-labelledby="check-action-item-4"]')
@@ -205,10 +133,6 @@ describe('<AdHocCommands />', () => {
      module_name: 'command',
      verbosity: 1,
    });
-
-    wrapper.update();
-
-    expect(wrapper.find('AdHocCommandsWizard').length).toBe(0);
  });

  test('should throw error on submission properly', async () => {
@@ -251,16 +175,15 @@ describe('<AdHocCommands />', () => {
    await act(async () => {
      wrapper = mountWithContexts(
        <AdHocCommands
-          apiModule={InventoriesAPI}
-          adHocItems={adHocItems}
-          itemId={1}
+          css="margin-right: 20px"
+          onClose={() => {}}
          credentialTypeId={1}
-        >
-          {children}
-        </AdHocCommands>
+          itemId={1}
+          adHocItems={adHocItems}
+          moduleOptions={moduleOptions}
+        />
      );
    });
-    await act(async () => wrapper.find('button').prop('onClick')());

    wrapper.update();

@@ -312,36 +235,6 @@ describe('<AdHocCommands />', () => {
      wrapper.find('Button[type="submit"]').prop('onClick')()
    );

-    waitForElement(wrapper, 'ErrorDetail', el => el.length > 0);
-    expect(wrapper.find('AdHocCommandsWizard').length).toBe(0);
-  });
-  test('should open alert modal when error on fetching data', async () => {
-    InventoriesAPI.readAdHocOptions.mockRejectedValue(
-      new Error({
-        response: {
-          config: {
-            method: 'options',
-            url: '/api/v2/inventories/1/',
-          },
-          data: 'An error occurred',
-          status: 403,
-        },
-      })
-    );
-    await act(async () => {
-      wrapper = mountWithContexts(
-        <AdHocCommands
-          apiModule={InventoriesAPI}
-          adHocItems={adHocItems}
-          itemId={1}
-          credentialTypeId={1}
-        >
-          {children}
-        </AdHocCommands>
-      );
-    });
-    await act(async () => wrapper.find('button').prop('onClick')());
-    wrapper.update();
-    expect(wrapper.find('ErrorDetail').length).toBe(1);
+    await waitForElement(wrapper, 'ErrorDetail', el => el.length > 0);
  });
 });
--- a/awx/ui_next/src/components/AdHocCommands/AdHocCommandsWizard.jsx
+++ b/awx/ui_next/src/components/AdHocCommands/AdHocCommandsWizard.jsx
@@ -1,13 +1,26 @@
 import React, { useState } from 'react';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
+import { ExclamationCircleIcon as PFExclamationCircleIcon } from '@patternfly/react-icons';
+import { Tooltip } from '@patternfly/react-core';
 import { withFormik, useFormikContext } from 'formik';
 import PropTypes from 'prop-types';

+import styled from 'styled-components';
 import Wizard from '../Wizard';
 import AdHocCredentialStep from './AdHocCredentialStep';
 import AdHocDetailsStep from './AdHocDetailsStep';

+const AlertText = styled.div`
+  color: var(--pf-global--danger-color--200);
+  font-weight: var(--pf-global--FontWeight--bold);
+`;
+
+const ExclamationCircleIcon = styled(PFExclamationCircleIcon)`
+  margin-left: 10px;
+  color: var(--pf-global--danger-color--100);
+`;
+
 function AdHocCommandsWizard({
  onLaunch,
  i18n,
@@ -19,7 +32,7 @@ function AdHocCommandsWizard({
  const [currentStepId, setCurrentStepId] = useState(1);
  const [enableLaunch, setEnableLaunch] = useState(false);

-  const { values } = useFormikContext();
+  const { values, errors, touched } = useFormikContext();

  const enabledNextOnDetailsStep = () => {
    if (!values.module_name) {
@@ -36,11 +49,26 @@ function AdHocCommandsWizard({
    }
    return undefined; // makes the linter happy;
  };
+  const hasDetailsStepError = errors.module_args && touched.module_args;
+
  const steps = [
    {
      id: 1,
      key: 1,
-      name: i18n._(t`Details`),
+      name: hasDetailsStepError ? (
+        <AlertText>
+          {i18n._(t`Details`)}
+          <Tooltip
+            position="right"
+            content={i18n._(t`This step contains errors`)}
+            trigger="click mouseenter focus"
+          >
+            <ExclamationCircleIcon />
+          </Tooltip>
+        </AlertText>
+      ) : (
+        i18n._(t`Details`)
+      ),
      component: (
        <AdHocDetailsStep
          moduleOptions={moduleOptions}
@@ -60,7 +88,7 @@ function AdHocCommandsWizard({
          onEnableLaunch={() => setEnableLaunch(true)}
        />
      ),
-      enableNext: enableLaunch,
+      enableNext: enableLaunch && Object.values(errors).length === 0,
      nextButtonText: i18n._(t`Launch`),
      canJumpTo: currentStepId >= 2,
    },
--- a/awx/ui_next/src/components/AdHocCommands/AdHocCommandsWizard.test.jsx
+++ b/awx/ui_next/src/components/AdHocCommands/AdHocCommandsWizard.test.jsx
@@ -148,6 +148,20 @@ describe('<AdHocCommandsWizard/>', () => {

    expect(onLaunch).toHaveBeenCalled();
  });
+  test('should show error in navigation bar', async () => {
+    await waitForElement(wrapper, 'WizardNavItem', el => el.length > 0);
+
+    await act(async () => {
+      wrapper.find('AnsibleSelect[name="module_name"]').prop('onChange')(
+        {},
+        'command'
+      );
+      wrapper.find('input#module_args').simulate('change', {
+        target: { value: '', name: 'module_args' },
+      });
+    });
+    waitForElement(wrapper, 'ExclamationCircleIcon', el => el.length > 0);
+  });

  test('expect credential step to throw error', async () => {
    CredentialsAPI.read.mockRejectedValue(
--- a/awx/ui_next/src/components/AdHocCommands/AdHocCredentialStep.jsx
+++ b/awx/ui_next/src/components/AdHocCommands/AdHocCredentialStep.jsx
@@ -65,6 +65,7 @@ function AdHocCredentialStep({ i18n, credentialTypeId, onEnableLaunch }) {
      <FormGroup
        fieldId="credential"
        label={i18n._(t`Machine Credential`)}
+        aria-label={i18n._(t`Machine Credential`)}
        isRequired
        validated={
          !credentialMeta.touched || !credentialMeta.error ? 'default' : 'error'
--- a/awx/ui_next/src/components/AdHocCommands/AdHocDetailsStep.jsx
+++ b/awx/ui_next/src/components/AdHocCommands/AdHocDetailsStep.jsx
@@ -27,32 +27,43 @@ const TooltipWrapper = styled.div`
 // in failing tests.
 const brandName = BrandName;

-function CredentialStep({ i18n, verbosityOptions, moduleOptions }) {
-  const [module_nameField, module_nameMeta, module_nameHelpers] = useField({
+function AdHocDetailsStep({ i18n, verbosityOptions, moduleOptions }) {
+  const [moduleNameField, moduleNameMeta, moduleNameHelpers] = useField({
    name: 'module_name',
    validate: required(null, i18n),
  });

  const [variablesField] = useField('extra_vars');
-  const [diff_modeField, , diff_modeHelpers] = useField('diff_mode');
-  const [become_enabledField, , become_enabledHelpers] = useField(
+  const [diffModeField, , diffModeHelpers] = useField('diff_mode');
+  const [becomeEnabledField, , becomeEnabledHelpers] = useField(
    'become_enabled'
  );
  const [verbosityField, verbosityMeta, verbosityHelpers] = useField({
    name: 'verbosity',
    validate: required(null, i18n),
  });
+
+  const argumentsRequired =
+    moduleNameField.value === 'command' || moduleNameField.value === 'shell';
+  const [, argumentsMeta, argumentsHelpers] = useField({
+    name: 'module_args',
+    validate: argumentsRequired && required(null, i18n),
+  });
+
+  const isValid = !argumentsMeta.error || !argumentsMeta.touched;
+
  return (
    <Form>
      <FormColumnLayout>
        <FormFullWidthLayout>
          <FormGroup
            fieldId="module_name"
+            aria-label={i18n._(t`Module`)}
            label={i18n._(t`Module`)}
            isRequired
-            helperTextInvalid={module_nameMeta.error}
+            helperTextInvalid={moduleNameMeta.error}
            validated={
-              !module_nameMeta.touched || !module_nameMeta.error
+              !moduleNameMeta.touched || !moduleNameMeta.error
                ? 'default'
                : 'error'
            }
@@ -65,33 +76,52 @@ function CredentialStep({ i18n, verbosityOptions, moduleOptions }) {
            }
          >
            <AnsibleSelect
-              {...module_nameField}
-              isValid={!module_nameMeta.touched || !module_nameMeta.error}
+              {...moduleNameField}
+              placeHolder={i18n._(t`Select a module`)}
+              isValid={!moduleNameMeta.touched || !moduleNameMeta.error}
              id="module_name"
-              data={moduleOptions || []}
+              data={[
+                {
+                  value: '',
+                  key: '',
+                  label: i18n._(t`Choose a module`),
+                  isDisabled: true,
+                },
+                ...moduleOptions.map(value => ({
+                  value: value[0],
+                  label: value[0],
+                  key: value[0],
+                })),
+              ]}
              onChange={(event, value) => {
-                module_nameHelpers.setValue(value);
+                if (value !== 'command' && value !== 'shell') {
+                  argumentsHelpers.setTouched(false);
+                }
+                moduleNameHelpers.setValue(value);
              }}
            />
          </FormGroup>
          <FormField
            id="module_args"
            name="module_args"
+            aria-label={i18n._(t`Arguments`)}
            type="text"
            label={i18n._(t`Arguments`)}
-            validate={required(null, i18n)}
+            validated={isValid ? 'default' : 'error'}
+            onBlur={() => argumentsHelpers.setTouched(true)}
+            placeholder={i18n._(t`Enter arguments`)}
            isRequired={
-              module_nameField.value === 'command' ||
-              module_nameField.value === 'shell'
+              moduleNameField.value === 'command' ||
+              moduleNameField.value === 'shell'
            }
            tooltip={
-              module_nameField.value ? (
+              moduleNameField.value ? (
                <>
                  {i18n._(
-                    t`These arguments are used with the specified module. You can find information about ${module_nameField.value} by clicking `
+                    t`These arguments are used with the specified module. You can find information about ${moduleNameField.value} by clicking `
                  )}
                  <a
-                    href={`https://docs.ansible.com/ansible/latest/modules/${module_nameField.value}_module.html`}
+                    href={`https://docs.ansible.com/ansible/latest/modules/${moduleNameField.value}_module.html`}
                    target="_blank"
                    rel="noopener noreferrer"
                  >
@@ -106,6 +136,7 @@ function CredentialStep({ i18n, verbosityOptions, moduleOptions }) {
          />
          <FormGroup
            fieldId="verbosity"
+            aria-label={i18n._(t`Verbosity`)}
            label={i18n._(t`Verbosity`)}
            isRequired
            validated={
@@ -137,6 +168,7 @@ function CredentialStep({ i18n, verbosityOptions, moduleOptions }) {
            name="limit"
            type="text"
            label={i18n._(t`Limit`)}
+            aria-label={i18n._(t`Limit`)}
            tooltip={
              <span>
                {i18n._(
@@ -158,6 +190,7 @@ function CredentialStep({ i18n, verbosityOptions, moduleOptions }) {
            type="number"
            min="0"
            label={i18n._(t`Forks`)}
+            aria-label={i18n._(t`Forks`)}
            tooltip={
              <span>
                {i18n._(
@@ -176,6 +209,7 @@ function CredentialStep({ i18n, verbosityOptions, moduleOptions }) {
          <FormColumnLayout>
            <FormGroup
              label={i18n._(t`Show changes`)}
+              aria-label={i18n._(t`Show changes`)}
              labelIcon={
                <FieldTooltip
                  content={i18n._(
@@ -189,9 +223,9 @@ function CredentialStep({ i18n, verbosityOptions, moduleOptions }) {
                id="diff_mode"
                label={i18n._(t`On`)}
                labelOff={i18n._(t`Off`)}
-                isChecked={diff_modeField.value}
+                isChecked={diffModeField.value}
                onChange={() => {
-                  diff_modeHelpers.setValue(!diff_modeField.value);
+                  diffModeHelpers.setValue(!diffModeField.value);
                }}
                aria-label={i18n._(t`toggle changes`)}
              />
@@ -222,9 +256,9 @@ function CredentialStep({ i18n, verbosityOptions, moduleOptions }) {
                    </span>
                  }
                  id="become_enabled"
-                  isChecked={become_enabledField.value}
+                  isChecked={becomeEnabledField.value}
                  onChange={checked => {
-                    become_enabledHelpers.setValue(checked);
+                    becomeEnabledHelpers.setValue(checked);
                  }}
                />
              </FormCheckboxLayout>
@@ -273,6 +307,7 @@ function CredentialStep({ i18n, verbosityOptions, moduleOptions }) {
              </TooltipWrapper>
            }
            label={i18n._(t`Extra variables`)}
+            aria-label={i18n._(t`Extra variables`)}
          />
        </FormFullWidthLayout>
      </FormColumnLayout>
@@ -280,9 +315,9 @@ function CredentialStep({ i18n, verbosityOptions, moduleOptions }) {
  );
 }

-CredentialStep.propTypes = {
+AdHocDetailsStep.propTypes = {
  moduleOptions: PropTypes.arrayOf(PropTypes.object).isRequired,
  verbosityOptions: PropTypes.arrayOf(PropTypes.object).isRequired,
 };

-export default withI18n()(CredentialStep);
+export default withI18n()(AdHocDetailsStep);
--- a/awx/ui_next/src/components/AdHocCommands/AdHocDetailsStep.test.jsx
+++ b/awx/ui_next/src/components/AdHocCommands/AdHocDetailsStep.test.jsx
@@ -12,9 +12,8 @@ const verbosityOptions = [
  { key: 1, value: 1, label: '1', isDisabled: false },
 ];
 const moduleOptions = [
-  { key: -1, value: '', label: '', isDisabled: false },
-  { key: 0, value: 'command', label: 'command', isDisabled: false },
-  { key: 1, value: 'shell', label: 'shell', isDisabled: false },
+  ['command', 'command'],
+  ['shell', 'shell'],
 ];
 const onLimitChange = jest.fn();
 const initialValues = {
--- a/awx/ui_next/src/screens/Inventory/InventoryGroupHosts/InventoryGroupHostList.jsx
+++ b/awx/ui_next/src/screens/Inventory/InventoryGroupHosts/InventoryGroupHostList.jsx
@@ -2,8 +2,14 @@ import React, { useEffect, useCallback, useState } from 'react';
 import { useHistory, useLocation, useParams } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
+import {
+  Button,
+  Tooltip,
+  DropdownItem,
+  ToolbarItem,
+} from '@patternfly/react-core';
 import { getQSConfig, mergeParams, parseQueryString } from '../../../util/qs';
-import { GroupsAPI, InventoriesAPI } from '../../../api';
+import { GroupsAPI, InventoriesAPI, CredentialTypesAPI } from '../../../api';

 import useRequest, {
  useDeleteItems,
@@ -16,6 +22,8 @@ import ErrorDetail from '../../../components/ErrorDetail';
 import PaginatedDataList from '../../../components/PaginatedDataList';
 import AssociateModal from '../../../components/AssociateModal';
 import DisassociateButton from '../../../components/DisassociateButton';
+import { Kebabified } from '../../../contexts/Kebabified';
+import AdHocCommands from '../../../components/AdHocCommands/AdHocCommands';
 import InventoryGroupHostListItem from './InventoryGroupHostListItem';
 import AddHostDropdown from './AddHostDropdown';

@@ -27,6 +35,7 @@ const QS_CONFIG = getQSConfig('host', {

 function InventoryGroupHostList({ i18n }) {
  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isAdHocCommandsOpen, setIsAdHocCommandsOpen] = useState(false);
  const { id: inventoryId, groupId } = useParams();
  const location = useLocation();
  const history = useHistory();
@@ -38,6 +47,9 @@ function InventoryGroupHostList({ i18n }) {
      actions,
      relatedSearchableKeys,
      searchableKeys,
+      moduleOptions,
+      credentialTypeId,
+      isAdHocDisabled,
    },
    error: contentError,
    isLoading,
@@ -45,9 +57,16 @@ function InventoryGroupHostList({ i18n }) {
  } = useRequest(
    useCallback(async () => {
      const params = parseQueryString(QS_CONFIG, location.search);
-      const [response, actionsResponse] = await Promise.all([
+      const [
+        response,
+        actionsResponse,
+        adHocOptions,
+        cred,
+      ] = await Promise.all([
        GroupsAPI.readAllHosts(groupId, params),
        InventoriesAPI.readHostsOptions(inventoryId),
+        InventoriesAPI.readAdHocOptions(inventoryId),
+        CredentialTypesAPI.read({ namespace: 'ssh' }),
      ]);

      return {
@@ -60,6 +79,9 @@ function InventoryGroupHostList({ i18n }) {
        searchableKeys: Object.keys(
          actionsResponse.data.actions?.GET || {}
        ).filter(key => actionsResponse.data.actions?.GET[key].filterable),
+        moduleOptions: adHocOptions.data.actions.GET.module_name.choices,
+        credentialTypeId: cred.data.results[0].id,
+        isAdHocDisabled: !adHocOptions.data.actions.POST,
      };
    }, [groupId, inventoryId, location.search]),
    {
@@ -68,6 +90,8 @@ function InventoryGroupHostList({ i18n }) {
      actions: {},
      relatedSearchableKeys: [],
      searchableKeys: [],
+      moduleOptions: [],
+      isAdHocDisabled: true,
    }
  );

@@ -195,6 +219,40 @@ function InventoryGroupHostList({ i18n }) {
                    />,
                  ]
                : []),
+              <Kebabified>
+                {({ isKebabified }) =>
+                  isKebabified ? (
+                    <DropdownItem
+                      variant="secondary"
+                      aria-label={i18n._(t`Run command`)}
+                      onClick={() => setIsAdHocCommandsOpen(true)}
+                      isDisabled={hostCount === 0 || isAdHocDisabled}
+                    >
+                      {i18n._(t`Run command`)}
+                    </DropdownItem>
+                  ) : (
+                    <ToolbarItem>
+                      <Tooltip
+                        content={i18n._(
+                          t`Select an inventory source by clicking the check box beside it.
+                          The inventory source can be a single host or a selection of multiple hosts.`
+                        )}
+                        position="top"
+                        key="adhoc"
+                      >
+                        <Button
+                          variant="secondary"
+                          aria-label={i18n._(t`Run command`)}
+                          onClick={() => setIsAdHocCommandsOpen(true)}
+                          isDisabled={hostCount === 0 || isAdHocDisabled}
+                        >
+                          {i18n._(t`Run command`)}
+                        </Button>
+                      </Tooltip>
+                    </ToolbarItem>
+                  )
+                }
+              </Kebabified>,
              <DisassociateButton
                key="disassociate"
                onDisassociate={handleDisassociate}
@@ -222,6 +280,7 @@ function InventoryGroupHostList({ i18n }) {
        emptyStateControls={
          canAdd && (
            <AddHostDropdown
+              key="associate"
              onAddExisting={() => setIsModalOpen(true)}
              onAddNew={() => history.push(addFormUrl)}
            />
@@ -239,6 +298,16 @@ function InventoryGroupHostList({ i18n }) {
          title={i18n._(t`Select Hosts`)}
        />
      )}
+      {isAdHocCommandsOpen && (
+        <AdHocCommands
+          css="margin-right: 20px"
+          adHocItems={selected}
+          itemId={parseInt(inventoryId, 10)}
+          onClose={() => setIsAdHocCommandsOpen(false)}
+          credentialTypeId={credentialTypeId}
+          moduleOptions={moduleOptions}
+        />
+      )}
      {associateError && (
        <AlertModal
          isOpen={associateError}
--- a/awx/ui_next/src/screens/Inventory/InventoryGroupHosts/InventoryGroupHostList.test.jsx
+++ b/awx/ui_next/src/screens/Inventory/InventoryGroupHosts/InventoryGroupHostList.test.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { act } from 'react-dom/test-utils';
 import { createMemoryHistory } from 'history';
-import { GroupsAPI, InventoriesAPI } from '../../../api';
+import { GroupsAPI, InventoriesAPI, CredentialTypesAPI } from '../../../api';
 import {
  mountWithContexts,
  waitForElement,
@@ -11,6 +11,7 @@ import mockHosts from '../shared/data.hosts.json';

 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: () => ({
@@ -34,6 +35,17 @@ describe('<InventoryGroupHostList />', () => {
        },
      },
    });
+    InventoriesAPI.readAdHocOptions.mockResolvedValue({
+      data: {
+        actions: {
+          GET: { module_name: { choices: [['module']] } },
+          POST: {},
+        },
+      },
+    });
+    CredentialTypesAPI.read.mockResolvedValue({
+      data: { count: 1, results: [{ id: 1, name: 'cred' }] },
+    });
    await act(async () => {
      wrapper = mountWithContexts(<InventoryGroupHostList />);
    });
@@ -95,6 +107,29 @@ describe('<InventoryGroupHostList />', () => {
    });
  });

+  test('should render enabled ad hoc commands button', async () => {
+    GroupsAPI.readAllHosts.mockResolvedValue({
+      data: { ...mockHosts },
+    });
+    InventoriesAPI.readHostsOptions.mockResolvedValue({
+      data: {
+        actions: {
+          GET: {},
+          POST: {},
+        },
+      },
+    });
+    await act(async () => {
+      wrapper = mountWithContexts(<InventoryGroupHostList />);
+    });
+
+    await waitForElement(
+      wrapper,
+      'button[aria-label="Run command"]',
+      el => el.prop('disabled') === false
+    );
+  });
+
  test('should show add dropdown button according to permissions', async () => {
    expect(wrapper.find('AddHostDropdown').length).toBe(1);
    InventoriesAPI.readHostsOptions.mockResolvedValueOnce({
--- a/awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupsList.jsx
+++ b/awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupsList.jsx
@@ -12,7 +12,7 @@ import {
 import { getQSConfig, parseQueryString } from '../../../util/qs';
 import useSelected from '../../../util/useSelected';
 import useRequest from '../../../util/useRequest';
-import { InventoriesAPI, GroupsAPI } from '../../../api';
+import { InventoriesAPI, GroupsAPI, CredentialTypesAPI } from '../../../api';
 import AlertModal from '../../../components/AlertModal';
 import ErrorDetail from '../../../components/ErrorDetail';
 import DataListToolbar from '../../../components/DataListToolbar';
@@ -22,7 +22,8 @@ import PaginatedDataList, {

 import InventoryGroupItem from './InventoryGroupItem';
 import InventoryGroupsDeleteModal from '../shared/InventoryGroupsDeleteModal';
-import AdHocCommandsButton from '../../../components/AdHocCommands/AdHocCommands';
+
+import AdHocCommands from '../../../components/AdHocCommands/AdHocCommands';
 import { Kebabified } from '../../../contexts/Kebabified';

 const QS_CONFIG = getQSConfig('group', {
@@ -51,6 +52,7 @@ const useModal = () => {
 function InventoryGroupsList({ i18n }) {
  const [deletionError, setDeletionError] = useState(null);
  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+  const [isAdHocCommandsOpen, setIsAdHocCommandsOpen] = useState(false);
  const location = useLocation();
  const { isModalOpen, toggleModal } = useModal();
  const { id: inventoryId } = useParams();
@@ -62,27 +64,36 @@ function InventoryGroupsList({ i18n }) {
      actions,
      relatedSearchableKeys,
      searchableKeys,
+      moduleOptions,
+      credentialTypeId,
+      isAdHocDisabled,
    },
    error: contentError,
    isLoading,
-    request: fetchGroups,
+    request: fetchData,
  } = useRequest(
    useCallback(async () => {
      const params = parseQueryString(QS_CONFIG, location.search);
-      const [response, actionsResponse] = await Promise.all([
+      const [response, groupOptions, adHocOptions, cred] = await Promise.all([
        InventoriesAPI.readGroups(inventoryId, params),
        InventoriesAPI.readGroupsOptions(inventoryId),
+        InventoriesAPI.readAdHocOptions(inventoryId),
+        CredentialTypesAPI.read({ namespace: 'ssh' }),
      ]);
+
      return {
        groups: response.data.results,
        groupCount: response.data.count,
-        actions: actionsResponse.data.actions,
+        actions: groupOptions.data.actions,
        relatedSearchableKeys: (
-          actionsResponse?.data?.related_search_fields || []
+          groupOptions?.data?.related_search_fields || []
        ).map(val => val.slice(0, -8)),
        searchableKeys: Object.keys(
-          actionsResponse.data.actions?.GET || {}
-        ).filter(key => actionsResponse.data.actions?.GET[key].filterable),
+          groupOptions.data.actions?.GET || {}
+        ).filter(key => groupOptions.data.actions?.GET[key].filterable),
+        moduleOptions: adHocOptions.data.actions.GET.module_name.choices,
+        credentialTypeId: cred.data.results[0].id,
+        isAdHocDisabled: !adHocOptions.data.actions.POST,
      };
    }, [inventoryId, location]),
    {
@@ -95,8 +106,8 @@ function InventoryGroupsList({ i18n }) {
  );

  useEffect(() => {
-    fetchGroups();
-  }, [fetchGroups]);
+    fetchData();
+  }, [fetchData]);

  const { selected, isAllSelected, handleSelect, setSelected } = useSelected(
    groups
@@ -144,7 +155,7 @@ function InventoryGroupsList({ i18n }) {
    }

    toggleModal();
-    fetchGroups();
+    fetchData();
    setSelected([]);
    setIsDeleteLoading(false);
  };
@@ -153,21 +164,14 @@ function InventoryGroupsList({ i18n }) {
  const kebabedAdditionalControls = () => {
    return (
      <>
-        <AdHocCommandsButton
-          adHocItems={selected}
-          apiModule={InventoriesAPI}
-          itemId={parseInt(inventoryId, 10)}
+        <DropdownItem
+          key="run command"
+          onClick={() => setIsAdHocCommandsOpen(true)}
+          isDisabled={groupCount === 0 || isAdHocDisabled}
        >
-          {({ openAdHocCommands }) => (
-            <DropdownItem
-              key="run command"
-              onClick={openAdHocCommands}
-              isDisabled={groupCount === 0}
-            >
-              {i18n._(t`Run command`)}
-            </DropdownItem>
-          )}
-        </AdHocCommandsButton>
+          {i18n._(t`Run command`)}
+        </DropdownItem>
+
        <DropdownItem
          variant="danger"
          aria-label={i18n._(t`Delete`)}
@@ -264,23 +268,14 @@ function InventoryGroupsList({ i18n }) {
                            position="top"
                            key="adhoc"
                          >
-                            <AdHocCommandsButton
-                              css="margin-right: 20px"
-                              adHocItems={selected}
-                              apiModule={InventoriesAPI}
-                              itemId={parseInt(inventoryId, 10)}
+                            <Button
+                              variant="secondary"
+                              aria-label={i18n._(t`Run command`)}
+                              onClick={() => setIsAdHocCommandsOpen(true)}
+                              isDisabled={groupCount === 0 || isAdHocDisabled}
                            >
-                              {({ openAdHocCommands }) => (
-                                <Button
-                                  variant="secondary"
-                                  aria-label={i18n._(t`Run command`)}
-                                  onClick={openAdHocCommands}
-                                  isDisabled={groupCount === 0}
-                                >
-                                  {i18n._(t`Run command`)}
-                                </Button>
-                              )}
-                            </AdHocCommandsButton>
+                              {i18n._(t`Run command`)}
+                            </Button>
                          </Tooltip>
                        </ToolbarItem>
                        <ToolbarItem>
@@ -321,6 +316,16 @@ function InventoryGroupsList({ i18n }) {
          )
        }
      />
+      {isAdHocCommandsOpen && (
+        <AdHocCommands
+          css="margin-right: 20px"
+          adHocItems={selected}
+          itemId={parseInt(inventoryId, 10)}
+          onClose={() => setIsAdHocCommandsOpen(false)}
+          credentialTypeId={credentialTypeId}
+          moduleOptions={moduleOptions}
+        />
+      )}
      {deletionError && (
        <AlertModal
          isOpen={deletionError}
--- a/awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupsList.test.jsx
+++ b/awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupsList.test.jsx
@@ -6,7 +6,7 @@ import {
  mountWithContexts,
  waitForElement,
 } from '../../../../testUtils/enzymeHelpers';
-import { InventoriesAPI, GroupsAPI } from '../../../api';
+import { InventoriesAPI, GroupsAPI, CredentialTypesAPI } from '../../../api';
 import InventoryGroupsList from './InventoryGroupsList';

 jest.mock('../../../api');
@@ -71,6 +71,17 @@ describe('<InventoryGroupsList />', () => {
        },
      },
    });
+    InventoriesAPI.readAdHocOptions.mockResolvedValue({
+      data: {
+        actions: {
+          GET: { module_name: { choices: [['module']] } },
+          POST: {},
+        },
+      },
+    });
+    CredentialTypesAPI.read.mockResolvedValue({
+      data: { count: 1, results: [{ id: 1, name: 'cred' }] },
+    });
    const history = createMemoryHistory({
      initialEntries: ['/inventories/inventory/3/groups'],
    });
@@ -147,31 +158,17 @@ describe('<InventoryGroupsList />', () => {
      expect(el.props().checked).toBe(false);
    });
  });
+  test('should render enabled ad hoc commands button', async () => {
+    await waitForElement(
+      wrapper,
+      'button[aria-label="Run command"]',
+      el => el.prop('disabled') === false
+    );
+  });
 });
 describe('<InventoryGroupsList/> error handling', () => {
  let wrapper;
-  test('should show content error when api throws error on initial render', async () => {
-    InventoriesAPI.readGroupsOptions.mockImplementationOnce(() =>
-      Promise.reject(new Error())
-    );
-    await act(async () => {
-      wrapper = mountWithContexts(<InventoryGroupsList />);
-    });
-    await waitForElement(wrapper, 'ContentError', el => el.length > 0);
-  });
-
-  test('should show content error if groups are not successfully fetched from api', async () => {
-    InventoriesAPI.readGroups.mockImplementation(() =>
-      Promise.reject(new Error())
-    );
-    await act(async () => {
-      wrapper = mountWithContexts(<InventoryGroupsList />);
-    });
-
-    await waitForElement(wrapper, 'ContentError', el => el.length > 0);
-  });
-
-  test('should show error modal when group is not successfully deleted from api', async () => {
+  beforeEach(() => {
    InventoriesAPI.readGroups.mockResolvedValue({
      data: {
        count: mockGroups.length,
@@ -197,7 +194,42 @@ describe('<InventoryGroupsList/> error handling', () => {
        },
      })
    );
+    InventoriesAPI.readAdHocOptions.mockResolvedValue({
+      data: {
+        actions: {
+          GET: { module_name: { choices: [['module']] } },
+        },
+      },
+    });
+    CredentialTypesAPI.read.mockResolvedValue({
+      data: { count: 1, results: [{ id: 1, name: 'cred' }] },
+    });
+  });
+  afterEach(() => {
+    jest.clearAllMocks();
+    wrapper.unmount();
+  });
+  test('should show content error when api throws error on initial render', async () => {
+    InventoriesAPI.readGroupsOptions.mockImplementationOnce(() =>
+      Promise.reject(new Error())
+    );
+    await act(async () => {
+      wrapper = mountWithContexts(<InventoryGroupsList />);
+    });
+    await waitForElement(wrapper, 'ContentError', el => el.length > 0);
+  });

+  test('should show content error if groups are not successfully fetched from api', async () => {
+    InventoriesAPI.readGroups.mockImplementation(() =>
+      Promise.reject(new Error())
+    );
+    await act(async () => {
+      wrapper = mountWithContexts(<InventoryGroupsList />);
+    });
+    await waitForElement(wrapper, 'ContentError', el => el.length > 0);
+  });
+
+  test('should show error modal when group is not successfully deleted from api', async () => {
    const history = createMemoryHistory({
      initialEntries: ['/inventories/inventory/3/groups'],
    });
@@ -249,4 +281,27 @@ describe('<InventoryGroupsList/> error handling', () => {
        .invoke('onClose')();
    });
  });
+  test('should render disabled ad hoc button', async () => {
+    const history = createMemoryHistory({
+      initialEntries: ['/inventories/inventory/3/groups'],
+    });
+
+    await act(async () => {
+      wrapper = mountWithContexts(
+        <Route path="/inventories/inventory/:id/groups">
+          <InventoryGroupsList />
+        </Route>,
+        {
+          context: {
+            router: { history, route: { location: history.location } },
+          },
+        }
+      );
+    });
+
+    await waitForElement(wrapper, 'ContentLoading', el => el.length === 0);
+    expect(
+      wrapper.find('button[aria-label="Run command"]').prop('disabled')
+    ).toBe(true);
+  });
 });
--- a/awx/ui_next/src/screens/Inventory/InventoryHostGroups/InventoryHostGroupsList.jsx
+++ b/awx/ui_next/src/screens/Inventory/InventoryHostGroups/InventoryHostGroupsList.jsx
@@ -2,13 +2,19 @@ import React, { useState, useEffect, useCallback } from 'react';
 import { useParams, useLocation } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
+import {
+  Button,
+  Tooltip,
+  DropdownItem,
+  ToolbarItem,
+} from '@patternfly/react-core';
 import { getQSConfig, parseQueryString, mergeParams } from '../../../util/qs';
 import useRequest, {
  useDismissableError,
  useDeleteItems,
 } from '../../../util/useRequest';
 import useSelected from '../../../util/useSelected';
-import { HostsAPI, InventoriesAPI } from '../../../api';
+import { HostsAPI, InventoriesAPI, CredentialTypesAPI } from '../../../api';
 import DataListToolbar from '../../../components/DataListToolbar';
 import AlertModal from '../../../components/AlertModal';
 import ErrorDetail from '../../../components/ErrorDetail';
@@ -17,6 +23,8 @@ import PaginatedDataList, {
 } from '../../../components/PaginatedDataList';
 import AssociateModal from '../../../components/AssociateModal';
 import DisassociateButton from '../../../components/DisassociateButton';
+import { Kebabified } from '../../../contexts/Kebabified';
+import AdHocCommands from '../../../components/AdHocCommands/AdHocCommands';
 import InventoryHostGroupItem from './InventoryHostGroupItem';

 const QS_CONFIG = getQSConfig('group', {
@@ -27,6 +35,7 @@ const QS_CONFIG = getQSConfig('group', {

 function InventoryHostGroupsList({ i18n }) {
  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isAdHocCommandsOpen, setIsAdHocCommandsOpen] = useState(false);
  const { hostId, id: invId } = useParams();
  const { search } = useLocation();

@@ -37,6 +46,9 @@ function InventoryHostGroupsList({ i18n }) {
      actions,
      relatedSearchableKeys,
      searchableKeys,
+      moduleOptions,
+      isAdHocDisabled,
+      credentialTypeId,
    },
    error: contentError,
    isLoading,
@@ -49,22 +61,29 @@ function InventoryHostGroupsList({ i18n }) {
        {
          data: { count, results },
        },
-        actionsResponse,
+        hostGroupOptions,
+        adHocOptions,
+        cred,
      ] = await Promise.all([
        HostsAPI.readAllGroups(hostId, params),
        HostsAPI.readGroupsOptions(hostId),
+        InventoriesAPI.readAdHocOptions(invId),
+        CredentialTypesAPI.read({ namespace: 'ssh' }),
      ]);

      return {
        groups: results,
        itemCount: count,
-        actions: actionsResponse.data.actions,
+        actions: hostGroupOptions.data.actions,
        relatedSearchableKeys: (
-          actionsResponse?.data?.related_search_fields || []
+          hostGroupOptions?.data?.related_search_fields || []
        ).map(val => val.slice(0, -8)),
        searchableKeys: Object.keys(
-          actionsResponse.data.actions?.GET || {}
-        ).filter(key => actionsResponse.data.actions?.GET[key].filterable),
+          hostGroupOptions.data.actions?.GET || {}
+        ).filter(key => hostGroupOptions.data.actions?.GET[key].filterable),
+        moduleOptions: adHocOptions.data.actions.GET.module_name.choices,
+        credentialTypeId: cred.data.results[0].id,
+        isAdHocDisabled: !adHocOptions.data.actions.POST,
      };
    }, [hostId, search]), // eslint-disable-line react-hooks/exhaustive-deps
    {
@@ -73,6 +92,8 @@ function InventoryHostGroupsList({ i18n }) {
      actions: {},
      relatedSearchableKeys: [],
      searchableKeys: [],
+      moduleOptions: [],
+      isAdHocDisabled: true,
    }
  );

@@ -201,6 +222,40 @@ function InventoryHostGroupsList({ i18n }) {
                    />,
                  ]
                : []),
+              <Kebabified>
+                {({ isKebabified }) =>
+                  isKebabified ? (
+                    <DropdownItem
+                      key="run command"
+                      aria-label={i18n._(t`Run command`)}
+                      onClick={() => setIsAdHocCommandsOpen(true)}
+                      isDisabled={itemCount === 0 || isAdHocDisabled}
+                    >
+                      {i18n._(t`Run command`)}
+                    </DropdownItem>
+                  ) : (
+                    <ToolbarItem>
+                      <Tooltip
+                        content={i18n._(
+                          t`Select an inventory source by clicking the check box beside it. The inventory source can be a single group or host, a selection of multiple hosts, or a selection of multiple groups.`
+                        )}
+                        position="top"
+                        key="adhoc"
+                      >
+                        <Button
+                          key="run command"
+                          variant="secondary"
+                          aria-label={i18n._(t`Run command`)}
+                          onClick={() => setIsAdHocCommandsOpen(true)}
+                          isDisabled={itemCount === 0 || isAdHocDisabled}
+                        >
+                          {i18n._(t`Run command`)}
+                        </Button>
+                      </Tooltip>
+                    </ToolbarItem>
+                  )
+                }
+              </Kebabified>,
              <DisassociateButton
                key="disassociate"
                onDisassociate={handleDisassociate}
@@ -208,8 +263,8 @@ function InventoryHostGroupsList({ i18n }) {
                modalTitle={i18n._(t`Disassociate group from host?`)}
                modalNote={i18n._(t`
                  Note that you may still see the group in the list after
-                  disassociating if the host is also a member of that group’s 
-                  children.  This list shows all groups the host is associated 
+                  disassociating if the host is also a member of that group’s
+                  children.  This list shows all groups the host is associated
                  with directly and indirectly.
                `)}
              />,
@@ -233,6 +288,16 @@ function InventoryHostGroupsList({ i18n }) {
          title={i18n._(t`Select Groups`)}
        />
      )}
+      {isAdHocCommandsOpen && (
+        <AdHocCommands
+          css="margin-right: 20px"
+          adHocItems={selected}
+          itemId={parseInt(invId, 10)}
+          onClose={() => setIsAdHocCommandsOpen(false)}
+          credentialTypeId={credentialTypeId}
+          moduleOptions={moduleOptions}
+        />
+      )}
      {error && (
        <AlertModal
          isOpen={error}
--- a/awx/ui_next/src/screens/Inventory/InventoryHostGroups/InventoryHostGroupsList.test.jsx
+++ b/awx/ui_next/src/screens/Inventory/InventoryHostGroups/InventoryHostGroupsList.test.jsx
@@ -6,7 +6,7 @@ import {
  mountWithContexts,
  waitForElement,
 } from '../../../../testUtils/enzymeHelpers';
-import { HostsAPI, InventoriesAPI } from '../../../api';
+import { HostsAPI, InventoriesAPI, CredentialTypesAPI } from '../../../api';
 import InventoryHostGroupsList from './InventoryHostGroupsList';

 jest.mock('../../../api');
@@ -80,6 +80,17 @@ describe('<InventoryHostGroupsList />', () => {
        },
      },
    });
+    InventoriesAPI.readAdHocOptions.mockResolvedValue({
+      data: {
+        actions: {
+          GET: { module_name: { choices: [['module']] } },
+          POST: {},
+        },
+      },
+    });
+    CredentialTypesAPI.read.mockResolvedValue({
+      data: { count: 1, results: [{ id: 1, name: 'cred' }] },
+    });
    const history = createMemoryHistory({
      initialEntries: ['/inventories/inventory/1/hosts/3/groups'],
    });
@@ -272,4 +283,11 @@ describe('<InventoryHostGroupsList />', () => {
    wrapper.update();
    expect(wrapper.find('AlertModal ErrorDetail').length).toBe(1);
  });
+  test('should render enabled ad hoc commands button', async () => {
+    await waitForElement(
+      wrapper,
+      'button[aria-label="Run command"]',
+      el => el.prop('disabled') === false
+    );
+  });
 });
--- a/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostList.jsx
+++ b/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostList.jsx
@@ -1,10 +1,16 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useCallback } from 'react';
 import { useParams, useLocation } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
+import {
+  Button,
+  Tooltip,
+  DropdownItem,
+  ToolbarItem,
+} from '@patternfly/react-core';
 import { getQSConfig, parseQueryString } from '../../../util/qs';
-import { InventoriesAPI, HostsAPI } from '../../../api';
-
+import { InventoriesAPI, HostsAPI, CredentialTypesAPI } from '../../../api';
+import useRequest, { useDeleteItems } from '../../../util/useRequest';
 import AlertModal from '../../../components/AlertModal';
 import DataListToolbar from '../../../components/DataListToolbar';
 import ErrorDetail from '../../../components/ErrorDetail';
@@ -12,6 +18,8 @@ import PaginatedDataList, {
  ToolbarAddButton,
  ToolbarDeleteButton,
 } from '../../../components/PaginatedDataList';
+import { Kebabified } from '../../../contexts/Kebabified';
+import AdHocCommands from '../../../components/AdHocCommands/AdHocCommands';
 import InventoryHostItem from './InventoryHostItem';

 const QS_CONFIG = getQSConfig('host', {
@@ -21,48 +29,64 @@ const QS_CONFIG = getQSConfig('host', {
 });

 function InventoryHostList({ i18n }) {
-  const [actions, setActions] = useState(null);
-  const [contentError, setContentError] = useState(null);
-  const [deletionError, setDeletionError] = useState(null);
-  const [hostCount, setHostCount] = useState(0);
-  const [hosts, setHosts] = useState([]);
-  const [isLoading, setIsLoading] = useState(true);
+  const [isAdHocCommandsOpen, setIsAdHocCommandsOpen] = useState(false);
  const [selected, setSelected] = useState([]);
  const { id } = useParams();
  const { search } = useLocation();

-  const fetchHosts = (hostId, queryString) => {
-    const params = parseQueryString(QS_CONFIG, queryString);
-    return InventoriesAPI.readHosts(hostId, params);
-  };
+  const {
+    result: {
+      hosts,
+      hostCount,
+      actions,
+      relatedSearchableKeys,
+      searchableKeys,
+      moduleOptions,
+      credentialTypeId,
+      isAdHocDisabled,
+    },
+    error: contentError,
+    isLoading,
+    request: fetchData,
+  } = useRequest(
+    useCallback(async () => {
+      const params = parseQueryString(QS_CONFIG, search);
+      const [response, hostOptions, adHocOptions, cred] = await Promise.all([
+        InventoriesAPI.readHosts(id, params),
+        InventoriesAPI.readHostsOptions(id),
+        InventoriesAPI.readAdHocOptions(id),
+        CredentialTypesAPI.read({ namespace: 'ssh' }),
+      ]);
+
+      return {
+        hosts: response.data.results,
+        hostCount: response.data.count,
+        actions: hostOptions.data.actions,
+        relatedSearchableKeys: (
+          hostOptions?.data?.related_search_fields || []
+        ).map(val => val.slice(0, -8)),
+        searchableKeys: Object.keys(hostOptions.data.actions?.GET || {}).filter(
+          key => hostOptions.data.actions?.GET[key].filterable
+        ),
+        moduleOptions: adHocOptions.data.actions.GET.module_name.choices,
+        credentialTypeId: cred.data.results[0].id,
+        isAdHocDisabled: !adHocOptions.data.actions.POST,
+      };
+    }, [id, search]),
+    {
+      hosts: [],
+      hostCount: 0,
+      actions: {},
+      relatedSearchableKeys: [],
+      searchableKeys: [],
+      moduleOptions: [],
+      isAdHocDisabled: true,
+    }
+  );

  useEffect(() => {
-    async function fetchData() {
-      try {
-        const [
-          {
-            data: { count, results },
-          },
-          {
-            data: { actions: optionActions },
-          },
-        ] = await Promise.all([
-          fetchHosts(id, search),
-          InventoriesAPI.readOptions(),
-        ]);
-
-        setHosts(results);
-        setHostCount(count);
-        setActions(optionActions);
-      } catch (error) {
-        setContentError(error);
-      } finally {
-        setIsLoading(false);
-      }
-    }
-
    fetchData();
-  }, [id, search]);
+  }, [fetchData]);

  const handleSelectAll = isSelected => {
    setSelected(isSelected ? [...hosts] : []);
@@ -75,30 +99,17 @@ function InventoryHostList({ i18n }) {
      setSelected(selected.concat(row));
    }
  };
-
-  const handleDelete = async () => {
-    setIsLoading(true);
-
-    try {
+  const {
+    isLoading: isDeleteLoading,
+    deleteItems: deleteHosts,
+    deletionError,
+    clearDeletionError,
+  } = useDeleteItems(
+    useCallback(async () => {
      await Promise.all(selected.map(host => HostsAPI.destroy(host.id)));
-    } catch (error) {
-      setDeletionError(error);
-    } finally {
-      setSelected([]);
-      try {
-        const {
-          data: { count, results },
-        } = await fetchHosts(id, search);
-
-        setHosts(results);
-        setHostCount(count);
-      } catch (error) {
-        setContentError(error);
-      } finally {
-        setIsLoading(false);
-      }
-    }
-  };
+    }, [selected]),
+    { qsConfig: QS_CONFIG, fetchItems: fetchData }
+  );

  const canAdd =
    actions && Object.prototype.hasOwnProperty.call(actions, 'POST');
@@ -108,7 +119,7 @@ function InventoryHostList({ i18n }) {
    <>
      <PaginatedDataList
        contentError={contentError}
-        hasContentLoading={isLoading}
+        hasContentLoading={isLoading || isDeleteLoading}
        items={hosts}
        itemCount={hostCount}
        pluralizedItemName={i18n._(t`Hosts`)}
@@ -133,6 +144,8 @@ function InventoryHostList({ i18n }) {
            isNumeric: true,
          },
        ]}
+        toolbarSearchableKeys={searchableKeys}
+        toolbarRelatedSearchableKeys={relatedSearchableKeys}
        renderToolbar={props => (
          <DataListToolbar
            {...props}
@@ -149,9 +162,43 @@ function InventoryHostList({ i18n }) {
                    />,
                  ]
                : []),
+              <Kebabified>
+                {({ isKebabified }) =>
+                  isKebabified ? (
+                    <DropdownItem
+                      key="run command"
+                      onClick={() => setIsAdHocCommandsOpen(true)}
+                      isDisabled={hostCount === 0 || isAdHocDisabled}
+                      aria-label={i18n._(t`Run command`)}
+                    >
+                      {i18n._(t`Run command`)}
+                    </DropdownItem>
+                  ) : (
+                    <ToolbarItem>
+                      <Tooltip
+                        content={i18n._(
+                          t`Select an inventory source by clicking the check box beside it. The inventory source can be a single host or a selection of multiple hosts.`
+                        )}
+                        position="top"
+                        key="adhoc"
+                      >
+                        <Button
+                          variant="secondary"
+                          key="run command"
+                          aria-label={i18n._(t`Run command`)}
+                          onClick={() => setIsAdHocCommandsOpen(true)}
+                          isDisabled={hostCount === 0 || isAdHocDisabled}
+                        >
+                          {i18n._(t`Run command`)}
+                        </Button>
+                      </Tooltip>
+                    </ToolbarItem>
+                  )
+                }
+              </Kebabified>,
              <ToolbarDeleteButton
                key="delete"
-                onDelete={handleDelete}
+                onDelete={deleteHosts}
                itemsToDelete={selected}
                pluralizedItemName={i18n._(t`Hosts`)}
              />,
@@ -177,12 +224,22 @@ function InventoryHostList({ i18n }) {
          )
        }
      />
+      {isAdHocCommandsOpen && (
+        <AdHocCommands
+          css="margin-right: 20px"
+          adHocItems={selected}
+          onClose={() => setIsAdHocCommandsOpen(false)}
+          credentialTypeId={credentialTypeId}
+          moduleOptions={moduleOptions}
+          itemId={id}
+        />
+      )}
      {deletionError && (
        <AlertModal
          isOpen={deletionError}
          variant="error"
          title={i18n._(t`Error!`)}
-          onClose={() => setDeletionError(null)}
+          onClose={clearDeletionError}
        >
          {i18n._(t`Failed to delete one or more hosts.`)}
          <ErrorDetail error={deletionError} />
--- a/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostList.test.jsx
+++ b/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostList.test.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { act } from 'react-dom/test-utils';
-import { InventoriesAPI, HostsAPI } from '../../../api';
+import { InventoriesAPI, HostsAPI, CredentialTypesAPI } from '../../../api';
 import {
  mountWithContexts,
  waitForElement,
@@ -85,7 +85,7 @@ describe('<InventoryHostList />', () => {
        results: mockHosts,
      },
    });
-    InventoriesAPI.readOptions.mockResolvedValue({
+    InventoriesAPI.readHostsOptions.mockResolvedValue({
      data: {
        actions: {
          GET: {},
@@ -93,6 +93,17 @@ describe('<InventoryHostList />', () => {
        },
      },
    });
+    InventoriesAPI.readAdHocOptions.mockResolvedValue({
+      data: {
+        actions: {
+          GET: { module_name: { choices: [['module']] } },
+          POST: {},
+        },
+      },
+    });
+    CredentialTypesAPI.read.mockResolvedValue({
+      data: { count: 1, results: [{ id: 1, name: 'cred' }] },
+    });
    await act(async () => {
      wrapper = mountWithContexts(<InventoryHostList />);
    });
@@ -265,8 +276,15 @@ describe('<InventoryHostList />', () => {
    expect(wrapper.find('ToolbarAddButton').length).toBe(1);
  });

+  test('should render enabled ad hoc commands button', async () => {
+    await waitForElement(
+      wrapper,
+      'button[aria-label="Run command"]',
+      el => el.prop('disabled') === false
+    );
+  });
  test('should hide Add button for users without ability to POST', async () => {
-    InventoriesAPI.readOptions.mockResolvedValueOnce({
+    InventoriesAPI.readHostsOptions.mockResolvedValueOnce({
      data: {
        actions: {
          GET: {},
@@ -283,7 +301,7 @@ describe('<InventoryHostList />', () => {
  });

  test('should show content error when api throws error on initial render', async () => {
-    InventoriesAPI.readOptions.mockImplementation(() =>
+    InventoriesAPI.readHostsOptions.mockImplementation(() =>
      Promise.reject(new Error())
    );
    await act(async () => {
--- a/awx/ui_next/src/screens/Inventory/SmartInventoryHosts/SmartInventoryHostList.jsx
+++ b/awx/ui_next/src/screens/Inventory/SmartInventoryHosts/SmartInventoryHostList.jsx
@@ -1,16 +1,23 @@
-import React, { useEffect, useCallback } from 'react';
+import React, { useEffect, useCallback, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
-import { Button } from '@patternfly/react-core';
+import {
+  Button,
+  Tooltip,
+  DropdownItem,
+  ToolbarItem,
+} from '@patternfly/react-core';
 import DataListToolbar from '../../../components/DataListToolbar';
 import PaginatedDataList from '../../../components/PaginatedDataList';
 import SmartInventoryHostListItem from './SmartInventoryHostListItem';
 import useRequest from '../../../util/useRequest';
 import useSelected from '../../../util/useSelected';
 import { getQSConfig, parseQueryString } from '../../../util/qs';
-import { InventoriesAPI } from '../../../api';
+import { InventoriesAPI, CredentialTypesAPI } from '../../../api';
 import { Inventory } from '../../../types';
+import { Kebabified } from '../../../contexts/Kebabified';
+import AdHocCommands from '../../../components/AdHocCommands/AdHocCommands';

 const QS_CONFIG = getQSConfig('host', {
  page: 1,
@@ -20,24 +27,35 @@ const QS_CONFIG = getQSConfig('host', {

 function SmartInventoryHostList({ i18n, inventory }) {
  const location = useLocation();
+  const [isAdHocCommandsOpen, setIsAdHocCommandsOpen] = useState(false);

  const {
-    result: { hosts, count },
+    result: { hosts, count, moduleOptions, credentialTypeId, isAdHocDisabled },
    error: contentError,
    isLoading,
    request: fetchHosts,
  } = useRequest(
    useCallback(async () => {
      const params = parseQueryString(QS_CONFIG, location.search);
-      const { data } = await InventoriesAPI.readHosts(inventory.id, params);
+      const [hostResponse, adHocOptions, cred] = await Promise.all([
+        InventoriesAPI.readHosts(inventory.id, params),
+        InventoriesAPI.readAdHocOptions(inventory.id),
+        CredentialTypesAPI.read({ namespace: 'ssh' }),
+      ]);
+
      return {
-        hosts: data.results,
-        count: data.count,
+        hosts: hostResponse.data.results,
+        count: hostResponse.data.count,
+        moduleOptions: adHocOptions.data.actions.GET.module_name.choices,
+        credentialTypeId: cred.data.results[0].id,
+        isAdHocDisabled: !adHocOptions.data.actions.POST,
      };
    }, [location.search, inventory.id]),
    {
      hosts: [],
      count: 0,
+      moduleOptions: [],
+      isAdHocDisabled: true,
    }
  );

@@ -50,66 +68,106 @@ function SmartInventoryHostList({ i18n, inventory }) {
  }, [fetchHosts]);

  return (
-    <PaginatedDataList
-      contentError={contentError}
-      hasContentLoading={isLoading}
-      items={hosts}
-      itemCount={count}
-      pluralizedItemName={i18n._(t`Hosts`)}
-      qsConfig={QS_CONFIG}
-      onRowClick={handleSelect}
-      toolbarSearchColumns={[
-        {
-          name: i18n._(t`Name`),
-          key: 'name',
-          isDefault: true,
-        },
-        {
-          name: i18n._(t`Created by (username)`),
-          key: 'created_by__username',
-        },
-        {
-          name: i18n._(t`Modified by (username)`),
-          key: 'modified_by__username',
-        },
-      ]}
-      toolbarSortColumns={[
-        {
-          name: i18n._(t`Name`),
-          key: 'name',
-        },
-      ]}
-      renderToolbar={props => (
-        <DataListToolbar
-          {...props}
-          showSelectAll
-          isAllSelected={isAllSelected}
-          onSelectAll={isSelected => setSelected(isSelected ? [...hosts] : [])}
-          qsConfig={QS_CONFIG}
-          additionalControls={
-            inventory?.summary_fields?.user_capabilities?.adhoc
-              ? [
-                  <Button
-                    aria-label={i18n._(t`Run commands`)}
-                    isDisabled={selected.length === 0}
-                  >
-                    {i18n._(t`Run commands`)}
-                  </Button>,
-                ]
-              : []
-          }
+    <>
+      <PaginatedDataList
+        contentError={contentError}
+        hasContentLoading={isLoading}
+        items={hosts}
+        itemCount={count}
+        pluralizedItemName={i18n._(t`Hosts`)}
+        qsConfig={QS_CONFIG}
+        onRowClick={handleSelect}
+        toolbarSearchColumns={[
+          {
+            name: i18n._(t`Name`),
+            key: 'name',
+            isDefault: true,
+          },
+          {
+            name: i18n._(t`Created by (username)`),
+            key: 'created_by__username',
+          },
+          {
+            name: i18n._(t`Modified by (username)`),
+            key: 'modified_by__username',
+          },
+        ]}
+        toolbarSortColumns={[
+          {
+            name: i18n._(t`Name`),
+            key: 'name',
+          },
+        ]}
+        renderToolbar={props => (
+          <DataListToolbar
+            {...props}
+            showSelectAll
+            isAllSelected={isAllSelected}
+            onSelectAll={isSelected =>
+              setSelected(isSelected ? [...hosts] : [])
+            }
+            qsConfig={QS_CONFIG}
+            additionalControls={
+              inventory?.summary_fields?.user_capabilities?.adhoc
+                ? [
+                    <Kebabified>
+                      {({ isKebabified }) =>
+                        isKebabified ? (
+                          <DropdownItem
+                            aria-label={i18n._(t`Run command`)}
+                            onClick={() => setIsAdHocCommandsOpen(true)}
+                            isDisabled={count === 0 || isAdHocDisabled}
+                          >
+                            {i18n._(t`Run command`)}
+                          </DropdownItem>
+                        ) : (
+                          <ToolbarItem>
+                            <Tooltip
+                              content={i18n._(
+                                t`Select an inventory source by clicking the check box beside it. The inventory source can be a single host or a selection of multiple hosts.`
+                              )}
+                              position="top"
+                              key="adhoc"
+                            >
+                              <Button
+                                variant="secondary"
+                                aria-label={i18n._(t`Run command`)}
+                                onClick={() => setIsAdHocCommandsOpen(true)}
+                                isDisabled={count === 0 || isAdHocDisabled}
+                              >
+                                {i18n._(t`Run command`)}
+                              </Button>
+                            </Tooltip>
+                          </ToolbarItem>
+                        )
+                      }
+                    </Kebabified>,
+                  ]
+                : []
+            }
+          />
+        )}
+        renderItem={host => (
+          <SmartInventoryHostListItem
+            key={host.id}
+            host={host}
+            detailUrl={`/inventories/smart_inventory/${inventory.id}/hosts/${host.id}/details`}
+            isSelected={selected.some(row => row.id === host.id)}
+            onSelect={() => handleSelect(host)}
+          />
+        )}
+      />
+      {isAdHocCommandsOpen && (
+        <AdHocCommands
+          css="margin-right: 20px"
+          adHocItems={selected}
+          itemId={parseInt(inventory.id, 10)}
+          onClose={() => setIsAdHocCommandsOpen(false)}
+          credentialTypeId={credentialTypeId}
+          moduleOptions={moduleOptions}
        />
      )}
-      renderItem={host => (
-        <SmartInventoryHostListItem
-          key={host.id}
-          host={host}
-          detailUrl={`/inventories/smart_inventory/${inventory.id}/hosts/${host.id}/details`}
-          isSelected={selected.some(row => row.id === host.id)}
-          onSelect={() => handleSelect(host)}
-        />
-      )}
-    />
+    </>
  );
 }

--- a/awx/ui_next/src/screens/Inventory/SmartInventoryHosts/SmartInventoryHostList.test.jsx
+++ b/awx/ui_next/src/screens/Inventory/SmartInventoryHosts/SmartInventoryHostList.test.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { act } from 'react-dom/test-utils';
-import { InventoriesAPI } from '../../../api';
+import { InventoriesAPI, CredentialTypesAPI } from '../../../api';
 import {
  mountWithContexts,
  waitForElement,
@@ -12,125 +12,109 @@ import mockHosts from '../shared/data.hosts.json';
 jest.mock('../../../api');

 describe('<SmartInventoryHostList />', () => {
-  describe('User has adhoc permissions', () => {
-    let wrapper;
-    const clonedInventory = {
-      ...mockInventory,
-      summary_fields: {
-        ...mockInventory.summary_fields,
-        user_capabilities: {
-          ...mockInventory.summary_fields.user_capabilities,
+  let wrapper;
+  const clonedInventory = {
+    ...mockInventory,
+    summary_fields: {
+      ...mockInventory.summary_fields,
+      user_capabilities: {
+        ...mockInventory.summary_fields.user_capabilities,
+      },
+    },
+  };
+
+  beforeAll(async () => {
+    InventoriesAPI.readHosts.mockResolvedValue({
+      data: mockHosts,
+    });
+    InventoriesAPI.readAdHocOptions.mockResolvedValue({
+      data: {
+        actions: {
+          GET: { module_name: { choices: [['module']] } },
+          POST: {},
        },
      },
-    };
-
-    beforeAll(async () => {
-      InventoriesAPI.readHosts.mockResolvedValue({
-        data: mockHosts,
-      });
-      await act(async () => {
-        wrapper = mountWithContexts(
-          <SmartInventoryHostList inventory={clonedInventory} />
-        );
-      });
-      await waitForElement(wrapper, 'ContentLoading', el => el.length === 0);
    });
-
-    afterAll(() => {
-      jest.clearAllMocks();
-      wrapper.unmount();
+    CredentialTypesAPI.read.mockResolvedValue({
+      data: { count: 1, results: [{ id: 1, name: 'cred' }] },
    });
-
-    test('initially renders successfully', () => {
-      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('SmartInventoryHostListItem').length).toBe(3);
-    });
-
-    test('should disable run commands button when no hosts are selected', () => {
-      wrapper.find('DataListCheck').forEach(el => {
-        expect(el.props().checked).toBe(false);
-      });
-      const runCommandsButton = wrapper.find(
-        'button[aria-label="Run commands"]'
+    await act(async () => {
+      wrapper = mountWithContexts(
+        <SmartInventoryHostList inventory={clonedInventory} />
      );
-      expect(runCommandsButton.length).toBe(1);
-      expect(runCommandsButton.prop('disabled')).toEqual(true);
    });
+    await waitForElement(wrapper, 'ContentLoading', el => el.length === 0);
+  });

-    test('should enable run commands button when at least one host is selected', () => {
-      act(() => {
-        wrapper.find('DataListCheck[id="select-host-2"]').invoke('onChange')(
-          true
-        );
-      });
-      wrapper.update();
-      const runCommandsButton = wrapper.find(
-        'button[aria-label="Run commands"]'
-      );
-      expect(runCommandsButton.prop('disabled')).toEqual(false);
+  afterAll(() => {
+    jest.clearAllMocks();
+    wrapper.unmount();
+  });
+
+  test('initially renders successfully', () => {
+    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('SmartInventoryHostListItem').length).toBe(3);
+  });
+
+  test('should have run command button', () => {
+    wrapper.find('DataListCheck').forEach(el => {
+      expect(el.props().checked).toBe(false);
    });
+    const runCommandsButton = wrapper.find('button[aria-label="Run command"]');
+    expect(runCommandsButton.length).toBe(1);
+    expect(runCommandsButton.prop('disabled')).toBe(false);
+  });

-    test('should select and deselect all items', async () => {
-      act(() => {
-        wrapper.find('DataListToolbar').invoke('onSelectAll')(true);
-      });
-      wrapper.update();
-      wrapper.find('DataListCheck').forEach(el => {
-        expect(el.props().checked).toEqual(true);
-      });
-      act(() => {
-        wrapper.find('DataListToolbar').invoke('onSelectAll')(false);
-      });
-      wrapper.update();
-      wrapper.find('DataListCheck').forEach(el => {
-        expect(el.props().checked).toEqual(false);
-      });
+  test('should select and deselect all items', async () => {
+    act(() => {
+      wrapper.find('DataListToolbar').invoke('onSelectAll')(true);
    });
-
-    test('should show content error when api throws an error', async () => {
-      InventoriesAPI.readHosts.mockImplementation(() =>
-        Promise.reject(new Error())
-      );
-      await act(async () => {
-        wrapper = mountWithContexts(
-          <SmartInventoryHostList inventory={mockInventory} />
-        );
-      });
-      await waitForElement(wrapper, 'ContentError', el => el.length === 1);
+    wrapper.update();
+    wrapper.find('DataListCheck').forEach(el => {
+      expect(el.props().checked).toEqual(true);
+    });
+    act(() => {
+      wrapper.find('DataListToolbar').invoke('onSelectAll')(false);
+    });
+    wrapper.update();
+    wrapper.find('DataListCheck').forEach(el => {
+      expect(el.props().checked).toEqual(false);
    });
  });

-  describe('User does not have adhoc permissions', () => {
-    let wrapper;
-    const clonedInventory = {
-      ...mockInventory,
-      summary_fields: {
-        user_capabilities: {
-          adhoc: false,
+  test('should show content error when api throws an error', async () => {
+    InventoriesAPI.readHosts.mockImplementation(() =>
+      Promise.reject(new Error())
+    );
+    await act(async () => {
+      wrapper = mountWithContexts(
+        <SmartInventoryHostList inventory={mockInventory} />
+      );
+    });
+    await waitForElement(wrapper, 'ContentError', el => el.length === 1);
+  });
+  test('should disable run commands button', async () => {
+    InventoriesAPI.readHosts.mockResolvedValue({
+      data: { results: [], count: 0 },
+    });
+    InventoriesAPI.readAdHocOptions.mockResolvedValue({
+      data: {
+        actions: {
+          GET: { module_name: { choices: [['module']] } },
        },
      },
-    };
-
-    test('should hide run commands button', async () => {
-      InventoriesAPI.readHosts.mockResolvedValue({
-        data: { results: [], count: 0 },
-      });
-      await act(async () => {
-        wrapper = mountWithContexts(
-          <SmartInventoryHostList inventory={clonedInventory} />
-        );
-      });
-      await waitForElement(wrapper, 'ContentLoading', el => el.length === 0);
-      const runCommandsButton = wrapper.find(
-        'button[aria-label="Run commands"]'
-      );
-      expect(runCommandsButton.length).toBe(0);
-      jest.clearAllMocks();
-      wrapper.unmount();
    });
+    await act(async () => {
+      wrapper = mountWithContexts(
+        <SmartInventoryHostList inventory={clonedInventory} />
+      );
+    });
+    await waitForElement(wrapper, 'ContentLoading', el => el.length === 0);
+    const runCommandsButton = wrapper.find('button[aria-label="Run command"]');
+    expect(runCommandsButton.prop('disabled')).toBe(true);
  });
 });