diff --git a/awx/ui_next/src/components/FormField/FieldTooltip.jsx b/awx/ui_next/src/components/FormField/FieldTooltip.jsx new file mode 100644 index 0000000000..59031bb365 --- /dev/null +++ b/awx/ui_next/src/components/FormField/FieldTooltip.jsx @@ -0,0 +1,26 @@ +import React from 'react'; +import { node } from 'prop-types'; +import { Tooltip } from '@patternfly/react-core'; +import { QuestionCircleIcon as PFQuestionCircleIcon } from '@patternfly/react-icons'; +import styled from 'styled-components'; + +const QuestionCircleIcon = styled(PFQuestionCircleIcon)` + margin-left: 10px; +`; + +function FieldTooltip({ content }) { + return ( + + + + ); +} +FieldTooltip.propTypes = { + content: node.isRequired, +}; + +export default FieldTooltip; diff --git a/awx/ui_next/src/components/FormField/index.js b/awx/ui_next/src/components/FormField/index.js index c592b7c800..4ce1944f17 100644 --- a/awx/ui_next/src/components/FormField/index.js +++ b/awx/ui_next/src/components/FormField/index.js @@ -1,2 +1,3 @@ export { default } from './FormField'; export { default as CheckboxField } from './CheckboxField'; +export { default as FieldTooltip } from './FieldTooltip'; diff --git a/awx/ui_next/src/components/ListHeader/ListHeader.jsx b/awx/ui_next/src/components/ListHeader/ListHeader.jsx index 4974c001c9..629a85b205 100644 --- a/awx/ui_next/src/components/ListHeader/ListHeader.jsx +++ b/awx/ui_next/src/components/ListHeader/ListHeader.jsx @@ -112,6 +112,7 @@ class ListHeader extends React.Component { columns, onSearch: this.handleSearch, onSort: this.handleSort, + qsConfig, })} InventoriesAPI.read(params); @@ -26,11 +20,7 @@ class InventoryLookup extends React.Component { isRequired={required} fieldId="inventory-lookup" > - {tooltip && ( - - - - )} + {tooltip && } initially renders succesfully 1`] = ` } onSearch={[Function]} onSort={[Function]} + qsConfig={ + Object { + "dateFields": Array [ + "modified", + "created", + ], + "defaultParams": Object { + "order_by": "name", + "page": 1, + "page_size": 5, + }, + "integerFields": Array [ + "page", + "page_size", + ], + "namespace": "notification", + } + } sortOrder="ascending" sortedColumnKey="name" > @@ -423,6 +441,24 @@ exports[` initially renders succesfully 1`] = ` onSearch={[Function]} onSelectAll={null} onSort={[Function]} + qsConfig={ + Object { + "dateFields": Array [ + "modified", + "created", + ], + "defaultParams": Object { + "order_by": "name", + "page": 1, + "page_size": 5, + }, + "integerFields": Array [ + "page", + "page_size", + ], + "namespace": "notification", + } + } showSelectAll={false} sortOrder="ascending" sortedColumnKey="name" @@ -590,6 +626,24 @@ exports[` initially renders succesfully 1`] = ` ] } onSearch={[Function]} + qsConfig={ + Object { + "dateFields": Array [ + "modified", + "created", + ], + "defaultParams": Object { + "order_by": "name", + "page": 1, + "page_size": 5, + }, + "integerFields": Array [ + "page", + "page_size", + ], + "namespace": "notification", + } + } sortedColumnKey="name" > initially renders succesfully 1`] = ` } i18n={"/i18n/"} onSearch={[Function]} + qsConfig={ + Object { + "dateFields": Array [ + "modified", + "created", + ], + "defaultParams": Object { + "order_by": "name", + "page": 1, + "page_size": 5, + }, + "integerFields": Array [ + "page", + "page_size", + ], + "namespace": "notification", + } + } sortedColumnKey="name" >
label { grid-column: 1 / -1; @@ -374,15 +368,12 @@ class JobTemplateForm extends Component { isValid={isValid} label={i18n._(t`Job Type`)} > - - - + the playbook. Select check to only check playbook syntax, + test environment setup, and report problems without + executing the playbook.`)} + /> - - - + /> - - - + /> - - - + produce as the playbook executes.`)} + /> - - - + Ansible tasks, where supported. This is equivalent + to Ansible’s --diff mode.`)} + />
- - - + playbook, and you want to run a specific part of a + play or task. Use commas to separate multiple tags. + Refer to Ansible Tower documentation for details on + the usage of tags.`)} + /> form.setFieldValue(field.name, value)} @@ -624,16 +600,13 @@ class JobTemplateForm extends Component { css="margin-top: 20px" fieldId="template-skip-tags" > - - - + /> form.setFieldValue(field.name, value)} @@ -661,16 +634,13 @@ class JobTemplateForm extends Component { {i18n._(t`Provisioning Callbacks`)}   - - - + /> } id="option-callbacks" @@ -735,50 +705,29 @@ class JobTemplateForm extends Component { const FormikApp = withFormik({ mapPropsToValues(props) { const { template = {} } = props; - const { - name = '', - description = '', - job_type = 'run', - inventory = '', - project = '', - playbook = '', - forks, - limit, - verbosity, - job_slice_count, - timeout, - diff_mode, - job_tags, - skip_tags, - become_enabled, - allow_callbacks, - allow_simultaneous, - use_fact_cache, - host_config_key, - summary_fields = { labels: { results: [] } }, - } = { ...template }; + const { summary_fields = { labels: { results: [] } } } = template; return { - name: name || '', - description: description || '', - job_type: job_type || '', - inventory: inventory || '', - project: project || '', - playbook: playbook || '', + name: template.name || '', + description: template.description || '', + job_type: template.job_type || 'run', + inventory: template.inventory || '', + project: template.project || '', + playbook: template.playbook || '', labels: summary_fields.labels.results, - forks: forks || 0, - limit: limit || '', - verbosity: verbosity || '0', - job_slice_count: job_slice_count || 1, - timeout: timeout || 0, - diff_mode: diff_mode || false, - job_tags: job_tags || '', - skip_tags: skip_tags || '', - become_enabled: become_enabled || false, - allow_callbacks: allow_callbacks || false, - allow_simultaneous: allow_simultaneous || false, - use_fact_cache: use_fact_cache || false, - host_config_key: host_config_key || '', + forks: template.forks || 0, + limit: template.limit || '', + verbosity: template.verbosity || '0', + job_slice_count: template.job_slice_count || 1, + timeout: template.timeout || 0, + diff_mode: template.diff_mode || false, + job_tags: template.job_tags || '', + skip_tags: template.skip_tags || '', + become_enabled: template.become_enabled || false, + allow_callbacks: template.allow_callbacks || false, + allow_simultaneous: template.allow_simultaneous || false, + use_fact_cache: template.use_fact_cache || false, + host_config_key: template.host_config_key || '', }; }, handleSubmit: (values, bag) => bag.props.handleSubmit(values),