mgr/dashboard: carbonize general components and styles

alert-panel and some other general components

Fixes: https://tracker.ceph.com/issues/67231
Signed-off-by: Nizamudeen A <[email protected]>

Author: nizamial09

src/pybind/mgr/dashboard/frontend/src/app/shared/components/alert-panel/alert-panel.component.html

@@ -1,50 +1,19 @@
-<cds-actionable-notification
-      class="mb-1"
-      [notificationObj]="notificationContent"
-      *ngIf="size === 'slim'; else normal">
-</cds-actionable-notification>
-
-<ng-template #normal>
-  <ngb-alert type="{{ bootstrapClass }}"
-             [dismissible]="dismissible"
-             (closed)="onClose()"
-             [ngClass]="spacingClass">
-    <table>
-      <ng-container *ngIf="size === 'normal'">
-        <tr>
-          <td *ngIf="showIcon"
-              rowspan="2"
-              class="alert-panel-icon">
-            <i [ngClass]="[icons.large3x]"
-               class="alert-{{ bootstrapClass }} {{ typeIcon }}"
-               aria-hidden="true"></i>
-          </td>
-          <td *ngIf="showTitle"
-              class="alert-panel-title">{{ title }}</td>
-        </tr>
-        <tr>
-          <td class="alert-panel-text">
-            <ng-container *ngTemplateOutlet="content"></ng-container>
-          </td>
-        </tr>
-      </ng-container>
-    </table>
-  </ngb-alert>
-</ng-template>
+<cds-actionable-notification class="mb-1"
+                             [ngClass]="spacingClass"
+                             [notificationObj]="notificationContent"
+                             (close)="onClose()"></cds-actionable-notification>
 
 <ng-template #content>
   <ng-content></ng-content>
 </ng-template>
 
-<ng-template #closeTpl>
+<ng-template #actionTpl>
   <button cdsActionableButton
           cdsButton="ghost"
           size="md"
           title="Close"
-          (click)="onClose()"
-          *ngIf="dismissible">
-    <svg class="cds--btn__icon"
-         cdsIcon="close"
-         size="16"></svg>
+          (click)="onAction()"
+          *ngIf="actionName"
+          i18n>{{ actionName }}
   </button>
 </ng-template>

src/pybind/mgr/dashboard/frontend/src/app/shared/components/alert-panel/alert-panel.component.ts

@@ -19,27 +19,25 @@ import { Icons } from '~/app/shared/enum/icons.enum';
 export class AlertPanelComponent implements OnInit {
   @ViewChild('content', { static: true })
   alertContent: TemplateRef<any>;
-  @ViewChild('closeTpl', { static: true })
-  closeTpl: TemplateRef<any>;
+  @ViewChild('actionTpl', { static: true })
+  actionTpl: TemplateRef<any>;
 
   @Input()
   title = '';
   @Input()
-  bootstrapClass = '';
-  @Input()
   type: 'warning' | 'error' | 'info' | 'success' | 'danger';
   @Input()
-  typeIcon: Icons | string;
+  showTitle = true;
   @Input()
   size: 'slim' | 'normal' = 'normal';
   @Input()
-  showIcon = true;
-  @Input()
-  showTitle = true;
-  @Input()
   dismissible = false;
   @Input()
   spacingClass = '';
+  @Input()
+  actionName = '';
+  @Input()
+  lowContrast = true;
 
   /**
    * The event that is triggered when the close button (x) has been
@@ -48,50 +46,52 @@ export class AlertPanelComponent implements OnInit {
   @Output()
   dismissed = new EventEmitter();
 
+  /**
+   * The event that is triggered when the action button has been
+   * pressed.
+   */
+  @Output()
+  action = new EventEmitter();
+
   icons = Icons;
 
   notificationContent: NotificationContent;
 
   ngOnInit() {
     const type: NotificationType = this.type === 'danger' ? 'error' : this.type;
-    this.notificationContent = {
-      type: type,
-      template: this.alertContent,
-      actionsTemplate: this.closeTpl,
-      showClose: false,
-      title: this.title
-    };
-
     switch (this.type) {
       case 'warning':
         this.title = this.title || $localize`Warning`;
-        this.typeIcon = this.typeIcon || Icons.warning;
-        this.bootstrapClass = this.bootstrapClass || 'warning';
         break;
       case 'error':
         this.title = this.title || $localize`Error`;
-        this.typeIcon = this.typeIcon || Icons.destroyCircle;
-        this.bootstrapClass = this.bootstrapClass || 'danger';
         break;
       case 'info':
         this.title = this.title || $localize`Information`;
-        this.typeIcon = this.typeIcon || Icons.infoCircle;
-        this.bootstrapClass = this.bootstrapClass || 'info';
         break;
       case 'success':
         this.title = this.title || $localize`Success`;
-        this.typeIcon = this.typeIcon || Icons.check;
-        this.bootstrapClass = this.bootstrapClass || 'success';
         break;
       case 'danger':
         this.title = this.title || $localize`Danger`;
-        this.typeIcon = this.typeIcon || Icons.warning;
-        this.bootstrapClass = this.bootstrapClass || 'danger';
         break;
     }
+
+    this.notificationContent = {
+      type: type,
+      template: this.alertContent,
+      actionsTemplate: this.actionTpl,
+      showClose: this.dismissible,
+      title: this.showTitle ? this.title : '',
+      lowContrast: this.lowContrast
+    };
   }
 
   onClose(): void {
     this.dismissed.emit();
   }
+
+  onAction(): void {
+    this.action.emit();
+  }
 }

src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts

@@ -19,7 +19,12 @@ import {
   UIShellModule,
   ButtonModule,
   NotificationModule,
-  IconModule
+  IconModule,
+  IconService,
+  TooltipModule,
+  GridModule,
+  AccordionModule,
+  LoadingModule
 } from 'carbon-components-angular';
 
 import { MotdComponent } from '~/app/shared/components/motd/motd.component';
@@ -64,6 +69,9 @@ import { HelpTextComponent } from './help-text/help-text.component';
 import { FormAdvancedFieldsetComponent } from './form-advanced-fieldset/form-advanced-fieldset.component';
 import { UpgradableComponent } from './upgradable/upgradable.component';
 
+// Icons
+import InfoIcon from '@carbon/icons/es/information/16';
+
 @NgModule({
   imports: [
     CommonModule,
@@ -86,7 +94,12 @@ import { UpgradableComponent } from './upgradable/upgradable.component';
     UIShellModule,
     ButtonModule,
     NotificationModule,
-    IconModule
+    IconModule,
+    TooltipModule,
+    IconModule,
+    GridModule,
+    AccordionModule,
+    LoadingModule
   ],
   declarations: [
     SparklineComponent,
@@ -168,4 +181,8 @@ import { UpgradableComponent } from './upgradable/upgradable.component';
     UpgradableComponent
   ]
 })
-export class ComponentsModule {}
+export class ComponentsModule {
+  constructor(private iconService: IconService) {
+    this.iconService.registerAll([InfoIcon]);
+  }
+}

src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-advanced-fieldset/form-advanced-fieldset.component.html

@@ -1,22 +1,14 @@
 <fieldset>
-  <legend class="cd-header">
-    <div class="accordion accordion-flush">
-      <button class="accordion-button cd-form-advanced-fieldset-buttton p-0"
-              type="button"
-              id="advanced-fieldset"
-              aria-label="toggle advanced mode"
-              [ngClass]="{collapsed: !showAdvanced}"
-              (click)="showAdvanced = !showAdvanced"
-              i18n>Advanced
-      </button>
-    </div>
-  </legend>
-  <div class="accordion-collapse collapse"
-       [ngClass]="{show: showAdvanced}">
-    <div class="accordion-body">
-      <div class="card-body">
-        <ng-content></ng-content>
-      </div>
-    </div>
-  </div>
+  <cds-accordion size="lg"
+                 class="form-item">
+    <cds-accordion-item [title]="title"
+                        i18n
+                        (selected)="showAdvanced = !showAdvanced">
+      <ng-content></ng-content>
+    </cds-accordion-item>
+  </cds-accordion>
+
+  <ng-template #title>
+    <h5 class="cds--accordion__title cd-header">Advanced</h5>
+  </ng-template>
 </fieldset>

src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-advanced-fieldset/form-advanced-fieldset.component.scss

@@ -1,22 +0,0 @@
-/*
-  Overrides the active and focus states of bootstrap accordion,
-  in order to align the accordion css with rest of the form.
-
-  Summary of overrides:
-  - font-size was 1 rem
-  - color was blue when higlighted
-  - border,outlines and box-shadow were set
-  - accordion down button in active form was a blue svg icon
-
- */
-.cd-form-advanced-fieldset-buttton {
-  --bs-accordion-btn-active-icon: var(--bs-accordion-btn-icon);
-  background-color: inherit;
-  border: hidden;
-  border-color: inherit;
-  box-shadow: none;
-  color: inherit;
-  font-size: inherit;
-  outline: 0;
-  text-decoration: none;
-}

src/pybind/mgr/dashboard/frontend/src/app/shared/components/helper/helper.component.html

@@ -4,8 +4,9 @@
   </div>
   <ng-content></ng-content>
 </ng-template>
-<i [ngClass]="iconClass ? iconClass : [icons.questionCircle]"
-   aria-hidden="true"
-   [ngbPopover]="popoverTpl"
-   (click)="$event.preventDefault();">
-</i>
+
+<cds-tooltip [description]="popoverTpl">
+  <svg cdsIcon="information"
+       size="16"
+       title="info"></svg>
+</cds-tooltip>

src/pybind/mgr/dashboard/frontend/src/app/shared/components/helper/helper.component.scss

@@ -1,7 +1,3 @@
-@use './src/styles/vendor/variables' as vv;
-
-i {
-  color: vv.$primary;
-  cursor: pointer;
-  padding-left: 4px;
+cds-tooltip {
+  margin-left: 5px;
 }

src/pybind/mgr/dashboard/frontend/src/app/shared/components/helper/helper.component.ts

@@ -1,7 +1,5 @@
 import { Component, Input } from '@angular/core';
 
-import { Icons } from '~/app/shared/enum/icons.enum';
-
 @Component({
   selector: 'cd-helper',
   templateUrl: './helper.component.html',
@@ -16,6 +14,4 @@ export class HelperComponent {
 
   @Input()
   html: any;
-
-  icons = Icons;
 }

src/pybind/mgr/dashboard/frontend/src/app/shared/components/submit-button/submit-button.component.html

@@ -1,11 +1,13 @@
 <button [type]="type"
-        class="btn btn-accent tc_submitButton"
-        [ngClass]="btnClass"
+        class="tc_submitButton"
         [disabled]="loading || disabled"
         (click)="submit($event)"
-        [attr.aria-label]="ariaLabel">
+        [attr.aria-label]="ariaLabel"
+        size="xl"
+        cdsButton="primary">
   <ng-content></ng-content>
-  <span *ngIf="loading">
-    <i [ngClass]="[icons.spinner, icons.spin]"></i>
-  </span>
+  <cds-loading [isActive]="loading"
+               [overlay]="false"
+               size="sm"
+               *ngIf="loading"></cds-loading>
 </button>