Remove tabs from scene and script edit page (#13592)

src/panels/config/scene/ha-scene-dashboard.ts

@@ -11,9 +11,13 @@ import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
 import memoizeOne from "memoize-one";
-import { fireEvent } from "../../../common/dom/fire_event";
+import { fireEvent, HASSDomEvent } from "../../../common/dom/fire_event";
 import { computeStateName } from "../../../common/entity/compute_state_name";
-import { DataTableColumnContainer } from "../../../components/data-table/ha-data-table";
+import { navigate } from "../../../common/navigate";
+import {
+  DataTableColumnContainer,
+  RowClickedEvent,
+} from "../../../components/data-table/ha-data-table";
 import "../../../components/ha-button-related-filter-menu";
 import "../../../components/ha-fab";
 import "../../../components/ha-icon-button";
@@ -165,6 +169,8 @@ class HaSceneDashboard extends LitElement {
         )}
         @clear-filter=${this._clearFilter}
         hasFab
+        clickable
+        @row-click=${this._handleRowClicked}
       >
         <ha-icon-button
           slot="toolbar-icon"
@@ -196,6 +202,14 @@ class HaSceneDashboard extends LitElement {
     `;
   }
 
+  private _handleRowClicked(ev: HASSDomEvent<RowClickedEvent>) {
+    const scene = this.scenes.find((a) => a.entity_id === ev.detail.id);
+
+    if (scene?.attributes.id) {
+      navigate(`/config/scene/edit/${scene?.attributes.id}`);
+    }
+  }
+
   private _relatedFilterChanged(ev: CustomEvent) {
     this._filterValue = ev.detail.value;
     if (!this._filterValue) {

src/panels/config/scene/ha-scene-editor.ts

@@ -63,13 +63,13 @@ import {
   showAlertDialog,
   showConfirmationDialog,
 } from "../../../dialogs/generic/show-dialog-box";
+import "../../../layouts/hass-subpage";
 import { KeyboardShortcutMixin } from "../../../mixins/keyboard-shortcut-mixin";
 import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
 import { haStyle } from "../../../resources/styles";
 import { HomeAssistant, Route } from "../../../types";
 import { showToast } from "../../../util/toast";
 import "../ha-config-section";
-import { configSections } from "../ha-panel-config";
 
 interface DeviceEntities {
   id: string;
@@ -214,17 +214,16 @@ export class HaSceneEditor extends SubscribeMixin(
       this._deviceEntityLookup,
       this._deviceRegistryEntries
     );
-    const name = this._scene
-      ? computeStateName(this._scene)
-      : this.hass.localize("ui.panel.config.scene.editor.default_name");
 
     return html`
-      <hass-tabs-subpage
+      <hass-subpage
         .hass=${this.hass}
         .narrow=${this.narrow}
         .route=${this.route}
         .backCallback=${this._backTapped}
-        .tabs=${configSections.automations}
+        .header=${this._scene
+          ? computeStateName(this._scene)
+          : this.hass.localize("ui.panel.config.scene.editor.default_name")}
       >
         <ha-button-menu
           corner="BOTTOM_START"
@@ -272,7 +271,6 @@ export class HaSceneEditor extends SubscribeMixin(
           </mwc-list-item>
         </ha-button-menu>
         ${this._errors ? html` <div class="errors">${this._errors}</div> ` : ""}
-        ${this.narrow ? html` <span slot="header">${name}</span> ` : ""}
         <div
           id="root"
           class=${classMap({
@@ -281,15 +279,7 @@ export class HaSceneEditor extends SubscribeMixin(
         >
           ${this._config
             ? html`
-                <ha-config-section vertical .isWide=${this.isWide}>
-                  ${!this.narrow
-                    ? html` <span slot="header">${name}</span> `
-                    : ""}
-                  <div slot="introduction">
-                    ${this.hass.localize(
-                      "ui.panel.config.scene.editor.introduction"
-                    )}
-                  </div>
+                <div class="container">
                   <ha-card outlined>
                     <div class="card-content">
                       <ha-textfield
@@ -322,7 +312,7 @@ export class HaSceneEditor extends SubscribeMixin(
                       </ha-area-picker>
                     </div>
                   </ha-card>
-                </ha-config-section>
+                </div>
 
                 <ha-config-section vertical .isWide=${this.isWide}>
                   <div slot="header">
@@ -486,7 +476,7 @@ export class HaSceneEditor extends SubscribeMixin(
         >
           <ha-svg-icon slot="icon" .path=${mdiContentSave}></ha-svg-icon>
         </ha-fab>
-      </hass-tabs-subpage>
+      </hass-subpage>
     `;
   }
 
@@ -963,6 +953,16 @@ export class HaSceneEditor extends SubscribeMixin(
         ha-card {
           overflow: hidden;
         }
+        .container {
+          display: flex;
+          justify-content: center;
+          margin-top: 24px;
+        }
+        .container > * {
+          max-width: 1040px;
+          flex: 1 1 auto;
+        }
+
         .errors {
           padding: 20px;
           font-weight: bold;

src/panels/config/script/ha-script-editor.ts

@@ -18,7 +18,7 @@ import {
   PropertyValues,
   TemplateResult,
 } from "lit";
-import { property, state, query } from "lit/decorators";
+import { property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import memoizeOne from "memoize-one";
 import { computeObjectId } from "../../../common/entity/compute_object_id";
@@ -51,13 +51,13 @@ import {
 } from "../../../data/script";
 import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box";
 import "../../../layouts/ha-app-layout";
+import "../../../layouts/hass-subpage";
 import { KeyboardShortcutMixin } from "../../../mixins/keyboard-shortcut-mixin";
 import { haStyle } from "../../../resources/styles";
 import type { HomeAssistant, Route } from "../../../types";
 import { documentationUrl } from "../../../util/documentation-url";
 import { showToast } from "../../../util/toast";
 import { HaDeviceAction } from "../automation/action/types/ha-automation-action-device_id";
-import { configSections } from "../ha-panel-config";
 import "./blueprint-script-editor";
 
 export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
@@ -168,12 +168,12 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
     };
 
     return html`
-      <hass-tabs-subpage
+      <hass-subpage
         .hass=${this.hass}
         .narrow=${this.narrow}
         .route=${this.route}
         .backCallback=${this._backTapped}
-        .tabs=${configSections.automations}
+        .header=${!this._config?.alias ? "" : this._config.alias}
       >
         <ha-button-menu
           corner="BOTTOM_START"
@@ -255,9 +255,6 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
             </ha-svg-icon>
           </mwc-list-item>
         </ha-button-menu>
-        ${this.narrow
-          ? html`<span slot="header">${this._config?.alias}</span>`
-          : ""}
         <div
           class="content ${classMap({
             "yaml-mode": this._mode === "yaml",
@@ -415,7 +412,7 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
         >
           <ha-svg-icon slot="icon" .path=${mdiContentSave}></ha-svg-icon>
         </ha-fab>
-      </hass-tabs-subpage>
+      </hass-subpage>
     `;
   }
 

src/panels/config/script/ha-script-picker.ts

@@ -11,10 +11,14 @@ import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { formatDateTime } from "../../../common/datetime/format_date_time";
-import { fireEvent } from "../../../common/dom/fire_event";
+import { fireEvent, HASSDomEvent } from "../../../common/dom/fire_event";
 import { computeStateName } from "../../../common/entity/compute_state_name";
+import { navigate } from "../../../common/navigate";
 import { computeRTL } from "../../../common/util/compute_rtl";
-import { DataTableColumnContainer } from "../../../components/data-table/ha-data-table";
+import {
+  DataTableColumnContainer,
+  RowClickedEvent,
+} from "../../../components/data-table/ha-data-table";
 import "../../../components/ha-button-related-filter-menu";
 import "../../../components/ha-fab";
 import "../../../components/ha-icon-button";
@@ -191,6 +195,8 @@ class HaScriptPicker extends LitElement {
         )}
         @clear-filter=${this._clearFilter}
         hasFab
+        clickable
+        @row-click=${this._handleRowClicked}
       >
         <ha-icon-button
           slot="toolbar-icon"
@@ -241,6 +247,10 @@ class HaScriptPicker extends LitElement {
     this._filterValue = undefined;
   }
 
+  private _handleRowClicked(ev: HASSDomEvent<RowClickedEvent>) {
+    navigate(`/config/script/edit/${ev.detail.id}`);
+  }
+
   private _runScript = async (ev) => {
     ev.stopPropagation();
     const script = ev.currentTarget.script as HassEntity;

src/translations/en.json

@@ -2331,7 +2331,6 @@
             }
           },
           "editor": {
-            "introduction": "Use scenes to bring your home to life.",
             "default_name": "New Scene",
             "load_error_not_editable": "Only scenes in scenes.yaml are editable.",
             "load_error_unknown": "Error loading scene ({err_no}).",