feat(frontend): open config modal automatically when a node is added - #20
Merged
Conversation
Previously, adding a node via the "+" button or node picker left it unconfigured on the canvas until the user clicked it again. Now onPickNodeType() selects the freshly-created node right after pushing it, so NodeDetailsPanel opens immediately. Adds the repo's first component-mount test (WorkflowBuilder.spec.ts), stubbing @vue-flow/core's canvas pieces and mocking @ownclouders/web-pkg, to prove the picker-to-modal flow end-to-end. Signed-off-by: Lukas Hirt <info@hirt.cz>
build-workflow.spec.ts, event-trigger.spec.ts, and run-workflow.spec.ts were written for the old flow where adding a node left its config panel closed until explicitly clicked. Now that panel opens automatically as soon as a node is added, those redundant "click the node to open its panel" steps hit the already-open overlay instead (pointer-event interception / click timeouts in CI). Removes the now-redundant clicks and adds explicit "Close" clicks before any step that needs an unobstructed canvas (e.g. clicking another node's "+" handle, renaming the workflow), matching the new auto-open reality. Signed-off-by: Lukas Hirt <info@hirt.cz>
mzner
approved these changes
Jul 24, 2026
LukasHirt
added a commit
that referenced
this pull request
Jul 27, 2026
… e2e specs PR #20 made adding a node auto-open its config overlay, which covers the canvas and intercepts clicks meant for buttons underneath it. Most specs already closed the panel after adding a node, but automation.spec.ts and add-node-button-alignment.spec.ts never did, so their locator clicks timed out waiting for the overlay to get out of the way. Also fixes two flakes surfaced while stabilizing these: the alignment spec measured node bounding boxes before WorkflowBuilder's 50ms-delayed fitView call had settled, and the automation spec could race the workflow list's async load, causing automatedWorkflowCount to read 0 and skip the disconnect confirmation step.
LukasHirt
added a commit
that referenced
this pull request
Jul 27, 2026
* fix(frontend): mock useMessages in WorkflowBuilder unit test WorkflowBuilder.vue calls useAutomationConnect(), which calls useMessages() from @ownclouders/web-pkg at setup time. The test's mock of that module didn't include useMessages, so mounting the component threw and failed CI. Signed-off-by: Lukas Hirt <info@hirt.cz> * fix(frontend): close auto-opened node panel before clicking canvas in e2e specs PR #20 made adding a node auto-open its config overlay, which covers the canvas and intercepts clicks meant for buttons underneath it. Most specs already closed the panel after adding a node, but automation.spec.ts and add-node-button-alignment.spec.ts never did, so their locator clicks timed out waiting for the overlay to get out of the way. Also fixes two flakes surfaced while stabilizing these: the alignment spec measured node bounding boxes before WorkflowBuilder's 50ms-delayed fitView call had settled, and the automation spec could race the workflow list's async load, causing automatedWorkflowCount to read 0 and skip the disconnect confirmation step. --------- Signed-off-by: Lukas Hirt <info@hirt.cz>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
Adding a node to the workflow canvas (via the "+" button or the node picker) left it sitting there unconfigured — the config modal (
NodeDetailsPanel) only opened if the user clicked the node afterward. For a freshly-created node this extra click is pure friction: you always want to configure a node right after adding it.Fix
onPickNodeType()infrontend/src/views/WorkflowBuilder.vuealready builds the new node and pushes it intonodes.value/addNodes(). This adds one line at the end of that handler:selectedNodeId.value = node.id, which is the same refNodeDetailsPanel'sv-if="selectedNode"already reacts to (previously only set from a node's@configureemit). No changes toNodeDetailsPanel.vue, node placement/positioning, categorization, or the "+" button.Test plan
This repo had no component-mount tests yet, only plain data/composable specs. Added
frontend/tests/unit/WorkflowBuilder.spec.ts, mountingWorkflowBuilder.vuewith@vue/test-utils:@ownclouders/web-pkg'suseRoute/useAuthStore(no host router/store in a unit test).@vue-flow/core'sVueFlow(andBackground/Controls/MiniMap) since the canvas itself isn't relevant to this behavior and isn't meaningfully renderable under happy-dom — everything exercised here (empty-state button, node picker, details panel) lives outside<VueFlow>in the template.[role="dialog"]witharia-label="Manual Trigger") is present immediately, with no further interaction.Confirmed TDD flow: wrote the test first, watched it fail (
expected false to be true— no dialog present after picking a node type) against the unmodified component, then added the one-line fix and watched it pass.Ran locally:
pnpm run test:unit— 3 test files / 5 tests passing (including the two pre-existing specs).pnpm run check:types— no errors.pnpm run lint— no errors.