Conversiation Page Fully Working

src/dotnet/APIView/ClientSPA/src/app/_components/code-panel/code-panel.component.ts

@@ -30,7 +30,7 @@ export class CodePanelComponent implements OnChanges{
   @Input() showLineNumbers: boolean = true;
   @Input() loadFailed : boolean = false;
 
-  @Output() hasActiveConversation : EventEmitter<boolean> = new EventEmitter<boolean>();
+  @Output() hasActiveConversationEmitter : EventEmitter<boolean> = new EventEmitter<boolean>();
 
   noDiffInContentMessage : Message[] = [{ severity: 'info', icon:'bi bi-info-circle', detail: 'There is no difference between the two API revisions.' }];
   isLoading: boolean = true;
@@ -524,16 +524,15 @@ export class CodePanelComponent implements OnChanges{
   }
 
   private updateHasActiveConversations() {
-    let hasActiveConversations = false;
+    let hasActiveConversation = false;
     for (let row of this.codePanelRowData) {
       if (row.type === CodePanelRowDatatype.CommentThread) {
         if (row.comments && row.comments.length > 0 && row.isResolvedCommentThread === false) {
-          hasActiveConversations = true;
-          break;
+          hasActiveConversation = true;
         }
       }
     }
-    this.hasActiveConversation.emit(hasActiveConversations);
+    this.hasActiveConversationEmitter.emit(hasActiveConversation);
   }
 
   private loadCodePanelViewPort() {

src/dotnet/APIView/ClientSPA/src/app/_components/conversations/conversations.component.html

@@ -1,5 +1,6 @@
 <h4>Conversations</h4>
 <p-divider />
+<p *ngIf="commentThreads.size === 0">This Review has no Comments</p>
 <p-timeline [value]="getAPIRevisionWithComments()">
     <ng-template pTemplate="marker" let-apiRevision>
         <i class="bi bi-clock-history"></i>
@@ -18,7 +19,7 @@ <h4>Conversations</h4>
                 <span class="me-2" *ngIf="apiRevision.label">{{ apiRevision.label }}</span>
             </span>
             <div *ngFor="let commentThread of commentThreads.get(apiRevision.id); let isLast = last" class="my-2 conversation-group-threads">
-                <a class="small conversation-group-element-id">{{ commentThread!.comments[0].elementId }}</a>
+                <a class="small conversation-group-element-id" (click)="navigateToCommentThreadOnRevisionPage($event)">{{ commentThread!.comments[0].elementId }}</a>
                 <app-comment-thread [codePanelRowData]="commentThread" [instanceLocation]='"conversations"'
                     (saveCommentActionEmitter)="handleSaveCommentActionEmitter($event)"
                     (deleteCommentActionEmitter)="handleDeleteCommentActionEmitter($event)"

src/dotnet/APIView/ClientSPA/src/app/_components/conversations/conversations.component.scss

@@ -41,4 +41,8 @@
             border: 1px solid var(--alert-secondary-border-color);
         }
     }
+
+    .conversation-group-element-id {
+        cursor: pointer;
+    }
 }

src/dotnet/APIView/ClientSPA/src/app/_components/conversations/conversations.component.spec.ts

@@ -6,6 +6,8 @@ import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { ReviewPageModule } from 'src/app/_modules/review-page/review-page.module';
 import { APIRevision } from 'src/app/_models/revision';
 import { CommentItemModel } from 'src/app/_models/commentItemModel';
+import { ActivatedRoute, convertToParamMap } from '@angular/router';
+import { of } from 'rxjs';
 
 describe('ConversationComponent', () => {
   let component: ConversationsComponent;
@@ -19,6 +21,17 @@ describe('ConversationComponent', () => {
         ReviewPageModule,
         SharedAppModule
       ],
+      providers: [
+        {
+          provide: ActivatedRoute,
+          useValue: {
+            snapshot: {
+              paramMap: convertToParamMap({ reviewId: 'test' }),
+            },
+            queryParams: of(convertToParamMap({ activeApiRevisionId: 'test', diffApiRevisionId: 'test' }))
+          }
+        }
+      ]
     });
     fixture = TestBed.createComponent(ConversationsComponent);
     component = fixture.componentInstance;

src/dotnet/APIView/ClientSPA/src/app/_components/conversations/conversations.component.ts

@@ -1,12 +1,13 @@
-import { ChangeDetectorRef, Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
 import { CodePanelRowData, CodePanelRowDatatype } from 'src/app/_models/codePanelModels';
 import { CommentItemModel, CommentType } from 'src/app/_models/commentItemModel';
 import { APIRevision } from 'src/app/_models/revision';
-import { getTypeClass } from 'src/app/_helpers/common-helpers';
+import { getTypeClass, SCROLL_TO_NODE_QUERY_PARAM } from 'src/app/_helpers/common-helpers';
 import { CommentsService } from 'src/app/_services/comments/comments.service';
 import { take } from 'rxjs';
 import { Review } from 'src/app/_models/review';
 import { UserProfile } from 'src/app/_models/userProfile';
+import { ActivatedRoute, Router } from '@angular/router';
 
 @Component({
   selector: 'app-conversations',
@@ -15,13 +16,18 @@ import { UserProfile } from 'src/app/_models/userProfile';
 })
 export class ConversationsComponent implements OnChanges {
   @Input() apiRevisions: APIRevision[] = [];
+  @Input() activeApiRevisionId: string | null = null;
   @Input() comments: CommentItemModel[] = [];
   @Input() review : Review | undefined = undefined;
   @Input() userProfile : UserProfile | undefined;
 
+  @Output() scrollToNodeEmitter : EventEmitter<string> = new EventEmitter<string>();
+  @Output() numberOfActiveThreadsEmitter : EventEmitter<number> = new EventEmitter<number>();
+
   commentThreads: Map<string, CodePanelRowData[]> = new Map<string, CodePanelRowData[]>();
+  numberOfActiveThreads: number = 0;
 
-  constructor(private commentsService: CommentsService) { }
+  constructor(private commentsService: CommentsService, private route: ActivatedRoute, private router: Router) { }
 
   ngOnChanges(changes: SimpleChanges) {
     if (changes['apiRevisions'] || changes['comments']) {
@@ -33,6 +39,7 @@ export class ConversationsComponent implements OnChanges {
 
   createCommentThreads() {
     this.commentThreads = new Map<string, CodePanelRowData[]>();
+    this.numberOfActiveThreads = 0;
     const apiRevisionInOrder = this.apiRevisions.sort((a, b) => (new Date(b.createdOn) as any) - (new Date(a.createdOn) as any));
     const groupedComments = this.comments
       .reduce((acc: { [key: string]: CommentItemModel[] }, comment) => {
@@ -65,15 +72,20 @@ export class ConversationsComponent implements OnChanges {
           codePanelRowData.comments = comments;
           codePanelRowData.isResolvedCommentThread = comments.some(c => c.isResolved);
 
+          if (!codePanelRowData.isResolvedCommentThread) {
+            this.numberOfActiveThreads++;
+          }
+
           if (this.commentThreads.has(apiRevisionIdForThread)) {
             this.commentThreads.get(apiRevisionIdForThread)?.push(codePanelRowData);
           }
           else {
-          this.commentThreads.set(apiRevisionIdForThread, [codePanelRowData]);
+            this.commentThreads.set(apiRevisionIdForThread, [codePanelRowData]);
           }
         }
       }
     }
+    this.numberOfActiveThreadsEmitter.emit(this.numberOfActiveThreads);
   }
 
   getAPIRevisionWithComments() {
@@ -83,6 +95,18 @@ export class ConversationsComponent implements OnChanges {
   getAPIRevisionTypeClass(apiRevision: APIRevision) {
     return getTypeClass(apiRevision.apiRevisionType);
   }
+
+  navigateToCommentThreadOnRevisionPage(event: Event) {
+    const target = event.target as Element;
+    const revisionIdForConversationGroup = target.closest(".conversation-group-revision-id")?.getAttribute("data-conversation-group-revision-id");
+    const elementIdForConversationGroup = (target.closest(".conversation-group-threads")?.getElementsByClassName("conversation-group-element-id")[0] as HTMLElement).innerText;
+
+    if (this.activeApiRevisionId && this.activeApiRevisionId === revisionIdForConversationGroup) {
+      this.scrollToNodeEmitter.emit(elementIdForConversationGroup);
+    } else {
+      window.open(`review/${this.review?.id}?activeApiRevisionId=${revisionIdForConversationGroup}&nId=${elementIdForConversationGroup}`, '_blank');
+    }
+  }
 
   handleSaveCommentActionEmitter(data: any) {
     if (data.commentId) {

src/dotnet/APIView/ClientSPA/src/app/_components/review-page-options/review-page-options.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
+import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { InputSwitchOnChangeEvent } from 'primeng/inputswitch';
 import { getQueryParams } from 'src/app/_helpers/router-helpers';

src/dotnet/APIView/ClientSPA/src/app/_components/review-page/review-page.component.html

@@ -9,7 +9,14 @@
         (pageOptionsEmitter)="handlePageOptionsEmitter($event)"></app-review-info>
     <div class="mt-2" style="display: flex;">
         <div>
-            <p-menu [model]="sideMenu"></p-menu>
+            <p-menu [model]="sideMenu" class="side-menu">
+                <ng-template pTemplate="item" let-item>
+                    <a pRipple class="flex align-items-center p-menuitem-link">
+                        <span [class]="item.icon"></span>
+                        <p-badge *ngIf="item.badge" class="ml-auto" [value]="item.badge" severity="danger" />
+                    </a>
+                </ng-template>
+            </p-menu>
         </div>
         <div style="flex-grow: 1; min-width: 0; margin-left: 7px;">
             <p-splitter
@@ -34,7 +41,7 @@
                             [loadFailed]="loadFailed"
                             [showLineNumbers]="showLineNumbers" [scrollToNodeIdHashed]="scrollToNodeIdHashed"
                             [scrollToNodeId]="scrollToNodeId"
-                            (hasActiveConversation)="handleHasActiveConversationEmitter($event)"></app-code-panel>
+                            (hasActiveConversationEmitter)="handleHasActiveConversationEmitter($event)"></app-code-panel>
                     </div>
                 </ng-template>
                 <ng-template pTemplate>
@@ -76,6 +83,9 @@
     <app-conversations 
         [apiRevisions]="apiRevisions"
         [comments]="comments"
-        [review]="review"></app-conversations >
+        [review]="review"
+        [activeApiRevisionId]="activeApiRevisionId"
+        (scrollToNodeEmitter)="handleScrollToNodeEmitter($event)"
+        (numberOfActiveThreadsEmitter)="handleNumberOfActiveThreadsEmitter($event)"></app-conversations >
 </p-sidebar>
 <app-footer></app-footer>

src/dotnet/APIView/ClientSPA/src/app/_components/review-page/review-page.component.scss

@@ -11,6 +11,18 @@
         display: block;
         min-width: 0;
     }
+
+    .side-menu {
+        .p-menuitem-link {
+            font-size: x-large;
+        }
+
+        p-badge {
+            position: relative;
+            left: -1.2rem;
+            top: -1.4rem;
+        }
+    }
 
     .p-menu {
         background: var(--base-fg-color);
@@ -43,8 +55,4 @@
     .revisions-sidebar, .conversation-sidebar {
         width: 75dvw;
     }
-
-    .conversation-sidebar {
-        width: 60dvw;
-    }
 }

src/dotnet/APIView/ClientSPA/src/app/_components/review-page/review-page.component.ts

@@ -48,6 +48,7 @@ export class ReviewPageComponent implements OnInit {
   preferredApprovers : string[] = [];
   hasFatalDiagnostics : boolean = false;
   hasActiveConversation : boolean = false;
+  numberOfActiveConversation : number = 0;
   hasHiddenAPIs : boolean = false;
   loadFailed : boolean = false;
 
@@ -104,14 +105,18 @@ export class ReviewPageComponent implements OnInit {
     this.loadPreferredApprovers(this.reviewId!);
     this.loadAPIRevisions(0, this.apiRevisionPageSize);
     this.loadComments();
+    this.createSideMenu();
+  }
 
+  createSideMenu() {
     this.sideMenu = [
       {
           icon: 'bi bi-clock-history',
           command: () => { this.revisionSidePanel = !this.revisionSidePanel; }
       },
       {
         icon: 'bi bi-chat-left-dots',
+        badge: (this.numberOfActiveConversation > 0) ? this.numberOfActiveConversation.toString() : undefined,
         command: () => { this.conversationSidePanel = !this.conversationSidePanel; }
       }
     ];
@@ -419,6 +424,16 @@ export class ReviewPageComponent implements OnInit {
     this.hasActiveConversation = value;
   }
 
+  handleNumberOfActiveThreadsEmitter(value: number) {
+    this.numberOfActiveConversation = value;
+    this.createSideMenu();
+  }
+
+  handleScrollToNodeEmitter (value: string) {
+    this.conversationSidePanel = false;
+    this.codePanelComponent.scrollToNode(undefined, value);
+  }
+
   checkForFatalDiagnostics() {
     for (const rowData of this.codePanelRowData) {
       if (rowData.diagnostics && rowData.diagnostics.level === 'fatal') {

src/dotnet/APIView/ClientSPA/src/app/_components/shared/comment-thread/comment-thread.component.html

@@ -1,7 +1,7 @@
 <div *ngIf="codePanelRowData!.isResolvedCommentThread" class="resolution-info">
     <small class="d-flex align-items-center">This thread is marked resolved by<b>&nbsp;{{ threadResolvedBy }}&nbsp;</b><span class="resolved-toggler" (click)="toggleResolvedCommentExpandState()"><i class="bi {{threadResolvedStateToggleIcon}}"></i>&nbsp;{{threadResolvedStateToggleText}}&nbsp;Resolved</span></small>
 </div>
-<div *ngIf="!codePanelRowData!.isResolvedCommentThread || threadResolvedAndExpanded" class="border rounded {{spacingBasedOnResolvedState}} py-2">
+<div *ngIf="!codePanelRowData!.isResolvedCommentThread || threadResolvedAndExpanded" class="border rounded {{spacingBasedOnResolvedState}} py-2 comment-thread-container">
     <p-timeline [value]="codePanelRowData!.comments">
         <ng-template pTemplate="marker" let-comment>
             <img [alt]="comment.createdBy" src="https://github.com/{{ comment.createdBy }}.png?size=40" width="40" height="40" class="user-avartar"/>

src/dotnet/APIView/ClientSPA/src/app/_components/shared/comment-thread/comment-thread.component.scss

@@ -1,5 +1,9 @@
 :host ::ng-deep {
     font-family: var(--font-family);
+
+    .comment-thread-container {
+        max-width: 1000px;
+    }
 
     .user-avartar {
         border: 2px solid var(--border-color);

src/dotnet/APIView/ClientSPA/src/app/_components/shared/comment-thread/comment-thread.component.ts

@@ -6,7 +6,6 @@ import { environment } from 'src/environments/environment';
 import { EditorComponent } from '../editor/editor.component';
 import { CodePanelRowData } from 'src/app/_models/codePanelModels';
 import { UserProfile } from 'src/app/_models/userProfile';
-import { first } from 'rxjs';
 
 @Component({
   selector: 'app-comment-thread',

src/dotnet/APIView/ClientSPA/src/app/_helpers/router-helpers.ts

@@ -1,6 +1,7 @@
 import { ActivatedRoute } from "@angular/router";
+import { SCROLL_TO_NODE_QUERY_PARAM } from "./common-helpers";
 
-export function getQueryParams(route: ActivatedRoute, excludedKeys: string[] = ["nId"]) {
+export function getQueryParams(route: ActivatedRoute, excludedKeys: string[] = [SCROLL_TO_NODE_QUERY_PARAM]) {
   return route.snapshot.queryParamMap.keys.reduce((params: { [key: string]: any; }, key) => {
     if (!excludedKeys.includes(key)) {
       params[key] = route.snapshot.queryParamMap.get(key);

src/dotnet/APIView/ClientSPA/src/app/_modules/shared/shared-app.module.ts

@@ -20,6 +20,7 @@ import { SelectButtonModule } from 'primeng/selectbutton';
 import { FileUploadModule } from 'primeng/fileupload';
 import { InputTextModule } from 'primeng/inputtext';
 import { MessagesModule } from 'primeng/messages';
+import { BadgeModule } from 'primeng/badge';
 
 
 @NgModule({
@@ -38,6 +39,7 @@ import { MessagesModule } from 'primeng/messages';
     LanguageNamesPipe,
     LastUpdatedOnPipe,
     ApprovalPipe,
+    BadgeModule,
     ContextMenuModule,
     TableModule,
     ChipModule,
@@ -52,9 +54,10 @@ import { MessagesModule } from 'primeng/messages';
     SplitterModule,
     SidebarModule,
     TimeagoModule,
-    InputTextModule
+    InputTextModule,
   ],
   imports: [
+    BadgeModule,
     CommonModule,
     ContextMenuModule,
     TableModule,