072324.02/first release approval button

eng/pipelines/templates/steps/apiview-ui-tests.yml

@@ -92,7 +92,7 @@ steps:
     "FIXTURE_DIR": "$(Build.BinariesDirectory)"
     "APIVIEW_API_KEY": "$(azuresdk-apiview-apikey)"
 
-- task: PublishBuildArtifacts@1
+- task: 1ES.PublishPipelineArtifact@1
   inputs:
-    pathtoPublish: '$(Build.SourcesDirectory)\src\dotnet\APIView\APIViewWeb\Client\playwright-report'
-    artifactName: 'Client-Side Test Reports'
+    path: '$(Build.SourcesDirectory)\src\dotnet\APIView\APIViewWeb\Client\playwright-report'
+    artifact: 'Client-Side Test Reports'

src/dotnet/APIView/ClientSPA/src/app/_components/api-revision-options/api-revision-options.component.spec.ts

@@ -1,14 +1,33 @@
+import 'reflect-metadata';
 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 { SharedAppModule } from 'src/app/_modules/shared/shared-app.module';
 
 describe('ApiRevisionOptionsComponent', () => {
   let component: ApiRevisionOptionsComponent;
   let fixture: ComponentFixture<ApiRevisionOptionsComponent>;
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [ApiRevisionOptionsComponent]
+      declarations: [ApiRevisionOptionsComponent],
+      imports: [
+        SharedAppModule,
+        ReviewPageModule
+      ],
+      providers: [
+        {
+          provide: ActivatedRoute,
+          useValue: {
+            snapshot: {
+              paramMap: convertToParamMap({ reviewId: 'test' }),
+              queryParamMap: convertToParamMap({ activeApiRevisionId: 'test', diffApiRevisionId: 'test' })
+            }
+          }
+        }
+      ]
     });
     fixture = TestBed.createComponent(ApiRevisionOptionsComponent);
     component = fixture.componentInstance;

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

@@ -1,14 +1,35 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { CodePanelComponent } from './code-panel.component';
+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';
 
 describe('CodePanelComponent', () => {
   let component: CodePanelComponent;
   let fixture: ComponentFixture<CodePanelComponent>;
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [CodePanelComponent]
+      declarations: [CodePanelComponent],
+      providers: [
+        CommentsService,
+        {
+          provide: ActivatedRoute,
+          useValue: {
+            snapshot: {
+              paramMap: convertToParamMap({ reviewId: 'test' }),
+              queryParamMap: convertToParamMap({ activeApiRevisionId: 'test', diffApiRevisionId: 'test' })
+            }
+          }
+        }
+      ],
+      imports: [HttpClientTestingModule,
+        SharedAppModule,
+        ReviewPageModule
+      ]
     });
     fixture = TestBed.createComponent(CodePanelComponent);
     component = fixture.componentInstance;

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

@@ -1,14 +1,15 @@
-import { ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild, ViewContainerRef } from '@angular/core';
+import { ChangeDetectorRef, Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
 import { take } from 'rxjs/operators';
-import { CommentItemModel, CommentType } from 'src/app/_models/review';
-import { CodePanelData, CodePanelRowDatatype, StructuredToken } from 'src/app/_models/revision';
-import { CodePanelRowData } from 'src/app/_models/revision';
+import { CodePanelData } from 'src/app/_models/revision';
 import { Datasource, IDatasource, SizeStrategy } from 'ngx-ui-scroll';
 import { CommentsService } from 'src/app/_services/comments/comments.service';
-import { UserProfile } from 'src/app/_models/auth_service_models';
 import { getQueryParams } from 'src/app/_helpers/router-helpers';
 import { ActivatedRoute, Router } from '@angular/router';
 import { SCROLL_TO_NODE_QUERY_PARAM } from 'src/app/_helpers/literal-helpers';
+import { CodePanelRowData, CodePanelRowDatatype } from 'src/app/_models/codePanelRowData';
+import { StructuredToken } from 'src/app/_models/structuredToken';
+import { CommentItemModel, CommentType } from 'src/app/_models/commentItemModel';
+import { UserProfile } from 'src/app/_models/userProfile';
 
 @Component({
   selector: 'app-code-panel',

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

@@ -4,15 +4,10 @@ import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { IndexPageComponent } from './index-page.component';
 import { NavBarComponent } from '../shared/nav-bar/nav-bar.component';
 import { FooterComponent } from '../shared/footer/footer.component';
-import { SplitterModule } from 'primeng/splitter';
 import { ReviewsListComponent } from '../reviews-list/reviews-list.component';
-import { ContextMenuModule } from 'primeng/contextmenu';
-import { TableModule } from 'primeng/table';
-import { SidebarModule } from 'primeng/sidebar';
-import { DropdownModule } from 'primeng/dropdown';
-import {  FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MultiSelectModule } from 'primeng/multiselect';
 import { RevisionsListComponent } from '../revisions-list/revisions-list.component';
+import { AppModule } from 'src/app/app.module';
+import { SharedAppModule } from 'src/app/_modules/shared/shared-app.module';
 
 describe('IndexPageComponent', () => {
   let component: IndexPageComponent;
@@ -29,14 +24,8 @@ describe('IndexPageComponent', () => {
       ],
       imports: [
         HttpClientTestingModule,
-        SplitterModule,
-        ContextMenuModule,
-        TableModule,
-        SidebarModule,
-        DropdownModule,
-        ReactiveFormsModule,
-        FormsModule,
-        MultiSelectModule
+        SharedAppModule,
+        AppModule
       ]
     });
     fixture = TestBed.createComponent(IndexPageComponent);

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

@@ -27,22 +27,25 @@
             </ng-template>
         </li>
         <li class="list-group-item text-center">
-            <ng-container *ngIf="!reviewIsApproved && preferredApprovers.includes(userProfile?.userName!); else reviewApprovalHidden">
-                <span class="small text-muted">Approves First Release of the package</span>
-                <div class="d-grid gap-2">
-                    <button class="btn btn-success" type="button"
-                        (click)="handleReviewApprovalAction()"
-                        pTooltip="Package name must be approved before first preview release of a new package." 
-                        tooltipPosition="bottom">
-                        Approve First Release
-                    </button>
-                </div>
-                <span class="small mt-2 text-muted">First Release Approval Pending</span>
+            <ng-container *ngIf="reviewIsApproved; else reviewIsNotApproved">
+                <span class="small text-muted mt-1" id="first-release-approval-message">Approved for First Release By: <a href="{{webAppUrl}}Assemblies/Profile/{{reviewApprover}}">{{reviewApprover}}</a></span>
             </ng-container>
-            <ng-template #reviewApprovalHidden>
-                <span class="small text-muted mt-1">
-                    Approved for First Release By: <a href="{{webAppUrl}}Assemblies/Profile/{{reviewApprover}}">{{reviewApprover}}</a>
-                </span>
+            <ng-template #reviewIsNotApproved>
+                <div *ngIf="preferredApprovers.includes(userProfile?.userName!); else userIsNotAPreferedApprover">
+                    <span class="small text-muted">Approves First Release of the package</span>
+                    <div class="d-grid gap-2">
+                        <button class="btn btn-success" type="button" id="first-release-approval-button"
+                            (click)="handleReviewApprovalAction()"
+                            pTooltip="Package name must be approved before first preview release of a new package." 
+                            tooltipPosition="bottom">
+                            Approve First Release
+                        </button>
+                    </div>
+                    <span class="small mt-2 text-muted" id="first-release-approval-message">First Release Approval Pending</span>
+                </div>
+            </ng-template>
+            <ng-template #userIsNotAPreferedApprover>
+                <span class="small mt-2 text-muted" id="first-release-approval-message">First Release Approval Pending</span>
             </ng-template>
         </li>
     </ul>

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

@@ -1,14 +1,49 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { ReviewPageOptionsComponent } from './review-page-options.component';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
+import { ActivatedRoute, convertToParamMap } from '@angular/router';
+import { HttpErrorInterceptorService } from 'src/app/_services/http-error-interceptor/http-error-interceptor.service';
+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 { UserProfile } from 'src/app/_models/userProfile';
 
 describe('ReviewPageOptionsComponent', () => {
   let component: ReviewPageOptionsComponent;
   let fixture: ComponentFixture<ReviewPageOptionsComponent>;
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [ReviewPageOptionsComponent]
+      declarations: [
+        ReviewPageOptionsComponent,
+        PageOptionsSectionComponent
+      ],
+      imports: [
+        HttpClientTestingModule,
+        HttpClientModule,
+        BrowserAnimationsModule,
+        SharedAppModule,
+        ReviewPageModule
+      ],
+      providers: [
+        {
+          provide: ActivatedRoute,
+          useValue: {
+            snapshot: {
+              paramMap: convertToParamMap({ reviewId: 'test' }),
+              queryParamMap: convertToParamMap({ activeApiRevisionId: 'test', diffApiRevisionId: 'test' })
+            }
+          }
+        },
+        {
+          provide: HTTP_INTERCEPTORS,
+          useClass: HttpErrorInterceptorService,
+          multi: true
+        }
+      ]
     });
     fixture = TestBed.createComponent(ReviewPageOptionsComponent);
     component = fixture.componentInstance;
@@ -18,4 +53,37 @@ describe('ReviewPageOptionsComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  describe('First Release Approval Button', () => {
+    it('should disable first release approval button when review is approved', () => {
+      component.reviewIsApproved = true;
+      fixture.detectChanges();
+      const button = fixture.nativeElement.querySelector('#first-release-approval-button');
+      expect(button).not.toBeTruthy();
+      const message : HTMLElement = fixture.nativeElement.querySelector('#first-release-approval-message');
+      expect(message.textContent?.startsWith("Approved for First Release By:")).toBeTruthy()
+    });
+    it('should disable first release approval button when review is not approved and user is not an approver', () => {
+      component.reviewIsApproved = false;
+      component.userProfile = new UserProfile();
+      component.userProfile.userName = "test-user-1";
+      component.preferredApprovers = ["test-user-2"]
+      fixture.detectChanges();
+      const button = fixture.nativeElement.querySelector('#first-release-approval-button');
+      expect(button).not.toBeTruthy();
+      const message : HTMLElement = fixture.nativeElement.querySelector('#first-release-approval-message');
+      expect(message.textContent).toEqual("First Release Approval Pending");
+    });
+    it('should enable first release approval button when review is not approved and user is an approver', () => {
+      component.reviewIsApproved = false;
+      component.userProfile = new UserProfile();
+      component.userProfile.userName = "test-user";
+      component.preferredApprovers = ["test-user"]
+      fixture.detectChanges();
+      const button = fixture.nativeElement.querySelector('#first-release-approval-button');
+      expect(button).toBeTruthy();
+      const message : HTMLElement = fixture.nativeElement.querySelector('#first-release-approval-message');
+      expect(message.textContent).toEqual("First Release Approval Pending");
+    });
+  });
 });

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

@@ -3,12 +3,12 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { InputSwitchOnChangeEvent } from 'primeng/inputswitch';
 import { getQueryParams } from 'src/app/_helpers/router-helpers';
 import { mapLanguageAliases } from 'src/app/_helpers/service-helpers';
-import { UserProfile } from 'src/app/_models/auth_service_models';
 import { Review } from 'src/app/_models/review';
 import { APIRevision } from 'src/app/_models/revision';
 import { ConfigService } from 'src/app/_services/config/config.service';
 import { RevisionsService } from 'src/app/_services/revisions/revisions.service';
-import { pipe, take } from 'rxjs';
+import { take } from 'rxjs';
+import { UserProfile } from 'src/app/_models/userProfile';
 
 @Component({
   selector: 'app-review-page-options',

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

@@ -1,17 +1,22 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { ReviewPageComponent } from './review-page.component';
-import { ActivatedRoute, convertToParamMap, ParamMap } from '@angular/router';
+import { ActivatedRoute, convertToParamMap } from '@angular/router';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { NavBarComponent } from '../shared/nav-bar/nav-bar.component';
 import { ReviewInfoComponent } from '../shared/review-info/review-info.component';
-import { MenuModule } from 'primeng/menu';
-import { SplitterModule } from 'primeng/splitter';
-import {  SidebarModule } from 'primeng/sidebar';
 import { FooterComponent } from '../shared/footer/footer.component';
-import { BreadcrumbModule } from 'primeng/breadcrumb';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { CodePanelComponent } from '../code-panel/code-panel.component';
+import { ReviewsListComponent } from '../reviews-list/reviews-list.component';
+import { RevisionsListComponent } from '../revisions-list/revisions-list.component';
+import { of } from 'rxjs';
+import { ApprovalPipe } from 'src/app/_pipes/approval.pipe';
+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';
 
 describe('ReviewPageComponent', () => {
   let component: ReviewPageComponent;
@@ -21,27 +26,31 @@ describe('ReviewPageComponent', () => {
     TestBed.configureTestingModule({
       declarations: [ 
         ReviewPageComponent,
+        ReviewNavComponent,
+        ReviewPageOptionsComponent,
+        PageOptionsSectionComponent,
         NavBarComponent,
         ReviewInfoComponent,
         FooterComponent,
-        CodePanelComponent
+        CodePanelComponent,
+        ReviewsListComponent,
+        RevisionsListComponent,
+        ApprovalPipe
       ],
       imports: [
         HttpClientTestingModule,
-        MenuModule,
-        SplitterModule,
-        SidebarModule,
-        BreadcrumbModule,
-        BrowserAnimationsModule
+        BrowserAnimationsModule,
+        SharedAppModule,
+        ReviewPageModule
       ],
       providers: [
         {
           provide: ActivatedRoute,
           useValue: {
             snapshot: {
               paramMap: convertToParamMap({ reviewId: 'test' }),
-              queryParamMap: convertToParamMap({ activeApiRevisionId: 'test', diffApiRevisionId: 'test' })
-            }
+            },
+            queryParams: of(convertToParamMap({ activeApiRevisionId: 'test', diffApiRevisionId: 'test' }))
           }
         }
       ]

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

@@ -1,19 +1,20 @@
 import { ChangeDetectorRef, Component, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute, Params, Router } from '@angular/router';
 import { MenuItem, TreeNode } from 'primeng/api';
-import { Subject, Subscription, take, takeUntil, tap } from 'rxjs';
+import { Subject, take, takeUntil } from 'rxjs';
 import { getLanguageCssSafeName } from 'src/app/_helpers/component-helpers';
 import { getQueryParams } from 'src/app/_helpers/router-helpers';
-import { UserProfile } from 'src/app/_models/auth_service_models';
 import { Review } from 'src/app/_models/review';
-import { APIRevision, ApiTreeBuilderData, CodePanelData, CodePanelRowData, CodePanelRowDatatype, CodePanelToggleableData, ReviewPageWorkerMessageDirective } from 'src/app/_models/revision';
+import { APIRevision, ApiTreeBuilderData, CodePanelData, ReviewPageWorkerMessageDirective } from 'src/app/_models/revision';
 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';
 import { WorkerService } from 'src/app/_services/worker/worker.service';
 import { CodePanelComponent } from '../code-panel/code-panel.component';
 import { CommentsService } from 'src/app/_services/comments/comments.service';
 import { ACTIVE_API_REVISION_ID_QUERY_PARAM, DIFF_API_REVISION_ID_QUERY_PARAM, DIFF_STYLE_QUERY_PARAM, REVIEW_ID_ROUTE_PARAM, SCROLL_TO_NODE_QUERY_PARAM } from 'src/app/_helpers/literal-helpers';
+import { CodePanelRowData, CodePanelRowDatatype } from 'src/app/_models/codePanelRowData';
+import { UserProfile } from 'src/app/_models/userProfile';
 
 @Component({
   selector: 'app-review-page',