Change automation picker to data table (#5344)

* Change automation picker to data-table

* Update ha-automation-picker.ts

* Update ha-automation-picker.ts

* Update ha-automation-picker.ts

* Add edit button + disabled tooltip

* Fix translation key

* Remove unused

* Comments and fixes

* Update ha-automation-picker.ts

src/components/data-table/ha-data-table.ts

@@ -69,7 +69,7 @@ export interface DataTableSortColumnData {
 
 export interface DataTableColumnData extends DataTableSortColumnData {
   title: string;
-  type?: "numeric" | "icon";
+  type?: "numeric" | "icon" | "icon-button";
   template?: <T>(data: any, row: T) => TemplateResult | string;
   width?: string;
   maxWidth?: string;
@@ -228,10 +228,13 @@ export class HaDataTable extends LitElement {
               const sorted = key === this._sortColumn;
               const classes = {
                 "mdc-data-table__header-cell--numeric": Boolean(
-                  column.type && column.type === "numeric"
+                  column.type === "numeric"
                 ),
                 "mdc-data-table__header-cell--icon": Boolean(
-                  column.type && column.type === "icon"
+                  column.type === "icon"
+                ),
+                "mdc-data-table__header-cell--icon-button": Boolean(
+                  column.type === "icon-button"
                 ),
                 sortable: Boolean(column.sortable),
                 "not-sorted": Boolean(column.sortable && !sorted),
@@ -318,10 +321,13 @@ export class HaDataTable extends LitElement {
                             <div
                               class="mdc-data-table__cell ${classMap({
                                 "mdc-data-table__cell--numeric": Boolean(
-                                  column.type && column.type === "numeric"
+                                  column.type === "numeric"
                                 ),
                                 "mdc-data-table__cell--icon": Boolean(
-                                  column.type && column.type === "icon"
+                                  column.type === "icon"
+                                ),
+                                "mdc-data-table__cell--icon-button": Boolean(
+                                  column.type === "icon-button"
                                 ),
                                 grows: Boolean(column.grows),
                               })}"
@@ -614,6 +620,16 @@ export class HaDataTable extends LitElement {
         margin-right: -8px;
       }
 
+      .mdc-data-table__header-cell--icon-button,
+      .mdc-data-table__cell--icon-button {
+        width: 40px;
+        padding: 4px;
+      }
+
+      .mdc-data-table__cell--icon-button a {
+        color: var(--primary-text-color);
+      }
+
       .mdc-data-table__header-cell {
         font-family: Roboto, sans-serif;
         -moz-osx-font-smoothing: grayscale;

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

@@ -7,18 +7,13 @@ import {
   property,
   customElement,
 } from "lit-element";
-import { ifDefined } from "lit-html/directives/if-defined";
 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 "../../../layouts/hass-tabs-subpage-data-table";
 
-import "../../../components/ha-card";
 import "../../../components/ha-fab";
 import "../../../components/entity/ha-entity-toggle";
 
-import "../ha-config-section";
-
 import { computeStateName } from "../../../common/entity/compute_state_name";
 import { computeRTL } from "../../../common/util/compute_rtl";
 import { haStyle } from "../../../resources/styles";
@@ -27,12 +22,16 @@ import {
   AutomationEntity,
   showAutomationEditor,
   AutomationConfig,
+  triggerAutomation,
 } from "../../../data/automation";
 import { formatDateTime } from "../../../common/datetime/format_date_time";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { showThingtalkDialog } from "./show-dialog-thingtalk";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import { configSections } from "../ha-panel-config";
+import { DataTableColumnContainer } from "../../../components/data-table/ha-data-table";
+import memoizeOne from "memoize-one";
+import { ifDefined } from "lit-html/directives/if-defined";
 
 @customElement("ha-automation-picker")
 class HaAutomationPicker extends LitElement {
@@ -42,76 +41,65 @@ class HaAutomationPicker extends LitElement {
   @property() public route!: Route;
   @property() public automations!: AutomationEntity[];
 
-  protected render(): TemplateResult {
+  private _automations = memoizeOne((automations: AutomationEntity[]) => {
-    return html`
+    return automations.map((automation) => {
-      <hass-tabs-subpage
+      return {
-        .hass=${this.hass}
+        ...automation,
-        .narrow=${this.narrow}
+        name: computeStateName(automation),
-        back-path="/config"
+      };
-        .route=${this.route}
+    });
-        .tabs=${configSections.automation}
+  });
-      >
-        <ha-config-section .isWide=${this.isWide}>
-          <div slot="header">
-            ${this.hass.localize("ui.panel.config.automation.picker.header")}
-          </div>
-          <div slot="introduction">
-            ${this.hass.localize(
-              "ui.panel.config.automation.picker.introduction"
-            )}
-            <p>
-              <a
-                href="https://home-assistant.io/docs/automation/editor/"
-                target="_blank"
-                rel="noreferrer"
-              >
-                ${this.hass.localize(
-                  "ui.panel.config.automation.picker.learn_more"
-                )}
-              </a>
-            </p>
-          </div>
 
-          <ha-card
+  private _columns = memoizeOne(
-            .heading=${this.hass.localize(
+    (narrow: boolean, _language): DataTableColumnContainer => {
-              "ui.panel.config.automation.picker.pick_automation"
+      const columns: DataTableColumnContainer = {
-            )}
+        toggle: {
-          >
+          title: "",
-            ${this.automations.length === 0
+          type: "icon",
-              ? html`
+          template: (_toggle, automation) =>
-                  <div class="card-content">
+            html`
-                    <p>
-                      ${this.hass.localize(
-                        "ui.panel.config.automation.picker.no_automations"
-                      )}
-                    </p>
-                  </div>
-                `
-              : this.automations.map(
-                  (automation) => html`
-
-                      <div class='automation'>
               <ha-entity-toggle
                 .hass=${this.hass}
                 .stateObj=${automation}
               ></ha-entity-toggle>
-
+            `,
-                        <paper-item-body two-line>
+        },
-                          <div>${computeStateName(automation)}</div>
+        name: {
-                          <div secondary>
+          title: this.hass.localize(
-                            ${this.hass.localize(
+            "ui.panel.config.automation.picker.headers.name"
-                              "ui.card.automation.last_triggered"
+          ),
-                            )}: ${
+          sortable: true,
-                    automation.attributes.last_triggered
+          filterable: true,
+          direction: "asc",
+          grows: true,
+          template: (name, automation: any) => html`
+            ${name}
+            <div class="secondary">
+              ${this.hass.localize("ui.card.automation.last_triggered")}:
+              ${automation.attributes.last_triggered
                 ? formatDateTime(
                     new Date(automation.attributes.last_triggered),
                     this.hass.language
                   )
-                      : this.hass.localize("ui.components.relative_time.never")
+                : this.hass.localize("ui.components.relative_time.never")}
-                  }
             </div>
-                        </paper-item-body>
+          `,
-                        <div class='actions'>
+        },
+      };
+      if (!narrow) {
+        columns.execute = {
+          title: "",
+          template: (_info, automation) => html`
+            <mwc-button .automation=${automation} @click=${this._execute}>
+              ${this.hass.localize("ui.card.automation.trigger")}
+            </mwc-button>
+          `,
+        };
+      }
+      columns.info = {
+        title: "",
+        type: "icon-button",
+        template: (_info, automation) => html`
           <paper-icon-button
             .automation=${automation}
             @click=${this._showInfo}
@@ -120,6 +108,12 @@ class HaAutomationPicker extends LitElement {
               "ui.panel.config.automation.picker.show_info_automation"
             )}"
           ></paper-icon-button>
+        `,
+      };
+      columns.edit = {
+        title: "",
+        type: "icon-button",
+        template: (_info, automation: any) => html`
           <a
             href=${ifDefined(
               automation.attributes.id
@@ -128,14 +122,16 @@ class HaAutomationPicker extends LitElement {
             )}
           >
             <paper-icon-button
-                              title="${this.hass.localize(
+              .icon=${automation.attributes.id
-                                "ui.panel.config.automation.picker.edit_automation"
+                ? "hass:pencil"
-                              )}"
+                : "hass:pencil-off"}
-                              icon="hass:pencil"
               .disabled=${!automation.attributes.id}
+              title="${this.hass.localize(
+                "ui.panel.config.automation.picker.show_info_automation"
+              )}"
             ></paper-icon-button>
-                            ${
+          </a>
-                              !automation.attributes.id
+          ${!automation.attributes.id
             ? html`
                 <paper-tooltip position="left">
                   ${this.hass.localize(
@@ -143,17 +139,29 @@ class HaAutomationPicker extends LitElement {
                   )}
                 </paper-tooltip>
               `
-                                : ""
+            : ""}
+        `,
+      };
+      return columns;
     }
-                          </a>
+  );
-                        </div>
+
-                      </div>
+  protected render(): TemplateResult {
-                    </a>
+    return html`
-                  `
+      <hass-tabs-subpage-data-table
+        .hass=${this.hass}
+        .narrow=${this.narrow}
+        back-path="/config"
+        .route=${this.route}
+        .tabs=${configSections.automation}
+        .columns=${this._columns(this.narrow, this.hass.language)}
+        .data=${this._automations(this.automations)}
+        id="entity_id"
+        .noDataText=${this.hass.localize(
+          "ui.panel.config.automation.picker.no_automations"
         )}
-          </ha-card>
+      >
-        </ha-config-section>
+      </hass-tabs-subpage-data-table>
-        <div>
       <ha-fab
         slot="fab"
         ?is-wide=${this.isWide}
@@ -165,16 +173,20 @@ class HaAutomationPicker extends LitElement {
         ?rtl=${computeRTL(this.hass)}
         @click=${this._createNew}
       ></ha-fab>
-        </div>
-      </hass-tabs-subpage>
     `;
   }
 
   private _showInfo(ev) {
+    ev.stopPropagation();
     const entityId = ev.currentTarget.automation.entity_id;
     fireEvent(this, "hass-more-info", { entityId });
   }
 
+  private _execute(ev) {
+    const entityId = ev.currentTarget.automation.entity_id;
+    triggerAutomation(this.hass, entityId);
+  }
+
   private _createNew() {
     if (!isComponentLoaded(this.hass, "cloud")) {
       showAutomationEditor(this);
@@ -190,33 +202,6 @@ class HaAutomationPicker extends LitElement {
     return [
       haStyle,
       css`
-        :host {
-          display: block;
-        }
-
-        ha-card {
-          margin-bottom: 56px;
-        }
-
-        .automation {
-          display: flex;
-          flex-direction: horizontal;
-          align-items: center;
-          padding: 0 8px 0 16px;
-        }
-
-        .automation a[href] {
-          color: var(--primary-text-color);
-        }
-
-        ha-entity-toggle {
-          margin-right: 16px;
-        }
-
-        .actions {
-          display: flex;
-        }
-
         ha-fab {
           position: fixed;
           bottom: 16px;
@@ -242,10 +227,6 @@ class HaAutomationPicker extends LitElement {
           right: auto;
           left: 24px;
         }
-
-        a {
-          color: var(--primary-color);
-        }
       `,
     ];
   }

src/translations/en.json

@@ -1002,7 +1002,10 @@
             "edit_automation": "Edit automation",
             "show_info_automation": "Show info about automation",
             "delete_automation": "Delete automation",
-            "delete_confirm": "Are you sure you want to delete this automation?"
+            "delete_confirm": "Are you sure you want to delete this automation?",
+            "headers": {
+              "name": "Name"
+            }
           },
           "editor": {
             "enable_disable": "Enable/Disable automation",