Clean up imports and unopened tag on device config page (#21274)

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

@@ -1,6 +1,5 @@
 import { consume } from "@lit-labs/context";
 import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
-import "@material/mwc-list/mwc-list-item";
 import {
   mdiCog,
   mdiDelete,
@@ -10,8 +9,6 @@ import {
   mdiPencil,
   mdiPlusCircle,
 } from "@mdi/js";
-import "@polymer/paper-item/paper-item";
-import "@polymer/paper-item/paper-item-body";
 import {
   CSSResultGroup,
   LitElement,
@@ -24,7 +21,7 @@ import { customElement, property, state } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
 import memoizeOne from "memoize-one";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
-import { SENSOR_ENTITIES, ASSIST_ENTITIES } from "../../../common/const";
+import { ASSIST_ENTITIES, SENSOR_ENTITIES } from "../../../common/const";
 import { computeDomain } from "../../../common/entity/compute_domain";
 import { computeStateDomain } from "../../../common/entity/compute_state_domain";
 import { computeStateName } from "../../../common/entity/compute_state_name";
@@ -77,7 +74,6 @@ import type { HomeAssistant } from "../../../types";
 import { brandsUrl } from "../../../util/brands-url";
 import { fileDownload } from "../../../util/file_download";
 import "../../logbook/ha-logbook";
-import "../ha-config-section";
 import "./device-detail/ha-device-entities-card";
 import "./device-detail/ha-device-info-card";
 import "./device-detail/ha-device-via-devices-card";
@@ -665,25 +661,20 @@ export class HaConfigDevicePage extends LitElement {
         `
       : "";
 
-    return html`
+    return html` <hass-subpage
-      <hass-subpage
       .hass=${this.hass}
       .narrow=${this.narrow}
       .header=${deviceName}
     >
-
       <ha-icon-button
         slot="toolbar-icon"
         .path=${mdiPencil}
         @click=${this._showSettings}
-                  .label=${this.hass.localize(
+        .label=${this.hass.localize("ui.panel.config.devices.edit_settings")}
-                    "ui.panel.config.devices.edit_settings"
-                  )}
       ></ha-icon-button>
       <div class="container">
         <div class="header fullwidth">
-            ${
+          ${area
-              area
             ? html`<div class="header-name">
                 <a href="/config/areas/area/${area.area_id}"
                   >${this.hass.localize(
@@ -692,13 +683,10 @@ export class HaConfigDevicePage extends LitElement {
                   )}</a
                 >
               </div>`
-                : ""
+            : ""}
-            }
           <div class="header-right">
-                  ${
+            ${battery &&
-                    battery &&
+            (batteryDomain === "binary_sensor" || !isNaN(battery.state as any))
-                    (batteryDomain === "binary_sensor" ||
-                      !isNaN(battery.state as any))
               ? html`
                   <div class="battery">
                     ${batteryDomain === "sensor"
@@ -711,10 +699,8 @@ export class HaConfigDevicePage extends LitElement {
                     ></ha-battery-icon>
                   </div>
                 `
-                      : ""
+              : ""}
-                  }
+            ${integrations.length
-                  ${
-                    integrations.length
               ? html`
                   <img
                     alt=${domainToName(
@@ -732,14 +718,11 @@ export class HaConfigDevicePage extends LitElement {
                     @error=${this._onImageError}
                   />
                 `
-                      : ""
+              : ""}
-                  }
-
           </div>
         </div>
         <div class="column">
-              ${
+          ${this._deviceAlerts?.length
-                this._deviceAlerts?.length
             ? html`
                 <div>
                   ${this._deviceAlerts.map(
@@ -751,24 +734,17 @@ export class HaConfigDevicePage extends LitElement {
                   )}
                 </div>
               `
-                  : ""
+            : ""}
-              }
+          <ha-device-info-card .hass=${this.hass} .device=${device}>
-              <ha-device-info-card
-                .hass=${this.hass}
-                .device=${device}
-              >
             ${deviceInfo}
-                ${
+            ${firstDeviceAction || actions.length
-                  firstDeviceAction || actions.length
               ? html`
                   <div class="card-actions" slot="actions">
                     <div>
                       <a
                         href=${ifDefined(firstDeviceAction!.href)}
                         rel=${ifDefined(
-                                firstDeviceAction!.target
+                          firstDeviceAction!.target ? "noreferrer" : undefined
-                                  ? "noreferrer"
-                                  : undefined
                         )}
                         target=${ifDefined(firstDeviceAction!.target)}
                       >
@@ -782,9 +758,7 @@ export class HaConfigDevicePage extends LitElement {
                           ${firstDeviceAction!.icon
                             ? html`
                                 <ha-svg-icon
-                                        class=${ifDefined(
+                                  class=${ifDefined(firstDeviceAction!.classes)}
-                                          firstDeviceAction!.classes
-                                        )}
                                   .path=${firstDeviceAction!.icon}
                                   slot="graphic"
                                 ></ha-svg-icon>
@@ -807,9 +781,7 @@ export class HaConfigDevicePage extends LitElement {
                           <ha-button-menu>
                             <ha-icon-button
                               slot="trigger"
-                                    .label=${this.hass.localize(
+                              .label=${this.hass.localize("ui.common.menu")}
-                                      "ui.common.menu"
-                                    )}
                               .path=${mdiDotsVertical}
                             ></ha-icon-button>
                             ${actions.map((deviceAction) => {
@@ -818,17 +790,13 @@ export class HaConfigDevicePage extends LitElement {
                                 .action=${deviceAction.action}
                                 @click=${this._deviceActionClicked}
                                 graphic="icon"
-                                      .hasMeta=${Boolean(
+                                .hasMeta=${Boolean(deviceAction.trailingIcon)}
-                                        deviceAction.trailingIcon
-                                      )}
                               >
                                 ${deviceAction.label}
                                 ${deviceAction.icon
                                   ? html`
                                       <ha-svg-icon
-                                              class=${ifDefined(
+                                        class=${ifDefined(deviceAction.classes)}
-                                                deviceAction.classes
-                                              )}
                                         .path=${deviceAction.icon}
                                         slot="graphic"
                                       ></ha-svg-icon>
@@ -846,9 +814,7 @@ export class HaConfigDevicePage extends LitElement {
                               return deviceAction.href
                                 ? html`<a
                                     href=${deviceAction.href}
-                                          target=${ifDefined(
+                                    target=${ifDefined(deviceAction.target)}
-                                            deviceAction.target
-                                          )}
                                     rel=${ifDefined(
                                       deviceAction.target
                                         ? "noreferrer"
@@ -863,8 +829,7 @@ export class HaConfigDevicePage extends LitElement {
                       : ""}
                   </div>
                 `
-                    : ""
+              : ""}
-                }
           </ha-device-info-card>
           ${!this.narrow ? [automationCard, sceneCard, scriptCard] : ""}
         </div>
@@ -904,8 +869,7 @@ export class HaConfigDevicePage extends LitElement {
         </div>
         <div class="column">
           ${this.narrow ? [automationCard, sceneCard, scriptCard] : ""}
-            ${
+          ${isComponentLoaded(this.hass, "logbook")
-              isComponentLoaded(this.hass, "logbook")
             ? html`
                 <ha-card outlined>
                   <h1 class="card-header">
@@ -922,12 +886,10 @@ export class HaConfigDevicePage extends LitElement {
                   ></ha-logbook>
                 </ha-card>
               `
-                : ""
+            : ""}
-            }
         </div>
       </div>
-        </ha-config-section>
+    </hass-subpage>`;
-      </hass-subpage>    `;
   }
 
   private async _getDiagnosticButtons(requestId: number): Promise<void> {