[ZEPPELIN-6358] Fix notebook UI bugs and add aria attributes and test IDs for selectors #5101

This PR fixes several notebook-related UI issues and improves testability and accessibility.

- Fix an issue where the search menu trigger did not work correctly.
- Prevent folder renaming when the input is empty by disabling the confirm button.
- Add accessibility (ARIA) attributes and test-specific attributes to improve usability and E2E test stability.

Bug Fix
Refactoring

ZEPPELIN-6358

* Does the license files need to update? No
* Is there breaking changes for older versions? No
* Does this needs documentation? No

Closes #5133 from dididy/e2e/notebook-bug.

Signed-off-by: ChanHo Lee <chanholee@apache.org>
(cherry picked from commit 5c35ad9)
Signed-off-by: ChanHo Lee <chanholee@apache.org>

Author: voidmatcha

zeppelin-web-angular/src/app/pages/workspace/notebook/action-bar/action-bar.component.html

@@ -11,7 +11,7 @@
   -->
 
 <div class="bar" [class.simple]="looknfeel !== 'default'">
-  <div class="title">
+  <div class="title" role="heading" aria-level="1">
     <zeppelin-elastic-input
       nz-tooltip
       [nzTooltipTitle]="note.path"
@@ -182,6 +182,7 @@
       <button
         nz-button
         nz-dropdown
+        [(nzVisible)]="isSearchMenuVisible"
         [nzDropdownMenu]="searchMenu"
         nzTrigger="click"
         nz-tooltip

zeppelin-web-angular/src/app/pages/workspace/notebook/action-bar/action-bar.component.ts

@@ -62,6 +62,7 @@ export class NotebookActionBarComponent extends MessageListenersManager implemen
   editorHide = false;
   commitVisible = false;
   tableHide = false;
+  isSearchMenuVisible = false;
   searchText = '';
   replaceText = '';
   cronOption = [
@@ -251,6 +252,11 @@ export class NotebookActionBarComponent extends MessageListenersManager implemen
     this.handleSearch.emit(searchText);
   }
 
+  openSearchMenu() {
+    this.isSearchMenuVisible = true;
+    this.cdr.markForCheck();
+  }
+
   deleteNote() {
     this.messageService.deleteNote(this.note.id);
   }

zeppelin-web-angular/src/app/pages/workspace/notebook/notebook.component.html

@@ -94,7 +94,7 @@
             (selected)="onParagraphSelect($event)"
             (triggerSaveParagraph)="saveParagraph($event)"
             (saveNoteTimer)="startSaveTimer()"
-            (searchCode)="actionBar.searchCode()"
+            (openSearchMenu)="actionBar.openSearchMenu()"
           ></zeppelin-notebook-paragraph>
         </div>
       </div>

zeppelin-web-angular/src/app/pages/workspace/notebook/paragraph/paragraph.component.html

@@ -107,6 +107,7 @@
         (sizeChange)="onSizeChange($event)"
         (configChange)="onConfigChange($event, i)"
         [result]="result"
+        [attr.data-testid]="'paragraph-result'"
       ></zeppelin-notebook-paragraph-result>
     </ng-container>
     <zeppelin-notebook-paragraph-footer

zeppelin-web-angular/src/app/pages/workspace/notebook/paragraph/paragraph.component.ts

@@ -97,7 +97,7 @@ export class NotebookParagraphComponent
   @Output() readonly triggerSaveParagraph = new EventEmitter<string>();
   @Output() readonly selected = new EventEmitter<string>();
   @Output() readonly selectAtIndex = new EventEmitter<number>();
-  @Output() readonly searchCode = new EventEmitter();
+  @Output() readonly openSearchMenu = new EventEmitter();
 
   private destroy$ = new Subject();
 
@@ -700,7 +700,7 @@ export class NotebookParagraphComponent
   }
 
   handleFindInCode() {
-    this.searchCode.emit();
+    this.openSearchMenu.emit();
   }
 
   ngOnChanges(changes: SimpleChanges): void {

zeppelin-web-angular/src/app/pages/workspace/notebook/sidebar/sidebar.component.html

@@ -15,19 +15,25 @@
     <button
       [class.sidebar-button-active]="sidebarState === SidebarState.TOC"
       class="sidebar-button"
+      aria-label="Toggle Table of Contents"
       (click)="setOrToggleSidebarState(SidebarState.TOC)"
     >
       <i nz-icon nzType="unordered-list" nzTheme="outline"></i>
     </button>
     <button
       [class.sidebar-button-active]="sidebarState === SidebarState.FILE_TREE"
       class="sidebar-button"
+      aria-label="Toggle File Tree"
       (click)="setOrToggleSidebarState(SidebarState.FILE_TREE)"
     >
       <i nz-icon nzType="folder" nzTheme="outline"></i>
     </button>
   </div>
-  <button class="sidebar-button sidebar-close" (click)="setOrToggleSidebarState(SidebarState.CLOSED)">
+  <button
+    class="sidebar-button sidebar-close"
+    aria-label="Close Sidebar"
+    (click)="setOrToggleSidebarState(SidebarState.CLOSED)"
+  >
     <i *ngIf="sidebarState !== SidebarState.CLOSED" nz-icon nzType="close" nzTheme="outline"></i>
   </button>
   <div class="sidebar-main" *ngIf="sidebarState !== SidebarState.CLOSED">

zeppelin-web-angular/src/app/pages/workspace/published/paragraph/paragraph.component.html

@@ -25,6 +25,7 @@
     [currentCol]="paragraph.config.colWidth"
     [config]="configs[i]"
     [result]="result"
+    data-testid="paragraph-result"
   ></zeppelin-notebook-paragraph-result>
 </ng-container>
 

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>
 

zeppelin-web-angular/src/app/share/node-list/node-list.component.html

@@ -36,7 +36,7 @@ <h4>
       (click)="activeNote(node.origin.id)"
     >
       <span class="folder" *ngSwitchCase="'folder'">
-        <a class="name" (click)="toggleFolder(node)">
+        <a class="name" (click)="toggleFolder(node)" [attr.data-testid]="'folder-' + node.title">
           <i nz-icon [nzType]="node.isExpanded ? 'folder-open' : 'folder'" nzTheme="fill"></i>
           {{ node.title }}
         </a>
@@ -122,7 +122,7 @@ <h4>
         </span>
       </span>
       <span class="folder" *ngSwitchCase="'trash'">
-        <a class="name" (click)="toggleFolder(node)">
+        <a class="name" (click)="toggleFolder(node)" [attr.data-testid]="'folder-' + node.title">
           <i nz-icon nzType="delete" nzTheme="fill"></i>
           {{ node.title }}
         </a>