[ZEPPELIN-6294] Made "Clone paragraph" button work properly in New UI

zeppelin-web-angular/src/app/core/paragraph-base/paragraph-base.ts

@@ -31,6 +31,7 @@ import { NoteStatusService, ParagraphStatus } from '@zeppelin/services/note-stat
 import * as DiffMatchPatch from 'diff-match-patch';
 import { isEmpty, isEqual } from 'lodash';
 
+import { NotebookParagraphCodeEditorComponent } from '@zeppelin/pages/workspace/notebook/paragraph/code-editor/code-editor.component';
 import { NotebookParagraphResultComponent } from '@zeppelin/pages/workspace/share/result/result.component';
 import { ParagraphConfigResults, ParagraphResults } from '../../../../projects/zeppelin-sdk/src';
 import { MessageListener, MessageListenersManager } from '../message-listener/message-listener';
@@ -54,6 +55,7 @@ export abstract class ParagraphBase extends MessageListenersManager {
 
   // Initialized by `ViewChildren` in the class which extends ParagraphBase
   notebookParagraphResultComponents!: QueryList<NotebookParagraphResultComponent>;
+  notebookParagraphCodeEditorComponent?: NotebookParagraphCodeEditorComponent;
 
   constructor(
     public messageService: MessageService,
@@ -142,6 +144,10 @@ export abstract class ParagraphBase extends MessageListenersManager {
         }
         this.cdr.markForCheck();
       });
+      if (this.notebookParagraphCodeEditorComponent) {
+        this.notebookParagraphCodeEditorComponent.editorSettingTriggerAllowed = true;
+        this.notebookParagraphCodeEditorComponent.getEditorSetting();
+      }
       this.cdr.markForCheck();
     }
   }

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

@@ -89,6 +89,7 @@
             (triggerSaveParagraph)="saveParagraph($event)"
             (saveNoteTimer)="startSaveTimer()"
             (searchCode)="actionBar.searchCode()"
+            (enableTriggeredByInsertParagraph)="enableTriggeredByInsertParagraph()"
           ></zeppelin-notebook-paragraph>
         </div>
       </div>

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

@@ -76,6 +76,9 @@ export class NotebookComponent extends MessageListenersManager implements OnInit
   sidebarWidth = 370;
   sidebarAnimationFrame = -1;
   isSidebarOpen = false;
+  // send > CLONE_PARAGRAPH: receive > PARAGRAPH_ADDED → PARAGRAPH → trigger EDITOR_SETTING
+  // send > INSERT_PARAGRAPH: receive > trigger EDITOR_SETTING after PARAGRAPH_ADDED
+  isTriggeredByInsertParagraph = false;
 
   @MessageListener(OP.NOTE)
   getNote(data: MessageReceiveDataTypeMap[OP.NOTE]) {
@@ -111,6 +114,12 @@ export class NotebookComponent extends MessageListenersManager implements OnInit
 
   @MessageListener(OP.INTERPRETER_BINDINGS)
   loadInterpreterBindings(data: MessageReceiveDataTypeMap[OP.INTERPRETER_BINDINGS]) {
+    this.listOfNotebookParagraphComponent.forEach(p => {
+      if (p.notebookParagraphCodeEditorComponent) {
+        p.notebookParagraphCodeEditorComponent.editorSettingTriggerAllowed = true;
+        p.notebookParagraphCodeEditorComponent.getEditorSetting();
+      }
+    });
     this.interpreterBindings = data.interpreterBindings;
     if (!this.interpreterBindings.some(item => item.selected)) {
       this.activatedExtension = 'interpreter';
@@ -139,6 +148,10 @@ export class NotebookComponent extends MessageListenersManager implements OnInit
     this.cdr.markForCheck();
   }
 
+  enableTriggeredByInsertParagraph() {
+    this.isTriggeredByInsertParagraph = true;
+  }
+
   @MessageListener(OP.PARAGRAPH_ADDED)
   addParagraph(data: MessageReceiveDataTypeMap[OP.PARAGRAPH_ADDED]) {
     const { paragraphId } = this.activatedRoute.snapshot.params;
@@ -153,6 +166,15 @@ export class NotebookComponent extends MessageListenersManager implements OnInit
     const paragraphIndex = definedNote.paragraphs.findIndex(p => p.id === data.paragraph.id);
 
     definedNote.paragraphs[paragraphIndex].focus = true;
+    this.cdr.detectChanges();
+    const addedParagraph = this.listOfNotebookParagraphComponent.find((_, index) => index === paragraphIndex)
+      ?.notebookParagraphCodeEditorComponent;
+
+    if (this.isTriggeredByInsertParagraph && addedParagraph) {
+      addedParagraph.editorSettingTriggerAllowed = true;
+      addedParagraph.getEditorSetting();
+      this.isTriggeredByInsertParagraph = false;
+    }
     this.cdr.markForCheck();
   }
 

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

@@ -61,6 +61,9 @@ export class NotebookParagraphCodeEditorComponent implements OnChanges, OnDestro
   private monacoDisposables: IDisposable[] = [];
   height = 18;
   interpreterName?: string;
+  // Prevents EDITOR_SETTING from triggering before the appropriate event:
+  // For CLONE_PARAGRAPH, waits for PARAGRAPH; for INSERT_PARAGRAPH, waits only for PARAGRAPH_ADDED.
+  editorSettingTriggerAllowed: boolean = false;
 
   autoAdjustEditorHeight() {
     const editor = this.editor;
@@ -314,6 +317,9 @@ export class NotebookParagraphCodeEditorComponent implements OnChanges, OnDestro
   }
 
   getEditorSetting() {
+    if (!this.editorSettingTriggerAllowed) {
+      return;
+    }
     this.messageService.editorSetting(this.pid, this.text);
   }
 

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

@@ -85,6 +85,7 @@ export class NotebookParagraphComponent extends ParagraphBase implements OnInit,
   @Output() readonly selected = new EventEmitter<string>();
   @Output() readonly selectAtIndex = new EventEmitter<number>();
   @Output() readonly searchCode = new EventEmitter();
+  @Output() readonly enableTriggeredByInsertParagraph = new EventEmitter<number>();
 
   private destroy$ = new Subject();
   private mode: Mode = 'command';
@@ -289,7 +290,7 @@ export class NotebookParagraphComponent extends ParagraphBase implements OnInit,
 
     const config = this.paragraph.config;
     config.editorHide = false;
-
+    this.blurEditor();
     this.messageService.copyParagraph(
       newIndex,
       this.paragraph.title,
@@ -355,7 +356,9 @@ export class NotebookParagraphComponent extends ParagraphBase implements OnInit,
     if (newIndex < 0 || newIndex > this.note.paragraphs.length) {
       return;
     }
+    this.blurEditor();
     this.messageService.insertParagraph(newIndex);
+    this.enableTriggeredByInsertParagraph.emit();
     this.cdr.markForCheck();
   }