Adding upstream version 16.2.11+ds.upstream/16.2.11+dsupstream

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>

4 files changed, 127 insertions, 0 deletions

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/modal/modal.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/modal/modal.component.html
new file mode 100644
index 000000000..657e0d605
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/modal/modal.component.html
@@ -0,0 +1,19 @@
+<div [ngClass]="pageURL ? 'modal' : ''">
+  <div [ngClass]="pageURL ? 'modal-dialog' : ''">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h4 class="modal-title float-left">
+          <ng-content select=".modal-title"></ng-content>
+        </h4>
+        <button type="button"
+                class="close float-right"
+                aria-label="Close"
+                (click)="close()">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+
+      <ng-content select=".modal-content"></ng-content>
+    </div>
+  </div>
+</div>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/modal/modal.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/modal/modal.component.scss
new file mode 100644
index 000000000..ceeb61427
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/modal/modal.component.scss
@@ -0,0 +1,23 @@
+@use './src/styles/defaults/mixins';
+
+.modal-header {
+  @include mixins.hf;
+  border-radius: 5px 5px 0 0;
+}
+
+::ng-deep cd-modal {
+  .modal-footer {
+    @include mixins.hf;
+    border-radius: 0 0 5px 5px;
+  }
+
+  .modal-body {
+    max-height: 70vh;
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+}
+
+button.close {
+  outline: none;
+}
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/modal/modal.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/modal/modal.component.spec.ts
new file mode 100644
index 000000000..cf08bef10
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/modal/modal.component.spec.ts
@@ -0,0 +1,54 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { Router } from '@angular/router';
+import { RouterTestingModule } from '@angular/router/testing';
+
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+
+import { configureTestBed } from '~/testing/unit-test-helper';
+import { ModalComponent } from './modal.component';
+
+describe('ModalComponent', () => {
+  let component: ModalComponent;
+  let fixture: ComponentFixture<ModalComponent>;
+  let routerNavigateSpy: jasmine.Spy;
+
+  configureTestBed({
+    declarations: [ModalComponent],
+    imports: [RouterTestingModule]
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ModalComponent);
+    component = fixture.componentInstance;
+    routerNavigateSpy = spyOn(TestBed.inject(Router), 'navigate');
+    routerNavigateSpy.and.returnValue(true);
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should call the hide callback function', () => {
+    spyOn(component.hide, 'emit');
+    const nativeElement = fixture.nativeElement;
+    const button = nativeElement.querySelector('button');
+    button.dispatchEvent(new Event('click'));
+    fixture.detectChanges();
+    expect(component.hide.emit).toHaveBeenCalled();
+  });
+
+  it('should hide the modal', () => {
+    component.modalRef = new NgbActiveModal();
+    spyOn(component.modalRef, 'close');
+    component.close();
+    expect(component.modalRef.close).toHaveBeenCalled();
+  });
+
+  it('should hide the routed modal', () => {
+    component.pageURL = 'hosts';
+    component.close();
+    expect(routerNavigateSpy).toHaveBeenCalledTimes(1);
+    expect(routerNavigateSpy).toHaveBeenCalledWith(['hosts', { outlets: { modal: null } }]);
+  });
+});
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/modal/modal.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/modal/modal.component.ts
new file mode 100644
index 000000000..25e06e62a
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/modal/modal.component.ts
@@ -0,0 +1,31 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Router } from '@angular/router';
+
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+
+@Component({
+  selector: 'cd-modal',
+  templateUrl: './modal.component.html',
+  styleUrls: ['./modal.component.scss']
+})
+export class ModalComponent {
+  @Input()
+  modalRef: NgbActiveModal;
+  @Input()
+  pageURL: string;
+
+  /**
+   * Should be a function that is triggered when the modal is hidden.
+   */
+  @Output()
+  hide = new EventEmitter();
+
+  constructor(private router: Router) {}
+
+  close() {
+    this.pageURL
+      ? this.router.navigate([this.pageURL, { outlets: { modal: null } }])
+      : this.modalRef?.close();
+    this.hide.emit();
+  }
+}