feat(editor): support editing FEEL in label and description

bpmn-io · May 26, 2023 · 5680cf4 · 5680cf4
1 parent 513f57f
commit 5680cf4
Show file tree

Hide file tree

Showing 5 changed files with 240 additions and 47 deletions.
diff --git a/packages/form-js-editor/src/features/expression-language/EditorTemplating.js b/packages/form-js-editor/src/features/expression-language/EditorTemplating.js
@@ -0,0 +1,12 @@
+import { isString } from 'min-dash';
+
+export default class EditorTemplating {
+
+  // same rules as viewer templating
+  isTemplate(value) { return isString(value) && (value.startsWith('=') || /{{/.test(value)); }
+
+  // return the template raw, as we usually just want to display that
+  evaluate(template) { return template; }
+}
+
+EditorTemplating.$inject = [];
diff --git a/packages/form-js-editor/src/features/expression-language/index.js b/packages/form-js-editor/src/features/expression-language/index.js
@@ -1,7 +1,8 @@
-import { FeelExpressionLanguage, FeelersTemplating } from '@bpmn-io/form-js-viewer';
+import { FeelExpressionLanguage } from '@bpmn-io/form-js-viewer';
+import EditorTemplating from './EditorTemplating';
 
 export default {
   __init__: [ 'expressionLanguage', 'templating' ],
   expressionLanguage: [ 'type', FeelExpressionLanguage ],
-  templating: [ 'type', FeelersTemplating ]
+  templating: [ 'type', EditorTemplating ]
 };
diff --git a/packages/form-js-editor/src/features/properties-panel/entries/DescriptionEntry.js b/packages/form-js-editor/src/features/properties-panel/entries/DescriptionEntry.js
@@ -1,10 +1,10 @@
 import { get } from 'min-dash';
 
-import { useService } from '../hooks';
-
 import { INPUTS } from '../Util';
 
-import { TextFieldEntry, isTextFieldEntryEdited } from '@bpmn-io/properties-panel';
+import { useService, useVariables } from '../hooks';
+
+import { FeelTemplatingEntry, isFeelEntryEdited } from '@bpmn-io/properties-panel';
 
 
 export default function DescriptionEntry(props) {
@@ -25,7 +25,7 @@ export default function DescriptionEntry(props) {
       component: Description,
       editField: editField,
       field: field,
-      isEdited: isTextFieldEntryEdited
+      isEdited: isFeelEntryEdited
     });
   }
 
@@ -42,6 +42,8 @@ function Description(props) {
 
   const debounce = useService('debounce');
 
+  const variables = useVariables().map(name => ({ name }));
+
   const path = [ 'description' ];
 
   const getValue = () => {
@@ -52,12 +54,14 @@ function Description(props) {
     return editField(field, path, value);
   };
 
-  return TextFieldEntry({
+  return FeelTemplatingEntry({
     debounce,
     element: field,
     getValue,
     id,
     label: 'Field description',
-    setValue
+    singleLine: true,
+    setValue,
+    variables
   });
 }
diff --git a/packages/form-js-editor/src/features/properties-panel/entries/LabelEntry.js b/packages/form-js-editor/src/features/properties-panel/entries/LabelEntry.js
@@ -1,10 +1,13 @@
 import { INPUTS } from '../Util';
 import { DATETIME_SUBTYPES, DATE_LABEL_PATH, TIME_LABEL_PATH } from '@bpmn-io/form-js-viewer';
-import { simpleStringEntryFactory } from './factories';
+import { useService, useVariables } from '../hooks';
+import { FeelTemplatingEntry, isFeelEntryEdited } from '@bpmn-io/properties-panel';
+import { get } from 'min-dash';
 
 export default function LabelEntry(props) {
   const {
-    field
+    field,
+    editField
   } = props;
 
   const {
@@ -17,35 +20,137 @@ export default function LabelEntry(props) {
   if (type === 'datetime') {
     if (subtype === DATETIME_SUBTYPES.DATE || subtype === DATETIME_SUBTYPES.DATETIME) {
       entries.push(
-        simpleStringEntryFactory({
+        {
           id: 'date-label',
-          path: DATE_LABEL_PATH,
-          label: 'Date label',
-          props
-        })
+          component: DateLabel,
+          editField,
+          field,
+          isEdited: isFeelEntryEdited
+        }
       );
     }
     if (subtype === DATETIME_SUBTYPES.TIME || subtype === DATETIME_SUBTYPES.DATETIME) {
       entries.push(
-        simpleStringEntryFactory({
+        {
           id: 'time-label',
-          path: TIME_LABEL_PATH,
-          label: 'Time label',
-          props
-        })
+          component: TimeLabel,
+          editField,
+          field,
+          isEdited: isFeelEntryEdited
+        }
       );
     }
   }
   else if (INPUTS.includes(type) || type === 'button') {
     entries.push(
-      simpleStringEntryFactory({
+      {
         id: 'label',
-        path: [ 'label' ],
-        label: 'Field label',
-        props
-      })
+        component: Label,
+        editField,
+        field,
+        isEdited: isFeelEntryEdited
+      }
     );
   }
 
   return entries;
 }
+
+function Label(props) {
+  const {
+    editField,
+    field,
+    id
+  } = props;
+
+  const debounce = useService('debounce');
+
+  const variables = useVariables().map(name => ({ name }));
+
+  const path = [ 'label' ];
+
+  const getValue = () => {
+    return get(field, path, '');
+  };
+
+  const setValue = (value) => {
+    return editField(field, path, value);
+  };
+
+  return FeelTemplatingEntry({
+    debounce,
+    element: field,
+    getValue,
+    id,
+    label: 'Field label',
+    singleLine: true,
+    setValue,
+    variables
+  });
+}
+
+function DateLabel(props) {
+  const {
+    editField,
+    field,
+    id
+  } = props;
+
+  const debounce = useService('debounce');
+
+  const variables = useVariables().map(name => ({ name }));
+
+  const path = DATE_LABEL_PATH;
+
+  const getValue = () => {
+    return get(field, path, '');
+  };
+
+  const setValue = (value) => {
+    return editField(field, path, value);
+  };
+
+  return FeelTemplatingEntry({
+    debounce,
+    element: field,
+    getValue,
+    id,
+    label: 'Date label',
+    singleLine: true,
+    setValue,
+    variables
+  });
+}
+
+function TimeLabel(props) {
+  const {
+    editField,
+    field,
+    id
+  } = props;
+
+  const debounce = useService('debounce');
+
+  const variables = useVariables().map(name => ({ name }));
+
+  const path = TIME_LABEL_PATH;
+
+  const getValue = () => {
+    return get(field, path, '');
+  };
+
+  const setValue = (value) => {
+    return editField(field, path, value);
+  };
+
+  return FeelTemplatingEntry({
+    debounce,
+    element: field,
+    getValue,
+    id,
+    label: 'Time label',
+    singleLine: true,
+    setValue,
+    variables
+  });
+}