FORMS-12667 Update type property on replacing checkboxgroup to radio group (#1176)

* Update type property on replacing checkboxgroup to radio group

* FORMS-12667 review comment

---------

Co-authored-by: demaurya <[email protected]>

Author: 2 people

examples/ui.apps/src/main/content/jcr_root/apps/forms-components-examples/components/form/radiobutton/_cq_template.xml

@@ -3,6 +3,7 @@
           jcr:primaryType="nt:unstructured"
           jcr:title="Radio Button"
           fieldType="radio-group"
+          type="number"
           orientation="horizontal"
           enum="[0,1]"
           enumNames="[Item 1,Item 2]"/>

ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/container/v2/container/clientlibs/editorhook/js/componentutils.js

@@ -34,6 +34,16 @@
         );
     };
 
+    function getComponentModel(componentPath) {
+        const result = $.ajax({
+            type: 'GET',
+            async: false,
+            url: Granite.HTTP.externalize(componentPath + ".model.json"),
+            cache: false
+        });
+        return result.responseJSON;
+    }
+
     let RequestManager = {};
     RequestManager.PostRequest = function () {
         RequestManager.Request.call(this, arguments);
@@ -52,17 +62,26 @@
     RequestManager.PostRequest.prototype.prepareReplaceParagraph = function (config, editable, preservedProperties) {
         if (config.templatePath) {
             let comTemplatePath = Granite.HTTP.externalize(config.templatePath),
-                comData = CQ.shared.HTTP.eval(comTemplatePath + ".infinity.json"); // get component default json
+                comData = CQ.shared.HTTP.eval(comTemplatePath + ".infinity.json"), // get component default json
+                updatedProps = {};
+
+            if(comData?.fieldType === "radio-group") {
+                const model = getComponentModel(editable.path);
+                if(model.type && model.type.includes("[]")) {
+                    updatedProps.type = model.type.replace("[]", "");
+                }
+            }
 
-            // Delete properties that are not preserved
+            // Delete properties that are preserved
             for (let p in comData) {
                 if ((!Array.isArray(comData[p]) && typeof comData[p] === 'object') || preservedProperties.includes(p)) {
                     delete comData[p];
                 }
             }
 
             comData["sling:resourceType"] = config.resourceType;
-            this.setParam(":content", JSON.stringify(comData));    // write component properties
+            updatedProps = {...comData, ...updatedProps};
+            this.setParam(":content", JSON.stringify(updatedProps));    // write component properties
         }
 
         // overwrite editable properties with component properties so that data is not lost while replace operation

ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/container/v2/container/clientlibs/editorhook/js/replacehook.js

@@ -44,7 +44,7 @@
     }
 
     const preservedProperties = ['id', 'description', 'enabled', 'jcr:created', 'jcr:title', 'name',
-        'placeholder', 'readOnly', 'required', 'tooltip', 'visible', 'enum', 'enumNames'];
+        'placeholder', 'readOnly', 'required', 'tooltip', 'visible', 'enum', 'enumNames', 'type'];
 
     const cannotBeReplacedWith = ['file-input'],
         irreplaceable = ['file-input'],

ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/radiobutton/v1/radiobutton/_cq_template.xml

@@ -3,6 +3,7 @@
     jcr:primaryType="nt:unstructured"
     jcr:title="Radio Button"
     fieldType="radio-group"
+    type="number"
     orientation="horizontal"
     enum="[0,1]"
     enumNames="[Item 1,Item 2]"/>

ui.tests/test-module/specs/replaceaction/replacelayout-container.authoring.spec.js

@@ -147,7 +147,15 @@ describe('component replace - Authoring', function () {
                     cy.get("[value='" + afConstants.components.forms.resourceType[type] + "']").should('not.exist');
                 }
             }
+            cy.intercept('POST', /core-components-it\/blank\/jcr:content\/guideContainer\/.*/).as('replaceCmp');
             cy.get(replacementComp).click();
+            cy.wait("@replaceCmp");
+            if(replacedComponentName === radioButtonName) {
+                cy.getFormJson("/content/forms/af/core-components-it/blank/jcr:content/guideContainer/checkboxgroup").then((body) => {
+                    expect(body).to.have.property('type');
+                    expect(body.type).eq("number");
+                })
+            }
             cy.deleteComponentByTitle(replacedComponentName);
         }
     }