tbonelee opened a new pull request, #5266:
URL: https://github.com/apache/zeppelin/pull/5266
### What is this PR for?
zeppelin-web-angular ships React islands via Webpack Module Federation
(PublishedParagraph pilot). This PR promotes that ad-hoc integration into
reusable mount infrastructure and migrates the notebook paragraph footer as its
first consumer, behind a `?reactFooter=true` query-param gate.
- `share/react-mount/`: `ReactMountDirective`, `ReactRemoteLoaderService`,
and a `ReactMountHandle` contract (`mount(element, props)` returning `{ update,
unmount }`) so prop changes update the React root in place instead of
remounting. `remoteEntry.js` is loaded once per page (cached promise with
failure eviction); each directive instance owns an isolated React root.
- React `ParagraphFooter` component (zeppelin-react) matching the Angular
footer's execution-time and elapsed-time behavior, wrapped in an error boundary.
- Gate: `?reactFooter=true`. Without the flag, rendering is unchanged. With
the flag, remote load/mount/update errors — and React render/lifecycle errors
caught by the error boundary — fall back to the Angular footer for that
paragraph only.
- Playwright E2E (`react-footer.spec.ts`).
The existing PublishedParagraph pilot remains on its current loader; this PR
only types its `container.get()` call. Migrating it to the new directive is a
follow-up.
### What type of PR is it?
Improvement
### Todos
* [x] Mount infrastructure (`react-mount/`)
* [x] React `ParagraphFooter` + error boundary
* [x] `?reactFooter=true` gate with per-paragraph Angular fallback
* [x] Playwright E2E
### What is the Jira issue?
* https://issues.apache.org/jira/browse/ZEPPELIN-6428
### How should this be tested?
Verified locally:
* `npx playwright test --project=chromium react-footer` — 4/4 passed against
a local Zeppelin server (0.13.0-SNAPSHOT).
* `eslint`/`prettier` clean on changed files; `tsc --noEmit` clean.
Manual:
* Open a notebook with `?reactFooter=true` → footer renders from React
(`data-testid="react-paragraph-footer"`), `remoteEntry.js` requested once.
* Without the flag → the Angular footer renders as before.
* Block `remoteEntry.js` in DevTools → the paragraph falls back to the
Angular footer with a console diagnostic.
Note on coverage: tests are E2E-only. zeppelin-web-angular currently has no
unit-test harness (zero `.spec.ts` under `src/`), so unit tests for the loader
service and directive were not added. Happy to add them if a harness lands or
committers prefer a different approach.
### Screenshots (if appropriate)
The React footer is intended to match the existing footer's rendering (same
text and layout; styles ported to a scoped CSS class).
### Questions:
* Does the license files need to update? Adds `date-fns` (MIT) to
`projects/zeppelin-react`'s package.json and lockfile (the Angular app already
depends on it). The lockfile diff includes npm peer-flag normalization from
`npm install`.
* Is there breaking changes for older versions? No. The footer change is
opt-in via query param; default rendering is unchanged.
* Does this needs documentation? No user-facing docs; developer docs updated
in `projects/zeppelin-react/README.md`.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
