Merge pull request #306 from PermanentOrg/PER-9247-increase-message-d…

…uration

PER-9247 Increase the duration of system messages

src/app/shared/components/message/message.component.html

@@ -1,5 +1,10 @@
-<div class="alert-wrapper" [ngClass]="{'visible': visible, 'fade': useFade}" (click)="onClick()">
-  <div class="alert alert-primary" [ngClass]="style">
-    {{displayText}}
+<div>
+  <div class="alert-wrapper" [ngClass]="{ visible: visible, fade: useFade }">
+    <div class="alert alert-primary icon-container" [ngClass]="style">
+        <i (click)="dismiss()" class="material-icons">close</i>
+    </div>
+    <div (click)="onClick()" class="alert alert-primary" [ngClass]="style">
+      {{ displayText }}
+    </div>
   </div>
 </div>

src/app/shared/components/message/message.component.scss

@@ -12,29 +12,50 @@ $transition-length: 0.33s;
 .alert {
   margin: 0;
   cursor: pointer;
+  border-top-left-radius: 0px;
+  border-top-right-radius: 0px;
+  border-top: none;
+  box-shadow: 0 1rem 1rem rgb(0 0 0 / 15%);
+  padding-top: 0px;
 }
 
 .alert-wrapper {
   padding: 10px 10px;
   transform: translateY(0);
-  transition: transform $transition-length ease-in 0s, visibility 0s linear $transition-length;
+  transition: transform $transition-length ease-in 0s,
+    visibility 0s linear $transition-length;
   display: block;
   margin: 0 auto;
   visibility: hidden;
-  
+
   &.visible {
     transform: translateY(100%);
-    transition: transform $transition-length ease-out, visibility 0s linear  0s;
+    transition: transform $transition-length ease-out, visibility 0s linear 0s;
     visibility: visible;
   }
 }
 
 .alert-wrapper.fade {
   opacity: 0;
-  transition: transform 0s linear $transition-length, opacity $transition-length ease-in 0s, visibility 0s linear $transition-length;
+  transition: transform 0s linear $transition-length,
+    opacity $transition-length ease-in 0s,
+    visibility 0s linear $transition-length;
 
   &.visible {
     opacity: 1;
-    transition: transform 0s, opacity $transition-length ease-out, visibility 0s linear  0s;
+    transition: transform 0s, opacity $transition-length ease-out,
+      visibility 0s linear 0s;
+  }
+}
+
+.icon-container {
+  padding: 0;
+  border-radius: 0.25rem 0.25rem 0 0;
+  border-bottom: none;
+  display: flex;
+  justify-content: flex-end;
+  box-shadow: none;
+  & > i {
+    padding-right: 1px;
   }
 }

src/app/shared/components/message/message.component.spec.ts

@@ -1,3 +1,4 @@
+/* @format */
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import * as Testing from '@root/test/testbedConfig';
 import { cloneDeep } from 'lodash';
@@ -59,20 +60,33 @@ describe('MessageComponent', () => {
 
     expect(component.dismiss).toHaveBeenCalledTimes(1);
     expect(router.navigate).toHaveBeenCalledTimes(1);
-    expect(router.navigate).toHaveBeenCalledWith(testUrl, {queryParams: {}});
+    expect(router.navigate).toHaveBeenCalledWith(testUrl, { queryParams: {} });
   });
 
   it('should navigate and dismiss when clicked if navigation URL and param given', () => {
     const router = TestBed.get(Router);
     spyOn(router, 'navigate');
     spyOn(component, 'dismiss');
 
-    component.display('test', null, testUrl, {testParam: true});
+    component.display('test', null, testUrl, { testParam: true });
 
     component.onClick();
 
     expect(component.dismiss).toHaveBeenCalledTimes(1);
     expect(router.navigate).toHaveBeenCalledTimes(1);
-    expect(router.navigate).toHaveBeenCalledWith(testUrl, {queryParams: {testParam: true}});
+    expect(router.navigate).toHaveBeenCalledWith(testUrl, {
+      queryParams: { testParam: true },
+    });
+  });
+
+  it('should dismiss the component when clicking on the X icon', () => {
+    spyOn(component, 'dismiss');
+
+    const closeIcon =
+      fixture.debugElement.nativeElement.querySelector('.material-icons');
+    closeIcon.click();
+    fixture.detectChanges();
+
+    expect(component.dismiss).toHaveBeenCalledTimes(1);
   });
 });

src/app/shared/components/message/message.component.ts

@@ -24,7 +24,7 @@ export class MessageComponent implements OnInit {
   style: string;
   queue: Message[] = [];
 
-  private displayTime = 3000;
+  private displayTime = 9000;
 
   constructor(
     private service: MessageService,