plane icon indicating copy to clipboard operation
plane copied to clipboard
Published 14 hours ago • verified publisher icon makeplane

[WEB-5782]chore: migrated modals to @plane/ui

Open vamsikrishnamathala opened this issue 1 week ago • 2 comments

Description

This update migrates all modals to @plane/ui from headless ui.

Type of Change

  • [ ] Bug fix (non-breaking change which fixes an issue)
  • [ ] Feature (non-breaking change which adds functionality)
  • [x] Improvement (change that would cause existing functionality to not work as expected)
  • [ ] Code refactoring
  • [ ] Performance improvements
  • [ ] Documentation update

Screenshots and Media (if applicable)

Test Scenarios

References

[!NOTE] Replaces Headless UI Dialog-based modals with @plane/ui ModalCore across the app and makes small behavioral cleanups (early returns, close handlers, minor tweaks).

  • UI Refactor — migrate to @plane/ui

    • Replace Headless UI Dialog/Transition wrappers with ModalCore (+ EModalPosition, EModalWidth) in modals such as:
      • account/deactivate-account-modal.tsx, automation/select-month-modal.tsx, core/filters/date-filter-modal.tsx
      • core/modals/* (bulk delete, change email, existing issues list, user/workspace image upload)
      • cycles/* (archive, transfer issues)
      • exporter/export-modal.tsx, inbox/modals/* (select duplicate, snooze)
      • integration/delete-import-modal.tsx
      • issues/* (archive issue, confirm discard, parent issues list)
      • modules/archived-modules/modal.tsx
      • project/* (member remove, delete, join, leave, invite members; project archive/restore)
    • Remove unused React/Headless UI imports; preserve Combobox where used.

  • Behavioral tweaks

    • Add early return after success handlers (e.g., account/cycle/module/project actions) and standardize handleClose usage.
    • Reset transient state (e.g., search query) on close in some modals; await async join flow.
    • Minor copy/props adjustments (consistent sizes/positions) without altering core logic.

Written by Cursor Bugbot for commit cc7c1413028c408bf4715b4dd438e4645234bbb6. This will update automatically on new commits. Configure here.

Summary by CodeRabbit

  • Refactor

    • Consolidated many dialogs to a unified modal component for a more consistent look-and-feel and simplified UI layout.

  • Bug Fixes

    • Added early-exit handling in several confirmation flows to prevent unintended follow-up actions and improve reliability.

  • UX

    • Preserved existing form controls and behaviors while improving modal footer/button placement and overall spacing.

✏️ Tip: You can customize this high-level summary in your review settings.

vamsikrishnamathala avatar Dec 22 '25 14:12 vamsikrishnamathala

Linked to Plane Work Item(s)

This comment was auto-generated by Plane

makeplane[bot] avatar Dec 22 '25 14:12 makeplane[bot]

[!NOTE]

Other AI code review bot(s) detected

CodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review.

Walkthrough

This PR migrates ~25 modal components from Headless UI Dialog/Transition implementations to a unified ModalCore-based modal system, replacing nested Transition/Dialog wrappers with ModalCore (position and width enums) while preserving internal content, logic, validation, and public component signatures.

Changes

Cohort / File(s) Summary
Account & Authentication
apps/web/core/components/account/deactivate-account-modal.tsx		 Replaced Headless UI Dialog/Transition with ModalCore; preserved content, handlers, and error/toast flows; moved action buttons into modal footer; added an early return after successful delete chain.
Automation
apps/web/core/components/automation/select-month-modal.tsx		 Migrated to ModalCore; kept form structure and validation for auto-close/auto-archive types; relocated action buttons to modal footer.
Core Filters & Modals
apps/web/core/components/core/filters/date-filter-modal.tsx, apps/web/core/components/core/modals/bulk-delete-issues-modal.tsx, apps/web/core/components/core/modals/change-email-modal.tsx, apps/web/core/components/core/modals/existing-issues-list-modal.tsx, apps/web/core/components/core/modals/user-image-upload-modal.tsx, apps/web/core/components/core/modals/workspace-image-upload-modal.tsx		 Systematic conversion to ModalCore; preserved forms, Combobox logic, drag-and-drop upload flows, validation, and selection behaviors; existing-issues-list received UI restructuring (workspace toggle, IssueIdentifier chips, per-item links).
Cycle Management
apps/web/core/components/cycles/archived-cycles/modal.tsx, apps/web/core/components/cycles/transfer-issues-modal.tsx		 Replaced Dialog/Transition with ModalCore (center/XXL/top positions); preserved archive/transfer flows, loading states, and handlers; added early returns after successful navigation where present.
Export & Inbox
apps/web/core/components/exporter/export-modal.tsx, apps/web/core/components/inbox/modals/select-duplicate.tsx, apps/web/core/components/inbox/modals/snooze-issue-modal.tsx		 Migrated to ModalCore; preserved CustomSearchSelect, Calendar, Combobox search, debounced search and selection flows; handleClose adaptations to reset query where applicable.
Integration
apps/web/core/components/integration/delete-import-modal.tsx		 Replaced Dialog/Transition with ModalCore; preserved optimistic mutate, deletion workflow, error handling, and toast behavior.
Issues
apps/web/core/components/issues/archive-issue-modal.tsx, apps/web/core/components/issues/confirm-issue-discard.tsx, apps/web/core/components/issues/parent-issues-list-modal.tsx		 Converted to ModalCore; maintained archive/discard flows and Combobox-based parent selection with debounced search; parent list now uses flattened Combobox.Options and per-item Rocket links.
Modules
apps/web/core/components/modules/archived-modules/modal.tsx		 Replaced Dialog/Transition with ModalCore; preserved archive flow, state handling, and navigation.
Project Management
apps/web/core/components/project/confirm-project-member-remove.tsx, apps/web/core/components/project/delete-project-modal.tsx, apps/web/core/components/project/join-project-modal.tsx, apps/web/core/components/project/leave-project-modal.tsx, apps/web/core/components/project/send-project-invitation-modal.tsx, apps/web/core/components/project/settings/archive-project/archive-restore-modal.tsx		 Systematic migration to ModalCore; preserved forms, member selection, validation, and async handlers (join-project changed to async/await); action buttons moved to modal footers; public APIs unchanged.
Workspace Notifications
apps/web/core/components/workspace-notifications/sidebar/notification-card/options/snooze/modal.tsx		 Replaced Headless UI with ModalCore; reworked snooze UI into responsive two-column layout with DateDropdown, CustomSelect time picker, AM/PM toggle segments, and preserved validation/submission flow.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

  • Areas needing extra attention:
    • apps/web/core/components/core/modals/existing-issues-list-modal.tsx — substantial UI restructuring (workspace toggle, chips, per-item links, Combobox.Options).
    • apps/web/core/components/project/send-project-invitation-modal.tsx — member row mapping and CustomSearchSelect integration within new layout.
    • apps/web/core/components/issues/parent-issues-list-modal.tsx — Combobox flattening and Rocket link behavior.
    • apps/web/core/components/workspace-notifications/sidebar/notification-card/options/snooze/modal.tsx — two-column date/time UI and AM/PM toggle state handling.
    • apps/web/core/components/core/modals/change-email-modal.tsx — multi-step form progression and validation.

Poem

🐰 I hopped through JSX, swapping Dialogs for Core,
Tidied transitions, and cleaned up the floor.
No nested panels, just one cozy shell—
ModalCore cradles each modal so well.
A carrot of code, refactored with glee. 🥕✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)
Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. You can run @coderabbitai generate docstrings to improve docstring coverage.
✅ Passed checks (2 passed)
Check name Status Explanation
Title check ✅ Passed The PR title '[WEB-5782]chore: migrated modals to @plane/ui' is clear, concise, and accurately summarizes the main change: migrating all modals from Headless UI to @plane/ui.
Description check ✅ Passed The PR description is comprehensive, covering the main migration scope, behavioral tweaks (early returns, state resets), and file locations affected. All major template sections are addressed with sufficient detail.
✨ Finishing touches
  • [ ] 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • [ ] Create PR with unit tests
  • [ ] Post copyable unit tests in a comment
  • [ ] Commit unit tests in branch chore/modal-migration-headless

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

coderabbitai[bot] avatar Dec 22 '25 14:12 coderabbitai[bot]