Dev tools events: Add a clear events button (#21353)

Clear events

src/panels/developer-tools/event/developer-tools-event.ts

@@ -1,8 +1,9 @@
 import { CSSResultGroup, LitElement, TemplateResult, css, html } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import "@material/mwc-button";
 import "../../../components/ha-yaml-editor";
 import "../../../components/ha-textfield";
+import "../../../components/ha-button";
+import "../../../components/ha-card";
 import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
 import { documentationUrl } from "../../../util/documentation-url";
 import "./event-subscribe-card";
@@ -31,12 +32,17 @@ class HaPanelDevEvent extends LitElement {
           : "content layout horizontal"}
       >
         <div class="flex">
+          <ha-card>
+            <div class="card-content">
               <p>
                 ${this.hass.localize(
                   "ui.panel.developer-tools.tabs.events.description"
                 )}
                 <a
-              href=${documentationUrl(this.hass, "/docs/configuration/events/")}
+                  href=${documentationUrl(
+                    this.hass,
+                    "/docs/configuration/events/"
+                  )}
                   target="_blank"
                   rel="noreferrer"
                 >
@@ -56,7 +62,9 @@ class HaPanelDevEvent extends LitElement {
                   @change=${this._eventTypeChanged}
                 ></ha-textfield>
                 <p>
-              ${this.hass.localize("ui.panel.developer-tools.tabs.events.data")}
+                  ${this.hass.localize(
+                    "ui.panel.developer-tools.tabs.events.data"
+                  )}
                 </p>
               </div>
               <div class="code-editor">
@@ -66,14 +74,19 @@ class HaPanelDevEvent extends LitElement {
                   @value-changed=${this._yamlChanged}
                 ></ha-yaml-editor>
               </div>
-          <mwc-button
+            </div>
+            <div class="card-actions">
+              <ha-button
                 @click=${this._fireEvent}
                 raised
                 .disabled=${!this._isValid}
                 >${this.hass.localize(
                   "ui.panel.developer-tools.tabs.events.fire_event"
-            )}</mwc-button
+                )}</ha-button
               >
+            </div>
+          </ha-card>
+
           <event-subscribe-card .hass=${this.hass}></event-subscribe-card>
         </div>
 

src/panels/developer-tools/event/event-subscribe-card.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-button";
 import { HassEvent } from "home-assistant-js-websocket";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -7,6 +6,7 @@ import { formatTime } from "../../../common/datetime/format_time";
 import "../../../components/ha-card";
 import "../../../components/ha-textfield";
 import "../../../components/ha-yaml-editor";
+import "../../../components/ha-button";
 import { HomeAssistant } from "../../../types";
 
 @customElement("event-subscribe-card")
@@ -40,7 +40,6 @@ class EventSubscribeCard extends LitElement {
         )}
       >
         <div class="card-content">
-          <form>
           <ha-textfield
             .label=${this._subscribed
               ? this.hass!.localize(
@@ -53,10 +52,12 @@ class EventSubscribeCard extends LitElement {
             .value=${this._eventType}
             @input=${this._valueChanged}
           ></ha-textfield>
-            <mwc-button
+        </div>
+        <div class="card-actions">
+          <ha-button
+            raised
             .disabled=${this._eventType === ""}
-              @click=${this._handleSubmit}
+            @click=${this._startOrStopListening}
-              type="submit"
           >
             ${this._subscribed
               ? this.hass!.localize(
@@ -65,8 +66,20 @@ class EventSubscribeCard extends LitElement {
               : this.hass!.localize(
                   "ui.panel.developer-tools.tabs.events.start_listening"
                 )}
-            </mwc-button>
+          </ha-button>
-          </form>
+          <ha-button
+            raised
+            .disabled=${this._eventType === ""}
+            @click=${this._clearEvents}
+          >
+            ${this.hass!.localize(
+              "ui.panel.developer-tools.tabs.events.clear_events"
+            )}
+          </ha-button>
+        </div>
+      </ha-card>
+      <ha-card>
+        <div class="card-content">
           <div class="events">
             ${repeat(
               this._events,
@@ -99,7 +112,7 @@ class EventSubscribeCard extends LitElement {
     this._eventType = ev.target.value;
   }
 
-  private async _handleSubmit(): Promise<void> {
+  private async _startOrStopListening(): Promise<void> {
     if (this._subscribed) {
       this._subscribed();
       this._subscribed = undefined;
@@ -121,6 +134,11 @@ class EventSubscribeCard extends LitElement {
     }
   }
 
+  private _clearEvents(): void {
+    this._events = [];
+    this._eventCount = 0;
+  }
+
   static get styles(): CSSResultGroup {
     return css`
       ha-textfield {
@@ -140,6 +158,9 @@ class EventSubscribeCard extends LitElement {
       pre {
         font-family: var(--code-font-family, monospace);
       }
+      ha-card {
+        margin-bottom: 5px;
+      }
     `;
   }
 }

src/translations/en.json

@@ -6686,6 +6686,7 @@
             "subscribe_to": "Event to subscribe to",
             "start_listening": "Start listening",
             "stop_listening": "Stop listening",
+            "clear_events": "Clear events",
             "alert_event_type": "Event type is a mandatory field",
             "notification_event_fired": "Event {type} successfully fired!"
           },