From a491b433da4a838186718baa6853653e25e2ad65 Mon Sep 17 00:00:00 2001
From: Valentin Serra <valentin.serra@camunda.com>
Date: Thu, 7 Mar 2024 04:43:00 +0100
Subject: [PATCH] fix: ensure dynamic list and tables interact safely

Closes #1064
---
 .../render/components/form-fields/Table.js    |  2 +-
 .../form-js-viewer/test/spec/Form.spec.js     | 56 ++++++++++++
 ...dynamic-list-table-filter-interaction.json | 89 +++++++++++++++++++
 3 files changed, 146 insertions(+), 1 deletion(-)
 create mode 100644 packages/form-js-viewer/test/spec/dynamic-list-table-filter-interaction.json

diff --git a/packages/form-js-viewer/src/render/components/form-fields/Table.js b/packages/form-js-viewer/src/render/components/form-fields/Table.js
index dc1449785..cc1ae40b8 100644
--- a/packages/form-js-viewer/src/render/components/form-fields/Table.js
+++ b/packages/form-js-viewer/src/render/components/form-fields/Table.js
@@ -56,7 +56,7 @@ export function Table(props) {
   );
   const columnKeys = evaluatedColumns.map(({ key }) => key);
   const evaluatedDataSource = useExpressionEvaluation(dataSource);
-  const data = Array.isArray(evaluatedDataSource) ? evaluatedDataSource : [];
+  const data = Array.isArray(evaluatedDataSource) ? evaluatedDataSource.filter(i => i !== undefined) : [];
   const sortedData =
     sortBy === null
       ? data
diff --git a/packages/form-js-viewer/test/spec/Form.spec.js b/packages/form-js-viewer/test/spec/Form.spec.js
index b1d167469..e1da086ba 100644
--- a/packages/form-js-viewer/test/spec/Form.spec.js
+++ b/packages/form-js-viewer/test/spec/Form.spec.js
@@ -18,6 +18,7 @@ import conditionSchema from './condition.json';
 import conditionErrorsSchema from './condition-errors.json';
 import conditionErrorsDynamicListSchema from './condition-errors-dynamic-list.json';
 import dynamicListVariablesSchema from './dynamic-list-variables.json';
+import dynamicListTableFilterInteractionSchema from './dynamic-list-table-filter-interaction.json';
 import hiddenFieldsConditionalSchema from './hidden-fields-conditional.json';
 import hiddenFieldsExpressionSchema from './hidden-fields-expression.json';
 import disabledSchema from './disabled.json';
@@ -525,6 +526,61 @@ describe('Form', function() {
   });
 
 
+  it('should hold proper interaction between table and dynamic list', async function() {
+
+    // given
+    const data = {
+      'onlyShowRiskAbove': 6,
+      'riskEntries': [
+        {
+          'risk': 3,
+          'name': 'Alice Johnson',
+          'date': '2023-03-01'
+        },
+        {
+          'risk': 6,
+          'name': 'Bob Smith',
+          'date': '2023-03-05'
+        },
+        {
+          'risk': 9,
+          'name': 'Carla Gomez',
+          'date': '2023-03-10'
+        },
+        {
+          'risk': 12,
+          'name': 'David Lee',
+          'date': '2023-03-15'
+        }
+      ]
+    };
+
+    // when
+    await bootstrapForm({
+      container,
+      data,
+      schema: dynamicListTableFilterInteractionSchema
+    });
+
+    // then
+    expect(form).to.exist;
+
+    const table = container.querySelector('.fjs-form-field-table');
+    expect(table).to.exist;
+
+    const tableEntries = table.querySelectorAll('.fjs-table-td');
+    expect(tableEntries).to.have.length(6);
+    expect([ ...tableEntries ].map(e => e.textContent)).to.eql([
+      '9', 'Carla Gomez', '2023-03-10',
+      '12', 'David Lee', '2023-03-15'
+    ]);
+
+    const groups = container.querySelectorAll('.fjs-form-field-group');
+    expect(groups).to.have.length(2);
+
+  });
+
+
   const runFocusBlurTest = function(id, index, selector) {
 
     it('focus and blur events should trigger for ' + id, async function() {
diff --git a/packages/form-js-viewer/test/spec/dynamic-list-table-filter-interaction.json b/packages/form-js-viewer/test/spec/dynamic-list-table-filter-interaction.json
new file mode 100644
index 000000000..e2c8f55e8
--- /dev/null
+++ b/packages/form-js-viewer/test/spec/dynamic-list-table-filter-interaction.json
@@ -0,0 +1,89 @@
+{
+  "components": [
+    {
+      "label": "Table",
+      "type": "table",
+      "dataSource": "=riskEntries",
+      "rowCount": 3,
+      "id": "Table_1",
+      "columns": [
+        {
+          "label": "Risk factor",
+          "key": "risk"
+        },
+        {
+          "label": "Name",
+          "key": "name"
+        },
+        {
+          "label": "Date",
+          "key": "date"
+        }
+      ]
+    },
+    {
+      "label": "Only show risk above",
+      "type": "number",
+      "id": "Number_2",
+      "key": "onlyShowRiskAbove",
+      "defaultValue": 5
+    },
+    {
+      "components": [
+        {
+          "components": [
+            {
+              "text": "Risk factor: {{this.risk}}",
+              "label": "Text view",
+              "type": "text",
+              "id": "Field_0kypubr"
+            },
+            {
+              "label": "Risk factor",
+              "type": "number",
+              "id": "Number_1",
+              "key": "risk"
+            },
+            {
+              "label": "Name",
+              "type": "textfield",
+              "id": "TextField_1",
+              "key": "name"
+            },
+            {
+              "label": "Date",
+              "type": "textfield",
+              "id": "TextField_2",
+              "key": "date"
+            }
+          ],
+          "showOutline": true,
+          "label": "Group",
+          "type": "group",
+          "id": "Group_1",
+          "conditional": {
+            "hide": "=this.risk <= onlyShowRiskAbove"
+          }
+        }
+      ],
+      "showOutline": true,
+      "isRepeating": true,
+      "allowAddRemove": true,
+      "defaultRepetitions": 1,
+      "label": "Dynamic list",
+      "type": "dynamiclist",
+      "id": "Dynamiclist_1",
+      "path": "riskEntries",
+      "nonCollapsedItems": null
+    }
+  ],
+  "type": "default",
+  "id": "Form_1je5j4d",
+  "executionPlatform": "Camunda Cloud",
+  "executionPlatformVersion": "8.4.0",
+  "exporter": {
+    "name": "Camunda Modeler",
+    "version": "5.20.0"
+  },
+  "schemaVersion": 15
+}
\ No newline at end of file