feature: JSONForm - disable add new and remove buttons when array is …

…disabled (appsmithorg#13520)
ganganimaulik · May 9, 2022 · 47a31a8 · 47a31a8
1 parent 897d381
commit 47a31a8
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 2 deletions.
diff --git a/...on/Smoke_TestSuite/ClientSideTests/FormWidgets/JSONFormWidget/JSONForm_ArrayField_spec.js b/...on/Smoke_TestSuite/ClientSideTests/FormWidgets/JSONFormWidget/JSONForm_ArrayField_spec.js
@@ -105,6 +105,52 @@ describe("JSON Form Widget Array Field", () => {
  });
  });
 
+ it("disables add new and remove buttons when array field is disabled", () => {
+ cy.closePropertyPane();
+ cy.openPropertyPane("jsonformwidget");
+ cy.openFieldConfiguration("education");
+
+ let initialNoOfItems = 0;
+ cy.get(`${education}-item`).then(($items) => {
+ initialNoOfItems = $items.length;
+ });
+
+ // Disable -> true
+ cy.togglebar(".t--property-control-disabled input");
+ cy.get(`${education} ${addButton}`).should("have.attr", "disabled");
+ cy.get(`${education} ${addButton}`).should("have.attr", "disabled");
+
+ // Click add button
+ cy.get(`${education} ${addButton}`).click({ force: true });
+ cy.get(`${education}-item`).then(($items) => {
+ expect($items.length).equal(initialNoOfItems);
+ });
+ // Click remove button
+ cy.get(`${education} ${deleteButton}`)
+ .last()
+ .click({ force: true });
+ cy.get(`${education}-item`).then(($items) => {
+ expect($items.length).equal(initialNoOfItems);
+ });
+
+ // Disable -> false
+ cy.togglebarDisable(".t--property-control-disabled input");
+ cy.get(addButton).should("not.have.attr", "disabled");
+ cy.get(deleteButton).should("not.have.attr", "disabled");
+ // Click add button
+ cy.get(`${education} ${addButton}`).click({ force: true });
+ cy.get(`${education}-item`).then(($items) => {
+ expect($items.length).equal(initialNoOfItems + 1);
+ });
+ // Click remove button
+ cy.get(`${education} ${deleteButton}`)
+ .last()
+ .click({ force: true });
+ cy.get(`${education}-item`).then(($items) => {
+ expect($items.length).equal(initialNoOfItems);
+ });
+ });
+
  it("should not render field level default value if form level is present", () => {
  const collegeFieldDefaultValue = "College default value";
 

diff --git a/app/client/src/widgets/JSONFormWidget/fields/ArrayField.tsx b/app/client/src/widgets/JSONFormWidget/fields/ArrayField.tsx
@@ -85,6 +85,15 @@ const StyledButton = styled.button<StyledButtonProps>`
  margin-top: 10px;
  width: 80px;
 
+ &:disabled {
+ cursor: not-allowed;
+ opacity: 0.3;
+
+ & * {
+ pointer-events: none;
+ }
+ }
+
  span.bp3-icon {
  margin-right: 6px;
  }
@@ -311,7 +320,8 @@ function ArrayField({
  />
  <StyledDeleteButton
  className="t--jsonformfield-array-delete-btn"
- onClick={() => remove(key)}
+ disabled={schemaItem.isDisabled}
+ onClick={schemaItem.isDisabled ? undefined : () => remove(key)}
  type="button"
  >
  {deleteIcon}
@@ -355,7 +365,8 @@ function ArrayField({
  <StyledButton
  className="t--jsonformfield-array-add-btn"
  color={schemaItem.accentColor}
- onClick={add}
+ disabled={schemaItem.isDisabled}
+ onClick={schemaItem.isDisabled ? undefined : add}
  type="button"
  >
  <StyledIconWrapper>