This is an automated email from the ASF dual-hosted git repository.
chanholee pushed a commit to branch branch-0.12
in repository https://gitbox.apache.org/repos/asf/zeppelin.git
The following commit(s) were added to refs/heads/branch-0.12 by this push:
new daaf73f612 [ZEPPELIN-6358] Fix notebook UI bugs and add aria
attributes and test IDs for selectors #5101
daaf73f612 is described below
commit daaf73f61250cecbda6f0522fb39d160d89d2319
Author: YONGJAE LEE(이용재) <[email protected]>
AuthorDate: Tue Mar 10 00:23:27 2026 +0900
[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 <[email protected]>
(cherry picked from commit 5c35ad9ba2033419bf7e9e0343751d1ce2a360b0)
Signed-off-by: ChanHo Lee <[email protected]>
---
.../pages/workspace/notebook/action-bar/action-bar.component.html | 3 ++-
.../pages/workspace/notebook/action-bar/action-bar.component.ts | 6 ++++++
.../src/app/pages/workspace/notebook/notebook.component.html | 2 +-
.../pages/workspace/notebook/paragraph/paragraph.component.html | 1 +
.../app/pages/workspace/notebook/paragraph/paragraph.component.ts | 4 ++--
.../app/pages/workspace/notebook/sidebar/sidebar.component.html | 8 +++++++-
.../pages/workspace/published/paragraph/paragraph.component.html | 1 +
.../src/app/share/folder-rename/folder-rename.component.html | 4 +++-
.../src/app/share/node-list/node-list.component.html | 4 ++--
9 files changed, 25 insertions(+), 8 deletions(-)
diff --git
a/zeppelin-web-angular/src/app/pages/workspace/notebook/action-bar/action-bar.component.html
b/zeppelin-web-angular/src/app/pages/workspace/notebook/action-bar/action-bar.component.html
index e2d354995a..8e3bdea00b 100644
---
a/zeppelin-web-angular/src/app/pages/workspace/notebook/action-bar/action-bar.component.html
+++
b/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
diff --git
a/zeppelin-web-angular/src/app/pages/workspace/notebook/action-bar/action-bar.component.ts
b/zeppelin-web-angular/src/app/pages/workspace/notebook/action-bar/action-bar.component.ts
index 4d3cbe86c6..79d2c5af40 100644
---
a/zeppelin-web-angular/src/app/pages/workspace/notebook/action-bar/action-bar.component.ts
+++
b/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);
}
diff --git
a/zeppelin-web-angular/src/app/pages/workspace/notebook/notebook.component.html
b/zeppelin-web-angular/src/app/pages/workspace/notebook/notebook.component.html
index 8541afc964..18fd2f965e 100644
---
a/zeppelin-web-angular/src/app/pages/workspace/notebook/notebook.component.html
+++
b/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>
diff --git
a/zeppelin-web-angular/src/app/pages/workspace/notebook/paragraph/paragraph.component.html
b/zeppelin-web-angular/src/app/pages/workspace/notebook/paragraph/paragraph.component.html
index 31249c94c4..10917cc799 100644
---
a/zeppelin-web-angular/src/app/pages/workspace/notebook/paragraph/paragraph.component.html
+++
b/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
diff --git
a/zeppelin-web-angular/src/app/pages/workspace/notebook/paragraph/paragraph.component.ts
b/zeppelin-web-angular/src/app/pages/workspace/notebook/paragraph/paragraph.component.ts
index 8c9bc262cc..56a9d4c7f9 100644
---
a/zeppelin-web-angular/src/app/pages/workspace/notebook/paragraph/paragraph.component.ts
+++
b/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 {
diff --git
a/zeppelin-web-angular/src/app/pages/workspace/notebook/sidebar/sidebar.component.html
b/zeppelin-web-angular/src/app/pages/workspace/notebook/sidebar/sidebar.component.html
index 9acfe35efa..fde3565697 100644
---
a/zeppelin-web-angular/src/app/pages/workspace/notebook/sidebar/sidebar.component.html
+++
b/zeppelin-web-angular/src/app/pages/workspace/notebook/sidebar/sidebar.component.html
@@ -15,6 +15,7 @@
<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>
@@ -22,12 +23,17 @@
<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">
diff --git
a/zeppelin-web-angular/src/app/pages/workspace/published/paragraph/paragraph.component.html
b/zeppelin-web-angular/src/app/pages/workspace/published/paragraph/paragraph.component.html
index 7e126e7028..fbafd2a2e2 100644
---
a/zeppelin-web-angular/src/app/pages/workspace/published/paragraph/paragraph.component.html
+++
b/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>
diff --git
a/zeppelin-web-angular/src/app/share/folder-rename/folder-rename.component.html
b/zeppelin-web-angular/src/app/share/folder-rename/folder-rename.component.html
index 1de07e9906..f2a9339bb3 100644
---
a/zeppelin-web-angular/src/app/share/folder-rename/folder-rename.component.html
+++
b/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>
diff --git
a/zeppelin-web-angular/src/app/share/node-list/node-list.component.html
b/zeppelin-web-angular/src/app/share/node-list/node-list.component.html
index 0674090b7b..f2ab5dc420 100644
--- a/zeppelin-web-angular/src/app/share/node-list/node-list.component.html
+++ b/zeppelin-web-angular/src/app/share/node-list/node-list.component.html
@@ -36,7 +36,7 @@
(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 @@
</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>
