Skip to content

feat(contexts): edit the menu when creating an application - #23

Open
remko48 wants to merge 9 commits into
stack/m3-menu-nestingfrom
stack/m4-menu-editor
Open

remko48 wants to merge 9 commits into
stack/m3-menu-nestingfrom
stack/m4-menu-editor

Conversation

@remko48

@remko48 remko48 commented Oct 12, 2026 •

Copy link
Copy Markdown
Member

The create application dialog gets a menu editor, so an application can be created with its menu in one go.

What changes

  • MenuItemsEditor: an ordered list of menu items. Each item has an icon, a label and what it opens: a view, a page with widgets, a table or an external link. Only tables and views the user can manage are offered, since the server adds them to the application as resources. Picking a view or table fills in an empty label.
  • Ordering and nesting: entries can be dragged by their handle, and every entry has move up/down buttons plus an indent button (top-level entries) or an outdent button (child entries), so the menu can be arranged with the keyboard. A parent moves together with its children; an entry with children cannot be indented; removing a parent moves its children to the top level instead of deleting them.
  • Validation: the editor checks every entry with the same rules as the server (label, target, http/https link). Errors show once a row is left, and all of them on submit; an invalid menu blocks creating the application.
  • ApplicationIcon: shows a material icon by name, used for the menu item icons.
  • menuItems.js: the list operations of the editor, and turning its list into the API payload, including parentIndex for nested items.
  • CreateContext: sends the menu with the new application.
  • Deleting an application (existing behaviour on main, not caused by this stack): the delete removes the application first, inside a transaction that is retried, so it holds the write lock before it reads. On SQLite a delete that read first failed at once when another request wrote meanwhile.
  • Tests: a Cypress component test covers the list operations, and a unit test covers the delete order.

Page target

The create dialog shows the dashboard item first. You can rename it and give it an icon, but you cannot remove it, move it, nest it or point it elsewhere, and no item can go above it, by button or by drag. It is sent as {targetType: 'page', targetId: null, technicalName: 'dashboard', label}, and the server resolves it to the new start page. A page item from the API passes through menuItems.js unchanged, without a validation error.

Tests:

  • npm run test:component -- --spec cypress/component/menuItems.cy.js: 12 passing.
  • New playwright/e2e/context-menu.spec.ts: creates an application in the UI and checks that the dashboard item comes first and is fixed, that the saved menu is Dashboard -> page <start page id> then the link, and that the application opens on its start page. 1 passed.
  • context.spec.ts and context-navigation.spec.ts: 8 passed. One test needs the CI timeout of 120 s on the local instance.

The menu is not shown in the UI yet, so the check opens the start page by route. Prepared in the Conduction fork for porting upstream by @remko48. Prepared with Claude Code.

🖼️ Screenshots

🏚️ Before 🏡 After
|

🏁 Checklist

  • ⛑️ Tests (unit and/or integration) are included or not needed
  • 🔙 Backport requests are created or not needed: /backport to stableX.X
  • 📅 Milestone is set
  • 🌸 PR title is meaningful (if it should be in the changelog: is it meaningful to users?)

🤖 AI (if applicable)

  • The content of this PR was partly or fully generated using AI

The create dialog gets a menu editor. Every entry opens a view, a table or
an external link, can carry an icon and can sit under the top-level entry
above it, one level deep.

- entries are reordered by dragging or with move buttons, and moved in and
  out of a parent with indent buttons, so the menu can be arranged with
  the keyboard
- a parent moves together with its children; removing a parent moves its
  children to the top level

Co-authored-by: Ruben van der Linde <ruben@conduction.nl>
Assisted-by: ClaudeCode:claude-opus-5-5
Signed-off-by: Remko <remko@conduction.nl>
@remko48
remko48 added this pull request to stack #24 October 12, 2026 11:39
@remko48 remko48 closed this Oct 13, 2026
@remko48 remko48 reopened this Oct 13, 2026
@github-actions github-actions Bot added the AI assisted This PR contains AI-assisted commits label Oct 13, 2026
Comment thread src/shared/components/ncContextResource/MenuItemsEditor.vue
Comment thread src/shared/components/ncContextResource/MenuItemsEditor.vue Outdated
Comment thread src/shared/utils/menuItems.js
Comment thread src/shared/components/ncContextResource/MenuItemsEditor.vue Outdated
Comment thread src/shared/components/ncContextResource/MenuItemsEditor.vue Outdated
Comment thread src/shared/components/ncContextResource/MenuItemsEditor.vue Outdated
Comment thread src/shared/components/ApplicationIcon.vue
Comment thread src/shared/components/ncContextResource/MenuItemsEditor.vue Outdated
- the menu only offers tables and views the user can manage, like the resource picker
- rows with a missing label, target or a bad link are marked, and creating waits until all are valid
- the list operations are pure functions in utils/menuItems.js, covered by a component spec
- option labels are translated as one string, and the label is taken from the option's title
- only the handle starts a drag, so text in the fields stays selectable
- buttons and rows name their item for screen readers
- a slower icon load no longer replaces a newer one
- no CSS fallbacks, capitalised comments and JSDoc on every method

Assisted-by: ClaudeCode:claude-opus-5-5
Signed-off-by: Remko <remko@conduction.nl>
Comment thread src/shared/components/ncContextResource/MenuItemsEditor.vue Outdated
Comment thread src/shared/components/ncContextResource/MenuItemsEditor.vue Outdated
Comment thread src/shared/components/ncContextResource/MenuItemsEditor.vue Outdated
remko48 and others added 6 commits October 13, 2026 15:29
- a new menu item no longer starts red: a row shows its errors once a field of it was left
- the target error goes through the select's own helper text, so screen readers announce it
- releasing the drag handle anywhere, or a cancelled pointer, makes the row plain again

Assisted-by: ClaudeCode:claude-opus-5-5
Signed-off-by: Remko <remko@conduction.nl>
- deleting an application retries on a retryable database error and removes the application
  row first, so on SQLite the transaction holds the write lock before it reads and no longer
  fails when another request writes meanwhile
- Create application stays enabled: submitting shows every menu error and stops while the menu
  is invalid
- the target error is shown in the error style, like the label and link errors

Assisted-by: ClaudeCode:claude-opus-5-5
Signed-off-by: Remko <remko@conduction.nl>
A new application's menu starts with a "Dashboard" item for its start
page. It can be renamed and given an icon, but not removed, moved or
pointed elsewhere, and no item can be placed above it. It is sent as a
page item without an id, which the server resolves to the new start page.
A page item from the server passes through the editor as it is.

Assisted-by: ClaudeCode:claude-opus-5-5
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

AI assisted This PR contains AI-assisted commits

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants