From 70cd143d727c9a9d9a52ffbcbe63cd853285a209 Mon Sep 17 00:00:00 2001
From: crisnicandrei <62384997+crisnicandrei@users.noreply.github.com>
Date: Mon, 2 Oct 2023 10:33:41 +0300
Subject: [PATCH] PER-9247

I have increased the duration of the message popup from 3 seconds to 9, and I have also added a button which will close the message when clicked on.
---
 .../components/message/message.component.html | 11 +++++--
 .../components/message/message.component.scss | 31 ++++++++++++++++---
 .../message/message.component.spec.ts         | 20 ++++++++++--
 .../components/message/message.component.ts   |  2 +-
 4 files changed, 52 insertions(+), 12 deletions(-)

diff --git a/src/app/shared/components/message/message.component.html b/src/app/shared/components/message/message.component.html
index c0d09dd4b..a78af1e1e 100644
--- a/src/app/shared/components/message/message.component.html
+++ b/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>
diff --git a/src/app/shared/components/message/message.component.scss b/src/app/shared/components/message/message.component.scss
index 22b857b99..2fdb3f464 100644
--- a/src/app/shared/components/message/message.component.scss
+++ b/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;
   }
 }
diff --git a/src/app/shared/components/message/message.component.spec.ts b/src/app/shared/components/message/message.component.spec.ts
index fe5fceb37..5d52bd703 100644
--- a/src/app/shared/components/message/message.component.spec.ts
+++ b/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,7 +60,7 @@ 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', () => {
@@ -67,12 +68,25 @@ describe('MessageComponent', () => {
     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);
   });
 });
diff --git a/src/app/shared/components/message/message.component.ts b/src/app/shared/components/message/message.component.ts
index 6e84b9d05..2a2e2fac6 100644
--- a/src/app/shared/components/message/message.component.ts
+++ b/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,