External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-01-16 12:20:45 -03:30
Code Issues Packages Projects Releases Wiki Activity

Use consistent layout for subforms in job/template forms

Browse Source 
Signed-off-by: Vadiem Janssens <info@vadiemjanssens.nl>
This commit is contained in:
Vadiem Janssens 2020-06-18 17:05:18 +02:00 committed by John Mitchell
parent 8ea31d8cdd
commit 12b87fca8c
3 changed files with 101 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
awx/ui_next/README.md
View File

@ -8,7 +8,7 @@ The API development server will need to be running. See [CONTRIBUTING.md](../../
```shell
# Start the ui development server. While running, the ui will be reachable
# at https://127.0.01:3001 and updated automatically when code changes.
# at https://127.0.0.1:3001 and updated automatically when code changes.
npm --prefix=awx/ui_next start
```

71
awx/ui_next/src/screens/Template/shared/JobTemplateForm.jsx
View File

@ -9,6 +9,7 @@ import {
Switch,
Checkbox,
TextInput,
Title,
} from '@patternfly/react-core';
import ContentError from '../../../components/ContentError';
import ContentLoading from '../../../components/ContentLoading';
@ -27,6 +28,7 @@ import {
FormColumnLayout,
FormFullWidthLayout,
FormCheckboxLayout,
SubFormLayout,
} from '../../../components/FormLayout';
import { VariablesField } from '../../../components/CodeMirrorInput';
import { required } from '../../../util/validators';
@ -547,30 +549,53 @@ function JobTemplateForm({
</FormCheckboxLayout>
</FormGroup>
</FormFullWidthLayout>
<WebhookSubForm
enableWebhooks={enableWebhooks}
templateType={template.type}
/>
{allowCallbacks && (
{(allowCallbacks || enableWebhooks) && (
<>
{callbackUrl && (
<FormGroup
label={i18n._(t`Provisioning Callback URL`)}
fieldId="template-callback-url"
>
<TextInput
id="template-callback-url"
isDisabled
value={callbackUrl}
/>
</FormGroup>
)}
<FormField
id="template-host-config-key"
name="host_config_key"
label={i18n._(t`Host Config Key`)}
validate={allowCallbacks ? required(null, i18n) : null}
/>
<SubFormLayout>
{allowCallbacks && (
<>
<Title size="md">
{i18n._(t`Provisioning Callback details`)}
</Title>
<FormColumnLayout>
{callbackUrl && (
<FormGroup
label={i18n._(t`Provisioning Callback URL`)}
fieldId="template-callback-url"
>
<TextInput
id="template-callback-url"
isDisabled
value={callbackUrl}
/>
</FormGroup>
)}
<FormField
id="template-host-config-key"
name="host_config_key"
label={i18n._(t`Host Config Key`)}
validate={
allowCallbacks ? required(null, i18n) : null
}
/>
</FormColumnLayout>
<br />
</>
)}
{enableWebhooks && (
<>
<Title size="md">{i18n._(t`Webhook details`)}</Title>
<FormColumnLayout>
<WebhookSubForm
enableWebhooks={enableWebhooks}
templateType={template.type}
/>
</FormColumnLayout>
</>
)}
</SubFormLayout>
</>
)}
</FormColumnLayout>

86
awx/ui_next/src/screens/Template/shared/WorkflowJobTemplateForm.jsx
View File

@ -4,7 +4,13 @@ import PropTypes, { shape } from 'prop-types';
import { withI18n } from '@lingui/react';
import { useField, withFormik } from 'formik';
import { Form, FormGroup, Checkbox, TextInput } from '@patternfly/react-core';
import {
Form,
FormGroup,
Checkbox,
TextInput,
Title,
} from '@patternfly/react-core';
import { required } from '../../../util/validators';
import FieldWithPrompt from '../../../components/FieldWithPrompt';
@ -16,6 +22,7 @@ import {
FormColumnLayout,
FormFullWidthLayout,
FormCheckboxLayout,
SubFormLayout,
} from '../../../components/FormLayout';
import OrganizationLookup from '../../../components/Lookup/OrganizationLookup';
import { InventoryLookup } from '../../../components/Lookup';
@ -175,39 +182,50 @@ function WorkflowJobTemplateForm({
)}
/>
</FormFullWidthLayout>
<FormCheckboxLayout fieldId="options" isInline label={i18n._(t`Options`)}>
<Checkbox
aria-label={i18n._(t`Enable Webhook`)}
label={
<span>
{i18n._(t`Enable Webhook`)}
&nbsp;
<FieldTooltip
content={i18n._(
t`Enable Webhook for this workflow job template.`
)}
/>
</span>
}
id="wfjt-enabled-webhooks"
isChecked={enableWebhooks}
onChange={checked => {
setEnableWebhooks(checked);
}}
/>
<CheckboxField
name="allow_simultaneous"
id="allow_simultaneous"
tooltip={i18n._(
t`If enabled, simultaneous runs of this workflow job template will be allowed.`
)}
label={i18n._(t`Enable Concurrent Jobs`)}
/>
</FormCheckboxLayout>
<WebhookSubForm
enableWebhooks={enableWebhooks}
templateType={template.type}
/>
<FormGroup fieldId="options" label={i18n._(t`Options`)}>
<FormCheckboxLayout isInline>
<Checkbox
aria-label={i18n._(t`Enable Webhook`)}
label={
<span>
{i18n._(t`Enable Webhook`)}
&nbsp;
<FieldTooltip
content={i18n._(
t`Enable Webhook for this workflow job template.`
)}
/>
</span>
}
id="wfjt-enabled-webhooks"
isChecked={enableWebhooks}
onChange={checked => {
setEnableWebhooks(checked);
}}
/>
<CheckboxField
name="allow_simultaneous"
id="allow_simultaneous"
tooltip={i18n._(
t`If enabled, simultaneous runs of this workflow job template will be allowed.`
)}
label={i18n._(t`Enable Concurrent Jobs`)}
/>
</FormCheckboxLayout>
</FormGroup>
{enableWebhooks && (
<>
<SubFormLayout>
<Title size="md">{i18n._(t`Webhook details`)}</Title>
<WebhookSubForm
enableWebhooks={enableWebhooks}
templateType={template.type}
/>
</SubFormLayout>
</>
)}
{submitError && <FormSubmitError error={submitError} />}
<FormActionGroup onCancel={handleCancel} onSubmit={handleSubmit} />
</Form>