[ZEPPELIN-6630] Render the /configuration table through a React remote behind a flag

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

@@ -0,0 +1,50 @@
+/*
+ * 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 { Locator, Page } from '@playwright/test';
+import { waitForZeppelinReady } from '../utils';
+import { BasePage } from './base-page';
+
+export class ConfigurationPage extends BasePage {
+  readonly pageDescription: Locator;
+  readonly table: Locator;
+  readonly headerCells: Locator;
+  readonly rows: Locator;
+
+  constructor(page: Page) {
+    super(page);
+    this.pageDescription = page.locator('text=Shows current configurations for Zeppelin Server.');
+    this.table = page.locator('zeppelin-configuration nz-table');
+    this.headerCells = this.table.locator('thead th');
+    // ng-zorro renders the "no data" state as a row, so exclude it to keep the
+    // counts about actual configuration entries.
+    this.rows = this.table.locator('tbody tr:not(.ant-table-placeholder)');
+  }
+
+  async navigate(): Promise<void> {
+    await this.navigateToRoute('/configuration', { timeout: 60000 });
+    await this.page.waitForURL('**/#/configuration', { timeout: 60000 });
+    await waitForZeppelinReady(this.page);
+    await this.zeppelinPageHeader.filter({ hasText: 'Configurations' }).waitFor({ state: 'visible' });
+  }
+
+  /** `[name, value]` for every rendered entry, in the order the page shows them. */
+  async readEntries(): Promise<Array<[string, string]>> {
+    await this.rows.first().waitFor({ state: 'visible', timeout: 15000 });
+    return this.rows.evaluateAll(rows =>
+      rows.map(row => {
+        const cells = Array.from(row.querySelectorAll('td')).map(cell => (cell.textContent ?? '').trim());
+        return [cells[0] ?? '', cells[1] ?? ''] as [string, string];
+      })
+    );
+  }
+}

zeppelin-web-angular/e2e/tests/workspace/configuration/configuration-page-structure.spec.ts

@@ -0,0 +1,75 @@
+/*
+ * 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 { ConfigurationPage } from '../../../models/configuration-page';
+import { addPageAnnotationBeforeEach, PAGES, waitForZeppelinReady } from '../../../utils';
+
+test.describe('Configuration Page - Structure', () => {
+  addPageAnnotationBeforeEach(PAGES.WORKSPACE.CONFIGURATION);
+
+  let configurationPage: ConfigurationPage;
+
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/#/');
+    await waitForZeppelinReady(page);
+    configurationPage = new ConfigurationPage(page);
+    await configurationPage.navigate();
+  });
+
+  test('should display page header with correct title and description', async () => {
+    await expect(configurationPage.zeppelinPageHeader).toBeVisible();
+    await expect(configurationPage.zeppelinPageHeader).toContainText('Configurations');
+    await expect(configurationPage.pageDescription).toBeVisible();
+    await expect(configurationPage.zeppelinPageHeader).toContainText(
+      'Note: For security reasons, some key/value pairs including passwords would not be shown.'
+    );
+  });
+
+  test('should display the entries in a Name and Value table', async () => {
+    await expect(configurationPage.table).toBeVisible();
+    await expect(configurationPage.headerCells).toHaveText(['Name', 'Value']);
+    expect((await configurationPage.readEntries()).length).toBeGreaterThan(0);
+  });
+
+  test('should sort the entries by name', async () => {
+    const names = (await configurationPage.readEntries()).map(([name]) => name);
+
+    expect(names).toEqual([...names].sort((a, b) => a.localeCompare(b)));
+  });
+
+  test('should name every entry, allowing an empty value', async () => {
+    const entries = await configurationPage.readEntries();
+
+    // A configuration key is always present; its value can legitimately be
+    // empty, either unset or withheld as a secret.
+    expect(entries.every(([name]) => name.length > 0)).toBe(true);
+  });
+
+  test('should keep the table on a reload', async ({ page }) => {
+    const before = await configurationPage.readEntries();
+
+    await page.reload();
+    await waitForZeppelinReady(page);
+
+    await expect(configurationPage.table).toBeVisible();
+    expect(await configurationPage.readEntries()).toEqual(before);
+  });
+
+  test('should reach the page from a direct URL without going through the menu', async ({ page }) => {
+    await page.goto('/#/configuration');
+    await waitForZeppelinReady(page);
+
+    await expect(configurationPage.zeppelinPageHeader).toContainText('Configurations');
+    await expect(configurationPage.table).toBeVisible();
+  });
+});

zeppelin-web-angular/e2e/tests/workspace/configuration/react-configuration-table.spec.ts

@@ -0,0 +1,81 @@
+/*
+ * 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, Page } from '@playwright/test';
+import { addPageAnnotationBeforeEach, PAGES, waitForZeppelinReady } from '../../../utils';
+
+const ANGULAR_TABLE = '[data-testid="angular-configuration-table"]';
+const REACT_TABLE = '[data-testid="react-configuration-table"]';
+const REACT_CONTENT = '[data-testid="react-configuration-table-content"]';
+
+// The entries arrive from ConfigurationService after the page settles, so wait
+// for the first row before reading; evaluateAll does not retry on its own.
+const readRows = async (page: Page, root: string): Promise<string[][]> => {
+  const rows = page.locator(`${root} tbody tr:not(.ant-table-placeholder)`);
+  await expect(rows.first()).toBeVisible({ timeout: 15000 });
+  return rows.evaluateAll(all =>
+    all.map(row => Array.from(row.querySelectorAll('td')).map(cell => (cell.textContent ?? '').trim()))
+  );
+};
+
+const openConfiguration = async (page: Page, query = ''): Promise<void> => {
+  await page.goto(`/#/configuration${query}`);
+  await waitForZeppelinReady(page);
+};
+
+test.describe('Configuration Page - React table behind a flag', () => {
+  addPageAnnotationBeforeEach(PAGES.WORKSPACE.CONFIGURATION);
+
+  test('without the flag, the Angular table renders', async ({ page }) => {
+    await openConfiguration(page);
+
+    await expect(page.locator(ANGULAR_TABLE)).toBeVisible();
+    await expect(page.locator(REACT_TABLE)).toHaveCount(0);
+    expect((await readRows(page, ANGULAR_TABLE)).length).toBeGreaterThan(0);
+    await expect(page.locator(`${ANGULAR_TABLE} thead th`)).toHaveText(['Name', 'Value']);
+  });
+
+  test('with reactConfiguration=true, the React table renders instead', async ({ page }) => {
+    await openConfiguration(page, '?reactConfiguration=true');
+
+    await expect(page.locator(REACT_CONTENT)).toBeVisible({ timeout: 15000 });
+    await expect(page.locator(ANGULAR_TABLE)).toHaveCount(0);
+  });
+
+  test('with a bare reactConfiguration flag, the React table renders', async ({ page }) => {
+    await openConfiguration(page, '?reactConfiguration');
+
+    await expect(page.locator(REACT_CONTENT)).toBeVisible({ timeout: 15000 });
+    await expect(page.locator(ANGULAR_TABLE)).toHaveCount(0);
+  });
+
+  test('both tables show the same configuration entries', async ({ page }) => {
+    await openConfiguration(page);
+    await expect(page.locator(ANGULAR_TABLE)).toBeVisible();
+    const angularRows = await readRows(page, ANGULAR_TABLE);
+
+    await openConfiguration(page, '?reactConfiguration=true');
+    await expect(page.locator(REACT_CONTENT)).toBeVisible({ timeout: 15000 });
+    const reactRows = await readRows(page, REACT_CONTENT);
+
+    // Same names, same values, same order: the host still owns the fetch and
+    // the sort, so the remote must not reshape what it is given.
+    expect(reactRows).toEqual(angularRows);
+  });
+
+  test('the header keeps the Name and Value columns', async ({ page }) => {
+    await openConfiguration(page, '?reactConfiguration=true');
+    await expect(page.locator(REACT_CONTENT)).toBeVisible({ timeout: 15000 });
+
+    await expect(page.locator(`${REACT_CONTENT} thead th`)).toHaveText(['Name', 'Value']);
+  });
+});

zeppelin-web-angular/projects/zeppelin-react/src/main.ts

@@ -10,5 +10,6 @@
  * limitations under the License.
  */
 
+export { ConfigurationTable, mount as mountConfigurationTable } from './pages/ConfigurationTable';
 export { PublishedParagraph, mount } from './pages/PublishedParagraph';
 export { ParagraphFooter, mount as mountParagraphFooter } from './components/paragraph/ParagraphFooter';

zeppelin-web-angular/projects/zeppelin-react/src/pages/ConfigurationTable.spec.tsx

@@ -0,0 +1,107 @@
+/*
+ * 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 { act } from 'react';
+import { afterEach, describe, expect, it } from 'vitest';
+import {
+  ConfigurationEntry,
+  ConfigurationTableMountHandle,
+  ConfigurationTableProps,
+  mount
+} from './ConfigurationTable';
+
+const entries: ConfigurationEntry[] = [
+  ['zeppelin.server.addr', '127.0.0.1'],
+  ['zeppelin.server.port', '8080']
+];
+
+// antd renders its "No data" placeholder as a row, so data rows are the rest.
+const rowTexts = (host: HTMLElement): string[][] =>
+  Array.from(host.querySelectorAll('tbody tr:not(.ant-table-placeholder)')).map(row =>
+    Array.from(row.querySelectorAll('td')).map(cell => cell.textContent ?? '')
+  );
+
+describe('ConfigurationTable mount contract', () => {
+  let host: HTMLElement | null = null;
+  let handle: ConfigurationTableMountHandle | null = null;
+
+  const mountTable = (props: ConfigurationTableProps): void => {
+    host = document.createElement('div');
+    document.body.appendChild(host);
+    act(() => {
+      handle = mount(host as HTMLElement, props);
+    });
+  };
+
+  afterEach(() => {
+    if (handle) {
+      const h = handle;
+      act(() => h.unmount());
+      handle = null;
+    }
+    host?.remove();
+    host = null;
+  });
+
+  it('throws when no element is given', () => {
+    expect(() => mount(null as unknown as HTMLElement, { entries })).toThrow('Mount element is required');
+  });
+
+  it('returns an update/unmount handle and renders one row per entry', () => {
+    mountTable({ entries });
+
+    expect(typeof handle!.update).toBe('function');
+    expect(typeof handle!.unmount).toBe('function');
+
+    const headers = Array.from(host!.querySelectorAll('thead th')).map(th => th.textContent);
+    expect(headers).toEqual(['Name', 'Value']);
+    expect(rowTexts(host!)).toEqual([
+      ['zeppelin.server.addr', '127.0.0.1'],
+      ['zeppelin.server.port', '8080']
+    ]);
+  });
+
+  it('keeps the order the host passed in', () => {
+    // The shell sorts by name before handing the entries over, so the remote
+    // must not impose its own ordering.
+    mountTable({ entries: [...entries].reverse() });
+
+    expect(rowTexts(host!).map(([name]) => name)).toEqual(['zeppelin.server.port', 'zeppelin.server.addr']);
+  });
+
+  it('shows the empty placeholder when the host has no entries yet', () => {
+    mountTable({});
+
+    expect(host!.querySelector('[data-testid="react-configuration-table-content"]')).not.toBeNull();
+    expect(host!.querySelector('.ant-table-placeholder')).not.toBeNull();
+    expect(rowTexts(host!)).toEqual([]);
+  });
+
+  it('update() re-renders in place with new entries', () => {
+    mountTable({ entries });
+
+    const h = handle!;
+    act(() => h.update({ entries: [['zeppelin.war', 'zeppelin-web/dist']] }));
+
+    expect(rowTexts(host!)).toEqual([['zeppelin.war', 'zeppelin-web/dist']]);
+  });
+
+  it('unmount() empties the host element', () => {
+    mountTable({ entries });
+    const h = handle!;
+    handle = null;
+
+    act(() => h.unmount());
+
+    expect(host!.innerHTML).toBe('');
+  });
+});