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

### What is this PR for?

[Micro Frontend Migration(Angular to React) Proposal](https://cwiki.apache.org/confluence/display/ZEPPELIN/Micro+Frontend+Migration%28Angular+to+React%29+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 <at>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`, `<at>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**

```ts
// 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?

```sh
// 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


Closes #5111 from dididy/feature/micro-frontend.

Signed-off-by: ChanHo Lee <chanholee@apache.org>

Author: voidmatcha

zeppelin-web-angular/.gitignore

@@ -1,12 +1,12 @@
 # See http://help.github.com/ignore-files/ for more about ignoring files.
 
 # compiled output
-/dist
+**/dist
 /tmp
 /out-tsc
 
 # dependencies
-/node_modules
+**/node_modules
 
 # profiling files
 chrome-profiler-events.json

zeppelin-web-angular/angular.json

@@ -38,13 +38,16 @@
       },
       "architect": {
         "build": {
-          "builder": "ngx-build-plus:browser",
+          "builder": "@angular-builders/custom-webpack:browser",
           "options": {
             "outputPath": "dist/zeppelin",
             "index": "src/index.html",
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
             "tsConfig": "src/tsconfig.json",
+            "customWebpackConfig": {
+              "path": "./webpack.config.js"
+            },
             "assets": [
               "src/favicon.ico",
               "src/assets",
@@ -62,6 +65,11 @@
                 "glob": "**/*",
                 "input": "./WEB-INF",
                 "output": "/WEB-INF/"
+              },
+              {
+                "glob": "**/*",
+                "input": "./projects/zeppelin-react/dist",
+                "output": "/assets/react/"
               }
             ],
             "styles": [
@@ -100,27 +108,29 @@
               "optimization": true,
               "outputHashing": "all",
               "sourceMap": false,
-              "extractCss": true,
               "namedChunks": false,
               "aot": true,
               "extractLicenses": true,
               "vendorChunk": false,
               "buildOptimizer": false
             },
             "development": {
-              "buildOptimizer": false,
               "optimization": false,
-              "vendorChunk": true,
               "extractLicenses": false,
               "namedChunks": true,
               "sourceMap": true
             }
-          }
+          },
+          "defaultConfiguration": "production"
         },
         "serve": {
-          "builder": "ngx-build-plus:dev-server",
+          "builder": "@angular-builders/custom-webpack:dev-server",
           "options": {
-            "browserTarget": "zeppelin:build"
+            "browserTarget": "zeppelin:build",
+            "port": 4200,
+            "host": "localhost",
+            "liveReload": true,
+            "hmr": true
           },
           "configurations": {
             "production": {

zeppelin-web-angular/e2e/models/home-page.ts

@@ -89,6 +89,11 @@ export class HomePage extends BasePage {
     };
   }
 
+  async navigateToHome(): Promise<void> {
+    await this.page.goto('/');
+    await this.waitForPageLoad();
+  }
+
   async navigateToLogin(): Promise<void> {
     await this.navigateToRoute('/login');
     // Wait for potential redirect to complete by checking URL change
@@ -152,9 +157,16 @@ export class HomePage extends BasePage {
   }
 
   async filterNotes(searchTerm: string): Promise<void> {
+    await this.page.waitForLoadState('domcontentloaded', { timeout: 10000 });
+    await this.nodeList.filterInput.waitFor({ state: 'visible', timeout: 5000 });
     await this.nodeList.filterInput.fill(searchTerm, { timeout: 15000 });
   }
 
+  async isRefreshIconSpinning(): Promise<boolean> {
+    const spinAttribute = await this.refreshIcon.getAttribute('nzSpin');
+    return spinAttribute === 'true' || spinAttribute === '';
+  }
+
   async waitForRefreshToComplete(): Promise<void> {
     await this.waitForElementAttribute('a.refresh-note i[nz-icon]', 'nzSpin', false);
   }

zeppelin-web-angular/e2e/models/published-paragraph-page.ts

@@ -15,14 +15,12 @@ import { navigateToNotebookWithFallback } from '../utils';
 import { BasePage } from './base-page';
 
 export class PublishedParagraphPage extends BasePage {
-  readonly paragraphResult: Locator;
-  readonly errorModalContent: Locator;
-  readonly errorModalOkButton: Locator;
+  private readonly errorModalContent: Locator;
+  private readonly errorModalOkButton: Locator;
   readonly confirmationModal: Locator;
 
   constructor(page: Page) {
     super(page);
-    this.paragraphResult = page.locator('zeppelin-notebook-paragraph-result');
     this.errorModalContent = this.page.locator('.ant-modal-body', { hasText: 'Paragraph Not Found' }).last();
     this.errorModalOkButton = page.getByRole('button', { name: 'OK' }).last();
     this.confirmationModal = page.locator('div.ant-modal-confirm').last();

zeppelin-web-angular/e2e/models/workspace-page.util.ts

@@ -13,6 +13,7 @@
 import { expect, Page } from '@playwright/test';
 import { BasePage } from './base-page';
 import { WorkspacePage } from './workspace-page';
+import { performLoginIfRequired, waitForZeppelinReady } from '../utils';
 
 export class WorkspaceUtil extends BasePage {
   private workspacePage: WorkspacePage;
@@ -22,6 +23,17 @@ export class WorkspaceUtil extends BasePage {
     this.workspacePage = new WorkspacePage(page);
   }
 
+  async navigateAndWaitForLoad(): Promise<void> {
+    await this.workspacePage.navigateToWorkspace();
+    await performLoginIfRequired(this.page);
+    await waitForZeppelinReady(this.page);
+  }
+
+  async verifyWorkspaceLayout(): Promise<void> {
+    await expect(this.workspacePage.workspaceComponent).toBeVisible();
+    await expect(this.workspacePage.routerOutlet).toBeAttached();
+  }
+
   async verifyHeaderVisibility(shouldBeVisible: boolean): Promise<void> {
     if (shouldBeVisible) {
       await expect(this.workspacePage.zeppelinHeader).toBeVisible();