mgr/dashboard: Fix breaking layout in overview page

Issue:

One opening the notification panel overview page breaks.

Reason:

Due to the css grid used in notification panel and flex grid in overview page.

Fix:

Removed css grid from the notification header

Signed-off-by: Afreen Misbah <afreen@ibm.com>
(cherry picked from commit cc1923d57943c1a22863ee2d464feb276806693f)

 Conflicts:
	src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-header/notification-header.component.html
	src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-header/notification-header.component.scss

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-header/notification-header.component.html b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-header/notification-header.component.html
new file mode 100644 (file)
index 0000000..2906f9b
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-header/notification-header.component.html
@@ -0,0 +1,23 @@
+<div class="notification-header">
+  <div class="notification-header__heading-and-button">
+    <h1
+      i18n
+      class="cds--type-heading-compact-01">Tasks and Notifications</h1>
+    <button
+      class="notification-header__dismiss-btn"
+      i18n
+      cdsButton="ghost"
+      size="sm"
+      (click)="onDismissAll()">
+      Dismiss all
+    </button>
+  </div>
+  <cds-toggle
+    [checked]="isMuted"
+    size="sm"
+    (checkedChange)="onToggleMute()"
+    label="Mute notifications"
+    i18n-label
+    hideLabel="true"> <!--hides the toggle state values (like "On/Off" in the toggle button)-->
+  </cds-toggle>
+</div>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-header/notification-header.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-header/notification-header.component.scss
new file mode 100644 (file)
index 0000000..fef7cb5
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-header/notification-header.component.scss
@@ -0,0 +1,28 @@
+@use '@carbon/styles/scss/spacing';
+
+.notification-header {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  padding: spacing.$spacing-03 spacing.$spacing-05;
+  background-color: var(--cds-layer-01);
+  border-block-end: 1px solid var(--cds-border-subtle-01);
+  inset-block-start: 0;
+  height: var(--header-height);
+
+  &__title {
+    margin-top: 0.4rem;
+  }
+
+  &__dismiss-btn {
+    color: var(--cds-text-primary);
+    padding-top: 0;
+    padding-left: spacing.$spacing-06;
+  }
+
+  &__heading-and-button {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+}