Fixes bug where help icon showed up beneath the form label. I believe the labelIcon prop was added in a recent update of PF and is what we should be using.

This commit is contained in:
mabashian 2020-07-23 10:43:10 -04:00
parent 71d3fd3dbc
commit 45286ebf41
20 changed files with 209 additions and 148 deletions

View File

@ -31,8 +31,10 @@ function FormField(props) {
isRequired={isRequired}
validated={isValid ? 'default' : 'error'}
label={label}
labelIcon={
<FieldTooltip content={tooltip} maxWidth={tooltipMaxWidth} />
}
>
<FieldTooltip content={tooltip} maxWidth={tooltipMaxWidth} />
<TextArea
id={id}
isRequired={isRequired}
@ -53,8 +55,10 @@ function FormField(props) {
isRequired={isRequired}
validated={isValid ? 'default' : 'error'}
label={label}
labelIcon={
<FieldTooltip content={tooltip} maxWidth={tooltipMaxWidth} />
}
>
<FieldTooltip content={tooltip} maxWidth={tooltipMaxWidth} />
<TextInput
id={id}
isRequired={isRequired}

View File

@ -25,6 +25,13 @@ const InventoryLookupField = withI18n()(({ i18n, host }) => {
return (
<FormGroup
label={i18n._(t`Inventory`)}
labelIcon={
<FieldTooltip
content={i18n._(
t`Select the inventory that this host will belong to.`
)}
/>
}
isRequired
fieldId="inventory-lookup"
validated={
@ -32,9 +39,6 @@ const InventoryLookupField = withI18n()(({ i18n, host }) => {
}
helperTextInvalid={inventoryMeta.error}
>
<FieldTooltip
content={i18n._(t`Select the inventory that this host will belong to.`)}
/>
<InventoryLookup
value={inventory}
onBlur={() => inventoryHelpers.setTouched()}

View File

@ -101,13 +101,15 @@ function JobTypeField({ i18n }) {
<FormGroup
fieldId="propmt-job-type"
label={i18n._(t`Job Type`)}
validated={isValid ? 'default' : 'error'}
>
<FieldTooltip
content={i18n._(t`For job templates, select run to execute the playbook.
labelIcon={
<FieldTooltip
content={i18n._(t`For job templates, select run to execute the playbook.
Select check to only check playbook syntax, test environment setup,
and report problems without executing the playbook.`)}
/>
/>
}
validated={isValid ? 'default' : 'error'}
>
<AnsibleSelect
id="prompt-job-type"
data={options}
@ -134,11 +136,13 @@ function VerbosityField({ i18n }) {
fieldId="prompt-verbosity"
validated={isValid ? 'default' : 'error'}
label={i18n._(t`Verbosity`)}
>
<FieldTooltip
content={i18n._(t`Control the level of output ansible
labelIcon={
<FieldTooltip
content={i18n._(t`Control the level of output ansible
will produce as the playbook executes.`)}
/>
/>
}
>
<AnsibleSelect
id="prompt-verbosity"
data={options}
@ -180,8 +184,11 @@ function ShowChangesToggle({ i18n }) {
function TagField({ id, name, label, tooltip }) {
const [field, , helpers] = useField(name);
return (
<FormGroup fieldId={id} label={label}>
<FieldTooltip content={tooltip} />
<FormGroup
fieldId={id}
label={label}
labelIcon={<FieldTooltip content={tooltip} />}
>
<TagMultiSelect value={field.value} onChange={helpers.setValue} />
</FormGroup>
);

View File

@ -98,8 +98,8 @@ function MultipleChoiceField({ question }) {
isRequired={question.required}
validated={isValid ? 'default' : 'error'}
label={question.question_name}
labelIcon={<FieldTooltip content={question.question_description} />}
>
<FieldTooltip content={question.question_description} />
<AnsibleSelect
id={id}
isValid={isValid}
@ -126,8 +126,8 @@ function MultiSelectField({ question }) {
isRequired={question.required}
validated={isValid ? 'default' : 'error'}
label={question.question_name}
labelIcon={<FieldTooltip content={question.question_description} />}
>
<FieldTooltip content={question.question_description} />
<Select
variant={SelectVariant.typeaheadMulti}
id={id}

View File

@ -86,9 +86,9 @@ function CredentialLookup({
isRequired={required}
validated={isValid ? 'default' : 'error'}
label={label}
labelIcon={tooltip && <FieldTooltip content={tooltip} />}
helperTextInvalid={helperTextInvalid}
>
{tooltip && <FieldTooltip content={tooltip} />}
<Lookup
id="credential"
header={label}

View File

@ -54,9 +54,9 @@ function InstanceGroupsLookup(props) {
<FormGroup
className={className}
label={i18n._(t`Instance Groups`)}
labelIcon={tooltip && <FieldTooltip content={tooltip} />}
fieldId="org-instance-groups"
>
{tooltip && <FieldTooltip content={tooltip} />}
<Lookup
id="org-instance-groups"
header={i18n._(t`Instance Groups`)}

View File

@ -65,8 +65,8 @@ function ProjectLookup({
isRequired={required}
validated={isValid ? 'default' : 'error'}
label={i18n._(t`Project`)}
labelIcon={tooltip && <FieldTooltip content={tooltip} />}
>
{tooltip && <FieldTooltip content={tooltip} />}
<Lookup
id="project"
header={i18n._(t`Project`)}

View File

@ -76,12 +76,14 @@ function ApplicationFormFields({
}
isRequired
label={i18n._(t`Authorization grant type`)}
labelIcon={
<FieldTooltip
content={i18n._(
t`The Grant type the user must use for acquire tokens for this application`
)}
/>
}
>
<FieldTooltip
content={i18n._(
t`The Grant type the user must use for acquire tokens for this application`
)}
/>
<AnsibleSelect
{...authorizationTypeField}
isValid={
@ -118,12 +120,14 @@ function ApplicationFormFields({
}
isRequired
label={i18n._(t`Client type`)}
labelIcon={
<FieldTooltip
content={i18n._(
t`Set to Public or Confidential depending on how secure the client device is.`
)}
/>
}
>
<FieldTooltip
content={i18n._(
t`Set to Public or Confidential depending on how secure the client device is.`
)}
/>
<AnsibleSelect
{...clientTypeField}
isValid={!clientTypeMeta.touched || !clientTypeMeta.error}

View File

@ -35,12 +35,14 @@ function BecomeMethodField({ fieldOptions, isRequired }) {
fieldId={`credential-${fieldOptions.id}`}
helperTextInvalid={meta.error}
label={fieldOptions.label}
labelIcon={
fieldOptions.help_text && (
<FieldTooltip content={fieldOptions.help_text} />
)
}
isRequired={isRequired}
isValid={!(meta.touched && meta.error)}
>
{fieldOptions.help_text && (
<FieldTooltip content={fieldOptions.help_text} />
)}
<Select
maxHeight={200}
variant={SelectVariant.typeahead}

View File

@ -126,12 +126,14 @@ function CredentialField({ credentialType, fieldOptions, i18n }) {
fieldId={`credential-${fieldOptions.id}`}
helperTextInvalid={meta.error}
label={fieldOptions.label}
labelIcon={
fieldOptions.help_text && (
<FieldTooltip content={fieldOptions.help_text} />
)
}
isRequired={isRequired}
isValid={isValid}
>
{fieldOptions.help_text && (
<FieldTooltip content={fieldOptions.help_text} />
)}
<CredentialInput
credentialKind={credentialType.kind}
fieldOptions={fieldOptions}

View File

@ -127,10 +127,12 @@ function CredentialPluginField(props) {
isRequired={isRequired}
isValid={isValid}
label={fieldOptions.label}
labelIcon={
fieldOptions.help_text && (
<FieldTooltip content={fieldOptions.help_text} />
)
}
>
{fieldOptions.help_text && (
<FieldTooltip content={fieldOptions.help_text} />
)}
<CredentialPluginInput {...props} />
</FormGroup>
)}

View File

@ -143,12 +143,14 @@ const InventorySourceFormFields = ({ sourceOptions, i18n }) => {
<FormGroup
fieldId="custom-virtualenv"
label={i18n._(t`Ansible Environment`)}
>
<FieldTooltip
content={i18n._(t`Select the custom
labelIcon={
<FieldTooltip
content={i18n._(t`Select the custom
Python virtual environment for this
inventory source sync to run on.`)}
/>
/>
}
>
<AnsibleSelect
id="custom-virtualenv"
data={[

View File

@ -91,12 +91,14 @@ const SCMSubForm = ({ i18n }) => {
}
isRequired
label={i18n._(t`Inventory file`)}
>
<FieldTooltip
content={i18n._(t`Select the inventory file
labelIcon={
<FieldTooltip
content={i18n._(t`Select the inventory file
to be synced by this source. You can select from
the dropdown or enter a file within the input.`)}
/>
/>
}
>
<AnsibleSelect
{...sourcePathField}
id="source_path"

View File

@ -49,17 +49,19 @@ export const RegionsField = withI18n()(({ i18n, regionOptions }) => {
helperTextInvalid={meta.error}
validated="default"
label={i18n._(t`Regions`)}
labelIcon={
<FieldTooltip
content={
<Trans>
Click on the regions field to see a list of regions for your cloud
provider. You can select multiple regions, or choose
<em> All</em> to include all regions. Only Hosts associated with
the selected regions will be updated.
</Trans>
}
/>
}
>
<FieldTooltip
content={
<Trans>
Click on the regions field to see a list of regions for your cloud
provider. You can select multiple regions, or choose
<em> All</em> to include all regions. Only Hosts associated with the
selected regions will be updated.
</Trans>
}
/>
<Select
variant={SelectVariant.typeaheadMulti}
id="regions"
@ -139,56 +141,58 @@ export const GroupByField = withI18n()(
helperTextInvalid={meta.error}
validated="default"
label={i18n._(t`Only group by`)}
labelIcon={
<FieldTooltip
content={
<Trans>
Select which groups to create automatically. AWX will create
group names similar to the following examples based on the
options selected:
<br />
<br />
<ul>
<li>
Availability Zone: <strong>zones &raquo; us-east-1b</strong>
</li>
<li>
Image ID: <strong>images &raquo; ami-b007ab1e</strong>
</li>
<li>
Instance ID: <strong>instances &raquo; i-ca11ab1e </strong>
</li>
<li>
Instance Type: <strong>types &raquo; type_m1_medium</strong>
</li>
<li>
Key Name: <strong>keys &raquo; key_testing</strong>
</li>
<li>
Region: <strong>regions &raquo; us-east-1</strong>
</li>
<li>
Security Group:{' '}
<strong>
security_groups &raquo; security_group_default
</strong>
</li>
<li>
Tags: <strong>tags &raquo; tag_Name_host1</strong>
</li>
<li>
VPC ID: <strong>vpcs &raquo; vpc-5ca1ab1e</strong>
</li>
<li>
Tag None: <strong>tags &raquo; tag_none</strong>
</li>
</ul>
<br />
If blank, all groups above are created except{' '}
<em>Instance ID</em>.
</Trans>
}
/>
}
>
<FieldTooltip
content={
<Trans>
Select which groups to create automatically. AWX will create group
names similar to the following examples based on the options
selected:
<br />
<br />
<ul>
<li>
Availability Zone: <strong>zones &raquo; us-east-1b</strong>
</li>
<li>
Image ID: <strong>images &raquo; ami-b007ab1e</strong>
</li>
<li>
Instance ID: <strong>instances &raquo; i-ca11ab1e </strong>
</li>
<li>
Instance Type: <strong>types &raquo; type_m1_medium</strong>
</li>
<li>
Key Name: <strong>keys &raquo; key_testing</strong>
</li>
<li>
Region: <strong>regions &raquo; us-east-1</strong>
</li>
<li>
Security Group:{' '}
<strong>
security_groups &raquo; security_group_default
</strong>
</li>
<li>
Tags: <strong>tags &raquo; tag_Name_host1</strong>
</li>
<li>
VPC ID: <strong>vpcs &raquo; vpc-5ca1ab1e</strong>
</li>
<li>
Tag None: <strong>tags &raquo; tag_none</strong>
</li>
</ul>
<br />
If blank, all groups above are created except <em>Instance ID</em>
.
</Trans>
}
/>
<Select
variant={SelectVariant.typeaheadMulti}
id="group-by"
@ -231,11 +235,13 @@ export const VerbosityField = withI18n()(({ i18n }) => {
fieldId="verbosity"
validated={isValid ? 'default' : 'error'}
label={i18n._(t`Verbosity`)}
>
<FieldTooltip
content={i18n._(t`Control the level of output Ansible
labelIcon={
<FieldTooltip
content={i18n._(t`Control the level of output Ansible
will produce for inventory source update jobs.`)}
/>
/>
}
>
<AnsibleSelect
id="verbosity"
data={options}

View File

@ -259,11 +259,13 @@ function ProjectFormFields({
<FormGroup
fieldId="project-custom-virtualenv"
label={i18n._(t`Ansible Environment`)}
>
<FieldTooltip
content={i18n._(t`Select the playbook to be executed by
labelIcon={
<FieldTooltip
content={i18n._(t`Select the playbook to be executed by
this job.`)}
/>
/>
}
>
<AnsibleSelect
id="project-custom-virtualenv"
data={[

View File

@ -83,12 +83,14 @@ const ManualSubForm = ({
isRequired
validated={!pathMeta.touched || !pathMeta.error ? 'default' : 'error'}
label={i18n._(t`Playbook Directory`)}
>
<FieldTooltip
content={i18n._(t`Select from the list of directories found in
labelIcon={
<FieldTooltip
content={i18n._(t`Select from the list of directories found in
the Project Base Path. Together the base path and the playbook
directory provide the full path used to locate playbooks.`)}
/>
/>
}
>
<AnsibleSelect
{...pathField}
id="local_path"

View File

@ -29,16 +29,18 @@ function AnswerTypeField({ i18n }) {
return (
<FormGroup
label={i18n._(t`Answer Type`)}
labelIcon={
<FieldTooltip
content={i18n._(
t`Choose an answer type or format you want as the prompt for the user.
Refer to the Ansible Tower Documentation for more additional
information about each option.`
)}
/>
}
isRequired
fieldId="question-answer-type"
>
<FieldTooltip
content={i18n._(
t`Choose an answer type or format you want as the prompt for the user.
Refer to the Ansible Tower Documentation for more additional
information about each option.`
)}
/>
<AnsibleSelect
id="question-type"
{...field}

View File

@ -298,10 +298,14 @@ function JobTemplateForm({
}
isRequired
label={i18n._(t`Playbook`)}
labelIcon={
<FieldTooltip
content={i18n._(
t`Select the playbook to be executed by this job.`
)}
/>
}
>
<FieldTooltip
content={i18n._(t`Select the playbook to be executed by this job.`)}
/>
<PlaybookSelect
projectId={projectField.value?.id}
isValid={!playbookMeta.touched || !playbookMeta.error}
@ -330,12 +334,17 @@ function JobTemplateForm({
onError={setContentError}
/>
</FieldWithPrompt>
<FormGroup label={i18n._(t`Labels`)} fieldId="template-labels">
<FieldTooltip
content={i18n._(t`Optional labels that describe this job template,
<FormGroup
label={i18n._(t`Labels`)}
labelIcon={
<FieldTooltip
content={i18n._(t`Optional labels that describe this job template,
such as 'dev' or 'test'. Labels can be used to group and filter
job templates and completed jobs.`)}
/>
/>
}
fieldId="template-labels"
>
<LabelSelect
value={labelsField.value}
onChange={labels => labelsHelpers.setValue(labels)}

View File

@ -126,8 +126,10 @@ function WebhookSubForm({ i18n, templateType }) {
fieldId="webhook_service"
helperTextInvalid={webhookServiceMeta.error}
label={i18n._(t`Webhook Service`)}
labelIcon={
<FieldTooltip content={i18n._(t`Select a webhook service.`)} />
}
>
<FieldTooltip content={i18n._(t`Select a webhook service.`)} />
<AnsibleSelect
{...webhookServiceField}
id="webhook_service"
@ -162,13 +164,15 @@ function WebhookSubForm({ i18n, templateType }) {
type="text"
fieldId="jt-webhookURL"
label={i18n._(t`Webhook URL`)}
labelIcon={
<FieldTooltip
content={i18n._(
t`Webhook services can launch jobs with this workflow job template by making a POST request to this URL.`
)}
/>
}
name="webhook_url"
>
<FieldTooltip
content={i18n._(
t`Webhook services can launch jobs with this workflow job template by making a POST request to this URL.`
)}
/>
<TextInput
id="t-webhookURL"
aria-label={i18n._(t`Webhook URL`)}
@ -178,13 +182,15 @@ function WebhookSubForm({ i18n, templateType }) {
</FormGroup>
<FormGroup
label={i18n._(t`Webhook Key`)}
labelIcon={
<FieldTooltip
content={i18n._(
t`Webhook services can use this as a shared secret.`
)}
/>
}
fieldId="template-webhook_key"
>
<FieldTooltip
content={i18n._(
t`Webhook services can use this as a shared secret.`
)}
/>
<InputGroup>
<TextInput
id="template-webhook_key"

View File

@ -157,12 +157,17 @@ function WorkflowJobTemplateForm({
</FieldWithPrompt>
</FormColumnLayout>
<FormFullWidthLayout>
<FormGroup label={i18n._(t`Labels`)} fieldId="template-labels">
<FieldTooltip
content={i18n._(t`Optional labels that describe this job template,
<FormGroup
label={i18n._(t`Labels`)}
labelIcon={
<FieldTooltip
content={i18n._(t`Optional labels that describe this job template,
such as 'dev' or 'test'. Labels can be used to group and filter
job templates and completed jobs.`)}
/>
/>
}
fieldId="template-labels"
>
<LabelSelect
value={labelsField.value}
onChange={labels => labelsHelpers.setValue(labels)}