20240628.0

package.json

@@ -155,7 +155,7 @@
     "@babel/plugin-transform-runtime": "7.24.7",
     "@babel/preset-env": "7.24.7",
     "@babel/preset-typescript": "7.24.7",
-    "@bundle-stats/plugin-webpack-filter": "4.13.2",
+    "@bundle-stats/plugin-webpack-filter": "4.13.3",
     "@koa/cors": "5.0.0",
     "@lokalise/node-api": "12.5.0",
     "@octokit/auth-oauth-device": "7.1.1",
@@ -185,8 +185,8 @@
     "@types/tar": "6.1.13",
     "@types/ua-parser-js": "0.7.39",
     "@types/webspeechapi": "0.0.29",
-    "@typescript-eslint/eslint-plugin": "7.13.1",
-    "@typescript-eslint/parser": "7.13.1",
+    "@typescript-eslint/eslint-plugin": "7.14.1",
+    "@typescript-eslint/parser": "7.14.1",
     "@web/dev-server": "0.1.38",
     "@web/dev-server-rollup": "0.4.1",
     "babel-loader": "9.1.3",
@@ -220,7 +220,7 @@
     "lodash.template": "4.5.0",
     "magic-string": "0.30.10",
     "map-stream": "0.0.7",
-    "mocha": "10.4.0",
+    "mocha": "10.5.0",
     "object-hash": "3.0.0",
     "open": "10.1.0",
     "pinst": "3.0.0",

pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name         = "home-assistant-frontend"
-version      = "20240627.0"
+version      = "20240628.0"
 license      = {text = "Apache-2.0"}
 description  = "The Home Assistant frontend"
 readme       = "README.md"

src/panels/config/application_credentials/dialog-add-application-credential.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-button";
 import "@material/mwc-list/mwc-list-item";
 import { mdiOpenInNew } from "@mdi/js";
 import { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
@@ -11,6 +10,7 @@ import "../../../components/ha-combo-box";
 import { createCloseHeading } from "../../../components/ha-dialog";
 import "../../../components/ha-markdown";
 import "../../../components/ha-textfield";
+import "../../../components/ha-button";
 import {
   ApplicationCredential,
   ApplicationCredentialsConfig,
@@ -231,10 +231,10 @@ export class DialogAddApplicationCredential extends LitElement {
               </div>
             `
           : html`
-              <mwc-button slot="primaryAction" @click=${this._abortDialog}>
+              <ha-button slot="secondaryAction" @click=${this._abortDialog}>
                 ${this.hass.localize("ui.common.cancel")}
-              </mwc-button>
-              <mwc-button
+              </ha-button>
+              <ha-button
                 slot="primaryAction"
                 .disabled=${!this._domain ||
                 !this._clientId ||
@@ -244,7 +244,7 @@ export class DialogAddApplicationCredential extends LitElement {
                 ${this.hass.localize(
                   "ui.panel.config.application_credentials.editor.add"
                 )}
-              </mwc-button>
+              </ha-button>
             `}
       </ha-dialog>
     `;

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

@@ -7,6 +7,7 @@ import { LocalizeFunc } from "../../../common/translations/localize";
 import {
   DataTableColumnContainer,
   SelectionChangedEvent,
+  SortingChangedEvent,
 } from "../../../components/data-table/ha-data-table";
 import "../../../components/ha-fab";
 import "../../../components/ha-help-tooltip";
@@ -27,6 +28,7 @@ import type { HaTabsSubpageDataTable } from "../../../layouts/hass-tabs-subpage-
 import { HomeAssistant, Route } from "../../../types";
 import { configSections } from "../ha-panel-config";
 import { showAddApplicationCredentialDialog } from "./show-dialog-add-application-credential";
+import { storage } from "../../../common/decorators/storage";
 
 @customElement("ha-config-application-credentials")
 export class HaConfigApplicationCredentials extends LitElement {
@@ -45,6 +47,35 @@ export class HaConfigApplicationCredentials extends LitElement {
   @query("hass-tabs-subpage-data-table", true)
   private _dataTable!: HaTabsSubpageDataTable;
 
+  @storage({
+    key: "application-credentials-table-sort",
+    state: false,
+    subscribe: false,
+  })
+  private _activeSorting?: SortingChangedEvent;
+
+  @storage({
+    key: "application-credentials-table-column-order",
+    state: false,
+    subscribe: false,
+  })
+  private _activeColumnOrder?: string[];
+
+  @storage({
+    key: "application-credentials-table-hidden-columns",
+    state: false,
+    subscribe: false,
+  })
+  private _activeHiddenColumns?: string[];
+
+  @storage({
+    storage: "sessionStorage",
+    key: "application-credentials-table-search",
+    state: true,
+    subscribe: false,
+  })
+  private _filter = "";
+
   private _columns = memoizeOne(
     (narrow: boolean, localize: LocalizeFunc): DataTableColumnContainer => {
       const columns: DataTableColumnContainer<ApplicationCredential> = {
@@ -53,13 +84,15 @@ export class HaConfigApplicationCredentials extends LitElement {
             "ui.panel.config.application_credentials.picker.headers.name"
           ),
           sortable: true,
+          filterable: true,
           direction: "asc",
           grows: true,
         },
         client_id: {
           title: localize(
             "ui.panel.config.application_credentials.picker.headers.client_id"
           ),
+          filterable: true,
           width: "30%",
           hidden: narrow,
         },
@@ -68,6 +101,7 @@ export class HaConfigApplicationCredentials extends LitElement {
             "ui.panel.config.application_credentials.picker.headers.application"
           ),
           sortable: true,
+          filterable: true,
           width: "30%",
           direction: "asc",
         },
@@ -84,7 +118,7 @@ export class HaConfigApplicationCredentials extends LitElement {
                   path: mdiDelete,
                   warning: true,
                   label: this.hass.localize("ui.common.delete"),
-                  action: () => this._removeCredential(credential),
+                  action: () => this._deleteCredential(credential),
                 },
               ]}
             >
@@ -128,11 +162,18 @@ export class HaConfigApplicationCredentials extends LitElement {
         selectable
         .selected=${this._selected.length}
         @selection-changed=${this._handleSelectionChanged}
+        .initialSorting=${this._activeSorting}
+        .columnOrder=${this._activeColumnOrder}
+        .hiddenColumns=${this._activeHiddenColumns}
+        @columns-changed=${this._handleColumnsChanged}
+        @sorting-changed=${this._handleSortingChanged}
+        .filter=${this._filter}
+        @search-changed=${this._handleSearchChange}
       >
         <div class="header-btns" slot="selection-bar">
           ${!this.narrow
             ? html`
-                <mwc-button @click=${this._removeSelected} class="warning"
+                <mwc-button @click=${this._deleteSelected} class="warning"
                   >${this.hass.localize(
                     "ui.panel.config.application_credentials.picker.remove_selected.button"
                   )}</mwc-button
@@ -142,7 +183,7 @@ export class HaConfigApplicationCredentials extends LitElement {
                 <ha-icon-button
                   class="warning"
                   id="remove-btn"
-                  @click=${this._removeSelected}
+                  @click=${this._deleteSelected}
                   .path=${mdiDelete}
                   .label=${this.hass.localize("ui.common.remove")}
                 ></ha-icon-button>
@@ -174,7 +215,7 @@ export class HaConfigApplicationCredentials extends LitElement {
     this._selected = ev.detail.value;
   }
 
-  private _removeCredential = async (credential) => {
+  private _deleteCredential = async (credential) => {
     const confirm = await showConfirmationDialog(this, {
       title: this.hass.localize(
         `ui.panel.config.application_credentials.picker.remove.confirm_title`
@@ -190,9 +231,10 @@ export class HaConfigApplicationCredentials extends LitElement {
       return;
     }
     await deleteApplicationCredential(this.hass, credential.id);
+    await this._fetchApplicationCredentials();
   };
 
-  private _removeSelected() {
+  private _deleteSelected() {
     showConfirmationDialog(this, {
       title: this.hass.localize(
         `ui.panel.config.application_credentials.picker.remove_selected.confirm_title`,
@@ -224,7 +266,7 @@ export class HaConfigApplicationCredentials extends LitElement {
           return;
         }
         this._dataTable.clearSelection();
-        this._fetchApplicationCredentials();
+        await this._fetchApplicationCredentials();
       },
     });
   }
@@ -252,6 +294,19 @@ export class HaConfigApplicationCredentials extends LitElement {
     });
   }
 
+  private _handleSortingChanged(ev: CustomEvent) {
+    this._activeSorting = ev.detail;
+  }
+
+  private _handleColumnsChanged(ev: CustomEvent) {
+    this._activeColumnOrder = ev.detail.columnOrder;
+    this._activeHiddenColumns = ev.detail.hiddenColumns;
+  }
+
+  private _handleSearchChange(ev: CustomEvent) {
+    this._filter = ev.detail.value;
+  }
+
   static get styles(): CSSResultGroup {
     return css`
       .table-header {

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

@@ -265,7 +265,7 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
       const columns: DataTableColumnContainer<AutomationItem> = {
         icon: {
           title: "",
-          label: localize("ui.panel.config.automation.picker.headers.state"),
+          label: localize("ui.panel.config.automation.picker.headers.icon"),
           type: "icon",
           moveable: false,
           showNarrow: true,

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

@@ -243,7 +243,7 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
       const columns: DataTableColumnContainer<SceneItem> = {
         icon: {
           title: "",
-          label: localize("ui.panel.config.scene.picker.headers.state"),
+          label: localize("ui.panel.config.scene.picker.headers.icon"),
           moveable: false,
           showNarrow: true,
           type: "icon",

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

@@ -252,7 +252,7 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
           title: "",
           showNarrow: true,
           moveable: false,
-          label: localize("ui.panel.config.script.picker.headers.state"),
+          label: localize("ui.panel.config.script.picker.headers.icon"),
           type: "icon",
           template: (script) =>
             html`<ha-state-icon

src/panels/config/users/dialog-add-user.ts

@@ -290,6 +290,11 @@ export class DialogAddUser extends LitElement {
     }
 
     user.username = this._username;
+    user.credentials = [
+      {
+        type: "homeassistant",
+      },
+    ];
     this._params!.userAddedCallback(user);
     this._close();
   }

src/panels/lovelace/cards/hui-card.ts

@@ -31,6 +31,8 @@ export class HuiCard extends ReactiveElement {
 
   @property({ attribute: false }) public hass?: HomeAssistant;
 
+  private _elementConfig?: LovelaceCardConfig;
+
   public load() {
     if (!this.config) {
       throw new Error("Cannot build card without config");
@@ -43,9 +45,6 @@ export class HuiCard extends ReactiveElement {
   private _listeners: MediaQueriesListener[] = [];
 
   protected createRenderRoot() {
-    const style = document.createElement("style");
-    style.textContent = `hui-card { display: contents }`;
-    this.append(style);
     return this;
   }
 
@@ -84,8 +83,18 @@ export class HuiCard extends ReactiveElement {
     return this._element?.getLayoutOptions?.() ?? {};
   }
 
+  private _updateElement(config: LovelaceCardConfig) {
+    if (!this._element) {
+      return;
+    }
+    this._element.setConfig(config);
+    this._elementConfig = config;
+    fireEvent(this, "card-updated");
+  }
+
   private _loadElement(config: LovelaceCardConfig) {
     this._element = createCardElement(config);
+    this._elementConfig = config;
     if (this.hass) {
       this._element.hass = this.hass;
     }
@@ -135,15 +144,14 @@ export class HuiCard extends ReactiveElement {
     super.update(changedProps);
 
     if (this._element) {
-      if (changedProps.has("config") && this.hasUpdated) {
-        const oldConfig = changedProps.get("config");
-        if (this.config !== oldConfig && this.config) {
-          const typeChanged = this.config?.type !== oldConfig?.type;
+      if (changedProps.has("config")) {
+        const elementConfig = this._elementConfig;
+        if (this.config !== elementConfig && this.config) {
+          const typeChanged = this.config?.type !== elementConfig?.type;
           if (typeChanged) {
             this._loadElement(this.config);
           } else {
-            this._element?.setConfig(this.config);
-            fireEvent(this, "card-updated");
+            this._updateElement(this.config);
           }
         }
       }

src/panels/lovelace/cards/hui-horizontal-stack-card.ts

@@ -30,6 +30,9 @@ export class HuiHorizontalStackCard extends HuiStackCard {
           height: 100%;
           gap: var(--horizontal-stack-card-gap, var(--stack-card-gap, 8px));
         }
+        #root > hui-card {
+          display: contents;
+        }
         #root > hui-card > * {
           flex: 1 1 0;
           min-width: 0;

src/translations/en.json

@@ -2733,7 +2733,8 @@
               "actions": "Actions",
               "state": "State",
               "category": "Category",
-              "area": "Area"
+              "area": "Area",
+              "icon": "Icon"
             },
             "bulk_action": "Action",
             "bulk_actions": {
@@ -3608,7 +3609,8 @@
               "name": "Name",
               "state": "State",
               "category": "Category",
-              "area": "Area"
+              "area": "Area",
+              "icon": "Icon"
             },
             "edit_category": "[%key:ui::panel::config::automation::picker::edit_category%]",
             "assign_category": "[%key:ui::panel::config::automation::picker::assign_category%]",
@@ -3727,7 +3729,8 @@
               "name": "Name",
               "last_activated": "Last activated",
               "category": "Category",
-              "area": "Area"
+              "area": "Area",
+              "icon": "Icon"
             },
             "edit_category": "[%key:ui::panel::config::automation::picker::edit_category%]",
             "assign_category": "[%key:ui::panel::config::automation::picker::assign_category%]",