Add content marker for (normal) groups

[pinussilvestrus]

Is your feature request related to a problem? Please describe

With the new properties panel, it should be easier to discover which groups are containing data and which not.

As a general rule of thumb, when creating a new element, all groups shall be not marked as dirty (except for the general group, because the id is always filled).

We would like to indicate the dirty state via a visual representation (like we have it for the badge count). The "bold" / "greyed out" state should be gone.

We consider following states as "dirty" (tbd):

• TextField => value !== empty
• TextArea => value !== empty
• Checkbox => checked != false
• Toggle Switch => checked != false
• Select => value !== empty
• Propagate all child => checked != false

Describe the solution you'd like

Mark groups as "empty" when there is nothing configured.

Describe alternatives you've considered

/

Additional context

With https://github.com/bpmn-io/properties-panel-next/pull/19 we already introduce data markers for lists (count badges). Child of https://github.com/bpmn-io/internal-docs/issues/256 Zeplin: https://app.zeplin.io/project/5e149dc7ef8eaa51b52af327/dashboard?seid=60d2feb861f9d712892eb17e

[andreasgeier]

@pinussilvestrus or whoever will work on this – pls get in touch with me before you start with this topic since the latest feedback indicates that the greyed-out style is not the preferred visual solution.

[pinussilvestrus]

Simple code snippet to indicate whether a group has filled entries or not

// properties-panel/components/Group.js

const [ empty, setEmpty ] = useState(false);

// set dirty state depending on all entries
useEffect(() => {
  const filledEntries = entries.filter(entry =>{
    const {
      id,
      isDirty
    } = entry;

    const entryNode = domQuery(`[data-entry-id="${id}"]`);

    if (!isFunction(isDirty) || !entryNode) {
      return false;
    }

    const inputNode = domQuery('.bio-properties-panel-input', entryNode);

    return isDirty(inputNode);
  });

  setDirty(!!filledEntries.length);
}, [ entries ]);

Question: when are checkboxes, select, radios marked as "not configured"? Is there a general rule?

[andreasgeier]

Find the design issue here: https://github.com/camunda/camunda-modeler-design/issues/22

[pinussilvestrus]

Group title attribute (including data markers, proposal)

normal group - empty

normal group - has data

lists - empty

lists - has items

[andreasgeier]

Proposal for titles:

Sections without changes: just the title like Documentation Section with changes: General (edited) Empty Lists: just the title like Input Lists with content: Output (2 items)

[andreasgeier]

Note: We have to consider the interplay with the split concept. Meaning, as an edge case, a set of properties could be dirty in execution mode, but untouched in design mode (because only an execution property was added). If this is not yet part of the solution, we can postpone until we actually implement the design provider, but should keep it in mind.