[ZEPPELIN-6371] Convert published paragraph rendering to Micro Frontend(Angular to React) in New UI #5111

dididy · 2025-10-25T18:39:41Z

What is this PR for?

Micro Frontend Migration(Angular to React) Proposal

Summary

Implement React-based micro-frontend architecture using Module Federation.
Convert published paragraph component to support React rendering.
Add environment-based configuration for development and production builds.

Changes

1. React Micro-Frontend Project Setup

Created new React project at projects/zeppelin-react/.
Configured Webpack Module Federation for micro-frontend architecture.
Set up React 18 with TypeScript support.

2. Component Implementation

New React Components:

PublishedParagraph: Main entry point for published paragraph rendering.
SingleResultRenderer: Template for rendering single paragraph results.

Renderers:

HTMLRenderer: Renders HTML content with sanitization.
TextRenderer: Renders plain text with ANSI support.
ImageRenderer: Renders image outputs.

Visualizations:

TableVisualization: Table rendering with sorting, filtering, and export.
VisualizationControls: Control panel for table operations.

Common Components:

Loading: Loading state indicator.
Empty: Empty state display.

3. Angular Integration

paragraph.component.ts: Added React widget loading logic via Module Federation.
paragraph.component.html: Added React container element.
environment.ts / environment.prod.ts: Added reactRemoteEntryUrl configuration.
- Development: http://localhost:3001/remoteEntry.js
- Production: /assets/react/remoteEntry.js

4. Build Configuration

angular.json: Copy React build output to /assets/react/.
webpack.config.js: Configured Module Federation plugin:
- Dev server: port 3001
- CORS headers for cross-origin requests
- Environment-specific publicPath
proxy.conf.js: Updated proxy configuration.

5. Package

Added React and React-DOM dependencies.
Added Webpack and Module Federation plugins.
Added Ant Design for React UI components.
Added @antv/g2plot for data visualization (also used in Angular version with G2).

License

This PR uses several open-source libraries. The xlsx (v0.18.5) and typescript (v4.6.4) packages are licensed under Apache-2.0, while all other dependencies and devDependencies (such as react, react-dom, antd, @ant-design/icons, etc.) are licensed under MIT. The MIT license is more permissive than Apache-2.0, so including MIT-licensed packages does not violate Apache-2.0 terms. All packages may be used commercially, and license notices should be included when distributing the project.

Technical Details

Module Federation Configuration

// Development: http://localhost:3001/remoteEntry.js
// Production: /assets/react/remoteEntry.js

new ModuleFederationPlugin({
  name: 'reactApp',
  filename: 'remoteEntry.js',
  exposes: {
    './PublishedParagraph': './src/pages/PublishedParagraph'
  }
})

Usage

Render published paragraph with React:
/notebook/{noteId}/paragraph/{paragraphId}?react=true

What type of PR is it?

Improvement

Todos

What is the Jira issue?

ZEPPELIN-6371

How should this be tested?

// Start Zeppelin Server
./mvnw clean install -DskipTests
./mvnw clean package -DskipTests
./bin/zeppelin-daemon.sh start

// Start Zeppelin New UI Client
cd zeppelin-web-angular
nvm use
npm i
npm run start

Screenshots (if appropriate)

Questions:

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

tbonelee · 2025-11-03T13:56:08Z

Thank you for the proposal and the PR!

First of all, I agree with the idea of migrating the framework from Angular to React. This change could help lower the barrier for front-end contributions, considering that we currently have few FE committers.

However, since this is quite an epic change, I think it would be good to share this roadmap and gather feedback from Zeppelin developers first.

Below are some examples from previous discussions for reference:

tbonelee · 2025-11-03T13:59:06Z

Additional requests: if you have some time, could you extract the commits which fix the E2E tests into an separate PR?
We could merge that first to fix brokent tests in master branch, and then rebase that change back into this PR.

### What is this PR for? #5111 (comment) #5108 After upgrading Playwright to the latest version(1.53.2 to 1.56.1), several test cases started failing on WebKit. The issue was resolved by rolling back to the previous minor version(1.55.1). [related issue] microsoft/playwright#37766 ### What type of PR is it? Hot Fix ### Todos ### What is the Jira issue? ### How should this be tested? ### Screenshots (if appropriate) ### Questions: * Does the license files need to update? No * Is there breaking changes for older versions? No * Does this needs documentation? No Closes #5115 from dididy/fix/e2e. Signed-off-by: ChanHo Lee <chanholee@apache.org>

### What is this PR for? #5111 (comment) #5108 After upgrading Playwright to the latest version(1.53.2 to 1.56.1), several test cases started failing on WebKit. The issue was resolved by rolling back to the previous minor version(1.55.1). [related issue] microsoft/playwright#37766 ### What type of PR is it? Hot Fix ### Todos ### What is the Jira issue? ### How should this be tested? ### Screenshots (if appropriate) ### Questions: * Does the license files need to update? No * Is there breaking changes for older versions? No * Does this needs documentation? No Closes #5115 from dididy/fix/e2e. Signed-off-by: ChanHo Lee <chanholee@apache.org> (cherry picked from commit bf62a2a) Signed-off-by: ChanHo Lee <chanholee@apache.org>

tbonelee · 2025-11-07T03:35:12Z

zeppelin-web-angular/e2e/tests/notebook/published/published-paragraph.spec.ts

+        await page.goto(reactModeUrl);
+        await waitForZeppelinReady(page);
+
+        // URL 이동 완료까지 명시적으로 대기


There's a Korean comment.
(I haven't started the review yet, just leaving a quick note.)

tbonelee

Thanks for the hard work!

I've pushed a few fixes for type errors, incorrect type definitions that caused the graph.mode value to be read incorrectly, and an issue where table header names were omitted when exporting to an xlsx file.
To address the incorrect type definitions, I replaced the types defined in zeppelin-react with the ones already defined in zeppelin-sdk.

You can check the changes here:
https://github.com/tbonelee/zeppelin/commits/PR_5111-review/

Please take a look and let me know if these changes make sense.

Lastly, it would be great if you could run Prettier once as well. It would add new lines at the EOF automatically.

Details

tbonelee@5772731

This fixes type incompatibilies which cause type errors. You could check fixes by running npx tsc --noEmit at the root of the zeppelin-react before and after this commit.

tbonelee@85c40f8

This fixes wrong use of Zeppelin related types.
It also fixes the bug which could not set current mode in TableVisualization

tbonelee@60ca558

Fixed a minor type error.

tbonelee@e954a16

Fixed an issue where table header names were omitted.
Replace .json_to_sheet() with .aoa_to_sheet().

tbonelee · 2025-11-10T10:26:53Z

zeppelin-web-angular/e2e/tests/notebook/published/published-paragraph.spec.ts

+    test('should enter published paragraph in React mode via URL with react=true', async ({ page }) => {
+      await test.step('Given I navigate to React mode URL', async () => {
+        const reactModeUrl = `/#/notebook/${testNotebook.noteId}/paragraph/${testNotebook.paragraphId}?react=true`;
+        await page.goto(reactModeUrl);
+        await waitForZeppelinReady(page);
+
+        await page.waitForURL(`**/${testNotebook.noteId}/paragraph/${testNotebook.paragraphId}*`, {
+          timeout: 15000
+        });
+      });
+
+      await test.step('Then React mode should be active', async () => {
+        const currentUrl = page.url();
+        expect(currentUrl).toContain('react=true');
+      });
+    });


If there's no special handling in place, navigating to a URL that includes query parameters will always result in those parameters being present in the final URL. In that case, wouldn't this test always pass regardless of whether React mode is actually active?

It may be better to either remove this test or revise it to validate React mode using a different, more reliable indicator.

tbonelee · 2025-11-10T10:37:02Z

zeppelin-web-angular/e2e/tests/notebook/published/published-paragraph.spec.ts

+      // Only clear output if result exists
+      if (await paragraphResult.isVisible()) {
+        const settingsButton = paragraphElement.locator('a[nz-dropdown]');
+        await settingsButton.click();
+
+        const clearOutputButton = page.locator('li.list-item:has-text("Clear output")');
+        await clearOutputButton.click();
+        await expect(paragraphResult).toBeHidden();
+      }


I think test scenarios should be as deterministic as possible.
Since beforeEach creates a new notebook, we may not need a conditional if block here to clear the output.
It should be sufficient to assert that the paragraph result is hidden with something like expect(paragraphResult).toBeHidden().

tbonelee · 2025-11-10T11:47:11Z

zeppelin-web-angular/projects/zeppelin-react/src/components/common/Empty.tsx

+      showIcon
+    />
+  );
+};


A new line at the EOF is needed.

tbonelee · 2025-11-10T11:47:22Z

zeppelin-web-angular/projects/zeppelin-react/src/components/common/Loading.tsx

+      </Typography.Title>
+    </div>
+  );
+};


A new line at the EOF is needed.

tbonelee · 2025-11-10T11:52:50Z

zeppelin-web-angular/projects/zeppelin-react/src/components/renderers/HTMLRenderer.tsx

Maybe we should highlight code blocks like the Angular version.
Please check

zeppelin/zeppelin-web-angular/src/app/pages/workspace/share/result/result.component.ts

Line 319 in bf62a2a

renderHTML(): void {

.

tbonelee · 2025-11-10T11:54:16Z

zeppelin-web-angular/projects/zeppelin-react/src/components/renderers/TextRenderer.tsx

We should handle ANSI color escape codes. See

zeppelin/zeppelin-web-angular/src/app/pages/workspace/share/result/result.component.ts

Line 367 in bf62a2a

renderText(): void {

tbonelee · 2025-11-10T12:15:19Z

zeppelin-web-angular/projects/zeppelin-react/src/hooks/useTableExport.ts

It seems that, at this point, this doesn’t necessarily need to be a React custom hook and could simply be implemented as a regular utility function.
Do you have any plans for it to hold state or anything similar?

tbonelee · 2025-11-11T04:21:32Z

zeppelin-web-angular/.gitignore

I think we'd better add a .gitignore file inside zeppelin-react directory to ignore dist and node_modules in zeppelin-react.

dididy force-pushed the feature/micro-frontend branch from 4d444be to e1495e3 Compare October 26, 2025 01:37

tbonelee changed the base branch from master to angular-v13 October 26, 2025 05:59

dididy force-pushed the feature/micro-frontend branch from e1495e3 to 3570159 Compare October 26, 2025 08:35

dididy changed the base branch from angular-v13 to master October 26, 2025 08:36

dididy force-pushed the feature/micro-frontend branch 15 times, most recently from f41c0e3 to 2f2b8d9 Compare October 30, 2025 03:22

dididy mentioned this pull request Nov 3, 2025

[HOTFIX] @playwright/test 1.56.1 to 1.55.1 #5115

Merged

dididy added 6 commits November 6, 2025 11:42

update .gitignore for zeppelin-react

b11b186

Convert published paragraph to React by Micro Frontend

6b85c4a

fix shared paragraph result's code preview modal and test

34272cb

remove dompurify because dangerouslySetInnerHTML not use anymore

b04b641

change method about global font apply

fda87d3

fix missing license

0ffda95

dididy added 7 commits November 6, 2025 11:42

remove globa.css

a96218e

fix broken tests

2dbd507

skip crashed test

82a963b

change playwright.config

ecddfbc

fix broken tests

55b61be

reduce playwright worker on CI(4 to 2)

291a5cc

fix broken tests

cd54756

dididy force-pushed the feature/micro-frontend branch from 0889582 to cd54756 Compare November 6, 2025 03:01

add react relate test scenario

3dcb84d

tbonelee reviewed Nov 7, 2025

View reviewed changes

remove korean comment

9bc4edb

tbonelee requested changes Nov 10, 2025

View reviewed changes

tbonelee reviewed Nov 11, 2025

View reviewed changes

pan3793 mentioned this pull request Dec 12, 2025

[ZEPPELIN-6349] Bump Angular from 9 to 13 #5109

Merged

5 tasks

[ZEPPELIN-6371] Convert published paragraph rendering to Micro Frontend(Angular to React) in New UI #5111

Are you sure you want to change the base?

[ZEPPELIN-6371] Convert published paragraph rendering to Micro Frontend(Angular to React) in New UI #5111

Uh oh!

Conversation

dididy commented Oct 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What is this PR for?

Summary

Changes

License

Technical Details

Usage

What type of PR is it?

Todos

What is the Jira issue?

How should this be tested?

TextRenderer

TableVisualization

ImageRenderer

HTMLRenderer - Table

HTMLRenderer - Script(Bokeh JS)

Screenshots (if appropriate)

Questions:

Uh oh!

tbonelee commented Nov 3, 2025

Uh oh!

tbonelee commented Nov 3, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

tbonelee left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Details

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

dididy commented Oct 25, 2025 •

edited

Loading

tbonelee left a comment •

edited

Loading