External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-05-10 02:47:36 -02: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
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 ```shell
# Start the ui development server. While running, the ui will be reachable # 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 npm --prefix=awx/ui_next start
``` ```

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

@@ -9,6 +9,7 @@ import {
Switch, Switch,
Checkbox, Checkbox,
TextInput, TextInput,
Title,
} from '@patternfly/react-core'; } from '@patternfly/react-core';
import ContentError from '../../../components/ContentError'; import ContentError from '../../../components/ContentError';
import ContentLoading from '../../../components/ContentLoading'; import ContentLoading from '../../../components/ContentLoading';
@@ -27,6 +28,7 @@ import {
FormColumnLayout, FormColumnLayout,
FormFullWidthLayout, FormFullWidthLayout,
FormCheckboxLayout, FormCheckboxLayout,
SubFormLayout,
} from '../../../components/FormLayout'; } from '../../../components/FormLayout';
import { VariablesField } from '../../../components/CodeMirrorInput'; import { VariablesField } from '../../../components/CodeMirrorInput';
import { required } from '../../../util/validators'; import { required } from '../../../util/validators';
@@ -547,30 +549,53 @@ function JobTemplateForm({
</FormCheckboxLayout> </FormCheckboxLayout>
</FormGroup> </FormGroup>
</FormFullWidthLayout> </FormFullWidthLayout>
<WebhookSubForm
enableWebhooks={enableWebhooks} {(allowCallbacks || enableWebhooks) && (
templateType={template.type}
/>
{allowCallbacks && (
<> <>
{callbackUrl && ( <SubFormLayout>
<FormGroup {allowCallbacks && (
label={i18n._(t`Provisioning Callback URL`)} <>
fieldId="template-callback-url" <Title size="md">
> {i18n._(t`Provisioning Callback details`)}
<TextInput </Title>
id="template-callback-url" <FormColumnLayout>
isDisabled {callbackUrl && (
value={callbackUrl} <FormGroup
/> label={i18n._(t`Provisioning Callback URL`)}
</FormGroup> fieldId="template-callback-url"
)} >
<FormField <TextInput
id="template-host-config-key" id="template-callback-url"
name="host_config_key" isDisabled
label={i18n._(t`Host Config Key`)} value={callbackUrl}
validate={allowCallbacks ? required(null, i18n) : null} />
/> </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> </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 { withI18n } from '@lingui/react';
import { useField, withFormik } from 'formik'; 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 { required } from '../../../util/validators';
import FieldWithPrompt from '../../../components/FieldWithPrompt'; import FieldWithPrompt from '../../../components/FieldWithPrompt';
@@ -16,6 +22,7 @@ import {
FormColumnLayout, FormColumnLayout,
FormFullWidthLayout, FormFullWidthLayout,
FormCheckboxLayout, FormCheckboxLayout,
SubFormLayout,
} from '../../../components/FormLayout'; } from '../../../components/FormLayout';
import OrganizationLookup from '../../../components/Lookup/OrganizationLookup'; import OrganizationLookup from '../../../components/Lookup/OrganizationLookup';
import { InventoryLookup } from '../../../components/Lookup'; import { InventoryLookup } from '../../../components/Lookup';
@@ -175,39 +182,50 @@ function WorkflowJobTemplateForm({
)} )}
/> />
</FormFullWidthLayout> </FormFullWidthLayout>
<FormCheckboxLayout fieldId="options" isInline label={i18n._(t`Options`)}> <FormGroup fieldId="options" label={i18n._(t`Options`)}>
<Checkbox <FormCheckboxLayout isInline>
aria-label={i18n._(t`Enable Webhook`)} <Checkbox
label={ aria-label={i18n._(t`Enable Webhook`)}
<span> label={
{i18n._(t`Enable Webhook`)} <span>
&nbsp; {i18n._(t`Enable Webhook`)}
<FieldTooltip &nbsp;
content={i18n._( <FieldTooltip
t`Enable Webhook for this workflow job template.` content={i18n._(
)} t`Enable Webhook for this workflow job template.`
/> )}
</span> />
} </span>
id="wfjt-enabled-webhooks" }
isChecked={enableWebhooks} id="wfjt-enabled-webhooks"
onChange={checked => { isChecked={enableWebhooks}
setEnableWebhooks(checked); onChange={checked => {
}} setEnableWebhooks(checked);
/> }}
<CheckboxField />
name="allow_simultaneous" <CheckboxField
id="allow_simultaneous" name="allow_simultaneous"
tooltip={i18n._( id="allow_simultaneous"
t`If enabled, simultaneous runs of this workflow job template will be allowed.` tooltip={i18n._(
)} t`If enabled, simultaneous runs of this workflow job template will be allowed.`
label={i18n._(t`Enable Concurrent Jobs`)} )}
/> label={i18n._(t`Enable Concurrent Jobs`)}
</FormCheckboxLayout> />
<WebhookSubForm </FormCheckboxLayout>
enableWebhooks={enableWebhooks} </FormGroup>
templateType={template.type}
/> {enableWebhooks && (
<>
<SubFormLayout>
<Title size="md">{i18n._(t`Webhook details`)}</Title>
<WebhookSubForm
enableWebhooks={enableWebhooks}
templateType={template.type}
/>
</SubFormLayout>
</>
)}
{submitError && <FormSubmitError error={submitError} />} {submitError && <FormSubmitError error={submitError} />}
<FormActionGroup onCancel={handleCancel} onSubmit={handleSubmit} /> <FormActionGroup onCancel={handleCancel} onSubmit={handleSubmit} />
</Form> </Form>