Add button that dismisses all notifications (#7223)

src/dialogs/notifications/notification-drawer.js

@@ -50,6 +50,11 @@ export class HuiNotificationDrawer extends EventsMixin(
         padding: 0 16px 16px;
       }
 
+      .notification-actions {
+        padding: 0 16px 16px;
+        text-align: center;
+      }
+
       .empty {
         padding: 16px;
         text-align: center;
@@ -69,6 +74,13 @@ export class HuiNotificationDrawer extends EventsMixin(
               </div>
             </template>
           </dom-repeat>
+          <template is="dom-if" if="[[_moreThanOne(notifications)]]">
+            <div class="notification-actions">
+              <mwc-button raised on-click="_dismissAll">
+                [[localize('ui.notification_drawer.dismiss_all')]]
+              </mwc-button>
+            </div>
+          </template>
         </template>
         <template is="dom-if" if="[[_empty(notifications)]]">
           <div class="empty">[[localize('ui.notification_drawer.empty')]]<div>
@@ -112,10 +124,23 @@ export class HuiNotificationDrawer extends EventsMixin(
     this.open = false;
   }
 
+  _dismissAll() {
+    this.notifications.forEach((notification) => {
+      this.hass.callService("persistent_notification", "dismiss", {
+        notification_id: notification.notification_id,
+      });
+    });
+    this.open = false;
+  }
+
   _empty(notifications) {
     return notifications.length === 0;
   }
 
+  _moreThanOne(notifications) {
+    return notifications.length > 1;
+  }
+
   _openChanged(open) {
     if (open) {
       // Render closed then animate open

src/translations/en.json

@@ -677,7 +677,8 @@
       "click_to_configure": "Click button to configure {entity}",
       "empty": "No Notifications",
       "title": "Notifications",
-      "close": "Close"
+      "close": "Close",
+      "dismiss_all": "Dismiss all"
     },
     "notification_toast": {
       "service_call_failed": "Failed to call service {service}.",