[ZEPPELIN-6428] Add reusable React mount infrastructure and migrate paragraph footer behind a flag

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

@@ -0,0 +1,104 @@
+/*
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { expect, test } from '@playwright/test';
+import {
+  addPageAnnotationBeforeEach,
+  createTestNotebook,
+  PAGES,
+  performLoginIfRequired,
+  waitForNotebookLinks,
+  waitForZeppelinReady
+} from '../../../utils';
+
+test.describe('React Paragraph Footer', () => {
+  addPageAnnotationBeforeEach(PAGES.WORKSPACE.NOTEBOOK);
+
+  let testNotebook: { noteId: string; paragraphId: string };
+
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/#/');
+    await waitForZeppelinReady(page);
+    await performLoginIfRequired(page);
+    await waitForNotebookLinks(page);
+    testNotebook = await createTestNotebook(page);
+  });
+
+  test('without reactFooter flag, Angular footer renders', async ({ page }) => {
+    const { noteId } = testNotebook;
+
+    await page.goto(`/#/notebook/${noteId}`);
+    await waitForZeppelinReady(page);
+
+    await expect(page.locator('[data-testid="angular-paragraph-footer"]').first()).toBeAttached({ timeout: 15000 });
+    await expect(page.locator('[data-testid="react-paragraph-footer"]')).toHaveCount(0);
+  });
+
+  test('with reactFooter=true, React footer renders', async ({ page }) => {
+    const { noteId } = testNotebook;
+
+    await page.goto(`/#/notebook/${noteId}?reactFooter=true`);
+    await waitForZeppelinReady(page);
+
+    await expect(page.locator('[data-testid="react-paragraph-footer"]').first()).toBeAttached({ timeout: 15000 });
+    await expect(page.locator('[data-testid="angular-paragraph-footer"]')).toHaveCount(0);
+  });
+
+  test('reactFooter=true preserves the paragraph query param', async ({ page }) => {
+    const { noteId, paragraphId } = testNotebook;
+
+    await page.goto(`/#/notebook/${noteId}?paragraph=${paragraphId}&reactFooter=true`);
+    await waitForZeppelinReady(page);
+
+    await expect(page).toHaveURL(/reactFooter=true/);
+    await expect(page).toHaveURL(new RegExp(`paragraph=${paragraphId}`));
+    await expect(page.locator('[data-testid="react-paragraph-footer"]').first()).toBeAttached({ timeout: 15000 });
+  });
+
+  test('when the remote fails to load, paragraphs fall back to the Angular footer', async ({ page }) => {
+    const { noteId } = testNotebook;
+
+    // Simulate a dead remote: every remoteEntry.js request fails
+    await page.route('**/remoteEntry.js', route => route.abort());
+
+    await page.goto(`/#/notebook/${noteId}?reactFooter=true`);
+    await waitForZeppelinReady(page);
+
+    // The loader rejection reaches each paragraph's onError, which flips
+    // reactFooterFailed and re-renders the Angular footer
+    await expect(page.locator('[data-testid="angular-paragraph-footer"]').first()).toBeAttached({ timeout: 15000 });
+    await expect(page.locator('[data-testid="react-paragraph-footer"]')).toHaveCount(0);
+  });
+
+  test('navigating away during remoteEntry load does not throw', async ({ page }) => {
+    const { noteId } = testNotebook;
+
+    // Delay remoteEntry.js to widen the destroy-while-loading window
+    await page.route('**/remoteEntry.js', async route => {
+      await new Promise(r => setTimeout(r, 1500));
+      await route.continue();
+    });
+
+    const consoleErrors: string[] = [];
+    page.on('pageerror', err => consoleErrors.push(err.message));
+
+    await page.goto(`/#/notebook/${noteId}?reactFooter=true`);
+    // Navigate away before the remote can possibly mount
+    await page.waitForTimeout(100);
+    await page.goto('/#/');
+    await waitForZeppelinReady(page);
+
+    await page.waitForTimeout(2500);
+
+    expect(consoleErrors).toEqual([]);
+  });
+});

zeppelin-web-angular/projects/zeppelin-react/README.md

@@ -16,6 +16,21 @@ React micro-frontend that runs alongside the Angular host via [Webpack Module Fe
 
 - Design Document: [Micro Frontend Migration (Angular to React) Proposal](https://cwiki.apache.org/confluence/display/ZEPPELIN/Micro+Frontend+Migration%28Angular+to+React%29+Proposal)
 
+## React mount infrastructure (Angular side)
+
+The Angular host's `src/app/share/react-mount/` exports two pieces:
+
+- `ReactRemoteLoaderService` — loads `remoteEntry.js` once per page,
+  caches per-module promises, evicts on error.
+- `ReactMountDirective` — owns the host element, mounts outside the
+  Angular zone, forwards `[reactProps]` changes through
+  `handle.update(...)`, and unmounts on destroy. Re-checks `destroyed`
+  after the async load so a navigation during load does not leak a mount.
+
+Both are exported from `ShareModule`. Any notebook or interpreter
+template can use the directive without additional wiring. The selector
+is kebab-case (`zeppelin-react-mount`) per project ESLint convention.
+
 ## Migration roadmap
 
 | Phase | Scope | Status |
@@ -78,23 +93,51 @@ src/
 
 ## Adding a new React module
 
-1. Create a component (e.g. `src/pages/ExampleFeature.tsx`).
-2. Export a `mount(element, props)` function that creates a React root and renders the component.
-3. Register in `webpack.config.js` under `exposes`:
+The Angular host loads each exposed module through the
+`ReactMountDirective` (see `src/app/share/react-mount/`). The contract:
+
+```ts
+export interface ReactMountHandle {
+  update: (props: Props & { onError?: (e: unknown) => void }) => void;
+  unmount: () => void;
+}
+
+export function mount(element: HTMLElement, props: Props): ReactMountHandle;
+```
+
+1. Create a component (e.g. `src/components/<area>/ExampleFeature.tsx`).
+2. Wrap its render tree in `<ReactErrorBoundary onError={props.onError}>`.
+3. Export a `mount(element, props)` function that:
+   - Creates a single `Root` via `createRoot(element)`.
+   - Calls `root.render(<Wrapped {...props}/>)` on initial mount AND on
+     every `update(newProps)` call. React's reconciler preserves state.
+   - Returns `{ update, unmount }`. `unmount` calls `root.unmount()`.
+4. Register in `webpack.config.js` under `exposes`:
    ```js
    exposes: {
      './PublishedParagraph': './src/pages/PublishedParagraph',
-     './ExampleFeature': './src/pages/ExampleFeature'
+     './ParagraphFooter': './src/components/paragraph/ParagraphFooter',
+     './ExampleFeature': './src/components/<area>/ExampleFeature'
    }
    ```
-4. Re-export from `main.ts`:
+5. Re-export from `main.ts`:
    ```ts
-   export { ExampleFeature, mount as mountExampleFeature } from './pages/ExampleFeature';
+   export {
+     ExampleFeature,
+     mount as mountExampleFeature
+   } from './components/<area>/ExampleFeature';
    ```
-5. Load from Angular (same pattern as `paragraph.component.ts`):
-   ```ts
-   const factory = await container.get('./ExampleFeature');
-   const { mount } = factory();
-   mount(hostElement, props);
+6. Use from Angular by adding the directive to your template:
+   ```html
+   <div
+     zeppelin-react-mount="./ExampleFeature"
+     [reactProps]="exampleFeatureProps"
+   ></div>
    ```
+   `exampleFeatureProps` should be a getter on the host component (not
+   an inline object literal) so identity is stable when nothing changed.
+
+The legacy `./PublishedParagraph` module returns a bare unmount fn from
+`mount`. The directive tolerates that shape, but new modules should use
+the handle contract.