Add icons to device action overflow menu (#13455)

* Add icons to device action overflow menu

* Update size of meta icon

* Tweak naming as suggest by Paulus

* Missed on suggestion, also adjusted

* Delete device -> Delete

* View network

* Rename key

* Prettier

Co-authored-by: Zack <zackbarett@hey.com>

src/panels/config/devices/device-detail/integration-elements/mqtt/device-actions.ts

@@ -1,3 +1,4 @@
+import { mdiInformation } from "@mdi/js";
 import type { DeviceRegistryEntry } from "../../../../../../data/device_registry";
 import type { DeviceAction } from "../../../ha-config-device-page";
 import { showMQTTDeviceDebugInfoDialog } from "./show-dialog-mqtt-device-debug-info";
@@ -8,6 +9,7 @@ export const getMQTTDeviceActions = (
 ): DeviceAction[] => [
   {
     label: "MQTT Info",
+    icon: mdiInformation,
     action: async () => showMQTTDeviceDebugInfoDialog(el, { device }),
   },
 ];

src/panels/config/devices/device-detail/integration-elements/zha/device-actions.ts

@@ -1,3 +1,11 @@
+import {
+  mdiCogRefresh,
+  mdiDrawPen,
+  mdiFamilyTree,
+  mdiFileTree,
+  mdiGroup,
+  mdiPlus,
+} from "@mdi/js";
 import { navigate } from "../../../../../../common/navigate";
 import type { DeviceRegistryEntry } from "../../../../../../data/device_registry";
 import { fetchZHADevice } from "../../../../../../data/zha";
@@ -33,6 +41,7 @@ export const getZHADeviceActions = async (
   if (!zhaDevice.active_coordinator) {
     actions.push({
       label: hass.localize("ui.dialogs.zha_device_info.buttons.reconfigure"),
+      icon: mdiCogRefresh,
       action: () => showZHAReconfigureDeviceDialog(el, { device: zhaDevice }),
     });
   }
@@ -46,12 +55,14 @@ export const getZHADeviceActions = async (
       ...[
         {
           label: hass.localize("ui.dialogs.zha_device_info.buttons.add"),
+          icon: mdiPlus,
           action: () => navigate(`/config/zha/add/${zhaDevice!.ieee}`),
         },
         {
           label: hass.localize(
             "ui.dialogs.zha_device_info.buttons.device_children"
           ),
+          icon: mdiFileTree,
           action: () => showZHADeviceChildrenDialog(el, { device: zhaDevice! }),
         },
       ]
@@ -64,16 +75,17 @@ export const getZHADeviceActions = async (
         label: hass.localize(
           "ui.dialogs.zha_device_info.buttons.zigbee_information"
         ),
+        icon: mdiDrawPen,
         action: () => showZHADeviceZigbeeInfoDialog(el, { device: zhaDevice }),
       },
       {
         label: hass.localize("ui.dialogs.zha_device_info.buttons.clusters"),
+        icon: mdiGroup,
         action: () => showZHAClusterDialog(el, { device: zhaDevice }),
       },
       {
-        label: hass.localize(
+        label: hass.localize("ui.dialogs.zha_device_info.buttons.view_network"),
-          "ui.dialogs.zha_device_info.buttons.view_in_visualization"
+        icon: mdiFamilyTree,
-        ),
         action: () =>
           navigate(`/config/zha/visualization/${zhaDevice!.device_reg_id}`),
       },

src/panels/config/devices/device-detail/integration-elements/zwave_js/device-actions.ts

@@ -1,3 +1,11 @@
+import {
+  mdiChatQuestion,
+  mdiCog,
+  mdiDeleteForever,
+  mdiHospitalBox,
+  mdiInformation,
+  mdiUpload,
+} from "@mdi/js";
 import { getConfigEntries } from "../../../../../../data/config_entries";
 import { DeviceRegistryEntry } from "../../../../../../data/device_registry";
 import {
@@ -44,12 +52,14 @@ export const getZwaveDeviceActions = async (
       label: hass.localize(
         "ui.panel.config.zwave_js.device_info.device_config"
       ),
+      icon: mdiCog,
       href: `/config/zwave_js/node_config/${device.id}?config_entry=${entryId}`,
     },
     {
       label: hass.localize(
         "ui.panel.config.zwave_js.device_info.reinterview_device"
       ),
+      icon: mdiChatQuestion,
       action: () =>
         showZWaveJSReinterviewNodeDialog(el, {
           device_id: device.id,
@@ -57,6 +67,7 @@ export const getZwaveDeviceActions = async (
     },
     {
       label: hass.localize("ui.panel.config.zwave_js.device_info.heal_node"),
+      icon: mdiHospitalBox,
       action: () =>
         showZWaveJSHealNodeDialog(el, {
           device,
@@ -66,6 +77,7 @@ export const getZwaveDeviceActions = async (
       label: hass.localize(
         "ui.panel.config.zwave_js.device_info.remove_failed"
       ),
+      icon: mdiDeleteForever,
       action: () =>
         showZWaveJSRemoveFailedNodeDialog(el, {
           device_id: device.id,
@@ -75,6 +87,7 @@ export const getZwaveDeviceActions = async (
       label: hass.localize(
         "ui.panel.config.zwave_js.device_info.node_statistics"
       ),
+      icon: mdiInformation,
       action: () =>
         showZWaveJSNodeStatisticsDialog(el, {
           device,
@@ -97,6 +110,7 @@ export const getZwaveDeviceActions = async (
       label: hass.localize(
         "ui.panel.config.zwave_js.device_info.update_firmware"
       ),
+      icon: mdiUpload,
       action: async () => {
         if (
           isNodeFirmwareUpdateInProgress ||

src/panels/config/devices/device-detail/integration-elements/zwave_js/ha-device-info-zwave_js.ts

@@ -102,7 +102,7 @@ export class HaDeviceInfoZWaveJS extends SubscribeMixin(LitElement) {
             `
           : ""}
         <div>
-          ${this.hass.localize("ui.panel.config.zwave_js.common.node_id")}:
+          ${this.hass.localize("ui.panel.config.zwave_js.device_info.node_id")}:
           ${this._node.node_id}
         </div>
         ${!this._node.is_controller_node

src/panels/config/devices/ha-config-device-page.ts

@@ -1,5 +1,8 @@
 import {
+  mdiCog,
+  mdiDelete,
   mdiDotsVertical,
+  mdiDownload,
   mdiOpenInNew,
   mdiPencil,
   mdiPlusCircle,
@@ -79,6 +82,7 @@ export interface DeviceAction {
   href?: string;
   action?: (ev: any) => void;
   label: string;
+  icon?: string;
   trailingIcon?: string;
   classes?: string;
 }
@@ -714,8 +718,20 @@ export class HaConfigDevicePage extends LitElement {
                                 class=${ifDefined(firstDeviceAction!.classes)}
                                 .action=${firstDeviceAction!.action}
                                 @click=${this._deviceActionClicked}
+                                graphic="icon"
                               >
                                 ${firstDeviceAction!.label}
+                                ${firstDeviceAction!.icon
+                                  ? html`
+                                      <ha-svg-icon
+                                        class=${ifDefined(
+                                          firstDeviceAction!.classes
+                                        )}
+                                        .path=${firstDeviceAction!.icon}
+                                        slot="graphic"
+                                      ></ha-svg-icon>
+                                    `
+                                  : ""}
                                 ${firstDeviceAction!.trailingIcon
                                   ? html`
                                       <ha-svg-icon
@@ -747,11 +763,27 @@ export class HaConfigDevicePage extends LitElement {
                                           )}
                                           .action=${deviceAction.action}
                                           @click=${this._deviceActionClicked}
+                                          graphic="icon"
+                                          .hasMeta=${Boolean(
+                                            deviceAction.trailingIcon
+                                          )}
                                         >
                                           ${deviceAction.label}
+                                          ${deviceAction.icon
+                                            ? html`
+                                                <ha-svg-icon
+                                                  class=${ifDefined(
+                                                    deviceAction.classes
+                                                  )}
+                                                  .path=${deviceAction.icon}
+                                                  slot="graphic"
+                                                ></ha-svg-icon>
+                                              `
+                                            : ""}
                                           ${deviceAction.trailingIcon
                                             ? html`
                                                 <ha-svg-icon
+                                                  slot="meta"
                                                   .path=${deviceAction.trailingIcon}
                                                 ></ha-svg-icon>
                                               `
@@ -869,6 +901,7 @@ export class HaConfigDevicePage extends LitElement {
         links as { link: string; domain: string }[]
       ).map((link) => ({
         href: link.link,
+        icon: mdiDownload,
         action: (ev) => this._signUrl(ev),
         label:
           links.length > 1
@@ -914,6 +947,7 @@ export class HaConfigDevicePage extends LitElement {
           );
         },
         classes: "warning",
+        icon: mdiDelete,
         label:
           buttons.length > 1
             ? this.hass.localize(
@@ -950,10 +984,9 @@ export class HaConfigDevicePage extends LitElement {
     if (configurationUrl) {
       deviceActions.push({
         href: configurationUrl,
+        icon: mdiCog,
         label: this.hass.localize(
-          `ui.panel.config.devices.open_configuration_url_${
+          "ui.panel.config.devices.open_configuration_url"
-            device.entry_type || "device"
-          }`
         ),
         trailingIcon: mdiOpenInNew,
       });
@@ -1376,6 +1409,13 @@ export class HaConfigDevicePage extends LitElement {
 
         ha-svg-icon[slot="trailingIcon"] {
           display: block;
+          width: 18px;
+          height: 18px;
+        }
+
+        ha-svg-icon[slot="meta"] {
+          width: 18px;
+          height: 18px;
         }
 
         .items {

src/translations/en.json

@@ -1006,13 +1006,13 @@
         "device_signature": "Zigbee device signature",
         "device_children": "Zigbee device children",
         "buttons": {
-          "add": "Add Devices via this device",
+          "add": "Add devices via this device",
-          "remove": "Remove Device",
+          "remove": "Remove",
-          "clusters": "Manage Clusters",
+          "clusters": "Manage clusters",
-          "reconfigure": "Reconfigure Device",
+          "reconfigure": "Reconfigure",
-          "zigbee_information": "Zigbee device signature",
+          "zigbee_information": "Zigbee signature",
-          "device_children": "View Children",
+          "device_children": "View children",
-          "view_in_visualization": "View in Visualization"
+          "view_network": "View network"
         },
         "services": {
           "reconfigure": "Reconfigure ZHA device (heal device). Use this if you are having issues with the device. If the device in question is a battery powered device please ensure it is awake and accepting commands when you use this service.",
@@ -2558,11 +2558,10 @@
             "config_entry": "Config entry"
           },
           "enabled_description": "Disabled devices will not be shown and entities belonging to the device will be disabled and not added to Home Assistant.",
-          "open_configuration_url_device": "Visit device",
+          "open_configuration_url": "Visit",
-          "open_configuration_url_service": "Visit service",
           "download_diagnostics": "Download diagnostics",
           "download_diagnostics_integration": "Download {integration} diagnostics",
-          "delete_device": "Delete device",
+          "delete_device": "Delete",
           "delete_device_integration": "Remove {integration} from device",
           "type": {
             "device_heading": "Device",
@@ -3164,18 +3163,19 @@
           },
           "device_info": {
             "zwave_info": "Z-Wave Info",
-            "node_status": "Device Status",
+            "node_id": "ID",
-            "node_ready": "Device Ready",
+            "node_status": "Status",
-            "device_config": "Configure Device",
+            "node_ready": "Ready",
-            "reinterview_device": "Re-interview Device",
+            "device_config": "Configure",
-            "heal_node": "Heal Device",
+            "reinterview_device": "Re-interview",
-            "remove_failed": "Remove Failed Device",
+            "heal_node": "Heal",
-            "update_firmware": "Update Device Firmware",
+            "remove_failed": "Remove failed",
-            "highest_security": "Highest Security",
+            "update_firmware": "Update",
+            "highest_security": "Highest security",
             "unknown": "Unknown",
             "zwave_plus": "Z-Wave Plus",
             "zwave_plus_version": "Version {version}",
-            "node_statistics": "Show Device Statistics"
+            "node_statistics": "Statistics"
           },
           "node_statistics": {
             "title": "Device Statistics",