Skip to content

ENG-4362 refactor validations and fix tech debt #1452

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

Open
ichalagashvili wants to merge 1 commit into
base: develop
Choose a base branch
from
Open

ENG-4362 refactor validations and fix tech debt #1452

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
4 changes: 2 additions & 2 deletions src/ui/common/attributes/AttributeInfo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import FormLabel from 'ui/common/form/FormLabel';
import SwitchRenderer from 'ui/common/form/SwitchRenderer';
import { MODE_EDIT, MODE_ADD } from 'state/data-types/const';

const maxLength10 = maxLength(10);
const maxLength15 = maxLength(15);
const maxLength50 = maxLength(50);
Comment on lines -12 to 13
Copy link
Contributor

@Dv92 Dv92 Feb 1, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

changing this value seems have a global impact to other part of the code that use AttributeInfo. Are you sure that this doesn't cause bug in other sections?

Copy link
Member Author

@ichalagashvili ichalagashvili Feb 1, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes its safe


const AttributeInfo = ({ isSearchable, isIndexable, mode }) => {
Expand Down Expand Up @@ -65,7 +65,7 @@ const AttributeInfo = ({ isSearchable, isIndexable, mode }) => {
label={
<FormLabel labelId="app.code" helpId="app.help.code" required />
}
validate={[required, maxLength10]}
validate={[required, maxLength15]}
disabled={mode === MODE_EDIT}
/>
<Field
Expand Down
78 changes: 43 additions & 35 deletions src/ui/user-profile/common/UserProfileField.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React from 'react';
import React, { useMemo } from 'react';
import PropTypes from 'prop-types';
import { get } from 'lodash';
import { Row, Col } from 'patternfly-react';
Expand Down Expand Up @@ -73,43 +73,47 @@ const getEnumeratorOptions = (component, items, separator, mandatory, intl) => {
}
};

const userProfileValidators = {};
export const generateValidatorFunc = (
value, validatorFuncName, validatorFunc,
validatorArray, parseValueFunc, customErrorId,
) => {
const userProfileValidators = {};
if (value === null || value === undefined) {
return;
}
const parsedValue = parseValueFunc ? parseValueFunc(value) : value;
if (!userProfileValidators[validatorFuncName]) {
userProfileValidators[validatorFuncName] = {};
}
if (!userProfileValidators[validatorFuncName][value]) {
userProfileValidators[validatorFuncName] = {
...userProfileValidators[validatorFuncName],
[value]: validatorFunc(parsedValue, customErrorId),
};
}
validatorArray.push(userProfileValidators[validatorFuncName][value]);
};

const UserProfileField = ({ attribute, intl }) => {
export const UserProfileField = ({ attribute, intl, disabled }) => {
const { validationRules } = attribute || {};
const {
minLength: textMinLen, maxLength: textMaxLen, regex, rangeEndNumber, rangeStartNumber,
} = validationRules || {};

const generateValidatorFunc = (
value, validatorFuncName, validatorFunc,
validatorArray, parseValueFunc, customErrorId,
) => {
if (value === null || value === undefined) {
return;
}
const parsedValue = parseValueFunc ? parseValueFunc(value) : value;
if (!userProfileValidators[validatorFuncName]) {
userProfileValidators[validatorFuncName] = {};
}
if (!userProfileValidators[validatorFuncName][value]) {
userProfileValidators[validatorFuncName] = {
...userProfileValidators[validatorFuncName],
[value]: validatorFunc(parsedValue, customErrorId),
};
}
validatorArray.push(userProfileValidators[validatorFuncName][value]);
};

const validateArray = [...(attribute.mandatory ? [required] : [])];
generateValidatorFunc(textMinLen, 'minLength', minLength, validateArray);
generateValidatorFunc(textMaxLen, 'maxLength', maxLength, validateArray);
generateValidatorFunc(
regex, 'regex', matchRegex, validateArray, RegexParser,
attribute.type === 'Email' && 'validateForm.email',
);
generateValidatorFunc(rangeEndNumber, 'rangeEndNumber', maxValue, validateArray);
generateValidatorFunc(rangeStartNumber, 'rangeStartNumber', minValue, validateArray);
const vArray = useMemo(() => {
const validateArray = [...(attribute.mandatory ? [required] : [])];
generateValidatorFunc(textMinLen, 'minLength', minLength, validateArray);
generateValidatorFunc(textMaxLen, 'maxLength', maxLength, validateArray);
generateValidatorFunc(
regex, 'regex', matchRegex, validateArray, RegexParser,
attribute.type === 'Email' && 'validateForm.email',
);
generateValidatorFunc(rangeEndNumber, 'rangeEndNumber', maxValue, validateArray);
generateValidatorFunc(rangeStartNumber, 'rangeStartNumber', minValue, validateArray);
return validateArray;
}, [attribute.mandatory, attribute.type, rangeEndNumber, rangeStartNumber,
regex, textMaxLen, textMinLen]);


return (<Field
component={getComponentType(attribute.type)}
Expand All @@ -130,9 +134,10 @@ const UserProfileField = ({ attribute, intl }) => {
helpText={getHelpMessage(attribute.validationRules, intl)}
required={attribute.mandatory}
/>}
validate={validateArray}
validate={vArray}
readOnly={readOnlyFields.includes(attribute.code)}
data-testid={`UserProfileForm__${attribute.code}Field`}
disabled={disabled}
/>);
};

Expand All @@ -154,6 +159,11 @@ const basicAttributeShape = PropTypes.shape({
UserProfileField.propTypes = {
attribute: basicAttributeShape.isRequired,
intl: intlShape.isRequired,
disabled: PropTypes.bool,
};

UserProfileField.defaultProps = {
disabled: false,
};

export const CompositeField = ({
Expand Down Expand Up @@ -221,5 +231,3 @@ CompositeField.defaultProps = {
fieldName: '',
noLabel: false,
};

export default UserProfileField;
2 changes: 1 addition & 1 deletion src/ui/user-profile/common/UserProfileForm.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { Button, Row, Col, FormGroup } from 'patternfly-react';
import { required } from '@entando/utils';
import { FormattedMessage, defineMessages, injectIntl, intlShape } from 'react-intl';
import RenderTextInput from 'ui/common/form/RenderTextInput';
import UserProfileField, { CompositeField } from 'ui/user-profile/common/UserProfileField';
import { UserProfileField, CompositeField } from 'ui/user-profile/common/UserProfileField';

import FormLabel from 'ui/common/form/FormLabel';
import RenderListField from 'ui/common/form/RenderListField';
Expand Down
63 changes: 20 additions & 43 deletions src/ui/users/my-profile/MyProfileEditForm.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React, { Component, Fragment } from 'react';
import PropTypes from 'prop-types';
import get from 'lodash/get';
import { reduxForm, Field, FieldArray, FormSection } from 'redux-form';
import { reduxForm, FieldArray, FormSection } from 'redux-form';
import { FormattedMessage, defineMessages, injectIntl, intlShape } from 'react-intl';
import { Panel } from 'react-bootstrap';
import { Form, Button, Row, Col } from 'patternfly-react';
Expand All @@ -15,9 +15,7 @@ import {
TYPE_BOOLEAN, TYPE_THREESTATE, TYPE_ENUMERATOR, TYPE_ENUMERATOR_MAP, TYPE_MONOLIST, TYPE_LIST,
TYPE_COMPOSITE,
} from 'state/data-types/const';
import { getComponentType } from 'helpers/entities';

const defaultAttrCodes = ['fullname', 'email'];
import { UserProfileField } from 'ui/user-profile/common/UserProfileField';

const getComponentOptions = (component, intl) => {
const booleanOptions = getTranslatedOptions(intl, BOOLEAN_OPTIONS);
Expand Down Expand Up @@ -74,42 +72,6 @@ const getHelpMessage = (validationRules, intl) => {
return null;
};

const field = (intl, attribute, disabled) => {
const labelProp = defaultAttrCodes.includes(attribute.code) ? ({
labelId: `user.table.${attribute.code}`,
}) : ({
labelText: attribute.name,
});

return (
<Field
key={attribute.code}
component={getComponentType(attribute.type)}
name={attribute.code}
rows={3}
toggleElement={getComponentOptions(attribute.type, intl)}
options={getEnumeratorOptions(
attribute.type,
attribute.enumeratorStaticItems,
attribute.enumeratorStaticItemsSeparator,
attribute.mandatory,
intl,
)}
optionValue="value"
optionDisplayName="optionDisplayName"
label={<FormLabel
{...labelProp}
helpText={getHelpMessage(attribute.validationRules, intl)}
required={attribute.mandatory}
/>}
disabled={disabled}
/>
);
};

const renderCompositeAttribute = (intl, compositeAttributes, disabled) =>
compositeAttributes.map(attribute => field(intl, attribute, disabled));

export class MyProfileEditFormBody extends Component {
constructor(props) {
super(props);
Expand Down Expand Up @@ -151,11 +113,23 @@ export class MyProfileEditFormBody extends Component {
render() {
const {
profileTypesAttributes, defaultLanguage, languages, intl, userEmail, onChangeProfilePicture,
userProfileForm,
userProfileForm, invalid, submitting,
} = this.props;

const { editMode } = this.state;

const field = (attribute, disabled) => (
<UserProfileField
key={attribute.code}
attribute={attribute}
intl={intl}
disabled={disabled}
/>
);

const renderCompositeAttribute = (compositeAttributes, disabled) =>
compositeAttributes.map(attribute => field(attribute, disabled));

const renderFieldArray = (attributeCode, attribute, component, language) => (<FieldArray
key={attributeCode}
component={component}
Expand Down Expand Up @@ -199,7 +173,7 @@ export class MyProfileEditFormBody extends Component {
<Panel>
<Panel.Body>
<FormSection name={attribute.code}>
{ renderCompositeAttribute(intl, attribute.compositeAttributes, !editMode)}
{renderCompositeAttribute(attribute.compositeAttributes, !editMode)}
</FormSection>
</Panel.Body>
</Panel>
Expand All @@ -223,7 +197,7 @@ export class MyProfileEditFormBody extends Component {
</Row>
);
}
return field(intl, attribute, !editMode);
return field(attribute, !editMode);
});

const { profilepicture } = userProfileForm;
Expand All @@ -250,6 +224,7 @@ export class MyProfileEditFormBody extends Component {
type="submit"
bsStyle="primary"
data-testid="profile_saveBtn"
disabled={invalid || submitting}
>
<FormattedMessage id="app.save" />
</Button>
Expand Down Expand Up @@ -324,6 +299,8 @@ MyProfileEditFormBody.propTypes = {
profilepicture: PropTypes.string,
}),
onChangeProfilePicture: PropTypes.func.isRequired,
invalid: PropTypes.bool.isRequired,
submitting: PropTypes.bool.isRequired,
};

MyProfileEditFormBody.defaultProps = {
Expand Down