ha-refresh-tokens-card: Replace ha-button-menu to ha-md-button-menu (#26874)

src/panels/profile/ha-refresh-tokens-card.ts

@@ -1,4 +1,3 @@
-import type { ActionDetail } from "@material/mwc-list";
 import {
   mdiAndroid,
   mdiApple,
@@ -15,7 +14,8 @@ import memoizeOne from "memoize-one";
 import { relativeTime } from "../../common/datetime/relative_time";
 import { fireEvent } from "../../common/dom/fire_event";
 import "../../components/ha-button";
-import "../../components/ha-button-menu";
+import "../../components/ha-md-button-menu";
+import "../../components/ha-md-menu-item";
 import "../../components/ha-card";
 import "../../components/ha-icon-button";
 import "../../components/ha-label";
@@ -146,20 +146,19 @@ class HaRefreshTokens extends LitElement {
                           )}
                     </div>
                     <div>
-                      <ha-button-menu
-                        corner="BOTTOM_END"
-                        menu-corner="END"
-                        @action=${this._handleAction}
-                        .token=${token}
-                      >
+                      <ha-md-button-menu positioning="popover">
                         <ha-icon-button
                           slot="trigger"
                           .label=${this.hass.localize("ui.common.menu")}
                           .path=${mdiDotsVertical}
                         ></ha-icon-button>
-                        <ha-list-item graphic="icon">
+                        <ha-md-menu-item
+                          graphic="icon"
+                          @click=${this._toggleTokenExpiration}
+                          .token=${token}
+                        >
                           <ha-svg-icon
-                            slot="graphic"
+                            slot="start"
                             .path=${token.expire_at
                               ? mdiClockRemoveOutline
                               : mdiClockCheckOutline}
@@ -171,20 +170,24 @@ class HaRefreshTokens extends LitElement {
                             : this.hass.localize(
                                 "ui.panel.profile.refresh_tokens.enable_token_expiration"
                               )}
-                        </ha-list-item>
-                        <ha-list-item
+                        </ha-md-menu-item>
+                        <ha-md-menu-item
                           graphic="icon"
                           class="warning"
                           .disabled=${token.is_current}
+                          @click=${this._deleteToken}
+                          .token=${token}
                         >
                           <ha-svg-icon
                             class="warning"
-                            slot="graphic"
+                            slot="start"
                             .path=${mdiDelete}
                           ></ha-svg-icon>
-                          ${this.hass.localize("ui.common.delete")}
-                        </ha-list-item>
-                      </ha-button-menu>
+                          <div slot="headline">
+                            ${this.hass.localize("ui.common.delete")}
+                          </div>
+                        </ha-md-menu-item>
+                      </ha-md-button-menu>
                     </div>
                   </ha-settings-row>
                 `
@@ -207,19 +210,8 @@ class HaRefreshTokens extends LitElement {
     `;
   }
 
-  private async _handleAction(ev: CustomEvent<ActionDetail>) {
-    const token = (ev.currentTarget as any).token;
-    switch (ev.detail.index) {
-      case 0:
-        this._toggleTokenExpiration(token);
-        break;
-      case 1:
-        this._deleteToken(token);
-        break;
-    }
-  }
-
-  private async _toggleTokenExpiration(token: RefreshToken): Promise<void> {
+  private async _toggleTokenExpiration(ev): Promise<void> {
+    const token = (ev.currentTarget as any).token as RefreshToken;
     const enable = !token.expire_at;
     if (!enable) {
       if (
@@ -260,7 +252,8 @@ class HaRefreshTokens extends LitElement {
     }
   }
 
-  private async _deleteToken(token: RefreshToken): Promise<void> {
+  private async _deleteToken(ev): Promise<void> {
+    const token = (ev.currentTarget as any).token as RefreshToken;
     if (
       !(await showConfirmationDialog(this, {
         title: this.hass.localize(
@@ -332,8 +325,8 @@ class HaRefreshTokens extends LitElement {
         ha-icon-button {
           color: var(--primary-text-color);
         }
-        ha-list-item[disabled],
-        ha-list-item[disabled] ha-svg-icon {
+        ha-md-list-item[disabled],
+        ha-md-list-item[disabled] ha-svg-icon {
           color: var(--disabled-text-color) !important;
         }
         ha-settings-row .current-session {