mgr/dashboard: Truncate notification toasts

- truncated to 3 lines
- maximum 3 visible toasts
- duplicated toasts show "first maessage (+n more)"

Signed-off-by: Afreen Misbah <afreen@ibm.com>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-area/notification-area.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-area/notification-area.component.scss
index 28569607d15ec8350d39d0a577de5a58731882b3..2d2031d7a726161ff068f98d46917952bd4f50f6 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-area/notification-area.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-area/notification-area.component.scss
@@ -5,6 +5,13 @@ cd-notification-area {
   min-block-size: 0;
 }
 
+:host {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+  min-block-size: 0;
+}
+
 .notification-section-heading {
   margin: 0;
   color: var(--cds-text-primary);
@@ -40,7 +47,25 @@ cd-notification-area {
   color: var(--cds-text-primary);
   line-height: 1.25;
   display: block;
+<<<<<<< HEAD
   overflow-wrap: break-word;
+=======
+  word-break: break-word;
+}
+
+.notification-message {
+  @include type.type-style('body-short-01');
+
+  color: $text-helper;
+  margin: 0;
+  line-height: 1.4;
+  margin-top: -$spacing-01;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  word-break: break-word;
+>>>>>>> 8e9c61bcc14 (mgr/dashboard: Fix the footer - view all button css in notification panel)
 }
 
 .notification-empty {

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/notification-toast/notification-toast.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/notification-toast/notification-toast.component.scss
index 80c66379ef956d04e61f2b9d909ec2ac4a95eab7..2afcf3d733eb3c49e2e4786bf4352e51693e069b 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/notification-toast/notification-toast.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/notification-toast/notification-toast.component.scss
@@ -26,6 +26,14 @@
         color: $text-primary;
       }
 
+      .cds--toast-notification__subtitle {
+        display: -webkit-box;
+        -webkit-line-clamp: 3;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        word-break: break-word;
+      }
+
       .cds--toast-notification__close-button {
         color: $icon-primary;
       }

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/services/notification.service.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/services/notification.service.spec.ts
index 789ec1bf113507d5cf4cfbdecc9981cc3bc2d597..0eb6a5313d55d832b542ec8bbdd358ac9a04aa36 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/services/notification.service.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/services/notification.service.spec.ts
@@ -164,7 +164,7 @@ describe('NotificationService', () => {
       expectSavedNotificationToHave({
         type: NotificationType.error,
         title: '502 - Bad Gateway',
-        message: '<ul><li>Error occurred in path a</li><li>Error occurred in path b</li></ul>'
+        message: 'Error occurred in path a (+1 more)'
       });
       flush();
     }));