fix(sidebar): render the manifest page's sidebar alongside our own - #3103
Merged
rubenvdlinde merged 2 commits intoAug 30, 2026
Conversation
This app fills CnAppRoot's `#sidebar` slot, and Vue only renders a slot's fallback when the slot is ABSENT. So filling it suppressed `pages[].sidebarComponent` silently: no warning, no error, no sidebar. The ADR-110 flow sidebar was declared in the manifest, registered in registry.js and present in the bundle, and still never rendered. Nine apps in the fleet fill this slot and all nine were affected. The five that do not fill it rendered the flow sidebar correctly, which is what identified the cause. CnAppRoot now passes the resolved component to the slot (nextcloud-vue#857), so this renders both: our own rail, and whatever the routed manifest page asks for. Verified: npm run build exits 0.
…bar slot prop 2.24.3 is the release that passes the resolved `pages[].sidebarComponent` into CnAppRoot's `#sidebar` slot. Without it the App.vue change in this branch is a no-op, because the slot prop it reads does not exist yet. Verified on filinq in the browser against the dev instance: the flow rail (Flow, Steps, Runs, Version, Publish, the trigger list) now renders next to the canvas, and the app's own sidebar still mounts alongside it.
Contributor
Quality Report — ConductionNL/openregister @
|
| Check | PHP | Vue | Security | License | Tests |
|---|---|---|---|---|---|
| lint | ✅ | ||||
| phpcs | ✅ | ||||
| phpmd | ✅ | ||||
| psalm | ✅ | ||||
| phpstan | ✅ | ||||
| phpmetrics | ✅ | ||||
| eslint | ✅ | ||||
| stylelint | ✅ | ||||
| build | ✅ | ||||
| check-specs | ✅ | ||||
| test-l10n | ✅ | ||||
| test-l10n-parity | ✅ | ||||
| format | ❌ | ||||
| check-schema-l10n | ✅ | ||||
| check-l10n-js | ✅ | ||||
| composer | ✅ | ✅ 174/174 | |||
| npm | ✅ | ✅ 547/547 | |||
| app:check-code | ⏭️ | ||||
| info.xml | ✅ | ||||
| REUSE | ❌ | ||||
| PHPUnit | ✅ | ||||
| Newman | ✅ | ||||
| Playwright | 🚨 NO VERDICT — enabled but never ran | ||||
| Hydra gates | ✅ |
Quality workflow — 2026-08-30 11:45 UTC
Download the full PDF report from the workflow artifacts.
rubenvdlinde
added a commit
that referenced
this pull request
Aug 30, 2026
E2E went red on development with
strict mode violation: locator('.cn-flow-sidebar') resolved to 2 elements
Error: the flow sidebar did not render — the controls are unreachable again
#3103 fixed the real problem: CnAppRoot only offered the manifest's
`sidebarComponent` as the DEFAULT content of its #sidebar slot, and this
app fills that slot, so the manifest key was live config that rendered
nothing. #3103 passes the component through as a slot prop instead, so
App.vue can render it.
What it did not do is remove the workaround that existed BECAUSE the
manifest key rendered nothing — a hardcoded <FlowDetailSidebar> in
SideBars.vue, whose own comment explains it was there for exactly that
reason. With the manifest route working, both rendered.
So this deletes the workaround, not the fix. The manifest is now the
single source of truth for a page's sidebar, and the comment left behind
says so, because adding a route here for a page that declares
`sidebarComponent` will duplicate it again.
The unused import and components entry go with it — a registration left
behind after its template use is removed is the next reader's puzzle.
src/App.vue is Prettier-formatted here too; the same one-file fix is in
#3107, and whichever lands first makes the other a no-op.
Verified: eslint exits 0, webpack build compiles, npm run format exits 0.
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
1 participant
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.
What broke
pages[].sidebarComponentnever rendered in this app. The manifest declared it,registry.jsregistered the component, and it was present in the bundle. Nothing warned, nothing errored, and no sidebar appeared.The cause is a slot mechanic.
CnAppRootrenders the resolved component as the#sidebarslot's fallback, and Vue only uses a fallback when the slot is absent. This app fills that slot with its own rail, so it silently suppressed the manifest's sidebar.Nine fleet apps fill the slot and all nine lost their ADR-110 flow sidebar. The five that do not fill it rendered it correctly the whole time, which is what identified the cause rather than guesswork.
Why the app could not fix this alone
Slot content compiles in the parent's scope, and
injectresolves up the component chain. An app shell mountingCnAppRootcannot reach the holderCnPageRendererprovides beneath it. Conditionally dropping the slot does not help either, since the fallback only returns when the slot is absent entirely.So the fix went into the library first: nextcloud-vue#857 passes the resolved component to the slot, released as 2.24.3.
What this does
@conduction/nextcloud-vueto^2.24.3#sidebarslot: this app's own rail, and whatever the routed manifest page declaresVerified
npm ciandnpm run buildexit 0. Confirmed in a browser against the dev instance on filinq:/apps/filinq/flows/<id>renders the flow rail (Flow, Steps, Runs, Version, Publish, trigger list) beside the canvas, with the app's own sidebar still mounting.