GMS-179 New reusable Angular component has been created to simplify m…

…essage displays

code/gms-frontend/src/app/common/components/gms-components-module.ts

@@ -9,16 +9,17 @@ import { InfoDialog } from "./info-dialog/info-dialog.component";
 import { MomentPipe } from "./pipes/date-formatter.pipe";
 import { NavButtonVisibilityPipe } from "./pipes/nav-button-visibility.pipe";
 import { TranslatorModule } from "./pipes/translator/translator.module";
+import { InformationMessageComponent } from "./information-message/information-message.component";
 
 /**
  * @author Peter Szrnka
  */
 @NgModule({
     declarations: [
-        ConfirmDeleteDialog, InfoDialog
+        ConfirmDeleteDialog, InfoDialog, InformationMessageComponent
     ],
     exports: [
-        ConfirmDeleteDialog, InfoDialog
+        ConfirmDeleteDialog, InfoDialog, InformationMessageComponent
     ],
     schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA],
     imports: [

code/gms-frontend/src/app/common/components/info-dialog/info-dialog.component.ts

@@ -7,7 +7,6 @@ import { DialogData } from "./dialog-data.model";
  */
 @Component({
   selector: 'info-dialog',
-  styleUrls: ['./info-dialog.component.scss'],
   templateUrl: './info-dialog.component.html'
 })
 export class InfoDialog {

code/gms-frontend/src/app/common/components/information-message/information-message.component.html

@@ -0,0 +1,4 @@
+<div [ngClass]="styleClass">
+    <mat-icon class="v-bottom {{iconColor}}" aria-hidden="false">{{icon}}</mat-icon>
+    <ng-content></ng-content>
+  </div>

code/gms-frontend/src/app/common/components/information-message/information-message.component.scss

@@ -0,0 +1,13 @@
+@import '../../../../globals.scss';
+
+.green {
+  color: $success_dark;
+}
+
+.orange {
+  color: $warning;
+}
+
+.blue {
+  color: $information;
+}

code/gms-frontend/src/app/common/components/information-message/information-message.component.spec.ts

@@ -0,0 +1,37 @@
+import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from "@angular/core";
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { MatDialogModule } from "@angular/material/dialog";
+import { TranslatorModule } from "../pipes/translator/translator.module";
+import { InformationMessageComponent } from "./information-message.component";
+
+/**
+ * @author Peter Szrnka
+ */
+describe('InformationMessageComponent', () => {
+    let component : InformationMessageComponent;
+
+    // Fixtures
+    let fixture : ComponentFixture<InformationMessageComponent>;
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            imports : [MatDialogModule, TranslatorModule ],
+            declarations : [InformationMessageComponent],
+            schemas : [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA],
+            providers: [
+            ]
+        });
+    });
+
+    it('onInit when component loaded then set parameters properly', () => {
+        fixture = TestBed.createComponent(InformationMessageComponent);
+        component = fixture.componentInstance;
+        component.severity = 'information';
+        fixture.detectChanges();
+
+        expect(component).toBeTruthy();
+        expect(component.severity).toBe('information');
+        expect(component.icon).toBe('information');
+        expect(component.iconColor).toBe('blue');
+    });
+});

code/gms-frontend/src/app/common/components/information-message/information-message.component.ts

@@ -0,0 +1,30 @@
+import { Component, Input, OnInit } from "@angular/core";
+
+const SETTINGS_MAP: any = {
+  'success': { icon: 'check_circle', iconColor: 'green', styleClass: 'success' },
+  'information': { icon: 'information', iconColor: 'blue', styleClass: 'information' },
+  'warning': { icon: 'warning', iconColor: 'orange', styleClass: 'warning' }
+};
+
+/**
+ * @author Peter Szrnka
+ */
+@Component({
+
+  selector: 'information-message',
+  templateUrl: './information-message.component.html',
+  styleUrls: ['./information-message.component.scss']
+})
+export class InformationMessageComponent implements OnInit {
+
+  @Input() severity: 'success' | 'information' | 'warning' = 'warning';
+  icon: string = '';
+  iconColor: string = '';
+  styleClass: string = '';
+
+  ngOnInit(): void {
+    this.icon = SETTINGS_MAP[this.severity].icon;
+    this.iconColor = SETTINGS_MAP[this.severity].iconColor;
+    this.styleClass = SETTINGS_MAP[this.severity].styleClass;
+  }
+}

code/gms-frontend/src/app/components/secret/secret-detail.component.html

@@ -3,7 +3,7 @@
   <nav-back [buttonConfig]="buttonConfig"></nav-back>
 
   @if (error) {
-  <div class="warning"><b>{{ 'messages.error' | translate }}:</b> {{error}}</div>
+  <information-message severity="warning">{{ 'messages.error' | translate }}: {{error}}</information-message>
   }
   @if (!error) {
   <form #form="ngForm" class="form-control">
@@ -20,9 +20,7 @@
           <input matInput required name="secretId" [(ngModel)]="data.secretId">
         </mat-form-field>
         @if (data.value === undefined) {
-        <div class="warning">
-          {{ 'secrets.info' | translate }}
-        </div>
+        <information-message severity="warning">{{ 'secrets.info' | translate }}</information-message>
         }
         <mat-form-field appearance="fill" class="full-width">
           <mat-label>{{ 'secrets.keystoreId' | translate }}</mat-label>
@@ -66,22 +64,16 @@
         }
 
         @if (validationState === 'IN_PROGRESS') {
-        <div class="information">
+        <information-message severity="information">
           {{ 'secrets.validation.inProgress' | translate }}
           <mat-progress-bar mode="indeterminate"></mat-progress-bar>
-        </div>
+        </information-message>
         } @else if (validationState === 'VALID') {
-        <div class="success">
-          {{ 'secrets.validation.success' | translate }}
-        </div>
+          <information-message severity="success">{{ 'secrets.validation.success' | translate }}</information-message>
         } @else if (validationState === 'INVALID') {
-        <div class="warning">
-          {{ 'secrets.validation.invalid' | translate }}
-        </div>
+        <information-message severity="warning">{{ 'secrets.validation.invalid' | translate }}</information-message>
         } @else if (validationState === 'INVALID_INPUT') {
-        <div class="warning">
-          {{ 'secrets.validation.invalidInput' | translate }}
-        </div>
+        <information-message severity="warning">{{ 'secrets.validation.invalidInput' | translate }}</information-message> 
         }
         @if (data.value !== undefined && data.type === 'SIMPLE_CREDENTIAL') {
         <mat-form-field appearance="fill" class="full-width">
@@ -93,9 +85,7 @@
         <button mat-raised-button color="primary" class="margin-bottom" (click)="addNewMultipleCredential()">{{
           'secrets.addNewKvp' | translate }}</button>
 
-        <div class="warning">
-          {{ 'secrets.capacityWarning' | translate }}
-        </div>
+        <information-message severity="warning">{{ 'secrets.capacityWarning' | translate }}</information-message>
         <table mat-table [dataSource]="datasource" class="mat-elevation-z1 full-width margin-bottom">
           <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
           <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
@@ -158,9 +148,7 @@
           </mat-checkbox>
         </div>
         @if (formData.allApiKeysAllowed === true) {
-        <div class="information">
-          {{ 'secrets.label.allApiKeys' | translate }}
-        </div>
+        <information-message severity="information">{{ 'secrets.label.allApiKeys' | translate }}</information-message>
         }
         @if (formData.allApiKeysAllowed !== true) {
         <mat-form-field appearance="fill" class="full-width">
@@ -222,7 +210,7 @@
           </ng-container>
         </table>
         @if (ipRestrictions.length === 0) {
-        <div class="information">{{ 'secrets.allIpAddresses' | translate }}</div>
+        <information-message severity="information">{{ 'secrets.allIpAddresses' | translate }}</information-message>
         }
         @if (data.id !== undefined) {
         <mat-form-field appearance="fill" class="full-width">

code/gms-frontend/src/app/components/secret/secret-detail.component.scss

@@ -1,3 +1,5 @@
+@import '../../../globals.scss';
+
 .margin-right {
   margin-right: 5px;
 }
@@ -13,4 +15,12 @@
 .all-allowed {
   padding: 10px 0 10px 10px;
   margin-bottom:10px;
+}
+
+.green {
+  color: $success_dark;
+}
+
+.orange {
+  color: $warning;
 }

code/gms-frontend/src/app/components/secret/secret-module.ts

@@ -15,6 +15,7 @@ import { SecretService } from "./service/secret-service";
 import { NavBackComponent } from "../../common/components/nav-back/nav-back.component";
 import { StatusToggleComponent } from "../../common/components/status-toggle/status-toggle.component";
 import { TranslatorModule } from "../../common/components/pipes/translator/translator.module";
+import { GmsComponentsModule } from "../../common/components/gms-components-module";
 
 /**
  * @author Peter Szrnka
@@ -33,7 +34,8 @@ import { TranslatorModule } from "../../common/components/pipes/translator/trans
         MomentPipe,
         NavButtonVisibilityPipe,
         StatusToggleComponent,
-        TranslatorModule
+        TranslatorModule,
+        GmsComponentsModule
     ], 
     providers: [
         SecretService, SecretListResolver, SecretDetailResolver,

code/gms-frontend/src/styles.scss

@@ -190,4 +190,8 @@ td {
     padding: 5px;
     margin-left: 5px;
     color: white;
-  }
+}
+
+.v-bottom {
+    vertical-align: bottom !important;
+}