fix: prevent table component from breaking with invalid data

bpmn-io · Dec 19, 2024 · 910f8e2 · 910f8e2
1 parent 2787373
commit 910f8e2
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 12 deletions.
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
@@ -1,4 +1,4 @@
-import { isDefined, isNumber, isObject, isString } from 'min-dash';
+import { isDefined, isNil, isNumber, isObject, isString } from 'min-dash';
 import { useExpressionEvaluation } from '../../hooks';
 import { useEffect, useState } from 'preact/hooks';
 import { formFieldClasses, prefixId } from '../Util';
@@ -45,7 +45,9 @@ export function Table(props) {
   const evaluatedColumns = useEvaluatedColumns(columnsExpression || '', columns);
   const columnKeys = evaluatedColumns.map(({ key }) => key);
   const evaluatedDataSource = useExpressionEvaluation(dataSource);
-  const data = Array.isArray(evaluatedDataSource) ? evaluatedDataSource.filter((i) => i !== undefined) : [];
+  const data = Array.isArray(evaluatedDataSource)
+    ? evaluatedDataSource.filter((entry) => !isNil(entry) || typeof entry !== 'object')
+    : [];
   const sortedData = sortBy === null ? data : sortByColumn(data, sortBy.key, sortBy.direction);
 
   /** @type {unknown[][]} */
@@ -57,14 +59,6 @@ export function Table(props) {
     setCurrentPage(0);
   }, [rowCount, sortBy]);
 
-  const serializeCellData = (cellData) => {
-    if (cellData !== null && typeof cellData === 'object') {
-      return JSON.stringify(cellData);
-    }
-
-    return cellData;
-  };
-
   /** @param {string} key */
   function toggleSortBy(key) {
     setSortBy((current) => {
@@ -342,3 +336,15 @@ function getHeaderAriaLabel(sortBy, key, label) {
 
   return `Click to sort by ${label} ascending`;
 }
+
+/**
+ * @param {unknown} cellData
+ * @returns string
+ */
+function serializeCellData(cellData) {
+  if (cellData !== null && typeof cellData === 'object') {
+    return JSON.stringify(cellData);
+  }
+
+  return `${cellData || ''}`;
+}
diff --git a/packages/form-js-viewer/test/spec/render/components/form-fields/DocumentPreview.spec.js b/packages/form-js-viewer/test/spec/render/components/form-fields/DocumentPreview.spec.js
@@ -117,8 +117,6 @@ describe('DocumentPreview', function () {
     // when
     const field = config.create();
 
-    console.log({ field });
-
     // then
     expect(field).to.eql({
       label: 'Document preview',