diff --git a/awx/ui_next/src/components/FieldWithPrompt/FieldWithPrompt.jsx b/awx/ui_next/src/components/FieldWithPrompt/FieldWithPrompt.jsx new file mode 100644 index 0000000000..8932c7cbe4 --- /dev/null +++ b/awx/ui_next/src/components/FieldWithPrompt/FieldWithPrompt.jsx @@ -0,0 +1,71 @@ +import React from 'react'; +import { bool, node, string } from 'prop-types'; +import { withI18n } from '@lingui/react'; +import { t } from '@lingui/macro'; +import { CheckboxField, FieldTooltip } from '@components/FormField'; +import styled from 'styled-components'; + +const FieldHeader = styled.div` + display: flex; + justify-content: space-between; + padding-bottom: var(--pf-c-form__label--PaddingBottom); + + label { + --pf-c-form__label--PaddingBottom: 0px; + } +`; + +const StyledCheckboxField = styled(CheckboxField)` + --pf-c-check__label--FontSize: var(--pf-c-form__label--FontSize); +`; + +function FieldWithPrompt({ + children, + fieldId, + i18n, + isRequired, + label, + promptId, + promptName, + tooltip, +}) { + return ( +
+ +
+ + {tooltip && } +
+ +
+ {children} +
+ ); +} + +FieldWithPrompt.propTypes = { + fieldId: string.isRequired, + isRequired: bool, + label: string.isRequired, + promptId: string.isRequired, + promptName: string.isRequired, + tooltip: node, +}; + +FieldWithPrompt.defaultProps = { + isRequired: false, + tooltip: null, +}; + +export default withI18n()(FieldWithPrompt); diff --git a/awx/ui_next/src/components/FieldWithPrompt/FieldWithPrompt.test.jsx b/awx/ui_next/src/components/FieldWithPrompt/FieldWithPrompt.test.jsx new file mode 100644 index 0000000000..4358737144 --- /dev/null +++ b/awx/ui_next/src/components/FieldWithPrompt/FieldWithPrompt.test.jsx @@ -0,0 +1,66 @@ +import React from 'react'; +import { mountWithContexts } from '@testUtils/enzymeHelpers'; +import { Field, Formik } from 'formik'; +import FieldWithPrompt from './FieldWithPrompt'; + +describe('FieldWithPrompt', () => { + let wrapper; + + afterEach(() => { + wrapper.unmount(); + }); + + test('Required asterisk and Tooltip hidden when not required and tooltip not provided', () => { + wrapper = mountWithContexts( + + {() => ( + + + {() => } + + + )} + + ); + expect(wrapper.find('.pf-c-form__label-required')).toHaveLength(0); + expect(wrapper.find('Tooltip')).toHaveLength(0); + }); + + test('Required asterisk and Tooltip shown when required and tooltip provided', () => { + wrapper = mountWithContexts( + + {() => ( + + + {() => } + + + )} + + ); + expect(wrapper.find('.pf-c-form__label-required')).toHaveLength(1); + expect(wrapper.find('Tooltip')).toHaveLength(1); + }); +}); diff --git a/awx/ui_next/src/components/FieldWithPrompt/index.js b/awx/ui_next/src/components/FieldWithPrompt/index.js new file mode 100644 index 0000000000..77c1d5bda6 --- /dev/null +++ b/awx/ui_next/src/components/FieldWithPrompt/index.js @@ -0,0 +1 @@ +export { default } from './FieldWithPrompt'; diff --git a/awx/ui_next/src/screens/Template/JobTemplateAdd/JobTemplateAdd.test.jsx b/awx/ui_next/src/screens/Template/JobTemplateAdd/JobTemplateAdd.test.jsx index 508b85de82..748b71dbcf 100644 --- a/awx/ui_next/src/screens/Template/JobTemplateAdd/JobTemplateAdd.test.jsx +++ b/awx/ui_next/src/screens/Template/JobTemplateAdd/JobTemplateAdd.test.jsx @@ -8,25 +8,26 @@ import { JobTemplatesAPI, LabelsAPI } from '@api'; jest.mock('@api'); const jobTemplateData = { - name: 'Foo', - description: 'Baz', - job_type: 'run', - inventory: 1, - project: 2, - playbook: 'Bar', - forks: 0, - limit: '', - verbosity: '0', - job_slice_count: 1, - timeout: 0, - job_tags: '', - skip_tags: '', - diff_mode: false, allow_callbacks: false, allow_simultaneous: false, - use_fact_cache: false, + ask_job_type_on_launch: false, + description: 'Baz', + diff_mode: false, + forks: 0, host_config_key: '', + inventory: 1, + job_slice_count: 1, + job_tags: '', + job_type: 'run', + limit: '', + name: 'Foo', + playbook: 'Bar', + project: 2, scm_branch: '', + skip_tags: '', + timeout: 0, + use_fact_cache: false, + verbosity: '0', }; describe('', () => { diff --git a/awx/ui_next/src/screens/Template/JobTemplateEdit/JobTemplateEdit.test.jsx b/awx/ui_next/src/screens/Template/JobTemplateEdit/JobTemplateEdit.test.jsx index d00cc655a0..8798249169 100644 --- a/awx/ui_next/src/screens/Template/JobTemplateEdit/JobTemplateEdit.test.jsx +++ b/awx/ui_next/src/screens/Template/JobTemplateEdit/JobTemplateEdit.test.jsx @@ -9,27 +9,24 @@ import JobTemplateEdit from './JobTemplateEdit'; jest.mock('@api'); const mockJobTemplate = { - id: 1, - name: 'Foo', - description: 'Bar', - job_type: 'run', - inventory: 2, - project: 3, - playbook: 'Baz', - type: 'job_template', - forks: 0, - limit: '', - verbosity: '0', - job_slice_count: 1, - timeout: 0, - job_tags: '', - skip_tags: '', - diff_mode: false, allow_callbacks: false, allow_simultaneous: false, - use_fact_cache: false, + ask_job_type_on_launch: false, + description: 'Bar', + diff_mode: false, + forks: 0, host_config_key: '', + id: 1, + inventory: 2, + job_slice_count: 1, + job_tags: '', + job_type: 'run', + limit: '', + name: 'Foo', + playbook: 'Baz', + project: 3, scm_branch: '', + skip_tags: '', summary_fields: { user_capabilities: { edit: true, @@ -50,6 +47,10 @@ const mockJobTemplate = { name: 'Boo', }, }, + timeout: 0, + type: 'job_template', + use_fact_cache: false, + verbosity: '0', }; const mockRelatedCredentials = { diff --git a/awx/ui_next/src/screens/Template/shared/JobTemplateForm.jsx b/awx/ui_next/src/screens/Template/shared/JobTemplateForm.jsx index 326ae5f389..1e3dd2caed 100644 --- a/awx/ui_next/src/screens/Template/shared/JobTemplateForm.jsx +++ b/awx/ui_next/src/screens/Template/shared/JobTemplateForm.jsx @@ -21,6 +21,7 @@ import FormField, { FieldTooltip, FormSubmitError, } from '@components/FormField'; +import FieldWithPrompt from '@components/FieldWithPrompt'; import FormRow from '@components/FormRow'; import CollapsibleSection from '@components/CollapsibleSection'; import { required } from '@util/validators'; @@ -227,37 +228,35 @@ class JobTemplateForm extends Component { type="text" label={i18n._(t`Description`)} /> - - {({ form, field }) => { - const isValid = !form.touched.job_type || !form.errors.job_type; - return ( - - + + {({ form, field }) => { + const isValid = !form.touched.job_type || !form.errors.job_type; + return ( - - ); - }} - + ); + }} + +