Skip to content

Commit cf07898

Browse files
ammont82ammont82
authored
MGMT-17130: Add correct id to <HelperItem> components when shown errors (#2517)
* Add id to HelperItem components to indicate errors * Add tests for validations in New cluster page * Changing id in HelperItem components to show errors
1 parent 8a0e737 commit cf07898

File tree

19 files changed

+118
-8
lines changed

19 files changed

+118
-8
lines changed

‎libs/ui-lib-tests/cypress/integration/static-ip/1-configure-static-ip-network-wide.cy.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,7 @@ describe(`Assisted Installer Static IP Network wide Configuration`, () => {
113113
staticIpPage.dualStackNetworking().click();
114114

115115
testIpv4AndIpv6Addresses.forEach((dnsEntry) => {
116-
staticIpPage.networkWideDns().type(dnsEntry);
116+
staticIpPage.networkWideDns().clear().type(dnsEntry);
117117
commonActions.getDNSErrorMessage().should('not.exist');
118118
staticIpPage.networkWideDns().clear();
119119
});

‎libs/ui-lib-tests/cypress/integration/use-cases/create-cluster/validations-new-cluster-page.cy.ts

+71
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import { NewClusterPage } from '../../../views/pages/NewClusterPage';
2+
import { ClusterDetailsForm } from '../../../views/forms/ClusterDetails/ClusterDetailsForm';
3+
import { clusterDetailsPage } from '../../../views/clusterDetails';
4+
5+
describe('Create a new cluster and show correct validations for every field', () => {
6+
const setTestStartSignal = (activeSignal: string) => {
7+
cy.setTestEnvironment({
8+
activeSignal,
9+
activeScenario: 'AI_CREATE_MULTINODE',
10+
});
11+
};
12+
before(() => setTestStartSignal(''));
13+
14+
beforeEach(() => {
15+
setTestStartSignal('');
16+
NewClusterPage.visit();
17+
ClusterDetailsForm.init();
18+
});
19+
20+
it('Base Name (Invalid)', () => {
21+
const invalidDnsDomain = 'iamnotavaliddnsdomain-iamnotavaliddnsdomain-iamnotavaliddnsdomain';
22+
clusterDetailsPage.inputClusterName();
23+
clusterDetailsPage.inputBaseDnsDomain(invalidDnsDomain);
24+
clusterDetailsPage.clickClusterDetailsBody();
25+
clusterDetailsPage.validateInputDnsDomainFieldHelper(
26+
`Every single host component in the base domain name cannot contain more than 63 characters and must not contain spaces.`,
27+
);
28+
});
29+
30+
it('Base Name (Field Not Empty)', () => {
31+
const emptyDns = ' ';
32+
clusterDetailsPage.inputBaseDnsDomain(emptyDns);
33+
clusterDetailsPage.clickClusterDetailsBody();
34+
clusterDetailsPage.validateInputDnsDomainFieldHelper(
35+
`Every single host component in the base domain name cannot contain more than 63 characters and must not contain spaces.`,
36+
);
37+
});
38+
39+
it('Pull secret (Field not empty)', () => {
40+
const emptyPullSecret = '{}';
41+
let pullSecretError = 'Required.';
42+
clusterDetailsPage.inputPullSecret(emptyPullSecret);
43+
clusterDetailsPage.clearPullSecret();
44+
clusterDetailsPage.validateInputPullSecretFieldHelper(pullSecretError);
45+
});
46+
47+
it('Pull Secret (Malformed)', () => {
48+
const malformedJsonPullSecret = '{{}}';
49+
let pullSecretError =
50+
"Invalid pull secret format. You must use your Red Hat account's pull secret";
51+
clusterDetailsPage.inputPullSecret(malformedJsonPullSecret);
52+
clusterDetailsPage.clickClusterDetailsBody();
53+
clusterDetailsPage.validateInputPullSecretFieldHelper(pullSecretError);
54+
});
55+
56+
it('Pull secret (Invalid entry)', () => {
57+
const invalidPullSecret = '{"invalid": "pull-secret"}';
58+
// Need to set valid name and DNS
59+
clusterDetailsPage.inputClusterName();
60+
clusterDetailsPage.inputBaseDnsDomain();
61+
clusterDetailsPage.inputPullSecret(invalidPullSecret);
62+
63+
const errorSuffix = Cypress.env('OCM_USER')
64+
? 'Learn more about pull secrets and view examples'
65+
: "A Red Hat account's pull secret can be found in";
66+
clusterDetailsPage.clickClusterDetailsBody();
67+
clusterDetailsPage.validateInputPullSecretFieldHelper(
68+
`Invalid pull secret format. You must use your Red Hat account's pull secret`,
69+
);
70+
});
71+
});

‎libs/ui-lib-tests/cypress/support/variables/cluster-details.ts

+2
Original file line numberDiff line numberDiff line change
@@ -23,3 +23,5 @@ Cypress.env(
2323
'staticIpNetworkConfigFieldId',
2424
'#form-radio-hostsNetworkConfigurationType-static-field',
2525
);
26+
Cypress.env('baseDnsDomainFieldHelperErrorId', '#form-input-baseDnsDomain-field-helper-error');
27+
Cypress.env('pullSecretFieldHelperErrorId', '#form-input-pullSecret-field-helper-error');

‎libs/ui-lib-tests/cypress/views/clusterDetails.ts

+15-3
Original file line numberDiff line numberDiff line change
@@ -32,10 +32,10 @@ export const clusterDetailsPage = {
3232
getPullSecretFieldHelper: () => {
3333
return cy.get(Cypress.env('pullSecretFieldHelperId'));
3434
},
35-
inputPullSecret: () => {
35+
inputPullSecret: (pullSecretValue = pullSecret) => {
3636
clusterDetailsPage.getPullSecret().clear();
37-
cy.pasteText(Cypress.env('pullSecretFieldId'), pullSecret);
38-
clusterDetailsPage.getPullSecret().should('contain.text', pullSecret);
37+
cy.pasteText(Cypress.env('pullSecretFieldId'), pullSecretValue);
38+
clusterDetailsPage.getPullSecret().should('contain.text', pullSecretValue);
3939
},
4040
checkAiTechSupportLevel: () => {
4141
cy.get(Cypress.env('assistedInstallerSupportLevel'))
@@ -126,4 +126,16 @@ export const clusterDetailsPage = {
126126
getExternalPlatformIntegrationStaticField: () => {
127127
return cy.get('#form-static-platform-field');
128128
},
129+
clickClusterDetailsBody: () => {
130+
cy.get('.pf-v5-l-grid').click();
131+
},
132+
validateInputDnsDomainFieldHelper: (msg) => {
133+
cy.get(Cypress.env('baseDnsDomainFieldHelperErrorId')).should('contain', msg);
134+
},
135+
clearPullSecret: () => {
136+
cy.get(Cypress.env('pullSecretFieldId')).clear().blur();
137+
},
138+
validateInputPullSecretFieldHelper: (msg) => {
139+
cy.get(Cypress.env('pullSecretFieldHelperErrorId')).should('contain', msg);
140+
},
129141
};

‎libs/ui-lib/lib/common/components/clusterConfiguration/SecurityFields.tsx

+4-1
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,10 @@ const SecurityFields = ({
9393
{errorMsg && (
9494
<FormHelperText>
9595
<HelperText>
96-
<HelperTextItem variant={touched && errorMsg ? 'error' : 'default'}>
96+
<HelperTextItem
97+
variant={touched && errorMsg ? 'error' : 'default'}
98+
id={errorMsg ? `${fieldId}-helper-error` : `${fieldId}-helper`}
99+
>
97100
{errorMsg ? errorMsg : ''}
98101
</HelperTextItem>
99102
</HelperText>

‎libs/ui-lib/lib/common/components/ui/StaticTextField.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ export const StaticField: React.FC<StaticFieldProps> = ({
4545
<HelperTextItem
4646
icon={<ExclamationCircleIcon />}
4747
variant={isValid ? 'default' : 'error'}
48+
id={isValid ? `${fieldId}-helper` : `${fieldId}-helper-error`}
4849
>
4950
{isValid ? helperText : helperTextInvalid}
5051
</HelperTextItem>

‎libs/ui-lib/lib/common/components/ui/formik/CertificatesUploadField.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -124,6 +124,7 @@ const CertificatesUploadField: React.FC<UploadFieldProps> = ({
124124
<HelperTextItem
125125
icon={errorMessage && <ExclamationCircleIcon />}
126126
variant={errorMessage ? 'error' : 'default'}
127+
id={errorMessage ? `${fieldId}-helper-error` : `${fieldId}-helper`}
127128
>
128129
{errorMessage ? errorMessage : helperText}
129130
</HelperTextItem>

‎libs/ui-lib/lib/common/components/ui/formik/CheckboxField.tsx

+5-1
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,11 @@ const CheckboxField: React.FC<CheckboxFieldProps> = ({
4444
{errorMessage && (
4545
<FormHelperText>
4646
<HelperText>
47-
<HelperTextItem icon={<ExclamationCircleIcon />} variant="error">
47+
<HelperTextItem
48+
icon={<ExclamationCircleIcon />}
49+
variant="error"
50+
id={`${fieldId}-helper-error`}
51+
>
4852
{errorMessage}
4953
</HelperTextItem>
5054
</HelperText>

‎libs/ui-lib/lib/common/components/ui/formik/CodeField.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@ const CodeField = ({
6262
<HelperTextItem
6363
icon={errorMessage && <ExclamationCircleIcon />}
6464
variant={errorMessage ? 'error' : 'default'}
65+
id={errorMessage ? `${fieldId}-helper-error` : `${fieldId}-helper`}
6566
>
6667
{errorMessage ? errorMessage : helperText}
6768
</HelperTextItem>

‎libs/ui-lib/lib/common/components/ui/formik/InputField.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,7 @@ const InputField: React.FC<
8585
<HelperTextItem
8686
icon={errorMessage && <ExclamationCircleIcon />}
8787
variant={showErrorMessage ? 'error' : 'default'}
88+
id={showErrorMessage && !isValid ? `${fieldId}-helper-error` : `${fieldId}-helper`}
8889
>
8990
{showErrorMessage ? errorMessage : helperText}
9091
</HelperTextItem>

‎libs/ui-lib/lib/common/components/ui/formik/LabelField.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,7 @@ export const LabelField: React.FC<LabelFieldProps> = ({
9292
<HelperTextItem
9393
icon={errorMessage && <ExclamationCircleIcon />}
9494
variant={errorMessage ? 'error' : 'default'}
95+
id={errorMessage ? `${fieldId}-helper-error` : `${fieldId}-helper`}
9596
>
9697
{errorMessage ? errorMessage : helperText}
9798
</HelperTextItem>

‎libs/ui-lib/lib/common/components/ui/formik/MultiSelectField.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -126,6 +126,7 @@ const MultiSelectField: React.FC<MultiSelectFieldProps> = ({
126126
<HelperTextItem
127127
icon={<ExclamationCircleIcon />}
128128
variant={errorMessage ? 'error' : 'default'}
129+
id={errorMessage ? `${fieldId}-helper-error` : `${fieldId}-helper`}
129130
>
130131
{errorMessage ? errorMessage : hText}
131132
</HelperTextItem>

‎libs/ui-lib/lib/common/components/ui/formik/NumberInputField.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,7 @@ const NumberInputField: React.FC<NumberInputFieldProps> = React.forwardRef(
8989
<HelperTextItem
9090
icon={errorMessage && <ExclamationCircleIcon />}
9191
variant={errorMessage ? 'error' : 'default'}
92+
id={errorMessage ? `${fieldId}-helper-error` : `${fieldId}-helper`}
9293
>
9394
{errorMessage ? errorMessage : helperText}
9495
</HelperTextItem>

‎libs/ui-lib/lib/common/components/ui/formik/RichInputField.tsx

+6-1
Original file line numberDiff line numberDiff line change
@@ -151,7 +151,12 @@ const RichInputField: React.FC<RichInputFieldPropsProps> = React.forwardRef(
151151
{helperText && (
152152
<FormHelperText>
153153
<HelperText>
154-
<HelperTextItem variant={isValid ? 'default' : 'error'}>{helperText}</HelperTextItem>
154+
<HelperTextItem
155+
variant={isValid ? 'default' : 'error'}
156+
id={isValid ? `${fieldId}-helper` : `${fieldId}-helper-error`}
157+
>
158+
{helperText}
159+
</HelperTextItem>
155160
</HelperText>
156161
</FormHelperText>
157162
)}

‎libs/ui-lib/lib/common/components/ui/formik/SelectField.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,7 @@ const SelectField: React.FC<SelectFieldProps> = ({
6464
<HelperTextItem
6565
icon={<ExclamationCircleIcon />}
6666
variant={errorMessage ? 'error' : 'default'}
67+
id={errorMessage ? `${fieldId}-helper-error` : `${fieldId}-helper`}
6768
>
6869
{errorMessage ? errorMessage : hText}
6970
</HelperTextItem>

‎libs/ui-lib/lib/common/components/ui/formik/SwitchField.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,7 @@ const SwitchField: React.FC<SwitchFieldProps> = ({
6464
<HelperTextItem
6565
icon={<ExclamationCircleIcon />}
6666
variant={errorMessage ? 'error' : 'default'}
67+
id={errorMessage ? `${fieldId}-helper-error` : `${fieldId}-helper`}
6768
>
6869
{errorMessage ? errorMessage : hText}
6970
</HelperTextItem>

‎libs/ui-lib/lib/common/components/ui/formik/TextAreaField.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,7 @@ const TextAreaField: React.FC<TextAreaFieldProps> = ({
6363
<HelperTextItem
6464
icon={errorMessage && <ExclamationCircleIcon />}
6565
variant={errorMessage ? 'error' : 'default'}
66+
id={errorMessage ? `${fieldId}-helper-error` : `${fieldId}-helper`}
6667
>
6768
{errorMessage ? errorMessage : helperText}
6869
</HelperTextItem>

‎libs/ui-lib/lib/common/components/ui/formik/UploadField.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,7 @@ const UploadField: React.FC<UploadFieldProps> = ({
103103
<HelperTextItem
104104
icon={errorMessage && <ExclamationCircleIcon />}
105105
variant={errorMessage ? 'error' : 'default'}
106+
id={errorMessage ? `${fieldId}-helper-error` : `${fieldId}-helper`}
106107
>
107108
{errorMessage ? errorMessage : helperText}
108109
</HelperTextItem>

‎libs/ui-lib/lib/ocm/components/clusterConfiguration/staticIp/components/FormViewNetworkWide/FormViewNetworkWideFields.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -76,13 +76,14 @@ const MachineNetwork: React.FC<{ fieldName: string; protocolVersion: ProtocolVer
7676
const cidr = getMachineNetworkCidr(value);
7777
return getHumanizedSubnetRange(getAddressObject(cidr, protocolVersion));
7878
}, [value, protocolVersion, errorMessage]);
79+
const fieldId = getFieldId(`${fieldName}`, 'input');
7980
return (
8081
<FormGroup
8182
labelIcon={
8283
<PopoverIcon noVerticalAlign bodyContent="The range of IP addresses of the hosts." />
8384
}
8485
label="Machine network"
85-
fieldId={getFieldId(`${fieldName}`, 'input')}
86+
fieldId={fieldId}
8687
isRequired
8788
className="machine-network"
8889
>
@@ -118,6 +119,7 @@ const MachineNetwork: React.FC<{ fieldName: string; protocolVersion: ProtocolVer
118119
<HelperTextItem
119120
icon={errorMessage ? <ExclamationCircleIcon /> : null}
120121
variant={errorMessage ? 'error' : 'default'}
122+
id={errorMessage ? `${fieldId}-helper-error` : `${fieldId}-helper`}
121123
>
122124
{errorMessage ? errorMessage : machineNetworkHelptext}
123125
</HelperTextItem>

0 commit comments

Comments
 (0)