fix: button labels properly evaluate expressions

Closes #1181
bpmn-io · May 31, 2024 · eaf03cc · eaf03cc
1 parent ed7f922
commit eaf03cc
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 7 deletions.
diff --git a/packages/form-js-viewer/src/render/components/form-fields/Button.js b/packages/form-js-viewer/src/render/components/form-fields/Button.js
@@ -1,4 +1,5 @@
 import { formFieldClasses } from '../Util';
+import { useSingleLineTemplateEvaluation } from '../../hooks';
 
 const type = 'button';
 
@@ -7,6 +8,8 @@ export function Button(props) {
 
   const { action = 'submit' } = field;
 
+  const evaluatedLabel = useSingleLineTemplateEvaluation(field.label || '', { debug: true });
+
   return (
     <div class={formFieldClasses(type)}>
       <button
@@ -15,7 +18,7 @@ export function Button(props) {
         disabled={disabled}
         onFocus={() => onFocus && onFocus()}
         onBlur={() => onBlur && onBlur()}>
-        {field.label}
+        {evaluatedLabel}
       </button>
     </div>
   );

diff --git a/packages/form-js-viewer/test/spec/render/components/form-fields/Button.spec.js b/packages/form-js-viewer/test/spec/render/components/form-fields/Button.spec.js
@@ -4,6 +4,8 @@ import { Button } from '../../../../../src/render/components/form-fields/Button'
 
 import { createFormContainer, expectNoViolations } from '../../../../TestHelper';
 
+import { MockFormContext } from '../helper';
+
 let container;
 
 describe('Button', function () {
@@ -38,6 +40,44 @@ describe('Button', function () {
     expect(button.textContent).to.equal('Reset');
   });
 
+  it('should render with expression label', function () {
+    // when
+    const { container } = createButton({
+      initialData: {
+        foo: '42 labels',
+      },
+      field: {
+        ...defaultField,
+        label: '=foo',
+      },
+    });
+
+    // then
+    const button = container.querySelector('button');
+
+    expect(button).to.exist;
+    expect(button.textContent).to.equal('42 labels');
+  });
+
+  it('should render with templated label', function () {
+    // when
+    const { container } = createButton({
+      initialData: {
+        foo: '42',
+      },
+      field: {
+        ...defaultField,
+        label: 'My label {{foo}}',
+      },
+    });
+
+    // then
+    const button = container.querySelector('button');
+
+    expect(button).to.exist;
+    expect(button.textContent).to.equal('My label 42');
+  });
+
   it('should render with default type (submit)', function () {
     // when
     const { container } = createButton();
@@ -132,10 +172,18 @@ const defaultField = {
   type: 'button',
 };
 
-function createButton(options = {}) {
-  const { disabled, field = defaultField } = options;
-
-  return render(<Button disabled={disabled} field={field} />, {
-    container: options.container || container.querySelector('.fjs-form'),
-  });
+function createButton({ services, ...restOptions } = {}) {
+  const options = {
+    field: defaultField,
+    ...restOptions,
+  };
+
+  return render(
+    <MockFormContext services={services} options={options}>
+      <Button {...options} />
+    </MockFormContext>,
+    {
+      container: options.container || container.querySelector('.fjs-form'),
+    },
+  );
 }