This is an automated email from the ASF dual-hosted git repository.
chanholee pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/zeppelin.git
The following commit(s) were added to refs/heads/master by this push:
new 0f20ffcd0f [ZEPPELIN-6203] Connect shortcut modal for info button
0f20ffcd0f is described below
commit 0f20ffcd0f32d8195203ad871d1f4bc52f10b8c2
Author: YONGJAE LEE(이용재) <[email protected]>
AuthorDate: Mon Sep 8 00:22:21 2025 +0900
[ZEPPELIN-6203] Connect shortcut modal for info button
### What is this PR for?
<img width="417" height="103" alt="image"
src="https://github.com/user-attachments/assets/d4fca2f3-0dca-43ae-b159-ca881bd1766d";
/>
Nothing happened when I click above info button inside of Zeppelin
Notebook. So I connect this function work properly.
This button related in
[here](https://github.com/apache/zeppelin/blob/526eb15b8732909ab994adba76e0c3e33bfa001c/zeppelin-web-angular/src/app/pages/workspace/notebook/action-bar/action-bar.component.ts#L239)
so I made shared shortcut component and connect it. Now it works well.
<img width="1624" height="1056" alt="스크린샷 2025-07-12 오후 6 10 05"
src="https://github.com/user-attachments/assets/d71e7264-eefb-4e80-bf4d-cf4467627d5e";
/>
I refer to [zeppelin-web's shortcut
file](https://github.com/apache/zeppelin/blob/526eb15b8732909ab994adba76e0c3e33bfa001c/zeppelin-web/src/app/notebook/shortcut.html)
### What type of PR is it?
Bug Fix
Feature
Refactoring
### Todos
* [x] makes html file's isMac working well
* [ ] Adjust shortcut for zeppelin-web to zeppelin-web-angular / check this
file for preventing weird working when user try to use shortcut //
[here](https://github.com/apache/zeppelin/blob/526eb15b8732909ab994adba76e0c3e33bfa001c/zeppelin-web-angular/src/app/services/shortcut.service.ts)
[ZEPPELIN-6229](https://issues.apache.org/jira/browse/ZEPPELIN-6229)
[ZEPPELIN-6197](https://issues.apache.org/jira/browse/ZEPPELIN-6197)
* [ ] Made "Clone paragraph" button work properly in New UI //
[ZEPPELIN-6294](https://issues.apache.org/jira/browse/ZEPPELIN-6294)
### What is the Jira issue?
https://issues.apache.org/jira/browse/ZEPPELIN-6203
### 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 #4963 from dididy/fix/ZEPPELIN-6203.
Signed-off-by: ChanHo Lee <[email protected]>
---
.../notebook/action-bar/action-bar.component.ts | 7 +-
zeppelin-web-angular/src/app/share/share.module.ts | 2 +
.../src/app/share/shortcut/shortcut.component.html | 328 +++++++++++++++++++++
.../src/app/share/shortcut/shortcut.component.ts | 22 ++
4 files changed, 358 insertions(+), 1 deletion(-)
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 878648c0c8..fe2f92ec33 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
@@ -31,6 +31,7 @@ import { MessageService, NoteStatusService, SaveAsService,
TicketService } from
import { NotebookService } from '@zeppelin/services/notebook.service';
import { NoteCreateComponent } from
'@zeppelin/share/note-create/note-create.component';
+import { ShortcutComponent } from
'@zeppelin/share/shortcut/shortcut.component';
@Component({
selector: 'zeppelin-notebook-action-bar',
@@ -246,7 +247,11 @@ export class NotebookActionBarComponent extends
MessageListenersManager implemen
}
showShortCut() {
- // TODO(hsuanxyz)
+ this.nzModalService.info({
+ nzTitle: `Shortcut Info`,
+ nzWidth: '600px',
+ nzContent: ShortcutComponent
+ });
}
togglePermissions() {
diff --git a/zeppelin-web-angular/src/app/share/share.module.ts
b/zeppelin-web-angular/src/app/share/share.module.ts
index e864e9a696..25cf7fc2f8 100644
--- a/zeppelin-web-angular/src/app/share/share.module.ts
+++ b/zeppelin-web-angular/src/app/share/share.module.ts
@@ -51,6 +51,7 @@ import { NoteTocComponent } from
'@zeppelin/share/note-toc/note-toc.component';
import { PageHeaderComponent } from
'@zeppelin/share/page-header/page-header.component';
import { HumanizeBytesPipe } from '@zeppelin/share/pipes';
import { RunScriptsDirective } from
'@zeppelin/share/run-scripts/run-scripts.directive';
+import { ShortcutComponent } from
'@zeppelin/share/shortcut/shortcut.component';
import { SpinComponent } from '@zeppelin/share/spin/spin.component';
import { ResizeHandleComponent } from './resize-handle';
@@ -58,6 +59,7 @@ const MODAL_LIST = [
AboutZeppelinComponent,
NoteImportComponent,
NoteCreateComponent,
+ ShortcutComponent,
NoteRenameComponent,
FolderRenameComponent
];
diff --git
a/zeppelin-web-angular/src/app/share/shortcut/shortcut.component.html
b/zeppelin-web-angular/src/app/share/shortcut/shortcut.component.html
new file mode 100644
index 0000000000..62b0437f0e
--- /dev/null
+++ b/zeppelin-web-angular/src/app/share/shortcut/shortcut.component.html
@@ -0,0 +1,328 @@
+<!--
+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.
+-->
+
+<div class="modal fade" id="shortcutModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
+ <div class="modal-dialog">
+ <div class="modal-content">
+ <div class="table-scroll">
+ <table class="table table-shortcut">
+ <tr>
+ <th style="width:70%">Note Keyboard Shortcuts</th>
+ <th></th>
+ </tr>
+ <tr>
+ <td>
+ <div class="col-md-8">Run paragraph</div>
+ </td>
+ <td>
+ <div class="keys">
+ <kbd class="kbd-default">Shift</kbd> + <kbd
class="kbd-default">Enter</kbd>
+ </div>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <div class="col-md-8">Run all above paragraphs (exclusive)</div>
+ </td>
+ <td>
+ <div class="keys">
+ <kbd class="kbd-default">Ctrl</kbd> + <kbd
class="kbd-default">Shift</kbd> + <kbd class="kbd-default">UP</kbd>
+ </div>
+ </td>
+ </tr>
+
+ <tr>
+ <td>
+ <div class="col-md-8">Run all below paragraphs (inclusive)</div>
+ </td>
+ <td>
+ <div class="keys">
+ <kbd class="kbd-default">Ctrl</kbd> + <kbd
class="kbd-default">Shift</kbd> + <kbd class="kbd-default">DOWN</kbd>
+ </div>
+ </td>
+ </tr>
+
+ <tr>
+ <td>
+ <div class="col-md-8">Cancel</div>
+ </td>
+ <td>
+ <div class="keys">
+ <kbd class="kbd-default">Ctrl</kbd> + <kbd
class="kbd-default">{{ isMac ? 'Option' : 'Alt'}}</kbd> + <kbd
class="kbd-default">C</kbd>
+ </div>
+ </td>
+ </tr>
+
+ <tr>
+ <td>
+ <div class="col-md-8">Move cursor Up</div>
+ </td>
+ <td>
+ <div class="keys">
+ <kbd class="kbd-default">Ctrl</kbd> + <kbd
class="kbd-default">P</kbd>
+ </div>
+ </td>
+ </tr>
+
+ <tr>
+ <td>
+ <div class="col-md-8">Move cursor Down</div>
+ </td>
+ <td>
+ <div class="keys">
+ <kbd class="kbd-default">Ctrl</kbd> + <kbd
class="kbd-default">N</kbd>
+ </div>
+ </td>
+ </tr>
+
+ <tr>
+ <td>
+ <div class="col-md-8">Remove paragraph</div>
+ </td>
+ <td>
+ <div class="keys">
+ <kbd class="kbd-default">Ctrl</kbd> + <kbd
class="kbd-default">{{ isMac ? 'Option' : 'Alt'}}</kbd> + <kbd
class="kbd-default">D</kbd>
+ </div>
+ </td>
+ </tr>
+
+ <tr>
+ <td>
+ <div class="col-md-8">Insert new paragraph above</div>
+ </td>
+ <td>
+ <div class="keys">
+ <kbd class="kbd-default">Ctrl</kbd> + <kbd
class="kbd-default">{{ isMac ? 'Option' : 'Alt'}}</kbd> + <kbd
class="kbd-default">A</kbd>
+ </div>
+ </td>
+ </tr>
+
+ <tr>
+ <td>
+ <div class="col-md-8">Insert new paragraph below</div>
+ </td>
+ <td>
+ <div class="keys">
+ <kbd class="kbd-default">Ctrl</kbd> + <kbd
class="kbd-default">{{ isMac ? 'Option' : 'Alt'}}</kbd> + <kbd
class="kbd-default">B</kbd>
+ </div>
+ </td>
+ </tr>
+
+ <tr>
+ <td>
+ <div class="col-md-8">Insert copy of paragraph below</div>
+ </td>
+ <td>
+ <div class="keys">
+ <kbd class="kbd-default">Ctrl</kbd> + <kbd
class="kbd-default">Shift</kbd> + <kbd class="kbd-default">C</kbd>
+ </div>
+ </td>
+ </tr>
+
+ <tr>
+ <td>
+ <div class="col-md-8">Move paragraph Up</div>
+ </td>
+ <td>
+ <div class="keys">
+ <kbd class="kbd-default">Ctrl</kbd> + <kbd
class="kbd-default">{{ isMac ? 'Option' : 'Alt'}}</kbd> + <kbd
class="kbd-default">K</kbd>
+ </div>
+ </td>
+ </tr>
+
+ <tr>
+ <td>
+ <div class="col-md-8">Move paragraph Down</div>
+ </td>
+ <td>
+ <div class="keys">
+ <kbd class="kbd-default">Ctrl</kbd> + <kbd
class="kbd-default">{{ isMac ? 'Option' : 'Alt'}}</kbd> + <kbd
class="kbd-default">J</kbd>
+ </div>
+ </td>
+ </tr>
+
+ <tr>
+ <td>
+ <div class="col-md-8">Enable/Disable run paragraph</div>
+ </td>
+ <td>
+ <div class="keys">
+ <kbd class="kbd-default">Ctrl</kbd> + <kbd
class="kbd-default">{{ isMac ? 'Option' : 'Alt' }}</kbd> + <kbd
class="kbd-default">R</kbd>
+ </div>
+ </td>
+ </tr>
+
+ <tr>
+ <td>
+ <div class="col-md-8">Toggle output</div>
+ </td>
+ <td>
+ <div class="keys">
+ <kbd class="kbd-default">Ctrl</kbd> + <kbd
class="kbd-default">{{ isMac ? 'Option' : 'Alt'}}</kbd> + <kbd
class="kbd-default">O</kbd>
+ </div>
+ </td>
+ </tr>
+
+ <tr>
+ <td>
+ <div class="col-md-8">Toggle editor</div>
+ </td>
+ <td>
+ <div class="keys">
+ <kbd class="kbd-default">Ctrl</kbd> + <kbd
class="kbd-default">{{ isMac ? 'Option' : 'Alt'}}</kbd> + <kbd
class="kbd-default">E</kbd>
+ </div>
+ </td>
+ </tr>
+
+ <tr>
+ <td>
+ <div class="col-md-8">Toggle line number</div>
+ </td>
+ <td>
+ <div class="keys">
+ <kbd class="kbd-default">Ctrl</kbd> + <kbd
class="kbd-default">{{ isMac ? 'Option' : 'Alt'}}</kbd> + <kbd
class="kbd-default">M</kbd>
+ </div>
+ </td>
+ </tr>
+
+ <tr>
+ <td>
+ <div class="col-md-8">Toggle title</div>
+ </td>
+ <td>
+ <div class="keys">
+ <kbd class="kbd-default">Ctrl</kbd> + <kbd
class="kbd-default">{{ isMac ? 'Option' : 'Alt'}}</kbd> + <kbd
class="kbd-default">T</kbd>
+ </div>
+ </td>
+ </tr>
+
+ <tr>
+ <td>
+ <div class="col-md-8">Clear output</div>
+ </td>
+ <td>
+ <div class="keys">
+ <kbd class="kbd-default">Ctrl</kbd> + <kbd
class="kbd-default">{{ isMac ? 'Option' : 'Alt'}}</kbd> + <kbd
class="kbd-default">L</kbd>
+ </div>
+ </td>
+ </tr>
+
+ <tr>
+ <td>
+ <div class="col-md-8">Link this paragraph</div>
+ </td>
+ <td>
+ <div class="keys">
+ <kbd class="kbd-default">Ctrl</kbd> + <kbd
class="kbd-default">{{ isMac ? 'Option' : 'Alt'}}</kbd> + <kbd
class="kbd-default">W</kbd>
+ </div>
+ </td>
+ </tr>
+
+ <tr>
+ <td>
+ <div class="col-md-8">Reduce paragraph width</div>
+ </td>
+ <td>
+ <div class="keys">
+ <kbd class="kbd-default">Ctrl</kbd> + <kbd
class="kbd-default">Shift</kbd> + <kbd class="kbd-default">-</kbd>
+ </div>
+ </td>
+ </tr>
+
+ <tr>
+ <td>
+ <div class="col-md-8">Increase paragraph width</div>
+ </td>
+ <td>
+ <div class="keys">
+ <kbd class="kbd-default">Ctrl</kbd> + <kbd
class="kbd-default">Shift</kbd> + <kbd class="kbd-default">+</kbd>
+ </div>
+ </td>
+ </tr>
+ <br/>
+ <tr class="sub-title">
+ <th style="width:70%">Editor Keyboard Shortcuts</th>
+ <th></th>
+ </tr>
+
+ <tr>
+ <td>
+ <div class="col-md-8">Cut the line</div>
+ </td>
+ <td>
+ <div class="keys">
+ <kbd class="kbd-default">Ctrl</kbd> + <kbd
class="kbd-default">K</kbd>
+ </div>
+ </td>
+ </tr>
+
+ <tr>
+ <td>
+ <div class="col-md-8">Paste the line</div>
+ </td>
+ <td>
+ <div class="keys">
+ <kbd class="kbd-default">Ctrl</kbd> + <kbd
class="kbd-default">Y</kbd>
+ </div>
+ </td>
+ </tr>
+
+ <tr>
+ <td>
+ <div class="col-md-8">Search inside the code</div>
+ </td>
+ <td>
+ <div class="keys">
+ <kbd class="kbd-default">Ctrl</kbd> + <kbd
class="kbd-default">S</kbd>
+ </div>
+ </td>
+ </tr>
+
+ <tr>
+ <td>
+ <div class="col-md-8">Move cursor to the beginning</div>
+ </td>
+ <td>
+ <div class="keys">
+ <kbd class="kbd-default">Ctrl</kbd> + <kbd
class="kbd-default">A</kbd>
+ </div>
+ </td>
+ </tr>
+
+ <tr>
+ <td>
+ <div class="col-md-8">Move cursor at the end</div>
+ </td>
+ <td>
+ <div class="keys">
+ <kbd class="kbd-default">Ctrl</kbd> + <kbd
class="kbd-default">E</kbd>
+ </div>
+ </td>
+ </tr>
+
+ <tr>
+ <td>
+ <div class="col-md-8">Find in code</div>
+ </td>
+ <td>
+ <div class="keys">
+ <kbd class="kbd-default">Ctrl</kbd> + <kbd
class="kbd-default">{{ isMac ? 'Option' : 'Alt'}}</kbd> + <kbd
class="kbd-default">F</kbd>
+ </div>
+ </td>
+ </tr>
+ </table>
+ </div>
+ </div>
+ </div>
+</div>
diff --git a/zeppelin-web-angular/src/app/share/shortcut/shortcut.component.ts
b/zeppelin-web-angular/src/app/share/shortcut/shortcut.component.ts
new file mode 100644
index 0000000000..623f2dd890
--- /dev/null
+++ b/zeppelin-web-angular/src/app/share/shortcut/shortcut.component.ts
@@ -0,0 +1,22 @@
+/*
+ * 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 { Component, OnInit } from '@angular/core';
+
+@Component({
+ selector: 'zeppelin-shortcut',
+ templateUrl: './shortcut.component.html'
+})
+export class ShortcutComponent implements OnInit {
+ isMac = navigator.appVersion.indexOf('Mac') !== -1;
+ ngOnInit() {}
+}
