Making verbosity list and options a constant and adding WinRM debug

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

@@ -26,13 +26,6 @@ function AdHocCommands({
   const [isWizardOpen, setIsWizardOpen] = useState(false);
   const { isKebabified, onKebabModalChange } = useContext(KebabifiedContext);
 
-  const verbosityOptions = [
-    { value: '0', key: '0', label: t`0 (Normal)` },
-    { value: '1', key: '1', label: t`1 (Verbose)` },
-    { value: '2', key: '2', label: t`2 (More Verbose)` },
-    { value: '3', key: '3', label: t`3 (Debug)` },
-    { value: '4', key: '4', label: t`4 (Connection Debug)` },
-  ];
   useEffect(() => {
     if (isKebabified) {
       onKebabModalChange(isWizardOpen);
@@ -159,7 +152,6 @@ function AdHocCommands({
           adHocItems={adHocItems}
           organizationId={organizationId}
           moduleOptions={moduleOptions}
-          verbosityOptions={verbosityOptions}
           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,6 @@ const FormikApp = withFormik({
 FormikApp.propTypes = {
   onLaunch: PropTypes.func.isRequired,
   moduleOptions: PropTypes.arrayOf(PropTypes.array).isRequired,
-  verbosityOptions: PropTypes.arrayOf(PropTypes.object).isRequired,
   onCloseWizard: PropTypes.func.isRequired,
   credentialTypeId: PropTypes.number.isRequired,
 };

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

@@ -13,13 +13,6 @@ jest.mock('../../api/models/Credentials');
 jest.mock('../../api/models/ExecutionEnvironments');
 jest.mock('../../api/models/Root');
 
-const verbosityOptions = [
-  { value: '0', key: '0', label: '0 (Normal)' },
-  { value: '1', key: '1', label: '1 (Verbose)' },
-  { value: '2', key: '2', label: '2 (More Verbose)' },
-  { value: '3', key: '3', label: '3 (Debug)' },
-  { value: '4', key: '4', label: '4 (Connection Debug)' },
-];
 const moduleOptions = [
   ['command', 'command'],
   ['shell', 'shell'],
@@ -44,7 +37,6 @@ describe('<AdHocCommandsWizard/>', () => {
           adHocItems={adHocItems}
           onLaunch={onLaunch}
           moduleOptions={moduleOptions}
-          verbosityOptions={verbosityOptions}
           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,6 @@ function AdHocDetailsStep({ verbosityOptions, moduleOptions }) {
 
 AdHocDetailsStep.propTypes = {
   moduleOptions: PropTypes.arrayOf(PropTypes.array).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,15 +24,14 @@ function showCredentialPasswordsStep(credential) {
 
 export default function useAdHocLaunchSteps(
   moduleOptions,
-  verbosityOptions,
   organizationId,
   credentialTypeId
 ) {
   const { values, resetForm, touched } = useFormikContext();
 
   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,6 +9,7 @@ import { TagMultiSelect } from '../../MultiSelect';
 import AnsibleSelect from '../../AnsibleSelect';
 import { VariablesField } from '../../CodeEditor';
 import Popover from '../../Popover';
+import { VerbositySelectField } from '../../VerbositySelectField';
 
 const FieldHeader = styled.div`
   display: flex;
@@ -129,36 +130,16 @@ function JobTypeField() {
 }
 
 function VerbosityField() {
-  const [field, meta, helpers] = useField('verbosity');
-  const options = [
-    { value: '0', key: '0', label: t`0 (Normal)` },
-    { value: '1', key: '1', label: t`1 (Verbose)` },
-    { value: '2', key: '2', label: t`2 (More Verbose)` },
-    { value: '3', key: '3', label: t`3 (Debug)` },
-    { value: '4', key: '4', label: t`4 (Connection Debug)` },
-  ];
-
+  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={options}
-        {...field}
-        onChange={(event, value) => helpers.setValue(value)}
-      />
-    </FormGroup>
+      isValid={isValid ? 'default' : 'error'}
+    />
   );
 }
 

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

@@ -85,7 +85,7 @@ describe('OtherPromptsStep', () => {
     expect(wrapper.find('VerbosityField')).toHaveLength(1);
     expect(
       wrapper.find('VerbosityField AnsibleSelect').prop('data')
-    ).toHaveLength(5);
+    ).toHaveLength(6);
   });
 
   test('should render show changes toggle', async () => {

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

@@ -14,6 +14,7 @@ import PromptProjectDetail from './PromptProjectDetail';
 import PromptInventorySourceDetail from './PromptInventorySourceDetail';
 import PromptJobTemplateDetail from './PromptJobTemplateDetail';
 import PromptWFJobTemplateDetail from './PromptWFJobTemplateDetail';
+import { VERBOSITY } from '../VerbositySelectField';
 
 const PromptTitle = styled(Title)`
   margin-top: var(--pf-global--spacer--xl);
@@ -93,14 +94,6 @@ function PromptDetail({
   overrides = {},
   workflowNode = false,
 }) {
-  const VERBOSITY = {
-    0: t`0 (Normal)`,
-    1: t`1 (Verbose)`,
-    2: t`2 (More Verbose)`,
-    3: t`3 (Debug)`,
-    4: t`4 (Connection Debug)`,
-  };
-
   const details = omitOverrides(resource, overrides, launchConfig.defaults);
   details.type = overrides?.nodeType || details.type;
   const hasOverrides = Object.keys(overrides).length > 0;
@@ -226,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,6 +13,7 @@ import { VariablesDetail } from '../CodeEditor';
 import CredentialChip from '../CredentialChip';
 import ChipGroup from '../ChipGroup';
 import ExecutionEnvironmentDetail from '../ExecutionEnvironmentDetail';
+import { VERBOSITY } from '../VerbositySelectField';
 
 function PromptInventorySourceDetail({ resource }) {
   const {
@@ -32,14 +33,6 @@ function PromptInventorySourceDetail({ resource }) {
     verbosity,
   } = resource;
 
-  const VERBOSITY = {
-    0: t`0 (Normal)`,
-    1: t`1 (Verbose)`,
-    2: t`2 (More Verbose)`,
-    3: t`3 (Debug)`,
-    4: t`4 (Connection Debug)`,
-  };
-
   let optionsList = '';
   if (
     overwrite ||
@@ -115,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`}`}