fix: Prevent demo data from being created on edited tables

Closes #997
bpmn-io · Jan 31, 2024 · 1cceef7 · 1cceef7
1 parent 2bed4ab
commit 1cceef7
Show file tree

Hide file tree

Showing 4 changed files with 90 additions and 17 deletions.
diff --git a/packages/form-js-playground/rollup.config.js b/packages/form-js-playground/rollup.config.js
@@ -60,7 +60,8 @@ export default [
       '@codemirror/language',
       'codemirror',
       'classnames',
-      'min-dom'
+      'min-dom',
+      'min-dash'
     ],
     onwarn
   },

diff --git a/packages/form-js-playground/src/components/PlaygroundRoot.js b/packages/form-js-playground/src/components/PlaygroundRoot.js
@@ -1,5 +1,5 @@
 import { useRef, useEffect, useState, useCallback } from 'preact/hooks';
-
+import { isFunction } from 'min-dash';
 import download from 'downloadjs';
 
 import classNames from 'classnames';
@@ -142,9 +142,15 @@ export function PlaygroundRoot(props) {
     formEditor.on('formField.add', ({ formField }) => {
       const formFields = formEditor.get('formFields');
       const { config } = formFields.get(formField.type);
-      const { initialDemoData } = config;
+      const { generateInitialDemoData } = config;
       const { id } = formField;
 
+      if (!isFunction(generateInitialDemoData)) {
+        return;
+      }
+
+      const initialDemoData = generateInitialDemoData(formField);
+
       if ([ initialDemoData, id ].includes(undefined)) {
         return;
       }

diff --git a/packages/form-js-playground/test/spec/Playground.spec.js b/packages/form-js-playground/test/spec/Playground.spec.js
@@ -170,8 +170,21 @@ describe('playground', function() {
     const attrs = {
       id: 'table',
       type: 'table',
-      dataSource: 'people',
-      columnsExpression: 'peopleColumns'
+      dataSource: '=table',
+      columns: [
+        {
+          key: 'id',
+          label: 'ID'
+        },
+        {
+          key: 'name',
+          label: 'Name'
+        },
+        {
+          key: 'date',
+          label: 'Date'
+        }
+      ]
     };
 
     await act(() => {
@@ -203,6 +216,38 @@ describe('playground', function() {
     ]);
   });
 
+  it('should not append sample data', async function() {
+
+    // given
+    const attrs = {
+      id: 'table',
+      type: 'table',
+      dataSource: '=table',
+      columnsExpression: '=peopleColumns'
+    };
+
+    await act(() => {
+      playground = new Playground({
+        container,
+        schema
+      });
+    });
+
+    const editor = playground.getEditor();
+    const modeling = editor.get('modeling');
+
+    // when
+    await act(() => {
+      const { schema } = editor._getState();
+      modeling.addFormField(attrs, schema, 0);
+    });
+
+    // then
+    const dataEditor = playground.getDataEditor();
+
+    expect(dataEditor.getValue()).to.be.empty;
+  });
+
 
   it('should NOT attach to empty parent', async function() {
 

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
@@ -23,14 +23,16 @@ const type = 'table';
  * @property {string} label
  * @property {string} key
  *
+ * @typedef Field
+ * @property {string} id
+ * @property {Array<Column>} [columns]
+ * @property {string} [columnsExpression]
+ * @property {string} [label]
+ * @property {number} [rowCount]
+ * @property {string} [dataSource]
+ *
  * @typedef Props
- * @property {Object} field
- * @property {string} field.id
- * @property {Array<Column>} [field.columns]
- * @property {string} [field.columnsExpression]
- * @property {string} [field.label]
- * @property {number} [field.rowCount]
- * @property {string} [field.dataSource]
+ * @property {Field} field
  *
  * @param {Props} props
  * @returns {import("preact").JSX.Element}
@@ -263,11 +265,30 @@ Table.config = {
       ],
     };
   },
-  initialDemoData: [
-    { id: 1, name: 'John Doe', date: '31.01.2023' },
-    { id: 2, name: 'Erika Muller', date: '20.02.2023' },
-    { id: 3, name: 'Dominic Leaf', date: '11.03.2023' }
-  ],
+
+  /**
+   *
+   * @param {Field} field
+   */
+  generateInitialDemoData: (field) => {
+    const demoData = [
+      { id: 1, name: 'John Doe', date: '31.01.2023' },
+      { id: 2, name: 'Erika Muller', date: '20.02.2023' },
+      { id: 3, name: 'Dominic Leaf', date: '11.03.2023' }
+    ];
+    const demoDataKeys = Object.keys(demoData[0]);
+    const { columns, id, dataSource } = field;
+
+    if (!Array.isArray(columns) || columns.length === 0 || dataSource !== `=${id}`) {
+      return;
+    }
+
+    if (!columns.map(({ key })=>key).every(key => demoDataKeys.includes(key))) {
+      return;
+    }
+
+    return demoData;
+  }
 };
 
 // helpers /////////////////////////////