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

[dididy]

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

TextRenderer

http://localhost:4200/#/notebook/2EYDJKFFY/paragraph/20180118-122136_1299905608?react=true

TableVisualization

http://localhost:4200/#/notebook/2EYDJKFFY/paragraph/20180118-122136_1299905608?react=true

ImageRenderer

http://localhost:4200/#/notebook/2F1S9ZY8Z/paragraph/20180117-220535_590781730?react=true

HTMLRenderer - Table

http://localhost:4200/#/notebook/2F1S9ZY8Z/paragraph/paragraph_1580885453474_1167659991?react=true

HTMLRenderer - Script(Bokeh JS)

http://localhost:4200/#/notebook/2F1S9ZY8Z/paragraph/paragraph_1580885707198_-1652524072?react=true

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]

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:

• https://lists.apache.org/thread/h74gvrxg3nf8g12whylkfs9ozblct0bw
• https://lists.apache.org/thread/dng7794l3z74h6ycl4wq78pffrkdwj56

[tbonelee]

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.