Skip to content

Commit c9605a2

Browse files
dididytbonelee
dididy
authored and
tbonelee
committed
[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 <chanholee@apache.org> (cherry picked from commit 0f20ffc) Signed-off-by: ChanHo Lee <chanholee@apache.org>
1 parent a8385a0 commit c9605a2

File tree

4 files changed

+358
-1
lines changed

4 files changed

+358
-1
lines changed

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

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ import { MessageService, NoteStatusService, SaveAsService, TicketService } from
3131

3232
import { NotebookService } from '@zeppelin/services/notebook.service';
3333
import { NoteCreateComponent } from '@zeppelin/share/note-create/note-create.component';
34+
import { ShortcutComponent } from '@zeppelin/share/shortcut/shortcut.component';
3435

3536
@Component({
3637
selector: 'zeppelin-notebook-action-bar',
@@ -246,7 +247,11 @@ export class NotebookActionBarComponent extends MessageListenersManager implemen
246247
}
247248

248249
showShortCut() {
249-
// TODO(hsuanxyz)
250+
this.nzModalService.info({
251+
nzTitle: `Shortcut Info`,
252+
nzWidth: '600px',
253+
nzContent: ShortcutComponent
254+
});
250255
}
251256

252257
togglePermissions() {

‎zeppelin-web-angular/src/app/share/share.module.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,13 +51,15 @@ import { NoteTocComponent } from '@zeppelin/share/note-toc/note-toc.component';
5151
import { PageHeaderComponent } from '@zeppelin/share/page-header/page-header.component';
5252
import { HumanizeBytesPipe } from '@zeppelin/share/pipes';
5353
import { RunScriptsDirective } from '@zeppelin/share/run-scripts/run-scripts.directive';
54+
import { ShortcutComponent } from '@zeppelin/share/shortcut/shortcut.component';
5455
import { SpinComponent } from '@zeppelin/share/spin/spin.component';
5556
import { ResizeHandleComponent } from './resize-handle';
5657

5758
const MODAL_LIST = [
5859
AboutZeppelinComponent,
5960
NoteImportComponent,
6061
NoteCreateComponent,
62+
ShortcutComponent,
6163
NoteRenameComponent,
6264
FolderRenameComponent
6365
];

‎zeppelin-web-angular/src/app/share/shortcut/shortcut.component.html‎

Lines changed: 328 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,328 @@
1+
<!--
2+
Licensed under the Apache License, Version 2.0 (the "License");
3+
you may not use this file except in compliance with the License.
4+
You may obtain a copy of the License at
5+
6+
http://www.apache.org/licenses/LICENSE-2.0
7+
8+
Unless required by applicable law or agreed to in writing, software
9+
distributed under the License is distributed on an "AS IS" BASIS,
10+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
11+
See the License for the specific language governing permissions and
12+
limitations under the License.
13+
-->
14+
15+
<div class="modal fade" id="shortcutModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
16+
<div class="modal-dialog">
17+
<div class="modal-content">
18+
<div class="table-scroll">
19+
<table class="table table-shortcut">
20+
<tr>
21+
<th style="width:70%">Note Keyboard Shortcuts</th>
22+
<th></th>
23+
</tr>
24+
<tr>
25+
<td>
26+
<div class="col-md-8">Run paragraph</div>
27+
</td>
28+
<td>
29+
<div class="keys">
30+
<kbd class="kbd-default">Shift</kbd> + <kbd class="kbd-default">Enter</kbd>
31+
</div>
32+
</td>
33+
</tr>
34+
<tr>
35+
<td>
36+
<div class="col-md-8">Run all above paragraphs (exclusive)</div>
37+
</td>
38+
<td>
39+
<div class="keys">
40+
<kbd class="kbd-default">Ctrl</kbd> + <kbd class="kbd-default">Shift</kbd> + <kbd class="kbd-default">UP</kbd>
41+
</div>
42+
</td>
43+
</tr>
44+
45+
<tr>
46+
<td>
47+
<div class="col-md-8">Run all below paragraphs (inclusive)</div>
48+
</td>
49+
<td>
50+
<div class="keys">
51+
<kbd class="kbd-default">Ctrl</kbd> + <kbd class="kbd-default">Shift</kbd> + <kbd class="kbd-default">DOWN</kbd>
52+
</div>
53+
</td>
54+
</tr>
55+
56+
<tr>
57+
<td>
58+
<div class="col-md-8">Cancel</div>
59+
</td>
60+
<td>
61+
<div class="keys">
62+
<kbd class="kbd-default">Ctrl</kbd> + <kbd class="kbd-default">{{ isMac ? 'Option' : 'Alt'}}</kbd> + <kbd class="kbd-default">C</kbd>
63+
</div>
64+
</td>
65+
</tr>
66+
67+
<tr>
68+
<td>
69+
<div class="col-md-8">Move cursor Up</div>
70+
</td>
71+
<td>
72+
<div class="keys">
73+
<kbd class="kbd-default">Ctrl</kbd> + <kbd class="kbd-default">P</kbd>
74+
</div>
75+
</td>
76+
</tr>
77+
78+
<tr>
79+
<td>
80+
<div class="col-md-8">Move cursor Down</div>
81+
</td>
82+
<td>
83+
<div class="keys">
84+
<kbd class="kbd-default">Ctrl</kbd> + <kbd class="kbd-default">N</kbd>
85+
</div>
86+
</td>
87+
</tr>
88+
89+
<tr>
90+
<td>
91+
<div class="col-md-8">Remove paragraph</div>
92+
</td>
93+
<td>
94+
<div class="keys">
95+
<kbd class="kbd-default">Ctrl</kbd> + <kbd class="kbd-default">{{ isMac ? 'Option' : 'Alt'}}</kbd> + <kbd class="kbd-default">D</kbd>
96+
</div>
97+
</td>
98+
</tr>
99+
100+
<tr>
101+
<td>
102+
<div class="col-md-8">Insert new paragraph above</div>
103+
</td>
104+
<td>
105+
<div class="keys">
106+
<kbd class="kbd-default">Ctrl</kbd> + <kbd class="kbd-default">{{ isMac ? 'Option' : 'Alt'}}</kbd> + <kbd class="kbd-default">A</kbd>
107+
</div>
108+
</td>
109+
</tr>
110+
111+
<tr>
112+
<td>
113+
<div class="col-md-8">Insert new paragraph below</div>
114+
</td>
115+
<td>
116+
<div class="keys">
117+
<kbd class="kbd-default">Ctrl</kbd> + <kbd class="kbd-default">{{ isMac ? 'Option' : 'Alt'}}</kbd> + <kbd class="kbd-default">B</kbd>
118+
</div>
119+
</td>
120+
</tr>
121+
122+
<tr>
123+
<td>
124+
<div class="col-md-8">Insert copy of paragraph below</div>
125+
</td>
126+
<td>
127+
<div class="keys">
128+
<kbd class="kbd-default">Ctrl</kbd> + <kbd class="kbd-default">Shift</kbd> + <kbd class="kbd-default">C</kbd>
129+
</div>
130+
</td>
131+
</tr>
132+
133+
<tr>
134+
<td>
135+
<div class="col-md-8">Move paragraph Up</div>
136+
</td>
137+
<td>
138+
<div class="keys">
139+
<kbd class="kbd-default">Ctrl</kbd> + <kbd class="kbd-default">{{ isMac ? 'Option' : 'Alt'}}</kbd> + <kbd class="kbd-default">K</kbd>
140+
</div>
141+
</td>
142+
</tr>
143+
144+
<tr>
145+
<td>
146+
<div class="col-md-8">Move paragraph Down</div>
147+
</td>
148+
<td>
149+
<div class="keys">
150+
<kbd class="kbd-default">Ctrl</kbd> + <kbd class="kbd-default">{{ isMac ? 'Option' : 'Alt'}}</kbd> + <kbd class="kbd-default">J</kbd>
151+
</div>
152+
</td>
153+
</tr>
154+
155+
<tr>
156+
<td>
157+
<div class="col-md-8">Enable/Disable run paragraph</div>
158+
</td>
159+
<td>
160+
<div class="keys">
161+
<kbd class="kbd-default">Ctrl</kbd> + <kbd class="kbd-default">{{ isMac ? 'Option' : 'Alt' }}</kbd> + <kbd class="kbd-default">R</kbd>
162+
</div>
163+
</td>
164+
</tr>
165+
166+
<tr>
167+
<td>
168+
<div class="col-md-8">Toggle output</div>
169+
</td>
170+
<td>
171+
<div class="keys">
172+
<kbd class="kbd-default">Ctrl</kbd> + <kbd class="kbd-default">{{ isMac ? 'Option' : 'Alt'}}</kbd> + <kbd class="kbd-default">O</kbd>
173+
</div>
174+
</td>
175+
</tr>
176+
177+
<tr>
178+
<td>
179+
<div class="col-md-8">Toggle editor</div>
180+
</td>
181+
<td>
182+
<div class="keys">
183+
<kbd class="kbd-default">Ctrl</kbd> + <kbd class="kbd-default">{{ isMac ? 'Option' : 'Alt'}}</kbd> + <kbd class="kbd-default">E</kbd>
184+
</div>
185+
</td>
186+
</tr>
187+
188+
<tr>
189+
<td>
190+
<div class="col-md-8">Toggle line number</div>
191+
</td>
192+
<td>
193+
<div class="keys">
194+
<kbd class="kbd-default">Ctrl</kbd> + <kbd class="kbd-default">{{ isMac ? 'Option' : 'Alt'}}</kbd> + <kbd class="kbd-default">M</kbd>
195+
</div>
196+
</td>
197+
</tr>
198+
199+
<tr>
200+
<td>
201+
<div class="col-md-8">Toggle title</div>
202+
</td>
203+
<td>
204+
<div class="keys">
205+
<kbd class="kbd-default">Ctrl</kbd> + <kbd class="kbd-default">{{ isMac ? 'Option' : 'Alt'}}</kbd> + <kbd class="kbd-default">T</kbd>
206+
</div>
207+
</td>
208+
</tr>
209+
210+
<tr>
211+
<td>
212+
<div class="col-md-8">Clear output</div>
213+
</td>
214+
<td>
215+
<div class="keys">
216+
<kbd class="kbd-default">Ctrl</kbd> + <kbd class="kbd-default">{{ isMac ? 'Option' : 'Alt'}}</kbd> + <kbd class="kbd-default">L</kbd>
217+
</div>
218+
</td>
219+
</tr>
220+
221+
<tr>
222+
<td>
223+
<div class="col-md-8">Link this paragraph</div>
224+
</td>
225+
<td>
226+
<div class="keys">
227+
<kbd class="kbd-default">Ctrl</kbd> + <kbd class="kbd-default">{{ isMac ? 'Option' : 'Alt'}}</kbd> + <kbd class="kbd-default">W</kbd>
228+
</div>
229+
</td>
230+
</tr>
231+
232+
<tr>
233+
<td>
234+
<div class="col-md-8">Reduce paragraph width</div>
235+
</td>
236+
<td>
237+
<div class="keys">
238+
<kbd class="kbd-default">Ctrl</kbd> + <kbd class="kbd-default">Shift</kbd> + <kbd class="kbd-default">-</kbd>
239+
</div>
240+
</td>
241+
</tr>
242+
243+
<tr>
244+
<td>
245+
<div class="col-md-8">Increase paragraph width</div>
246+
</td>
247+
<td>
248+
<div class="keys">
249+
<kbd class="kbd-default">Ctrl</kbd> + <kbd class="kbd-default">Shift</kbd> + <kbd class="kbd-default">+</kbd>
250+
</div>
251+
</td>
252+
</tr>
253+
<br/>
254+
<tr class="sub-title">
255+
<th style="width:70%">Editor Keyboard Shortcuts</th>
256+
<th></th>
257+
</tr>
258+
259+
<tr>
260+
<td>
261+
<div class="col-md-8">Cut the line</div>
262+
</td>
263+
<td>
264+
<div class="keys">
265+
<kbd class="kbd-default">Ctrl</kbd> + <kbd class="kbd-default">K</kbd>
266+
</div>
267+
</td>
268+
</tr>
269+
270+
<tr>
271+
<td>
272+
<div class="col-md-8">Paste the line</div>
273+
</td>
274+
<td>
275+
<div class="keys">
276+
<kbd class="kbd-default">Ctrl</kbd> + <kbd class="kbd-default">Y</kbd>
277+
</div>
278+
</td>
279+
</tr>
280+
281+
<tr>
282+
<td>
283+
<div class="col-md-8">Search inside the code</div>
284+
</td>
285+
<td>
286+
<div class="keys">
287+
<kbd class="kbd-default">Ctrl</kbd> + <kbd class="kbd-default">S</kbd>
288+
</div>
289+
</td>
290+
</tr>
291+
292+
<tr>
293+
<td>
294+
<div class="col-md-8">Move cursor to the beginning</div>
295+
</td>
296+
<td>
297+
<div class="keys">
298+
<kbd class="kbd-default">Ctrl</kbd> + <kbd class="kbd-default">A</kbd>
299+
</div>
300+
</td>
301+
</tr>
302+
303+
<tr>
304+
<td>
305+
<div class="col-md-8">Move cursor at the end</div>
306+
</td>
307+
<td>
308+
<div class="keys">
309+
<kbd class="kbd-default">Ctrl</kbd> + <kbd class="kbd-default">E</kbd>
310+
</div>
311+
</td>
312+
</tr>
313+
314+
<tr>
315+
<td>
316+
<div class="col-md-8">Find in code</div>
317+
</td>
318+
<td>
319+
<div class="keys">
320+
<kbd class="kbd-default">Ctrl</kbd> + <kbd class="kbd-default">{{ isMac ? 'Option' : 'Alt'}}</kbd> + <kbd class="kbd-default">F</kbd>
321+
</div>
322+
</td>
323+
</tr>
324+
</table>
325+
</div>
326+
</div>
327+
</div>
328+
</div>

‎zeppelin-web-angular/src/app/share/shortcut/shortcut.component.ts‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
/*
2+
* Licensed under the Apache License, Version 2.0 (the "License");
3+
* you may not use this file except in compliance with the License.
4+
* You may obtain a copy of the License at
5+
* http://www.apache.org/licenses/LICENSE-2.0
6+
* Unless required by applicable law or agreed to in writing, software
7+
* distributed under the License is distributed on an "AS IS" BASIS,
8+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
9+
* See the License for the specific language governing permissions and
10+
* limitations under the License.
11+
*/
12+
13+
import { Component, OnInit } from '@angular/core';
14+
15+
@Component({
16+
selector: 'zeppelin-shortcut',
17+
templateUrl: './shortcut.component.html'
18+
})
19+
export class ShortcutComponent implements OnInit {
20+
isMac = navigator.appVersion.indexOf('Mac') !== -1;
21+
ngOnInit() {}
22+
}

0 commit comments

Comments
 (0)