Migrate analytics dropdown to ha-dropdown (#28038)

* Migrate analytics dropdown

* Apply suggestion from @MindFreeze

* Apply suggestion from @MindFreeze

---------

Co-authored-by: Petar Petrov <[email protected]>

Author: silamon

src/panels/config/core/ha-config-section-analytics.ts

@@ -2,9 +2,7 @@ import { mdiDotsVertical, mdiDownload } from "@mdi/js";
 import type { TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
-import "../../../components/ha-button-menu";
 import "../../../components/ha-icon-button";
-import "../../../components/ha-list-item";
 import "../../../components/ha-svg-icon";
 import { getSignedPath } from "../../../data/auth";
 import "../../../layouts/hass-subpage";
@@ -14,6 +12,8 @@ import {
   downloadFileSupported,
   fileDownload,
 } from "../../../util/file_download";
+import "../../../components/ha-dropdown-item";
+import "../../../components/ha-dropdown";
 
 @customElement("ha-config-section-analytics")
 class HaConfigSectionAnalytics extends LitElement {
@@ -33,22 +33,19 @@ class HaConfigSectionAnalytics extends LitElement {
       >
         ${downloadFileSupported(this.hass)
           ? html`
-              <ha-button-menu
-                @action=${this._handleOverflowAction}
+              <ha-dropdown
+                @wa-select=${this._handleOverflowAction}
                 slot="toolbar-icon"
               >
                 <ha-icon-button slot="trigger" .path=${mdiDotsVertical}>
                 </ha-icon-button>
-                <ha-list-item graphic="icon">
-                  <ha-svg-icon
-                    slot="graphic"
-                    .path=${mdiDownload}
-                  ></ha-svg-icon>
+                <ha-dropdown-item .value=${"download_device_info"}>
+                  <ha-svg-icon slot="icon" .path=${mdiDownload}></ha-svg-icon>
                   ${this.hass.localize(
                     "ui.panel.config.analytics.download_device_info"
                   )}
-                </ha-list-item>
-              </ha-button-menu>
+                </ha-dropdown-item>
+              </ha-dropdown>
             `
           : nothing}
         <div class="content">
@@ -58,9 +55,16 @@ class HaConfigSectionAnalytics extends LitElement {
     `;
   }
 
-  private async _handleOverflowAction(): Promise<void> {
-    const signedPath = await getSignedPath(this.hass, "/api/analytics/devices");
-    fileDownload(signedPath.path);
+  private async _handleOverflowAction(
+    ev: CustomEvent<{ item: { value: string } }>
+  ): Promise<void> {
+    if (ev.detail.item.value === "download_device_info") {
+      const signedPath = await getSignedPath(
+        this.hass,
+        "/api/analytics/devices"
+      );
+      fileDownload(signedPath.path);
+    }
   }
 
   static styles = css`