TASK-1884601 - code review improvements (#129)

tomaszmlocek-pega · web-flow · commit 158a443290bb · 2026-04-02T13:47:03.000+02:00
diff --git a/scripts/dxcomponents/components/containers/templates/data-reference.component.js b/scripts/dxcomponents/components/containers/templates/data-reference.component.js
@@ -42,9 +42,12 @@ export class DataReferenceComponent extends ContainerBaseComponent {
         this.children = this.pConn.getChildren();
         this.#updateSelf();
 
-        if ((['Dropdown', 'Checkbox'].includes(this.firstChildMeta?.type)) &&
+        const shouldPreloadOptions = 
+            (['Dropdown', 'Checkbox'].includes(this.firstChildMeta?.type)) &&
             this.rawViewMetadata.config?.parameters &&
-            !this.firstChildMeta.config.deferDatasource) {
+            !this.firstChildMeta.config.deferDatasource;
+
+        if (shouldPreloadOptions) {
             const { value, key, text } = this.firstChildMeta.config.datasource.fields;
             PCore.getDataApiUtils()
                 .getData(this.refList, { dataViewParameters: this.parameters }, "")
@@ -119,7 +122,6 @@ export class DataReferenceComponent extends ContainerBaseComponent {
                 delete this.firstChildMeta.config.readOnly;
             }
 
-            // todo pelcm add readonly handling
             this.#setChildDatasource();
 
             if (this.firstChildMeta?.type === "Dropdown" && !this.firstChildMeta.config.deferDatasource) {
@@ -191,19 +193,38 @@ export class DataReferenceComponent extends ContainerBaseComponent {
 
 
     #setChildDatasource() {
-        const { type, config } = this.firstChildMeta;
+        const { type } = this.firstChildMeta;
 
-        if (['Dropdown', 'Checkbox'].includes(type) && !config.deferDatasource && config.datasource) {
-            const hasParameters = this.rawViewMetadata.config?.parameters;
-            config.datasource.source = hasParameters ? this.dropDownDataSource : `@DATASOURCE ${this.refList}.pxResults`;
-        } else if (type === 'AutoComplete') {
-            config.datasource = this.refList;
-            if (this.rawViewMetadata.config?.parameters) {
-                config.parameters = this.parameters;
-            }
+        if (type === 'AutoComplete') {
+            this.#setAutoCompleteDatasource();
+        } else if (['Dropdown', 'Checkbox'].includes(type)) {
+            this.#setDropdownOrCheckboxDatasource();
+        }
+    }
+
+    #setAutoCompleteDatasource() {
+        const { config } = this.firstChildMeta;
+        config.datasource = this.refList;
+
+        const hasParameters = this.rawViewMetadata.config?.parameters;
+        if (hasParameters) {
+            config.parameters = this.parameters;
         }
     }
 
+    #setDropdownOrCheckboxDatasource() {
+        const { config } = this.firstChildMeta;
+
+        if (!config.datasource || config.deferDatasource) {
+            return;
+        }
+
+        const hasParameters = this.rawViewMetadata.config?.parameters;
+        config.datasource.source = hasParameters
+            ? this.dropDownDataSource
+            : `@DATASOURCE ${this.refList}.pxResults`;
+    }
+
     // Re-create first child with overridden props
     // Memoized child in order to stop unmount and remount of the child component when data reference
     // rerenders without any actual change
@@ -217,17 +238,6 @@ export class DataReferenceComponent extends ContainerBaseComponent {
             });
 
             this.#setReadOnlyDisplayFlags();
-            // if (
-            //     !this.canBeChangedInReviewMode &&
-            //     this.isDisplayModeEnabled &&
-            //     this.selectionMode === SELECTION_MODE.SINGLE
-            // ) {
-            //     this.displaySingleRef = true;
-            // }
-            //
-            // if (this.isDisplayModeEnabled && this.selectionMode === SELECTION_MODE.MULTI) {
-            //     this.displayMultiRef = true;
-            // }
 
             // In the case of a datasource with parameters you cannot load the dropdown before the parameters
             if (type === "Dropdown" && this.rawViewMetadata.config?.parameters && this.dropDownDataSource === null) {
@@ -262,11 +272,18 @@ export class DataReferenceComponent extends ContainerBaseComponent {
         const isSingleMode = this.selectionMode === SELECTION_MODE.SINGLE;
         const isMultiMode = this.selectionMode === SELECTION_MODE.MULTI;
 
-        if (isSingleMode && (this.displayAs === 'readonly' || this.isDisplayModeEnabled) && !this.canBeChangedInReviewMode) {
+        const shouldDisplayOnlySingle = isSingleMode && 
+            (this.displayAs === 'readonly' || this.isDisplayModeEnabled) && 
+            !this.canBeChangedInReviewMode;
+
+        if (shouldDisplayOnlySingle) {
             this.props.displayOnlySingle = true;
         }
 
-        if (isMultiMode && (['readonly', 'readonlyMulti', 'map'].includes(this.displayAs) || this.isDisplayModeEnabled)) {
+        const shouldDisplayOnlyMulti = isMultiMode && 
+            (['readonly', 'readonlyMulti', 'map'].includes(this.displayAs) || this.isDisplayModeEnabled);
+
+        if (shouldDisplayOnlyMulti) {
             this.props.displayOnlyMulti = true;
         }
     }
diff --git a/scripts/dxcomponents/components/fields/check-box.component.js b/scripts/dxcomponents/components/fields/check-box.component.js
@@ -38,31 +38,41 @@ export class CheckBoxComponent extends FieldBaseComponent {
 
         this.selectionMode = configProps.selectionMode;
         this.props.selectionMode = this.selectionMode;
+
         if (this.selectionMode === MULTI_MODE) {
-            this.referenceList = configProps.referenceList;
-            this.selectionList = configProps.selectionList;
-            this.selectedValues = configProps.readonlyContextList;
-            this.primaryField = configProps.primaryField;
-            this.props.readOnly = configProps.renderMode === 'ReadOnly' || configProps.displayMode === 'DISPLAY_ONLY' || configProps.readOnly;
-
-            this.datasource = configProps.datasource;
-            this.selectionKey = configProps.selectionKey;
-            this.checkboxGroupItems = this.datasource?.source || [];
-            const dataField = this.selectionKey?.split?.('.')[1] ?? '';
-            this.checkboxGroupItems.forEach(element => {
-                element.selected = this.selectedValues?.some?.(data => data[dataField] === element.key);
-            });
-            this.props.items = this.checkboxGroupItems;
+            this.#updateMultiModeProps(configProps);
         } else {
-            this.props.hideLabel = configProps.hideLabel ?? false;
-            this.props.caption = configProps.caption ?? "";
-            this.props.trueLabel = configProps.trueLabel ?? "Yes";
-            this.props.falseLabel = configProps.falseLabel ?? "No";
-            this.propName = this.pConn.getStateProps().value;
+            this.#updateSingleModeProps(configProps);
         }
+
         this.componentsManager.onComponentPropsUpdate(this);
     }
 
+    #updateMultiModeProps(configProps) {
+        this.referenceList = configProps.referenceList;
+        this.selectionList = configProps.selectionList;
+        this.selectedValues = configProps.readonlyContextList;
+        this.primaryField = configProps.primaryField;
+        this.props.readOnly = configProps.renderMode === 'ReadOnly' || configProps.displayMode === 'DISPLAY_ONLY' || configProps.readOnly;
+
+        this.datasource = configProps.datasource;
+        this.selectionKey = configProps.selectionKey;
+        this.checkboxGroupItems = this.datasource?.source || [];
+        const dataField = this.selectionKey?.split?.('.')[1] ?? '';
+        this.checkboxGroupItems.forEach(element => {
+            element.selected = this.selectedValues?.some?.(data => data[dataField] === element.key);
+        });
+        this.props.items = this.checkboxGroupItems;
+    }
+
+    #updateSingleModeProps(configProps) {
+        this.props.hideLabel = configProps.hideLabel ?? false;
+        this.props.caption = configProps.caption ?? "";
+        this.props.trueLabel = configProps.trueLabel ?? "Yes";
+        this.props.falseLabel = configProps.falseLabel ?? "No";
+        this.propName = this.pConn.getStateProps().value;
+    }
+
     fieldOnChange(value, event) {
         this.props.value = value;
         handleEvent(this.pConn.getActionsApi(), "changeNblur", this.propName, this.#isChecked());
diff --git a/ui-renderer-cmp/src/commonMain/kotlin/com/pega/constellation/sdk/kmp/ui/renderer/cmp/fields/CheckboxRenderer.kt b/ui-renderer-cmp/src/commonMain/kotlin/com/pega/constellation/sdk/kmp/ui/renderer/cmp/fields/CheckboxRenderer.kt
@@ -18,39 +18,42 @@ class CheckboxRenderer : ComponentRenderer<CheckboxComponent> {
                 FieldValue(label, displayValue)
             },
             editable = {
-                if (selectionMode == CheckboxComponent.SelectionMode.SINGLE) {
-                    Checkbox(
-                        value = value.toBoolean(),
-                        caption = caption,
-                        label = label,
-                        helperText = helperText,
-                        validateMessage = validateMessage,
-                        hideLabel = hideLabel,
-                        required = required,
-                        disabled = disabled,
-                        readOnly = readOnly,
-                        onValueChange = { updateValue(it.toString()) },
-                        testTag = "checkbox_[$caption]"
-                    )
-                } else {
-                    CheckboxGroup(
-                        options = checkboxGroupOptions.map {
-                            MultiSelectOption(
-                                it.key,
-                                it.text,
-                                it.selected
-                            )
-                        },
-                        label = label,
-                        helperText = helperText,
-                        validateMessage = validateMessage,
-                        hideLabel = hideLabel,
-                        required = required,
-                        disabled = disabled,
-                        readOnly = readOnly,
-                        onOptionClick = { id, selected -> onOptionClick(id, selected) },
-                        testTag = "checkbox_group_[$label]"
-                    )
+                when (selectionMode) {
+                    CheckboxComponent.SelectionMode.SINGLE -> {
+                        Checkbox(
+                            value = value.toBoolean(),
+                            caption = caption,
+                            label = label,
+                            helperText = helperText,
+                            validateMessage = validateMessage,
+                            hideLabel = hideLabel,
+                            required = required,
+                            disabled = disabled,
+                            readOnly = readOnly,
+                            onValueChange = { updateValue(it.toString()) },
+                            testTag = "checkbox_[$caption]"
+                        )
+                    }
+                    CheckboxComponent.SelectionMode.MULTI -> {
+                        CheckboxGroup(
+                            options = checkboxGroupOptions.map {
+                                MultiSelectOption(
+                                    it.key,
+                                    it.text,
+                                    it.selected
+                                )
+                            },
+                            label = label,
+                            helperText = helperText,
+                            validateMessage = validateMessage,
+                            hideLabel = hideLabel,
+                            required = required,
+                            disabled = disabled,
+                            readOnly = readOnly,
+                            onOptionClick = { id, selected -> onOptionClick(id, selected) },
+                            testTag = "checkbox_group_[$label]"
+                        )
+                    }
                 }
             }
         )
