MIgrate scripts to data table (#5352)

* MIgrate scripts to data table

* Update imports

* Update

* Lint

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

@@ -622,8 +622,20 @@ export class HaDataTable extends LitElement {
 
       .mdc-data-table__header-cell--icon-button,
       .mdc-data-table__cell--icon-button {
-        width: 40px;
+        width: 56px;
-        padding: 4px;
+        padding: 8px;
+      }
+
+      .mdc-data-table__header-cell--icon-button:first-child,
+      .mdc-data-table__cell--icon-button:first-child {
+        width: 64px;
+        padding-left: 16px;
+      }
+
+      .mdc-data-table__header-cell--icon-button:last-child,
+      .mdc-data-table__cell--icon-button:last-child {
+        width: 64px;
+        padding-right: 16px;
       }
 
       .mdc-data-table__cell--icon-button a {

src/dialogs/generic/dialog-box.ts

@@ -142,6 +142,9 @@ class DialogBox extends LitElement {
             min-width: initial;
           }
         }
+        a {
+          color: var(--primary-color);
+        }
         p {
           margin: 0;
           padding-top: 6px;

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

@@ -172,29 +172,12 @@ export class HaConfigAreasDashboard extends LitElement {
         --app-header-background-color: var(--sidebar-background-color);
         --app-header-text-color: var(--sidebar-text-color);
       }
-      a {
-        color: var(--primary-color);
-      }
-      ha-card {
-        max-width: 600px;
-        margin: 16px auto;
-        overflow: hidden;
-      }
-      .empty {
-        text-align: center;
-      }
-      paper-item {
-        cursor: pointer;
-        padding-top: 4px;
-        padding-bottom: 4px;
-      }
       ha-fab {
         position: fixed;
         bottom: 16px;
         right: 16px;
         z-index: 1;
       }
-
       ha-fab[is-wide] {
         bottom: 24px;
         right: 24px;

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

@@ -198,6 +198,7 @@ export class HaConfigDevicePage extends LitElement {
                         integrations[0]
                       }/logo@2x.png 2x
                     "
+                    referrerpolicy="no-referrer"
                     @load=${this._onImageLoad}
                     @error=${this._onImageError}
                   />

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

@@ -1,31 +1,28 @@
-import {
-  LitElement,
-  html,
-  CSSResultArray,
-  css,
-  TemplateResult,
-  property,
-  customElement,
-} from "lit-element";
 import "@polymer/paper-icon-button/paper-icon-button";
-import "@polymer/paper-item/paper-item-body";
 import { HassEntity } from "home-assistant-js-websocket";
-
+import {
-import "../../../layouts/hass-tabs-subpage";
+  css,
-
+  CSSResultArray,
-import { computeRTL } from "../../../common/util/compute_rtl";
+  customElement,
-
+  html,
-import "../../../components/ha-card";
+  LitElement,
-import "../../../components/ha-fab";
+  property,
-
+  TemplateResult,
-import "../ha-config-section";
+} from "lit-element";
-
+import memoizeOne from "memoize-one";
+import { formatDateTime } from "../../../common/datetime/format_date_time";
+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 { triggerScript } from "../../../data/script";
+import "../../../layouts/hass-tabs-subpage-data-table";
 import { haStyle } from "../../../resources/styles";
 import { HomeAssistant, Route } from "../../../types";
-import { triggerScript } from "../../../data/script";
 import { showToast } from "../../../util/toast";
 import { configSections } from "../ha-panel-config";
+import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
 
 @customElement("ha-script-picker")
 class HaScriptPicker extends LitElement {
@@ -35,61 +32,73 @@ class HaScriptPicker extends LitElement {
   @property() public narrow!: boolean;
   @property() public route!: Route;
 
-  protected render(): TemplateResult {
+  private _scripts = memoizeOne((scripts: HassEntity[]) => {
-    return html`
+    return scripts.map((script) => {
-      <hass-tabs-subpage
+      return {
-        .hass=${this.hass}
+        ...script,
-        .narrow=${this.narrow}
+        name: computeStateName(script),
-        back-path="/config"
+      };
-        .route=${this.route}
+    });
-        .tabs=${configSections.automation}
+  });
-      >
-        <ha-config-section .isWide=${this.isWide}>
-          <div slot="header">
-            ${this.hass.localize("ui.panel.config.script.picker.header")}
-          </div>
-          <div slot="introduction">
-            ${this.hass.localize("ui.panel.config.script.picker.introduction")}
-            <p>
-              <a
-                href="https://home-assistant.io/docs/scripts/editor/"
-                target="_blank"
-                rel="noreferrer"
-              >
-                ${this.hass.localize(
-                  "ui.panel.config.script.picker.learn_more"
-                )}
-              </a>
-            </p>
-          </div>
 
-          <ha-card>
+  private _columns = memoizeOne(
-            ${this.scripts.length === 0
+    (_language): DataTableColumnContainer => {
-              ? html`
+      return {
-                  <div class="card-content">
+        activate: {
-                    <p>
+          title: "",
-                      ${this.hass.localize(
+          type: "icon-button",
-                        "ui.panel.config.script.picker.no_scripts"
+          template: (_toggle, script) =>
-                      )}
+            html`
-                    </p>
-                  </div>
-                `
-              : this.scripts.map(
-                  (script) => html`
-                    <div class="script">
               <paper-icon-button
                 .script=${script}
                 icon="hass:play"
                 title="${this.hass.localize(
-                          "ui.panel.config.script.picker.trigger_script"
+                  "ui.panel.config.script.picker.activate_script"
                 )}"
-                        @click=${this._runScript}
+                @click=${(ev: Event) => this._runScript(ev)}
               ></paper-icon-button>
-                      <paper-item-body two-line>
+            `,
-                        <div>${computeStateName(script)}</div>
+        },
-                      </paper-item-body>
+        name: {
-                      <div class="actions">
+          title: this.hass.localize(
-                        <a href=${`/config/script/edit/${script.entity_id}`}>
+            "ui.panel.config.script.picker.headers.name"
+          ),
+          sortable: true,
+          filterable: true,
+          direction: "asc",
+          grows: true,
+          template: (name, script: any) => html`
+            ${name}
+            <div class="secondary">
+              ${this.hass.localize("ui.card.automation.last_triggered")}:
+              ${script.attributes.last_triggered
+                ? formatDateTime(
+                    new Date(script.attributes.last_triggered),
+                    this.hass.language
+                  )
+                : this.hass.localize("ui.components.relative_time.never")}
+            </div>
+          `,
+        },
+        info: {
+          title: "",
+          type: "icon-button",
+          template: (_info, script) => html`
+            <paper-icon-button
+              .script=${script}
+              @click=${this._showInfo}
+              icon="hass:information-outline"
+              title="${this.hass.localize(
+                "ui.panel.config.script.picker.show_info"
+              )}"
+            ></paper-icon-button>
+          `,
+        },
+        edit: {
+          title: "",
+          type: "icon-button",
+          template: (_info, script: any) => html`
+            <a href="/config/script/edit/${script.entity_id}">
               <paper-icon-button
                 icon="hass:pencil"
                 title="${this.hass.localize(
@@ -97,13 +106,33 @@ class HaScriptPicker extends LitElement {
                 )}"
               ></paper-icon-button>
             </a>
-                      </div>
+          `,
-                    </div>
+        },
-                  `
+      };
-                )}
+    }
-          </ha-card>
+  );
-        </ha-config-section>
 
+  protected render(): TemplateResult {
+    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.hass.language)}
+        .data=${this._scripts(this.scripts)}
+        id="entity_id"
+        .noDataText=${this.hass.localize(
+          "ui.panel.config.script.picker.no_scripts"
+        )}
+      >
+        <paper-icon-button
+          slot="toolbar-icon"
+          icon="hass:help-circle"
+          @click=${this._showHelp}
+        ></paper-icon-button>
+      </hass-tabs-subpage-data-table>
       <a href="/config/script/new">
         <ha-fab
           ?is-wide=${this.isWide}
@@ -115,11 +144,11 @@ class HaScriptPicker extends LitElement {
           ?rtl=${computeRTL(this.hass)}
         ></ha-fab>
       </a>
-      </hass-tabs-subpage>
     `;
   }
 
   private async _runScript(ev) {
+    ev.stopPropagation();
     const script = ev.currentTarget.script as HassEntity;
     await triggerScript(this.hass, script.entity_id);
     showToast(this, {
@@ -131,38 +160,34 @@ class HaScriptPicker extends LitElement {
     });
   }
 
+  private _showInfo(ev) {
+    ev.stopPropagation();
+    const entityId = ev.currentTarget.script.entity_id;
+    fireEvent(this, "hass-more-info", { entityId });
+  }
+
+  private _showHelp() {
+    showAlertDialog(this, {
+      title: this.hass.localize("ui.panel.config.script.caption"),
+      text: html`
+        ${this.hass.localize("ui.panel.config.script.picker.introduction")}
+        <p>
+          <a
+            href="https://home-assistant.io/docs/scripts/editor/"
+            target="_blank"
+            rel="noreferrer"
+          >
+            ${this.hass.localize("ui.panel.config.script.picker.learn_more")}
+          </a>
+        </p>
+      `,
+    });
+  }
+
   static get styles(): CSSResultArray {
     return [
       haStyle,
       css`
-        :host {
-          display: block;
-        }
-
-        ha-card {
-          margin-bottom: 56px;
-        }
-
-        .script {
-          display: flex;
-          flex-direction: horizontal;
-          align-items: center;
-          padding: 0 8px 0 16px;
-        }
-
-        .script > *:first-child {
-          margin-right: 8px;
-        }
-
-        .script a[href],
-        paper-icon-button {
-          color: var(--primary-text-color);
-        }
-
-        .actions {
-          display: flex;
-        }
-
         ha-fab {
           position: fixed;
           bottom: 16px;
@@ -187,10 +212,6 @@ class HaScriptPicker extends LitElement {
           right: auto;
           left: 24px;
         }
-
-        a {
-          color: var(--primary-color);
-        }
       `,
     ];
   }

src/translations/en.json

@@ -1230,7 +1230,10 @@
             "no_scripts": "We couldn’t find any editable scripts",
             "add_script": "Add script",
             "trigger_script": "Trigger script",
-            "edit_script": "Edit script"
+            "edit_script": "Edit script",
+            "headers": {
+              "name": "Name"
+            }
           },
           "editor": {
             "alias": "Name",