MARP-1736 add loading spinner for proceed button in security monitor page

marketplace-ui/src/app/auth/auth.service.spec.ts

@@ -1,9 +1,11 @@
 import { TestBed } from '@angular/core/testing';
-import { HttpClientTestingModule, HttpTestingController, provideHttpClientTesting } from '@angular/common/http/testing';
+import {
+  HttpTestingController,
+  provideHttpClientTesting
+} from '@angular/common/http/testing';
 import { Router } from '@angular/router';
 import { CookieService } from 'ngx-cookie-service';
 import { AuthService } from './auth.service';
-import { environment } from '../../environments/environment';
 import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { TOKEN_KEY } from '../shared/constants/common.constant';
 

marketplace-ui/src/app/core/interceptors/api.interceptor.ts

@@ -25,12 +25,16 @@ export const LoadingComponent = new HttpContextToken<string>(() => '');
 
 export const apiInterceptor: HttpInterceptorFn = (req, next) => {
   const router = inject(Router);
-
   const loadingService = inject(LoadingService);
 
   if (req.url.includes('i18n')) {
     return next(req);
   }
+
+  if (req.context.get(LoadingComponent)) {
+    loadingService.showLoading(req.context.get(LoadingComponent));
+  }
+
   let requestURL = req.url;
   const apiURL = environment.apiUrl;
   if (!requestURL.includes(apiURL)) {

marketplace-ui/src/app/modules/product/product-detail/product-detail-version-action/product-detail-version-action.component.ts

@@ -178,7 +178,6 @@ export class ProductDetailVersionActionComponent implements AfterViewInit {
   }
 
   getVersionWithArtifact(ignoreRouteVersion = false) {
-    this.loadingService.showLoading(LoadingComponentId.PRODUCT_VERSION);
     this.sanitizeDataBeforeFetching();
     this.productService
       .sendRequestToProductDetailVersionAPI(
@@ -203,7 +202,6 @@ export class ProductDetailVersionActionComponent implements AfterViewInit {
             this.getVersionFromRoute(ignoreRouteVersion) ?? this.versions()[0]
           );
         }
-        this.loadingService.hideLoading(LoadingComponentId.PRODUCT_VERSION);
       });
   }
 

marketplace-ui/src/app/modules/product/product-detail/product-detail.component.ts

@@ -167,8 +167,7 @@ export class ProductDetailComponent {
         userFeedback: this.productFeedbackService.findProductFeedbackOfUser()
       }).subscribe(res => {
         this.handleProductDetail(res.productDetail);
-        this.productFeedbackService.handleFeedbackApiResponse(
-          res.productFeedBack);
+        this.productFeedbackService.handleFeedbackApiResponse(res.productFeedBack);
         this.updateDropdownSelection();
         this.checkMediaSize();
         this.route.queryParams.subscribe(params => {
@@ -180,8 +179,8 @@ export class ProductDetailComponent {
               .catch(() => this.removeQueryParam());
           }
         });
+        this.loadingService.hideLoading(LoadingComponentId.DETAIL_PAGE);
       });
-      this.loadingService.hideLoading(LoadingComponentId.DETAIL_PAGE);
     }
   }
 

marketplace-ui/src/app/modules/product/product-detail/product-detail.service.ts

@@ -1,7 +1,6 @@
 import { inject, Injectable, signal, WritableSignal } from '@angular/core';
 import { DisplayValue } from '../../../shared/models/display-value.model';
 import { HttpClient, HttpContext } from '@angular/common/http';
-import { LoadingService } from '../../../core/services/loading/loading.service';
 import { Observable } from 'rxjs';
 import { API_URI } from '../../../shared/constants/api.constant';
 import { ForwardingError } from '../../../core/interceptors/api.interceptor';
@@ -15,7 +14,6 @@ export class ProductDetailService {
   productNames: WritableSignal<DisplayValue> = signal({} as DisplayValue);
   productLogoUrl: WritableSignal<string> = signal('');
   httpClient = inject(HttpClient);
-  loadingService = inject(LoadingService);
   ratingBtnLabel: WritableSignal<string> = signal('');
   noFeedbackLabel: WritableSignal<string> = signal('');
 

marketplace-ui/src/app/modules/product/product.service.spec.ts

@@ -2,7 +2,6 @@ import { TestBed } from '@angular/core/testing';
 
 import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { HttpTestingController, provideHttpClientTesting } from '@angular/common/http/testing';
-import { LoadingService } from '../../core/services/loading/loading.service';
 import { Language } from '../../shared/enums/language.enum';
 import { SortOption } from '../../shared/enums/sort-option.enum';
 import { TypeOption } from '../../shared/enums/type-option.enum';
@@ -27,8 +26,7 @@ describe('ProductService', () => {
       providers: [
         ProductService,
         provideHttpClient(withInterceptorsFromDi()),
-        provideHttpClientTesting(),
-        LoadingService
+        provideHttpClientTesting()
       ]
     });
     service = TestBed.inject(ProductService);

marketplace-ui/src/app/modules/product/product.service.ts

@@ -1,7 +1,6 @@
 import { HttpClient, HttpContext, HttpParams } from '@angular/common/http';
 import { Injectable, inject } from '@angular/core';
 import { Observable } from 'rxjs';
-import { LoadingService } from '../../core/services/loading/loading.service';
 import { RequestParam } from '../../shared/enums/request-param';
 import { ProductApiResponse } from '../../shared/models/apis/product-response.model';
 import { Criteria } from '../../shared/models/criteria.model';
@@ -15,10 +14,8 @@ import { LoadingComponentId } from '../../shared/enums/loading-component-id';
 @Injectable()
 export class ProductService {
   httpClient = inject(HttpClient);
-  loadingService = inject(LoadingService);
 
   findProductsByCriteria(criteria: Criteria): Observable<ProductApiResponse> {
-    this.loadingService.showLoading(LoadingComponentId.LANDING_PAGE);
     let requestParams = new HttpParams();
     let requestURL = API_URI.PRODUCT;
     if (criteria.nextPageHref) {
@@ -82,7 +79,13 @@ export class ProductService {
     const params = new HttpParams()
       .append('designerVersion', designerVersion)
       .append('isShowDevVersion', showDevVersion);
-    return this.httpClient.get<VersionData[]>(url, { params });
+    return this.httpClient.get<VersionData[]>(url, {
+      params,
+      context: new HttpContext().set(
+        LoadingComponent,
+        LoadingComponentId.PRODUCT_VERSION
+      )
+    });
   }
 
   sendRequestToUpdateInstallationCount(

marketplace-ui/src/app/modules/security-monitor/security-monitor.component.html

@@ -98,4 +98,7 @@ <h3>Please enter your token to access the security page.</h3>
       </div>
     </div>
   }
+  <app-loading-spinner
+  containerClasses="d-flex justify-content-center position-fixed align-items-center top-0 end-0 bottom-0 start-0 rounded overlay-background z-1"
+  [key]="LoadingComponentId.SECURITY_MONITOR" />
 </div>

marketplace-ui/src/app/modules/security-monitor/security-monitor.component.ts

@@ -6,21 +6,23 @@ import { HttpErrorResponse } from '@angular/common/http';
 import { SecurityMonitorService } from './security-monitor.service';
 import { ProductSecurityInfo } from '../../shared/models/product-security-info-model';
 import { GITHUB_MARKET_ORG_URL, REPO_PAGE_PATHS, SECURITY_MONITOR_MESSAGES, SECURITY_MONITOR_SESSION_KEYS, TIME_UNITS, UNAUTHORIZED } from '../../shared/constants/common.constant';
+import { LoadingComponentId } from '../../shared/enums/loading-component-id';
+import { LoadingSpinnerComponent } from '../../shared/components/loading-spinner/loading-spinner.component';
 
 @Component({
   selector: 'app-security-monitor',
   standalone: true,
-  imports: [CommonModule, FormsModule],
+  imports: [CommonModule, FormsModule, LoadingSpinnerComponent],
   templateUrl: './security-monitor.component.html',
   styleUrls: ['./security-monitor.component.scss'],
-  encapsulation: ViewEncapsulation.Emulated,
+  encapsulation: ViewEncapsulation.Emulated
 })
 export class SecurityMonitorComponent {
   isAuthenticated = false;
   token = '';
   errorMessage = '';
   repos: ProductSecurityInfo[] = [];
-
+  protected LoadingComponentId = LoadingComponentId;
   private readonly securityMonitorService = inject(SecurityMonitorService);
 
   ngOnInit(): void {
@@ -45,8 +47,7 @@ export class SecurityMonitorComponent {
         this.repos = JSON.parse(sessionData) as ProductSecurityInfo[];
         this.isAuthenticated = true;
       }
-    }
-    catch (error) {
+    } catch (error) {
       this.clearSessionData();
     }
   }
@@ -58,10 +59,12 @@ export class SecurityMonitorComponent {
   }
 
   private fetchSecurityDetails(): void {
-    this.securityMonitorService.getSecurityDetails(this.token).subscribe({
-      next: data => this.handleSuccess(data),
-      error: (err: HttpErrorResponse) => this.handleError(err),
-    });
+    this.securityMonitorService
+      .getSecurityDetails(this.token)
+      .subscribe({
+        next: data => this.handleSuccess(data),
+        error: (err: HttpErrorResponse) => this.handleError(err)
+      });
   }
 
   private handleSuccess(data: ProductSecurityInfo[]): void {

marketplace-ui/src/app/modules/security-monitor/security-monitor.service.ts

@@ -1,19 +1,26 @@
-import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { HttpClient, HttpContext, HttpHeaders } from '@angular/common/http';
 import { inject, Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
 import { environment } from '../../../environments/environment';
 import { ProductSecurityInfo } from '../../shared/models/product-security-info-model';
+import { LoadingComponent } from '../../core/interceptors/api.interceptor';
+import { LoadingComponentId } from '../../shared/enums/loading-component-id';
 
 @Injectable({
   providedIn: 'root'
 })
 export class SecurityMonitorService {
-
   private readonly apiUrl = environment.apiUrl + '/api/security-monitor';
   private readonly http = inject(HttpClient);
 
   getSecurityDetails(token: string): Observable<ProductSecurityInfo[]> {
     const headers = new HttpHeaders().set('Authorization', `Bearer ${token}`);
-    return this.http.get<ProductSecurityInfo[]>(this.apiUrl, { headers });
+    return this.http.get<ProductSecurityInfo[]>(this.apiUrl, {
+      headers,
+      context: new HttpContext().set(
+        LoadingComponent,
+        LoadingComponentId.SECURITY_MONITOR
+      )
+    });
   }
 }

marketplace-ui/src/app/shared/enums/loading-component-id.ts

@@ -2,5 +2,6 @@ export enum LoadingComponentId {
   LANDING_PAGE = 'landing-page',
   PRODUCT_DETAIL_INFORMATION = 'product-detail-information',
   PRODUCT_VERSION = 'product-version',
-  DETAIL_PAGE = 'detail-page'
+  DETAIL_PAGE = 'detail-page',
+  SECURITY_MONITOR = 'security-monitor'
 }