feat(widgets): add in-place app editing in widget edit modal#5809
feat(widgets): add in-place app editing in widget edit modal#5809ajnart wants to merge 9 commits into
Conversation
Add EmbeddedAppEditForm component that allows editing app properties (name, icon, URL, description) directly from the widget edit modal without navigating to the management pages.
- Add hideButtons/formRef props to AppForm for headless embedding - Add Mantine Tabs to WidgetEditModal for app widgets (permission-gated) - Pass appId from BoardItemMenu to the modal - Add translation keys for tab labels and propagation notice
ajnart
force-pushed
the
feat/inline-app-edit-modal
branch
2 times, most recently
from
6c90572 to
3d1bb2f
Compare
There was a problem hiding this comment.
Pull request overview
Adds in-place editing of an app’s shared properties directly from the dashboard’s “Edit item – App” modal by introducing an embedded app edit form and splitting the modal UI into widget/app tabs (permission-gated).
Changes:
- Add Mantine
Tabsto the widget edit modal to switch between “Edit widget” and “Edit app” for app widgets (only forapp-modify-allusers). - Introduce
EmbeddedAppEditFormthat loads an app by id and renders the sharedAppFormin a headless/embedded mode, submitting updates viaclientApi.app.update. - Extend
AppFormto support external submission (formRef) and an option to hide its internal buttons/form wrapper (hideButtons).
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/widgets/src/modals/widget-edit-modal.tsx | Adds tabbed modal layout and triggers embedded app submission from the widget modal submit flow. |
| packages/widgets/src/modals/embedded-app-edit-form.tsx | New embedded app edit component (fetch + update + notifications) rendered inside the widget edit modal. |
| packages/translation/src/lang/en.json | Adds new translation keys for tab labels and the propagation notice. |
| packages/forms-collection/src/new-app/_form.tsx | Adds imperative handle + headless rendering mode to reuse AppForm in embedded contexts. |
| apps/nextjs/src/components/board/items/item-menu.tsx | Passes appId from app widget options into the edit modal props. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Meierschlumpf
left a comment
Meierschlumpf
left a comment
There was a problem hiding this comment.
Not sure how you guys feel about this, but IMO it's bad UX that the app is saved when we close the modal (see also issue from copilot regarding validation etc.)
IMO it would be best to have an edit button within the app input and open a second modal to edit the app, similar to the existing create modal
| ), | ||
| integrationSupport: "supportedIntegrations" in currentDefinition, | ||
| settings, | ||
| appId: item.kind === "app" ? (item.options.appId as string | undefined) : undefined, |
There was a problem hiding this comment.
How do we deal with bookmarks?
There was a problem hiding this comment.
I haven't thought about this, I guess we don't for now ?
| export const EmbeddedAppEditForm = ({ appId, handleRef }: EmbeddedAppEditFormProps) => { | ||
| const t = useI18n(); | ||
| const appFormRef = useRef<AppFormHandle>(null); | ||
| const { data: app, isPending: isLoadingApp } = clientApi.app.byId.useQuery({ id: appId }); |
There was a problem hiding this comment.
What happens if the app does no longer exist?
There was a problem hiding this comment.
I haven't considered this edge case, in what way do you think we can edit an app that doesn't exist anymore ?
I believe comment is more about error handling, as soon as the form is dirty then the save will trigger when pressing the save button and directly close the modal, so it's bypassing the form validation for the app change. The user could be in a not-authorized app modification state, press save expecting this change to propagate but saving would error silently. I wouldn't want to save any changes without the user pressing save manually either |
Dokploy Preview Deployment
|
Satisfies oxlint no-non-null-assertion by narrowing appId before render.
Invalidate app queries on update so board widgets reflect changes. Sync AppForm with refetched initialValues and reset after submit.
Homarr
Thank you for your contribution. Please ensure that your pull request meets the following pull request:
pnpm build, autofix withpnpm format:fix)devbranchx,y,ior any abbrevation)Summary
Adds the ability to edit app properties (name, icon, URL, description, ping URL) directly from the dashboard's "Edit item - App" modal, removing the need to navigate to
/manage/apps/edit/[id].EmbeddedAppEditFormcomponent that fetches the app by ID and renders the sharedAppFormin headless mode (no buttons, no<form>wrapper)clientApi.app.updateon save, gated byform.isDirty()so untouched apps are never mutatedapp-modify-allScreenshots
Changes
AppForm: addedhideButtonsandformRefprops for external submission controlWidgetEditModal: Mantine Tabs wrapping "Edit widget" / "Edit app" panelsEmbeddedAppEditForm: new component for in-place app editingBoardItemMenu: passesappIdfrom widget options to the modal