20231002.0 (#18102)

.github/workflows/release.yaml

@@ -74,7 +74,7 @@ jobs:
           echo "home-assistant-frontend==$version" > ./requirements.txt
 
       - name: Build wheels
-        uses: home-assistant/wheels@2023.09.1
+        uses: home-assistant/wheels@2023.10.1
         with:
           abi: cp311
           tag: musllinux_1_2

package.json

@@ -163,7 +163,7 @@
     "@lokalise/node-api": "12.0.0",
     "@octokit/auth-oauth-device": "6.0.1",
     "@octokit/plugin-retry": "6.0.1",
-    "@octokit/rest": "20.0.1",
+    "@octokit/rest": "20.0.2",
     "@open-wc/dev-server-hmr": "0.1.4",
     "@rollup/plugin-babel": "6.0.3",
     "@rollup/plugin-commonjs": "25.0.4",
@@ -180,20 +180,20 @@
     "@types/leaflet": "1.9.6",
     "@types/leaflet-draw": "1.0.8",
     "@types/luxon": "3.3.2",
-    "@types/mocha": "10.0.1",
+    "@types/mocha": "10.0.2",
     "@types/qrcode": "1.5.2",
     "@types/serve-handler": "6.1.2",
-    "@types/sortablejs": "1.15.2",
+    "@types/sortablejs": "1.15.3",
     "@types/tar": "6.1.6",
     "@types/ua-parser-js": "0.7.37",
     "@types/webspeechapi": "0.0.29",
-    "@typescript-eslint/eslint-plugin": "6.7.2",
-    "@typescript-eslint/parser": "6.7.2",
+    "@typescript-eslint/eslint-plugin": "6.7.3",
+    "@typescript-eslint/parser": "6.7.3",
     "@web/dev-server": "0.1.38",
     "@web/dev-server-rollup": "0.4.1",
     "babel-loader": "9.1.3",
     "babel-plugin-template-html-minifier": "4.1.0",
-    "chai": "4.3.8",
+    "chai": "4.3.10",
     "del": "7.1.0",
     "eslint": "8.50.0",
     "eslint-config-airbnb-base": "15.0.0",
@@ -205,11 +205,11 @@
     "eslint-plugin-lit": "1.9.1",
     "eslint-plugin-lit-a11y": "4.1.0",
     "eslint-plugin-unused-imports": "3.0.0",
-    "eslint-plugin-wc": "2.0.3",
+    "eslint-plugin-wc": "2.0.4",
     "esprima": "4.0.1",
     "fancy-log": "2.0.0",
     "fs-extra": "11.1.1",
-    "glob": "10.3.7",
+    "glob": "10.3.10",
     "gulp": "4.0.2",
     "gulp-flatmap": "1.0.2",
     "gulp-json-transform": "0.4.8",

pyproject.toml

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

src/common/dom/apply_themes_on_element.ts

@@ -1,5 +1,5 @@
 import { ThemeVars } from "../../data/ws-themes";
-import { darkStyles, derivedStyles } from "../../resources/styles";
+import { darkStyles, derivedStyles } from "../../resources/styles-data";
 import type { HomeAssistant } from "../../types";
 import {
   hex2rgb,

src/components/ha-form/ha-form.ts

@@ -189,8 +189,13 @@ export class HaForm extends LitElement implements HaFormElement {
         ? ev.detail.value
         : { [schema.name]: ev.detail.value };
 
+      this.data = {
+        ...this.data,
+        ...newValue,
+      };
+
       fireEvent(this, "value-changed", {
-        value: { ...this.data, ...newValue },
+        value: this.data,
       });
     });
   }

src/components/ha-formfield.ts

@@ -7,22 +7,25 @@ import { fireEvent } from "../common/dom/fire_event";
 @customElement("ha-formfield")
 export class HaFormfield extends FormfieldBase {
   protected _labelClick() {
-    const input = this.input;
-    if (input) {
-      input.focus();
-      switch (input.tagName) {
-        case "HA-CHECKBOX":
-        case "HA-RADIO":
-          if ((input as any).disabled) {
-            break;
-          }
-          (input as any).checked = !(input as any).checked;
-          fireEvent(input, "change");
-          break;
-        default:
-          input.click();
-          break;
-      }
+    const input = this.input as HTMLInputElement | undefined;
+    if (!input) return;
+
+    input.focus();
+    if (input.disabled) {
+      return;
+    }
+    switch (input.tagName) {
+      case "HA-CHECKBOX":
+        input.checked = !input.checked;
+        fireEvent(input, "change");
+        break;
+      case "HA-RADIO":
+        input.checked = true;
+        fireEvent(input, "change");
+        break;
+      default:
+        input.click();
+        break;
     }
   }
 

src/onboarding/onboarding-integrations.ts

@@ -15,7 +15,6 @@ import { stringCompare } from "../common/string/compare";
 import { LocalizeFunc } from "../common/translations/localize";
 import { ConfigEntry, subscribeConfigEntries } from "../data/config_entries";
 import { subscribeConfigFlowInProgress } from "../data/config_flow";
-import { DataEntryFlowProgress } from "../data/data_entry_flow";
 import { domainToName } from "../data/integration";
 import { scanUSBDevices } from "../data/usb";
 import { SubscribeMixin } from "../mixins/subscribe-mixin";
@@ -24,12 +23,13 @@ import "./integration-badge";
 import { onBoardingStyles } from "./styles";
 
 const HIDDEN_DOMAINS = new Set([
+  "google_translate",
   "hassio",
   "met",
   "radio_browser",
   "rpi_power",
+  "shopping_list",
   "sun",
-  "google_translate",
 ]);
 
 @customElement("onboarding-integrations")
@@ -40,19 +40,20 @@ class OnboardingIntegrations extends SubscribeMixin(LitElement) {
 
   @state() private _entries: ConfigEntry[] = [];
 
-  @state() private _discovered?: DataEntryFlowProgress[];
+  @state() private _discoveredDomains?: Set<string>;
 
   public hassSubscribe(): Array<UnsubscribeFunc | Promise<UnsubscribeFunc>> {
     return [
       subscribeConfigFlowInProgress(this.hass, (flows) => {
-        this._discovered = flows.filter(
-          (flow) => !HIDDEN_DOMAINS.has(flow.handler)
+        this._discoveredDomains = new Set(
+          flows
+            .filter((flow) => !HIDDEN_DOMAINS.has(flow.handler))
+            .map((flow) => flow.handler)
+        );
+        this.hass.loadBackendTranslation(
+          "title",
+          Array.from(this._discoveredDomains)
         );
-        const integrations: Set<string> = new Set();
-        for (const flow of this._discovered) {
-          integrations.add(flow.handler);
-        }
-        this.hass.loadBackendTranslation("title", Array.from(integrations));
       }),
       subscribeConfigEntries(
         this.hass,
@@ -97,41 +98,27 @@ class OnboardingIntegrations extends SubscribeMixin(LitElement) {
   }
 
   protected render() {
-    if (!this._discovered) {
+    if (!this._discoveredDomains) {
       return nothing;
     }
     // Render discovered and existing entries together sorted by localized title.
-    const entries: Array<[string, string]> = this._entries.map((entry) => [
-      entry.domain,
-      domainToName(this.hass.localize, entry.domain),
-    ]);
-    const discovered: Array<[string, string]> = this._discovered.map((flow) => [
-      flow.handler,
-      domainToName(this.hass.localize, flow.handler),
-    ]);
-    let domains = [...entries, ...discovered].sort((a, b) =>
+    let uniqueDomains: Set<string> = new Set();
+    this._entries.forEach((entry) => {
+      uniqueDomains.add(entry.domain);
+    });
+    uniqueDomains = new Set([...uniqueDomains, ...this._discoveredDomains]);
+    let domains: Array<[string, string]> = [];
+    for (const domain of uniqueDomains.values()) {
+      domains.push([domain, domainToName(this.hass.localize, domain)]);
+    }
+    domains = domains.sort((a, b) =>
       stringCompare(a[0], b[0], this.hass.locale.language)
     );
 
-    const foundDevices = domains.length;
+    const foundIntegrations = domains.length;
 
     if (domains.length > 12) {
-      const uniqueDomains: Set<string> = new Set();
-      domains.forEach(([domain]) => {
-        uniqueDomains.add(domain);
-      });
-      if (uniqueDomains.size < domains.length) {
-        domains = domains.filter(([domain]) => {
-          if (uniqueDomains.has(domain)) {
-            uniqueDomains.delete(domain);
-            return true;
-          }
-          return false;
-        });
-      }
-      if (domains.length > 12) {
-        domains = domains.slice(0, 11);
-      }
+      domains = domains.slice(0, 11);
     }
 
     return html`
@@ -152,11 +139,11 @@ class OnboardingIntegrations extends SubscribeMixin(LitElement) {
               .darkOptimizedIcon=${this.hass.themes?.darkMode}
             ></integration-badge>`
         )}
-        ${foundDevices > domains.length
+        ${foundIntegrations > domains.length
           ? html`<div class="more">
               ${this.onboardingLocalize(
                 "ui.panel.page-onboarding.integration.more_integrations",
-                { count: foundDevices - domains.length }
+                { count: foundIntegrations - domains.length }
               )}
             </div>`
           : nothing}

src/panels/config/storage/ha-config-section-storage.ts

@@ -110,16 +110,14 @@ class HaConfigSectionStorage extends LitElement {
                     ></ha-metric>
                     ${this._hostInfo.disk_life_time !== "" &&
                     this._hostInfo.disk_life_time >= 10
-                      ? html`
+                      ? // prettier-ignore
+                        html`
                           <ha-metric
                             .heading=${this.hass.localize(
                               "ui.panel.config.storage.emmc_lifetime_used"
                             )}
                             .value=${this._hostInfo.disk_life_time}
-                            .tooltip=${`${
-                              this._hostInfo.disk_life_time - 10
-                            } % -
-                          ${this._hostInfo.disk_life_time} %`}
+                            .tooltip=${`${this._hostInfo.disk_life_time - 10}% - ${this._hostInfo.disk_life_time}%`}
                             class="emmc"
                           ></ha-metric>
                         `

src/panels/config/voice-assistants/assist-pipeline-detail/assist-pipeline-detail-wakeword.ts

@@ -14,6 +14,7 @@ import { AssistPipeline } from "../../../../data/assist_pipeline";
 import { HomeAssistant } from "../../../../types";
 import { fetchWakeWordInfo, WakeWord } from "../../../../data/wake_word";
 import { documentationUrl } from "../../../../util/documentation-url";
+import { fireEvent } from "../../../../common/dom/fire_event";
 
 @customElement("assist-pipeline-detail-wakeword")
 export class AssistPipelineDetailWakeWord extends LitElement {
@@ -71,6 +72,11 @@ export class AssistPipelineDetailWakeWord extends LitElement {
       changedProps.has("data") &&
       changedProps.get("data")?.wake_word_entity !== this.data?.wake_word_entity
     ) {
+      if (this.data?.wake_word_id) {
+        fireEvent(this, "value-changed", {
+          value: { ...this.data, wake_word_id: undefined },
+        });
+      }
       this._fetchWakeWords();
     }
   }
@@ -122,13 +128,25 @@ export class AssistPipelineDetailWakeWord extends LitElement {
   }
 
   private async _fetchWakeWords() {
+    this._wakeWords = undefined;
     if (!this.data?.wake_word_entity) {
-      this._wakeWords = undefined;
       return;
     }
-    this._wakeWords = (
-      await fetchWakeWordInfo(this.hass, this.data.wake_word_entity)
-    ).wake_words;
+    const wakeWordEntity = this.data.wake_word_entity;
+    const wakewordInfo = await fetchWakeWordInfo(this.hass, wakeWordEntity);
+    if (this.data.wake_word_entity !== wakeWordEntity) {
+      // wake word entity changed while we were fetching
+      return;
+    }
+    this._wakeWords = wakewordInfo.wake_words;
+    if (
+      !this.data?.wake_word_id ||
+      !this._wakeWords.some((ww) => ww.id === this.data!.wake_word_id)
+    ) {
+      fireEvent(this, "value-changed", {
+        value: { ...this.data, wake_word_id: this._wakeWords[0]?.id },
+      });
+    }
   }
 
   static get styles(): CSSResultGroup {

src/panels/config/voice-assistants/debug/assist-pipeline-run-debug.ts

@@ -246,7 +246,10 @@ export class AssistPipelineRunDebug extends LitElement {
           const url = updatedRun.tts!.tts_output!.url;
           const audio = new Audio(url);
           audio.addEventListener("ended", () => {
-            if (this._continueConversationCheckbox.checked) {
+            if (
+              this.isConnected &&
+              this._continueConversationCheckbox.checked
+            ) {
               this._runAudioWakeWordPipeline();
             } else {
               this._finished = true;
@@ -320,7 +323,10 @@ export class AssistPipelineRunDebug extends LitElement {
           const url = updatedRun.tts!.tts_output!.url;
           const audio = new Audio(url);
           audio.addEventListener("ended", () => {
-            if (this._continueConversationCheckbox.checked) {
+            if (
+              this.isConnected &&
+              this._continueConversationCheckbox.checked
+            ) {
               this._runAudioPipeline();
             } else {
               this._finished = true;

src/resources/ha-style.ts

@@ -1,5 +1,5 @@
 import "@polymer/polymer/lib/elements/custom-style";
-import { derivedStyles } from "./styles";
+import { derivedStyles } from "./styles-data";
 
 export const DEFAULT_PRIMARY_COLOR = "#03a9f4";
 export const DEFAULT_ACCENT_COLOR = "#ff9800";