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 (
-
- );
- }}
-
+ );
+ }}
+
+