Skip to content

chore(frappe-ui): migrate gameplan to v1-release input APIs#482

Open
netchampfaris wants to merge 12 commits into
developfrom
chore/frappe-ui-v1-migration
Open

chore(frappe-ui): migrate gameplan to v1-release input APIs#482
netchampfaris wants to merge 12 commits into
developfrom
chore/frappe-ui-v1-migration

Conversation

@netchampfaris
Copy link
Copy Markdown
Contributor

@netchampfaris netchampfaris commented May 16, 2026

Migrates Gameplan to the frappe-ui v1 beta release, adopting the new input/component APIs, and includes a small Pages navigation fix.

frappe-ui v1 input API migration

  • Adopt self-shell labeling on Select/MultiSelect: replace FormControl type=select wrappers with bare <Select label=…> and collapse a manual <label>+<MultiSelect> in InvitePeople.
  • Drop redundant autocomplete="off" on TextInput/FormControl (frappe-ui now defaults to off); keep it on the native <input> inside CommandPalette.
  • TaskDetail: migrate Status/Priority Dropdowns to Select using the new #item-prefix slot; add UserAvatar prefix to assignee Combobox.
  • TaskPriorityIcon: tone down Medium swatch (amber-5 → amber-3).

Upgrade to v1 beta

  • Bump frappe-ui to the published 1.0.0-beta.0 package (npm) and migrate Gameplan onto the beta.
  • Update to latest frappe-ui main and rename dismissabledismissible across usages.

Fix: page creation navigation

  • Creating a page from a space now routes to the space-scoped SpacePage route (with spaceId) instead of the global Page route, so the new page keeps its space context.
  • Make Page's slug prop optional, since that navigation omits the slug (it's back-filled by updateUrlSlug).
  • Harden SpaceHeaderActions by using Teleport's defer prop so the space-header action buttons reliably resolve their teleport target regardless of mount order (replaces a fragile one-shot querySelector guard).
  • Add a Cypress test covering create-page-from-space and return-to-pages-tab.

@cypress
Copy link
Copy Markdown

cypress Bot commented May 16, 2026

gameplan    Run #461

Run Properties:  status check passed Passed #461  •  git commit 1e4669494f ℹ️: Merge f358d00589ba48ecd939a6431b0a8c68aaf2b4f5 into d67fad02279df93c0de0ab97d8bb...
Project gameplan
Branch Review chore/frappe-ui-v1-migration
Run status status check passed Passed #461
Run duration 01m 00s
Commit git commit 1e4669494f ℹ️: Merge f358d00589ba48ecd939a6431b0a8c68aaf2b4f5 into d67fad02279df93c0de0ab97d8bb...
Committer Faris Ansari
View all properties for this run ↗︎

Test results
Tests that failed  Failures 0
Tests that were flaky  Flaky 0
Tests that did not run due to a developer annotating a test with .skip  Pending 0
Tests that did not run due to a failure in a mocha hook  Skipped 0
Tests that passed  Passing 8
⚠️ You've recorded test results over your free plan limit.
Upgrade your plan to view test results.
View all changes introduced in this branch ↗︎

@netchampfaris netchampfaris force-pushed the chore/frappe-ui-v1-migration branch from a7860fa to 842b1e1 Compare May 31, 2026 09:58
netchampfaris and others added 11 commits June 4, 2026 01:55
- Adopt self-shell labeling on Select/MultiSelect: replace
  FormControl type=select wrappers with bare <Select label=…> and
  collapse a manual <label>+<MultiSelect> in InvitePeople.
- Drop redundant autocomplete="off" on TextInput/FormControl
  (frappe-ui now defaults to off); keep it on the native <input>
  inside CommandPalette.
- TaskDetail: migrate Status/Priority Dropdowns to Select using the
  new #item-prefix slot; add UserAvatar prefix to assignee Combobox.
- TaskPriorityIcon: tone down Medium swatch (amber-5 → amber-3).
- Bump frappe-ui submodule to pick up the v1 input + datepicker work.
…sible

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Creating a page from a space now pushes to the SpacePage route with the
spaceId instead of the global Page route, so the new page keeps its space
context. Make Page's slug prop optional since that navigation omits it,
and use Teleport's defer prop so the space header actions reliably resolve
their target regardless of mount order.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Rewrite gameplan's editor layer on the v1 frappe-ui/editor API (one renderless
<TextEditor> + configurable kits), replacing the v0 monolith.

- components/editor/: new shared module — GPEditor.vue (kit-free layout on the
  v1 <TextEditor> via its #default slot; owns editor-class/scroll/menu
  placement, wires uploadFunction, exposes editor, emits change/blur/focus),
  config.ts (mentions/tags via kit.configure with reactive getters, RichQuote
  extensions, frappe uploadFile), toolbars.ts (one self-pruning gameplanToolbar
  + gameplanFloatingToolbar replacing two duplicated textEditorMenuButtons
  arrays).
- TextEditor.vue → RichTextKit, CommentEditor.vue → CommentKit; both keep their
  old prop/slot/emit/expose API so ReadmeEditor / TaskDetail / the comment
  consumers need no changes.
- Page/discussion call-sites use EditorContent / EditorFixedMenu from
  frappe-ui/editor with gameplanToolbar, and drop dead frappe-ui TextEditor
  imports. Page passes suggestions=false (no mention/tag popups, as before).
- vite-helpers: alias the frappe-ui/editor subpath + frappe-ui's internal
  @-aliases for dev-as-source. tailwind: scan frappe-ui/src/molecules so the
  editor's lucide-* icon mask utilities are emitted.
- Remove dead @rich-quote/@rich-quote-click listeners on <GPEditor> in
  CommentEditor (GPEditor emits only change/blur/focus; the functional path is
  richQuoteExtensions) — silences ~100× "Extraneous non-emits" warnings.

Parity verified live; see components/editor/MIGRATION.md for the full checklist
and bundle delta (total app JS 858.3 → 791.6 kB gzip, -7.8%). Depends on the
frappe-ui v1 renderless <TextEditor>; merge only after that lands upstream.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Split the v1 <TextEditor> migration into a kit-free GPEditor base with
thin per-surface wrappers (CommentEditor, PageEditor, TaskDescriptionEditor,
DiscussionEditor) and shared config/toolbar/extension factories. CommentKit
and RichTextKit are imported in separate extension modules so comment-only
routes don't pull in the rich editor bundle.

Removes the old TextEditor.vue/CommentEditor.vue wrappers and the legacy
ProjectDiscussionNew page/route in favor of the unified NewDiscussion flow.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Adopt frappe-ui 1.0.0-beta.2 (which ships Node subpath `imports`, so its
internal modules resolve without any consumer-side aliases) and simplify the
build setup that previously papered over the alias gap.

- package.json: frappe-ui -> ^1.0.0-beta.2; align @tiptap/* to ^3.24.0 with
  `resolutions` pinning core/pm/vue-3 to a single 3.24.0 instance (frappe-ui's
  editor and the app must share one ProseMirror).
- vite.config.ts: drop the frappe-ui alias machinery; static `frappe-ui/vite`
  import — resolution now flows through the package's exports/imports maps.
- vite-helpers.ts: deleted (alias detection / subpath hack no longer needed).
- Local frappe-ui dev via a node_modules symlink instead of Vite aliases, so one
  copy serves Vite, Node, Tailwind and vue-tsc alike:
    * `yarn dev:frappe-ui` (scripts/link-frappe-ui.mjs) links node_modules/
      frappe-ui to a local ../frappe-ui checkout.
    * `yarn dev` (scripts/unlink-frappe-ui.mjs) removes that link if present and
      restores the published package, so switching back is automatic.
  Both use unlinkSync for the symlink case to avoid recursing into the checkout.
- tailwind.config.js: scan frappe-ui's source via a single node_modules glob.
  Tailwind v3 ignores `content` declared in presets, so the consumer must scan
  frappe-ui itself (notably for the editor's string-based lucide-* icons).
- tsconfig.json: override inherited `types` to drop vitest/globals (pulled in
  via frappe-ui's base config); remove the deleted vite-helpers from `include`.
- GPEditor.vue: alias the frappe-ui Editor import to FrappeEditor.
- remove stale editor MIGRATION.md.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Give every gameplan editor (discussion, comment, page) a file-drop target
with an overlay. Wraps the EditorContent inside GPEditor's #editor slot
fallback so the change is contained — GPEditor stays a fragment and the
pointer-events-none overlay never blocks editing. Disabled for read-only
editors.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Render frappe-ui's EditorTableMenu so tables get row/column, header,
merge/split, and delete controls. It self-hides outside tables and
self-prunes when the Table extension isn't loaded, so it's safe in
comment editors too.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
CommentEditor also renders the discussion post body, so tables created in
a discussion now render and edit there (not just in the New Discussion
compose path). Opt in via CommentKit.configure({ table: {} }); the table
toolbar, navigation, and context menu come for free through GPEditor.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@netchampfaris netchampfaris force-pushed the chore/frappe-ui-v1-migration branch from 2e25922 to 878c625 Compare June 3, 2026 20:27
The yarn.lock had frappe-ui frozen at 1.0.0-beta.2, which predates the
EditorDropZone and EditorTableMenu exports used by GPEditor. Locally
this was masked by the dev symlink to the frappe-ui checkout, but CI
installs from the lockfile and failed with MISSING_EXPORT.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant