Refactor the navigation process

1.Fixes #19630 2.Allow unauthenticated users to view public projects's detail page and its public tabs Signed-off-by: Shijun Sun <[email protected]>
goharbor · Jul 25, 2024 · 8588f8c · 8588f8c
1 parent 64df11b
commit 8588f8c
Show file tree

Hide file tree

Showing 18 changed files with 95 additions and 194 deletions.
diff --git a/src/portal/src/app/account/sign-in/sign-in.service.ts b/src/portal/src/app/account/sign-in/sign-in.service.ts
@@ -50,6 +50,3 @@ export class SignInService {
             );
     }
 }
-
-export const UN_LOGGED_PARAM: string = 'publicAndNotLogged';
-export const YES: string = 'yes';
diff --git a/src/portal/src/app/base/project/project-detail/project-detail.component.html b/src/portal/src/app/base/project/project-detail/project-detail.component.html
@@ -1,23 +1,21 @@
-<span class="back-icon"><</span>
-<a *ngIf="hasSignedIn" (click)="backToProject()" class="backStyle">{{
-    'PROJECT_DETAIL.PROJECTS' | translate
-}}</a>
-<ng-container *ngIf="hasSignedIn && isWebhookTaskListPage()">
+<ng-container *ngIf="hasSignedIn">
+    <span class="back-icon"><</span>
+    <a (click)="backToProject()" class="backStyle">{{
+        'PROJECT_DETAIL.PROJECTS' | translate
+    }}</a>
+</ng-container>
+<ng-container *ngIf="isWebhookTaskListPage()">
     <span class="back-icon"><</span>
     <a (click)="backToWebhook()" class="backStyle">{{
         'PROJECT_DETAIL.WEBHOOKS' | translate
     }}</a>
 </ng-container>
-<ng-container *ngIf="hasSignedIn && isP2pPreheatTaskListPage()">
+<ng-container *ngIf="isP2pPreheatTaskListPage()">
     <span class="back-icon"><</span>
     <a (click)="backToP2pPreheat()" class="backStyle">{{
         'P2P_PROVIDER.P2P_PROVIDER' | translate
     }}</a>
 </ng-container>
-
-<a *ngIf="!hasSignedIn" [routerLink]="['/harbor', 'sign-in']" class="backStyle">
-    {{ 'SEARCH.BACK' | translate }}</a
->
 <div class="clr-row">
     <div class="clr-col-5">
         <h1 class="custom-h2 center" sub-header-title>

diff --git a/src/portal/src/app/base/project/project-detail/project-detail.component.ts b/src/portal/src/app/base/project/project-detail/project-detail.component.ts
@@ -22,7 +22,6 @@ import {
 import { ActivatedRoute, Router } from '@angular/router';
 import { Project } from '../project';
 import { SessionService } from '../../../shared/services/session.service';
-import { AppConfigService } from '../../../services/app-config.service';
 import { forkJoin, Observable, Subject, Subscription } from 'rxjs';
 import {
     UserPermissionService,
@@ -146,8 +145,7 @@ export class ProjectDetailComponent
             linkName: 'configs',
             tabLinkInOverflow: false,
             showTabName: 'PROJECT_DETAIL.CONFIG',
-            permissions: () =>
-                this.isSessionValid && this.hasConfigurationListPermission,
+            permissions: () => this.hasConfigurationListPermission,
         },
     ];
     previousWindowWidth: number;
@@ -163,7 +161,6 @@ export class ProjectDetailComponent
         private route: ActivatedRoute,
         private router: Router,
         private sessionService: SessionService,
-        private appConfigService: AppConfigService,
         private userPermissionService: UserPermissionService,
         private errorHandler: ErrorHandler,
         private cdf: ChangeDetectorRef,
@@ -342,7 +339,13 @@ export class ProjectDetailComponent
                     this.getQuotaInfo();
                 }
             },
-            error => this.errorHandler.error(error)
+            error => {
+                // for un-authed users, they can view 'summary,repositories and labels' tabs
+                this.hasProjectReadPermission = true;
+                this.hasRepositoryListPermission = true;
+                this.hasLabelListPermission = true;
+                this.hasLabelCreatePermission = true;
+            }
         );
     }
     getQuotaInfo() {

diff --git a/src/portal/src/app/base/project/project.module.ts b/src/portal/src/app/base/project/project.module.ts
@@ -25,7 +25,6 @@ const routes: Routes = [
         children: [
             {
                 path: 'summary',
-                canActivate: [MemberPermissionGuard],
                 data: {
                     permissionParam: {
                         resource: USERSTATICPERMISSION.PROJECT.KEY,
@@ -39,7 +38,6 @@ const routes: Routes = [
             },
             {
                 path: 'repositories',
-                canActivate: [MemberPermissionGuard],
                 data: {
                     permissionParam: {
                         resource: USERSTATICPERMISSION.REPOSITORY.KEY,
@@ -79,7 +77,6 @@ const routes: Routes = [
             },
             {
                 path: 'labels',
-                canActivate: [MemberPermissionGuard],
                 data: {
                     permissionParam: {
                         resource: USERSTATICPERMISSION.LABEL.KEY,

diff --git a/...app/base/project/repository/artifact/artifact-list-page/artifact-list-page.component.html b/...app/base/project/repository/artifact/artifact-list-page/artifact-list-page.component.html
@@ -1,7 +1,9 @@
 <div>
     <div class="breadcrumb">
-        <span class="back-icon"><</span>
-        <a (click)="goProBack()">{{ 'SIDE_NAV.PROJECTS' | translate }}</a>
+        <ng-container *ngIf="hasSignedIn()">
+            <span class="back-icon"><</span>
+            <a (click)="goProBack()">{{ 'SIDE_NAV.PROJECTS' | translate }}</a>
+        </ng-container>
         <span class="back-icon"><</span>
         <a (click)="watchGoBackEvt(projectId)">{{ projectName }}</a>
         <span *ngIf="depth"

diff --git a/...c/app/base/project/repository/artifact/artifact-list-page/artifact-list-page.component.ts b/...c/app/base/project/repository/artifact/artifact-list-page/artifact-list-page.component.ts
@@ -16,6 +16,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { Project } from '../../../project';
 import { ArtifactListPageService } from './artifact-list-page.service';
 import { Subscription } from 'rxjs';
+import { SessionService } from '../../../../../shared/services/session.service';
 
 @Component({
     selector: 'artifact-list-page',
@@ -33,7 +34,8 @@ export class ArtifactListPageComponent implements OnDestroy {
     constructor(
         private route: ActivatedRoute,
         private router: Router,
-        private artifactListPageService: ArtifactListPageService
+        private artifactListPageService: ArtifactListPageService,
+        private sessionService: SessionService
     ) {
         if (!this.routeParamsSub) {
             this.routeParamsSub = this.route.params.subscribe(params => {
@@ -104,4 +106,7 @@ export class ArtifactListPageComponent implements OnDestroy {
             ]);
         }
     }
+    hasSignedIn(): boolean {
+        return !!this.sessionService.getCurrentUser();
+    }
 }
diff --git a/...rtifact/artifact-list-page/artifact-list/artifact-list-tab/artifact-list-tab.component.ts b/...rtifact/artifact-list-page/artifact-list/artifact-list-tab/artifact-list-tab.component.ts
@@ -68,10 +68,6 @@ import { errorHandler } from '../../../../../../../shared/units/shared.utils';
 import { ConfirmationDialogComponent } from '../../../../../../../shared/components/confirmation-dialog';
 import { ConfirmationMessage } from '../../../../../../global-confirmation-dialog/confirmation-message';
 import { ConfirmationAcknowledgement } from '../../../../../../global-confirmation-dialog/confirmation-state-message';
-import {
-    UN_LOGGED_PARAM,
-    YES,
-} from '../../../../../../../account/sign-in/sign-in.service';
 import { Label } from '../../../../../../../../../ng-swagger-gen/models/label';
 import {
     EventService,
@@ -84,7 +80,6 @@ import { Accessory } from 'ng-swagger-gen/models/accessory';
 import { Tag } from '../../../../../../../../../ng-swagger-gen/models/tag';
 import { CopyArtifactComponent } from './copy-artifact/copy-artifact.component';
 import { CopyDigestComponent } from './copy-digest/copy-digest.component';
-import { Scanner } from '../../../../../../left-side-nav/interrogation-services/scanner/scanner';
 
 export const AVAILABLE_TIME = '0001-01-01T00:00:00.000Z';
 
@@ -767,20 +762,10 @@ export class ArtifactListTabComponent implements OnInit, OnDestroy {
 
     goIntoArtifactSummaryPage(artifact: Artifact): void {
         const relativeRouterLink: string[] = ['artifacts', artifact.digest];
-        if (this.activatedRoute.snapshot.queryParams[UN_LOGGED_PARAM] === YES) {
-            this.router.navigate(relativeRouterLink, {
-                relativeTo: this.activatedRoute,
-                queryParams: {
-                    [UN_LOGGED_PARAM]: YES,
-                    sbomDigest: artifact.sbomDigest ?? '',
-                },
-            });
-        } else {
-            this.router.navigate(relativeRouterLink, {
-                relativeTo: this.activatedRoute,
-                queryParams: { sbomDigest: artifact.sbomDigest ?? '' },
-            });
-        }
+        this.router.navigate(relativeRouterLink, {
+            relativeTo: this.activatedRoute,
+            queryParams: { sbomDigest: artifact.sbomDigest ?? '' },
+        });
     }
 
     // Get sbom status
@@ -977,13 +962,7 @@ export class ArtifactListTabComponent implements OnInit, OnDestroy {
             'depth',
             depth,
         ];
-        if (this.activatedRoute.snapshot.queryParams[UN_LOGGED_PARAM] === YES) {
-            this.router.navigate(linkUrl, {
-                queryParams: { [UN_LOGGED_PARAM]: YES },
-            });
-        } else {
-            this.router.navigate(linkUrl);
-        }
+        this.router.navigate(linkUrl);
     }
 
     filterEvent(e: ArtifactFilterEvent) {

diff --git a/...ct-list-page/artifact-list/artifact-list-tab/sub-accessories/sub-accessories.component.ts b/...ct-list-page/artifact-list/artifact-list-tab/sub-accessories/sub-accessories.component.ts
@@ -12,10 +12,6 @@ import {
     dbEncodeURIComponent,
     formatSize,
 } from '../../../../../../../../shared/units/utils';
-import {
-    UN_LOGGED_PARAM,
-    YES,
-} from '../../../../../../../../account/sign-in/sign-in.service';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Accessory } from 'ng-swagger-gen/models/accessory';
 import { ArtifactService as NewArtifactService } from 'ng-swagger-gen/services/artifact.service';
@@ -110,22 +106,12 @@ export class SubAccessoriesComponent
 
     goIntoArtifactSummaryPage(accessory: Accessory): void {
         const relativeRouterLink: string[] = ['artifacts', accessory.digest];
-        if (this.activatedRoute.snapshot.queryParams[UN_LOGGED_PARAM] === YES) {
-            this.router.navigate(relativeRouterLink, {
-                relativeTo: this.activatedRoute,
-                queryParams: {
-                    [UN_LOGGED_PARAM]: YES,
-                    [AccessoryQueryParams.ACCESSORY_TYPE]: accessory.type,
-                },
-            });
-        } else {
-            this.router.navigate(relativeRouterLink, {
-                relativeTo: this.activatedRoute,
-                queryParams: {
-                    [AccessoryQueryParams.ACCESSORY_TYPE]: accessory.type,
-                },
-            });
-        }
+        this.router.navigate(relativeRouterLink, {
+            relativeTo: this.activatedRoute,
+            queryParams: {
+                [AccessoryQueryParams.ACCESSORY_TYPE]: accessory.type,
+            },
+        });
     }
 
     delete(a: Accessory) {

diff --git a/src/portal/src/app/base/project/repository/artifact/artifact-summary.component.html b/src/portal/src/app/base/project/repository/artifact/artifact-summary.component.html
@@ -1,8 +1,10 @@
 <div class="arrow-block">
-    <span class="back-icon margin-right-5px"><</span>
-    <a class="pl-0" (click)="goBackPro()">{{
-        'SIDE_NAV.PROJECTS' | translate
-    }}</a>
+    <ng-container *ngIf="hasSignedIn()">
+        <span class="back-icon margin-right-5px"><</span>
+        <a class="pl-0" (click)="goBackPro()">{{
+            'SIDE_NAV.PROJECTS' | translate
+        }}</a>
+    </ng-container>
     <span class="back-icon"><</span>
     <a (click)="goBackRep()">{{ projectName }}</a>
     <span class="back-icon"><</span>

diff --git a/src/portal/src/app/base/project/repository/artifact/artifact-summary.component.ts b/src/portal/src/app/base/project/repository/artifact/artifact-summary.component.ts
@@ -10,6 +10,7 @@ import {
     EventService,
     HarborEvent,
 } from '../../../../services/event-service/event.service';
+import { SessionService } from '../../../../shared/services/session.service';
 
 @Component({
     selector: 'artifact-summary',
@@ -39,7 +40,8 @@ export class ArtifactSummaryComponent implements OnInit {
         private route: ActivatedRoute,
         private router: Router,
         private frontEndArtifactService: ArtifactService,
-        private event: EventService
+        private event: EventService,
+        private sessionService: SessionService
     ) {}
 
     goBack(): void {
@@ -131,4 +133,7 @@ export class ArtifactSummaryComponent implements OnInit {
             this.frontEndArtifactService.getIconsFromBackEnd([this.artifact]);
         }
     }
+    hasSignedIn(): boolean {
+        return !!this.sessionService.getCurrentUser();
+    }
 }
diff --git a/...ject/repository/artifact/sbom-scanning/sbom-tip-histogram/sbom-tip-histogram.component.ts b/...ject/repository/artifact/sbom-scanning/sbom-tip-histogram/sbom-tip-histogram.component.ts
@@ -1,12 +1,7 @@
 import { Component, Input } from '@angular/core';
-import { TranslateService } from '@ngx-translate/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { SbomSummary } from '../../../../../../shared/services';
 import { SBOM_SCAN_STATUS } from '../../../../../../shared/units/utils';
-import {
-    UN_LOGGED_PARAM,
-    YES,
-} from '../../../../../../account/sign-in/sign-in.service';
 import { HAS_STYLE_MODE, StyleMode } from '../../../../../../services/theme';
 import { ScanTypes } from '../../../../../../shared/entities/shared.const';
 import { Scanner } from '../../../../../left-side-nav/interrogation-services/scanner/scanner';
@@ -16,7 +11,6 @@ import { AccessoryType } from '../../artifact';
 const MIN = 60;
 const MIN_STR = 'min ';
 const SEC_STR = 'sec';
-const SUCCESS_PCT: number = 100;
 
 @Component({
     selector: 'hbr-sbom-tip-histogram',
@@ -32,7 +26,6 @@ export class SbomTipHistogramComponent {
     @Input() sbomDigest: string = '';
     @Input() accessories: Accessory[] = [];
     constructor(
-        private translate: TranslateService,
         private activatedRoute: ActivatedRoute,
         private router: Router
     ) {}
@@ -109,23 +102,12 @@ export class SbomTipHistogramComponent {
 
     goIntoArtifactSbomSummaryPage(): void {
         const relativeRouterLink: string[] = ['artifacts', this.artifactDigest];
-        if (this.activatedRoute.snapshot.queryParams[UN_LOGGED_PARAM] === YES) {
-            this.router.navigate(relativeRouterLink, {
-                relativeTo: this.activatedRoute,
-                queryParams: {
-                    [UN_LOGGED_PARAM]: YES,
-                    sbomDigest: this.sbomDigest ?? '',
-                    tab: ScanTypes.SBOM,
-                },
-            });
-        } else {
-            this.router.navigate(relativeRouterLink, {
-                relativeTo: this.activatedRoute,
-                queryParams: {
-                    sbomDigest: this.sbomDigest ?? '',
-                    tab: ScanTypes.SBOM,
-                },
-            });
-        }
+        this.router.navigate(relativeRouterLink, {
+            relativeTo: this.activatedRoute,
+            queryParams: {
+                sbomDigest: this.sbomDigest ?? '',
+                tab: ScanTypes.SBOM,
+            },
+        });
     }
 }
diff --git a/src/portal/src/app/base/project/summary/summary.component.html b/src/portal/src/app/base/project/summary/summary.component.html
@@ -1,4 +1,4 @@
-<div class="clr-row card-row mt-1">
+<div class="clr-row card-row mt-1" *ngIf="hasReadRepoPermission">
     <span
         class="card-btn mr-5px"
         (click)="showCard(true)"

diff --git a/src/portal/src/app/base/project/summary/summary.component.ts b/src/portal/src/app/base/project/summary/summary.component.ts
@@ -37,7 +37,6 @@ export class SummaryComponent implements OnInit {
         private projectService: ProjectService,
         private userPermissionService: UserPermissionService,
         private errorHandler: ErrorHandler,
-        private appConfigService: AppConfigService,
         private route: ActivatedRoute,
         private repoService: RepositoryService,
         private router: Router

diff --git a/src/portal/src/app/shared/components/app-level-alerts/app-level-alerts.component.ts b/src/portal/src/app/shared/components/app-level-alerts/app-level-alerts.component.ts
@@ -5,7 +5,6 @@ import { DEFAULT_PAGE_SIZE, delUrlParam } from '../../units/utils';
 import { forkJoin, Observable, Subscription } from 'rxjs';
 import { Project } from '../../../../../ng-swagger-gen/models/project';
 import { ScannerService } from '../../../../../ng-swagger-gen/services/scanner.service';
-import { UN_LOGGED_PARAM } from '../../../account/sign-in/sign-in.service';
 import { CommonRoutes, httpStatusCode } from '../../entities/shared.const';
 import { ActivatedRoute, Router } from '@angular/router';
 import { MessageService } from '../global-message/message.service';
@@ -68,19 +67,15 @@ export class AppLevelAlertsComponent implements OnInit, OnDestroy {
                         // User session timed out, then redirect to sign-in page
                         if (
                             this.session.getCurrentUser() &&
-                            !this.isSignInUrl() &&
-                            this.route.snapshot.queryParams[UN_LOGGED_PARAM] !==
-                                YES
+                            !this.isSignInUrl()
                         ) {
-                            const url = delUrlParam(
-                                this.router.url,
-                                UN_LOGGED_PARAM
-                            );
                             this.session.clear(); // because of SignInGuard, must clear user session before navigating to sign-in page
                             this.router.navigate(
                                 [CommonRoutes.EMBEDDED_SIGN_IN],
                                 {
-                                    queryParams: { redirect_url: url },
+                                    queryParams: {
+                                        redirect_url: this.router.url,
+                                    },
                                 }
                             );
                         }
@@ -166,10 +161,8 @@ export class AppLevelAlertsComponent implements OnInit, OnDestroy {
     }
 
     signIn(): void {
-        // remove queryParam UN_LOGGED_PARAM of redirect url
-        const url = delUrlParam(this.router.url, UN_LOGGED_PARAM);
         this.router.navigate([CommonRoutes.EMBEDDED_SIGN_IN], {
-            queryParams: { redirect_url: url },
+            queryParams: { redirect_url: this.router.url },
         });
     }