fix: Bugfixes and QoL Improvements

marcel-haag · Nov 21, 2022 · a4536e9 · a4536e9
1 parent e9aec4e
commit a4536e9
Show file tree

Hide file tree

Showing 24 changed files with 426 additions and 275 deletions.
diff --git a/security-c4po-angular/src/app/header/header.component.html b/security-c4po-angular/src/app/header/header.component.html
@@ -11,6 +11,15 @@ <h1 >{{SECURITYC4PO_TITLE}} </h1>
   <div class="filler"></div>
   <div fxLayoutGap="4rem">
     <nb-actions size="medium">
+      <nb-action class="toggle-theme">
+        <button nbButton
+                (click)="onClickGoToLink('https://owasp.org/www-project-web-security-testing-guide/v42/')">
+          <fa-icon [icon]="fa.faFileInvoice" class="new-element-icon" href="https://www.google.com">
+          </fa-icon>
+          <span class="owasp-redirect-button">OWASP</span>
+        </button>
+      </nb-action>
+
       <nb-action class="toggle-theme">
         <button nbButton
                 (click)="onClickSwitchTheme()">

diff --git a/security-c4po-angular/src/app/header/header.component.scss b/security-c4po-angular/src/app/header/header.component.scss
@@ -8,6 +8,10 @@
     flex-grow: 1;
   }
 
+  .owasp-redirect-button {
+    margin-left: 0.5rem;
+  }
+
   .languageContainer {
     display: flex;
     max-width: 8rem;

diff --git a/security-c4po-angular/src/app/header/header.component.ts b/security-c4po-angular/src/app/header/header.component.ts
@@ -33,6 +33,11 @@ export class HeaderComponent implements OnInit{
     this.selectedLanguage = this.translateService.currentLang;
   }
 
+  // HTML only
+  onClickGoToLink(url: string): void {
+    window.open(url, '_blank');
+  }
+
   onClickSwitchTheme(): void {
     if (this.currentTheme === 'corporate') {
       this.themeService.changeTheme('dark');

diff --git a/...-c4po-angular/src/app/objective-overview/objective-header/objective-header.component.scss b/...-c4po-angular/src/app/objective-overview/objective-header/objective-header.component.scss
@@ -9,7 +9,8 @@
   .export-button-container {
     display: flex;
     align-content: flex-end;
-    margin-right: 0.5rem;
+    // ToDo: Fix so that longer / shorter name won't change needed margin
+    margin-right: 2.25rem;
 
     .export-element-icon {
     }

diff --git a/...rity-c4po-angular/src/app/objective-overview/objective-table/objective-table.component.ts b/...rity-c4po-angular/src/app/objective-overview/objective-table/objective-table.component.ts
@@ -76,8 +76,24 @@ export class ObjectiveTableComponent implements OnInit {
         })
       ).finally();
     */
-    const statePentest = this.pentests$.getValue().find(pentest => pentest.refNumber === selectedPentest.refNumber);
-    this.store.dispatch(new ChangePentest(statePentest));
+    const statePentest: Pentest = this.pentests$.getValue().find(pentest => pentest.refNumber === selectedPentest.refNumber);
+    if (statePentest) {
+      this.store.dispatch(new ChangePentest(statePentest));
+    } else {
+      let childEntryStatePentest;
+      // ToDo: Fix wrong selection
+      // tslint:disable-next-line:prefer-for-of
+      for (let i = 0; i < this.pentests$.getValue().length; i++) {
+        if (this.pentests$.getValue()[i].childEntries) {
+          const findingResult = this.pentests$.getValue()[i].childEntries.find(cE => cE.refNumber === selectedPentest.refNumber);
+          if (findingResult) {
+            childEntryStatePentest = findingResult;
+            break;
+          }
+        }
+      }
+      this.store.dispatch(new ChangePentest(childEntryStatePentest));
+    }
   }
 
   // HTML only

diff --git a/...-angular/src/app/pentest/pentest-content/pentest-comments/pentest-comments.component.html b/...-angular/src/app/pentest/pentest-content/pentest-comments/pentest-comments.component.html
@@ -49,6 +49,7 @@
                 size="small"
                 shape="round"
                 class="add-comment-button"
+                [disabled]="pentestInfo$.getValue().status === notStartedStatus"
                 (click)="onClickAddComment()">
           <fa-icon [icon]="fa.faPlus" class="new-comment-icon"></fa-icon>
           {{'comment.add' | translate}}

diff --git a/...-angular/src/app/pentest/pentest-content/pentest-comments/pentest-comments.component.scss b/...-angular/src/app/pentest/pentest-content/pentest-comments/pentest-comments.component.scss
@@ -6,6 +6,8 @@
 
   .comment-cell {
     // Add style here
+    height: 4.5rem !important;
+    max-height: 4.5rem !important;
   }
 
   .comment-cell:hover {

diff --git a/...po-angular/src/app/pentest/pentest-content/pentest-comments/pentest-comments.component.ts b/...po-angular/src/app/pentest/pentest-content/pentest-comments/pentest-comments.component.ts
@@ -1,4 +1,4 @@
-import {Component, Input, OnInit} from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import {BehaviorSubject, Observable} from 'rxjs';
 import {Pentest} from '@shared/models/pentest.model';
 import * as FA from '@fortawesome/free-solid-svg-icons';
@@ -9,6 +9,9 @@ import {UntilDestroy, untilDestroyed} from '@ngneat/until-destroy';
 import {filter, tap} from 'rxjs/operators';
 import {Comment, CommentEntry, transformCommentsToObjectiveEntries} from '@shared/models/comment.model';
 import {isNotNullOrUndefined} from 'codelyzer/util/isNotNullOrUndefined';
+import {ProjectState} from '@shared/stores/project-state/project-state';
+import {Store} from '@ngxs/store';
+import {PentestStatus} from '@shared/models/pentest-status.model';
 
 @UntilDestroy()
 @Component({
@@ -18,11 +21,11 @@ import {isNotNullOrUndefined} from 'codelyzer/util/isNotNullOrUndefined';
 })
 export class PentestCommentsComponent implements OnInit {
 
-  @Input()
-  pentestInfo$: BehaviorSubject<Pentest> = new BehaviorSubject<Pentest>(null);
-
   // HTML only
   readonly fa = FA;
+  notStartedStatus: PentestStatus = PentestStatus.NOT_STARTED;
+
+  pentestInfo$: BehaviorSubject<Pentest> = new BehaviorSubject<Pentest>(null);
   // comments$: BehaviorSubject<Comment[]> = new BehaviorSubject<Comment[]>(null);
   loading$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(true);
 
@@ -41,24 +44,39 @@ export class PentestCommentsComponent implements OnInit {
 
   constructor(private readonly pentestService: PentestService,
               private dataSourceBuilder: NbTreeGridDataSourceBuilder<CommentEntry>,
+              private store: Store,
               private notificationService: NotificationService) {
     this.dataSource = dataSourceBuilder.create(this.data, this.getters);
   }
 
   ngOnInit(): void {
-    this.loadCommentsData();
+    this.store.select(ProjectState.pentest).pipe(
+      untilDestroyed(this)
+    ).subscribe({
+      next: (selectedPentest: Pentest) => {
+        this.pentestInfo$.next(selectedPentest);
+        this.loadCommentsData();
+      },
+      error: err => {
+        console.error(err);
+      }
+    });
   }
 
   loadCommentsData(): void {
     this.pentestService.getCommentsByPentestId(this.pentestInfo$.getValue() ? this.pentestInfo$.getValue().id : '')
       .pipe(
         untilDestroyed(this),
-        filter(isNotNullOrUndefined),
+        /*filter(isNotNullOrUndefined),*/
         tap(() => this.loading$.next(true))
       )
       .subscribe({
         next: (comments: Comment[]) => {
-          this.data = transformCommentsToObjectiveEntries(comments);
+          if (comments) {
+            this.data = transformCommentsToObjectiveEntries(comments);
+          } else {
+            this.data = [];
+          }
           this.dataSource.setData(this.data, this.getters);
           this.loading$.next(false);
         },

diff --git a/security-c4po-angular/src/app/pentest/pentest-content/pentest-content.component.html b/security-c4po-angular/src/app/pentest/pentest-content/pentest-content.component.html
@@ -2,52 +2,21 @@
   <div class="content">
     <nb-tabset>
       <nb-tab class="pentest-tabset" tabTitle="{{ 'global.action.info' | translate }}">
-        <app-pentest-info [pentestInfo$]=pentest$></app-pentest-info>
+        <app-pentest-info></app-pentest-info>
       </nb-tab>
       <nb-tab class="pentest-tabset" tabTitle="{{ 'pentest.findings' | translate }}"
               badgeText="{{currentNumberOfFindings$.getValue()}}" badgeStatus="danger">
-        <app-pentest-findings [pentestInfo$]=pentest$></app-pentest-findings>
+        <app-pentest-findings></app-pentest-findings>
       </nb-tab>
       <nb-tab class="pentest-tabset" tabTitle="{{ 'pentest.comments' | translate }}"
               badgeText="{{currentNumberOfComments$.getValue()}}" badgeStatus="info">
-        <app-pentest-comments [pentestInfo$]=pentest$></app-pentest-comments>
+        <app-pentest-comments></app-pentest-comments>
       </nb-tab>
     </nb-tabset>
   </div>
 
   <div fxLayoutAlign="end end" class="content-footer">
-    <!-- Pentest Status Selection -->
-    <div class="pentest-status-dialog">
-      <nb-select class="status"
-                 [(selected)]="currentStatus"
-                 shape="round" filled
-                 status="{{getPentestFillStatus(currentStatus)}}">
-        <nb-option *ngFor="let status of statusTexts" [value]="status.value">
-          {{ status.translationText | translate }}
-        </nb-option>
-      </nb-select>
-    </div>
-    <div *ngIf="!pentest$.getValue().id; else updatePentest">
-      <button nbButton
-              class="save-pentest-button"
-              status="primary"
-              [disabled]="!pentestStatusChanged()"
-              title="{{ 'global.action.save' | translate }}"
-              (click)="onClickSavePentest()">
-        <span class="exit-element-text"> {{ 'global.action.save' | translate }} </span>
-      </button>
-    </div>
-    <ng-template #updatePentest>
-      <button nbButton
-              class="save-pentest-button"
-              status="primary"
-              [disabled]="!pentestStatusChanged()"
-              title="{{ 'global.action.update' | translate }}"
-              (click)="onClickUpdatePentest()">
-        <span class="exit-element-text"> {{ 'global.action.update' | translate }} </span>
-      </button>
-    </ng-template>
-
+    <!--ToDo: Use to put element in bottom-right corner -->
   </div>
 </div>
 
diff --git a/security-c4po-angular/src/app/pentest/pentest-content/pentest-content.component.scss b/security-c4po-angular/src/app/pentest/pentest-content/pentest-content.component.scss
@@ -10,33 +10,9 @@
     /*nb-tab {
       position: fixed;
     }*/
-  }
-
-  .content-footer {
-    height: 5%;
-
-    .pentest-status-dialog {
-      margin: 1rem 2.25rem 1rem 0;
-
-      .status {
-        width: 12rem;
-      }
-
-      .basic {
-        background-color: nb-theme(color-basic-default);
-      }
-      .info {
-        background-color: nb-theme(color-info-default);
-      }
-      .warning {
-        background-color: nb-theme(color-warning-default);
-      }
-      .success {
-        background-color: nb-theme(color-success-default);
-      }
-    }
 
-    .save-pentest-button {
+    .content-footer {
+      height: 5%;
       margin: 1rem 6rem 1rem 0;
     }
   }