diff --git a/awx/ui_next/src/components/AdHocCommands/AdHocCommands.jsx b/awx/ui_next/src/components/AdHocCommands/AdHocCommands.jsx index e5e44ab91f..ea28e52652 100644 --- a/awx/ui_next/src/components/AdHocCommands/AdHocCommands.jsx +++ b/awx/ui_next/src/components/AdHocCommands/AdHocCommands.jsx @@ -65,7 +65,7 @@ function AdHocCommands({ children, apiModule, adHocItems, itemId, i18n }) { useCallback( async values => { const { data } = await apiModule.launchAdHocCommands(itemId, values); - history.push(`/jobs/${data.module_name}/${data.id}/output`); + history.push(`/jobs/command/${data.id}/output`); }, [apiModule, itemId, history] diff --git a/awx/ui_next/src/components/AdHocCommands/AdHocCommands.test.jsx b/awx/ui_next/src/components/AdHocCommands/AdHocCommands.test.jsx index 0ec1752bc9..b9582daedc 100644 --- a/awx/ui_next/src/components/AdHocCommands/AdHocCommands.test.jsx +++ b/awx/ui_next/src/components/AdHocCommands/AdHocCommands.test.jsx @@ -157,12 +157,12 @@ describe('', () => { ).toBe(true); await act(async () => { - wrapper.find('AnsibleSelect[name="module_args"]').prop('onChange')( + wrapper.find('AnsibleSelect[name="module_name"]').prop('onChange')( {}, 'command' ); - wrapper.find('input#arguments').simulate('change', { - target: { value: 'foo', name: 'arguments' }, + wrapper.find('input#module_args').simulate('change', { + target: { value: 'foo', name: 'module_args' }, }); wrapper.find('AnsibleSelect[name="verbosity"]').prop('onChange')({}, 1); }); @@ -194,14 +194,15 @@ describe('', () => { ); expect(InventoriesAPI.launchAdHocCommands).toBeCalledWith(1, { - arguments: 'foo', - changes: false, + module_args: 'foo', + diff_mode: false, credential: 4, - escalation: false, + job_type: 'run', + become_enabled: '', extra_vars: '---', forks: 0, limit: 'Inventory 1 Org 0, Inventory 2 Org 0', - module_args: 'command', + module_name: 'command', verbosity: 1, }); @@ -271,12 +272,12 @@ describe('', () => { ).toBe(true); await act(async () => { - wrapper.find('AnsibleSelect[name="module_args"]').prop('onChange')( + wrapper.find('AnsibleSelect[name="module_name"]').prop('onChange')( {}, 'command' ); - wrapper.find('input#arguments').simulate('change', { - target: { value: 'foo', name: 'arguments' }, + wrapper.find('input#module_args').simulate('change', { + target: { value: 'foo', name: 'module_args' }, }); wrapper.find('AnsibleSelect[name="verbosity"]').prop('onChange')({}, 1); }); diff --git a/awx/ui_next/src/components/AdHocCommands/AdHocCommandsWizard.jsx b/awx/ui_next/src/components/AdHocCommands/AdHocCommandsWizard.jsx index 273a4ee2fb..4a0716f320 100644 --- a/awx/ui_next/src/components/AdHocCommands/AdHocCommandsWizard.jsx +++ b/awx/ui_next/src/components/AdHocCommands/AdHocCommandsWizard.jsx @@ -22,12 +22,12 @@ function AdHocCommandsWizard({ const { values } = useFormikContext(); const enabledNextOnDetailsStep = () => { - if (!values.module_args) { + if (!values.module_name) { return false; } - if (values.module_args === 'shell' || values.module_args === 'command') { - if (values.arguments) { + if (values.module_name === 'shell' || values.module_name === 'command') { + if (values.module_args) { return true; // eslint-disable-next-line no-else-return } else { @@ -90,15 +90,16 @@ const FormikApp = withFormik({ mapPropsToValues({ adHocItems, verbosityOptions }) { const adHocItemStrings = adHocItems.map(item => item.name).join(', '); return { - limit: adHocItemStrings || [], + limit: adHocItemStrings || 'all', credential: [], module_args: '', - arguments: '', verbosity: verbosityOptions[0].value, forks: 0, - changes: false, - escalation: false, + diff_mode: false, + become_enabled: '', + module_name: '', extra_vars: '---', + job_type: 'run', }; }, })(AdHocCommandsWizard); diff --git a/awx/ui_next/src/components/AdHocCommands/AdHocCommandsWizard.test.jsx b/awx/ui_next/src/components/AdHocCommands/AdHocCommandsWizard.test.jsx index 0b4fe8347a..ed3ab4ed99 100644 --- a/awx/ui_next/src/components/AdHocCommands/AdHocCommandsWizard.test.jsx +++ b/awx/ui_next/src/components/AdHocCommands/AdHocCommandsWizard.test.jsx @@ -73,12 +73,12 @@ describe('', () => { await waitForElement(wrapper, 'WizardNavItem', el => el.length > 0); await act(async () => { - wrapper.find('AnsibleSelect[name="module_args"]').prop('onChange')( + wrapper.find('AnsibleSelect[name="module_name"]').prop('onChange')( {}, 'command' ); - wrapper.find('input#arguments').simulate('change', { - target: { value: 'foo', name: 'arguments' }, + wrapper.find('input#module_args').simulate('change', { + target: { value: 'foo', name: 'module_args' }, }); wrapper.find('AnsibleSelect[name="verbosity"]').prop('onChange')({}, 1); }); @@ -105,12 +105,12 @@ describe('', () => { await waitForElement(wrapper, 'WizardNavItem', el => el.length > 0); await act(async () => { - wrapper.find('AnsibleSelect[name="module_args"]').prop('onChange')( + wrapper.find('AnsibleSelect[name="module_name"]').prop('onChange')( {}, 'command' ); - wrapper.find('input#arguments').simulate('change', { - target: { value: 'foo', name: 'arguments' }, + wrapper.find('input#module_args').simulate('change', { + target: { value: 'foo', name: 'module_args' }, }); wrapper.find('AnsibleSelect[name="verbosity"]').prop('onChange')({}, 1); }); @@ -165,12 +165,12 @@ describe('', () => { await waitForElement(wrapper, 'WizardNavItem', el => el.length > 0); await act(async () => { - wrapper.find('AnsibleSelect[name="module_args"]').prop('onChange')( + wrapper.find('AnsibleSelect[name="module_name"]').prop('onChange')( {}, 'command' ); - wrapper.find('input#arguments').simulate('change', { - target: { value: 'foo', name: 'arguments' }, + wrapper.find('input#module_args').simulate('change', { + target: { value: 'foo', name: 'module_args' }, }); wrapper.find('AnsibleSelect[name="verbosity"]').prop('onChange')({}, 1); }); diff --git a/awx/ui_next/src/components/AdHocCommands/AdHocDetailsStep.jsx b/awx/ui_next/src/components/AdHocCommands/AdHocDetailsStep.jsx index f91c6342ad..8984e9fa9a 100644 --- a/awx/ui_next/src/components/AdHocCommands/AdHocDetailsStep.jsx +++ b/awx/ui_next/src/components/AdHocCommands/AdHocDetailsStep.jsx @@ -28,29 +28,36 @@ const TooltipWrapper = styled.div` const brandName = BrandName; function CredentialStep({ i18n, verbosityOptions, moduleOptions }) { - const [moduleField, moduleMeta, moduleHelpers] = useField({ + const [module_nameField, module_nameMeta, module_nameHelpers] = useField({ + name: 'module_name', + validate: required(null, i18n), + }); + const [module_argsField] = useField({ name: 'module_args', validate: required(null, i18n), }); const [variablesField] = useField('extra_vars'); - const [changesField, , changesHelpers] = useField('changes'); - const [escalationField, , escalationHelpers] = useField('escalation'); + const [diff_modeField, , diff_modeHelpers] = useField('diff_mode'); + const [become_enabledField, , become_enabledHelpers] = useField( + 'become_enabled' + ); const [verbosityField, verbosityMeta, verbosityHelpers] = useField({ name: 'verbosity', validate: required(null, i18n), }); - return (
{ - moduleHelpers.setValue(value); + module_nameHelpers.setValue(value); }} /> + {i18n._( + t`These arguments are used with the specified module. You can find information about the ${module_argsField.value} by clicking ` + )} + + {' '} + {i18n._(t`here.`)} + + + ) : ( + i18n._(t`These arguments are used with the specified module.`) + ) } - tooltip={i18n._( - t`These arguments are used with the specified module.` - )} /> { - verbosityHelpers.setValue(value); + verbosityHelpers.setValue(parseInt(value, 10)); }} /> @@ -164,20 +188,17 @@ function CredentialStep({ i18n, verbosityOptions, moduleOptions }) { > { - changesHelpers.setValue(!changesField.value); + diff_modeHelpers.setValue(!diff_modeField.value); }} aria-label={i18n._(t`toggle changes`)} /> - + } - id="escalation" - isChecked={escalationField.value} + id="become_enabled" + isChecked={become_enabledField.value} onChange={checked => { - escalationHelpers.setValue(checked); + become_enabledHelpers.setValue(checked); }} /> diff --git a/awx/ui_next/src/components/AdHocCommands/AdHocDetailsStep.test.jsx b/awx/ui_next/src/components/AdHocCommands/AdHocDetailsStep.test.jsx index 7dc7b82ba5..699d768417 100644 --- a/awx/ui_next/src/components/AdHocCommands/AdHocDetailsStep.test.jsx +++ b/awx/ui_next/src/components/AdHocCommands/AdHocDetailsStep.test.jsx @@ -29,7 +29,7 @@ const initialValues = { extra_vars: '---', }; -describe('', () => { +describe('', () => { let wrapper; afterEach(() => { @@ -64,14 +64,12 @@ describe('', () => { ); }); expect(wrapper.find('FormGroup[label="Module"]').length).toBe(1); - expect(wrapper.find('FormField[name="arguments"]').length).toBe(1); + expect(wrapper.find('FormField[label="Arguments"]').length).toBe(1); expect(wrapper.find('FormGroup[label="Verbosity"]').length).toBe(1); expect(wrapper.find('FormField[label="Limit"]').length).toBe(1); expect(wrapper.find('FormField[name="forks"]').length).toBe(1); expect(wrapper.find('FormGroup[label="Show changes"]').length).toBe(1); - expect( - wrapper.find('FormGroup[name="enable privilege escalation"]').length - ).toBe(1); + expect(wrapper.find('FormGroup[name="become_enabled"]').length).toBe(1); expect(wrapper.find('VariablesField').length).toBe(1); }); @@ -89,12 +87,12 @@ describe('', () => { }); await act(async () => { - wrapper.find('AnsibleSelect[name="module_args"]').prop('onChange')( + wrapper.find('AnsibleSelect[name="module_name"]').prop('onChange')( {}, 'command' ); - wrapper.find('input#arguments').simulate('change', { - target: { value: 'foo', name: 'arguments' }, + wrapper.find('input#module_args').simulate('change', { + target: { value: 'foo', name: 'module_args' }, }); wrapper.find('input#limit').simulate('change', { target: { @@ -116,9 +114,9 @@ describe('', () => { }); wrapper.update(); expect( - wrapper.find('AnsibleSelect[name="module_args"]').prop('value') + wrapper.find('AnsibleSelect[name="module_name"]').prop('value') ).toBe('command'); - expect(wrapper.find('input#arguments').prop('value')).toBe('foo'); + expect(wrapper.find('input#module_args').prop('value')).toBe('foo'); expect(wrapper.find('AnsibleSelect[name="verbosity"]').prop('value')).toBe( 1 ); diff --git a/awx/ui_next/src/components/CodeMirrorInput/VariablesField.test.jsx b/awx/ui_next/src/components/CodeMirrorInput/VariablesField.test.jsx index 5789183527..b06a2b5e21 100644 --- a/awx/ui_next/src/components/CodeMirrorInput/VariablesField.test.jsx +++ b/awx/ui_next/src/components/CodeMirrorInput/VariablesField.test.jsx @@ -83,7 +83,7 @@ describe('VariablesField', () => { )} ); - expect(wrapper.find('Tooltip').length).toBe(1); + expect(wrapper.find('Popover').length).toBe(1); }); it('should submit value through Formik', async () => { diff --git a/awx/ui_next/src/components/FieldWithPrompt/FieldWithPrompt.test.jsx b/awx/ui_next/src/components/FieldWithPrompt/FieldWithPrompt.test.jsx index d99e5e7b41..b32920bdc4 100644 --- a/awx/ui_next/src/components/FieldWithPrompt/FieldWithPrompt.test.jsx +++ b/awx/ui_next/src/components/FieldWithPrompt/FieldWithPrompt.test.jsx @@ -61,6 +61,6 @@ describe('FieldWithPrompt', () => { ); expect(wrapper.find('.pf-c-form__label-required')).toHaveLength(1); - expect(wrapper.find('Tooltip')).toHaveLength(1); + expect(wrapper.find('Popover')).toHaveLength(1); }); }); diff --git a/awx/ui_next/src/components/FormField/FieldTooltip.jsx b/awx/ui_next/src/components/FormField/FieldTooltip.jsx index 56dfc43172..d75af47fab 100644 --- a/awx/ui_next/src/components/FormField/FieldTooltip.jsx +++ b/awx/ui_next/src/components/FormField/FieldTooltip.jsx @@ -1,6 +1,6 @@ -import React from 'react'; +import React, { useState } from 'react'; import { node } from 'prop-types'; -import { Tooltip } from '@patternfly/react-core'; +import { Popover } from '@patternfly/react-core'; import { QuestionCircleIcon as PFQuestionCircleIcon } from '@patternfly/react-icons'; import styled from 'styled-components'; @@ -9,18 +9,20 @@ const QuestionCircleIcon = styled(PFQuestionCircleIcon)` `; function FieldTooltip({ content, ...rest }) { + const [showTooltip, setShowTooltip] = useState(false); if (!content) { return null; } return ( - setShowTooltip(false)} {...rest} > - - + setShowTooltip(!showTooltip)} /> + ); } FieldTooltip.propTypes = {