disable the button in the rename modal when the input field is empty

Author: dididy

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

@@ -18,15 +18,11 @@ export class BasePage {
 
   constructor(page: Page) {
     this.page = page;
-    this.loadingScreen = page.locator('.spin-text');
+    this.loadingScreen = page.locator('section.spin');
   }
 
   async waitForPageLoad(): Promise<void> {
     await this.page.waitForLoadState('domcontentloaded');
-    try {
-      await this.loadingScreen.waitFor({ state: 'hidden', timeout: 15000 });
-    } catch {
-      console.log('Loading screen not found');
-    }
+    await this.loadingScreen.waitFor({ state: 'hidden', timeout: 15000 });
   }
 }

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

@@ -86,6 +86,7 @@ export class FolderRenamePageUtil {
 
     // Re-check for the renamed folder after reload
     const newFolderAfterReload = this.page.locator('.folder .name', { hasText: newName });
+
     await expect(newFolderAfterReload).toBeVisible({ timeout: 10000 });
   }
 
@@ -104,117 +105,16 @@ export class FolderRenamePageUtil {
     await this.folderRenamePage.clickRenameMenuItem(folderName);
     await this.folderRenamePage.clearNewName();
 
-    await this.folderRenamePage.clickConfirm();
+    // NEW ASSERTION: The confirm button should be disabled when the input is empty.
+    await expect(this.folderRenamePage.confirmButton).toBeDisabled({ timeout: 5000 });
+
+    // Clean up: Click cancel to close the modal after verifying validation.
+    await this.folderRenamePage.clickCancel();
+    await expect(this.folderRenamePage.renameModal).not.toBeVisible({ timeout: 5000 });
 
-    // Strategy 1: Wait for immediate client-side validation indicators
-    let clientValidationFound = false;
-    const clientValidationChecks = [
-      // Check for validation error message
-      async () =>
-        // Use isVisible() to check without asserting, and catch if element is not found
-        await this.folderRenamePage.validationError.isVisible({ timeout: 1000 }).catch(() => false),
-      // Check if input shows validation state
-      async () => {
-        // Check attribute value, and catch if element is not found
-        const ariaInvalid = await this.folderRenamePage.renameInput
-          .getAttribute('aria-invalid', { timeout: 1000 })
-          .catch(() => null);
-        return ariaInvalid === 'true';
-      },
-      // Check if rename button is disabled
-      async () =>
-        // Use isDisabled() to check without asserting, and catch if element is not found
-        await this.folderRenamePage.confirmButton.isDisabled({ timeout: 1000 }).catch(() => false),
-      // Check input validity via CSS classes
-      async () =>
-        // Evaluate the class directly, and catch if element is not found
-        await this.folderRenamePage.renameInput
-          .evaluate(el => el.classList.contains('invalid') || el.classList.contains('error'), { timeout: 1000 })
-          .catch(() => false)
-    ];
-
-    for (const check of clientValidationChecks) {
-      if (await check()) {
-        clientValidationFound = true;
-        // Client-side validation working - empty name prevented
-        break;
-      }
-    }
-
-    if (clientValidationFound) {
-      // Client-side validation is working, modal should stay open
-      await expect(this.folderRenamePage.renameModal).toBeVisible();
-      await this.folderRenamePage.clickCancel();
-      return;
-    }
-
-    // Strategy 2: Wait for server-side processing and response
-    await this.page
-      .waitForFunction(
-        () => {
-          // Wait for any network requests to complete and UI to stabilize
-          const modal = document.querySelector('.ant-modal-wrap');
-          const hasLoadingIndicators = document.querySelectorAll('.loading, .spinner, [aria-busy="true"]').length > 0;
-
-          // Consider stable when either modal is gone or no loading indicators
-          return !modal || !hasLoadingIndicators;
-        },
-        { timeout: 5000 }
-      )
-      .catch(() => {
-        // Server response wait timeout, checking final state...
-      });
-
-    // Check final state after server processing
-    const finalModalVisible = await this.folderRenamePage.isRenameModalVisible();
-    const finalFolderVisible = await this.folderRenamePage.isFolderVisible(folderName);
-
-    // Strategy 3: Analyze the validation behavior based on final state
-    if (finalModalVisible && !finalFolderVisible) {
-      // Modal open, folder disappeared - server prevented rename but UI shows confusion
-      await expect(this.folderRenamePage.renameModal).toBeVisible();
-      await this.folderRenamePage.clickCancel();
-      // Wait for folder to reappear after modal close
-      await expect(
-        this.page.locator('.node').filter({
-          has: this.page.locator('.folder .name', { hasText: folderName })
-        })
-      ).toBeVisible({ timeout: 3000 });
-      return;
-    }
-
-    if (!finalModalVisible && finalFolderVisible) {
-      // Modal closed, folder visible - proper server-side validation (rejected empty name)
-      await expect(this.folderRenamePage.renameModal).not.toBeVisible();
-      await expect(
-        this.page.locator('.node').filter({
-          has: this.page.locator('.folder .name', { hasText: folderName })
-        })
-      ).toBeVisible();
-      return;
-    }
-
-    if (finalModalVisible && finalFolderVisible) {
-      // Modal still open, folder still visible - validation prevented submission
-      await expect(this.folderRenamePage.renameModal).toBeVisible();
-      await expect(
-        this.page.locator('.node').filter({
-          has: this.page.locator('.folder .name', { hasText: folderName })
-        })
-      ).toBeVisible();
-      await this.folderRenamePage.clickCancel();
-      return;
-    }
-
-    if (!finalModalVisible && !finalFolderVisible) {
-      // Both gone - system handled the empty name by removing/hiding the folder
-      await expect(this.folderRenamePage.renameModal).not.toBeVisible();
-      // The folder being removed is acceptable behavior for empty names
-      return;
-    }
-
-    // Fallback: If we reach here, assume validation is working
-    // Validation behavior is unclear but folder appears protected
+    // Verify the original folder still exists and was not renamed or deleted.
+    const originalFolderLocator = this.page.locator('.folder .name', { hasText: folderName });
+    await expect(originalFolderLocator).toBeVisible({ timeout: 5000 });
   }
 
   async verifyDeleteIconIsDisplayed(folderName: string): Promise<void> {

zeppelin-web-angular/e2e/models/notebook-keyboard-page.ts

@@ -431,7 +431,6 @@ export class NotebookKeyboardPage extends BasePage {
   }
 
   // Helper methods for verifying shortcut effects
-
   async waitForParagraphExecution(paragraphIndex: number = 0, timeout: number = 30000): Promise<void> {
     if (this.page.isClosed()) {
       console.warn('Cannot wait for paragraph execution: page is closed');
@@ -728,6 +727,12 @@ export class NotebookKeyboardPage extends BasePage {
   }
 
   private async focusEditorElement(paragraph: Locator, paragraphIndex: number): Promise<void> {
+    // Add check for page.isClosed() at the beginning
+    if (this.page.isClosed()) {
+      console.warn(`Attempted to focus editor in paragraph ${paragraphIndex} but page is closed.`);
+      return; // Exit early if the page is already closed
+    }
+
     const browserName = this.page.context().browser()?.browserType().name();
     const editor = paragraph.locator('.monaco-editor, .CodeMirror, .ace_editor, textarea').first();
 

zeppelin-web-angular/e2e/models/notebook.util.ts

@@ -40,8 +40,7 @@ export class NotebookUtil extends BasePage {
 
     await expect(this.homePage.notebookList).toBeVisible({ timeout: 90000 });
     await expect(this.homePage.createNewNoteButton).toBeVisible({ timeout: 45000 });
-    await this.homePage.createNewNoteButton.click({ timeout: 30000 });
-
+    await this.homePage.createNewNoteButton.click({ timeout: 45000 });
     // Click the 'Create' button in the modal
     const createButton = this.page.locator('button', { hasText: 'Create' });
     await expect(createButton).toBeVisible({ timeout: 30000 });

zeppelin-web-angular/e2e/utils.ts

@@ -10,7 +10,7 @@
  * limitations under the License.
  */
 
-import { test, Page, TestInfo } from '@playwright/test';
+import { test, Page, TestInfo, expect } from '@playwright/test';
 import { LoginTestUtil } from './models/login-page.util';
 import { NotebookUtil } from './models/notebook.util';
 
@@ -259,6 +259,9 @@ export async function waitForZeppelinReady(page: Page): Promise<void> {
 
     // Additional stability check - wait for DOM to be stable
     await page.waitForLoadState('domcontentloaded');
+
+    // Explicitly wait for the "Welcome to Zeppelin!" heading to be visible
+    await expect(page.locator('h1:has-text("Welcome to Zeppelin!")')).toBeVisible({ timeout: 30000 });
   } catch (error) {
     console.warn('Zeppelin ready check failed, but continuing...', error);
     // Don't throw error in CI environments, just log and continue
@@ -417,8 +420,7 @@ export async function createTestNotebook(
 
   // Navigate back to home
   await page.goto('/');
-  await page.waitForLoadState('networkidle', { timeout: 30000 });
-  await page.waitForSelector('text=Welcome to Zeppelin!', { timeout: 20000 });
+  await waitForZeppelinReady(page);
 
   return { noteId, paragraphId };
 }
@@ -428,7 +430,7 @@ export async function deleteTestNotebook(page: Page, noteId: string): Promise<vo
     // Navigate to home page
     await page.goto('/');
     await page.waitForLoadState('networkidle', { timeout: 30000 });
-    await page.waitForSelector('text=Welcome to Zeppelin!', { timeout: 20000 });
+    await expect(page.locator('h1:has-text("Welcome to Zeppelin!")')).toBeVisible({ timeout: 20000 });
 
     // Find the notebook in the tree
     const treeNode = page.locator(`//span[@class='node-name' and contains(text(), 'Test Notebook')]`);

zeppelin-web-angular/src/app/share/folder-rename/folder-rename.component.html

@@ -30,7 +30,9 @@
     </nz-form-control>
   </nz-form-item>
   <div class="modal-footer ant-modal-footer">
-    <button nz-button nzType="primary" (click)="rename()">Rename</button>
+    <button nz-button nzType="primary" (click)="rename()" [disabled]="!newFolderPath || !newFolderPath.trim()">
+      Rename
+    </button>
   </div>
 </form>