Creates a verbosity select dropdowns and moves options constant into same file

awx/ui/src/components/AdHocCommands/AdHocCommands.js

@@ -14,8 +14,6 @@ import ErrorDetail from '../ErrorDetail';
 import AdHocCommandsWizard from './AdHocCommandsWizard';
 import ContentError from '../ContentError';
 
-import { VERBOSE_OPTIONS } from '../../constants';
-
 function AdHocCommands({
   adHocItems,
   hasListItems,
@@ -154,7 +152,6 @@ function AdHocCommands({
           adHocItems={adHocItems}
           organizationId={organizationId}
           moduleOptions={moduleOptions}
-          verbosityOptions={VERBOSE_OPTIONS}
           credentialTypeId={credentialTypeId}
           onCloseWizard={() => setIsWizardOpen(false)}
           onLaunch={handleSubmit}

awx/ui/src/components/AdHocCommands/AdHocCommandsWizard.js

@@ -3,13 +3,13 @@ import { t } from '@lingui/macro';
 import { withFormik, useFormikContext } from 'formik';
 import PropTypes from 'prop-types';
 
+import { VERBOSITY } from 'components/VerbositySelectField';
 import Wizard from '../Wizard';
 import useAdHocLaunchSteps from './useAdHocLaunchSteps';
 
 function AdHocCommandsWizard({
   onLaunch,
   moduleOptions,
-  verbosityOptions,
   onCloseWizard,
   credentialTypeId,
   organizationId,
@@ -18,7 +18,6 @@ function AdHocCommandsWizard({
 
   const { steps, validateStep, visitStep, visitAllSteps } = useAdHocLaunchSteps(
     moduleOptions,
-    verbosityOptions,
     organizationId,
     credentialTypeId
   );
@@ -57,13 +56,13 @@ function AdHocCommandsWizard({
 }
 
 const FormikApp = withFormik({
-  mapPropsToValues({ adHocItems, verbosityOptions }) {
+  mapPropsToValues({ adHocItems }) {
     const adHocItemStrings = adHocItems.map((item) => item.name).join(', ');
     return {
       limit: adHocItemStrings || 'all',
       credentials: [],
       module_args: '',
-      verbosity: verbosityOptions[0].value,
+      verbosity: VERBOSITY()[0],
       forks: 0,
       diff_mode: false,
       become_enabled: '',
@@ -79,7 +78,7 @@ const FormikApp = withFormik({
 FormikApp.propTypes = {
   onLaunch: PropTypes.func.isRequired,
   moduleOptions: PropTypes.arrayOf(PropTypes.array).isRequired,
-  verbosityOptions: PropTypes.arrayOf(PropTypes.object).isRequired,
+  // verbosityOptions: PropTypes.arrayOf(PropTypes.object).isRequired,
   onCloseWizard: PropTypes.func.isRequired,
   credentialTypeId: PropTypes.number.isRequired,
 };

awx/ui/src/components/AdHocCommands/AdHocCommandsWizard.test.js

@@ -6,7 +6,6 @@ import {
   waitForElement,
 } from '../../../testUtils/enzymeHelpers';
 import AdHocCommandsWizard from './AdHocCommandsWizard';
-import { VERBOSE_OPTIONS } from '../../constants';
 
 jest.mock('../../api/models/CredentialTypes');
 jest.mock('../../api/models/Inventories');
@@ -38,7 +37,6 @@ describe('<AdHocCommandsWizard/>', () => {
           adHocItems={adHocItems}
           onLaunch={onLaunch}
           moduleOptions={moduleOptions}
-          verbosityOptions={VERBOSE_OPTIONS}
           onCloseWizard={() => {}}
           credentialTypeId={1}
           organizationId={1}

awx/ui/src/components/AdHocCommands/AdHocDetailsStep.js

@@ -7,6 +7,7 @@ import { Form, FormGroup, Switch, Checkbox } from '@patternfly/react-core';
 import styled from 'styled-components';
 import { required } from 'util/validators';
 import useBrandName from 'hooks/useBrandName';
+import { VerbositySelectField } from 'components/VerbositySelectField';
 import AnsibleSelect from '../AnsibleSelect';
 import FormField from '../FormField';
 import { VariablesField } from '../CodeEditor';
@@ -21,7 +22,7 @@ const TooltipWrapper = styled.div`
   text-align: left;
 `;
 
-function AdHocDetailsStep({ verbosityOptions, moduleOptions }) {
+function AdHocDetailsStep({ moduleOptions }) {
   const brandName = useBrandName();
   const [moduleNameField, moduleNameMeta, moduleNameHelpers] = useField({
     name: 'module_name',
@@ -32,7 +33,7 @@ function AdHocDetailsStep({ verbosityOptions, moduleOptions }) {
   const [diffModeField, , diffModeHelpers] = useField('diff_mode');
   const [becomeEnabledField, , becomeEnabledHelpers] =
     useField('become_enabled');
-  const [verbosityField, verbosityMeta, verbosityHelpers] = useField({
+  const [, verbosityMeta] = useField({
     name: 'verbosity',
     validate: required(null),
   });
@@ -122,33 +123,16 @@ function AdHocDetailsStep({ verbosityOptions, moduleOptions }) {
               )
             }
           />
-          <FormGroup
+
+          <VerbositySelectField
             fieldId="verbosity"
-            aria-label={t`select verbosity`}
-            label={t`Verbosity`}
-            isRequired
-            validated={
+            tooltip={t`These are the verbosity levels for standard out of the command run that are supported.`}
+            isValid={
               !verbosityMeta.touched || !verbosityMeta.error
                 ? 'default'
                 : 'error'
             }
-            helperTextInvalid={verbosityMeta.error}
-            labelIcon={
-              <Popover
-                content={t`These are the verbosity levels for standard out of the command run that are supported.`}
-              />
-            }
-          >
-            <AnsibleSelect
-              {...verbosityField}
-              isValid={!verbosityMeta.touched || !verbosityMeta.error}
-              id="verbosity"
-              data={verbosityOptions || []}
-              onChange={(event, value) => {
-                verbosityHelpers.setValue(parseInt(value, 10));
-              }}
-            />
-          </FormGroup>
+          />
           <FormField
             id="limit"
             name="limit"
@@ -296,7 +280,7 @@ function AdHocDetailsStep({ verbosityOptions, moduleOptions }) {
 
 AdHocDetailsStep.propTypes = {
   moduleOptions: PropTypes.arrayOf(PropTypes.array).isRequired,
-  verbosityOptions: PropTypes.arrayOf(PropTypes.object).isRequired,
+  // verbosityOptions: PropTypes.arrayOf(PropTypes.object).isRequired,
 };
 
 export default AdHocDetailsStep;

awx/ui/src/components/AdHocCommands/AdHocPreviewStep.js

@@ -3,6 +3,7 @@ import { t } from '@lingui/macro';
 import { Tooltip } from '@patternfly/react-core';
 import { ExclamationCircleIcon as PFExclamationCircleIcon } from '@patternfly/react-icons';
 import styled from 'styled-components';
+import { VERBOSITY } from '../VerbositySelectField';
 import { toTitleCase } from '../../util/strings';
 import { VariablesDetail } from '../CodeEditor';
 import { jsonToYaml } from '../../util/yaml';
@@ -21,7 +22,7 @@ const ErrorMessageWrapper = styled.div`
   margin-bottom: 10px;
 `;
 function AdHocPreviewStep({ hasErrors, values }) {
-  const { credential, execution_environment, extra_vars } = values;
+  const { credential, execution_environment, extra_vars, verbosity } = values;
 
   const items = Object.entries(values);
   return (
@@ -44,6 +45,7 @@ function AdHocPreviewStep({ hasErrors, values }) {
             key !== 'extra_vars' &&
             key !== 'execution_environment' &&
             key !== 'credentials' &&
+            key !== 'verbosity' &&
             !key.startsWith('credential_passwords') && (
               <Detail key={key} label={toTitleCase(key)} value={value} />
             )
@@ -57,6 +59,9 @@ function AdHocPreviewStep({ hasErrors, values }) {
             value={execution_environment[0]?.name}
           />
         )}
+        {verbosity && (
+          <Detail label={t`Verbosity`} value={VERBOSITY()[values.verbosity]} />
+        )}
         {extra_vars && (
           <VariablesDetail
             value={jsonToYaml(JSON.stringify(extra_vars))}

awx/ui/src/components/AdHocCommands/useAdHocDetailsStep.js

@@ -5,11 +5,7 @@ import StepName from '../LaunchPrompt/steps/StepName';
 import AdHocDetailsStep from './AdHocDetailsStep';
 
 const STEP_ID = 'details';
-export default function useAdHocDetailsStep(
-  visited,
-  moduleOptions,
-  verbosityOptions
-) {
+export default function useAdHocDetailsStep(visited, moduleOptions) {
   const { values, touched, setFieldError } = useFormikContext();
 
   const hasError = () => {
@@ -39,12 +35,7 @@ export default function useAdHocDetailsStep(
           {t`Details`}
         </StepName>
       ),
-      component: (
-        <AdHocDetailsStep
-          moduleOptions={moduleOptions}
-          verbosityOptions={verbosityOptions}
-        />
-      ),
+      component: <AdHocDetailsStep moduleOptions={moduleOptions} />,
       enableNext: true,
       nextButtonText: t`Next`,
     },

awx/ui/src/components/AdHocCommands/useAdHocLaunchSteps.js

@@ -24,7 +24,6 @@ function showCredentialPasswordsStep(credential) {
 
 export default function useAdHocLaunchSteps(
   moduleOptions,
-  verbosityOptions,
   organizationId,
   credentialTypeId
 ) {
@@ -32,7 +31,7 @@ export default function useAdHocLaunchSteps(
 
   const [visited, setVisited] = useState({});
   const steps = [
-    useAdHocDetailsStep(visited, moduleOptions, verbosityOptions),
+    useAdHocDetailsStep(visited, moduleOptions),
     useAdHocExecutionEnvironmentStep(organizationId),
     useAdHocCredentialStep(visited, credentialTypeId),
     useCredentialPasswordsStep(

awx/ui/src/components/AnsibleSelect/AnsibleSelect.js

@@ -46,7 +46,9 @@ function AnsibleSelect({
           value={option.value}
           label={option.label}
           isDisabled={option.isDisabled}
-        />
+        >
+          {option.label}
+        </FormSelectOption>
       ))}
     </FormSelect>
   );

awx/ui/src/components/LaunchPrompt/steps/OtherPromptsStep.js

@@ -9,7 +9,7 @@ import { TagMultiSelect } from '../../MultiSelect';
 import AnsibleSelect from '../../AnsibleSelect';
 import { VariablesField } from '../../CodeEditor';
 import Popover from '../../Popover';
-import { VERBOSE_OPTIONS } from '../../../constants';
+import { VerbositySelectField } from '../../VerbositySelectField';
 
 const FieldHeader = styled.div`
   display: flex;
@@ -130,28 +130,16 @@ function JobTypeField() {
 }
 
 function VerbosityField() {
-  const [field, meta, helpers] = useField('verbosity');
+  const [, meta] = useField('verbosity');
   const isValid = !(meta.touched && meta.error);
 
   return (
-    <FormGroup
+    <VerbositySelectField
       fieldId="prompt-verbosity"
-      validated={isValid ? 'default' : 'error'}
-      label={t`Verbosity`}
-      labelIcon={
-        <Popover
-          content={t`Control the level of output ansible
+      tooltip={t`Control the level of output ansible
           will produce as the playbook executes.`}
-        />
-      }
-    >
-      <AnsibleSelect
-        id="prompt-verbosity"
-        data={VERBOSE_OPTIONS}
-        {...field}
-        onChange={(event, value) => helpers.setValue(value)}
-      />
-    </FormGroup>
+      isValid={isValid ? 'default' : 'error'}
+    />
   );
 }
 

awx/ui/src/components/PromptDetail/PromptDetail.js

@@ -14,7 +14,7 @@ import PromptProjectDetail from './PromptProjectDetail';
 import PromptInventorySourceDetail from './PromptInventorySourceDetail';
 import PromptJobTemplateDetail from './PromptJobTemplateDetail';
 import PromptWFJobTemplateDetail from './PromptWFJobTemplateDetail';
-import { VERBOSITY } from '../../constants';
+import { VERBOSITY } from '../VerbositySelectField';
 
 const PromptTitle = styled(Title)`
   margin-top: var(--pf-global--spacer--xl);
@@ -219,7 +219,7 @@ function PromptDetail({
               launchConfig.ask_verbosity_on_launch ? (
                 <Detail
                   label={t`Verbosity`}
-                  value={VERBOSITY[overrides.verbosity]}
+                  value={VERBOSITY()[overrides.verbosity]}
                 />
               ) : null}
               {launchConfig.ask_tags_on_launch && (

awx/ui/src/components/PromptDetail/PromptInventorySourceDetail.js

@@ -13,7 +13,7 @@ import { VariablesDetail } from '../CodeEditor';
 import CredentialChip from '../CredentialChip';
 import ChipGroup from '../ChipGroup';
 import ExecutionEnvironmentDetail from '../ExecutionEnvironmentDetail';
-import { VERBOSITY } from '../../constants';
+import { VERBOSITY } from '../VerbositySelectField';
 
 function PromptInventorySourceDetail({ resource }) {
   const {
@@ -108,7 +108,7 @@ function PromptInventorySourceDetail({ resource }) {
         executionEnvironment={summary_fields?.execution_environment}
       />
       <Detail label={t`Inventory File`} value={source_path} />
-      <Detail label={t`Verbosity`} value={VERBOSITY[verbosity]} />
+      <Detail label={t`Verbosity`} value={VERBOSITY()[verbosity]} />
       <Detail
         label={t`Cache Timeout`}
         value={`${update_cache_timeout} ${t`Seconds`}`}

awx/ui/src/components/PromptDetail/PromptJobTemplateDetail.js

@@ -15,7 +15,7 @@ import Sparkline from '../Sparkline';
 import { Detail, DeletedDetail } from '../DetailList';
 import { VariablesDetail } from '../CodeEditor';
 import ExecutionEnvironmentDetail from '../ExecutionEnvironmentDetail';
-import { VERBOSITY } from '../../constants';
+import { VERBOSITY } from '../VerbositySelectField';
 
 function PromptJobTemplateDetail({ resource }) {
   const {
@@ -146,7 +146,7 @@ function PromptJobTemplateDetail({ resource }) {
       <Detail label={t`Playbook`} value={playbook} />
       <Detail label={t`Forks`} value={forks || '0'} />
       <Detail label={t`Limit`} value={limit} />
-      <Detail label={t`Verbosity`} value={VERBOSITY[verbosity]} />
+      <Detail label={t`Verbosity`} value={VERBOSITY()[verbosity]} />
       {typeof diff_mode === 'boolean' && (
         <Detail label={t`Show Changes`} value={diff_mode ? t`On` : t`Off`} />
       )}

awx/ui/src/components/Schedule/ScheduleDetail/ScheduleDetail.js

@@ -23,7 +23,7 @@ import DeleteButton from '../../DeleteButton';
 import ErrorDetail from '../../ErrorDetail';
 import ChipGroup from '../../ChipGroup';
 import { VariablesDetail } from '../../CodeEditor';
-import { VERBOSITY } from '../../../constants';
+import { VERBOSITY } from '../../VerbositySelectField';
 
 const PromptDivider = styled(Divider)`
   margin-top: var(--pf-global--spacer--lg);
@@ -209,7 +209,7 @@ function ScheduleDetail({ hasDaysToKeepField, schedule, surveyConfig }) {
   const showLimitDetail = ask_limit_on_launch && limit;
   const showJobTypeDetail = ask_job_type_on_launch && job_type;
   const showSCMBranchDetail = ask_scm_branch_on_launch && scm_branch;
-  const showVerbosityDetail = ask_verbosity_on_launch && VERBOSITY[verbosity];
+  const showVerbosityDetail = ask_verbosity_on_launch && VERBOSITY()[verbosity];
 
   const showPromptedFields =
     showCredentialsDetail ||
@@ -306,7 +306,7 @@ function ScheduleDetail({ hasDaysToKeepField, schedule, surveyConfig }) {
               />
             )}
             {ask_verbosity_on_launch && (
-              <Detail label={t`Verbosity`} value={VERBOSITY[verbosity]} />
+              <Detail label={t`Verbosity`} value={VERBOSITY()[verbosity]} />
             )}
             {ask_scm_branch_on_launch && (
               <Detail label={t`Source Control Branch`} value={scm_branch} />

awx/ui/src/components/VerbositySelectField/VerbositySelectField.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import { t } from '@lingui/macro';
+import { useField } from 'formik';
+import { FormGroup } from '@patternfly/react-core';
+import Popover from 'components/Popover';
+import AnsibleSelect from 'components/AnsibleSelect';
+import FieldWithPrompt from 'components/FieldWithPrompt';
+
+const VERBOSITY = () => ({
+  0: t`0 (Normal)`,
+  1: t`1 (Verbose)`,
+  2: t`2 (More Verbose)`,
+  3: t`3 (Debug)`,
+  4: t`4 (Connection Debug)`,
+  5: t`5 (WinRM Debug)`,
+});
+
+function VerbositySelectField({
+  fieldId,
+  promptId,
+  promptName,
+  tooltip,
+  isValid,
+}) {
+  const VERBOSE_OPTIONS = Object.entries(VERBOSITY()).map(([k, v]) => ({
+    key: `${k}`,
+    value: `${k}`,
+    label: v,
+  }));
+  const [verbosityField, , verbosityHelpers] = useField('verbosity');
+  return promptId ? (
+    <FieldWithPrompt
+      fieldId={fieldId}
+      label={t`Verbosity`}
+      promptId={promptId}
+      promptName={promptName}
+      tooltip={tooltip}
+    >
+      <AnsibleSelect id={fieldId} data={VERBOSE_OPTIONS} {...verbosityField} />
+    </FieldWithPrompt>
+  ) : (
+    <FormGroup
+      fieldId={fieldId}
+      validated={isValid ? 'default' : 'error'}
+      label={t`Verbosity`}
+      labelIcon={<Popover content={tooltip} />}
+    >
+      <AnsibleSelect
+        id={fieldId}
+        data={VERBOSE_OPTIONS}
+        {...verbosityField}
+        onChange={(event, value) => verbosityHelpers.setValue(value)}
+      />
+    </FormGroup>
+  );
+}
+
+export { VerbositySelectField, VERBOSITY };

awx/ui/src/components/VerbositySelectField/index.js

@@ -0,0 +1 @@
+export { VERBOSITY, VerbositySelectField } from './VerbositySelectField';

awx/ui/src/constants.js

@@ -1,5 +1,3 @@
-import { t } from '@lingui/macro';
-
 /* eslint-disable-next-line import/prefer-default-export */
 export const JOB_TYPE_URL_SEGMENTS = {
   job: 'playbook',
@@ -14,18 +12,3 @@ export const SESSION_TIMEOUT_KEY = 'awx-session-timeout';
 export const SESSION_REDIRECT_URL = 'awx-redirect-url';
 export const PERSISTENT_FILTER_KEY = 'awx-persistent-filter';
 export const SESSION_USER_ID = 'awx-session-user-id';
-
-export const VERBOSITY = {
-  0: t`0 (Normal)`,
-  1: t`1 (Verbose)`,
-  2: t`2 (More Verbose)`,
-  3: t`3 (Debug)`,
-  4: t`4 (Connection Debug)`,
-  5: t`5 (WinRM Debug)`,
-};
-
-export const VERBOSE_OPTIONS = Object.entries(VERBOSITY).map(([k, v]) => ({
-  key: k,
-  value: k,
-  label: v,
-}));

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

@@ -29,6 +29,7 @@ import { relatedResourceDeleteRequests } from 'util/getRelatedResourceDeleteDeta
 import useIsMounted from 'hooks/useIsMounted';
 import { formatDateString } from 'util/dates';
 import Popover from 'components/Popover';
+import { VERBOSITY } from 'components/VerbositySelectField';
 import InventorySourceSyncButton from '../shared/InventorySourceSyncButton';
 import useWsInventorySourcesDetails from '../InventorySources/useWsInventorySourcesDetails';
 import helpText from '../shared/Inventory.helptext';
@@ -111,12 +112,6 @@ function InventorySourceDetail({ inventorySource }) {
     inventorySource.id
   );
 
-  const VERBOSITY = {
-    0: t`0 (Warning)`,
-    1: t`1 (Info)`,
-    2: t`2 (Debug)`,
-  };
-
   let optionsList = '';
   if (
     overwrite ||
@@ -251,7 +246,7 @@ function InventorySourceDetail({ inventorySource }) {
         <Detail
           label={t`Verbosity`}
           helpText={helpText.subFormVerbosityFields}
-          value={VERBOSITY[verbosity]}
+          value={VERBOSITY()[verbosity]}
         />
         <Detail
           label={t`Cache timeout`}

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

@@ -93,7 +93,7 @@ describe('InventorySourceDetail', () => {
     assertDetail(wrapper, 'Organization', 'Mock Org');
     assertDetail(wrapper, 'Project', 'Mock Project');
     assertDetail(wrapper, 'Inventory file', 'foo');
-    assertDetail(wrapper, 'Verbosity', '2 (Debug)');
+    assertDetail(wrapper, 'Verbosity', '2 (More Verbose)');
     assertDetail(wrapper, 'Cache timeout', '2 seconds');
     const executionEnvironment = wrapper.find('ExecutionEnvironmentDetail');
     expect(executionEnvironment).toHaveLength(1);

awx/ui/src/screens/Job/JobDetail/JobDetail.js

@@ -25,10 +25,10 @@ import { LaunchButton, ReLaunchDropDown } from 'components/LaunchButton';
 import StatusLabel from 'components/StatusLabel';
 import JobCancelButton from 'components/JobCancelButton';
 import ExecutionEnvironmentDetail from 'components/ExecutionEnvironmentDetail';
+import { VERBOSITY } from 'components/VerbositySelectField';
 import { getJobModel, isJobRunning } from 'util/jobs';
 import { formatDateString } from 'util/dates';
 import { Job } from 'types';
-import { VERBOSITY } from '../../../constants';
 import jobHelpText from '../Job.helptext';
 
 const StatusDetailValue = styled.div`
@@ -325,7 +325,7 @@ function JobDetail({ job, inventorySourceLabels }) {
           dataCy="job-verbosity"
           label={t`Verbosity`}
           helpText={jobHelpText.verbosity}
-          value={VERBOSITY[job.verbosity]}
+          value={VERBOSITY()[job.verbosity]}
         />
         {job.type !== 'workflow_job' && !isJobRunning(job.status) && (
           <ExecutionEnvironmentDetail

awx/ui/src/screens/Template/JobTemplateDetail/JobTemplateDetail.js

@@ -28,12 +28,12 @@ import DeleteButton from 'components/DeleteButton';
 import ErrorDetail from 'components/ErrorDetail';
 import { LaunchButton } from 'components/LaunchButton';
 import { VariablesDetail } from 'components/CodeEditor';
+import { VERBOSITY } from 'components/VerbositySelectField';
 import { JobTemplatesAPI } from 'api';
 import useRequest, { useDismissableError } from 'hooks/useRequest';
 import useBrandName from 'hooks/useBrandName';
 import ExecutionEnvironmentDetail from 'components/ExecutionEnvironmentDetail';
 import { relatedResourceDeleteRequests } from 'util/getRelatedResourceDeleteDetails';
-import { VERBOSITY } from '../../../constants';
 import helpText from '../shared/JobTemplate.helptext';
 
 function JobTemplateDetail({ template }) {
@@ -262,7 +262,7 @@ function JobTemplateDetail({ template }) {
         />
         <Detail
           label={t`Verbosity`}
-          value={VERBOSITY[verbosity]}
+          value={VERBOSITY()[verbosity]}
           dataCy="jt-detail-verbosity"
           helpText={helpText.verbosity}
         />

awx/ui/src/screens/Template/shared/JobTemplateForm.js

@@ -43,10 +43,10 @@ import Popover from 'components/Popover';
 import { JobTemplatesAPI } from 'api';
 import useIsMounted from 'hooks/useIsMounted';
 import LabelSelect from 'components/LabelSelect';
+import { VerbositySelectField } from 'components/VerbositySelectField';
 import PlaybookSelect from './PlaybookSelect';
 import WebhookSubForm from './WebhookSubForm';
 import helpText from './JobTemplate.helptext';
-import { VERBOSE_OPTIONS } from '../../../constants';
 
 const { origin } = document.location;
 
@@ -86,7 +86,6 @@ function JobTemplateForm({
   const [credentialField, , credentialHelpers] = useField('credentials');
   const [labelsField, , labelsHelpers] = useField('labels');
   const [limitField, limitMeta, limitHelpers] = useField('limit');
-  const [verbosityField] = useField('verbosity');
   const [diffModeField, , diffModeHelpers] = useField('diff_mode');
   const [instanceGroupsField, , instanceGroupsHelpers] =
     useField('instanceGroups');
@@ -422,19 +421,12 @@ function JobTemplateForm({
                 }}
               />
             </FieldWithPrompt>
-            <FieldWithPrompt
+            <VerbositySelectField
               fieldId="template-verbosity"
-              label={t`Verbosity`}
               promptId="template-ask-verbosity-on-launch"
               promptName="ask_verbosity_on_launch"
               tooltip={helpText.verbosity}
-            >
-              <AnsibleSelect
-                id="template-verbosity"
-                data={VERBOSE_OPTIONS}
-                {...verbosityField}
-              />
-            </FieldWithPrompt>
+            />
             <FormField
               id="template-job-slicing"
               name="job_slice_count"