Fix missing column headers for various data tables (#20160)

* Fix missing column headers for automation/scene/script/blueprint

* more tables

* Update ha-automation-picker.ts

* Update ha-script-picker.ts

* Update ha-scene-dashboard.ts

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

@@ -33,6 +33,7 @@ import {
 import "../../../layouts/hass-loading-screen";
 import "../../../layouts/hass-tabs-subpage-data-table";
 import { HomeAssistant, Route } from "../../../types";
+import { LocalizeFunc } from "../../../common/translations/localize";
 import { fileDownload } from "../../../util/file_download";
 
 @customElement("ha-config-backup")
@@ -48,9 +49,13 @@ class HaConfigBackup extends LitElement {
   @state() private _backupData?: BackupData;
 
   private _columns = memoize(
-    (narrow, _language): DataTableColumnContainer<BackupContent> => ({
+    (
+      narrow,
+      _language,
+      localize: LocalizeFunc
+    ): DataTableColumnContainer<BackupContent> => ({
       name: {
-        title: this.hass.localize("ui.panel.config.backup.name"),
+        title: localize("ui.panel.config.backup.name"),
         main: true,
         sortable: true,
         filterable: true,
@@ -60,7 +65,7 @@ class HaConfigBackup extends LitElement {
             <div class="secondary">${backup.path}</div>`,
       },
       size: {
-        title: this.hass.localize("ui.panel.config.backup.size"),
+        title: localize("ui.panel.config.backup.size"),
         width: "15%",
         hidden: narrow,
         filterable: true,
@@ -68,7 +73,7 @@ class HaConfigBackup extends LitElement {
         template: (backup) => Math.ceil(backup.size * 10) / 10 + " MB",
       },
       date: {
-        title: this.hass.localize("ui.panel.config.backup.created"),
+        title: localize("ui.panel.config.backup.created"),
         width: "15%",
         direction: "desc",
         hidden: narrow,
@@ -139,7 +144,11 @@ class HaConfigBackup extends LitElement {
         .narrow=${this.narrow}
         back-path="/config/system"
         .route=${this.route}
-        .columns=${this._columns(this.narrow, this.hass.language)}
+        .columns=${this._columns(
+          this.narrow,
+          this.hass.language,
+          this.hass.localize
+        )}
         .data=${this._getItems(this._backupData.backups)}
         .noDataText=${this.hass.localize("ui.panel.config.backup.no_backups")}
         .searchLabel=${this.hass.localize(

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

@@ -49,6 +49,7 @@ import {
 import "../../../layouts/hass-tabs-subpage-data-table";
 import { haStyle } from "../../../resources/styles";
 import { HomeAssistant, Route } from "../../../types";
+import { LocalizeFunc } from "../../../common/translations/localize";
 import { documentationUrl } from "../../../util/documentation-url";
 import { showToast } from "../../../util/toast";
 import { configSections } from "../ha-panel-config";
@@ -120,11 +121,13 @@ class HaBlueprintOverview extends LitElement {
   );
 
   private _columns = memoizeOne(
-    (narrow, _language): DataTableColumnContainer<BlueprintMetaDataPath> => ({
+    (
+      narrow,
+      _language,
+      localize: LocalizeFunc
+    ): DataTableColumnContainer<BlueprintMetaDataPath> => ({
       name: {
-        title: this.hass.localize(
-          "ui.panel.config.blueprint.overview.headers.name"
-        ),
+        title: localize("ui.panel.config.blueprint.overview.headers.name"),
         main: true,
         sortable: true,
         filterable: true,
@@ -138,9 +141,7 @@ class HaBlueprintOverview extends LitElement {
           : undefined,
       },
       type: {
-        title: this.hass.localize(
-          "ui.panel.config.blueprint.overview.headers.type"
-        ),
+        title: localize("ui.panel.config.blueprint.overview.headers.type"),
         template: (blueprint) =>
           html`${this.hass.localize(
             `ui.panel.config.blueprint.overview.types.${blueprint.type}`
@@ -152,9 +153,7 @@ class HaBlueprintOverview extends LitElement {
         width: "10%",
       },
       path: {
-        title: this.hass.localize(
-          "ui.panel.config.blueprint.overview.headers.file_name"
-        ),
+        title: localize("ui.panel.config.blueprint.overview.headers.file_name"),
         sortable: true,
         filterable: true,
         hidden: narrow,
@@ -252,7 +251,11 @@ class HaBlueprintOverview extends LitElement {
         back-path="/config"
         .route=${this.route}
         .tabs=${configSections.automations}
-        .columns=${this._columns(this.narrow, this.hass.language)}
+        .columns=${this._columns(
+          this.narrow,
+          this.hass.language,
+          this.hass.localize
+        )}
         .data=${this._processedBlueprints(this.blueprints)}
         id="fullpath"
         .noDataText=${this.hass.localize(

src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts

@@ -40,6 +40,7 @@ import { showConfirmationDialog } from "../../../../dialogs/generic/show-dialog-
 import "../../../../layouts/hass-loading-screen";
 import "../../../../layouts/hass-tabs-subpage-data-table";
 import { HomeAssistant, Route } from "../../../../types";
+import { LocalizeFunc } from "../../../../common/translations/localize";
 import { getLovelaceStrategy } from "../../../lovelace/strategies/get-strategy";
 import { showNewDashboardDialog } from "../../dashboard/show-dialog-new-dashboard";
 import { lovelaceTabs } from "../ha-config-lovelace";
@@ -74,11 +75,16 @@ export class HaConfigLovelaceDashboards extends LitElement {
   }
 
   private _columns = memoize(
-    (narrow: boolean, _language, dashboards): DataTableColumnContainer => {
+    (
+      narrow: boolean,
+      _language,
+      dashboards,
+      localize: LocalizeFunc
+    ): DataTableColumnContainer => {
       const columns: DataTableColumnContainer<DataTableItem> = {
         icon: {
           title: "",
-          label: this.hass.localize(
+          label: localize(
             "ui.panel.config.lovelace.dashboards.picker.headers.icon"
           ),
           type: "icon",
@@ -98,7 +104,7 @@ export class HaConfigLovelaceDashboards extends LitElement {
               : nothing,
         },
         title: {
-          title: this.hass.localize(
+          title: localize(
             "ui.panel.config.lovelace.dashboards.picker.headers.title"
           ),
           main: true,
@@ -140,7 +146,7 @@ export class HaConfigLovelaceDashboards extends LitElement {
 
       if (!narrow) {
         columns.mode = {
-          title: this.hass.localize(
+          title: localize(
             "ui.panel.config.lovelace.dashboards.picker.headers.conf_mode"
           ),
           sortable: true,
@@ -154,7 +160,7 @@ export class HaConfigLovelaceDashboards extends LitElement {
         };
         if (dashboards.some((dashboard) => dashboard.filename)) {
           columns.filename = {
-            title: this.hass.localize(
+            title: localize(
               "ui.panel.config.lovelace.dashboards.picker.headers.filename"
             ),
             width: "15%",
@@ -163,7 +169,7 @@ export class HaConfigLovelaceDashboards extends LitElement {
           };
         }
         columns.require_admin = {
-          title: this.hass.localize(
+          title: localize(
             "ui.panel.config.lovelace.dashboards.picker.headers.require_admin"
           ),
           sortable: true,
@@ -175,7 +181,7 @@ export class HaConfigLovelaceDashboards extends LitElement {
               : html`—`,
         };
         columns.show_in_sidebar = {
-          title: this.hass.localize(
+          title: localize(
             "ui.panel.config.lovelace.dashboards.picker.headers.sidebar"
           ),
           type: "icon",
@@ -189,7 +195,7 @@ export class HaConfigLovelaceDashboards extends LitElement {
 
       columns.url_path = {
         title: "",
-        label: this.hass.localize(
+        label: localize(
           "ui.panel.config.lovelace.dashboards.picker.headers.url"
         ),
         filterable: true,
@@ -283,7 +289,8 @@ export class HaConfigLovelaceDashboards extends LitElement {
         .columns=${this._columns(
           this.narrow,
           this.hass.language,
-          this._dashboards
+          this._dashboards,
+          this.hass.localize
         )}
         .data=${this._getItems(this._dashboards)}
         @row-click=${this._editDashboard}

src/panels/config/lovelace/resources/ha-config-lovelace-resources.ts

@@ -33,6 +33,7 @@ import "../../../../layouts/hass-subpage";
 import "../../../../layouts/hass-tabs-subpage-data-table";
 import { haStyle } from "../../../../resources/styles";
 import { HomeAssistant, Route } from "../../../../types";
+import { LocalizeFunc } from "../../../../common/translations/localize";
 import { loadLovelaceResources } from "../../../lovelace/common/load-resources";
 import { lovelaceResourcesTabs } from "../ha-config-lovelace";
 import { showResourceDetailDialog } from "./show-dialog-lovelace-resource-detail";
@@ -50,9 +51,12 @@ export class HaConfigLovelaceRescources extends LitElement {
   @state() private _resources: LovelaceResource[] = [];
 
   private _columns = memoize(
-    (_language): DataTableColumnContainer<LovelaceResource> => ({
+    (
+      _language,
+      localize: LocalizeFunc
+    ): DataTableColumnContainer<LovelaceResource> => ({
       url: {
-        title: this.hass.localize(
+        title: localize(
           "ui.panel.config.lovelace.resources.picker.headers.url"
         ),
         sortable: true,
@@ -62,7 +66,7 @@ export class HaConfigLovelaceRescources extends LitElement {
         forceLTR: true,
       },
       type: {
-        title: this.hass.localize(
+        title: localize(
           "ui.panel.config.lovelace.resources.picker.headers.type"
         ),
         sortable: true,
@@ -118,7 +122,7 @@ export class HaConfigLovelaceRescources extends LitElement {
         .narrow=${this.narrow}
         .route=${this.route}
         .tabs=${lovelaceResourcesTabs}
-        .columns=${this._columns(this.hass.language)}
+        .columns=${this._columns(this.hass.language, this.hass.localize)}
         .data=${this._resources}
         .noDataText=${this.hass.localize(
           "ui.panel.config.lovelace.resources.picker.no_resources"

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

@@ -30,6 +30,7 @@ import {
 import "../../../layouts/hass-tabs-subpage-data-table";
 import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
 import { HomeAssistant, Route } from "../../../types";
+import { LocalizeFunc } from "../../../common/translations/localize";
 import { documentationUrl } from "../../../util/documentation-url";
 import { configSections } from "../ha-panel-config";
 import { showTagDetailDialog } from "./show-dialog-tag-detail";
@@ -56,90 +57,94 @@ export class HaConfigTags extends SubscribeMixin(LitElement) {
     return this.hass.auth.external?.config.canWriteTag;
   }
 
-  private _columns = memoizeOne((narrow: boolean, _language) => {
-    const columns: DataTableColumnContainer<TagRowData> = {
-      icon: {
-        title: "",
-        label: this.hass.localize("ui.panel.config.tag.headers.icon"),
-        type: "icon",
-        template: (tag) => html`<tag-image .tag=${tag}></tag-image>`,
-      },
-      display_name: {
-        title: this.hass.localize("ui.panel.config.tag.headers.name"),
-        main: true,
-        sortable: true,
-        filterable: true,
-        grows: true,
-        template: (tag) =>
-          html`${tag.name}
-          ${narrow
-            ? html`<div class="secondary">
-                ${tag.last_scanned_datetime
-                  ? html`<ha-relative-time
-                      .hass=${this.hass}
-                      .datetime=${tag.last_scanned_datetime}
-                      capitalize
-                    ></ha-relative-time>`
-                  : this.hass.localize("ui.panel.config.tag.never_scanned")}
-              </div>`
-            : ""}`,
-      },
-    };
-    if (!narrow) {
-      columns.last_scanned_datetime = {
-        title: this.hass.localize("ui.panel.config.tag.headers.last_scanned"),
-        sortable: true,
-        direction: "desc",
-        width: "20%",
-        template: (tag) => html`
-          ${tag.last_scanned_datetime
-            ? html`<ha-relative-time
-                .hass=${this.hass}
-                .datetime=${tag.last_scanned_datetime}
-                capitalize
-              ></ha-relative-time>`
-            : this.hass.localize("ui.panel.config.tag.never_scanned")}
-        `,
+  private _columns = memoizeOne(
+    (narrow: boolean, _language, localize: LocalizeFunc) => {
+      const columns: DataTableColumnContainer<TagRowData> = {
+        icon: {
+          title: "",
+          label: localize("ui.panel.config.tag.headers.icon"),
+          type: "icon",
+          template: (tag) => html`<tag-image .tag=${tag}></tag-image>`,
+        },
+        display_name: {
+          title: localize("ui.panel.config.tag.headers.name"),
+          main: true,
+          sortable: true,
+          filterable: true,
+          grows: true,
+          template: (tag) =>
+            html`${tag.name}
+            ${narrow
+              ? html`<div class="secondary">
+                  ${tag.last_scanned_datetime
+                    ? html`<ha-relative-time
+                        .hass=${this.hass}
+                        .datetime=${tag.last_scanned_datetime}
+                        capitalize
+                      ></ha-relative-time>`
+                    : this.hass.localize("ui.panel.config.tag.never_scanned")}
+                </div>`
+              : ""}`,
+        },
       };
-    }
-    if (this._canWriteTags) {
-      columns.write = {
+      if (!narrow) {
+        columns.last_scanned_datetime = {
+          title: localize("ui.panel.config.tag.headers.last_scanned"),
+          sortable: true,
+          direction: "desc",
+          width: "20%",
+          template: (tag) => html`
+            ${tag.last_scanned_datetime
+              ? html`<ha-relative-time
+                  .hass=${this.hass}
+                  .datetime=${tag.last_scanned_datetime}
+                  capitalize
+                ></ha-relative-time>`
+              : this.hass.localize("ui.panel.config.tag.never_scanned")}
+          `,
+        };
+      }
+      if (this._canWriteTags) {
+        columns.write = {
+          title: "",
+          label: localize("ui.panel.config.tag.headers.write"),
+          type: "icon-button",
+          template: (tag) =>
+            html` <ha-icon-button
+              .tag=${tag}
+              @click=${this._handleWriteClick}
+              .label=${this.hass.localize("ui.panel.config.tag.write")}
+              .path=${mdiContentDuplicate}
+            ></ha-icon-button>`,
+        };
+      }
+      columns.automation = {
         title: "",
-        label: this.hass.localize("ui.panel.config.tag.headers.write"),
         type: "icon-button",
         template: (tag) =>
           html` <ha-icon-button
             .tag=${tag}
-            @click=${this._handleWriteClick}
-            .label=${this.hass.localize("ui.panel.config.tag.write")}
-            .path=${mdiContentDuplicate}
+            @click=${this._handleAutomationClick}
+            .label=${this.hass.localize(
+              "ui.panel.config.tag.create_automation"
+            )}
+            .path=${mdiRobot}
           ></ha-icon-button>`,
       };
+      columns.edit = {
+        title: "",
+        type: "icon-button",
+        template: (tag) =>
+          html` <ha-icon-button
+            .tag=${tag}
+            @click=${this._handleEditClick}
+            .label=${this.hass.localize("ui.panel.config.tag.edit")}
+            .path=${mdiCog}
+          ></ha-icon-button>`,
+      };
+      return columns;
     }
-    columns.automation = {
-      title: "",
-      type: "icon-button",
-      template: (tag) =>
-        html` <ha-icon-button
-          .tag=${tag}
-          @click=${this._handleAutomationClick}
-          .label=${this.hass.localize("ui.panel.config.tag.create_automation")}
-          .path=${mdiRobot}
-        ></ha-icon-button>`,
-    };
-    columns.edit = {
-      title: "",
-      type: "icon-button",
-      template: (tag) =>
-        html` <ha-icon-button
-          .tag=${tag}
-          @click=${this._handleEditClick}
-          .label=${this.hass.localize("ui.panel.config.tag.edit")}
-          .path=${mdiCog}
-        ></ha-icon-button>`,
-    };
-    return columns;
-  });
+  );
 
   private _data = memoizeOne((tags: Tag[]): TagRowData[] =>
     tags.map((tag) => ({
@@ -178,7 +183,11 @@ export class HaConfigTags extends SubscribeMixin(LitElement) {
         back-path="/config"
         .route=${this.route}
         .tabs=${configSections.tags}
-        .columns=${this._columns(this.narrow, this.hass.language)}
+        .columns=${this._columns(
+          this.narrow,
+          this.hass.language,
+          this.hass.localize
+        )}
         .data=${this._data(this._tags)}
         .noDataText=${this.hass.localize("ui.panel.config.tag.no_tags")}
         hasFab

src/panels/config/voice-assistants/ha-config-voice-assistants-expose.ts

@@ -56,6 +56,7 @@ import "../../../layouts/hass-tabs-subpage-data-table";
 import type { HaTabsSubpageDataTable } from "../../../layouts/hass-tabs-subpage-data-table";
 import { haStyle } from "../../../resources/styles";
 import { HomeAssistant, Route } from "../../../types";
+import { LocalizeFunc } from "../../../common/translations/localize";
 import "./expose/expose-assistant-icon";
 import { voiceAssistantTabs } from "./ha-config-voice-assistants";
 import { showExposeEntityDialog } from "./show-dialog-expose-entity";
@@ -127,7 +128,8 @@ export class VoiceAssistantsExpose extends LitElement {
             string[] | undefined
           >
         | undefined,
-      _language: string
+      _language: string,
+      localize: LocalizeFunc
     ): DataTableColumnContainer => ({
       icon: {
         title: "",
@@ -143,9 +145,7 @@ export class VoiceAssistantsExpose extends LitElement {
       },
       name: {
         main: true,
-        title: this.hass.localize(
-          "ui.panel.config.voice_assistants.expose.headers.name"
-        ),
+        title: localize("ui.panel.config.voice_assistants.expose.headers.name"),
         sortable: true,
         filterable: true,
         direction: "asc",
@@ -156,16 +156,14 @@ export class VoiceAssistantsExpose extends LitElement {
         `,
       },
       area: {
-        title: this.hass.localize(
-          "ui.panel.config.voice_assistants.expose.headers.area"
-        ),
+        title: localize("ui.panel.config.voice_assistants.expose.headers.area"),
         sortable: true,
         hidden: narrow,
         filterable: true,
         width: "15%",
       },
       assistants: {
-        title: this.hass.localize(
+        title: localize(
           "ui.panel.config.voice_assistants.expose.headers.assistants"
         ),
         sortable: true,
@@ -192,7 +190,7 @@ export class VoiceAssistantsExpose extends LitElement {
           })}`,
       },
       aliases: {
-        title: this.hass.localize(
+        title: localize(
           "ui.panel.config.voice_assistants.expose.headers.aliases"
         ),
         sortable: true,
@@ -527,7 +525,8 @@ export class VoiceAssistantsExpose extends LitElement {
           this.narrow,
           this._availableAssistants(this.cloudStatus),
           this._supportedEntities,
-          this.hass.language
+          this.hass.language,
+          this.hass.localize
         )}
         .data=${filteredEntities}
         .activeFilters=${activeFilters}