>>> [!note] Migrated issue <!-- Drupal.org comment --> <!-- Migrated from issue #3588495. --> Reported by: [jurgenhaas](https://www.drupal.org/user/168924) Related to !80 >>> <h3>Problem/Motivation</h3> <p>The modeler UI's <code>validateBeforeSave()</code> in <code>ui/src/components/Flow.tsx</code> already mirrors the cardinality rules supplied by the model owner via <code>drupalSettings.modeler_api.model_constraints</code>, so users get fast feedback before the save round-trip.</p> <p>The related <code>modeler_api</code> issue introduces a new opt-in flag on <code>CardinalityConstraint.successors.requireConditionWhenParallel</code>. When a model owner (for example ECA) sets the flag to <code>true</code> for a given source component type, multiple successors between the same source and target are only valid when every one of them carries a condition.</p> <p>The modeler UI must mirror this rule client-side so the user sees the same error before the save attempt that the server would reject.</p> <p>This issue is the UI counterpart to the <code>modeler_api</code> issue and a follow-up to <a href="https://www.drupal.org/project/modeler/issues/3586864">#3586864</a> (parallel-edge routing).</p> <h3>Proposed resolution</h3> <p>Extend the <code>CardinalityConstraint</code> TypeScript type and the <code>validateBeforeSave()</code> implementation in <code>Flow.tsx</code> to honor the new flag.</p> <h4>TypeScript type addition</h4> <pre><pre>// ui/src/types/settings.ts<br>export interface CardinalityRange {<br>&nbsp; min?: number;<br>&nbsp; max?: number;<br>}<br><br>export interface SuccessorCardinality extends CardinalityRange {<br>&nbsp; /** When true, parallel successors (same source and target) must all<br>&nbsp;&nbsp; *&nbsp; carry a condition. Opt-in per source component type. */<br>&nbsp; requireConditionWhenParallel?: boolean;<br>}<br><br>export interface CardinalityConstraint extends CardinalityRange {<br>&nbsp; successors?: SuccessorCardinality;<br>}</pre></pre><h4>Validation logic</h4> <p>For every component type whose <code>successors.requireConditionWhenParallel</code> flag is <code>true</code>, iterate over each node of that type and group its outgoing edges by target id. For every group of size &gt; 1, verify each edge in the group carries a condition (use <code>getEdgeType()</code> from <code>ui/src/utils/edgeTypeUtils.ts</code>). Add a translated error to the list when a group violates the rule.</p> <h4>Optional live feedback</h4> <p>To improve UX, surface the violation the moment a duplicate unconditional edge is created &mdash; e.g. as a non-blocking warning in the property panel or in the edge's selection state. This is optional; the blocking pre-save check is the primary deliverable.</p> <h3>Implementation outline</h3> <ol> <li>Extend the TypeScript types in <code>ui/src/types/settings.ts</code> to carry the new flag.</li> <li>Add the validation branch to <code>validateBeforeSave()</code> in <code>ui/src/components/Flow.tsx</code>, behind a check for the flag.</li> <li>Add unit tests for: flag absent (no extra check), flag true with all-conditional parallel edges (allowed), flag true with any unconditional edge in a parallel group (blocked), single-edge case unaffected.</li> <li>Add an E2E test that asserts save is blocked when the flag is on and a violating model is constructed via the plugin API.</li> <li>Optionally implement the live warning affordance.</li> </ol> <h3>Remaining tasks</h3> <ul> <li>Update <code>CardinalityConstraint</code> / <code>SuccessorCardinality</code> TypeScript types.</li> <li>Extend <code>validateBeforeSave()</code> with the new check.</li> <li>Unit + E2E tests.</li> <li>Optional live-feedback affordance.</li> </ul> <h3>User interface changes</h3> <p>When the model owner opts in and the user constructs a model with two-or-more edges between the same source and target where any of them lacks a condition, save is blocked with a translated error naming the offending source and target. Optionally, the same warning may appear inline as soon as the violation is created.</p> <h3>API changes</h3> <ul> <li>The TypeScript <code>CardinalityConstraint</code> type gains an optional <code>successors.requireConditionWhenParallel</code> boolean. The flag is forwarded transparently from <code>drupalSettings.modeler_api.model_constraints</code>.</li> </ul> <h3>Data model changes</h3> <p>None.</p> <h3>Related issues</h3> <ul> <li>Constraint definition (server side): <em>(link to modeler_api issue once filed)</em></li> <li>ECA opt-in: <em>(link to ECA issue once filed)</em></li> <li>Originating context: <a href="https://www.drupal.org/project/modeler/issues/3586864">modeler #3586864</a></li> </ul> > Related issue: [Issue #3588494](https://www.drupal.org/node/3588494)