From b33617d958ef13fffc8108ff229fb673249404c3 Mon Sep 17 00:00:00 2001
From: Chidozie Ononiwu <chononiw@microsoft.com>
Date: Thu, 12 Sep 2024 20:51:40 -0700
Subject: [PATCH] Add stand alone pages

---
 .../api-revision-options.component.spec.ts    |  2 +-
 .../code-panel/code-panel.component.spec.ts   |  2 +-
 .../conversation-page.component.html          | 11 ++--
 .../conversation-page.component.scss          |  6 ++
 .../conversations.component.html              |  2 -
 .../conversations.component.spec.ts           |  2 +-
 .../review-page-options.component.spec.ts     |  2 +-
 .../review-page/review-page.component.html    |  2 +
 .../review-page/review-page.component.spec.ts |  2 +-
 .../comment-thread.component.spec.ts          |  2 +-
 .../src/app/_helpers/common-helpers.ts        |  4 --
 .../app/_modules/conversation-page.module.ts  | 22 +++++++
 .../src/app/_modules/review-page.module.ts    | 40 +++++++++++
 .../review-page/review-page.module.ts         | 66 -------------------
 .../shared/review-page-layout.module.ts       | 53 +++++++++++++++
 .../app/_modules/shared/shared-app.module.ts  |  3 +-
 .../ClientSPA/src/app/app-routing.module.ts   |  3 +-
 .../APIView/ClientSPA/src/app/app.module.ts   |  2 +
 .../ClientSPA/src/ng-prime-overrides.scss     |  2 +-
 19 files changed, 142 insertions(+), 86 deletions(-)
 create mode 100644 src/dotnet/APIView/ClientSPA/src/app/_modules/conversation-page.module.ts
 create mode 100644 src/dotnet/APIView/ClientSPA/src/app/_modules/review-page.module.ts
 delete mode 100644 src/dotnet/APIView/ClientSPA/src/app/_modules/review-page/review-page.module.ts
 create mode 100644 src/dotnet/APIView/ClientSPA/src/app/_modules/shared/review-page-layout.module.ts

diff --git a/src/dotnet/APIView/ClientSPA/src/app/_components/api-revision-options/api-revision-options.component.spec.ts b/src/dotnet/APIView/ClientSPA/src/app/_components/api-revision-options/api-revision-options.component.spec.ts
index 0108ee0a8e85..e53d10d9ef67 100644
--- a/src/dotnet/APIView/ClientSPA/src/app/_components/api-revision-options/api-revision-options.component.spec.ts
+++ b/src/dotnet/APIView/ClientSPA/src/app/_components/api-revision-options/api-revision-options.component.spec.ts
@@ -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', () => {
diff --git a/src/dotnet/APIView/ClientSPA/src/app/_components/code-panel/code-panel.component.spec.ts b/src/dotnet/APIView/ClientSPA/src/app/_components/code-panel/code-panel.component.spec.ts
index 83821d933d53..f5007f999375 100644
--- a/src/dotnet/APIView/ClientSPA/src/app/_components/code-panel/code-panel.component.spec.ts
+++ b/src/dotnet/APIView/ClientSPA/src/app/_components/code-panel/code-panel.component.spec.ts
@@ -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', () => {
diff --git a/src/dotnet/APIView/ClientSPA/src/app/_components/conversation-page/conversation-page.component.html b/src/dotnet/APIView/ClientSPA/src/app/_components/conversation-page/conversation-page.component.html
index 2bd652bedb17..5687c1d3e15a 100644
--- a/src/dotnet/APIView/ClientSPA/src/app/_components/conversation-page/conversation-page.component.html
+++ b/src/dotnet/APIView/ClientSPA/src/app/_components/conversation-page/conversation-page.component.html
@@ -1,8 +1,11 @@
 <app-review-page-layout
     [review]="review"
     [sideMenu]="sideMenu">
-    <app-conversations
-        [apiRevisions]="apiRevisions"
-        [comments]="comments"
-        [userProfile]="userProfile"></app-conversations>
+    <div class="conversation-panel border rounded p-3">
+        <app-conversations
+            [apiRevisions]="apiRevisions"
+            [comments]="comments"
+            [userProfile]="userProfile">
+        </app-conversations>
+    </div>
 </app-review-page-layout>
\ No newline at end of file
diff --git a/src/dotnet/APIView/ClientSPA/src/app/_components/conversation-page/conversation-page.component.scss b/src/dotnet/APIView/ClientSPA/src/app/_components/conversation-page/conversation-page.component.scss
index e69de29bb2d1..fabd44fa82ae 100644
--- a/src/dotnet/APIView/ClientSPA/src/app/_components/conversation-page/conversation-page.component.scss
+++ b/src/dotnet/APIView/ClientSPA/src/app/_components/conversation-page/conversation-page.component.scss
@@ -0,0 +1,6 @@
+:host ::ng-deep {
+    .conversation-panel{
+        height: calc(100vh - 130px);
+        background-color: var(--base-fg-color);
+    }
+}
\ No newline at end of file
diff --git a/src/dotnet/APIView/ClientSPA/src/app/_components/conversations/conversations.component.html b/src/dotnet/APIView/ClientSPA/src/app/_components/conversations/conversations.component.html
index 9964bbfc7284..76b93cea91ac 100644
--- a/src/dotnet/APIView/ClientSPA/src/app/_components/conversations/conversations.component.html
+++ b/src/dotnet/APIView/ClientSPA/src/app/_components/conversations/conversations.component.html
@@ -1,5 +1,3 @@
-<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>
diff --git a/src/dotnet/APIView/ClientSPA/src/app/_components/conversations/conversations.component.spec.ts b/src/dotnet/APIView/ClientSPA/src/app/_components/conversations/conversations.component.spec.ts
index 637f0ec8e841..0d52020296c4 100644
--- a/src/dotnet/APIView/ClientSPA/src/app/_components/conversations/conversations.component.spec.ts
+++ b/src/dotnet/APIView/ClientSPA/src/app/_components/conversations/conversations.component.spec.ts
@@ -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';
diff --git a/src/dotnet/APIView/ClientSPA/src/app/_components/review-page-options/review-page-options.component.spec.ts b/src/dotnet/APIView/ClientSPA/src/app/_components/review-page-options/review-page-options.component.spec.ts
index b0e151c8a4db..bdaac51e37ef 100644
--- a/src/dotnet/APIView/ClientSPA/src/app/_components/review-page-options/review-page-options.component.spec.ts
+++ b/src/dotnet/APIView/ClientSPA/src/app/_components/review-page-options/review-page-options.component.spec.ts
@@ -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', () => {
diff --git a/src/dotnet/APIView/ClientSPA/src/app/_components/review-page/review-page.component.html b/src/dotnet/APIView/ClientSPA/src/app/_components/review-page/review-page.component.html
index bddf4a7ea05b..ed10f57e3324 100644
--- a/src/dotnet/APIView/ClientSPA/src/app/_components/review-page/review-page.component.html
+++ b/src/dotnet/APIView/ClientSPA/src/app/_components/review-page/review-page.component.html
@@ -70,6 +70,8 @@
         [revisionSidePanel]="revisionSidePanel!"></app-revisions-list>
 </p-sidebar>
 <p-sidebar [(visible)]="conversationSidePanel!" position="right" [modal]="true" styleClass="conversation-sidebar">
+    <h4>Conversations</h4>
+    <p-divider />
     <app-conversations 
         [apiRevisions]="apiRevisions"
         [comments]="comments"
diff --git a/src/dotnet/APIView/ClientSPA/src/app/_components/review-page/review-page.component.spec.ts b/src/dotnet/APIView/ClientSPA/src/app/_components/review-page/review-page.component.spec.ts
index 8962c30ca51e..9d7c4b457d35 100644
--- a/src/dotnet/APIView/ClientSPA/src/app/_components/review-page/review-page.component.spec.ts
+++ b/src/dotnet/APIView/ClientSPA/src/app/_components/review-page/review-page.component.spec.ts
@@ -16,7 +16,7 @@ import { ReviewNavComponent } from '../review-nav/review-nav.component';
 import { ReviewPageOptionsComponent } from '../review-page-options/review-page-options.component';
 import { PageOptionsSectionComponent } from '../shared/page-options-section/page-options-section.component';
 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('ReviewPageComponent', () => {
diff --git a/src/dotnet/APIView/ClientSPA/src/app/_components/shared/comment-thread/comment-thread.component.spec.ts b/src/dotnet/APIView/ClientSPA/src/app/_components/shared/comment-thread/comment-thread.component.spec.ts
index 3f8cf2ccf42a..5f725920a224 100644
--- a/src/dotnet/APIView/ClientSPA/src/app/_components/shared/comment-thread/comment-thread.component.spec.ts
+++ b/src/dotnet/APIView/ClientSPA/src/app/_components/shared/comment-thread/comment-thread.component.spec.ts
@@ -3,7 +3,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { CommentThreadComponent } from './comment-thread.component';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 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 { CommentItemModel } from 'src/app/_models/commentItemModel';
 import { CodePanelRowData } from 'src/app/_models/codePanelModels';
 
diff --git a/src/dotnet/APIView/ClientSPA/src/app/_helpers/common-helpers.ts b/src/dotnet/APIView/ClientSPA/src/app/_helpers/common-helpers.ts
index 1259ed6fc0bd..993cfb123fff 100644
--- a/src/dotnet/APIView/ClientSPA/src/app/_helpers/common-helpers.ts
+++ b/src/dotnet/APIView/ClientSPA/src/app/_helpers/common-helpers.ts
@@ -1,8 +1,4 @@
-import { takeUntil } from "rxjs";
 import { CodePanelRowData, CodePanelRowDatatype } from "../_models/codePanelModels";
-import { ReviewsService } from "../_services/reviews/reviews.service";
-import { Review } from "../_models/review";
-import { Subject } from "@microsoft/signalr";
 
 export const REVIEW_ID_ROUTE_PARAM = "reviewId";
 export const ACTIVE_API_REVISION_ID_QUERY_PARAM = "activeApiRevisionId";
diff --git a/src/dotnet/APIView/ClientSPA/src/app/_modules/conversation-page.module.ts b/src/dotnet/APIView/ClientSPA/src/app/_modules/conversation-page.module.ts
new file mode 100644
index 000000000000..baeb0f3d5e23
--- /dev/null
+++ b/src/dotnet/APIView/ClientSPA/src/app/_modules/conversation-page.module.ts
@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { ConversationPageComponent } from 'src/app/_components/conversation-page/conversation-page.component';
+import { ReviewPageLayoutModule } from './shared/review-page-layout.module';
+import { SharedAppModule } from './shared/shared-app.module';
+import { CommonModule } from '@angular/common';
+
+const routes: Routes = [
+  { path: '', component: ConversationPageComponent }
+];
+
+@NgModule({
+  declarations: [
+    ConversationPageComponent
+  ],
+  imports: [
+    CommonModule,
+    ReviewPageLayoutModule,
+    RouterModule.forChild(routes),
+  ]
+})
+export class ConversationPageModule { }
diff --git a/src/dotnet/APIView/ClientSPA/src/app/_modules/review-page.module.ts b/src/dotnet/APIView/ClientSPA/src/app/_modules/review-page.module.ts
new file mode 100644
index 000000000000..59697a131a5a
--- /dev/null
+++ b/src/dotnet/APIView/ClientSPA/src/app/_modules/review-page.module.ts
@@ -0,0 +1,40 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule, Routes } from '@angular/router';
+import { ReviewPageComponent } from 'src/app/_components/review-page/review-page.component';
+import { ReviewNavComponent } from 'src/app/_components/review-nav/review-nav.component';
+import { CodePanelComponent } from 'src/app/_components/code-panel/code-panel.component';
+import { DialogModule } from 'primeng/dialog';
+import { TreeSelectModule } from 'primeng/treeselect';
+import { ButtonModule } from 'primeng/button';
+import { UiScrollModule  } from 'ngx-ui-scroll' ;
+import { PageOptionsSectionComponent } from 'src/app/_components/shared/page-options-section/page-options-section.component';
+import { ReviewPageOptionsComponent } from 'src/app/_components/review-page-options/review-page-options.component';
+import { InputSwitchModule } from 'primeng/inputswitch';
+import { SharedAppModule } from './shared/shared-app.module';
+import { ReviewPageLayoutModule } from './shared/review-page-layout.module';
+
+const routes: Routes = [
+  { path: '', component: ReviewPageComponent }
+];
+
+@NgModule({
+  declarations: [
+    ReviewPageComponent,
+    ReviewNavComponent,
+    CodePanelComponent,
+    PageOptionsSectionComponent,
+    ReviewPageOptionsComponent,
+  ],
+  imports: [
+    CommonModule,
+    DialogModule,
+    TreeSelectModule,
+    ButtonModule,
+    InputSwitchModule,
+    UiScrollModule,
+    ReviewPageLayoutModule,
+    RouterModule.forChild(routes),
+  ]
+})
+export class ReviewPageModule { }
diff --git a/src/dotnet/APIView/ClientSPA/src/app/_modules/review-page/review-page.module.ts b/src/dotnet/APIView/ClientSPA/src/app/_modules/review-page/review-page.module.ts
deleted file mode 100644
index 1cea121336da..000000000000
--- a/src/dotnet/APIView/ClientSPA/src/app/_modules/review-page/review-page.module.ts
+++ /dev/null
@@ -1,66 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { RouterModule, Routes } from '@angular/router';
-import { ReviewPageComponent } from 'src/app/_components/review-page/review-page.component';
-import { ReviewNavComponent } from 'src/app/_components/review-nav/review-nav.component';
-import { CodePanelComponent } from 'src/app/_components/code-panel/code-panel.component';
-import { CommentThreadComponent } from 'src/app/_components/shared/comment-thread/comment-thread.component';
-import { DialogModule } from 'primeng/dialog';
-import { EditorModule } from 'primeng/editor';
-import { PanelModule } from 'primeng/panel';
-import { TreeSelectModule } from 'primeng/treeselect';
-import { TimelineModule } from 'primeng/timeline';
-import { SharedAppModule } from '../shared/shared-app.module';
-import { ButtonModule } from 'primeng/button';
-import { DividerModule } from 'primeng/divider';
-import { UiScrollModule  } from 'ngx-ui-scroll' ;
-import { PageOptionsSectionComponent } from 'src/app/_components/shared/page-options-section/page-options-section.component';
-import { MarkdownToHtmlPipe } from 'src/app/_pipes/markdown-to-html.pipe';
-import { EditorComponent } from 'src/app/_components/shared/editor/editor.component';
-import { ReviewPageOptionsComponent } from 'src/app/_components/review-page-options/review-page-options.component';
-import { InputSwitchModule } from 'primeng/inputswitch';
-import { ConversationsComponent } from 'src/app/_components/conversations/conversations.component';
-import { ReviewPageLayoutComponent } from 'src/app/_components/shared/review-page-layout/review-page-layout.component';
-import { ConversationPageComponent } from 'src/app/_components/conversation-page/conversation-page.component';
-import { ReviewInfoComponent } from 'src/app/_components/shared/review-info/review-info.component';
-import { ApiRevisionOptionsComponent } from 'src/app/_components/api-revision-options/api-revision-options.component';
-import { MenuModule } from 'primeng/menu';
-
-const routes: Routes = [
-  { path: 'review/:reviewId', component: ReviewPageComponent },
-  { path: 'conversation/:reviewId', component: ConversationPageComponent }
-];
-
-@NgModule({
-  declarations: [
-    ReviewPageComponent,
-    ReviewNavComponent,
-    ReviewInfoComponent,
-    CodePanelComponent,
-    CommentThreadComponent,
-    ConversationsComponent,
-    ConversationPageComponent,
-    PageOptionsSectionComponent,
-    ReviewPageOptionsComponent,
-    ApiRevisionOptionsComponent,
-    ReviewPageLayoutComponent,
-    MarkdownToHtmlPipe,
-    EditorComponent,
-  ],
-  imports: [
-    SharedAppModule,
-    CommonModule,
-    EditorModule,
-    PanelModule,
-    DialogModule,
-    TreeSelectModule,
-    MenuModule,
-    TimelineModule,
-    ButtonModule,
-    InputSwitchModule,
-    UiScrollModule,
-    DividerModule,
-    RouterModule.forChild(routes),
-  ]
-})
-export class ReviewPageModule { }
diff --git a/src/dotnet/APIView/ClientSPA/src/app/_modules/shared/review-page-layout.module.ts b/src/dotnet/APIView/ClientSPA/src/app/_modules/shared/review-page-layout.module.ts
new file mode 100644
index 000000000000..cbdf21c08e36
--- /dev/null
+++ b/src/dotnet/APIView/ClientSPA/src/app/_modules/shared/review-page-layout.module.ts
@@ -0,0 +1,53 @@
+import { NgModule } from '@angular/core';
+import { ReviewInfoComponent } from 'src/app/_components/shared/review-info/review-info.component';
+import { ConversationsComponent } from 'src/app/_components/conversations/conversations.component';
+import { CommentThreadComponent } from 'src/app/_components/shared/comment-thread/comment-thread.component';
+import { ReviewPageLayoutComponent } from 'src/app/_components/shared/review-page-layout/review-page-layout.component';
+import { MarkdownToHtmlPipe } from 'src/app/_pipes/markdown-to-html.pipe';
+import { EditorComponent } from 'src/app/_components/shared/editor/editor.component';
+import { EditorModule } from 'primeng/editor';
+import { PanelModule } from 'primeng/panel';
+import { MenuModule } from 'primeng/menu';
+import { TimelineModule } from 'primeng/timeline';
+import { DividerModule } from 'primeng/divider';
+import { ApiRevisionOptionsComponent } from 'src/app/_components/api-revision-options/api-revision-options.component';
+import { SharedAppModule } from './shared-app.module';
+import { CommonModule } from '@angular/common';
+ 
+
+@NgModule({
+  declarations: [
+    ReviewInfoComponent,
+    CommentThreadComponent,
+    ConversationsComponent,
+    ReviewPageLayoutComponent,
+    ApiRevisionOptionsComponent,
+    MarkdownToHtmlPipe,
+    EditorComponent,
+  ],
+  exports: [
+    ReviewInfoComponent,
+    CommentThreadComponent,
+    ConversationsComponent,
+    ReviewPageLayoutComponent,
+    ApiRevisionOptionsComponent,
+    MarkdownToHtmlPipe,
+    EditorComponent,
+    SharedAppModule,
+    EditorModule,
+    PanelModule,
+    MenuModule,
+    TimelineModule,
+    DividerModule
+  ],
+  imports: [
+    CommonModule,
+    SharedAppModule,
+    EditorModule,
+    PanelModule,
+    MenuModule,
+    TimelineModule,
+    DividerModule
+  ]
+})
+export class ReviewPageLayoutModule { }
diff --git a/src/dotnet/APIView/ClientSPA/src/app/_modules/shared/shared-app.module.ts b/src/dotnet/APIView/ClientSPA/src/app/_modules/shared/shared-app.module.ts
index ad36098208d4..a7686561f877 100644
--- a/src/dotnet/APIView/ClientSPA/src/app/_modules/shared/shared-app.module.ts
+++ b/src/dotnet/APIView/ClientSPA/src/app/_modules/shared/shared-app.module.ts
@@ -21,7 +21,6 @@ import { FileUploadModule } from 'primeng/fileupload';
 import { InputTextModule } from 'primeng/inputtext';
 import { MessagesModule } from 'primeng/messages';
 import { BadgeModule } from 'primeng/badge';
-import { MenuModule } from 'primeng/menu';
  
 
 @NgModule({
@@ -58,8 +57,8 @@ import { MenuModule } from 'primeng/menu';
     InputTextModule,
   ],
   imports: [
-    BadgeModule,
     CommonModule,
+    BadgeModule,
     ContextMenuModule,
     TableModule,
     ChipModule,
diff --git a/src/dotnet/APIView/ClientSPA/src/app/app-routing.module.ts b/src/dotnet/APIView/ClientSPA/src/app/app-routing.module.ts
index 4f6a82736552..1e26fa239dbc 100644
--- a/src/dotnet/APIView/ClientSPA/src/app/app-routing.module.ts
+++ b/src/dotnet/APIView/ClientSPA/src/app/app-routing.module.ts
@@ -11,7 +11,8 @@ const routes: Routes = [
      runGuardsAndResolvers: 'always',
      canActivate: [AuthGuard],
      children: [
-      { path: '*/:reviewId', loadChildren: () => import('./_modules/review-page/review-page.module').then(m => m.ReviewPageModule) }, // Lazy load review page module
+      { path: 'review/:reviewId', loadChildren: () => import('./_modules/review-page.module').then(m => m.ReviewPageModule) }, // Lazy load review page module
+      { path: 'conversation/:reviewId', loadChildren: () => import('./_modules/conversation-page.module').then(m => m.ConversationPageModule) }
      ]
   },
   { path: '**', component: IndexPageComponent, pathMatch: 'full' }
diff --git a/src/dotnet/APIView/ClientSPA/src/app/app.module.ts b/src/dotnet/APIView/ClientSPA/src/app/app.module.ts
index 99e75d2b868d..0c7cff5a32af 100644
--- a/src/dotnet/APIView/ClientSPA/src/app/app.module.ts
+++ b/src/dotnet/APIView/ClientSPA/src/app/app.module.ts
@@ -17,6 +17,7 @@ import { CookieService } from 'ngx-cookie-service';
 import { SharedAppModule } from './_modules/shared/shared-app.module';
 import { HttpErrorInterceptorService } from './_services/http-error-interceptor/http-error-interceptor.service';
 import { MessageService } from 'primeng/api';
+import { CommonModule } from '@angular/common';
 
 export function initializeApp(configService: ConfigService) {
   return (): Observable<any> => {
@@ -32,6 +33,7 @@ export function initializeApp(configService: ConfigService) {
   ],
   imports: [
     SharedAppModule,
+    CommonModule,
     AppRoutingModule,
     BadgeModule,
     BrowserModule,
diff --git a/src/dotnet/APIView/ClientSPA/src/ng-prime-overrides.scss b/src/dotnet/APIView/ClientSPA/src/ng-prime-overrides.scss
index 38e8f9a4dd3a..2b8bb594ec76 100644
--- a/src/dotnet/APIView/ClientSPA/src/ng-prime-overrides.scss
+++ b/src/dotnet/APIView/ClientSPA/src/ng-prime-overrides.scss
@@ -376,7 +376,7 @@ p-contextmenusub {
 }
 
 .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus {
-    background: var(--base-fg-color);;
+    background: var(--base-fg-color);
 }
 
 .p-datatable .p-sortable-column.p-highlight, .p-datatable .p-sortable-column.p-highlight:hover {