fix: JSONForm input field REGEX validation (#15316)

* fix: JSONForm input field REGEX validation

* fix cypress test
This commit is contained in:
ashit-rath 2022-07-29 09:49:39 +05:30 committed by GitHub
parent 82ed999d85
commit b21c8cff31
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 36 additions and 0 deletions

View File

@ -64,6 +64,11 @@ describe("Text Field Property Control", () => {
cy.testJsontext("errormessage", "Custom error message");
cy.get(`${fieldPrefix}-name input`).click({ force: true });
cy.get(".bp3-popover-content").contains("Custom error message");
// Reset the error message
cy.testJsontext("errormessage", "");
// Reset valid
cy.testJsontext("valid", "");
});
it("hides field when visible switched off", () => {
@ -82,6 +87,19 @@ describe("Text Field Property Control", () => {
cy.togglebarDisable(`.t--property-control-disabled input`);
});
it("throws error when REGEX does not match the input value", () => {
cy.testJsontext("regex", "^\\d+$");
cy.get(`${fieldPrefix}-name input`)
.clear()
.type("abcd");
cy.get(".bp3-popover-content").contains("Invalid input");
cy.get(`${fieldPrefix}-name input`)
.clear()
.type("1234");
cy.get(".bp3-popover-content").should("not.exist");
});
});
describe("Checkbox Field Property Control", () => {

View File

@ -181,6 +181,8 @@ class JSONFormComputeControl extends BaseControl<JSONFormComputeControlProps> {
propertyValue: string,
widgetName: string,
) => {
if (!isDynamicValue(propertyValue)) return propertyValue;
const { prefixTemplate, suffixTemplate } = getBindingTemplate(widgetName);
const value = propertyValue.substring(
@ -193,6 +195,22 @@ class JSONFormComputeControl extends BaseControl<JSONFormComputeControlProps> {
getComputedValue = (value: string) => {
const { widgetName } = this.props.widgetProperties;
/**
* If the input value is not a binding then there is no need of adding binding template
* to the value as it would be of no use.
*
* Original motivation of doing this to allow REGEX to work. If the value is REGEX, eg - ^\d+$ and the
* binding template is added, the REGEX is processed by evaluation and the "\" is considered as a escape and
* is removed from the final value and the regex become ^d+$. In order to make it work inside a binding the "\"
* has to be escaped by doing ^\\d+$.
* As the user is unaware of this binding template being added under the hood, it is not obvious for the user
* to escape the "\".
* Thus now we only add the binding template around a value only if the original value has a binding as that could
* be an indication of the usage of formData/sourceData/fieldState in the value.
*/
if (!isDynamicValue(value)) return value;
const stringToEvaluate = stringToJS(value);
const { prefixTemplate, suffixTemplate } = getBindingTemplate(widgetName);