Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

cleanup(sourceWizard): convert text input fields to use PF4 component #159

Merged
merged 2 commits into from
Sep 14, 2022
Merged

cleanup(sourceWizard): convert text input fields to use PF4 component #159

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
839f89c
fix(textInput): discovery-151 state, callback sequence (#159)
cdcabrera Sep 14, 2022
bee080f
refactor(addSourceWizardStepTwo): discovery-153 pf4 textInput (#159)
jenny-s51 Sep 8, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 36 additions & 6 deletions src/components/addSourceWizard/__tests__/__snapshots__/addSourceWizardStepTwo.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,12 @@ exports[`AddSourceWizardStepTwo Component should display different forms for sou
class="pf-c-form__group-control"
>
<input
class="form-control"
aria-invalid="false"
class="pf-c-form-control quipucords-form__text-input "
data-ouia-component-id="OUIA-Generated-TextInputBase-3"
data-ouia-component-type="PF4/TextInput"
data-ouia-safe="true"
id="name"
name="name"
placeholder="Enter a name for the Network source"
type="text"
Expand Down Expand Up @@ -111,7 +116,12 @@ exports[`AddSourceWizardStepTwo Component should display different forms for sou
class="pf-c-form__group-control"
>
<input
class="form-control"
aria-invalid="false"
class="pf-c-form-control quipucords-form__text-input "
data-ouia-component-id="OUIA-Generated-TextInputBase-4"
data-ouia-component-type="PF4/TextInput"
data-ouia-safe="true"
id="port"
maxlength="5"
name="port"
placeholder="Default port is 22"
Expand Down Expand Up @@ -292,7 +302,12 @@ exports[`AddSourceWizardStepTwo Component should display different forms for sou
class="pf-c-form__group-control"
>
<input
class="form-control"
aria-invalid="false"
class="pf-c-form-control quipucords-form__text-input "
data-ouia-component-id="OUIA-Generated-TextInputBase-5"
data-ouia-component-type="PF4/TextInput"
data-ouia-safe="true"
id="name"
name="name"
placeholder="Enter a name for the VCenter source"
type="text"
Expand Down Expand Up @@ -322,7 +337,12 @@ exports[`AddSourceWizardStepTwo Component should display different forms for sou
class="pf-c-form__group-control"
>
<input
class="form-control"
aria-invalid="false"
class="pf-c-form-control quipucords-form__text-input "
data-ouia-component-id="OUIA-Generated-TextInputBase-6"
data-ouia-component-type="PF4/TextInput"
data-ouia-safe="true"
id="hostsSingle"
name="hostsSingle"
placeholder="Enter an IP address or hostname (default port is 443)"
type="text"
Expand Down Expand Up @@ -581,7 +601,12 @@ exports[`AddSourceWizardStepTwo Component should render a non-connected componen
class="pf-c-form__group-control"
>
<input
class="form-control"
aria-invalid="false"
class="pf-c-form-control quipucords-form__text-input "
data-ouia-component-id="OUIA-Generated-TextInputBase-1"
data-ouia-component-type="PF4/TextInput"
data-ouia-safe="true"
id="name"
name="name"
placeholder="Enter a name for the Network source"
type="text"
Expand Down Expand Up @@ -647,7 +672,12 @@ exports[`AddSourceWizardStepTwo Component should render a non-connected componen
class="pf-c-form__group-control"
>
<input
class="form-control"
aria-invalid="false"
class="pf-c-form-control quipucords-form__text-input "
data-ouia-component-id="OUIA-Generated-TextInputBase-2"
data-ouia-component-type="PF4/TextInput"
data-ouia-safe="true"
id="port"
maxlength="5"
name="port"
placeholder="Default port is 22"
Expand Down
31 changes: 25 additions & 6 deletions src/components/addSourceWizard/addSourceWizardStepTwo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import { FormGroup } from '../form/formGroup';
import { Checkbox } from '../form/checkbox';
import { TextArea, TextAreResizeOrientation } from '../form/textArea';
import { formHelpers } from '../form/formHelpers';
import { TextInput } from '../form/textInput';
import { FormState } from '../formState/formState';
import { DropdownSelect, SelectVariant } from '../dropdownSelect/dropdownSelect';
import { translate } from '../i18n/i18n';
Expand Down Expand Up @@ -168,12 +169,17 @@ class AddSourceWizardStepTwo extends React.Component {
error={(touched.name && errors.name) || stepTwoErrorMessages.name}
errorMessage={stepTwoErrorMessages.name || 'A source name is required'}
>
<Pf3Form.FormControl
type="text"
<TextInput
name="name"
value={values.name}
placeholder={`Enter a name for the ${dictionary[type] || ''} source`}
onChange={handleOnEvent}
onClear={handleOnEvent}
validated={
(touched.name && errors.name) || stepTwoErrorMessages.name
? ValidatedOptions.error
: ValidatedOptions.default
}
/>
</FormGroup>
);
Expand Down Expand Up @@ -256,13 +262,18 @@ class AddSourceWizardStepTwo extends React.Component {
error={(touched.port && errors.port) || stepTwoErrorMessages.port}
errorMessage="Port must be valid"
>
<Pf3Form.FormControl
<TextInput
name="port"
type="text"
value={values.port}
maxLength={5}
placeholder="Default port is 22"
onChange={handleOnEvent}
onClear={handleOnEvent}
validated={
(touched.port && errors.port) || stepTwoErrorMessages.port
? ValidatedOptions.error
: ValidatedOptions.default
}
/>
</FormGroup>
</React.Fragment>
Expand Down Expand Up @@ -293,12 +304,20 @@ class AddSourceWizardStepTwo extends React.Component {
hostPortError
}
>
<Pf3Form.FormControl
<TextInput
name="hostsSingle"
type="text"
value={values.hostsSingle}
placeholder="Enter an IP address or hostname (default port is 443)"
onChange={onChangeSingleHost}
onClear={onChangeSingleHost}
validated={
(touched.hostsSingle && errors.hosts) ||
errors.port ||
stepTwoErrorMessages.hosts ||
stepTwoErrorMessages.port
? ValidatedOptions.error
: ValidatedOptions.default
}
/>
</FormGroup>
</React.Fragment>
Expand Down
110 changes: 91 additions & 19 deletions src/components/form/__tests__/__snapshots__/textInput.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,23 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`TextInput Component should export support constants, types: support 1`] = `
Object {
"TextInputTypes": Object {
"date": "date",
"datetimeLocal": "datetime-local",
"email": "email",
"month": "month",
"number": "number",
"password": "password",
"search": "search",
"tel": "tel",
"text": "text",
"time": "time",
"url": "url",
},
}
`;

exports[`TextInput Component should handle readOnly, disabled: active 1`] = `
<input
aria-invalid="false"
Expand Down Expand Up @@ -82,15 +100,33 @@ Array [
Array [
Object {
"checked": undefined,
"currentTarget": Object {
"value": "dolor sit",
},
"id": undefined,
"currentTarget": <input
aria-invalid="false"
class="pf-c-form-control quipucords-form__text-input "
data-ouia-component-id="OUIA-Generated-TextInputBase-3"
data-ouia-component-type="PF4/TextInput"
data-ouia-safe="true"
id="generatedid-"
name="generatedid-"
type="text"
value="lorem ipsum"
/>,
"id": "generatedid-",
"keyCode": undefined,
"name": undefined,
"name": "generatedid-",
"persist": [Function],
"target": Object {},
"value": "dolor sit",
"target": <input
aria-invalid="false"
class="pf-c-form-control quipucords-form__text-input "
data-ouia-component-id="OUIA-Generated-TextInputBase-3"
data-ouia-component-type="PF4/TextInput"
data-ouia-safe="true"
id="generatedid-"
name="generatedid-"
type="text"
value="lorem ipsum"
/>,
"value": "lorem ipsum",
},
],
]
Expand All @@ -101,14 +137,32 @@ Array [
Array [
Object {
"checked": undefined,
"currentTarget": Object {
"value": "",
},
"id": undefined,
"currentTarget": <input
aria-invalid="false"
class="pf-c-form-control quipucords-form__text-input "
data-ouia-component-id="OUIA-Generated-TextInputBase-5"
data-ouia-component-type="PF4/TextInput"
data-ouia-safe="true"
id="generatedid-"
name="generatedid-"
type="search"
value=""
/>,
"id": "generatedid-",
"keyCode": 27,
"name": undefined,
"name": "generatedid-",
"persist": [Function],
"target": Object {},
"target": <input
aria-invalid="false"
class="pf-c-form-control quipucords-form__text-input "
data-ouia-component-id="OUIA-Generated-TextInputBase-5"
data-ouia-component-type="PF4/TextInput"
data-ouia-safe="true"
id="generatedid-"
name="generatedid-"
type="search"
value=""
/>,
"value": "",
},
],
Expand All @@ -120,14 +174,32 @@ Array [
Array [
Object {
"checked": undefined,
"currentTarget": Object {
"value": "",
},
"id": undefined,
"currentTarget": <input
aria-invalid="false"
class="pf-c-form-control quipucords-form__text-input "
data-ouia-component-id="OUIA-Generated-TextInputBase-4"
data-ouia-component-type="PF4/TextInput"
data-ouia-safe="true"
id="generatedid-"
name="generatedid-"
type="text"
value=""
/>,
"id": "generatedid-",
"keyCode": 27,
"name": undefined,
"name": "generatedid-",
"persist": [Function],
"target": Object {},
"target": <input
aria-invalid="false"
class="pf-c-form-control quipucords-form__text-input "
data-ouia-component-id="OUIA-Generated-TextInputBase-4"
data-ouia-component-type="PF4/TextInput"
data-ouia-safe="true"
id="generatedid-"
name="generatedid-"
type="text"
value=""
/>,
"value": "",
},
],
Expand Down
12 changes: 8 additions & 4 deletions src/components/form/__tests__/textInput.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import { TextInput as PfTextInput } from '@patternfly/react-core';
import { TextInput as PfTextInput, TextInputTypes } from '@patternfly/react-core';
import { TextInput } from '../textInput';
import { helpers } from '../../../common';

Expand All @@ -11,6 +11,10 @@ describe('TextInput Component', () => {
expect(component.render()).toMatchSnapshot('basic component');
});

it('should export support constants, types', () => {
expect({ TextInputTypes }).toMatchSnapshot('support');
});

it('should handle readOnly, disabled', async () => {
const props = {
isReadOnly: true
Expand Down Expand Up @@ -41,7 +45,7 @@ describe('TextInput Component', () => {
value: 'lorem ipsum'
};

const component = await shallowHookComponent(<TextInput {...props} />);
const component = await mountHookComponent(<TextInput {...props} />);
const mockEvent = { currentTarget: { value: 'dolor sit' }, persist: helpers.noop };
component.find(PfTextInput).simulate('change', 'hello world', mockEvent);

Expand All @@ -55,7 +59,7 @@ describe('TextInput Component', () => {
value: 'lorem ipsum'
};

const component = await shallowHookComponent(<TextInput {...props} />);
const component = await mountHookComponent(<TextInput {...props} />);
const mockEvent = { keyCode: 27, currentTarget: { value: '' }, persist: helpers.noop };
component.find(PfTextInput).simulate('keyup', mockEvent);

Expand All @@ -70,7 +74,7 @@ describe('TextInput Component', () => {
type: 'search'
};

const component = await shallowHookComponent(<TextInput {...props} />);
const component = await mountHookComponent(<TextInput {...props} />);
const mockEvent = { keyCode: 27, currentTarget: { value: '' }, persist: helpers.noop };
component.find(PfTextInput).simulate('keyup', mockEvent);

Expand Down
Loading