Remove tabs from area and device pages (#13600)

src/panels/config/areas/ha-config-area-page.ts

@@ -45,13 +45,14 @@ import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box
 import { showMoreInfoDialog } from "../../../dialogs/more-info/show-ha-more-info-dialog";
 import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
 import { haStyle } from "../../../resources/styles";
-import { HomeAssistant, Route } from "../../../types";
+import { HomeAssistant } from "../../../types";
 import "../../logbook/ha-logbook";
-import { configSections } from "../ha-panel-config";
 import {
   loadAreaRegistryDetailDialog,
   showAreaRegistryDetailDialog,
 } from "./show-dialog-area-registry-detail";
+import "../../../layouts/hass-error-screen";
+import "../../../layouts/hass-subpage";
 
 declare type NameAndEntity<EntityType extends HassEntity> = {
   name: string;
@@ -66,11 +67,9 @@ class HaConfigAreaPage extends SubscribeMixin(LitElement) {
 
   @property({ type: Boolean, reflect: true }) public narrow!: boolean;
 
-  @property() public isWide!: boolean;
+  @property({ type: Boolean }) public isWide!: boolean;
 
-  @property() public showAdvanced!: boolean;
+  @property({ type: Boolean }) public showAdvanced!: boolean;
-
-  @property() public route!: Route;
 
   @state() public _areas!: AreaRegistryEntry[];
 
@@ -242,43 +241,20 @@ class HaConfigAreaPage extends SubscribeMixin(LitElement) {
     }
 
     return html`
-      <hass-tabs-subpage
+      <hass-subpage
         .hass=${this.hass}
         .narrow=${this.narrow}
-        .tabs=${configSections.areas}
+        .header=${area.name}
-        .route=${this.route}
       >
-        ${this.narrow
-          ? html`<span slot="header"> ${area.name} </span>
         <ha-icon-button
           .path=${mdiPencil}
           .entry=${area}
           @click=${this._showSettings}
           slot="toolbar-icon"
-                .label=${this.hass.localize(
+          .label=${this.hass.localize("ui.panel.config.areas.edit_settings")}
-                  "ui.panel.config.areas.edit_settings"
+        ></ha-icon-button>
-                )}
-              ></ha-icon-button>`
-          : ""}
 
         <div class="container">
-          ${!this.narrow
-            ? html`
-                <div class="fullwidth">
-                  <h1>
-                    ${area.name}
-                    <ha-icon-button
-                      .path=${mdiPencil}
-                      .entry=${area}
-                      @click=${this._showSettings}
-                      .label=${this.hass.localize(
-                        "ui.panel.config.areas.edit_settings"
-                      )}
-                    ></ha-icon-button>
-                  </h1>
-                </div>
-              `
-            : ""}
           <div class="column">
             ${area.picture
               ? html`<div class="img-container">
@@ -504,7 +480,7 @@ class HaConfigAreaPage extends SubscribeMixin(LitElement) {
               : ""}
           </div>
         </div>
-      </hass-tabs-subpage>
+      </hass-subpage>
     `;
   }
 

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

@@ -60,12 +60,11 @@ import {
 import "../../../layouts/hass-error-screen";
 import "../../../layouts/hass-tabs-subpage";
 import { haStyle } from "../../../resources/styles";
-import type { HomeAssistant, Route } from "../../../types";
+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 { configSections } from "../ha-panel-config";
 import "./device-detail/ha-device-entities-card";
 import "./device-detail/ha-device-info-card";
 import { showDeviceAutomationDialog } from "./device-detail/show-dialog-device-automation";
@@ -73,6 +72,7 @@ import {
   loadDeviceRegistryDetailDialog,
   showDeviceRegistryDetailDialog,
 } from "./device-registry-detail/show-dialog-device-registry-detail";
+import "../../../layouts/hass-subpage";
 
 export interface EntityRegistryStateEntry extends EntityRegistryEntry {
   stateName?: string | null;
@@ -96,23 +96,21 @@ export interface DeviceAlert {
 export class HaConfigDevicePage extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public devices!: DeviceRegistryEntry[];
+  @property({ attribute: false }) public devices!: DeviceRegistryEntry[];
 
-  @property() public entries!: ConfigEntry[];
+  @property({ attribute: false }) public entries!: ConfigEntry[];
 
-  @property() public entities!: EntityRegistryEntry[];
+  @property({ attribute: false }) public entities!: EntityRegistryEntry[];
 
-  @property() public areas!: AreaRegistryEntry[];
+  @property({ attribute: false }) public areas!: AreaRegistryEntry[];
 
   @property() public deviceId!: string;
 
   @property({ type: Boolean, reflect: true }) public narrow!: boolean;
 
-  @property() public isWide!: boolean;
+  @property({ type: Boolean }) public isWide!: boolean;
 
-  @property() public showAdvanced!: boolean;
+  @property({ type: Boolean }) public showAdvanced!: boolean;
-
-  @property() public route!: Route;
 
   @state() private _related?: RelatedResult;
 
@@ -609,16 +607,12 @@ export class HaConfigDevicePage extends LitElement {
       : "";
 
     return html`
-      <hass-tabs-subpage
+      <hass-subpage
         .hass=${this.hass}
         .narrow=${this.narrow}
-        .tabs=${configSections.devices}
+        .header=${deviceName}
-        .route=${this.route}
       >
-        ${
+
-          this.narrow
-            ? html`
-                <span slot="header">${deviceName}</span>
                 <ha-icon-button
                   slot="toolbar-icon"
                   .path=${mdiPencil}
@@ -627,20 +621,11 @@ export class HaConfigDevicePage extends LitElement {
                     "ui.panel.config.devices.edit_settings"
                   )}
                 ></ha-icon-button>
-              `
-            : ""
-        }
         <div class="container">
           <div class="header fullwidth">
             ${
-              this.narrow
+              area
-                ? ""
+                ? html`<div class="header-name">
-                : html`
-                    <div class="header-name">
-                      <div>
-                        <h1>${deviceName}</h1>
-                        ${area
-                          ? html`
                     <a href="/config/areas/area/${area.area_id}"
                       >${this.hass.localize(
                         "ui.panel.config.integrations.config_entry.area",
@@ -648,18 +633,8 @@ export class HaConfigDevicePage extends LitElement {
                         area.name || "Unnamed Area"
                       )}</a
                     >
-                            `
+                  </div>`
-                          : ""}
+                : ""
-                      </div>
-                      <ha-icon-button
-                        .path=${mdiPencil}
-                        @click=${this._showSettings}
-                        .label=${this.hass.localize(
-                          "ui.panel.config.devices.edit_settings"
-                        )}
-                      ></ha-icon-button>
-                    </div>
-                  `
             }
                 <div class="header-right">
                   ${
@@ -859,7 +834,7 @@ export class HaConfigDevicePage extends LitElement {
             </div>
           </div>
         </ha-config-section>
-      </hass-tabs-subpage>    `;
+      </hass-subpage>    `;
   }
 
   private async _getDiagnosticButtons(requestId: number): Promise<void> {