[ZEPPELIN-4450] Provide Angular.js Template Migration Tool

angular/src/main/resources/interpreter-setting.json

@@ -9,5 +9,16 @@
       "editOnDblClick": true,
       "completionSupport": false
     }
+  },
+  {
+    "group": "angular",
+    "name": "ng",
+    "className": "org.apache.zeppelin.angular.AngularInterpreter",
+    "properties": {
+    },
+    "editor": {
+      "editOnDblClick": true,
+      "completionSupport": false
+    }
   }
 ]

zeppelin-web-angular/package.json

@@ -37,6 +37,8 @@
     "mathjax": "2.7.5",
     "monaco-editor": "^0.18.1",
     "ng-zorro-antd": "^8.4.0",
+    "ng1-template-updater": "0.0.4",
+    "parse5": "^5.1.1",
     "rxjs": "~6.5.3",
     "systemjs": "^5.0.0",
     "tslib": "^1.9.0",
@@ -56,6 +58,7 @@
     "@types/lodash": "^4.14.124",
     "@types/mathjax": "^0.0.35",
     "@types/node": "~8.9.4",
+    "@types/parse5": "^5.0.2",
     "codelyzer": "^5.0.0",
     "dotenv": "^8.0.0",
     "https-proxy-agent": "^2.2.1",

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

@@ -11,6 +11,7 @@
   -->
 
 <zeppelin-code-editor [style.height.px]="height"
-                     [class.dirty]="dirty"
-                     (nzEditorInitialized)="initializedEditor($event)">
+                      [class.focused]="focus"
+                      [class.dirty]="dirty"
+                      (nzEditorInitialized)="initializedEditor($event)">
 </zeppelin-code-editor>

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

@@ -18,14 +18,18 @@
 
 .themeMixin({
 
-  zeppelin-monaco-editor {
+  zeppelin-code-editor {
     display: block;
     border-left: 4px solid @border-color-split;
     overflow: hidden;
 
     &.dirty {
       border-left-color: @warning-color;
     }
+
+    &.focused:not(.dirty) {
+      border-left-color: @primary-color;
+    }
   }
 
 });

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

@@ -76,16 +76,10 @@ export class NotebookParagraphCodeEditorComponent implements OnChanges, OnDestro
     const editor = this.editor;
     this.monacoDisposables.push(
       editor.onDidFocusEditorText(() => {
-        this.ngZone.runOutsideAngular(() => {
-          this.editorFocus.emit();
-          editor.updateOptions({ renderLineHighlight: 'all' });
-        });
+        this.editorFocus.emit();
       }),
       editor.onDidBlurEditorText(() => {
         this.editorBlur.emit();
-        this.ngZone.runOutsideAngular(() => {
-          editor.updateOptions({ renderLineHighlight: 'none' });
-        });
       }),
 
       editor.onDidChangeModelContent(() => {
@@ -110,13 +104,11 @@ export class NotebookParagraphCodeEditorComponent implements OnChanges, OnDestro
 
   initializedEditor(editor: IEditor) {
     this.editor = editor as IStandaloneCodeEditor;
-    this.paragraphControl.updateListOfMenu(monaco);
     if (this.paragraphControl) {
       this.paragraphControl.listOfMenu.forEach((item, index) => {
         this.editor.addAction({
           id: item.icon,
           label: item.label,
-          keybindings: item.keyBindings,
           precondition: null,
           keybindingContext: null,
           contextMenuGroupId: 'navigation',

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

@@ -81,119 +81,114 @@ export class NotebookParagraphControlComponent implements OnInit, OnChanges {
     disabled: boolean;
     icon: string;
     shortCut: string;
-    keyBindings: number[];
     trigger(): void;
   }> = [];
 
-  updateListOfMenu(monaco?) {
+  updateListOfMenu() {
     this.listOfMenu = [
+      {
+        label: 'Run',
+        show: !this.first,
+        disabled: this.isEntireNoteRunning,
+        icon: 'play-circle',
+        trigger: () => this.trigger(this.runParagraph),
+        shortCut: this.isMac ? '⇧+⌘+Enter' : 'Shift+Ctrl+Enter'
+      },
+      {
+        label: 'Run all above',
+        show: !this.first,
+        disabled: this.isEntireNoteRunning,
+        icon: 'up-square',
+        trigger: () => this.trigger(this.runAllAbove),
+        shortCut: this.isMac ? '⇧+⌘+Enter' : 'Shift+Ctrl+Enter'
+      },
+      {
+        label: 'Run all below',
+        show: !this.last,
+        disabled: this.isEntireNoteRunning,
+        icon: 'down-square',
+        trigger: () => this.trigger(this.runAllBelowAndCurrent),
+        shortCut: this.isMac ? '⇧+⌘+Enter' : 'Shift+Ctrl+Enter'
+      },
+      {
+        label: 'Link this paragraph',
+        show: true,
+        disabled: false,
+        icon: 'export',
+        trigger: () => this.goToSingleParagraph(),
+        shortCut: `Ctrl+${this.isMac ? 'Option' : 'Alt'}+W`
+      },
+      {
+        label: 'Clear output',
+        show: true,
+        disabled: this.isEntireNoteRunning,
+        icon: 'fire',
+        trigger: () => this.clearParagraphOutput(),
+        shortCut: this.isMac ? '⌥+⌘+L' : 'Alt+Ctrl+L'
+      },
+      {
+        label: 'Remove',
+        show: this.paragraphLength > 1,
+        disabled: this.isEntireNoteRunning,
+        icon: 'delete',
+        trigger: () => this.onRemoveParagraph(),
+        shortCut: this.isMac ? '⇧+Del (Command)' : 'Shift+Del (Command)'
+      },
       {
         label: 'Move up',
         show: !this.first,
         disabled: this.isEntireNoteRunning,
         icon: 'up',
         trigger: () => this.trigger(this.moveUp),
-        shortCut: `Ctrl+${this.isMac ? 'Option' : 'Alt'}+K`,
-        keyBindings: monaco ? [monaco.KeyMod.WinCtrl | monaco.KeyMod.Alt | monaco.KeyCode.KEY_K] : []
+        shortCut: `${this.isMac ? '⌘' : 'Ctrl'}+K (Command)`
       },
       {
         label: 'Move down',
         show: !this.last,
         disabled: this.isEntireNoteRunning,
         icon: 'down',
         trigger: () => this.trigger(this.moveDown),
-        shortCut: `Ctrl+${this.isMac ? 'Option' : 'Alt'}+J`,
-        keyBindings: monaco ? [monaco.KeyMod.WinCtrl | monaco.KeyMod.Alt | monaco.KeyCode.KEY_J] : []
+        shortCut: `${this.isMac ? '⌘' : 'Ctrl'}+J (Command)`
       },
       {
         label: 'Insert new',
         show: true,
         disabled: this.isEntireNoteRunning,
         icon: 'plus',
         trigger: () => this.trigger(this.insertNew),
-        shortCut: `Ctrl+${this.isMac ? 'Option' : 'Alt'}+B`,
-        keyBindings: monaco ? [monaco.KeyMod.WinCtrl | monaco.KeyMod.Alt | monaco.KeyCode.KEY_B] : []
-      },
-      {
-        label: 'Run all above',
-        show: !this.first,
-        disabled: this.isEntireNoteRunning,
-        icon: 'up-square',
-        trigger: () => this.trigger(this.runAllAbove),
-        shortCut: `Ctrl+Shift+Enter`,
-        keyBindings: monaco ? [monaco.KeyMod.WinCtrl | monaco.KeyMod.Shift | monaco.KeyCode.Enter] : []
-      },
-      {
-        label: 'Run all below',
-        show: !this.last,
-        disabled: this.isEntireNoteRunning,
-        icon: 'down-square',
-        trigger: () => this.trigger(this.runAllBelowAndCurrent),
-        shortCut: `Ctrl+Shift+Enter`,
-        keyBindings: monaco ? [monaco.KeyMod.WinCtrl | monaco.KeyMod.Shift | monaco.KeyCode.Enter] : []
+        shortCut: `B (Command)`
       },
       {
         label: 'Clone paragraph',
         show: true,
         disabled: this.isEntireNoteRunning,
         icon: 'copy',
         trigger: () => this.trigger(this.cloneParagraph),
-        shortCut: `Ctrl+Shift+C`,
-        keyBindings: monaco ? [monaco.KeyMod.WinCtrl | monaco.KeyMod.Shift | monaco.KeyCode.KEY_C] : []
+        shortCut: `C (Command)`
       },
       {
         label: this.title ? 'Hide Title' : 'Show Title',
         show: true,
         disabled: false,
         icon: 'font-colors',
         trigger: () => this.toggleTitle(),
-        shortCut: `Ctrl+${this.isMac ? 'Option' : 'Alt'}+T`,
-        keyBindings: monaco ? [monaco.KeyMod.WinCtrl | monaco.KeyMod.Alt | monaco.KeyCode.KEY_T] : []
+        shortCut: `T (Command)`
       },
       {
         label: this.lineNumbers ? 'Hide line numbers' : 'Show line numbers',
         show: true,
         disabled: false,
         icon: 'ordered-list',
         trigger: () => this.toggleLineNumbers(),
-        shortCut: `Ctrl+${this.isMac ? 'Option' : 'Alt'}+M`,
-        keyBindings: monaco ? [monaco.KeyMod.WinCtrl | monaco.KeyMod.Alt | monaco.KeyCode.KEY_M] : []
+        shortCut: `L (Command)`
       },
       {
         label: this.enabled ? 'Disable run' : 'Enable run',
         show: true,
         disabled: this.isEntireNoteRunning,
         icon: 'api',
         trigger: () => this.toggleEnabled(),
-        shortCut: `Ctrl+${this.isMac ? 'Option' : 'Alt'}+R`,
-        keyBindings: monaco ? [monaco.KeyMod.WinCtrl | monaco.KeyMod.Alt | monaco.KeyCode.KEY_R] : []
-      },
-      {
-        label: 'Link this paragraph',
-        show: true,
-        disabled: false,
-        icon: 'export',
-        trigger: () => this.goToSingleParagraph(),
-        shortCut: `Ctrl+${this.isMac ? 'Option' : 'Alt'}+W`,
-        keyBindings: monaco ? [monaco.KeyMod.WinCtrl | monaco.KeyMod.Alt | monaco.KeyCode.KEY_W] : []
-      },
-      {
-        label: 'Clear output',
-        show: true,
-        disabled: this.isEntireNoteRunning,
-        icon: 'fire',
-        trigger: () => this.clearParagraphOutput(),
-        shortCut: `Ctrl+${this.isMac ? 'Option' : 'Alt'}+L`,
-        keyBindings: monaco ? [monaco.KeyMod.WinCtrl | monaco.KeyMod.Alt | monaco.KeyCode.KEY_L] : []
-      },
-      {
-        label: 'Remove',
-        show: this.paragraphLength > 1,
-        disabled: this.isEntireNoteRunning,
-        icon: 'delete',
-        trigger: () => this.onRemoveParagraph(),
-        shortCut: `Ctrl+${this.isMac ? 'Option' : 'Alt'}+D`,
-        keyBindings: monaco ? [monaco.KeyMod.WinCtrl | monaco.KeyMod.Alt | monaco.KeyCode.KEY_D] : []
+        shortCut: `R (Command)`
       }
     ];
   }