Migrate scene config to data table (#5351)

* Migrate scene config to data table

* Remove unused styles

* Update ha-scene-dashboard.ts

* Lint + help

* Update ha-scene-dashboard.ts

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

@@ -1,30 +1,28 @@
-import {
-  LitElement,
-  TemplateResult,
-  html,
-  CSSResultArray,
-  css,
-  property,
-  customElement,
-} from "lit-element";
 import "@polymer/paper-icon-button/paper-icon-button";
-import "@polymer/paper-item/paper-item-body";
 import "@polymer/paper-tooltip/paper-tooltip";
-import "../../../layouts/hass-tabs-subpage";
+import {
-
+  css,
-import "../../../components/ha-card";
+  CSSResultArray,
-import "../../../components/ha-fab";
+  customElement,
-
+  html,
-import "../ha-config-section";
+  LitElement,
-
+  property,
+  TemplateResult,
+} from "lit-element";
+import { ifDefined } from "lit-html/directives/if-defined";
+import memoizeOne from "memoize-one";
+import { fireEvent } from "../../../common/dom/fire_event";
 import { computeStateName } from "../../../common/entity/compute_state_name";
 import { computeRTL } from "../../../common/util/compute_rtl";
+import { DataTableColumnContainer } from "../../../components/data-table/ha-data-table";
+import "../../../components/ha-fab";
+import { forwardHaptic } from "../../../data/haptics";
+import { activateScene, SceneEntity } from "../../../data/scene";
+import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
+import "../../../layouts/hass-tabs-subpage-data-table";
 import { haStyle } from "../../../resources/styles";
 import { HomeAssistant, Route } from "../../../types";
-import { SceneEntity, activateScene } from "../../../data/scene";
 import { showToast } from "../../../util/toast";
-import { ifDefined } from "lit-html/directives/if-defined";
-import { forwardHaptic } from "../../../data/haptics";
 import { configSections } from "../ha-panel-config";
 
 @customElement("ha-scene-dashboard")
@@ -35,108 +33,131 @@ class HaSceneDashboard extends LitElement {
   @property() public route!: Route;
   @property() public scenes!: SceneEntity[];
 
+  private _scenes = memoizeOne((scenes: SceneEntity[]) => {
+    return scenes.map((scene) => {
+      return {
+        ...scene,
+        name: computeStateName(scene),
+      };
+    });
+  });
+
+  private _columns = memoizeOne(
+    (_language): DataTableColumnContainer => {
+      return {
+        activate: {
+          title: "",
+          type: "icon-button",
+          template: (_toggle, scene) =>
+            html`
+              <paper-icon-button
+                .scene=${scene}
+                icon="hass:play"
+                title="${this.hass.localize(
+                  "ui.panel.config.scene.picker.activate_scene"
+                )}"
+                @click=${(ev: Event) => this._activateScene(ev)}
+              ></paper-icon-button>
+            `,
+        },
+        name: {
+          title: this.hass.localize(
+            "ui.panel.config.scene.picker.headers.name"
+          ),
+          sortable: true,
+          filterable: true,
+          direction: "asc",
+          grows: true,
+        },
+        info: {
+          title: "",
+          type: "icon-button",
+          template: (_info, scene) => html`
+            <paper-icon-button
+              .scene=${scene}
+              @click=${this._showInfo}
+              icon="hass:information-outline"
+              title="${this.hass.localize(
+                "ui.panel.config.scene.picker.show_info_scene"
+              )}"
+            ></paper-icon-button>
+          `,
+        },
+        edit: {
+          title: "",
+          type: "icon-button",
+          template: (_info, scene: any) => html`
+            <a
+              href=${ifDefined(
+                scene.attributes.id
+                  ? `/config/scene/edit/${scene.attributes.id}`
+                  : undefined
+              )}
+            >
+              <paper-icon-button
+                .icon=${scene.attributes.id ? "hass:pencil" : "hass:pencil-off"}
+                .disabled=${!scene.attributes.id}
+                title="${this.hass.localize(
+                  "ui.panel.config.scene.picker.edit_scene"
+                )}"
+              ></paper-icon-button>
+            </a>
+            ${!scene.attributes.id
+              ? html`
+                  <paper-tooltip position="left">
+                    ${this.hass.localize(
+                      "ui.panel.config.scene.picker.only_editable"
+                    )}
+                  </paper-tooltip>
+                `
+              : ""}
+          `,
+        },
+      };
+    }
+  );
+
   protected render(): TemplateResult {
     return html`
-      <hass-tabs-subpage
+      <hass-tabs-subpage-data-table
         .hass=${this.hass}
         .narrow=${this.narrow}
         back-path="/config"
         .route=${this.route}
         .tabs=${configSections.automation}
+        .columns=${this._columns(this.hass.language)}
+        .data=${this._scenes(this.scenes)}
+        id="entity_id"
+        .noDataText=${this.hass.localize(
+          "ui.panel.config.scene.picker.no_scenes"
+        )}
       >
-        <ha-config-section .isWide=${this.isWide}>
+        <paper-icon-button
-          <div slot="header">
+          slot="toolbar-icon"
-            ${this.hass.localize("ui.panel.config.scene.picker.header")}
+          icon="hass:help-circle"
-          </div>
+          @click=${this._showHelp}
-          <div slot="introduction">
+        ></paper-icon-button>
-            ${this.hass.localize("ui.panel.config.scene.picker.introduction")}
+      </hass-tabs-subpage-data-table>
-            <p>
+      <a href="/config/scene/edit/new">
-              <a
+        <ha-fab
-                href="https://home-assistant.io/docs/scene/editor/"
+          ?is-wide=${this.isWide}
-                target="_blank"
+          ?narrow=${this.narrow}
-                rel="noreferrer"
+          icon="hass:plus"
-              >
+          title=${this.hass.localize("ui.panel.config.scene.picker.add_scene")}
-                ${this.hass.localize("ui.panel.config.scene.picker.learn_more")}
+          ?rtl=${computeRTL(this.hass)}
-              </a>
+        ></ha-fab>
-            </p>
+      </a>
-          </div>
-
-          <ha-card
-            .heading=${this.hass.localize(
-              "ui.panel.config.scene.picker.pick_scene"
-            )}
-          >
-            ${this.scenes.length === 0
-              ? html`
-                  <div class="card-content">
-                    <p>
-                      ${this.hass.localize(
-                        "ui.panel.config.scene.picker.no_scenes"
-                      )}
-                    </p>
-                  </div>
-                `
-              : this.scenes.map(
-                  (scene) => html`
-                    <div class="scene">
-                      <paper-icon-button
-                        .scene=${scene}
-                        icon="hass:play"
-                        title="${this.hass.localize(
-                          "ui.panel.config.scene.picker.activate_scene"
-                        )}"
-                        @click=${this._activateScene}
-                      ></paper-icon-button>
-                      <paper-item-body two-line>
-                        <div>${computeStateName(scene)}</div>
-                      </paper-item-body>
-                      <div class="actions">
-                        <a
-                          href=${ifDefined(
-                            scene.attributes.id
-                              ? `/config/scene/edit/${scene.attributes.id}`
-                              : undefined
-                          )}
-                        >
-                          <paper-icon-button
-                            title="${this.hass.localize(
-                              "ui.panel.config.scene.picker.edit_scene"
-                            )}"
-                            icon="hass:pencil"
-                            .disabled=${!scene.attributes.id}
-                          ></paper-icon-button>
-                          ${!scene.attributes.id
-                            ? html`
-                                <paper-tooltip position="left">
-                                  ${this.hass.localize(
-                                    "ui.panel.config.scene.picker.only_editable"
-                                  )}
-                                </paper-tooltip>
-                              `
-                            : ""}
-                        </a>
-                      </div>
-                    </div>
-                  `
-                )}
-          </ha-card>
-        </ha-config-section>
-        <a href="/config/scene/edit/new">
-          <ha-fab
-            ?is-wide=${this.isWide}
-            ?narrow=${this.narrow}
-            icon="hass:plus"
-            title=${this.hass.localize(
-              "ui.panel.config.scene.picker.add_scene"
-            )}
-            ?rtl=${computeRTL(this.hass)}
-          ></ha-fab>
-        </a>
-      </hass-tabs-subpage>
     `;
   }
 
+  private _showInfo(ev) {
+    ev.stopPropagation();
+    const entityId = ev.currentTarget.scene.entity_id;
+    fireEvent(this, "hass-more-info", { entityId });
+  }
+
   private async _activateScene(ev) {
+    ev.stopPropagation();
     const scene = ev.target.scene as SceneEntity;
     await activateScene(this.hass, scene.entity_id);
     showToast(this, {
@@ -149,38 +170,28 @@ class HaSceneDashboard extends LitElement {
     forwardHaptic("light");
   }
 
+  private _showHelp() {
+    showAlertDialog(this, {
+      title: this.hass.localize("ui.panel.config.scene.picker.header"),
+      text: html`
+        ${this.hass.localize("ui.panel.config.scene.picker.introduction")}
+        <p>
+          <a
+            href="https://home-assistant.io/docs/scene/editor/"
+            target="_blank"
+            rel="noreferrer"
+          >
+            ${this.hass.localize("ui.panel.config.scene.picker.learn_more")}
+          </a>
+        </p>
+      `,
+    });
+  }
+
   static get styles(): CSSResultArray {
     return [
       haStyle,
       css`
-        :host {
-          display: block;
-          height: 100%;
-        }
-
-        ha-card {
-          margin-bottom: 56px;
-        }
-
-        .scene {
-          display: flex;
-          flex-direction: horizontal;
-          align-items: center;
-          padding: 0 8px 0 16px;
-        }
-
-        .scene > *:first-child {
-          margin-right: 8px;
-        }
-
-        .scene a[href] {
-          color: var(--primary-text-color);
-        }
-
-        .actions {
-          display: flex;
-        }
-
         ha-fab {
           position: fixed;
           bottom: 16px;

src/translations/en.json

@@ -1260,7 +1260,10 @@
             "edit_scene": "Edit scene",
             "show_info_scene": "Show info about scene",
             "delete_scene": "Delete scene",
-            "delete_confirm": "Are you sure you want to delete this scene?"
+            "delete_confirm": "Are you sure you want to delete this scene?",
+            "headers": {
+              "name": "Name"
+            }
           },
           "editor": {
             "introduction": "Use scenes to bring your home alive.",