Skip to content

Commit

Permalink
091124/full conversation and revisions page (#8961)
Browse files Browse the repository at this point in the history
* Add stand alone pages

* Add review page layout

* Make Pre tags not overflow

* Refactor Modules

* Add stand alone pages

* Add Stand alone Conversation Page

* Update failing tests
  • Loading branch information
chidozieononiwu authored Sep 19, 2024
1 parent d7456f0 commit c21d133
Show file tree
Hide file tree
Showing 40 changed files with 773 additions and 239 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';

import { ApiRevisionOptionsComponent } from './api-revision-options.component';
import { ActivatedRoute, convertToParamMap } from '@angular/router';
import { ReviewPageModule } from 'src/app/_modules/review-page/review-page.module';
import { ReviewPageModule } from 'src/app/_modules/review-page.module';
import { SharedAppModule } from 'src/app/_modules/shared/shared-app.module';

describe('ApiRevisionOptionsComponent', () => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { CommentsService } from 'src/app/_services/comments/comments.service';
import { HttpClientTestingModule } from '@angular/common/http/testing';
import { ActivatedRoute, convertToParamMap } from '@angular/router';
import { SharedAppModule } from 'src/app/_modules/shared/shared-app.module';
import { ReviewPageModule } from 'src/app/_modules/review-page/review-page.module';
import { ReviewPageModule } from 'src/app/_modules/review-page.module';
import { MessageService } from 'primeng/api';

describe('CodePanelComponent', () => {
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<app-review-page-layout
[review]="review"
[sideMenu]="sideMenu">
<div class="conversation-panel overflow-auto border rounded py-3">
<app-conversations
[apiRevisions]="apiRevisions"
[comments]="comments"
[userProfile]="userProfile">
</app-conversations>
</div>
</app-review-page-layout>
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
:host ::ng-deep {
.conversation-panel{
height: calc(100vh - 130px);
background-color: var(--base-fg-color);
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';

import { ConversationPageComponent } from './conversation-page.component';
import { ActivatedRoute, convertToParamMap } from '@angular/router';
import { HttpClientTestingModule } from '@angular/common/http/testing';
import { ReviewPageLayoutComponent } from '../shared/review-page-layout/review-page-layout.component';
import { ConversationsComponent } from '../conversations/conversations.component';
import { NavBarComponent } from '../shared/nav-bar/nav-bar.component';
import { ReviewInfoComponent } from '../shared/review-info/review-info.component';
import { MenuModule } from 'primeng/menu';
import { FooterComponent } from '../shared/footer/footer.component';
import { MenubarModule } from 'primeng/menubar';
import { LanguageNamesPipe } from 'src/app/_pipes/language-names.pipe';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

describe('ConversationPageComponent', () => {
let component: ConversationPageComponent;
let fixture: ComponentFixture<ConversationPageComponent>;

beforeEach(() => {
TestBed.configureTestingModule({
declarations: [
ConversationPageComponent,
ConversationsComponent,
NavBarComponent,
FooterComponent,
ReviewInfoComponent,
ReviewPageLayoutComponent,
LanguageNamesPipe
],
imports: [
BrowserAnimationsModule,
HttpClientTestingModule,
MenuModule,
MenubarModule
],
providers: [
{
provide: ActivatedRoute,
useValue: {
snapshot: {
paramMap: convertToParamMap({ reviewId: 'test' })
}
}
}
]
});
fixture = TestBed.createComponent(ConversationPageComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});

it('should create', () => {
expect(component).toBeTruthy();
});
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
import { Component } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { MenuItem } from 'primeng/api';
import { Subject, takeUntil } from 'rxjs';
import { REVIEW_ID_ROUTE_PARAM } from 'src/app/_helpers/common-helpers';
import { CommentItemModel } from 'src/app/_models/commentItemModel';
import { Review } from 'src/app/_models/review';
import { APIRevision } from 'src/app/_models/revision';
import { UserProfile } from 'src/app/_models/userProfile';
import { CommentsService } from 'src/app/_services/comments/comments.service';
import { ReviewsService } from 'src/app/_services/reviews/reviews.service';
import { RevisionsService } from 'src/app/_services/revisions/revisions.service';
import { UserProfileService } from 'src/app/_services/user-profile/user-profile.service';

@Component({
selector: 'app-conversation-page',
templateUrl: './conversation-page.component.html',
styleUrls: ['./conversation-page.component.scss']
})
export class ConversationPageComponent {
reviewId : string | null = null;
review : Review | undefined = undefined;
userProfile : UserProfile | undefined;
sideMenu: MenuItem[] | undefined;
comments: CommentItemModel[] = [];
apiRevisions: APIRevision[] = [];

apiRevisionPageSize = 50;

private destroy$ = new Subject<void>();

constructor(private route: ActivatedRoute, private reviewsService: ReviewsService, private userProfileService: UserProfileService,
private apiRevisionsService: RevisionsService, private commentsService: CommentsService
) {}

ngOnInit() {
this.userProfileService.getUserProfile().subscribe(
(userProfile : any) => {
this.userProfile = userProfile;
}
);
this.reviewId = this.route.snapshot.paramMap.get(REVIEW_ID_ROUTE_PARAM);
this.createSideMenu();
this.loadReview(this.reviewId!);
this.loadAPIRevisions(0, this.apiRevisionPageSize);
this.loadComments();
}

createSideMenu() {
this.sideMenu = [
{
icon: 'bi bi-braces',
tooltip: 'API',
command: () => this.openLatestAPIReivisonForReview()
}
];
}

loadReview(reviewId: string) {
this.reviewsService.getReview(reviewId)
.pipe(takeUntil(this.destroy$)).subscribe({
next: (review: Review) => {
this.review = review;
}
});
}

loadAPIRevisions(noOfItemsRead : number, pageSize: number) {
this.apiRevisionsService.getAPIRevisions(noOfItemsRead, pageSize, this.reviewId!, undefined, undefined,
undefined, "createdOn", undefined, undefined, undefined, true)
.pipe(takeUntil(this.destroy$)).subscribe({
next: (response: any) => {
this.apiRevisions = response.result;
}
});
}

loadComments() {
this.commentsService.getComments(this.reviewId!)
.pipe(takeUntil(this.destroy$)).subscribe({
next: (comments: CommentItemModel[]) => {
this.comments = comments;
}
});
}

openLatestAPIReivisonForReview() {
const apiRevision = this.apiRevisions.find(x => x.apiRevisionType === "Automatic") ?? this.apiRevisions[0];
this.apiRevisionsService.openAPIRevisionPage(apiRevision, this.route);
}
}
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
<h4>Conversations</h4>
<p-divider />
<p *ngIf="commentThreads.size === 0">This Review has no comments</p>
<p-timeline [value]="getAPIRevisionWithComments()">
<div *ngIf="isLoading" class="spinner-border m-3" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<p *ngIf="!isLoading && (getAPIRevisionWithComments()).length == 0" class="ms-4">This Review has no comments</p>
<p-timeline *ngIf="!isLoading" [value]="getAPIRevisionWithComments()">
<ng-template pTemplate="marker" let-apiRevision>
<i class="bi bi-clock-history"></i>
</ng-template>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ConversationsComponent } from './conversations.component';
import { SharedAppModule } from 'src/app/_modules/shared/shared-app.module';
import { HttpClientTestingModule } from '@angular/common/http/testing';
import { ReviewPageModule } from 'src/app/_modules/review-page/review-page.module';
import { ReviewPageModule } from 'src/app/_modules/review-page.module';
import { APIRevision } from 'src/app/_models/revision';
import { CommentItemModel } from 'src/app/_models/commentItemModel';
import { ActivatedRoute, convertToParamMap } from '@angular/router';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,10 @@ export class ConversationsComponent implements OnChanges {
commentThreads: Map<string, CodePanelRowData[]> = new Map<string, CodePanelRowData[]>();
numberOfActiveThreads: number = 0;

apiRevisionsLoaded = false;
commentsLoaded = false;
isLoading: boolean = true;

destroy$ = new Subject<void>();

constructor(private commentsService: CommentsService, private signalRService: SignalRService) { }
Expand All @@ -37,62 +41,76 @@ export class ConversationsComponent implements OnChanges {
}

ngOnChanges(changes: SimpleChanges) {
if (changes['apiRevisions'] || changes['comments']) {
if (this.apiRevisions.length > 0 && this.comments.length > 0) {
this.createCommentThreads();
}
if (changes['apiRevisions']) {
this.apiRevisionsLoaded = true;
}

if (changes['comments']) {
this.commentsLoaded = true;
}

if (this.apiRevisionsLoaded && this.commentsLoaded) {
this.createCommentThreads();
}
}

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) => {
const key = comment.elementId;
if (!acc[key]) {
acc[key] = [];
}
acc[key].push(comment);
return acc;
}, {});
if (this.apiRevisions.length > 0 && this.comments.length > 0) {
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) => {
const key = comment.elementId;
if (!acc[key]) {
acc[key] = [];
}
acc[key].push(comment);
return acc;
}, {});

for (const elementId in groupedComments) {
if (groupedComments.hasOwnProperty(elementId)) {
const comments = groupedComments[elementId];
const apiRevisionIds = comments.map(c => c.apiRevisionId);
for (const elementId in groupedComments) {
if (groupedComments.hasOwnProperty(elementId)) {
const comments = groupedComments[elementId];
const apiRevisionIds = comments.map(c => c.apiRevisionId);

let apiRevisionPostion = Number.MAX_SAFE_INTEGER;
let apiRevisionPostion = Number.MAX_SAFE_INTEGER;

for (const apiRevisionId of apiRevisionIds) {
const apiRevisionIdPosition = apiRevisionInOrder.findIndex(apiRevision => apiRevision.id === apiRevisionId);
if (apiRevisionIdPosition >= 0 && apiRevisionIdPosition < apiRevisionPostion) {
apiRevisionPostion = apiRevisionIdPosition;
for (const apiRevisionId of apiRevisionIds) {
const apiRevisionIdPosition = apiRevisionInOrder.findIndex(apiRevision => apiRevision.id === apiRevisionId);
if (apiRevisionIdPosition >= 0 && apiRevisionIdPosition < apiRevisionPostion) {
apiRevisionPostion = apiRevisionIdPosition;
}
}
}

if (apiRevisionPostion >= 0 && apiRevisionPostion < apiRevisionInOrder.length) {
const apiRevisionIdForThread = apiRevisionInOrder[apiRevisionPostion].id;
const codePanelRowData = new CodePanelRowData();
codePanelRowData.type = CodePanelRowDatatype.CommentThread;
codePanelRowData.comments = comments;
codePanelRowData.isResolvedCommentThread = comments.some(c => c.isResolved);
if (apiRevisionPostion >= 0 && apiRevisionPostion < apiRevisionInOrder.length) {
const apiRevisionIdForThread = apiRevisionInOrder[apiRevisionPostion].id;
const codePanelRowData = new CodePanelRowData();
codePanelRowData.type = CodePanelRowDatatype.CommentThread;
codePanelRowData.comments = comments;
codePanelRowData.isResolvedCommentThread = comments.some(c => c.isResolved);

if (!codePanelRowData.isResolvedCommentThread) {
this.numberOfActiveThreads++;
}
if (!codePanelRowData.isResolvedCommentThread) {
this.numberOfActiveThreads++;
}

if (this.commentThreads.has(apiRevisionIdForThread)) {
this.commentThreads.get(apiRevisionIdForThread)?.push(codePanelRowData);
}
else {
this.commentThreads.set(apiRevisionIdForThread, [codePanelRowData]);
if (this.commentThreads.has(apiRevisionIdForThread)) {
this.commentThreads.get(apiRevisionIdForThread)?.push(codePanelRowData);
}
else {
this.commentThreads.set(apiRevisionIdForThread, [codePanelRowData]);
}
}
}
}
this.numberOfActiveThreadsEmitter.emit(this.numberOfActiveThreads);
this.isLoading = false;
}
else if (this.apiRevisions.length > 0 && this.comments.length === 0) {
setTimeout(() => {
this.isLoading = false;
}, 1000);
}
this.numberOfActiveThreadsEmitter.emit(this.numberOfActiveThreads);
}

getAPIRevisionWithComments() {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { HttpErrorInterceptorService } from 'src/app/_services/http-error-interc
import { PageOptionsSectionComponent } from '../shared/page-options-section/page-options-section.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { SharedAppModule } from 'src/app/_modules/shared/shared-app.module';
import { ReviewPageModule } from 'src/app/_modules/review-page/review-page.module';
import { ReviewPageModule } from 'src/app/_modules/review-page.module';
import { UserProfile } from 'src/app/_models/userProfile';

describe('ReviewPageOptionsComponent', () => {
Expand Down
Loading

0 comments on commit c21d133

Please sign in to comment.