Release 1.8 prep

packages/form-js-editor/assets/form-js-editor-base.css

@@ -263,14 +263,21 @@
   border-color: var(--color-borders-group);
 }
 
+.fjs-editor-container .fjs-children .fjs-element.fjs-dashed-outlined {
+  border-color: var(--color-borders-group);
+  border-style: dashed;
+}
+
 .fjs-editor-container .fjs-children .fjs-element.fjs-editor-selected {
   border-color: var(--color-children-selected-border) !important;
   background-color: var(--color-children-selected-background);
+  border-style: solid;
 }
 
 .fjs-editor-container .fjs-children .fjs-element:hover.fjs-editor-hovered,
 .fjs-editor-container .fjs-children .fjs-element:focus {
   border-color: var(--color-children-hover-border);
+  border-style: solid;
 }
 
 .fjs-editor-container .fjs-layout-column:first-child > .fjs-element[data-field-type="group"],

packages/form-js-editor/src/features/palette/components/Palette.js

@@ -26,7 +26,7 @@ import { PaletteEntry } from './PaletteEntry';
 
 export const PALETTE_GROUPS = [
   {
-    label: 'Basic input',
+    label: 'Input',
     id: 'basic-input'
   },
   {

packages/form-js-editor/src/features/palette/index.js

@@ -1,5 +1,6 @@
 import { PaletteRenderer } from './PaletteRenderer';
 
 export const PaletteModule = {
+  __init__: [ 'palette' ],
   palette: [ 'type', PaletteRenderer ]
 };

packages/form-js-editor/src/features/properties-panel/PropertiesPanelHeaderProvider.js

@@ -11,6 +11,7 @@ import { useService } from './hooks';
 const headerlessTypes = [
   'spacer',
   'separator',
+  'expression',
   'html'
 ];
 

packages/form-js-editor/src/features/properties-panel/entries/ConditionEntry.js

@@ -46,14 +46,23 @@ function Condition(props) {
     return editField(field, 'conditional', { hide: value });
   };
 
+  let label = 'Hide if';
+  let description = 'Condition under which the field is hidden';
+
+  // special case for expression fields which do not render
+  if (field.type === 'expression') {
+    label = 'Deactivate if';
+    description = 'Condition under which the field is deactivated';
+  }
+
   return FeelEntry({
     debounce,
-    description: 'Condition under which the field is hidden',
+    description,
     element: field,
     feel: 'required',
     getValue,
     id,
-    label: 'Hide if',
+    label,
     setValue,
     variables
   });

packages/form-js-editor/src/features/properties-panel/entries/ExpressionFieldEntries.js

@@ -0,0 +1,76 @@
+import { FeelEntry, isFeelEntryEdited, SelectEntry, isSelectEntryEdited } from '@bpmn-io/properties-panel';
+import { useService, useVariables } from '../hooks';
+
+export function ExpressionFieldEntries(props) {
+  const { editField, field, id } = props;
+
+  const entries = [];
+
+  entries.push({
+    id: `${id}-expression`,
+    component: ExpressionFieldExpression,
+    isEdited: isFeelEntryEdited,
+    editField,
+    field,
+    isDefaultVisible: (field) => field.type === 'expression'
+  });
+
+  entries.push({
+    id: `${id}-computeOn`,
+    component: ExpressionFieldComputeOn,
+    isEdited: isSelectEntryEdited,
+    editField,
+    field,
+    isDefaultVisible: (field) => field.type === 'expression'
+  });
+
+  return entries;
+}
+
+function ExpressionFieldExpression(props) {
+  const { editField, field, id } = props;
+
+  const debounce = useService('debounce');
+  const variables = useVariables().map(name => ({ name }));
+
+  const getValue = () => field.expression || '';
+
+  const setValue = (value) => {
+    editField(field, [ 'expression' ], value);
+  };
+
+  return FeelEntry({
+    debounce,
+    description: 'Define an expression to calculate the value of this field',
+    element: field,
+    feel: 'required',
+    getValue,
+    id,
+    label: 'Target value',
+    setValue,
+    variables
+  });
+}
+
+function ExpressionFieldComputeOn(props) {
+  const { editField, field, id } = props;
+
+  const getValue = () => field.computeOn || '';
+
+  const setValue = (value) => {
+    editField(field, [ 'computeOn' ], value);
+  };
+
+  const getOptions = () => ([
+    { value: 'change', label: 'Value changes' },
+    { value: 'presubmit', label: 'Form submission' }
+  ]);
+
+  return SelectEntry({
+    id,
+    label: 'Compute on',
+    getValue,
+    setValue,
+    getOptions
+  });
+}

packages/form-js-editor/src/features/properties-panel/entries/index.js

@@ -16,6 +16,7 @@ export { TextEntry } from './TextEntry';
 export { HtmlEntry } from './HtmlEntry';
 export { HeightEntry } from './HeightEntry';
 export { NumberEntries } from './NumberEntries';
+export { ExpressionFieldEntries } from './ExpressionFieldEntries';
 export { NumberSerializationEntry } from './NumberSerializationEntry';
 export { DateTimeEntry } from './DateTimeEntry';
 export { DateTimeConstraintsEntry } from './DateTimeConstraintsEntry';

packages/form-js-editor/src/features/properties-panel/groups/GeneralGroup.js

@@ -18,6 +18,7 @@ import {
   HtmlEntry,
   HeightEntry,
   NumberEntries,
+  ExpressionFieldEntries,
   DateTimeEntry,
   TableDataSourceEntry,
   PaginationEntry,
@@ -43,6 +44,7 @@ export function GeneralGroup(field, editField, getService) {
     ...IFrameHeightEntry({ field, editField }),
     ...HeightEntry({ field, editField }),
     ...NumberEntries({ field, editField }),
+    ...ExpressionFieldEntries({ field, editField }),
     ...ImageSourceEntry({ field, editField }),
     ...AltTextEntry({ field, editField }),
     ...SelectEntries({ field, editField }),

packages/form-js-editor/src/render/components/FormEditor.js

@@ -172,8 +172,10 @@ function Element(props) {
       classes.push('fjs-editor-selected');
     }
 
-    if (showOutline) {
-      classes.push('fjs-outlined');
+    const grouplike = [ 'group', 'dynamiclist' ].includes(type);
+
+    if (grouplike) {
+      classes.push(showOutline ? 'fjs-outlined' : 'fjs-dashed-outlined');
     }
 
     if (hovered) {
@@ -182,7 +184,7 @@ function Element(props) {
 
     return classes.join(' ');
 
-  }, [ hovered, isSelected, props.class, showOutline ]);
+  }, [ hovered, isSelected, props.class, showOutline, type ]);
 
   const onRemove = (event) => {
     event.stopPropagation();

packages/form-js-editor/src/render/components/editor-form-fields/EditorExpressionField.js

@@ -0,0 +1,32 @@
+import { ExpressionField, iconsByType } from '@bpmn-io/form-js-viewer';
+import { editorFormFieldClasses } from '../Util';
+import { useService } from '../../hooks';
+
+const type = 'expression';
+
+export function EditorExpressionField(props) {
+  const { field } = props;
+  const { expression = '' } = field;
+
+  const Icon = iconsByType('expression');
+  const expressionLanguage = useService('expressionLanguage');
+
+  let placeholderContent = 'Expression is empty';
+
+  if (expression.trim() && expressionLanguage.isExpression(expression)) {
+    placeholderContent = 'Expression';
+  }
+
+  return (
+    <div class={ editorFormFieldClasses(type) }>
+      <div class="fjs-form-field-placeholder">
+        <Icon viewBox="0 0 54 54" />{placeholderContent}
+      </div>
+    </div>
+  );
+}
+
+EditorExpressionField.config = {
+  ...ExpressionField.config,
+  escapeGridRender: false
+};

packages/form-js-editor/src/render/components/editor-form-fields/index.js

@@ -2,10 +2,12 @@ import { EditorIFrame } from './EditorIFrame';
 import { EditorText } from './EditorText';
 import { EditorHtml } from './EditorHtml';
 import { EditorTable } from './EditorTable';
+import { EditorExpressionField } from './EditorExpressionField';
 
 export const editorFormFields = [
   EditorIFrame,
   EditorText,
   EditorHtml,
-  EditorTable
+  EditorTable,
+  EditorExpressionField
 ];

packages/form-js-editor/test/spec/FormEditor.spec.js

@@ -403,10 +403,10 @@ describe('FormEditor', function() {
     const exportedSchema = formEditor.saveSchema();
 
     // then
-    expect(exportedSchema).to.eql(exportTagged(schema));
+    const tagged = exportTagged(schema);
+    expect(exportedSchema).to.eql(tagged);
 
     const exportedString = JSON.stringify(exportedSchema);
-
     expect(exportedString).not.to.contain('"_path"');
     expect(exportedString).not.to.contain('"_parent"');
   });

packages/form-js-editor/test/spec/features/palette/PaletteModule.spec.js

@@ -116,45 +116,6 @@ describe('features/palette', function() {
   });
 
 
-  it('should attach when section rendered late', async function() {
-
-    // given
-    const node = document.createElement('div');
-    document.body.appendChild(node);
-
-    let formEditor;
-
-    await act(async () => {
-      const result = await createEditor(schema);
-      formEditor = result.formEditor;
-    });
-
-    const palette = formEditor.get('palette');
-    const eventBus = formEditor.get('eventBus');
-
-    // when
-    await act(() => {
-      return palette.attachTo(node);
-    });
-
-    // then
-    expect(domQuery('.fjs-palette', paletteContainer)).to.exist;
-    expect(domQuery('.fjs-palette', node)).to.not.exist;
-
-    // when
-    await act(() => {
-      eventBus.fire('palette.section.rendered');
-    });
-
-    // then
-    expect(domQuery('.fjs-palette', paletteContainer)).to.not.exist;
-    expect(domQuery('.fjs-palette', node)).to.exist;
-
-    // cleanup
-    document.body.removeChild(node);
-  });
-
-
   it('should detach', async function() {
 
     // given