Improve device row in integration page (#26005)

Improve device row in config entry page

src/panels/config/integrations/ha-config-entry-device-row.ts

@@ -1,9 +1,9 @@
 import {
-  mdiCogOutline,
   mdiDelete,
   mdiDevices,
   mdiDotsVertical,
   mdiPencil,
+  mdiShapeOutline,
   mdiStopCircleOutline,
   mdiTransitConnectionVariant,
 } from "@mdi/js";
@@ -58,111 +58,118 @@ class HaConfigEntryDeviceRow extends LitElement {
       area ? area.name : undefined,
     ].filter(Boolean);
 
-    return html`<ha-md-list-item @click=${this.narrow ? this._handleNavigateToDevice : undefined} class=${classMap({ disabled: Boolean(device.disabled_by) })}>
-      <ha-svg-icon .path=${device.entry_type === "service" ? mdiTransitConnectionVariant : mdiDevices} slot="start"></ha-svg-icon>
-      <div slot="headline"></div>${computeDeviceNameDisplay(device, this.hass)}</div>
+    return html`<ha-md-list-item
+      type="button"
+      @click=${this._handleNavigateToDevice}
+      class=${classMap({ disabled: Boolean(device.disabled_by) })}
+    >
+      <ha-svg-icon
+        .path=${device.entry_type === "service"
+          ? mdiTransitConnectionVariant
+          : mdiDevices}
+        slot="start"
+      ></ha-svg-icon>
+      <div slot="headline">${computeDeviceNameDisplay(device, this.hass)}</div>
       <span slot="supporting-text"
         >${supportingText.join(" • ")}
         ${supportingText.length && entities.length ? " • " : nothing}
-        ${
-          entities.length
-            ? this.narrow
-              ? this.hass.localize(
-                  "ui.panel.config.integrations.config_entry.entities",
-                  { count: entities.length }
-                )
-              : html`<a
-                  href=${`/config/entities/?historyBack=1&device=${device.id}`}
-                  >${this.hass.localize(
-                    "ui.panel.config.integrations.config_entry.entities",
-                    { count: entities.length }
-                  )}</a
-                >`
-            : nothing
-        }</span
+        ${entities.length
+          ? this.hass.localize(
+              "ui.panel.config.integrations.config_entry.entities",
+              { count: entities.length }
+            )
+          : nothing}</span
       >
-      ${
-        !this.narrow
-          ? html`<ha-icon-button-next
-              slot="end"
-              @click=${this._handleNavigateToDevice}
-            >
-            </ha-icon-button-next>`
-          : nothing
-      }
-      </ha-icon-button>
+      ${!this.narrow
+        ? html`<ha-icon-next slot="end"> </ha-icon-next>`
+        : nothing}
       <div class="vertical-divider" slot="end" @click=${stopPropagation}></div>
-      ${
-        !this.narrow
-          ? html`<ha-icon-button
-              slot="end"
-              @click=${this._handleConfigureDevice}
-              .path=${mdiPencil}
-              .label=${this.hass.localize(
-                "ui.panel.config.integrations.config_entry.device.configure"
-              )}
-            ></ha-icon-button>`
-          : nothing
-      }
-      </ha-icon-button>
-      <ha-md-button-menu positioning="popover" slot="end" @click=${stopPropagation}>
+      ${!this.narrow
+        ? html`<ha-icon-button
+            slot="end"
+            @click=${this._handleEditDevice}
+            .path=${mdiPencil}
+            .label=${this.hass.localize(
+              "ui.panel.config.integrations.config_entry.device.edit"
+            )}
+          ></ha-icon-button>`
+        : nothing}
+
+      <ha-md-button-menu
+        positioning="popover"
+        slot="end"
+        @click=${stopPropagation}
+      >
         <ha-icon-button
           slot="trigger"
           .label=${this.hass.localize("ui.common.menu")}
           .path=${mdiDotsVertical}
         ></ha-icon-button>
-        ${
-          this.narrow
-            ? html`<ha-md-menu-item @click=${this._handleConfigureDevice}>
-                <ha-svg-icon .path=${mdiCogOutline} slot="start"></ha-svg-icon>
-                ${this.hass.localize(
-                  "ui.panel.config.integrations.config_entry.device.configure"
-                )}
-              </ha-md-menu-item>`
-            : nothing
-        }
-        <ha-md-menu-item class=${device.disabled_by !== "user" ? "warning" : ""} @click=${this._handleDisableDevice} .disabled=${device.disabled_by !== "user" && device.disabled_by}>
-          <ha-svg-icon .path=${mdiStopCircleOutline} slot="start"></ha-svg-icon>
-          
-          ${
-            device.disabled_by && device.disabled_by !== "user"
-              ? this.hass.localize(
-                  "ui.dialogs.device-registry-detail.enabled_cause",
-                  {
-                    type: this.hass.localize(
-                      `ui.dialogs.device-registry-detail.type.${
-                        device.entry_type || "device"
-                      }`
-                    ),
-                    cause: this.hass.localize(
-                      `config_entry.disabled_by.${device.disabled_by}`
-                    ),
-                  }
-                )
-              : device.disabled_by
-                ? this.hass.localize(
-                    "ui.panel.config.integrations.config_entry.device.enable"
-                  )
-                : this.hass.localize(
-                    "ui.panel.config.integrations.config_entry.device.disable"
-                  )
-          }
-
-
-        </ha-md-menu-item>
-        ${
-          this.entry.supports_remove_device
-            ? html` <ha-md-menu-item
-                class="warning"
-                @click=${this._handleDeleteDevice}
+        ${this.narrow
+          ? html`<ha-md-menu-item @click=${this._handleEditDevice}>
+              <ha-svg-icon .path=${mdiPencil} slot="start"></ha-svg-icon>
+              ${this.hass.localize(
+                "ui.panel.config.integrations.config_entry.device.edit"
+              )}
+            </ha-md-menu-item>`
+          : nothing}
+        ${entities.length
+          ? html`
+              <ha-md-menu-item
+                href=${`/config/entities/?historyBack=1&device=${device.id}`}
               >
-                <ha-svg-icon .path=${mdiDelete} slot="start"></ha-svg-icon>
+                <ha-svg-icon
+                  .path=${mdiShapeOutline}
+                  slot="start"
+                ></ha-svg-icon>
                 ${this.hass.localize(
-                  "ui.panel.config.integrations.config_entry.device.delete"
+                  `ui.panel.config.integrations.config_entry.entities`,
+                  { count: entities.length }
                 )}
-              </ha-md-menu-item>`
-            : nothing
-        }
+                <ha-icon-next slot="end"></ha-icon-next>
+              </ha-md-menu-item>
+            `
+          : nothing}
+        <ha-md-menu-item
+          class=${device.disabled_by !== "user" ? "warning" : ""}
+          @click=${this._handleDisableDevice}
+          .disabled=${device.disabled_by !== "user" && device.disabled_by}
+        >
+          <ha-svg-icon .path=${mdiStopCircleOutline} slot="start"></ha-svg-icon>
+
+          ${device.disabled_by && device.disabled_by !== "user"
+            ? this.hass.localize(
+                "ui.dialogs.device-registry-detail.enabled_cause",
+                {
+                  type: this.hass.localize(
+                    `ui.dialogs.device-registry-detail.type.${
+                      device.entry_type || "device"
+                    }`
+                  ),
+                  cause: this.hass.localize(
+                    `config_entry.disabled_by.${device.disabled_by}`
+                  ),
+                }
+              )
+            : device.disabled_by
+              ? this.hass.localize(
+                  "ui.panel.config.integrations.config_entry.device.enable"
+                )
+              : this.hass.localize(
+                  "ui.panel.config.integrations.config_entry.device.disable"
+                )}
+        </ha-md-menu-item>
+        ${this.entry.supports_remove_device
+          ? html`<ha-md-menu-item
+              class="warning"
+              @click=${this._handleDeleteDevice}
+            >
+              <ha-svg-icon .path=${mdiDelete} slot="start"></ha-svg-icon>
+              ${this.hass.localize(
+                "ui.panel.config.integrations.config_entry.device.delete"
+              )}
+            </ha-md-menu-item>`
+          : nothing}
       </ha-md-button-menu>
     </ha-md-list-item> `;
   }
@@ -170,7 +177,7 @@ class HaConfigEntryDeviceRow extends LitElement {
   private _getEntities = (): EntityRegistryEntry[] =>
     this.entities?.filter((entity) => entity.device_id === this.device.id);
 
-  private _handleConfigureDevice(ev: MouseEvent) {
+  private _handleEditDevice(ev: MouseEvent) {
     ev.stopPropagation(); // Prevent triggering the click handler on the list item
     showDeviceRegistryDetailDialog(this, {
       device: this.device,
@@ -295,6 +302,8 @@ class HaConfigEntryDeviceRow extends LitElement {
       }
       ha-md-list-item {
         --md-list-item-leading-space: 56px;
+        --md-ripple-hover-color: transparent;
+        --md-ripple-pressed-color: transparent;
       }
       .disabled {
         opacity: 0.5;

src/translations/en.json

@@ -5383,6 +5383,7 @@
               "confirm_disable_title": "Disable device?",
               "confirm_disable_message": "Are you sure you want to disable {name} and all of its entities?",
               "configure": "Configure device",
+              "edit": "Edit device",
               "delete": "Remove device"
             },
             "devices": "{count} {count, plural,\n  one {device}\n  other {devices}\n}",