External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-01-11 18:09:57 -03:30
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #9940 from seiwailai/issue-9911-not-display-error-message

Browse Source 
CredentialPluginField: Fixes bug to display invalid helper text for empty required field.

Fixes #9911. Include the HTML element of displaying helper text which is similar to FormGroup.tsx's inValidHelperText implementation
Signed-off-by: seiwailai laiseiwai@gmail.com
SUMMARY

Under normal circumstances, we initiate input fields using FormGroup element. However, for credentials purpose, we customized the FormGroup by adding another children element called CredentialPluginInput which comprised of Input Group. Thus, events related to the input fields will happen within the InputGroup logic. However, the Input Group doesn't have the functionality of rendering error at the moment.
Thus, we should explicitly render the error under FormGroup element if there is an error and needed to be displayed.

ISSUE TYPE


Bugfix Pull Request

COMPONENT NAME


UI: CredentialPluginField.jsx

AWX VERSION

awx=19.0.0

ADDITIONAL INFORMATION


After

Reviewed-by: Jake McDermott <yo@jakemcdermott.me>
Reviewed-by: Tiago Góes <tiago.goes2009@gmail.com>
This commit is contained in:
softwarefactory-project-zuul[bot] 2021-04-19 22:20:50 +00:00 committed by GitHub
commit a857352e30
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 14 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
awx/ui_next/src/screens/Credential/shared/CredentialPlugins/CredentialPluginField.jsx
View File

@ -11,6 +11,8 @@ import {
Tooltip,
} from '@patternfly/react-core';
import { KeyIcon } from '@patternfly/react-icons';
import styles from '@patternfly/react-styles/css/components/Form/form';
import { css } from '@patternfly/react-styles';
import FieldWithPrompt from '../../../../components/FieldWithPrompt';
import Popover from '../../../../components/Popover';
import { CredentialPluginPrompt } from './CredentialPluginPrompt';
@ -101,6 +103,16 @@ function CredentialPluginField(props) {
const [, meta, helpers] = useField(`inputs.${fieldOptions.id}`);
const [passwordPromptField] = useField(`passwordPrompts.${fieldOptions.id}`);
const invalidHelperTextToDisplay = meta.error && meta.touched && (
<div
className={css(styles.formHelperText, styles.modifiers.error)}
id={`${fieldOptions.id}-helper`}
aria-live="polite"
>
{meta.error}
</div>
);
useEffect(() => {
if (passwordPromptField.value) {
helpers.setValue('');
@ -121,15 +133,7 @@ function CredentialPluginField(props) {
tooltip={fieldOptions.help_text}
>
<CredentialPluginInput {...props} />
{meta.error && meta.touched && (
<div
className="pf-c-form__helper-text pf-m-error"
id={`${fieldOptions.id}-helper`}
aria-live="polite"
>
{meta.error}
</div>
)}
{invalidHelperTextToDisplay}
</FieldWithPrompt>
) : (
<FormGroup
@ -145,6 +149,7 @@ function CredentialPluginField(props) {
}
>
<CredentialPluginInput {...props} />
{invalidHelperTextToDisplay}
</FormGroup>
)}
</>