Add APIRevision to Review Page

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

@@ -9,16 +9,6 @@
         }
     };
 
-    .author-table-data {
-        vertical-align: middle;
-        font-size: 0.9rem;
-        font-weight: 400;
-        img {
-            border-radius: 50%;
-            margin-right: 5px;
-        }
-    }
-
     .index-table-info {
         min-height: 30px;
         max-height: 30px;

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

@@ -7,7 +7,7 @@ import { FirstReleaseApproval, Review } from 'src/app/_models/review';
   styleUrls: ['./index-page.component.scss']
 })
 export class IndexPageComponent {
-  review : Review | null = null;
+  review : Review | undefined = undefined;
 
   /**
    * Pass ReviewId to revision component to load revisions

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

@@ -6,13 +6,12 @@
         [diffApiRevisionId]="diffApiRevisionId"
         [userProfile]="userProfile"
         [review]="review"
-        (revisionsSidePanel)="showRevisionsPanel($event)"
         (pageOptionsEmitter)="handlePageOptionsEmitter($event)"></app-review-info>
     <div class="mt-2" style="display: flex;">
-        <!--<div>
+        <div>
             <p-menu [model]="sideMenu"></p-menu>
-        </div>-->
-        <div style="flex-grow: 1; min-width: 0;"> <!-- margin-left: 7px;"> -->
+        </div>
+        <div style="flex-grow: 1; min-width: 0; margin-left: 7px;">
             <p-splitter
                 [panelSizes]="panelSizes"
                 [minSizes]="minSizes"
@@ -67,7 +66,7 @@
         </div>
     </div>
 </div>
-<p-sidebar [(visible)]="revisionSidePanel!" position="right">
-    Revisions
+<p-sidebar [(visible)]="revisionSidePanel!" position="right" [modal]="false">
+    <app-revisions-list [review]="review"></app-revisions-list>
 </p-sidebar>
 <app-footer></app-footer>

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

@@ -8,7 +8,7 @@
     }
 
     .p-sidebar-right {
-        width: 70dvw;
+        width: 75dvw;
     }
 
     .p-splitter-panel-nested {
@@ -39,5 +39,8 @@
     .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
         color: var(--base-text-color);;
         font-size: x-large;
+        &:hover, &:active {
+            color: var(--primary-color);
+        }
     }
 }

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

@@ -103,9 +103,7 @@ export class ReviewPageComponent implements OnInit {
     this.sideMenu = [
       {
           icon: 'bi bi-clock-history',
-      },
-      {
-          icon: 'bi bi-file-diff'
+          command: () => { this.revisionSidePanel = !this.revisionSidePanel; }
       },
       {
           icon: 'bi bi-chat-left-dots'
@@ -219,10 +217,6 @@ export class ReviewPageComponent implements OnInit {
       });
   }
 
-  showRevisionsPanel(showRevisionsPanel : any){
-    this.revisionSidePanel = showRevisionsPanel as boolean;
-  }
-
   handlePageOptionsEmitter(showPageOptions: boolean) {
     this.userProfile!.preferences.hideReviewPageOptions = !showPageOptions;
     this.userProfileService.updateUserPrefernece(this.userProfile!.preferences).pipe(takeUntil(this.destroy$)).subscribe({

src/dotnet/APIView/ClientSPA/src/app/_components/revisions-list/revisions-list.component.html

@@ -44,7 +44,7 @@ <h6>There are no {{apiRevisionsListDetail}} {{review.packageName}}</h6>
     <ng-template pTemplate="caption">
         <div class="d-flex justify-content-between index-table-info">
             <div>
-                <p-chip label=""></p-chip>
+                <button type="button" *ngIf="showAddRevisionButton" class="btn btn-sm btn-outline-primary"><i class="bi bi-plus-lg"></i>Add Revision</button>
             </div>
             <div>
                 <button *ngIf="showDeletedAPIRevisions && showDeleteButton" (click)="restoreRevisions(selectedRevisions)" type="button" class="btn btn-sm btn-outline-primary me-1"><i class="bi bi-x-circle me-1"></i>Restore</button>
@@ -125,7 +125,7 @@ <h6>There are no {{apiRevisionsListDetail}} {{review.packageName}}</h6>
         </div>
     </ng-template>
 </p-table>
-<p-sidebar [(visible)]="sidebarVisible" position="right">
+<p-sidebar [(visible)]="sidebarVisible" position="right" [modal]="false">
     <h3>Filter APIRevisions</h3>
     <ul class="list-group list-group-flush">
         <li class="list-group-item">

src/dotnet/APIView/ClientSPA/src/app/_components/revisions-list/revisions-list.component.scss

@@ -2,4 +2,14 @@
     .p-sidebar-right {
         width: 20dvw;
     }
+
+    .author-table-data {
+        vertical-align: middle;
+        font-size: 0.9rem;
+        font-weight: 400;
+        img {
+            border-radius: 50%;
+            margin-right: 5px;
+        }
+    }
 }

src/dotnet/APIView/ClientSPA/src/app/_components/revisions-list/revisions-list.component.ts

@@ -15,7 +15,7 @@ import { UserProfileService } from 'src/app/_services/user-profile/user-profile.
   styleUrls: ['./revisions-list.component.scss']
 })
 export class RevisionsListComponent implements OnInit, OnChanges {
-  @Input() review : Review | null = null;
+  @Input() review : Review | undefined = undefined;
 
   userProfile : UserProfile | undefined;
   reviewPageWebAppUrl : string = this.configService.webAppUrl + "Assemblies/Review/";
@@ -30,6 +30,7 @@ export class RevisionsListComponent implements OnInit, OnChanges {
   sortField : string = "lastUpdatedOn";
   sortOrder : number = 1;
   filters: any = null;
+  showAddRevisionButton: boolean = false;
 
   sidebarVisible : boolean = false;
 
@@ -268,7 +269,7 @@ export class RevisionsListComponent implements OnInit, OnChanges {
     this.showAPIRevisionsAssignedToMe = !this.showAPIRevisionsAssignedToMe;
     this.showDeletedAPIRevisions = false;
     if (this.showAPIRevisionsAssignedToMe) {
-      this.review = null;
+      this.review = undefined;
     }
     this.loadAPIRevisions(0, this.pageSize * 2, true);
   }

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

@@ -17,7 +17,6 @@ export class ReviewInfoComponent {
   @Input() userProfile: UserProfile | undefined;
 
   @Input() review : Review | undefined = undefined;
-  @Output() revisionsSidePanel : EventEmitter<boolean> = new EventEmitter<boolean>();
   @Output() pageOptionsEmitter : EventEmitter<boolean> = new EventEmitter<boolean>();
 
   showPageOptions: boolean = true;
@@ -42,10 +41,6 @@ export class ReviewInfoComponent {
     }
   }
 
-  showRevisionSidePanel() {
-    this.revisionsSidePanel.emit(true);
-  }
-
   onRightPanelCheckChange(event: any) {
     this.pageOptionsEmitter.emit(event.target.checked);
   }

src/dotnet/APIView/ClientSPA/src/app/_modules/review-page/review-page.module.ts

@@ -11,25 +11,17 @@ import { EditorModule } from 'primeng/editor';
 import { PanelModule } from 'primeng/panel';
 import { TreeSelectModule } from 'primeng/treeselect';
 import { MenuModule } from 'primeng/menu';
-import { SplitterModule } from 'primeng/splitter';
-import { SidebarModule } from 'primeng/sidebar';
 import { TimelineModule } from 'primeng/timeline';
 import { SharedAppModule } from '../shared/shared-app.module';
 import { ButtonModule } from 'primeng/button';
-import { TimeagoModule } from 'ngx-timeago';
-import { MenubarModule } from 'primeng/menubar';
 import { UiScrollModule  } from 'ngx-ui-scroll' ;
 import { PageOptionsSectionComponent } from 'src/app/_components/shared/page-options-section/page-options-section.component';
 import { ApiRevisionOptionsComponent } from 'src/app/_components/api-revision-options/api-revision-options.component';
-import { DropdownModule } from 'primeng/dropdown';
-import { FormsModule } from '@angular/forms';
 import { MarkdownToHtmlPipe } from 'src/app/_pipes/markdown-to-html.pipe';
 import { EditorComponent } from 'src/app/_components/shared/editor/editor.component';
 import { SelectButtonModule } from 'primeng/selectbutton';
-import { ChipModule } from 'primeng/chip';
 import { ReviewPageOptionsComponent } from 'src/app/_components/review-page-options/review-page-options.component';
 import { InputSwitchModule } from 'primeng/inputswitch';
-import { MultiSelectModule } from 'primeng/multiselect';
 
 const routes: Routes = [
   { path: '', component: ReviewPageComponent }
@@ -51,25 +43,17 @@ const routes: Routes = [
   imports: [
     SharedAppModule,
     CommonModule,
-    ChipModule,
     EditorModule,
     PanelModule,
     DialogModule,
     TreeSelectModule,
     MenuModule,
-    MenubarModule,
-    MultiSelectModule,
-    SplitterModule,
-    SidebarModule,
     TimelineModule,
     ButtonModule,
     SelectButtonModule,
-    FormsModule,
     InputSwitchModule,
     UiScrollModule,
-    DropdownModule,
     RouterModule.forChild(routes),
-    TimeagoModule.forRoot(),
   ]
 })
 export class ReviewPageModule { }

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

@@ -5,24 +5,57 @@ import { FooterComponent } from 'src/app/_components/shared/footer/footer.compon
 import { LanguageNamesPipe } from 'src/app/_pipes/language-names.pipe';
 import { LastUpdatedOnPipe } from 'src/app/_pipes/last-updated-on.pipe';
 import { ApprovalPipe } from 'src/app/_pipes/approval.pipe';
+import { RevisionsListComponent } from 'src/app/_components/revisions-list/revisions-list.component';
+import { ContextMenuModule } from 'primeng/contextmenu';
+import { TableModule } from 'primeng/table';
+import { ChipModule } from 'primeng/chip';
+import { DropdownModule } from 'primeng/dropdown';
+import { MenubarModule } from 'primeng/menubar';
+import { MultiSelectModule } from 'primeng/multiselect';
+import { FormsModule } from '@angular/forms';
+import { SplitterModule } from 'primeng/splitter';
+import { SidebarModule } from 'primeng/sidebar';
+import { TimeagoModule } from 'ngx-timeago';
 
 @NgModule({
   declarations: [
     NavBarComponent,
     FooterComponent,
+    RevisionsListComponent,
     LanguageNamesPipe,
     LastUpdatedOnPipe,
     ApprovalPipe
   ],
   exports: [
     NavBarComponent,
     FooterComponent,
+    RevisionsListComponent,
     LanguageNamesPipe,
     LastUpdatedOnPipe,
-    ApprovalPipe
+    ApprovalPipe,
+    ContextMenuModule,
+    TableModule,
+    ChipModule,
+    DropdownModule,
+    MenubarModule,
+    MultiSelectModule,
+    FormsModule,
+    SplitterModule,
+    SidebarModule,
+    TimeagoModule,
   ],
   imports: [
-    CommonModule
+    CommonModule,
+    ContextMenuModule,
+    TableModule,
+    ChipModule,
+    DropdownModule,
+    MenubarModule,
+    MultiSelectModule,
+    FormsModule,
+    SplitterModule,
+    SidebarModule,
+    TimeagoModule.forRoot(),
   ]
 })
 export class SharedAppModule { }

src/dotnet/APIView/ClientSPA/src/app/app.module.ts

@@ -2,27 +2,17 @@ import { NgModule, APP_INITIALIZER, isDevMode } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { ReactiveFormsModule } from '@angular/forms';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { IndexPageComponent } from './_components/index-page/index-page.component';
 import { ReviewsListComponent } from './_components/reviews-list/reviews-list.component';
-import { MenubarModule } from 'primeng/menubar';
-import { TableModule } from 'primeng/table';
 import { InputTextModule } from 'primeng/inputtext';
 import { TabMenuModule } from 'primeng/tabmenu';
 import { ToolbarModule } from 'primeng/toolbar';
-import { DropdownModule } from 'primeng/dropdown';
-import { MultiSelectModule } from 'primeng/multiselect';
-import { SidebarModule } from 'primeng/sidebar';
-import { TimeagoModule } from "ngx-timeago";
-import { ChipModule } from 'primeng/chip';
 import { BadgeModule } from 'primeng/badge';
-import { ContextMenuModule } from 'primeng/contextmenu';
 import { FileUploadModule } from 'primeng/fileupload';
-import { SplitterModule } from 'primeng/splitter';
-import { RevisionsListComponent } from './_components/revisions-list/revisions-list.component';
 import { Observable } from 'rxjs';
 import { ConfigService } from './_services/config/config.service';
 import { CookieService } from 'ngx-cookie-service';
@@ -39,31 +29,20 @@ export function initializeApp(configService: ConfigService) {
   declarations: [
     AppComponent,
     IndexPageComponent,
-    ReviewsListComponent,
-    RevisionsListComponent
+    ReviewsListComponent
   ],
   imports: [
     SharedAppModule,
     AppRoutingModule,
     BadgeModule,
     BrowserModule,
     BrowserAnimationsModule,
-    ChipModule,
-    ContextMenuModule,
     TabMenuModule,
     ToolbarModule,
-    DropdownModule,
     FileUploadModule,
     HttpClientModule,
     InputTextModule,
-    MenubarModule,
-    MultiSelectModule,
-    FormsModule,
     ReactiveFormsModule,
-    SidebarModule,
-    SplitterModule,
-    TableModule,
-    TimeagoModule.forRoot()
   ],
   providers: [
     ConfigService,