Read-only support in checkbox component (#1446)

Co-authored-by: Pavitra Khatri <pavitrakhatri@Pavitras-MacBook-Pro.local>

Author: pavi41

ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/checkbox/v1/checkbox/_cq_dialog/.content.xml

@@ -105,9 +105,6 @@
                                               sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                               fieldLabel="Default value"
                                               name="./default"/>
-                                            <readonly
-                                                    jcr:primaryType="nt:unstructured"
-                                                    sling:hideResource="{Boolean}true" />
                                         </items>
                                     </column>
                                 </items>

ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/checkbox/v1/checkbox/checkbox.html

@@ -42,7 +42,7 @@
             title="${checkbox.tooltipVisible ? '' : checkbox.tooltipText}"
             name="${checkbox.name}"
             value="${checkbox.default[0]}"
-            disabled="${!checkbox.enabled}" />
+            disabled="${!checkbox.enabled || checkbox.readOnly}" />
 
       <div data-sly-call="${label.label @componentId=widgetId, labelValue=checkbox.label.value, labelVisible=checkbox.label.visible, labelRichText=checkbox.label.richText, bemBlock='cmp-adaptiveform-checkbox'}" data-sly-unwrap></div>
     </div>

ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/checkbox/v1/checkbox/clientlibs/site/js/checkboxview.js

@@ -68,6 +68,29 @@
         getTooltipDiv() {
             return this.element.querySelector(CheckBox.selectors.tooltipDiv);
         }
+
+        updateEnabled(enabled, state) {
+            if (this.widget) {
+                this.element.setAttribute(FormView.Constants.DATA_ATTRIBUTE_ENABLED, enabled);
+                const isDisabled = !enabled || state.readOnly;
+                if (isDisabled) {
+                    this.widget.setAttribute("disabled", "disabled");
+                } else {
+                    this.widget.removeAttribute("disabled");
+                }
+            }
+        }
+
+        updateReadOnly(readonly) {
+            if (this.widget) {
+                this.element.setAttribute(FormView.Constants.DATA_ATTRIBUTE_READONLY, readonly);
+                if (readonly === true) {
+                    this.widget.setAttribute(FormView.Constants.HTML_ATTRS.DISABLED, "disabled");
+                } else {
+                    this.widget.removeAttribute(FormView.Constants.HTML_ATTRS.DISABLED);
+                }
+            }
+        }
     }
 
     FormView.Utils.setupField(({element, formContainer}) => {

ui.tests/test-module/specs/checkbox/checkbox.authoring.cy.js

@@ -51,7 +51,7 @@ describe('Page - Authoring', function () {
     cy.get("[name='./name']")
         .should("exist");
     cy.get("[name='./readOnly']")
-        .should("not.exist");
+        .should("exist");
     cy.get('.cq-dialog-cancel').should('be.visible').click({ force: true });
     cy.get('.cq-dialog-cancel').should('not.exist');
     cy.deleteComponentByPath(checkboxDrop);

ui.tests/test-module/specs/checkbox/checkbox.runtime.cy.js

@@ -73,6 +73,10 @@ describe("Form Runtime with CheckBox Input", () => {
         }).then(() => {
             model.enable = false
             return checkHTML(model.id, model.getState())
+        }).then(() => {
+            model.readOnly = true
+            cy.get(`#${id}`).find(".cmp-adaptiveform-checkbox__widget").should('have.attr', 'disabled', 'disabled');
+            return checkHTML(model.id, model.getState());
         })
     });