[ZEPPELIN-4321] Support shortcuts for the paragraphs

zeppelin-web-angular/package.json

@@ -44,8 +44,6 @@
     "zone.js": "~0.9.1"
   },
   "devDependencies": {
-    "monaco-editor-webpack-plugin": "^1.7.0",
-    "ngx-build-plus": "^8.1.5",
     "@angular-devkit/build-angular": "^0.803.9",
     "@angular-devkit/build-ng-packagr": "~0.803.6",
     "@angular/cli": "~8.3.9",
@@ -61,7 +59,7 @@
     "codelyzer": "^5.0.0",
     "dotenv": "^8.0.0",
     "https-proxy-agent": "^2.2.1",
-    "husky": "^2.2.0",
+    "husky": "^3.0.9",
     "jasmine-core": "~3.4.0",
     "jasmine-spec-reporter": "~4.2.1",
     "karma": "~4.1.0",
@@ -70,7 +68,9 @@
     "karma-jasmine": "~2.0.1",
     "karma-jasmine-html-reporter": "^1.4.0",
     "lint-staged": "^8.1.6",
+    "monaco-editor-webpack-plugin": "^1.7.0",
     "ng-packagr": "^5.4.0",
+    "ngx-build-plus": "^8.1.5",
     "prettier": "^1.17.0",
     "protractor": "~5.4.0",
     "ts-node": "~7.0.0",

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

@@ -36,8 +36,10 @@
   <div class="paragraph-area">
     <div class="paragraph-inner" nz-row>
       <zeppelin-notebook-paragraph nz-col
-                                   *ngFor="let p of note.paragraphs;let first = first; let last = last;"
+                                   *ngFor="let p of note.paragraphs;let first = first; let last = last; index as i"
                                    [nzSpan]="p.config.colWidth * 2"
+                                   [select]="p.id === selectId"
+                                   [index]="i"
                                    [paragraph]="p"
                                    [note]="note"
                                    [looknfeel]="note.config.looknfeel"
@@ -47,6 +49,8 @@
                                    [revisionView]="revisionView"
                                    [first]="first"
                                    [last]="last"
+                                   (selectAtIndex)="onSelectAtIndex($event)"
+                                   (selected)="onParagraphSelect($event)"
                                    (triggerSaveParagraph)="saveParagraph($event)"
                                    (saveNoteTimer)="startSaveTimer()"></zeppelin-notebook-paragraph>
     </div>

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

@@ -21,7 +21,7 @@ import {
 } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { isNil } from 'lodash';
-import { Subject } from 'rxjs';
+import { Subject} from 'rxjs';
 import { distinctUntilKeyChanged, takeUntil } from 'rxjs/operators';
 
 import { MessageListener, MessageListenersManager } from '@zeppelin/core';
@@ -48,6 +48,7 @@ export class NotebookComponent extends MessageListenersManager implements OnInit
   private destroy$ = new Subject();
   note: Note['note'];
   permissions: Permissions;
+  selectId: string | null = null;
   isOwner = true;
   noteRevisions: RevisionListItem[] = [];
   currentRevision: string;
@@ -216,6 +217,17 @@ export class NotebookComponent extends MessageListenersManager implements OnInit
     }, 10000);
   }
 
+  onParagraphSelect(id: string) {
+    this.selectId = id;
+  }
+
+  onSelectAtIndex(index: number) {
+    const scopeIndex = Math.min(this.note.paragraphs.length, Math.max(0, index));
+    if (this.note.paragraphs[scopeIndex]) {
+      this.selectId = this.note.paragraphs[scopeIndex].id;
+    }
+  }
+
   saveNote() {
     if (this.note && this.note.paragraphs && this.listOfNotebookParagraphComponent) {
       this.listOfNotebookParagraphComponent.toArray().forEach(p => {
@@ -276,7 +288,7 @@ export class NotebookComponent extends MessageListenersManager implements OnInit
     private noteVarShareService: NoteVarShareService,
     private ticketService: TicketService,
     private securityService: SecurityService,
-    private router: Router
+    private router: Router,
   ) {
     super(messageService);
   }

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

@@ -55,6 +55,7 @@ export class NotebookParagraphCodeEditorComponent implements OnChanges, OnDestro
   @Input() pid: string;
   @Output() readonly textChanged = new EventEmitter<string>();
   @Output() readonly editorBlur = new EventEmitter<void>();
+  @Output() readonly editorFocus = new EventEmitter<void>();
   private editor: IStandaloneCodeEditor;
   private monacoDisposables: IDisposable[] = [];
   height = 0;
@@ -76,6 +77,7 @@ export class NotebookParagraphCodeEditorComponent implements OnChanges, OnDestro
     this.monacoDisposables.push(
       editor.onDidFocusEditorText(() => {
         this.ngZone.runOutsideAngular(() => {
+          this.editorFocus.emit();
           editor.updateOptions({ renderLineHighlight: 'all' });
         });
       }),
@@ -85,6 +87,7 @@ export class NotebookParagraphCodeEditorComponent implements OnChanges, OnDestro
           editor.updateOptions({ renderLineHighlight: 'none' });
         });
       }),
+
       editor.onDidChangeModelContent(() => {
         this.ngZone.run(() => {
           this.text = editor.getModel().getValue();
@@ -123,6 +126,16 @@ export class NotebookParagraphCodeEditorComponent implements OnChanges, OnDestro
       });
     }
 
+    this.editor.addCommand(
+      monaco.KeyCode.Escape,
+      () => {
+        if (document.activeElement instanceof HTMLElement) {
+          document.activeElement.blur();
+        }
+      },
+      '!suggestWidgetVisible'
+    );
+
     this.updateEditorOptions();
     this.setParagraphMode();
     this.initEditorListener();

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

@@ -71,6 +71,7 @@ export class NotebookParagraphControlComponent implements OnInit, OnChanges {
   @Output() readonly runAllAbove = new EventEmitter<void>();
   @Output() readonly runAllBelowAndCurrent = new EventEmitter<void>();
   @Output() readonly cloneParagraph = new EventEmitter<void>();
+  @Output() readonly removeParagraph = new EventEmitter<void>();
   fontSizeOption = [9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];
   dropdownVisible = false;
   isMac = navigator.appVersion.indexOf('Mac') !== -1;
@@ -190,7 +191,7 @@ export class NotebookParagraphControlComponent implements OnInit, OnChanges {
         show: this.paragraphLength > 1,
         disabled: this.isEntireNoteRunning,
         icon: 'delete',
-        trigger: () => this.removeParagraph(),
+        trigger: () => this.onRemoveParagraph(),
         shortCut: `Ctrl+${this.isMac ? 'Option' : 'Alt'}+D`,
         keyBindings: monaco ? [monaco.KeyMod.WinCtrl | monaco.KeyMod.Alt | monaco.KeyCode.KEY_D] : []
       }
@@ -258,25 +259,8 @@ export class NotebookParagraphControlComponent implements OnInit, OnChanges {
     }
   }
 
-  removeParagraph() {
-    if (!this.isEntireNoteRunning) {
-      if (this.paragraphLength === 1) {
-        this.nzModalService.warning({
-          nzTitle: `Warning`,
-          nzContent: `All the paragraphs can't be deleted`
-        });
-      } else {
-        this.nzModalService.confirm({
-          nzTitle: 'Delete Paragraph',
-          nzContent: 'Do you want to delete this paragraph?',
-          nzOnOk: () => {
-            this.messageService.paragraphRemove(this.pid);
-            this.cdr.markForCheck();
-            // TODO(hsuanxyz) moveFocusToNextParagraph
-          }
-        });
-      }
-    }
+  onRemoveParagraph() {
+    this.removeParagraph.emit();
   }
 
   trigger(event: EventEmitter<void>) {

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

@@ -14,7 +14,10 @@
   <zeppelin-notebook-add-paragraph *ngIf="!revisionView && looknfeel !== 'report'"
                                    [disabled]="isEntireNoteRunning"
                                    (addParagraph)="insertParagraph('above')"></zeppelin-notebook-add-paragraph>
-  <div class="paragraph" [class.simple]="looknfeel !== 'default'" [class.report]="looknfeel === 'report'">
+  <div class="paragraph"
+       [class.focused]="select"
+       [class.simple]="looknfeel !== 'default'"
+       [class.report]="looknfeel === 'report'">
     <zeppelin-elastic-input *ngIf="paragraph.config.title"
                             [value]="paragraph.title"
                             [min]="true"
@@ -39,6 +42,7 @@
                                          [(editorHide)]="paragraph.config.editorHide"
                                          [(runOnSelectionChange)]="paragraph.config.runOnSelectionChange"
                                          (tableHideChange)="commitParagraph()"
+                                         (removeParagraph)="removeParagraph()"
                                          (colWidthChange)="changeColWidth(true)"
                                          (fontSizeChange)="commitParagraph()"
                                          (editorHideChange)="commitParagraph()"
@@ -65,7 +69,8 @@
                                              [lineNumbers]="paragraph.config.lineNumbers"
                                              [readOnly]="isEntireNoteRunning || isParagraphRunning || revisionView"
                                              [language]="paragraph.config.editorSetting?.language"
-                                             (editorBlur)="saveParagraph()"
+                                             (editorBlur)="onEditorBlur()"
+                                             (editorFocus)="onEditorFocus()"
                                              (textChanged)="textChanged($event)"></zeppelin-notebook-paragraph-code-editor>
     <zeppelin-notebook-paragraph-progress *ngIf="paragraph.status === 'RUNNING'"
                                           [progress]="progress"></zeppelin-notebook-paragraph-progress>

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

@@ -18,13 +18,18 @@
 }
 
 .themeMixin({
+
   .paragraph {
     background: @component-background;
     border: 1px solid @border-color-split;
     box-shadow: @card-shadow;
     padding: 32px 12px 12px 12px;
     position: relative;
 
+    &.focused {
+      box-shadow: 0 0 5px rgba(0, 0, 0, 0.46);
+    }
+
     zeppelin-notebook-paragraph-code-editor + zeppelin-notebook-paragraph-dynamic-forms {
       margin-top: 24px;
     }