TASK-1830422: ListViewComponent now supports nested items. (#89) (#93)

Co-authored-by: mloct <tomasz.mlocek@pega.com>

Author: lukjj-public-pega

core/src/commonMain/kotlin/com/pega/constellation/sdk/kmp/core/components/containers/ListViewComponent.kt

@@ -11,7 +11,10 @@ import com.pega.constellation.sdk.kmp.core.components.containers.ListViewCompone
 import com.pega.constellation.sdk.kmp.core.components.containers.ListViewComponent.SelectionMode.SINGLE
 import com.pega.constellation.sdk.kmp.core.components.getJSONArray
 import com.pega.constellation.sdk.kmp.core.components.getString
+import kotlinx.serialization.json.JsonArray
+import kotlinx.serialization.json.JsonElement
 import kotlinx.serialization.json.JsonObject
+import kotlinx.serialization.json.jsonArray
 import kotlinx.serialization.json.jsonObject
 import kotlinx.serialization.json.jsonPrimitive
 
@@ -27,6 +30,8 @@ class ListViewComponent(context: ComponentContext) : BaseComponent(context) {
         private set
     var columnNames by mutableStateOf(emptyList<String>())
         private set
+    var columnLabels by mutableStateOf(emptyList<String>())
+        private set
     var items by mutableStateOf(emptyList<Item>())
         private set
 
@@ -38,11 +43,10 @@ class ListViewComponent(context: ComponentContext) : BaseComponent(context) {
         selectionMode = SINGLE
         selectedItemIndex = props.getIntOrNull("selectedItemIndex")
         columnNames = props.getJSONArray("columnNames").map { it.jsonPrimitive.content }
+        columnLabels = props.getJSONArray("columnLabels").map { it.jsonPrimitive.content }
         items = props.getJSONArray("items")
-            .map { item ->
-                item.jsonObject.entries
-                    .associate { it.key to it.value.jsonPrimitive.content }
-                    .let { Item(it) }
+            .map {
+                Item(it.toFoldedItemContent(emptyMap(), ""))
             }
     }
 
@@ -64,6 +68,25 @@ class ListViewComponent(context: ComponentContext) : BaseComponent(context) {
     private fun JsonObject.getIntOrNull(key: String): Int? =
         get(key)?.jsonPrimitive?.content?.takeIf { it.isNotBlank() }?.toIntOrNull()
 
+    private fun JsonElement.toFoldedItemContent(
+        initialResult: Map<String, String>,
+        currentPath: String
+    ): Map<String, String> =
+        when (this) {
+            is JsonObject -> jsonObject.entries.fold(initialResult) { accumulator, element ->
+                val nextPath = if (currentPath.isNotEmpty()) {
+                    "$currentPath.${element.key}"
+                } else {
+                    element.key
+                }
+                element.value.toFoldedItemContent(accumulator, nextPath)
+            }
+            is JsonArray -> jsonArray.foldIndexed(initialResult) { index, accumulator, element ->
+                element.toFoldedItemContent(accumulator, "$currentPath[$index]")
+            }
+            else -> initialResult + mapOf(currentPath to jsonPrimitive.content)
+        }
+
     private fun String.toSelectionMode() =
         when (this.uppercase()) {
             "SINGLE" -> SINGLE

samples/android-cmp-app/src/androidInstrumentedTest/kotlin/com/pega/constellation/sdk/kmp/samples/androidcmpapp/test/cases/NestedDataReferenceTest.kt

@@ -0,0 +1,38 @@
+package com.pega.constellation.sdk.kmp.samples.androidcmpapp.test.cases
+
+import androidx.compose.ui.test.ExperimentalTestApi
+import androidx.compose.ui.test.onNodeWithText
+import androidx.compose.ui.test.performClick
+import androidx.compose.ui.test.runComposeUiTest
+import com.pega.constellation.sdk.kmp.samples.androidcmpapp.test.ComposeTest
+import com.pega.constellation.sdk.kmp.samples.androidcmpapp.test.waitForNode
+import com.pega.constellation.sdk.kmp.samples.androidcmpapp.test.waitForNodes
+import com.pega.constellation.sdk.kmp.test.mock.PegaVersion
+import kotlin.test.Test
+
+@OptIn(ExperimentalTestApi::class)
+class NestedDataReferenceTest : ComposeTest(PegaVersion.v24_2_2) {
+
+    @Test
+    fun test_nested_json() = runComposeUiTest {
+        setupApp("O40M3A-MarekCo-Work-NestedJSON")
+
+        // create case
+        onNodeWithText("New Service").performClick()
+
+        // verify form title
+        waitForNode("Create (N-", substring = true)
+
+        // verify column names
+        listOf("CASE ID", "DATA1", "DATA2").forEach { waitForNodes(it, count = 2) }
+
+        // verify data
+        listOf(
+            listOf("S-32005", "Nested1-1", "Nested1-2"),
+            listOf("S-32004", "Nested2-1", "Nested2-2"),
+            listOf("S-32003", "Nested3-1", "Nested3-2"),
+            listOf("S-32002", "Nested4-1", "Nested4-2"),
+            listOf("S-32001", "Nested5-1", "Nested5-2")
+        ).flatten().forEach { waitForNodes(it, count = 2) }
+    }
+}

samples/android-cmp-app/src/androidInstrumentedTest/kotlin/com/pega/constellation/sdk/kmp/samples/androidcmpapp/test/cases/ParametrizedDataReferenceTest.kt

@@ -17,7 +17,7 @@ import kotlin.test.Test
 
 @OptIn(ExperimentalTestApi::class)
 class ParametrizedDataReferenceTest : ComposeTest(PegaVersion.v24_2_2) {
-    private val columns = listOf("KeyName", "KeyLength", "Algorithm")
+    private val columns = listOf("Key Name", "Key Length", "Algorithm")
 
     private val unfilteredKeys = listOf(
         "AeroCrypt",

scripts/dxcomponents/components/containers/templates/listview/list-view.component.js

@@ -9,6 +9,7 @@ export class ListViewComponent extends BaseComponent {
     payload;
     fields$;
     displayedColumns$ = [];
+    displayedColumnsLabels$ = [];
     configProps$;
     selectionMode;
     selectedItemIndex = null;
@@ -155,6 +156,7 @@ export class ListViewComponent extends BaseComponent {
             selectionMode: this.selectionMode,
             selectedItemIndex: String(this.selectedItemIndex),
             columnNames: this.displayedColumns$,
+            columnLabels: this.displayedColumnsLabels$,
             items: this.response,
         };
         this.componentsManager.onComponentPropsUpdate(this);
@@ -195,6 +197,7 @@ export class ListViewComponent extends BaseComponent {
                     const columns = this.#getHeaderCells(columnFields, this.fieldDefs);
                     this.fields$ = this.#updateFields(this.fields$, fieldsMetaData.data.fields, columns);
                     this.displayedColumns$ = columns.map((c) => c.id);
+                    this.displayedColumnsLabels$ = columns.map((c) => c.label);
                     this.response = tableDataResults;
 
                     // disabling parsing for now parsing data according to field types like date/date-time/currency

scripts/dxcomponents/components/containers/templates/listview/utils.js

@@ -539,6 +539,27 @@ function prepareExtraFields(metaFields, configFields, configFieldSet, reportColu
 
 const AssignDashObjects = ["Assign-Worklist", "Assign-WorkBasket"];
 
+function isFLProperty(label) {
+    return label?.startsWith("@FL");
+}
+
+function getFieldLabel(fieldConfig) {
+    const { label, classID, caption } = fieldConfig;
+    let fieldLabel = (label ?? caption)?.substring(4);
+    const labelSplit = fieldLabel?.split(".");
+    const propertyName = labelSplit?.pop();
+    const fieldMetaData = PCore.getMetadataUtils().getPropertyMetadata(propertyName, classID) ?? {};
+    fieldLabel = fieldMetaData.label ?? fieldMetaData.caption ?? propertyName;
+    const definedOnClassID = fieldMetaData.definedOnClassID;
+    const localeValue = PCore.getLocaleUtils().getLocaleValue(
+        fieldLabel,
+        `${definedOnClassID ?? fieldMetaData.classID ?? classID}.${propertyName}`,
+        PCore.getLocaleUtils().FIELD_LABELS_BUNDLE_KEY,
+        null
+    );
+    return localeValue || fieldLabel;
+}
+
 function populateRenderingOptions(name, config, field) {
     const shouldDisplayAsSemanticLink = "displayAsLink" in field.config && field.config.displayAsLink;
     if (shouldDisplayAsSemanticLink) {
@@ -565,7 +586,10 @@ export function initializeColumns(fields = [], getMappedProperty = null) {
 
         let label = field.config.label || field.config.caption;
         const { show = true, displayAs } = field.config;
-        if (label.startsWith("@")) {
+
+        if (isFLProperty(label)) {
+            label = getFieldLabel(field.config);
+        } else if (label.startsWith("@")) {
             label = label.substring(3);
         }