Skip to content

[ZEPPELIN-6564] Route the published paragraph through the shared react-mount loader - #5391

Open
voidmatcha wants to merge 4 commits into
apache:masterfrom
voidmatcha:mfe-prework
Open

[ZEPPELIN-6564] Route the published paragraph through the shared react-mount loader#5391
voidmatcha wants to merge 4 commits into
apache:masterfrom
voidmatcha:mfe-prework

Conversation

@voidmatcha

Copy link
Copy Markdown
Member

What is this PR for?

Moves the published paragraph off its own React loader and onto the shared react-mount directive, and removes the dead Module Federation configuration that this exposed.

Today there are two loaders. published/paragraph.component.ts injects a script tag into document.head and reads window.reactApp directly, while the paragraph footer goes through the [zeppelin-react-mount] directive added in ZEPPELIN-6428. The two paths differ in load-failure handling, container caching and typing. The bespoke path has no fallback at all, so a published paragraph whose remote fails to load renders nothing.

Split into four commits.

1. Remove dead Module Federation configuration

The shell webpack.config.js declares a reactApp remote but never calls container.init and never bundles React. Also removes the GenerateRemoteEntryJson plugin, which writes a remoteEntry.json nothing reads, and the unused @angular-architects/module-federation and ngx-build-plus devDependencies. As a side effect the hard-coded reactApp@http://localhost:3001/remoteEntry.js no longer ends up in production shell bundles.

2. Make @zeppelin/sdk framework-neutral

The SDK declares @angular/common and @angular/core as peerDependencies but imports neither, and pins them at ^8.2.9 while the project is on Angular 21. It does use rxjs, which is not declared. A non-Angular consumer, which is what the React remote is, inherits a requirement that does not exist and misses one that does.

3. Add ReactFeatureService as the single flag resolver

Flag parsing was split. The published paragraph accepted both ?react=true and a bare ?react, while notebook.component.ts required exactly ?reactFooter=true. Unified on the permissive rule so the URLs documented in ZEPPELIN-6371 keep working. As a result a bare ?reactFooter now enables the footer as well. Both flags are experimental opt-ins; with no flag the behaviour is unchanged.

4. Route the published paragraph through the shared react-mount loader

Moves the component onto the directive and makes ./PublishedParagraph satisfy the mount contract. It previously returned a bare unmount function, which the directive classified as legacy and for which it made update a no-op.

What type of PR is it?

Refactoring

Todos

None

What is the Jira issue?

https://issues.apache.org/jira/browse/ZEPPELIN-6564

How should this be tested?

  • A production build.
  • The zeppelin-react vitest suite, extended with a mount-contract spec for PublishedParagraph mirroring the existing ParagraphFooter one. It covers the handle shape, in-place update within the same subtree, the empty-state round trip, and onError on a render failure.
  • The Playwright suites for the published paragraph and the paragraph footer, including the fallback path on both.
  • The Angular shell has no unit test harness (ZEPPELIN-6566, ZEPPELIN-6567), so its side is covered by Playwright only.

Screenshots (if appropriate)

No

Questions:

  • Does the license files need to update? No
  • Is there breaking changes for older versions? No
  • Does this needs documentation? Yes

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