Creates a verbosity select dropdowns and moves options constant into …

…same file
ansible · Jun 22, 2022 · b32c5d2 · b32c5d2
1 parent 70325a7
commit b32c5d2
Show file tree

Hide file tree

Showing 29 changed files with 21,525 additions and 17,948 deletions.
diff --git a/awx/ui/src/components/AdHocCommands/AdHocCommands.js b/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}

diff --git a/awx/ui/src/components/AdHocCommands/AdHocCommandsWizard.js b/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,
 };

diff --git a/awx/ui/src/components/AdHocCommands/AdHocCommandsWizard.test.js b/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}

diff --git a/awx/ui/src/components/AdHocCommands/AdHocDetailsStep.js b/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;
diff --git a/awx/ui/src/components/AdHocCommands/AdHocPreviewStep.js b/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))}

diff --git a/awx/ui/src/components/AdHocCommands/useAdHocDetailsStep.js b/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`,
     },

diff --git a/awx/ui/src/components/AdHocCommands/useAdHocLaunchSteps.js b/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(

diff --git a/awx/ui/src/components/AnsibleSelect/AnsibleSelect.js b/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>
   );

diff --git a/awx/ui/src/components/LaunchPrompt/steps/OtherPromptsStep.js b/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'}
+    />
   );
 }
 

diff --git a/awx/ui/src/components/PromptDetail/PromptDetail.js b/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 && (

diff --git a/awx/ui/src/components/PromptDetail/PromptInventorySourceDetail.js b/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`}`}

diff --git a/awx/ui/src/components/PromptDetail/PromptJobTemplateDetail.js b/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`} />
       )}

diff --git a/awx/ui/src/components/Schedule/ScheduleDetail/ScheduleDetail.js b/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} />