From 9ad98289b9ee05f91330271b1371d4d44bb71905 Mon Sep 17 00:00:00 2001
From: Tiago Melo <tmelo@suse.com>
Date: Thu, 28 May 2020 18:32:55 +0000
Subject: [PATCH] mgr/dashboard: Use ng-bootstrap for Alert

Fixes: https://tracker.ceph.com/issues/45751

Signed-off-by: Tiago Melo <tmelo@suse.com>
---
 .../app/ceph/block/mirroring/mirroring.module.ts  |  2 --
 .../rbd-configuration-list.component.spec.ts      |  5 +----
 .../block/rbd-list/rbd-list.component.spec.ts     |  2 --
 .../src/app/ceph/cluster/cluster.module.ts        |  2 --
 .../frontend/src/app/ceph/rgw/rgw.module.ts       |  2 --
 .../alert-panel/alert-panel.component.html        |  5 +++--
 .../alert-panel/alert-panel.component.spec.ts     |  8 +++++---
 .../app/shared/components/components.module.ts    |  5 ++---
 .../components/grafana/grafana.component.spec.ts  |  4 ++--
 .../loading-panel/loading-panel.component.html    |  5 +++--
 .../loading-panel/loading-panel.component.spec.ts |  4 ++--
 .../pwd-expiration-notification.component.html    | 15 +++++++--------
 .../pwd-expiration-notification.component.spec.ts | 10 ++--------
 .../view-cache/view-cache.component.spec.ts       |  4 ++--
 .../directives/form-loading.directive.spec.ts     |  6 +++---
 15 files changed, 32 insertions(+), 47 deletions(-)

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/mirroring.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/mirroring.module.ts
index b15b69a6c3331..f56595584795b 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/mirroring.module.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/mirroring.module.ts
@@ -5,7 +5,6 @@ import { RouterModule } from '@angular/router';
 
 import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
 import { NgBootstrapFormValidationModule } from 'ng-bootstrap-form-validation';
-import { AlertModule } from 'ngx-bootstrap/alert';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { ModalModule } from 'ngx-bootstrap/modal';
 import { ProgressbarModule } from 'ngx-bootstrap/progressbar';
@@ -43,7 +42,6 @@ import { PoolListComponent } from './pool-list/pool-list.component';
     ProgressbarModule.forRoot(),
     BsDropdownModule.forRoot(),
     ModalModule.forRoot(),
-    AlertModule.forRoot(),
     TooltipModule.forRoot(),
     NgBootstrapFormValidationModule
   ],
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-configuration-list/rbd-configuration-list.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-configuration-list/rbd-configuration-list.component.spec.ts
index d784ed12e4c4e..b349282bb8a79 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-configuration-list/rbd-configuration-list.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-configuration-list/rbd-configuration-list.component.spec.ts
@@ -5,13 +5,11 @@ import { RouterTestingModule } from '@angular/router/testing';
 
 import { NgxDatatableModule } from '@swimlane/ngx-datatable';
 import { ChartsModule } from 'ng2-charts';
-import { AlertModule } from 'ngx-bootstrap/alert';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 
 import { configureTestBed, i18nProviders } from '../../../../testing/unit-test-helper';
-import { TableComponent } from '../../../shared/datatable/table/table.component';
-
 import { ComponentsModule } from '../../../shared/components/components.module';
+import { TableComponent } from '../../../shared/datatable/table/table.component';
 import { RbdConfigurationEntry } from '../../../shared/models/configuration';
 import { PipesModule } from '../../../shared/pipes/pipes.module';
 import { FormatterService } from '../../../shared/services/formatter.service';
@@ -29,7 +27,6 @@ describe('RbdConfigurationListComponent', () => {
       NgxDatatableModule,
       RouterTestingModule,
       ComponentsModule,
-      AlertModule,
       BsDropdownModule.forRoot(),
       ChartsModule,
       PipesModule
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-list/rbd-list.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-list/rbd-list.component.spec.ts
index 31860211dbc2c..2a425a7b08cbf 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-list/rbd-list.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-list/rbd-list.component.spec.ts
@@ -4,7 +4,6 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterTestingModule } from '@angular/router/testing';
 
 import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
-import { AlertModule } from 'ngx-bootstrap/alert';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { ModalModule } from 'ngx-bootstrap/modal';
 import { TooltipModule } from 'ngx-bootstrap/tooltip';
@@ -50,7 +49,6 @@ describe('RbdListComponent', () => {
       ModalModule.forRoot(),
       TooltipModule.forRoot(),
       ToastrModule.forRoot(),
-      AlertModule.forRoot(),
       RouterTestingModule,
       HttpClientTestingModule
     ],
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/cluster.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/cluster.module.ts
index 45a620aff1e39..ab71ef5bc666d 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/cluster.module.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/cluster.module.ts
@@ -6,7 +6,6 @@ import { RouterModule } from '@angular/router';
 import { NgbNavModule, NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstrap';
 import { TreeModule } from 'angular-tree-component';
 import { NgBootstrapFormValidationModule } from 'ng-bootstrap-form-validation';
-import { AlertModule } from 'ngx-bootstrap/alert';
 import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { ModalModule } from 'ngx-bootstrap/modal';
@@ -77,7 +76,6 @@ import { TelemetryComponent } from './telemetry/telemetry.component';
     BsDropdownModule.forRoot(),
     BsDatepickerModule.forRoot(),
     ModalModule.forRoot(),
-    AlertModule.forRoot(),
     TooltipModule.forRoot(),
     MgrModulesModule,
     NgbTypeaheadModule,
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw.module.ts
index 0429da0f53dd3..26371d7df3315 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw.module.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw.module.ts
@@ -5,7 +5,6 @@ import { RouterModule, Routes } from '@angular/router';
 
 import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
 import { NgBootstrapFormValidationModule } from 'ng-bootstrap-form-validation';
-import { AlertModule } from 'ngx-bootstrap/alert';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { ModalModule } from 'ngx-bootstrap/modal';
 import { TooltipModule } from 'ngx-bootstrap/tooltip';
@@ -44,7 +43,6 @@ import { RgwUserSwiftKeyModalComponent } from './rgw-user-swift-key-modal/rgw-us
     FormsModule,
     ReactiveFormsModule,
     PerformanceCounterModule,
-    AlertModule.forRoot(),
     BsDropdownModule.forRoot(),
     NgbNavModule,
     TooltipModule.forRoot(),
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/alert-panel/alert-panel.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/alert-panel/alert-panel.component.html
index f216ac6d6b80b..17b4f1863d53d 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/alert-panel/alert-panel.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/alert-panel/alert-panel.component.html
@@ -1,4 +1,5 @@
-<alert type="{{ bootstrapClass }}">
+<ngb-alert type="{{ bootstrapClass }}"
+           [dismissible]="false">
   <table>
     <ng-container *ngIf="size === 'normal'; else slim">
       <tr>
@@ -33,7 +34,7 @@
       </tr>
     </ng-template>
   </table>
-</alert>
+</ngb-alert>
 
 <ng-template #content>
   <ng-content></ng-content>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/alert-panel/alert-panel.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/alert-panel/alert-panel.component.spec.ts
index 2692712a74dbd..d1ed14d57a22f 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/alert-panel/alert-panel.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/alert-panel/alert-panel.component.spec.ts
@@ -1,5 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { AlertComponent, AlertConfig } from 'ngx-bootstrap/alert';
+
+import { NgbAlertModule } from '@ng-bootstrap/ng-bootstrap';
 
 import { configureTestBed, i18nProviders } from '../../../../testing/unit-test-helper';
 import { AlertPanelComponent } from './alert-panel.component';
@@ -9,8 +10,9 @@ describe('AlertPanelComponent', () => {
   let fixture: ComponentFixture<AlertPanelComponent>;
 
   configureTestBed({
-    declarations: [AlertPanelComponent, AlertComponent],
-    providers: [AlertConfig, i18nProviders]
+    declarations: [AlertPanelComponent],
+    imports: [NgbAlertModule],
+    providers: [i18nProviders]
   });
 
   beforeEach(() => {
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts
index 25398e567e97f..592a36b70b4b0 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts
@@ -3,11 +3,10 @@ import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 
-import { NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap';
+import { NgbAlertModule, NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap';
 import { NgBootstrapFormValidationModule } from 'ng-bootstrap-form-validation';
 import { ClickOutsideModule } from 'ng-click-outside';
 import { ChartsModule } from 'ng2-charts';
-import { AlertModule } from 'ngx-bootstrap/alert';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { ModalModule } from 'ngx-bootstrap/modal';
 import { ProgressbarModule } from 'ngx-bootstrap/progressbar';
@@ -44,7 +43,7 @@ import { ViewCacheComponent } from './view-cache/view-cache.component';
     CommonModule,
     FormsModule,
     ReactiveFormsModule,
-    AlertModule.forRoot(),
+    NgbAlertModule,
     NgbPopoverModule,
     ProgressbarModule.forRoot(),
     TooltipModule.forRoot(),
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/grafana/grafana.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/grafana/grafana.component.spec.ts
index 7ac23f5695e12..0568fc5806abe 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/grafana/grafana.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/grafana/grafana.component.spec.ts
@@ -3,7 +3,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormsModule } from '@angular/forms';
 import { RouterTestingModule } from '@angular/router/testing';
 
-import { AlertModule } from 'ngx-bootstrap/alert';
+import { NgbAlertModule } from '@ng-bootstrap/ng-bootstrap';
 import { of } from 'rxjs';
 
 import { configureTestBed, i18nProviders } from '../../../../testing/unit-test-helper';
@@ -20,7 +20,7 @@ describe('GrafanaComponent', () => {
 
   configureTestBed({
     declarations: [GrafanaComponent, AlertPanelComponent, LoadingPanelComponent],
-    imports: [AlertModule.forRoot(), HttpClientTestingModule, RouterTestingModule, FormsModule],
+    imports: [NgbAlertModule, HttpClientTestingModule, RouterTestingModule, FormsModule],
     providers: [CephReleaseNamePipe, SettingsService, SummaryService, i18nProviders]
   });
 
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/loading-panel/loading-panel.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/loading-panel/loading-panel.component.html
index 785f08606b73a..35726cfbd9986 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/loading-panel/loading-panel.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/loading-panel/loading-panel.component.html
@@ -1,8 +1,9 @@
-<alert type="info">
+<ngb-alert type="info"
+           [dismissible]="false">
   <strong>
     <i [ngClass]="[icons.spinner, icons.spin]"
        aria-hidden="true"
        class="mr-2"></i>
   </strong>
   <ng-content></ng-content>
-</alert>
+</ngb-alert>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/loading-panel/loading-panel.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/loading-panel/loading-panel.component.spec.ts
index 3bdb0799001a6..4ed5c4c57bf60 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/loading-panel/loading-panel.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/loading-panel/loading-panel.component.spec.ts
@@ -1,6 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { AlertModule } from 'ngx-bootstrap/alert';
+import { NgbAlertModule } from '@ng-bootstrap/ng-bootstrap';
 
 import { configureTestBed } from '../../../../testing/unit-test-helper';
 import { LoadingPanelComponent } from './loading-panel.component';
@@ -11,7 +11,7 @@ describe('LoadingPanelComponent', () => {
 
   configureTestBed({
     declarations: [LoadingPanelComponent],
-    imports: [AlertModule.forRoot()]
+    imports: [NgbAlertModule]
   });
 
   beforeEach(() => {
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/pwd-expiration-notification/pwd-expiration-notification.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/pwd-expiration-notification/pwd-expiration-notification.component.html
index 36615164bd62f..111f3c68fb531 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/pwd-expiration-notification/pwd-expiration-notification.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/pwd-expiration-notification/pwd-expiration-notification.component.html
@@ -1,14 +1,13 @@
-<alert class="no-margin-bottom"
-       type="{{ alertType }}"
-       *ngIf="expirationDays != null && expirationDays <= pwdExpirationSettings.pwdExpirationWarning1"
-       [dismissible]="true"
-       (onClose)="close($event)">
+<ngb-alert class="no-margin-bottom"
+           type="{{ alertType }}"
+           *ngIf="expirationDays != null && expirationDays <= pwdExpirationSettings.pwdExpirationWarning1"
+           (close)="close($event)">
   <div *ngIf="expirationDays === 0"
        i18n>Your password will expire in <strong>less than 1</strong> day. Click
-  <a routerLink="/user-profile/edit"
-     class="alert-link">here</a> to change it now.</div>
+    <a routerLink="/user-profile/edit"
+       class="alert-link">here</a> to change it now.</div>
   <div *ngIf="expirationDays > 0"
        i18n>Your password will expire in <strong>{{ expirationDays }}</strong> day(s). Click
   <a routerLink="/user-profile/edit"
      class="alert-link">here</a> to change it now.</div>
-</alert>
+</ngb-alert>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/pwd-expiration-notification/pwd-expiration-notification.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/pwd-expiration-notification/pwd-expiration-notification.component.spec.ts
index eb26601963a7e..07c9a8a4d8ea1 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/pwd-expiration-notification/pwd-expiration-notification.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/pwd-expiration-notification/pwd-expiration-notification.component.spec.ts
@@ -4,12 +4,10 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { Routes } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
 
+import { NgbAlertModule } from '@ng-bootstrap/ng-bootstrap';
 import { of as observableOf } from 'rxjs';
 
-import { AlertModule } from 'ngx-bootstrap/alert';
-
 import { configureTestBed } from '../../../../testing/unit-test-helper';
-
 import { SettingsService } from '../../api/settings.service';
 import { AuthStorageService } from '../../services/auth-storage.service';
 import { PwdExpirationNotificationComponent } from './pwd-expiration-notification.component';
@@ -27,11 +25,7 @@ describe('PwdExpirationNotificationComponent', () => {
 
   configureTestBed({
     declarations: [PwdExpirationNotificationComponent, FakeComponent],
-    imports: [
-      AlertModule.forRoot(),
-      HttpClientTestingModule,
-      RouterTestingModule.withRoutes(routes)
-    ],
+    imports: [NgbAlertModule, HttpClientTestingModule, RouterTestingModule.withRoutes(routes)],
     providers: [SettingsService, AuthStorageService]
   });
 
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/view-cache/view-cache.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/view-cache/view-cache.component.spec.ts
index ba33678a77a46..1e76f40d98d2c 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/view-cache/view-cache.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/view-cache/view-cache.component.spec.ts
@@ -1,6 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { AlertModule } from 'ngx-bootstrap/alert';
+import { NgbAlertModule } from '@ng-bootstrap/ng-bootstrap';
 
 import { configureTestBed } from '../../../../testing/unit-test-helper';
 import { AlertPanelComponent } from '../alert-panel/alert-panel.component';
@@ -12,7 +12,7 @@ describe('ViewCacheComponent', () => {
 
   configureTestBed({
     declarations: [ViewCacheComponent, AlertPanelComponent],
-    imports: [AlertModule.forRoot()]
+    imports: [NgbAlertModule]
   });
 
   beforeEach(() => {
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/form-loading.directive.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/form-loading.directive.spec.ts
index e396ecb4cb6da..8f0875a4f318e 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/form-loading.directive.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/form-loading.directive.spec.ts
@@ -2,7 +2,7 @@ import { Component } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 
-import { AlertModule } from 'ngx-bootstrap/alert';
+import { NgbAlertModule } from '@ng-bootstrap/ng-bootstrap';
 
 import { configureTestBed, i18nProviders } from '../../../testing/unit-test-helper';
 import { CdForm } from '../forms/cd-form';
@@ -28,7 +28,7 @@ describe('FormLoadingDirective', () => {
 
   configureTestBed({
     declarations: [TestComponent],
-    imports: [AlertModule.forRoot(), SharedModule],
+    imports: [SharedModule, NgbAlertModule],
     providers: [i18nProviders]
   });
 
@@ -50,7 +50,7 @@ describe('FormLoadingDirective', () => {
   it('should show loading component by default', () => {
     expectShown(0, 0, 1);
 
-    const alert = fixture.debugElement.nativeElement.querySelector('cd-loading-panel alert');
+    const alert = fixture.debugElement.nativeElement.querySelector('cd-loading-panel ngb-alert');
     expect(alert.textContent).toBe('Loading form data...');
   });
 
-- 
2.39.5