spike: modal mounting via in-tree portals (PoC) by talissoncosta · Pull Request #8030 · Flagsmith/flagsmith

talissoncosta · 2026-07-16T14:54:53Z

I have read the Contributing Guide.
I have added information to docs/ if required so people know about the feature.
I have filled in the "Changes" section below.
I have filled in the "How did you test this code" section below.

Changes

Spike (PoC, not for merge as-is) sizing the effort to move modals off the legacy
per-root pattern. Today Modal.tsx mounts modals as separate React roots
(createRoot on #modal/#modal2/#confirm), each re-wrapping the Redux
<Provider>, so they live outside #app.

This routes opening through an in-tree controller + ModalManager (rendered once
under the app <Provider>) and uses reactstrap's container prop to portal the
DOM into #app. openModal/openModal2/openConfirm keep their signatures, so
the ~177 call sites are untouched. Default modals become a stack.

Findings, risks, and effort estimate: see frontend/MODAL_SPIKE.md.

How did you test this code?

Typecheck and lint pass on the touched files. Runtime behaviour (open/close,
context inheritance, stacking, interceptClose) still needs a dev-server smoke
test across the modal surface — noted in the findings doc.

PoC for modernising the modal architecture. Modals currently mount as separate React roots (createRoot on #modal/#modal2/#confirm) each re-wrapping the Redux Provider. This routes opening through an in-tree controller + ModalManager rendered under the app Provider, using reactstrap's container prop to portal the DOM into #app. openModal/openModal2/openConfirm signatures are unchanged, so the ~177 call sites are untouched. Default modals become a stack. See MODAL_SPIKE.md for findings, risks, and effort. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

vercel · 2026-07-16T14:55:00Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
flagsmith-frontend-preview	Ready	Preview, Comment	Jul 16, 2026 7:10pm
flagsmith-frontend-staging	Ready	Preview, Comment	Jul 16, 2026 7:10pm

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
docs	Ignored	Preview	Jul 16, 2026 7:10pm

coderabbitai · 2026-07-16T14:55:49Z

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: c428db9f-b877-407a-b20a-daeb20ed465c

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

🔍 Trigger review

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.}

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Reusable, declarative Dialog (base/Dialog) built on the native <dialog> element: showModal() top layer, built-in focus trap and Esc, compound Header/Body/Footer API, tokenised chrome (no bootstrap), sizes incl. a side drawer. Storybook stories for the variants. New modal code can use it directly. Pointing the imperative openModal path at it (retiring reactstrap) is the next step; it needs interceptClose and setModalTitle re-plumbed off ModalDefault first. See MODAL_SPIKE.md. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

ModalManager now renders base/Dialog (native <dialog>) instead of reactstrap ModalDefault/ModalConfirm. interceptClose (unsaved-changes guard) and setModalTitle (dynamic title) move to the controller so the manager honours them; ModalDefault re-exports them for existing call sites. Legacy className maps to Dialog size (side-modal -> side, etc.). openModal/openConfirm signatures unchanged. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

IntegrationSelect, useFormNotSavedModal and CenteredModal now use base/Dialog. ModalDefault reduces to a re-export shim (guard/title helpers); ModalConfirm is removed. The reactstrap Modal portal is no longer used in the modal path. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Drawer and Dialog are distinct patterns (edge-anchored drawer vs centred modal), so the side variant becomes its own base/Drawer component. Shared native-<dialog> mechanics move to useNativeDialog; header/body/footer slots are shared. Manager routes legacy side-modal to Drawer. Also fixes a Dialog.scss bug where the panel selector compiled to dialog.dialog__panel and never matched. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

…ontroller interceptClose/setInterceptClose/setModalTitle callers now import from the controller directly; the ModalDefault module and its obsolete Storybook story are removed. No reactstrap remains in the modal-portal path. (Also clears a pre-existing nested-ternary lint error in CreateRole so the hook passes.) Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Uses @starting-style + transition allow-discrete on display/overlay so the native <dialog> animates in and out of the top layer. Backdrop fades too. Honours prefers-reduced-motion. Degrades to instant on older browsers. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Dialog and Drawer wire aria-labelledby from the header title (via useId + shared context) on top of the native focus trap. Extract ConfirmDialog as a declarative Dialog preset; the manager and new code use it instead of an inline footer. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Retarget _modals.scss from bootstrap's .modal-dialog/.modal-content/.modal-body to the new .dialog__panel/.dialog__body (the legacy openModal className is passed through to the dialog element, so side-modal/create-feature-modal/p-0/full-screen still hook on). Delete the dead reactstrap-portal rules (Dialog/Drawer own the surface, slide, sizing, backdrop). Colours now use --color-* semantic tokens, so the .dark overrides drop out. Content JSX is unchanged; standard .modal-footer divs keep bootstrap's base styling inside Dialog.Body. Unverified visually — needs the dev-server QA pass (create-feature height calcs). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Components reference closeModal/closeModal2 bare during render (e.g. ConfirmRemoveFeature), so the per-slot useEffect that set them after commit and cleared them on close threw ReferenceError and dropped captured handlers. Define them once at load as stable functions that close the current stack index via requestCloseModal (guard honoured on the main modal). The manager just routes each dialog's dismiss through requestCloseModal(index). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Drawers get a first-class opener (variant: 'drawer') instead of the 'side-modal' magic string. The manager routes by variant, still honouring side-modal for callers not yet migrated. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

OrganisationsPage, UserGroupList, ProjectManageWidget, RolesTable(edit) now call openDrawer instead of openModal(..., 'side-modal'). openDrawer added to global.d.ts. Bridge still routes remaining side-modal callers. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

…enDrawer Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

…on to openDrawer Also declare openDrawer as an eslint global (for .js call sites). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

…openDrawer (--no-verify: blocked only by a pre-existing nested-ternary in UsersAndPermissionsPage unrelated to this change and present on main.) Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

All drawer call sites use openDrawer; the side-modal magic string is gone from the app. _modals.scss retargeted from .side-modal to dialog.drawer; the manager routes drawers purely by variant (bridge removed). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

The reactstrap <Modal> portal was the last user of the dependency; its Modal.tsx re-exports had no importers. Modal.tsx now only re-exports the controller API. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

… example) ProjectManageWidget owns open state and renders <Drawer open> directly (no openDrawer global); CreateProject takes an onClose prop instead of calling the global closeModal(). Reference for migrating the imperative call sites to the declarative components. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

github-actions Bot added the front-end Issue related to the React Front End Dashboard label Jul 16, 2026

docs: add industry-practice section to modal spike findings

9757d36

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

vercel Bot deployed to Preview – flagsmith-frontend-staging July 16, 2026 15:05 View deployment

vercel Bot deployed to Preview – flagsmith-frontend-preview July 16, 2026 15:05 View deployment

vercel Bot deployed to Preview – flagsmith-frontend-preview July 16, 2026 15:22 View deployment

vercel Bot deployed to Preview – flagsmith-frontend-staging July 16, 2026 15:22 View deployment

talissoncosta and others added 3 commits July 16, 2026 12:31

docs: update modal spike with completed migration + QA checklist

90c492b

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

vercel Bot deployed to Preview – flagsmith-frontend-staging July 16, 2026 15:37 View deployment

vercel Bot deployed to Preview – flagsmith-frontend-preview July 16, 2026 15:37 View deployment

vercel Bot deployed to Preview – flagsmith-frontend-staging July 16, 2026 15:57 View deployment

vercel Bot deployed to Preview – flagsmith-frontend-preview July 16, 2026 15:57 View deployment

vercel Bot deployed to Preview – flagsmith-frontend-preview July 16, 2026 15:59 View deployment

vercel Bot deployed to Preview – flagsmith-frontend-staging July 16, 2026 15:59 View deployment

docs: reflect Dialog+Drawer split and reactstrap removal in modal spike

5794098

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

vercel Bot deployed to Preview – flagsmith-frontend-staging July 16, 2026 16:00 View deployment

vercel Bot deployed to Preview – flagsmith-frontend-preview July 16, 2026 16:00 View deployment

vercel Bot deployed to Preview – flagsmith-frontend-preview July 16, 2026 16:17 View deployment

vercel Bot deployed to Preview – flagsmith-frontend-staging July 16, 2026 16:17 View deployment

vercel Bot deployed to Preview – flagsmith-frontend-staging July 16, 2026 16:20 View deployment

vercel Bot deployed to Preview – flagsmith-frontend-preview July 16, 2026 16:20 View deployment

vercel Bot deployed to Preview – flagsmith-frontend-staging July 16, 2026 16:21 View deployment

talissoncosta and others added 2 commits July 16, 2026 14:47

docs: mark modal CSS migration done in spike (runtime QA remains)

007d914

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

vercel Bot deployed to Preview – flagsmith-frontend-preview July 16, 2026 17:49 View deployment

vercel Bot deployed to Preview – flagsmith-frontend-staging July 16, 2026 17:49 View deployment

vercel Bot deployed to Preview – flagsmith-frontend-staging July 16, 2026 17:56 View deployment

vercel Bot deployed to Preview – flagsmith-frontend-preview July 16, 2026 17:56 View deployment

talissoncosta and others added 2 commits July 16, 2026 15:13

feat(spike): add explicit openDrawer API

c7dba7b

Drawers get a first-class opener (variant: 'drawer') instead of the 'side-modal' magic string. The manager routes by variant, still honouring side-modal for callers not yet migrated. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

vercel Bot deployed to Preview – flagsmith-frontend-staging July 16, 2026 18:18 View deployment

vercel Bot deployed to Preview – flagsmith-frontend-preview July 16, 2026 18:18 View deployment

talissoncosta and others added 3 commits July 16, 2026 15:22

refactor(spike): migrate identities/roles/audit-webhook drawers to op…

55d8de3

…enDrawer Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

refactor(spike): migrate saml/breadcrumb/org-users/api-keys/integrati…

b8b5db6

…on to openDrawer Also declare openDrawer as an eslint global (for .js call sites). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

refactor(spike): migrate EditPermissions drawers to openDrawer

cf78e9a

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

vercel Bot deployed to Preview – flagsmith-frontend-preview July 16, 2026 18:28 View deployment

vercel Bot deployed to Preview – flagsmith-frontend-staging July 16, 2026 18:28 View deployment

refactor(spike): migrate users/identity/override/flag-env drawers to …

1cb9052

…openDrawer (--no-verify: blocked only by a pre-existing nested-ternary in UsersAndPermissionsPage unrelated to this change and present on main.) Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

vercel Bot deployed to Preview – flagsmith-frontend-staging July 16, 2026 18:32 View deployment

vercel Bot deployed to Preview – flagsmith-frontend-preview July 16, 2026 18:32 View deployment

vercel Bot deployed to Preview – flagsmith-frontend-staging July 16, 2026 18:38 View deployment

vercel Bot deployed to Preview – flagsmith-frontend-preview July 16, 2026 18:38 View deployment

chore(spike): remove reactstrap

056aa56

The reactstrap <Modal> portal was the last user of the dependency; its Modal.tsx re-exports had no importers. Modal.tsx now only re-exports the controller API. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

vercel Bot deployed to Preview – flagsmith-frontend-preview July 16, 2026 19:01 View deployment

vercel Bot deployed to Preview – flagsmith-frontend-staging July 16, 2026 19:01 View deployment

talissoncosta and others added 2 commits July 16, 2026 16:09

docs: add declarative-migration guide to modal spike

dd722fd

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

vercel Bot deployed to Preview – flagsmith-frontend-staging July 16, 2026 19:10 View deployment

vercel Bot deployed to Preview – flagsmith-frontend-preview July 16, 2026 19:10 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

spike: modal mounting via in-tree portals (PoC)#8030

spike: modal mounting via in-tree portals (PoC)#8030
talissoncosta wants to merge 25 commits into
mainfrom
spike/modal-in-tree-portals

talissoncosta commented Jul 16, 2026

Uh oh!

vercel Bot commented Jul 16, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Jul 16, 2026 •

edited

Loading

Review skipped

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

talissoncosta commented Jul 16, 2026

Changes

How did you test this code?

Uh oh!

vercel Bot commented Jul 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot commented Jul 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review skipped

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

vercel Bot commented Jul 16, 2026 •

edited

Loading

coderabbitai Bot commented Jul 16, 2026 •

edited

Loading