[ZEPPELIN-6358] Add E2E test coverage for notebook components

### What is this PR for?
This is the final PR in the series derived from #5101.

Notebook features had zero E2E coverage. This adds 20 spec files (~3500 lines).

**Notebook core**
- `notebook-container` — structure, action bar presence, sidebar width constraints, paragraph grid layout, extension area
- `action-bar-functionality` — run all, code/output toggle, clear output, clone/export/reload, collaboration mode, revision controls, scheduler, settings group
- `notebook-keyboard-shortcuts` — full ShortcutsMap coverage (Monaco editor; serial because Monaco holds focus state between tests — isolating via `beforeEach` wasn't viable)
- `sidebar-functionality` — TOC panel, file tree panel, open/close state transitions
- `paragraph-functionality` — edit mode, run/cancel, dynamic forms, footer DOM presence

**Share features**
- `folder-rename` — hover context menu, rename modal, validation, delete confirmation, folder merge on name collision
- `note-rename` — inline title editing, enter/blur/escape flows, empty name rejection, special characters
- `note-toc` — panel open/close, empty state message, toggle button attributes, repeated toggle

#### Pulled in test failure fixes from #5180                             
- Cleaned up `about-zeppelin-modal` and `note-create-modal` specs and models
- Added missing aria attributes and `data-testid` selectors to `action-bar.component.html`
- Bumped `flatted` 3.3.3 → 3.4.1 (npm audit)


### What type of PR is it?
Improvement
Feature
Documentation

### Todos

### What is the Jira issue?
ZEPPELIN-6358

### How should this be tested?

### 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 #5181 from dididy/e2e/notebook-final.

Signed-off-by: Jongyoul Lee <jongyoul@gmail.com>

Author: dididy

zeppelin-web-angular/e2e/models/folder-rename-page.ts

@@ -0,0 +1,100 @@
+/*
+ * 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, Locator, Page } from '@playwright/test';
+import { BasePage } from './base-page';
+
+export class FolderRenamePage extends BasePage {
+  readonly folderList: Locator;
+  readonly renameModal: Locator;
+  readonly renameInput: Locator;
+  readonly confirmButton: Locator;
+  readonly cancelButton: Locator;
+  readonly deleteConfirmation: Locator;
+
+  constructor(page: Page) {
+    super(page);
+    this.folderList = page.locator('zeppelin-node-list');
+    this.renameModal = page.locator('.ant-modal');
+    this.renameInput = page.locator('input[placeholder="Insert New Name"]');
+    this.confirmButton = page.getByRole('button', { name: 'Rename' });
+    this.cancelButton = page.locator('.ant-modal-close-x'); // Modal close button
+    this.deleteConfirmation = page.locator('.ant-popover').filter({ hasText: 'This folder will be moved to trash.' });
+  }
+
+  private getFolderNode(folderName: string): Locator {
+    return this.page
+      .locator('.folder')
+      .filter({
+        has: this.page.locator('a.name', {
+          hasText: new RegExp(`^\\s*${folderName}\\s*$`, 'i')
+        })
+      })
+      .first();
+  }
+
+  async hoverOverFolder(folderName: string): Promise<void> {
+    await this.page.waitForSelector('zeppelin-node-list', { state: 'visible' });
+    const folderNode = this.getFolderNode(folderName);
+    // Hover a.name (not .folder) — CSS :hover on .operation is triggered by the text link, same as clickRenameMenuItem()
+    const nameLink = folderNode.locator('a.name');
+    await nameLink.scrollIntoViewIfNeeded();
+    await nameLink.hover({ force: true }); // JUSTIFIED: .operation buttons are CSS-:hover-revealed; force required to trigger the hover event on the text link that activates the context menu
+  }
+
+  async clickDeleteIcon(folderName: string): Promise<void> {
+    await this.hoverOverFolder(folderName);
+    const folderNode = this.getFolderNode(folderName);
+    const deleteIcon = folderNode.locator(
+      '.operation a[nztooltiptitle*="Move folder to Trash"], .operation a[nztooltiptitle*="Trash"]'
+    );
+    await expect(deleteIcon).toBeVisible({ timeout: 5000 });
+    await deleteIcon.click({ force: true }); // JUSTIFIED: icon is only actionable after CSS-:hover; force bypasses the actionability check that fails before hover state propagates
+  }
+
+  async clickRenameMenuItem(folderName: string): Promise<void> {
+    const folderNode = this.getFolderNode(folderName);
+    const nameLink = folderNode.locator('a.name');
+
+    await nameLink.scrollIntoViewIfNeeded();
+    await nameLink.hover({ force: true }); // JUSTIFIED: .operation buttons are CSS-:hover-revealed; force required to trigger the hover event on the text link that activates the context menu
+
+    const renameIcon = folderNode.locator('.operation a[nztooltiptitle="Rename folder"]');
+
+    await expect(renameIcon).toBeVisible({ timeout: 3000 });
+    await renameIcon.click({ force: true }); // JUSTIFIED: icon is only actionable after CSS-:hover; force bypasses the actionability check that fails before hover state propagates
+
+    await this.renameModal.waitFor({ state: 'visible', timeout: 3000 });
+  }
+
+  async enterNewName(name: string): Promise<void> {
+    await this.renameInput.fill(name);
+  }
+
+  async clearNewName(): Promise<void> {
+    await this.renameInput.clear();
+    await expect(this.renameInput).toHaveValue('');
+  }
+
+  async clickConfirm(): Promise<void> {
+    // Wait for button to be enabled before clicking
+    await expect(this.confirmButton).toBeEnabled({ timeout: 5000 });
+    await this.confirmButton.click();
+
+    // Wait for modal to close; if it stays open validation errors prevented submission (caller re-checks)
+    await this.renameModal.waitFor({ state: 'detached', timeout: 3000 }).catch(() => {}); // JUSTIFIED: modal stays open on validation failure; caller asserts final state
+  }
+
+  async clickCancel(): Promise<void> {
+    await this.cancelButton.click();
+  }
+}

zeppelin-web-angular/e2e/models/folder-rename-page.util.ts

@@ -0,0 +1,38 @@
+/*
+ * 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 } from '@playwright/test';
+import { FolderRenamePage } from './folder-rename-page';
+
+export class FolderRenamePageUtil {
+  private folderRenamePage: FolderRenamePage;
+
+  constructor(folderRenamePage: FolderRenamePage) {
+    this.folderRenamePage = folderRenamePage;
+  }
+
+  async openContextMenuOnHoverAndVerifyOptions(folderName: string): Promise<void> {
+    await this.folderRenamePage.hoverOverFolder(folderName);
+    const folderNode = this.getFolderNode(folderName);
+    await expect(folderNode.locator('.folder .operation a[nz-tooltip][nztooltiptitle="Rename folder"]')).toHaveCount(1);
+    await expect(folderNode.locator('.folder .operation a[nztooltiptitle*="Move folder to Trash"]')).toBeVisible();
+  }
+
+  private getFolderNode(folderName: string) {
+    return this.folderRenamePage.page
+      .locator('.node')
+      .filter({
+        has: this.folderRenamePage.page.locator('.folder .name', { hasText: folderName })
+      })
+      .first();
+  }
+}

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

@@ -0,0 +1,68 @@
+/*
+ * 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 { BasePage } from './base-page';
+
+export class NoteRenamePage extends BasePage {
+  readonly noteTitle: Locator;
+  readonly noteTitleInput: Locator;
+
+  constructor(page: Page) {
+    super(page);
+    // Note title in elastic input component inside the heading element
+    this.noteTitle = page.getByRole('heading').locator('p');
+    this.noteTitleInput = page.getByRole('heading').locator('input');
+  }
+
+  async clickTitle(): Promise<void> {
+    await this.noteTitle.click({ timeout: 15000 });
+    await this.noteTitleInput.waitFor({ state: 'visible', timeout: 5000 });
+  }
+
+  async enterTitle(title: string): Promise<void> {
+    await this.ensureEditMode();
+    await this.noteTitleInput.fill(title, { timeout: 15000 });
+  }
+
+  async clearTitle(): Promise<void> {
+    await this.ensureEditMode();
+    await this.noteTitleInput.clear();
+  }
+
+  async pressEnter(): Promise<void> {
+    await this.noteTitleInput.waitFor({ state: 'visible', timeout: 5000 });
+    await this.noteTitleInput.press('Enter');
+    await this.noteTitleInput.waitFor({ state: 'hidden', timeout: 5000 });
+  }
+
+  async pressEscape(): Promise<void> {
+    await this.noteTitleInput.waitFor({ state: 'visible', timeout: 5000 });
+    await this.noteTitleInput.press('Escape');
+    await this.noteTitleInput.waitFor({ state: 'hidden', timeout: 5000 });
+  }
+
+  async blur(): Promise<void> {
+    await this.noteTitleInput.blur();
+  }
+
+  async getTitle(): Promise<string> {
+    return this.getElementText(this.noteTitle);
+  }
+
+  private async ensureEditMode(): Promise<void> {
+    if (!(await this.noteTitleInput.isVisible())) {
+      await this.clickTitle();
+    }
+    await this.noteTitleInput.waitFor({ state: 'visible' });
+  }
+}

zeppelin-web-angular/e2e/models/note-create-modal.util.ts

@@ -0,0 +1,34 @@
+/*
+ * 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 } from '@playwright/test';
+import { NoteRenamePage } from './note-rename-page';
+
+export class NoteRenamePageUtil {
+  private noteRenamePage: NoteRenamePage;
+
+  constructor(noteRenamePage: NoteRenamePage) {
+    this.noteRenamePage = noteRenamePage;
+  }
+
+  async verifyTitleText(expectedTitle: string): Promise<void> {
+    await expect(this.noteRenamePage.noteTitle).toContainText(expectedTitle);
+  }
+
+  async verifyTitleCanBeChanged(newTitle: string): Promise<void> {
+    await this.noteRenamePage.clickTitle();
+    await this.noteRenamePage.clearTitle();
+    await this.noteRenamePage.enterTitle(newTitle);
+    await this.noteRenamePage.pressEnter();
+    await this.verifyTitleText(newTitle);
+  }
+}