Add conditional rendering

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

@@ -12,6 +12,7 @@ import { PropertiesPanelHeaderProvider } from './PropertiesPanelHeaderProvider';
 import { PropertiesPanelPlaceholderProvider } from './PropertiesPanelPlaceholderProvider';
 
 import {
+  ConditionGroup,
   CustomValuesGroup,
   GeneralGroup,
   ValidationGroup,
@@ -26,6 +27,7 @@ function getGroups(field, editField) {
 
   const groups = [
     GeneralGroup(field, editField),
+    ConditionGroup(field, editField),
     ...ValuesGroups(field, editField),
     ValidationGroup(field, editField),
     CustomValuesGroup(field, editField)

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

@@ -0,0 +1,69 @@
+import { useMemo } from 'preact/hooks';
+import { FeelEntry, isFeelEntryEdited } from '@bpmn-io/properties-panel';
+import { get } from 'min-dash';
+
+import {
+  useService,
+  useVariables
+} from '../hooks';
+
+
+export function ConditionEntry(props) {
+  const {
+    editField,
+    field
+  } = props;
+
+  return [
+    {
+      id: 'conditional-hide',
+      component: Condition,
+      editField: editField,
+      field: field,
+      isEdited: isFeelEntryEdited
+    }
+  ];
+}
+
+
+function Condition(props) {
+  const {
+    editField,
+    field,
+    id
+  } = props;
+
+  const debounce = useService('debounce');
+
+  const variablesList = useVariables();
+
+  // keep stable reference until https://github.com/bpmn-io/properties-panel/issues/196 is fixed
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const variables = useMemo(() => variablesList.map(name => ({ name })), variablesList);
+
+  const path = [ 'conditional', 'hide' ];
+
+  const getValue = () => {
+    return get(field, path, '');
+  };
+
+  const setValue = (value) => {
+    if (!value) {
+      return editField(field, 'conditional', undefined);
+    }
+
+    return editField(field, 'conditional', { hide: value });
+  };
+
+  return FeelEntry({
+    debounce,
+    description: 'Condition under which the field is hidden',
+    element: field,
+    feel: 'required',
+    getValue,
+    id,
+    label: 'Hide if',
+    setValue,
+    variables
+  });
+}

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

@@ -11,4 +11,5 @@ export { default as ValueEntry } from './ValueEntry';
 export { default as CustomValueEntry } from './CustomValueEntry';
 export { default as ValuesSourceSelectEntry } from './ValuesSourceSelectEntry';
 export { default as InputKeyValuesSourceEntry } from './InputKeyValuesSourceEntry';
-export { default as StaticValuesSourceEntry } from './StaticValuesSourceEntry';
+export { default as StaticValuesSourceEntry } from './StaticValuesSourceEntry';
+export { ConditionEntry } from './ConditionEntry';

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

@@ -0,0 +1,23 @@
+import {
+  ConditionEntry
+} from '../entries';
+
+
+export function ConditionGroup(field, editField) {
+
+  const { type } = field;
+
+  if (type === 'default') {
+    return null;
+  }
+
+  const entries = [
+    ...ConditionEntry({ field, editField })
+  ];
+
+  return {
+    id: 'condition',
+    label: 'Condition',
+    entries
+  };
+}

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

@@ -1,4 +1,5 @@
 export { default as GeneralGroup } from './GeneralGroup';
 export { default as ValidationGroup } from './ValidationGroup';
 export { default as ValuesGroups } from './ValuesGroups';
-export { default as CustomValuesGroup } from './CustomValuesGroup';
+export { default as CustomValuesGroup } from './CustomValuesGroup';
+export { ConditionGroup } from './ConditionGroup';

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

@@ -1 +1,2 @@
-export { default as useService } from './usePropertiesPanelService';
+export { default as useService } from './usePropertiesPanelService';
+export { useVariables } from './useVariables';

packages/form-js-editor/src/features/properties-panel/hooks/useVariables.js

@@ -0,0 +1,14 @@
+import { getSchemaVariables } from '@bpmn-io/form-js-viewer';
+import useService from './usePropertiesPanelService';
+
+/**
+ * Retrieve list of variables from the form schema.
+ *
+ * @returns { string[] } list of variables used in form schema
+ */
+export function useVariables() {
+  const form = useService('formEditor');
+  const schema = form.getSchema();
+
+  return getSchemaVariables(schema);
+}

packages/form-js-editor/src/render/hooks/index.js

@@ -1,3 +1,3 @@
 export { default as useService } from './useService';
 export { default as usePrevious } from './usePrevious';
-export { default as useDebounce } from './useDebounce';
+export { default as useDebounce } from './useDebounce';

packages/form-js-editor/test/spec/features/properties-panel/PropertiesPanel.spec.js

@@ -56,7 +56,7 @@ describe('properties panel', function() {
   it('should render (no field)', async function() {
 
     // given
-    const result = createPropertiesPanel({ container });
+    const result = createPropertiesPanel({ container, schema: null });
 
     // then
     const placeholder = result.container.querySelector('.bio-properties-panel-placeholder');
@@ -103,7 +103,7 @@ describe('properties panel', function() {
     expect(result.container.querySelector('.fjs-properties-panel-placeholder')).not.to.exist;
 
     expect(result.container.querySelector('.bio-properties-panel-header-type')).to.exist;
-    expect(result.container.querySelectorAll('.bio-properties-panel-group')).to.have.length(3);
+    expect(result.container.querySelector('.bio-properties-panel-group')).to.exist;
   });
 
 
@@ -2072,7 +2072,7 @@ function createPropertiesPanel(options = {}) {
 
   if (!formEditor) {
     formEditor = new formEditorMock({
-      state: { schema: (options.schema !== 'undefined' ? options.schema : schema) }
+      state: { schema: options.schema !== undefined ? options.schema : schema }
     });
   }