Update Requested Review link (#12684)

* temp test

* test preferredApprovers

* add withCredentials

* test allowed approvers with credentials

* add login check

* Update src/dotnet/APIView/ClientSPA/src/app/_components/shared/nav-bar/nav-bar.component.ts

Co-authored-by: Copilot <[email protected]>

* fix comment via combineLatest

* fix comments

---------

Co-authored-by: Copilot <[email protected]>

Author: helen229

src/dotnet/APIView/ClientSPA/src/app/_components/shared/nav-bar/nav-bar.component.html

@@ -7,6 +7,9 @@
         </button>
         <div class="navbar-collapse collapse">
             <ul class="navbar-nav ms-auto">
+                <li *ngIf="isLoggedIn && isApprover" class="nav-item">
+                    <a href="{{RequestReviewPageUrl}}" class="nav-link">Requested Reviews</a>
+                </li>
                 <li *ngIf="isLoggedIn"  class="nav-item">
                     <a class="nav-link position-relative" (click)="notificationsSidePanel = !notificationsSidePanel">
                         <i class="bi bi-bell"></i>
@@ -24,9 +27,6 @@
                         <li><a class="dropdown-item" href="{{logoutPageWebAppUrl}}">Log Out</a></li>
                     </ul>
                 </li>
-                <li *ngIf="isLoggedIn && isApprover" class="nav-item">
-                    <a href="{{RequestReviewPageUrl}}" class="nav-link">Requested Reviews</a>
-                </li>
                 <li class="nav-item">
                     <a href="https://github.com/Azure/azure-sdk-tools/blob/main/src/dotnet/APIView/APIViewWeb/README.md" class="nav-link">Help</a>
                 </li>

src/dotnet/APIView/ClientSPA/src/app/_components/shared/nav-bar/nav-bar.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { HttpClient } from '@angular/common/http';
+import { combineLatest } from 'rxjs';
 import { REVIEW_ID_ROUTE_PARAM } from 'src/app/_helpers/router-helpers';
 import { NotificationsFilter, SiteNotification } from 'src/app/_models/notificationsModel';
 import { UserProfile } from 'src/app/_models/userProfile';
@@ -38,17 +39,18 @@ export class NavBarComponent implements OnInit {
 
   ngOnInit(): void {
     this.reviewId = this.route.snapshot.paramMap.get(REVIEW_ID_ROUTE_PARAM);
-    this.authService.isLoggedIn().subscribe(isLoggedIn => {
-      this.isLoggedIn = isLoggedIn;
-    });
 
-    this.userProfileService.getUserProfile().subscribe(
-      (userProfile : any) => {
-        this.userProfile = userProfile;
-        // Check if user is an approver
+    // Use combineLatest to wait for both isLoggedIn and userProfile before checking approver status
+    combineLatest([
+      this.authService.isLoggedIn(),
+      this.userProfileService.getUserProfile()
+    ]).subscribe(([isLoggedIn, userProfile]) => {
+      this.isLoggedIn = isLoggedIn;
+      this.userProfile = userProfile;
+      if (isLoggedIn && userProfile) {
         this.checkApproverStatus();
       }
-    );
+    });
 
     this.notificationsService.notifications$.subscribe(notifications => {
       this.notifications = notifications;
@@ -78,22 +80,24 @@ export class NavBarComponent implements OnInit {
   }
 
   private checkApproverStatus() {
-    if (this.userProfile?.userName) {
-      // Call the API to get allowed approvers
-      this.http.get<string>(`${this.configService.apiUrl}/Reviews/allowedApprovers`).subscribe({
-        next: (allowedApprovers) => {
-          if (allowedApprovers) {
-            // Split comma-separated string and check if current user is in the list
-            const approversList = allowedApprovers.split(',').map(username => username.trim());
-            this.isApprover = approversList.includes(this.userProfile?.userName || '');
-          }
-        },
-        error: (error) => {
-          console.error('Failed to fetch allowed approvers:', error);
+    if (!this.userProfile?.userName || !this.isLoggedIn) {
+      this.isApprover = false;
+      return;
+    }
+
+    this.http.get<string>(`${this.configService.apiUrl}/Reviews/allowedApprovers`, { withCredentials: true }).subscribe({
+      next: (allowedApprovers) => {
+        if (allowedApprovers) {
+          const approversList = allowedApprovers.split(',').map(username => username.trim());
+          this.isApprover = approversList.includes(this.userProfile?.userName || '');
+        } else {
           this.isApprover = false;
-          // Optionally, notify the user here if desired
         }
-      });
-    }
+      },
+      error: (error) => {
+        console.error('Failed to fetch allowed approvers:', error);
+        this.isApprover = false;
+      }
+    });
   }
 }