[ZEPPELIN-6162] Implement revisions comparator for New UI

zeppelin-web-angular/projects/zeppelin-sdk/src/interfaces/message-data-type-map.interface.ts

@@ -34,6 +34,7 @@ import {
   NoteRename,
   NoteRevision,
   NoteRevisionForCompare,
+  NoteRevisionForCompareReceived,
   NoteRunningStatus,
   NoteUpdate,
   NoteUpdated,
@@ -118,6 +119,7 @@ export interface MessageReceiveDataTypeMap {
   [OP.ANGULAR_OBJECT_UPDATE]: AngularObjectUpdate;
   [OP.ANGULAR_OBJECT_REMOVE]: AngularObjectRemove;
   [OP.PARAS_INFO]: ParasInfo;
+  [OP.NOTE_REVISION_FOR_COMPARE]: NoteRevisionForCompareReceived;
 }
 
 export interface MessageSendDataTypeMap {

zeppelin-web-angular/projects/zeppelin-sdk/src/interfaces/message-notebook.interface.ts

@@ -125,6 +125,13 @@ export interface NoteRevisionForCompare {
   position: string;
 }
 
+export interface NoteRevisionForCompareReceived {
+  noteId: string;
+  revisionId: string;
+  position: string;
+  note: Note['note'];
+}
+
 export interface CollaborativeModeStatus {
   status: boolean;
   users: string[];

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

@@ -56,7 +56,11 @@
           [(activatedExtension)]="activatedExtension"
           [permissions]="permissions"
         ></zeppelin-notebook-permissions>
-        <zeppelin-notebook-revisions-comparator *ngSwitchCase="'revisions'"></zeppelin-notebook-revisions-comparator>
+        <zeppelin-notebook-revisions-comparator
+          *ngSwitchCase="'revisions'"
+          [noteRevisions]="noteRevisions"
+          [noteId]="note.id"
+        ></zeppelin-notebook-revisions-comparator>
       </div>
       <div class="paragraph-area">
         <zeppelin-note-form-block

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

@@ -33,6 +33,8 @@ import { NzRadioModule } from 'ng-zorro-antd/radio';
 import { NzResizableModule } from 'ng-zorro-antd/resizable';
 import { NzSelectModule } from 'ng-zorro-antd/select';
 import { NzSwitchModule } from 'ng-zorro-antd/switch';
+import { NzTableModule } from 'ng-zorro-antd/table';
+import { NzTagModule } from 'ng-zorro-antd/tag';
 import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
 
 import { ShareModule } from '@zeppelin/share';
@@ -98,7 +100,9 @@ import { NotebookSidebarComponent } from './sidebar/sidebar.component';
     DragDropModule,
     NzCodeEditorModule,
     NzCheckboxModule,
-    NzResizableModule
+    NzResizableModule,
+    NzTableModule,
+    NzTagModule
   ]
 })
 export class NotebookModule {}

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

@@ -10,10 +10,111 @@
   ~ limitations under the License.
   -->
 
-<div class="revisions-comarator">
-  <div>
-    <h2>Revisions comparator</h2>
+<div class="revisions-comparator" nz-row [nzGutter]="16">
+  <div nz-col [nzSpan]="8">
+    <div class="commit-tree">
+      <nz-table
+        #revisionTable
+        [nzData]="sortedRevisions"
+        [nzShowPagination]="false"
+        [nzScroll]="{ y: '25vh' }"
+        nzSize="small"
+      >
+        <thead>
+          <tr>
+            <th>Revision name</th>
+            <th>Date</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr
+            *ngFor="let revision of revisionTable.data; let i = index; let last = last"
+            [class.cursor-hand]="!last"
+            [class.selected-revision]="revision.message === currentSecondRevisionLabel"
+            (click)="!last && onRevisionRowClick(i)"
+          >
+            <td>{{ revision.message }}</td>
+            <td>{{ formatRevisionDate(revision.time) }}</td>
+          </tr>
+        </tbody>
+      </nz-table>
+    </div>
+
+    <div class="revisions-comparator-bar">
+      <nz-select
+        *ngIf="noteRevisions.length > 0"
+        class="revision-select"
+        [ngModel]="selectedFirstRevisionId"
+        nzPlaceHolder="Choose..."
+        (ngModelChange)="onFirstRevisionSelect($event)"
+      >
+        <nz-option
+          *ngFor="let revision of sortedRevisions"
+          [nzValue]="revision.id"
+          [nzLabel]="revision.message + (revision.time ? ' - ' + formatRevisionDate(revision.time) : '')"
+        ></nz-option>
+      </nz-select>
+      <span class="compare-label">compare with</span>
+      <nz-select
+        *ngIf="noteRevisions.length > 0"
+        class="revision-select"
+        [ngModel]="selectedSecondRevisionId"
+        [nzDisabled]="firstNoteRevisionForCompare === null"
+        nzPlaceHolder="Choose..."
+        (ngModelChange)="onSecondRevisionSelect($event)"
+      >
+        <nz-option
+          *ngFor="let revision of sortedRevisions"
+          [nzValue]="revision.id"
+          [nzLabel]="revision.message + (revision.time ? ' - ' + formatRevisionDate(revision.time) : '')"
+        ></nz-option>
+      </nz-select>
+    </div>
+
+    <div class="diff-panel">
+      <div class="paragraphs-div">
+        <div
+          *ngFor="let p of mergeNoteRevisionsDiff"
+          class="paragraph-item"
+          [class.paragraph-item-selected]="currentParagraphDiffDisplay?.paragraph?.id === p.paragraph.id"
+          (click)="changeCurrentParagraphDiffDisplay(p.paragraph.id)"
+        >
+          <div class="paragraph-item-heading">
+            <span class="paragraph-id">{{ p.paragraph.id }}</span>
+            <strong *ngIf="p.paragraph.title" class="paragraph-title">({{ p.paragraph.title }})</strong>
+            <nz-tag *ngIf="p.type === 'added'" nzColor="green">added</nz-tag>
+            <nz-tag *ngIf="p.type === 'deleted'" nzColor="red">deleted</nz-tag>
+            <nz-tag *ngIf="p.type === 'compared' && !p.identical" nzColor="orange">differences</nz-tag>
+            <nz-tag *ngIf="p.type === 'compared' && p.identical" nzColor="default">identical</nz-tag>
+            <span class="paragraph-first-string">{{ p.firstString }}</span>
+          </div>
+        </div>
+        <div *ngIf="currentSecondRevisionLabel === 'Choose...'" class="empty-paragraph-message">
+          Please select a revision
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div nz-col [nzSpan]="16" class="code-panel-col">
+    <span class="code-panel-title">
+      Revision:
+      <strong>{{ currentFirstRevisionLabel }} --> {{ currentSecondRevisionLabel }}</strong>
+    </span>
+    <pre *ngIf="currentParagraphDiffDisplay?.type === 'added'" class="code-panel color-green-row">{{
+      currentParagraphDiffDisplay?.paragraph?.text
+    }}</pre>
+    <pre *ngIf="currentParagraphDiffDisplay?.type === 'deleted'" class="code-panel color-red-row">{{
+      currentParagraphDiffDisplay?.paragraph?.text
+    }}</pre>
+    <pre *ngIf="currentParagraphDiffDisplay?.type === 'compared'" class="code-panel"><span
+        *ngFor="let seg of currentParagraphDiffDisplay?.segments"
+        [class.color-green-row]="seg.type === 'insert'"
+        [class.color-red-row]="seg.type === 'delete'"
+        [class.color-black]="seg.type === 'equal'"
+      >{{ seg.text }}</span></pre>
+    <pre *ngIf="currentParagraphDiffDisplay === null" class="code-panel empty-code-panel">
+      <div>Nothing to display</div>
+    </pre>
   </div>
-  <nz-divider></nz-divider>
-  <div></div>
 </div>

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

@@ -9,4 +9,150 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+@import "theme-mixin";
 
+.themeMixin({
+  .revisions-comparator {
+    padding: 10px 15px 15px;
+  }
+
+  .commit-tree {
+    margin-bottom: 10px;
+
+    ::ng-deep .ant-table-body {
+      overflow-y: auto !important;
+    }
+  }
+
+  .cursor-hand {
+    cursor: pointer;
+  }
+
+  .selected-revision {
+    background-color: fade(@primary-6, 15%) !important;
+  }
+
+  .revisions-comparator-bar {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding-bottom: 12px;
+    flex-wrap: wrap;
+
+    .revision-select {
+      flex: 1;
+      min-width: 100px;
+      display: block;
+    }
+
+    .compare-label {
+      white-space: nowrap;
+    }
+  }
+
+  .diff-panel {
+    border: 1px solid @border-color-base;
+    border-radius: 4px;
+  }
+
+  .paragraphs-div {
+    overflow: auto;
+    max-height: 35vh;
+  }
+
+  .paragraph-item {
+    transition: background-color 200ms ease-out;
+    border-bottom: 1px solid @border-color-split;
+    cursor: pointer;
+
+    &:hover {
+      background-color: fade(@primary-6, 8%);
+    }
+
+    &.paragraph-item-selected {
+      background-color: fade(@primary-6, 15%);
+    }
+  }
+
+  .paragraph-item-heading {
+    padding: 8px 12px;
+  }
+
+  .paragraph-id {
+    font-family: monospace;
+    font-size: 12px;
+    color: @text-color-secondary;
+  }
+
+  .paragraph-title {
+    padding: 0 5px;
+  }
+
+  .paragraph-first-string {
+    display: block;
+    height: 1.8em;
+    overflow: hidden;
+    padding-top: 4px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    font-size: 12px;
+    color: @text-color-secondary;
+  }
+
+  .empty-paragraph-message {
+    font-size: 1.5em;
+    color: @text-color-secondary;
+    text-align: center;
+    padding: 40px 0;
+  }
+
+  .code-panel-col {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .code-panel-title {
+    font-size: 14px;
+    padding: 5px 0 8px;
+  }
+
+  .code-panel {
+    flex: 1;
+    width: 100%;
+    min-height: 50vh;
+    max-height: 70vh;
+    overflow-y: auto;
+    border: 1px solid @border-color-base;
+    border-radius: 4px;
+    padding: 8px;
+    margin: 0;
+    font-size: 13px;
+  }
+
+  .empty-code-panel {
+    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 24px;
+    color: @text-color-secondary;
+  }
+
+  ::ng-deep {
+    .color-green-row {
+      background-color: fade(@green-6, 15%);
+      display: block;
+      color: @green-6;
+    }
+
+    .color-red-row {
+      background-color: fade(@red-6, 15%);
+      display: block;
+      color: @red-6;
+    }
+
+    .color-black {
+      color: inherit;
+    }
+  }
+});