Merge remote-tracking branch 'origin/master' into feat/create-more-space

# Conflicts:
#	cypress/e2e/debug_aboutOpenedReports.cy.js
#	cypress/e2e/testtab.cy.js

cypress.config.ts

@@ -12,6 +12,8 @@ export default defineConfig({
       '**/cypress/e2e/1-getting-started/**',
       '**/cypress/e2e/2-advanced-examples/**',
     ],
+    viewportWidth: 1920,
+    viewportHeight: 1080,
     experimentalRunAllSpecs: true,
   },
 });

cypress/e2e/debug_aboutOpenedReports.cy.js

@@ -7,6 +7,7 @@ describe("About opened reports", function () {
   });
 
   it("Close one", function () {
+    cy.enableShowMultipleInDebugTree();
     cy.get("[data-cy-select-all-reports]").click();
     cy.get('button[id="OpenSelectedReportsButton"]').click();
     // Each of the two reports has three lines.
@@ -31,6 +32,7 @@ describe("About opened reports", function () {
   });
 
   it("Close all", function () {
+    cy.enableShowMultipleInDebugTree();
     cy.get(".table-responsive tbody tr td:contains(Simple report)")
       .first()
       .click();

cypress/e2e/testtab.cy.js

@@ -25,7 +25,7 @@ describe("About the Test tab", function () {
     // });
   });
 
-  it("Test deleting a report", function () {
+  it("Test deleting a report", () => {
     cy.get("li#testTab").click();
     cy.get("#testReports").find("tr").should("have.length", 2);
     cy.functions.testTabDeselectReportNamed("/Another simple report");
@@ -167,6 +167,7 @@ describe("About the Test tab", function () {
 });
 
 function copyTheReportsToTestTab() {
+  cy.enableShowMultipleInDebugTree();
   cy.get("[data-cy-select-all-reports]").click();
   cy.get('button[id="OpenSelectedReportsButton"]').click();
   // We test many times already that opening two reports yields six nodes.

cypress/support/commands.ts

@@ -146,3 +146,9 @@ Cypress.Commands.add(
   { prevSubject: 'element' },
   (node) => selectIfNotSelected(node)
 );
+
+Cypress.Commands.add('enableShowMultipleInDebugTree' as keyof Chainable, () => {
+  cy.get('[data-cy-open-settings-modal]').click();
+  cy.get('input[data-cy-toggle-show-amount]').click();
+  cy.get('[data-cy-settings-modal-save-changes]').click();
+});

src/app/app.component.ts

@@ -8,6 +8,7 @@ import { Report } from './shared/interfaces/report';
 import { TestComponent } from './test/test.component';
 import { DynamicService } from './shared/services/dynamic.service';
 import { CompareData } from './compare/compare-data';
+import { SettingsService } from './shared/services/settings.service';
 
 declare var require: any;
 const { version: appVersion } = require('../../package.json');
@@ -31,7 +32,9 @@ export class AppComponent implements AfterViewInit {
     private inj: Injector,
     private titleService: Title,
     private httpService: HttpService,
-    private dynamicService: DynamicService
+    private dynamicService: DynamicService,
+    //make sure settings are retrieved from localstorage on startup by initializing the service on startup
+    private settingsService: SettingsService
   ) {
     this.appVersion = appVersion;
     this.titleService.setTitle('Ladybug - v' + this.appVersion);

src/app/debug/debug-tree/debug-tree.component.css

@@ -23,3 +23,4 @@ input[type=text] {
 input[type=text]:focus {
   width: 30%;
 }
+

src/app/debug/debug-tree/debug-tree.component.html

@@ -13,7 +13,6 @@
         <button ngbDropdownItem (click)="downloadReports(true, false)">Binary</button>
       </div>
     </div>
-    <app-button [text]="showOneAtATime ? 'Show multiple' : 'Show one'" (click)="toggleShowAmount()"></app-button>
     <input class="my-2 mx-1 pl-1" type="text" name="search" placeholder="&#xF002;" (keyup)="changeSearchTerm($event)"/>
   </div>
   <jqxTree id="debug-tree" #treeReference (onSelect)="selectReport($event)" [auto-create]="false"></jqxTree>

src/app/debug/debug-tree/debug-tree.component.ts

@@ -1,23 +1,27 @@
-import { AfterViewInit, Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, EventEmitter, Input, OnDestroy, Output, ViewChild } from '@angular/core';
 import { Report } from '../../shared/interfaces/report';
 import { jqxTreeComponent } from 'jqwidgets-ng/jqxtree';
 import { HelperService } from '../../shared/services/helper.service';
-import { Observable } from 'rxjs';
+import { Observable, Subscription } from 'rxjs';
 import { HttpService } from '../../shared/services/http.service';
+import { SettingsService } from '../../shared/services/settings.service';
 
 @Component({
   selector: 'app-debug-tree',
   templateUrl: './debug-tree.component.html',
   styleUrls: ['./debug-tree.component.css'],
 })
-export class DebugTreeComponent implements AfterViewInit {
+export class DebugTreeComponent implements AfterViewInit, OnDestroy {
   @ViewChild('treeReference') treeReference!: jqxTreeComponent;
   @Output() selectReportEvent = new EventEmitter<any>();
   @Output() closeEntireTreeEvent = new EventEmitter<any>();
   loaded: boolean = false;
-  showOneAtATime: boolean = false;
+  showMultipleAtATime!: boolean;
+  showMultipleAtATimeSubscription!: Subscription;
   private _currentView: any;
 
+  private lastReport?: Report;
+
   @Input() set currentView(value: any) {
     if (this.loaded && this._currentView !== value) {
       // TODO: Check if the current reports are part of the view
@@ -29,21 +33,48 @@ export class DebugTreeComponent implements AfterViewInit {
   get currentView(): any {
     return this._currentView;
   }
+
   @Input() adjustWidth: Observable<void> = {} as Observable<void>;
 
-  constructor(private helperService: HelperService, private httpService: HttpService) {}
+  constructor(
+    private helperService: HelperService,
+    private httpService: HttpService,
+    private settingsService: SettingsService
+  ) {
+    this.subscribeToSettingsServiceObservables();
+  }
+
+  ngOnDestroy() {
+    this.showMultipleAtATimeSubscription.unsubscribe();
+  }
+
+  subscribeToSettingsServiceObservables(): void {
+    this.showMultipleAtATimeSubscription = this.settingsService.showMultipleAtATimeObservable.subscribe(
+      (value: boolean) => {
+        this.showMultipleAtATime = value;
+        if (!this.showMultipleAtATime) {
+          this.removeAllReportsButOne();
+        }
+      }
+    );
+  }
 
   ngAfterViewInit(): void {
     setTimeout(() => {
-      this.treeReference.createComponent({ source: [], height: '90%', width: '100%', allowDrag: false });
+      this.treeReference.createComponent({
+        source: [],
+        height: '90%',
+        width: '100%',
+        allowDrag: false,
+      });
       this.loaded = true;
       this.adjustWidth.subscribe(() => {
         this.adjustTreeWidth();
       });
     });
   }
 
-  hideOrShowCheckpointsBasedOnView(currentView: any) {
+  hideOrShowCheckpointsBasedOnView(currentView: any): void {
     this.getTreeReports().forEach((report) => {
       if (report.value.storageName === currentView.storageName) {
         this.httpService
@@ -60,13 +91,13 @@ export class DebugTreeComponent implements AfterViewInit {
     });
   }
 
-  prepareNextSelect(unmatched: string[], selectedReport: any) {
+  prepareNextSelect(unmatched: string[], selectedReport: any): void {
     if (unmatched.includes(selectedReport.value.uid)) {
       this.recursivelyFindParentThatWontBeDeleted(selectedReport, unmatched);
     }
   }
 
-  hideCheckpoints(unmatched: string[], children: any[]) {
+  hideCheckpoints(unmatched: string[], children: any[]): void {
     if (unmatched.length > 0) {
       children.forEach((node: any) => {
         let oki: any = this.treeReference.getItem(node);
@@ -86,17 +117,20 @@ export class DebugTreeComponent implements AfterViewInit {
     }
   }
 
-  adjustTreeWidth() {
+  adjustTreeWidth(): void {
     this.treeReference.width('100%');
   }
 
-  toggleShowAmount(): void {
-    this.showOneAtATime = !this.showOneAtATime;
+  removeAllReportsButOne(): void {
+    if (this.lastReport) {
+      this.addReportToTree(this.lastReport);
+    }
   }
 
   addReportToTree(report: Report): void {
+    this.lastReport = report;
     let tree = this.helperService.convertReportToJqxTree(report);
-    if (this.showOneAtATime) {
+    if (!this.showMultipleAtATime) {
       this.treeReference.clear();
     }
 
@@ -153,10 +187,12 @@ export class DebugTreeComponent implements AfterViewInit {
     this.helperService.download(queryString, this.currentView.storageName, exportBinary, exportXML);
   }
 
-  changeSearchTerm(event: KeyboardEvent) {
+  changeSearchTerm(event: KeyboardEvent): void {
     const term: string = (event.target as HTMLInputElement).value.toLowerCase();
     this.treeReference.getItems().forEach((item: jqwidgets.TreeItem) => {
-      const report = item.value as unknown as Report & { message?: string | null };
+      const report = item.value as unknown as Report & {
+        message?: string | null;
+      };
       if (term !== '' && report) {
         const matching =
           item.label?.toLowerCase() === term ||
@@ -171,7 +207,7 @@ export class DebugTreeComponent implements AfterViewInit {
     });
   }
 
-  getTreeReports() {
+  getTreeReports(): any[] {
     let reports: any[] = [];
     this.treeReference.getItems().forEach((item: any) => {
       if (item.value?.storageId != undefined) {

src/app/debug/table/table-settings-modal/table-settings-modal.component.css

@@ -1,3 +1,21 @@
 .fa-info-circle:hover {
   cursor: pointer;
 }
+
+.checkbox {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  /*margin: 0 1rem 0 0;*/
+  /*font-size: 10pt;*/
+  cursor: default !important;
+  height: fit-content;
+
+  > input {
+    margin-left: 0.25rem;
+  }
+
+  > label {
+    margin-bottom: 0;
+  }
+}

src/app/debug/table/table-settings-modal/table-settings-modal.component.html

@@ -1,20 +1,35 @@
-<ng-template #modal let-modal >
+<ng-template #modal let-modal>
   <div class="modal-header">
     <h5 class="modal-title" id="settingsModal">Options</h5>
     <button id="debugSettingsModalClose" type="button" class="close" (click)="modal.dismiss()">
       <span>&times;</span>
     </button>
   </div>
 
-  <form [formGroup]="settingsForm" (ngSubmit)="saveSettings()" >
+  <form [formGroup]="settingsForm" (ngSubmit)="saveSettings()">
+
     <div class="modal-body container">
+      <div class="form-group">
+        <h5>Debug tree</h5>
+        <div class="checkbox " title="When checked, file tree shows multiple files">
+          <label for="show-multiple">Show multiple files in debug file-tree</label>
+          <input class="btn btn-info my-2 p-1 w-fit" data-cy-toggle-show-amount id="show-multiple"
+                 [checked]="showMultipleAtATime" type="checkbox"
+                 formControlName="showMultipleFilesAtATime"
+                 [value]="showMultipleAtATime"
+                 (change)="setShowMultipleAtATime()">
+        </div>
+      </div>
+      <hr>
       <div class="form-group">
         <label>Report generator</label>
         <select class="form-control custom-select mr-sm-2" formControlName="generatorEnabled">
           <option>Enabled</option>
           <option>Disabled</option>
         </select>
       </div>
+
+
       <div class="form-group">
         <label for="openLatestReports">Open latest reports</label>
         <div class="input-group">
@@ -41,7 +56,7 @@ <h5 class="modal-title" id="settingsModal">Options</h5>
 
 Example 3 (only store report when name doesn't start with Hello World):
 ^(?!Hello World).*"
-          class="form-control" formControlName="regexFilter"/>
+                 class="form-control" formControlName="regexFilter"/>
         </div>
       </div>
       <div class="dropdown-divider"></div>
@@ -52,14 +67,18 @@ <h5 class="modal-title" id="settingsModal">Options</h5>
         </label>
       </div>
       <div class="form-group">
-        <label>Transformation <i class="fa fa-info-circle" title="To see the change of the transformation, please reopen the current report or open a new one."></i></label>
+        <label>Transformation <i class="fa fa-info-circle"
+                                 title="To see the change of the transformation, please reopen the current report or open a new one."></i></label>
         <textarea class="form-control" rows="10" formControlName="transformation"></textarea>
       </div>
     </div>
     <div class="modal-footer">
-      <button title="Reset and save factory settings" type="button" class="btn btn-info" (click)="factoryReset()"><i class="fa fa-refresh"></i></button>
-      <button title="Revert changes" type="button" class="btn btn-info" (click)="loadSettings()"><i class="fa fa-undo"></i></button>
-      <button title="Save changes" type="submit" id="saveTableSettings" class="btn btn-info" (click)="modal.dismiss()"><i class="fa fa-save"></i></button>
+      <button title="Reset and save factory settings" type="button" class="btn btn-info" (click)="factoryReset()"><i
+        class="fa fa-refresh"></i></button>
+      <button title="Revert changes" type="button" class="btn btn-info" (click)="loadSettings()"><i
+        class="fa fa-undo"></i></button>
+      <button data-cy-settings-modal-save-changes title="Save changes" type="submit" id="saveTableSettings"
+              class="btn btn-info" (click)="modal.dismiss()"><i class="fa fa-save"></i></button>
     </div>
   </form>
 </ng-template>

src/app/debug/table/table-settings-modal/table-settings-modal.component.ts

@@ -1,29 +1,57 @@
-import { Component, ElementRef, EventEmitter, Output, ViewChild } from '@angular/core';
+import { Component, ElementRef, EventEmitter, OnDestroy, Output, ViewChild } from '@angular/core';
 import { UntypedFormControl, UntypedFormGroup } from '@angular/forms';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { HttpService } from '../../../shared/services/http.service';
 import { CookieService } from 'ngx-cookie-service';
 import { ToastComponent } from '../../../shared/components/toast/toast.component';
+import { SettingsService } from '../../../shared/services/settings.service';
+import { Subscription } from 'rxjs';
 
 @Component({
   selector: 'app-table-settings-modal',
   templateUrl: './table-settings-modal.component.html',
   styleUrls: ['./table-settings-modal.component.css'],
 })
-export class TableSettingsModalComponent {
+export class TableSettingsModalComponent implements OnDestroy {
   @ViewChild('modal') modal!: ElementRef;
+  showMultipleAtATime!: boolean;
+  showMultipleAtATimeSubscription!: Subscription;
   settingsForm = new UntypedFormGroup({
+    showMultipleFilesAtATime: new UntypedFormControl(false),
     generatorEnabled: new UntypedFormControl('Enabled'),
     regexFilter: new UntypedFormControl(''),
     transformationEnabled: new UntypedFormControl(true),
     transformation: new UntypedFormControl(''),
   });
-
   @Output() openLatestReportsEvent = new EventEmitter<any>();
   @ViewChild(ToastComponent) toastComponent!: ToastComponent;
   saving: boolean = false;
 
-  constructor(private modalService: NgbModal, private httpService: HttpService, private cookieService: CookieService) {}
+  constructor(
+    private modalService: NgbModal,
+    private httpService: HttpService,
+    private cookieService: CookieService,
+    private settingsService: SettingsService
+  ) {
+    this.subscribeToSettingsServiceObservables();
+  }
+
+  ngOnDestroy() {
+    this.showMultipleAtATimeSubscription.unsubscribe();
+  }
+
+  subscribeToSettingsServiceObservables(): void {
+    this.showMultipleAtATimeSubscription = this.settingsService.showMultipleAtATimeObservable.subscribe(
+      (value: boolean) => {
+        this.showMultipleAtATime = value;
+        this.settingsForm.get('showMultipleFilesAtATime')?.setValue(this.showMultipleAtATime);
+      }
+    );
+  }
+
+  setShowMultipleAtATime() {
+    this.settingsService.setShowMultipleAtATime(!this.showMultipleAtATime);
+  }
 
   open(): void {
     this.loadSettings();
@@ -66,6 +94,8 @@ export class TableSettingsModalComponent {
   }
 
   factoryReset(): void {
+    this.settingsForm.reset();
+    this.settingsService.setShowMultipleAtATime();
     this.httpService.resetSettings().subscribe((response) => this.saveResponseSetting(response));
     this.httpService.getTransformation(true).subscribe((resp) => {
       this.settingsForm.get('transformation')?.setValue(resp.transformation);