Merge pull request #12165 from jwangyangls/popup-unauthorized

[fix][unauthorized] Support show relogin when unauthorized  in popup modal

src/portal/src/app/account/account-settings/account-settings-modal.component.spec.ts

@@ -17,6 +17,7 @@ import { clone } from '../../../lib/utils/utils';
 import { ConfirmationDialogComponent } from '../../shared/confirmation-dialog/confirmation-dialog.component';
 import { ConfirmationDialogService } from '../../shared/confirmation-dialog/confirmation-dialog.service';
 import { ConfirmationMessage } from '../../shared/confirmation-dialog/confirmation-message';
+import { ErrorHandler } from '../../../lib/utils/error-handler';
 
 describe('AccountSettingsModalComponent', () => {
     let component: AccountSettingsModalComponent;
@@ -78,6 +79,7 @@ describe('AccountSettingsModalComponent', () => {
             providers: [
                 ChangeDetectorRef,
                 TranslateService,
+                ErrorHandler,
                 { provide: SessionService, useValue: fakeSessionService },
                 { provide: MessageHandlerService, useValue: fakeMessageHandlerService },
                 { provide: SearchTriggerService, useValue: fakeSearchTriggerService },

src/portal/src/app/account/password-setting/forgot-password/forgot-password.component.spec.ts

@@ -8,6 +8,7 @@ import { PasswordSettingService } from '../password-setting.service';
 import { InlineAlertComponent } from '../../../shared/inline-alert/inline-alert.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { of } from 'rxjs';
+import { ErrorHandler } from '../../../../lib/utils/error-handler';
 
 describe('ForgotPasswordComponent', () => {
     let component: ForgotPasswordComponent;
@@ -28,6 +29,7 @@ describe('ForgotPasswordComponent', () => {
             schemas: [CUSTOM_ELEMENTS_SCHEMA],
             providers: [
                 TranslateService,
+                ErrorHandler,
                 { provide: PasswordSettingService, useValue: fakePasswordSettingService }
             ]
         }).compileComponents();

src/portal/src/app/account/password-setting/password-setting.component.spec.ts

@@ -10,6 +10,7 @@ import { FormsModule } from '@angular/forms';
 import { InlineAlertComponent } from '../../shared/inline-alert/inline-alert.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { of } from 'rxjs';
+import { ErrorHandler } from '../../../lib/utils/error-handler';
 
 describe('PasswordSettingComponent', () => {
     let component: PasswordSettingComponent;
@@ -37,7 +38,8 @@ describe('PasswordSettingComponent', () => {
                 TranslateService,
                 { provide: PasswordSettingService, useValue: fakePasswordSettingService },
                 { provide: SessionService, useValue: fakeSessionService },
-                { provide: MessageHandlerService, useValue: fakeMessageHandlerService }
+                { provide: MessageHandlerService, useValue: fakeMessageHandlerService },
+                ErrorHandler
             ],
             schemas: [CUSTOM_ELEMENTS_SCHEMA],
         }).compileComponents();

src/portal/src/app/account/password-setting/reset-password/reset-password.component.spec.ts

@@ -9,6 +9,7 @@ import { MessageHandlerService } from '../../../shared/message-handler/message-h
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { ClarityModule } from '@clr/angular';
 import { InlineAlertComponent } from '../../../shared/inline-alert/inline-alert.component';
+import { ErrorHandler } from '../../../../lib/utils/error-handler';
 
 describe('ResetPasswordComponent', () => {
     let component: ResetPasswordComponent;
@@ -30,6 +31,7 @@ describe('ResetPasswordComponent', () => {
                 TranslateService,
                 { provide: PasswordSettingService, useValue: fakePasswordSettingService },
                 { provide: MessageHandlerService, useValue: fakeMessageHandlerService },
+                ErrorHandler
             ],
             schemas: [CUSTOM_ELEMENTS_SCHEMA]
         }).compileComponents();

src/portal/src/app/account/sign-up/sign-up.component.spec.ts

@@ -10,6 +10,7 @@ import { FormsModule } from '@angular/forms';
 import { InlineAlertComponent } from '../../shared/inline-alert/inline-alert.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { of } from 'rxjs';
+import { ErrorHandler } from '../../../lib/utils/error-handler';
 
 describe('SignUpComponent', () => {
     let component: SignUpComponent;
@@ -47,7 +48,8 @@ describe('SignUpComponent', () => {
             providers: [
                 TranslateService,
                 { provide: SessionService, useValue: fakeSessionService },
-                { provide: UserService, useValue: fakeUserService }
+                { provide: UserService, useValue: fakeUserService },
+                ErrorHandler
             ],
             schemas: [CUSTOM_ELEMENTS_SCHEMA]
         }).compileComponents();

src/portal/src/app/base/harbor-shell/harbor-shell.component.spec.ts

@@ -20,6 +20,7 @@ import { PasswordSettingService } from '../../account/password-setting/password-
 import { SkinableConfig } from '../../services/skinable-config.service';
 import { InlineAlertComponent } from '../../shared/inline-alert/inline-alert.component';
 import { AppConfigService } from "../../services/app-config.service";
+import { ErrorHandler } from '../../../lib/utils/error-handler';
 
 describe('HarborShellComponent', () => {
     let component: HarborShellComponent;
@@ -86,6 +87,7 @@ describe('HarborShellComponent', () => {
                 { provide: AccountSettingsModalService, useValue: mockAccountSettingsModalService },
                 { provide: PasswordSettingService, useValue: mockPasswordSettingService },
                 { provide: SkinableConfig, useValue: mockSkinableConfig },
+                ErrorHandler
             ],
             schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA]
         }).compileComponents();

src/portal/src/app/global-message/message.component.html

@@ -1,5 +1,5 @@
 <div [class.alert-app-level]="!isAppLevel" [hidden]="!globalMessageOpened">
-    <clr-alert  [clrAlertType]="globalMessage.type" [clrAlertAppLevel]="isAppLevel" [(clrAlertClosed)]="!globalMessageOpened" (clrAlertClosedChange)="onClose()">
+    <clr-alert  [clrAlertType]="globalMessage.type" [clrAlertClosable]="!needAuth" [clrAlertAppLevel]="isAppLevel" [(clrAlertClosed)]="!globalMessageOpened" (clrAlertClosedChange)="onClose()">
         <div class="alert-item">
             <span class="alert-text">{{message}}</span>
             <div class="alert-actions alert-style" *ngIf="needAuth">

src/portal/src/app/global-message/message.component.scss

@@ -5,5 +5,5 @@
     position: absolute;
     width: 100%;
     height: 100%;
-    z-index: 10000;
+    z-index: 1000;
 }

src/portal/src/app/global-message/message.component.ts

@@ -126,7 +126,7 @@ export class MessageComponent implements OnInit, OnDestroy {
   }
 
   signIn(): void {
-    this.router.navigateByUrl(CommonRoutes.EMBEDDED_SIGN_IN);
+    this.router.navigate([ CommonRoutes.EMBEDDED_SIGN_IN ], {queryParams: {redirect_url: this.router.url}});
   }
 
   onClose() {

src/portal/src/app/project/create-project/create-project.component.spec.ts

@@ -10,6 +10,7 @@ import { ProjectService } from "../../../lib/services";
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { of } from 'rxjs';
 import { delay } from 'rxjs/operators';
+import { ErrorHandler } from '../../../lib/utils/error-handler';
 
 describe('CreateProjectComponent', () => {
     let component: CreateProjectComponent;
@@ -47,6 +48,7 @@ describe('CreateProjectComponent', () => {
                 TranslateService,
                 {provide: ProjectService, useValue: mockProjectService},
                 {provide: MessageHandlerService, useValue: mockMessageHandlerService},
+                ErrorHandler
             ]
         }).compileComponents();
     }));

src/portal/src/app/project/helm-chart/helm-chart.service.ts

@@ -105,7 +105,7 @@ export class HelmChartDefaultService extends HelmChartService {
 
 
   private handleErrorObservable(error: HttpErrorResponse) {
-    return observableThrowError(error.error || error);
+    return observableThrowError(error);
   }
 
   public getHelmCharts(

src/portal/src/app/project/member/add-member/add-member.component.spec.ts

@@ -12,6 +12,7 @@ import { UserService } from '../../../user/user.service';
 import { of } from 'rxjs';
 import { MessageHandlerService } from '../../../shared/message-handler/message-handler.service';
 import { ActivatedRoute } from '@angular/router';
+import { ErrorHandler } from '../../../../lib/utils/error-handler';
 
 describe('AddMemberComponent', () => {
     let component: AddMemberComponent;
@@ -54,6 +55,7 @@ describe('AddMemberComponent', () => {
                 { provide: MemberService, useValue: mockMemberService },
                 { provide: UserService, useValue: mockUserService },
                 { provide: MessageHandlerService, useValue: mockMessageHandlerService },
+                ErrorHandler,
                 {
                     provide: ActivatedRoute, useValue: {
                         RouterparamMap: of({ get: (key) => 'value' }),

src/portal/src/app/project/member/add-member/add-member.component.ts

@@ -37,8 +37,7 @@ import {User} from "../../../user/user";
 import {Project} from "../../project";
 import { Member } from '../member';
 import { MemberService } from '../member.service';
-import { HttpResponseBase } from '@angular/common/http';
+import { ErrorHandler } from '../../../../lib/utils/error-handler';
-import { errorHandler } from "../../../../lib/utils/shared/shared.utils";
 
 
 @Component({
@@ -80,6 +79,7 @@ export class AddMemberComponent implements AfterViewChecked, OnInit, OnDestroy {
 
   constructor(private memberService: MemberService,
     private userService: UserService,
+    private errorHandle: ErrorHandler,
     private messageHandlerService: MessageHandlerService,
     private translateService: TranslateService,
     private route: ActivatedRoute,
@@ -158,22 +158,10 @@ export class AddMemberComponent implements AfterViewChecked, OnInit, OnDestroy {
       () => {
         this.messageHandlerService.showSuccess('MEMBER.ADDED_SUCCESS');
         this.added.emit(true);
-        // this.addMemberOpened = false;
       },
       error => {
-        if (error instanceof HttpResponseBase) {
+        this.errorHandle.error(error);
-          if (this.messageHandlerService.isAppLevel(error)) {
-            this.messageHandlerService.handleError(error);
-            // this.addMemberOpened = false;
-          } else {
-          let errorMessageKey: string = errorHandler(error);
-            this.translateService
-              .get(errorMessageKey)
-              .subscribe(errorMessage => this.messageHandlerService.handleError(errorMessage));
-          }
-        }
       });
-      // this.addMemberOpened = false;
   }
 
   selectedName(username: string) {

src/portal/src/app/project/member/member.component.ts

@@ -202,7 +202,7 @@ export class MemberComponent implements OnInit, OnDestroy {
         .changeMemberRole(projectId, member.id, roleId)
         .pipe(map(() => this.batchChangeRoleInfos[member.id] = 'done')
           , catchError(error => {
-            this.messageHandlerService.handleError(error + ": " + member.entity_name);
+            this.messageHandlerService.handleError(error);
             return observableThrowError(error);
           }));
     };

src/portal/src/app/project/tag-feature-integration/immutable-tag/add-rule/add-rule.component.spec.ts

@@ -9,6 +9,8 @@ import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { NoopAnimationsModule } from "@angular/platform-browser/animations";
 import { InlineAlertComponent } from "../../../../shared/inline-alert/inline-alert.component";
 import { ImmutableRetentionRule } from "../../tag-retention/retention";
+import { ErrorHandler } from '../../../../../lib/utils/error-handler';
+
 describe('AddRuleComponent', () => {
   let component: AddRuleComponent;
   let fixture: ComponentFixture<AddRuleComponent>;
@@ -36,7 +38,9 @@ describe('AddRuleComponent', () => {
       ]
     }
   };
-
+  const mockErrorHandler = {
+    handleErrorPopupUnauthorized: () => {}
+  }
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [AddRuleComponent, InlineAlertComponent],
@@ -51,7 +55,11 @@ describe('AddRuleComponent', () => {
         TranslateModule.forRoot()
       ],
       providers: [
-        ImmutableTagService
+        ImmutableTagService,
+        ErrorHandler,
+        {
+          provide: ErrorHandler, useValue: mockErrorHandler
+        }
       ]
     })
       .compileComponents();

src/portal/src/app/project/tag-feature-integration/tag-retention/add-rule/add-rule.component.spec.ts

@@ -11,10 +11,12 @@ import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { TagRetentionService } from "../tag-retention.service";
 import { InlineAlertComponent } from "../../../../shared/inline-alert/inline-alert.component";
 import { delay } from 'rxjs/operators';
+import { ErrorHandler } from '../../../../../lib/utils/error-handler';
 describe('AddRuleComponent', () => {
     let component: AddRuleComponent;
     let fixture: ComponentFixture<AddRuleComponent>;
     const mockTagRetentionService = { };
+
     beforeEach(async(() => {
         TestBed.configureTestingModule({
             schemas: [
@@ -32,6 +34,7 @@ describe('AddRuleComponent', () => {
             declarations: [AddRuleComponent, InlineAlertComponent],
             providers: [
                 TranslateService,
+                ErrorHandler,
                 { provide: TagRetentionService, useValue: mockTagRetentionService },
             ]
         })

src/portal/src/app/project/webhook/add-webhook-form/add-webhook-form.component.spec.ts

@@ -11,6 +11,7 @@ import { MessageHandlerService } from "../../../shared/message-handler/message-h
 import { of } from 'rxjs';
 import { Webhook } from "../webhook";
 import { InlineAlertComponent } from "../../../shared/inline-alert/inline-alert.component";
+import { ErrorHandler } from '../../../../lib/utils/error-handler';
 
 describe('AddWebhookFormComponent', () => {
     let component: AddWebhookFormComponent;
@@ -91,6 +92,7 @@ describe('AddWebhookFormComponent', () => {
                 TranslateService,
                 { provide: WebhookService, useValue: mockWebhookService },
                 { provide: MessageHandlerService, useValue: mockMessageHandlerService },
+                ErrorHandler
 
 
             ]

src/portal/src/app/project/webhook/webhook.component.spec.ts

@@ -18,6 +18,8 @@ import { InlineAlertComponent } from "../../shared/inline-alert/inline-alert.com
 import { AddWebhookComponent } from "./add-webhook/add-webhook.component";
 import { ConfirmationDialogComponent } from "../../../lib/components/confirmation-dialog";
 import { UserPermissionService } from '../../../lib/services';
+import { ErrorHandler } from '../../../lib/utils/error-handler';
+
 describe('WebhookComponent', () => {
     let component: WebhookComponent;
     let fixture: ComponentFixture<WebhookComponent>;
@@ -121,6 +123,7 @@ describe('WebhookComponent', () => {
             ],
             providers: [
                 TranslateService,
+                ErrorHandler,
                 { provide: WebhookService, useValue: mockWebhookService },
                 { provide: MessageHandlerService, useValue: mockMessageHandlerService },
                 { provide: ActivatedRoute, useValue: mockActivatedRoute },

src/portal/src/app/shared/inline-alert/inline-alert.component.spec.ts

@@ -8,6 +8,9 @@ import { FormsModule } from '@angular/forms';
 import { RouterTestingModule } from '@angular/router/testing';
 import { of } from 'rxjs';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { MessageHandlerService } from '../message-handler/message-handler.service';
+import { ErrorHandler } from '../../../lib/utils/error-handler';
+
 describe('InlineAlertComponent', () => {
     let component: InlineAlertComponent;
     let fixture: ComponentFixture<InlineAlertComponent>;
@@ -28,7 +31,8 @@ describe('InlineAlertComponent', () => {
             ],
             declarations: [InlineAlertComponent],
             providers: [
-                TranslateService
+                TranslateService,
+                ErrorHandler
             ]
         })
             .compileComponents();

src/portal/src/app/shared/inline-alert/inline-alert.component.ts

@@ -15,6 +15,8 @@ import { Component, Output, EventEmitter } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 import { Subscription } from "rxjs";
 import { errorHandler } from "../../../lib/utils/shared/shared.utils";
+import { MessageHandlerService } from '../message-handler/message-handler.service';
+import { ErrorHandler } from '../../../lib/utils/error-handler';
 
 @Component({
     selector: 'inline-alert',
@@ -35,7 +37,9 @@ export class InlineAlertComponent {
     @Output() confirmEvt = new EventEmitter<boolean>();
     @Output() closeEvt = new EventEmitter<boolean>();
 
-    constructor(private translate: TranslateService) { }
+    constructor(private translate: TranslateService,
+        private errHandler: ErrorHandler,
+        ) { }
 
     public get errorMessage(): string {
         return this.displayedText;
@@ -47,7 +51,7 @@ export class InlineAlertComponent {
         if (this.displayedText) {
             this.translate.get(this.displayedText).subscribe((res: string) => this.displayedText = res);
         }
-
+        this.errHandler.handleErrorPopupUnauthorized(error);
         this.inlineAlertType = 'danger';
         this.showCancelAction = false;
         this.inlineAlertClosable = true;

src/portal/src/app/shared/message-handler/message-handler.service.ts

@@ -51,6 +51,19 @@ export class MessageHandlerService implements ErrorHandler {
             }
         }
     }
+    public handleErrorPopupUnauthorized(error: any | string): void {
+
+        if (!(error.statusCode || error.status)) {
+            return;
+        }
+        let msg = errorHandler(error);
+        let code = error.statusCode || error.status;
+        if (code === httpStatusCode.Unauthorized) {
+            this.msgService.announceAppLevelMessage(code, msg, AlertType.DANGER);
+            // Session is invalid now, clare session cache
+            this.session.clear();
+        }
+    }
 
     public handleReadOnly(): void {
         this.msgService.announceAppLevelMessage(503, 'REPO_READ_ONLY', AlertType.WARNING);

src/portal/src/lib/components/config/project-quotas/edit-project-quotas/edit-project-quotas.component.spec.ts

@@ -5,6 +5,7 @@ import { EditQuotaQuotaInterface } from '../../../../services';
 import { HarborLibraryModule } from '../../../../harbor-library.module';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { CURRENT_BASE_HREF } from "../../../../utils/utils";
+import { ErrorHandler } from '../../../../utils/error-handler';
 
 describe('EditProjectQuotasComponent', () => {
   let component: EditProjectQuotasComponent;
@@ -27,6 +28,7 @@ describe('EditProjectQuotasComponent', () => {
       ],
       providers: [
         { provide: SERVICE_CONFIG, useValue: config },
+        ErrorHandler
       ]
     })
     .compileComponents();

src/portal/src/lib/components/inline-alert/inline-alert.component.ts

@@ -15,8 +15,8 @@ import { Component, Output, EventEmitter } from "@angular/core";
 import { TranslateService } from "@ngx-translate/core";
 
 import { errorHandler } from "../../utils/shared/shared.utils";
-// tslint:disable-next-line:no-unused-variable
 import { Observable,  Subscription } from "rxjs";
+import { ErrorHandler } from "../../../lib/utils/error-handler";
 
 @Component({
   selector: "hbr-inline-alert",
@@ -36,7 +36,9 @@ export class InlineAlertComponent {
 
   @Output() confirmEvt = new EventEmitter<boolean>();
 
-  constructor(private translate: TranslateService) {}
+  constructor(private translate: TranslateService,
+    private errHandler: ErrorHandler,
+    ) {}
 
   public get errorMessage(): string {
     return this.displayedText;
@@ -50,6 +52,7 @@ export class InlineAlertComponent {
         .get(this.displayedText)
         .subscribe((res: string) => (this.displayedText = res));
     }
+    this.errHandler.handleErrorPopupUnauthorized(error);
 
     this.inlineAlertType = "danger";
     this.showCancelAction = false;

src/portal/src/lib/components/push-image/push-image.component.spec.ts

@@ -6,6 +6,7 @@ import { InlineAlertComponent } from '../inline-alert/inline-alert.component';
 
 import { SERVICE_CONFIG, IServiceConfig } from '../../entities/service.config';
 import { SharedModule } from '../../utils/shared/shared.module';
+import { ErrorHandler } from '../../../lib/utils/error-handler';
 
 describe('PushImageButtonComponent (inline template)', () => {
   let component: PushImageButtonComponent;
@@ -19,7 +20,8 @@ describe('PushImageButtonComponent (inline template)', () => {
       ],
       declarations: [InlineAlertComponent, CopyInputComponent, PushImageButtonComponent],
       providers: [
-        { provide: SERVICE_CONFIG, useValue: {} }
+        { provide: SERVICE_CONFIG, useValue: {} },
+        ErrorHandler
       ]
     });
 

src/portal/src/lib/components/replication/replication.component.spec.ts

@@ -1,6 +1,6 @@
 import { ComponentFixture, TestBed, async } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-import { DebugElement } from '@angular/core';
+import { DebugElement, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { NoopAnimationsModule } from "@angular/platform-browser/animations";
 
 import { SharedModule } from '../../utils/shared/shared.module';
@@ -155,6 +155,7 @@ describe('Replication Component (inline template)', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
+      schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
       imports: [
         SharedModule,
         NoopAnimationsModule,

src/portal/src/lib/utils/error-handler/error-handler.ts

@@ -47,6 +47,8 @@ export abstract class ErrorHandler {
    * @memberOf ErrorHandler
    */
   abstract log(log: any): void;
+
+  abstract handleErrorPopupUnauthorized(error: any): void;
 }
 
 @Injectable()
@@ -67,4 +69,7 @@ export class DefaultErrorHandler extends ErrorHandler {
   public log(log: any): void {
     console.log("[Default log handler]: ", log);
   }
+  public handleErrorPopupUnauthorized(error: any): void {
+    console.log("[Default log handler]: ", error);
+  }
 }