Simplify data table template

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

@@ -74,7 +74,7 @@ export interface DataTableColumnData<T = any> extends DataTableSortColumnData {
   title: TemplateResult | string;
   label?: TemplateResult | string;
   type?: "numeric" | "icon" | "icon-button" | "overflow-menu" | "flex";
-  template?: (data: any, row: T) => TemplateResult | string | typeof nothing;
+  template?: (row: T) => TemplateResult | string | typeof nothing;
   width?: string;
   maxWidth?: string;
   grows?: boolean;
@@ -431,7 +431,7 @@ export class HaDataTable extends LitElement {
                   })
                 : ""}
             >
-              ${column.template ? column.template(row[key], row) : row[key]}
+              ${column.template ? column.template(row) : row[key]}
             </div>
           `;
         })}

src/panels/config/application_credentials/ha-config-application-credentials.ts

@@ -62,17 +62,16 @@ export class HaConfigApplicationCredentials extends LitElement {
           ),
           direction: "asc",
           grows: true,
-          template: (_, entry: ApplicationCredential) => html`${entry.name}`,
+          template: (entry) => html`${entry.name}`,
         },
-        clientId: {
+        client_id: {
           title: localize(
             "ui.panel.config.application_credentials.picker.headers.client_id"
           ),
           width: "30%",
           direction: "asc",
           hidden: narrow,
-          template: (_, entry: ApplicationCredential) =>
-            html`${entry.client_id}`,
+          template: (entry) => html`${entry.client_id}`,
         },
         application: {
           title: localize(
@@ -81,7 +80,7 @@ export class HaConfigApplicationCredentials extends LitElement {
           sortable: true,
           width: "30%",
           direction: "asc",
-          template: (_, entry) => html`${domainToName(localize, entry.domain)}`,
+          template: (entry) => html`${domainToName(localize, entry.domain)}`,
         },
       };
 

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

@@ -55,6 +55,12 @@ import { findRelated } from "../../../data/search";
 import { fetchBlueprints } from "../../../data/blueprint";
 import { UNAVAILABLE } from "../../../data/entity";
 
+type AutomationItem = AutomationEntity & {
+  name: string;
+  last_triggered?: string | undefined;
+  disabled: boolean;
+};
+
 @customElement("ha-automation-picker")
 class HaAutomationPicker extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -79,7 +85,7 @@ class HaAutomationPicker extends LitElement {
     (
       automations: AutomationEntity[],
       filteredAutomations?: string[] | null
-    ) => {
+    ): AutomationItem[] => {
       if (filteredAutomations === null) {
         return [];
       }
@@ -100,14 +106,14 @@ class HaAutomationPicker extends LitElement {
 
   private _columns = memoizeOne(
     (narrow: boolean, _locale): DataTableColumnContainer => {
-      const columns: DataTableColumnContainer = {
+      const columns: DataTableColumnContainer<AutomationItem> = {
         icon: {
           title: "",
           label: this.hass.localize(
             "ui.panel.config.automation.picker.headers.state"
           ),
           type: "icon",
-          template: (_, automation) =>
+          template: (automation) =>
             html`<ha-state-icon
               .state=${automation}
               style=${styleMap({
@@ -128,12 +134,12 @@ class HaAutomationPicker extends LitElement {
           direction: "asc",
           grows: true,
           template: narrow
-            ? (name, automation: any) => {
+            ? (automation) => {
                 const date = new Date(automation.attributes.last_triggered);
                 const now = new Date();
                 const dayDifference = differenceInDays(now, date);
                 return html`
-                  ${name}
+                  ${automation.name}
                   <div class="secondary">
                     ${this.hass.localize("ui.card.automation.last_triggered")}:
                     ${automation.attributes.last_triggered
@@ -156,20 +162,17 @@ class HaAutomationPicker extends LitElement {
           sortable: true,
           width: "20%",
           title: this.hass.localize("ui.card.automation.last_triggered"),
-          template: (last_triggered) => {
-            const date = new Date(last_triggered);
+          template: (automation) => {
+            if (!automation.last_triggered) {
+              return this.hass.localize("ui.components.relative_time.never");
+            }
+            const date = new Date(automation.last_triggered);
             const now = new Date();
             const dayDifference = differenceInDays(now, date);
             return html`
-              ${last_triggered
-                ? dayDifference > 3
-                  ? formatShortDateTime(
-                      date,
-                      this.hass.locale,
-                      this.hass.config
-                    )
-                  : relativeTime(date, this.hass.locale)
-                : this.hass.localize("ui.components.relative_time.never")}
+              ${dayDifference > 3
+                ? formatShortDateTime(date, this.hass.locale, this.hass.config)
+                : relativeTime(date, this.hass.locale)}
             `;
           },
         };
@@ -178,8 +181,8 @@ class HaAutomationPicker extends LitElement {
       columns.disabled = this.narrow
         ? {
             title: "",
-            template: (disabled: boolean) =>
-              disabled
+            template: (automation) =>
+              automation.disabled
                 ? html`
                     <simple-tooltip animation-delay="0" position="left">
                       ${this.hass.localize(
@@ -196,8 +199,8 @@ class HaAutomationPicker extends LitElement {
         : {
             width: "20%",
             title: "",
-            template: (disabled: boolean) =>
-              disabled
+            template: (automation) =>
+              automation.disabled
                 ? html`
                     <ha-chip>
                       ${this.hass.localize(
@@ -212,7 +215,7 @@ class HaAutomationPicker extends LitElement {
         title: "",
         width: this.narrow ? undefined : "10%",
         type: "overflow-menu",
-        template: (_: string, automation: any) => html`
+        template: (automation) => html`
           <ha-icon-overflow-menu
             .hass=${this.hass}
             narrow

src/panels/config/backup/ha-config-backup.ts

@@ -1,12 +1,12 @@
-import { mdiDelete, mdiDownload, mdiPlus } from "@mdi/js";
 import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
+import { mdiDelete, mdiDownload, mdiPlus } from "@mdi/js";
 import {
-  css,
   CSSResultGroup,
-  html,
   LitElement,
   PropertyValues,
   TemplateResult,
+  css,
+  html,
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoize from "memoize-one";
@@ -48,15 +48,15 @@ class HaConfigBackup extends LitElement {
   @state() private _backupData?: BackupData;
 
   private _columns = memoize(
-    (narrow, _language): DataTableColumnContainer => ({
+    (narrow, _language): DataTableColumnContainer<BackupContent> => ({
       name: {
         title: this.hass.localize("ui.panel.config.backup.name"),
         main: true,
         sortable: true,
         filterable: true,
         grows: true,
-        template: (entry: string, backup: BackupContent) =>
-          html`${entry}
+        template: (backup) =>
+          html`${backup.name}
             <div class="secondary">${backup.path}</div>`,
       },
       size: {
@@ -65,7 +65,7 @@ class HaConfigBackup extends LitElement {
         hidden: narrow,
         filterable: true,
         sortable: true,
-        template: (entry: number) => Math.ceil(entry * 10) / 10 + " MB",
+        template: (backup) => Math.ceil(backup.size * 10) / 10 + " MB",
       },
       date: {
         title: this.hass.localize("ui.panel.config.backup.created"),
@@ -74,15 +74,15 @@ class HaConfigBackup extends LitElement {
         hidden: narrow,
         filterable: true,
         sortable: true,
-        template: (entry: string) =>
-          relativeTime(new Date(entry), this.hass.locale),
+        template: (backup) =>
+          relativeTime(new Date(backup.date), this.hass.locale),
       },
 
       actions: {
         title: "",
         width: "15%",
         type: "overflow-menu",
-        template: (_: string, backup: BackupContent) =>
+        template: (backup) =>
           html`<ha-icon-overflow-menu
             .hass=${this.hass}
             .narrow=${this.narrow}

src/panels/config/blueprint/ha-blueprint-overview.ts

@@ -10,14 +10,14 @@ import {
 } from "@mdi/js";
 import {
   CSSResultGroup,
-  html,
   LitElement,
   PropertyValues,
   TemplateResult,
+  html,
 } from "lit";
 import { customElement, property } from "lit/decorators";
 import memoizeOne from "memoize-one";
-import { fireEvent, HASSDomEvent } from "../../../common/dom/fire_event";
+import { HASSDomEvent, fireEvent } from "../../../common/dom/fire_event";
 import { computeStateName } from "../../../common/entity/compute_state_name";
 import { navigate } from "../../../common/navigate";
 import { extractSearchParam } from "../../../common/url/search-params";
@@ -32,7 +32,6 @@ import "../../../components/ha-icon-overflow-menu";
 import "../../../components/ha-svg-icon";
 import { showAutomationEditor } from "../../../data/automation";
 import {
-  BlueprintDomain,
   BlueprintMetaData,
   Blueprints,
   deleteBlueprint,
@@ -50,10 +49,12 @@ import { documentationUrl } from "../../../util/documentation-url";
 import { configSections } from "../ha-panel-config";
 import { showAddBlueprintDialog } from "./show-dialog-import-blueprint";
 
-interface BlueprintMetaDataPath extends BlueprintMetaData {
+type BlueprintMetaDataPath = BlueprintMetaData & {
   path: string;
   error: boolean;
-}
+  type: "automation" | "script";
+  fullpath: string;
+};
 
 const createNewFunctions = {
   automation: (blueprintMeta: BlueprintMetaDataPath) => {
@@ -86,7 +87,7 @@ class HaBlueprintOverview extends LitElement {
   >;
 
   private _processedBlueprints = memoizeOne(
-    (blueprints: Record<string, Blueprints>) => {
+    (blueprints: Record<string, Blueprints>): BlueprintMetaDataPath[] => {
       const result: any[] = [];
       Object.entries(blueprints).forEach(([type, typeBlueprints]) =>
         Object.entries(typeBlueprints).forEach(([path, blueprint]) => {
@@ -125,19 +126,19 @@ class HaBlueprintOverview extends LitElement {
         direction: "asc",
         grows: true,
         template: narrow
-          ? (name, entity: any) => html`
-              ${name}<br />
-              <div class="secondary">${entity.path}</div>
+          ? (blueprint) => html`
+              ${blueprint.name}<br />
+              <div class="secondary">${blueprint.path}</div>
             `
           : undefined,
       },
       type: {
         title: this.hass.localize(
           "ui.panel.config.blueprint.overview.headers.type"
         ),
-        template: (type: BlueprintDomain) =>
+        template: (blueprint) =>
           html`${this.hass.localize(
-            `ui.panel.config.blueprint.overview.types.${type}`
+            `ui.panel.config.blueprint.overview.types.${blueprint.type}`
           )}`,
         sortable: true,
         filterable: true,
@@ -163,7 +164,7 @@ class HaBlueprintOverview extends LitElement {
         title: "",
         width: this.narrow ? undefined : "10%",
         type: "overflow-menu",
-        template: (_: string, blueprint) =>
+        template: (blueprint) =>
           blueprint.error
             ? html`<ha-svg-icon
                 style="color: var(--error-color); display: block; margin-inline-end: 12px; margin-inline-start: auto;"
@@ -177,7 +178,7 @@ class HaBlueprintOverview extends LitElement {
                     {
                       path: mdiPlus,
                       label: this.hass.localize(
-                        `ui.panel.config.blueprint.overview.create_${blueprint.domain}`
+                        `ui.panel.config.blueprint.overview.create_${blueprint.type}`
                       ),
                       action: () => this._createNew(blueprint),
                     },
@@ -324,7 +325,7 @@ class HaBlueprintOverview extends LitElement {
   private _handleRowClicked(ev: HASSDomEvent<RowClickedEvent>) {
     const blueprint = this._processedBlueprints(this.blueprints).find(
       (b) => b.fullpath === ev.detail.id
-    );
+    )!;
     if (blueprint.error) {
       showAlertDialog(this, {
         title: this.hass.localize("ui.panel.config.blueprint.overview.error", {