pass custom container to mount mfe app

[aquibbaig]

Summary by CodeRabbit

• New Features

  • MFE can now mount into Document, DocumentFragment, or HTMLElement containers for greater flexibility.
  • Theme management is container-scoped so theme assets load and update within the hosting root.

• Refactor

  • Mount/update lifecycle now uses the provided container to ensure theme loading and cleanup operate within the correct DOM context.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Central YAML (base), Organization UI (inherited)

Review profile: CHILL

Plan: Enterprise

Run ID: 3ac88527-7dc7-4fd7-af89-b0be5ea69dfe

📥 Commits

Reviewing files that changed from the base of the PR and between 2b7da9b and 3652015.

📒 Files selected for processing (1)

• public/app/fn-app/create-mfe.ts

🚧 Files skipped from review as they are similar to previous changes (1)

• public/app/fn-app/create-mfe.ts

📜 Recent review details

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: build-and-test

---

📝 Walkthrough

Walkthrough

Refactors MFE theme stylesheet handling to be container-scoped, adds an exported MfeContainer type (Document | DocumentFragment | HTMLElement), updates FNDashboardProps.container, and wires lifecycle hooks to set and use the scoped style root when removing or appending theme stylesheet links.

Changes

Container-Scoped Theme Management

Layer / File(s)	Summary
Type contract for container-scoped theming public/app/fn-app/types.ts, public/app/fn-app/create-mfe.ts	Introduces MfeContainer type union and updates FNDashboardProps.container to accept Document or DocumentFragment in addition to HTMLElement. Import is added to create-mfe.ts.
Container scope state and helper methods public/app/fn-app/create-mfe.ts	Adds a static themeStyleRoot field to store the current container scope, and introduces private helpers to set/validate the root, determine the append target based on root type, and enumerate <link> elements within that scoped root.
Scoped theme stylesheet operations public/app/fn-app/create-mfe.ts	Refactors removeThemeLinks to remove stylesheet links from within the scoped root. Extends loadFnTheme signature to accept optional styleRoot parameter. Implements theme load path to remove old theme links and append new stylesheet links within the scoped container.
Lifecycle integration for container propagation public/app/fn-app/create-mfe.ts	Updates mount and update lifecycle hooks to extract container from props and set themeStyleRoot before loading theme and rendering.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 Themes now float in bounded space,
Each container keeps its styled place,
Links born and removed where they belong,
Scoped and tidy, robust and strong—
A little hop for stylesheet grace.

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: enabling custom container support for MFE app mounting, which aligns with the type expansion and scoped stylesheet handling introduced in the changeset.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/grafana-shadow-dom

✨ Simplify code

• Create PR with simplified code
• Commit simplified code in branch feat/grafana-shadow-dom

---

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

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@public/app/fn-app/create-mfe.ts`:
- Around line 105-116: The static theme root can be left unset or stale causing
getThemeStyleRoot() to throw or reuse a previous instance; update
setThemeStyleRoot(container) so when container is falsy it resets or defaults
createMfe.themeStyleRoot to a safe value (e.g., document) and/or ensure
mountFnApp() and updateFnApp() call loadFnTheme() with a reinitialized style
root; specifically, modify setThemeStyleRoot to set createMfe.themeStyleRoot =
container || document (or null-clearing before load) and ensure
getThemeStyleRoot() no longer throws by relying on that default, touching the
setThemeStyleRoot, getThemeStyleRoot, mountFnApp, updateFnApp, and loadFnTheme
references.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Central YAML (base), Organization UI (inherited)

Review profile: CHILL

Plan: Enterprise

Run ID: 8ac32184-e883-4f46-8c3a-34282347845c

📥 Commits

Reviewing files that changed from the base of the PR and between 80bbd63 and 2b7da9b.

📒 Files selected for processing (2)

• public/app/fn-app/create-mfe.ts
• public/app/fn-app/types.ts

📜 Review details

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: build-and-test

🧰 Additional context used

📓 Path-based instructions (1)

**/*.ts

⚙️ CodeRabbit configuration file

**/*.ts: - Do not allow use of eslint-disable, @ts-expect-error, or @ts-ignore unless there's a clear, inline comment explaining why it's necessary.

• Suggest early returns in place of nested if, else or loops with complex branching.
• Flag function-wide scopes created by try / catch or top-level if / else. Recommend moving the inner logic to its own function.
• Flag use of try / catch for control flow. Recommend using .catch() with appropriate error handling.
• Flag try / catch that introduces a let where .catch() with const could be used instead.
• Flag catch blocks that narrow the caught error to Error. Suggest typing the catch parameter as unknown.
• Flag cases where types are narrowed manually before passing a value to the logger. Suggest passing the value directly without narrowing.
• Flag logging expressions that extract error.message or convert the error to a string. Suggest logging the full error value instead.
• Flag variables created from error.message or String(error) that are then logged. Suggest logging the original error value directly.
• When let is used to accumulate a value through conditions, suggest replacing it with a function that returns the final value directly.
• Flag let followed by a single conditional reassignment. Suggest a const with a ternary or a helper that returns the final value.
• Flag Map get-or-create patterns that assign to a let (e.g. let x = map.get(k); if (!x) { x = new ...; map.set(k, x) }). Suggest a getOrCreate* helper that returns the value and keeps the variable const.
• Flag nested conditions that can be combined into a single guard. Suggest simplifying with an early return.
• When encountering side effects such as mutation in forEach, suggest replacing with map, filter or reduce.
• Recommend introducing intermediate variables when string interpolation contains non-trivial logic.
• Ban all as type assertions everywhere, including chains like ...

Files:

• public/app/fn-app/types.ts
• public/app/fn-app/create-mfe.ts