[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