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

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();