20240802.0 (#21562)

package.json

@@ -33,7 +33,7 @@
     "@codemirror/legacy-modes": "6.4.0",
     "@codemirror/search": "6.5.6",
     "@codemirror/state": "6.4.1",
-    "@codemirror/view": "6.29.0",
+    "@codemirror/view": "6.29.1",
     "@egjs/hammerjs": "2.0.17",
     "@formatjs/intl-datetimeformat": "6.12.5",
     "@formatjs/intl-displaynames": "6.6.8",
@@ -213,14 +213,14 @@
     "gulp-rename": "2.0.0",
     "gulp-zopfli-green": "6.0.2",
     "html-minifier-terser": "7.2.0",
-    "husky": "9.1.3",
+    "husky": "9.1.4",
     "instant-mocha": "1.5.2",
     "jszip": "3.10.1",
     "lint-staged": "15.2.7",
     "lit-analyzer": "2.0.3",
     "lodash.merge": "4.6.2",
     "lodash.template": "4.5.0",
-    "magic-string": "0.30.10",
+    "magic-string": "0.30.11",
     "map-stream": "0.0.7",
     "mocha": "10.5.0",
     "object-hash": "3.0.0",

pyproject.toml

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

src/components/ha-control-number-buttons.ts

@@ -196,8 +196,8 @@ export class HaControlNumberButton extends LitElement {
         --control-number-buttons-background-opacity: 0.2;
         --control-number-buttons-border-radius: 10px;
         --mdc-icon-size: 16px;
-        height: 40px;
-        width: 200px;
+        height: var(--feature-height);
+        width: 100%;
         color: var(--primary-text-color);
         -webkit-tap-highlight-color: transparent;
         font-style: normal;

src/components/ha-selector/ha-selector-template.ts

@@ -1,9 +1,18 @@
-import { css, html, LitElement } from "lit";
-import { customElement, property } from "lit/decorators";
+import { css, html, nothing, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import { HomeAssistant } from "../../types";
+import { documentationUrl } from "../../util/documentation-url";
 import "../ha-code-editor";
 import "../ha-input-helper-text";
+import "../ha-alert";
+
+const WARNING_STRINGS = [
+  "template:",
+  "sensor:",
+  "state:",
+  "platform: template",
+];
 
 @customElement("ha-selector-template")
 export class HaTemplateSelector extends LitElement {
@@ -19,9 +28,33 @@ export class HaTemplateSelector extends LitElement {
 
   @property({ type: Boolean }) public required = true;
 
+  @state() private warn: string | undefined = undefined;
+
   protected render() {
     return html`
-      ${this.label ? html`<p>${this.label}${this.required ? "*" : ""}</p>` : ""}
+      ${this.warn
+        ? html`<ha-alert alert-type="warning"
+            >${this.hass.localize(
+              "ui.components.selectors.template.yaml_warning",
+              { string: this.warn }
+            )}
+            <br />
+            <a
+              target="_blank"
+              rel="noopener noreferrer"
+              href=${documentationUrl(
+                this.hass,
+                "/docs/configuration/templating/"
+              )}
+              >${this.hass.localize(
+                "ui.components.selectors.template.learn_more"
+              )}</a
+            ></ha-alert
+          >`
+        : nothing}
+      ${this.label
+        ? html`<p>${this.label}${this.required ? "*" : ""}</p>`
+        : nothing}
       <ha-code-editor
         mode="jinja2"
         .hass=${this.hass}
@@ -36,7 +69,7 @@ export class HaTemplateSelector extends LitElement {
       ></ha-code-editor>
       ${this.helper
         ? html`<ha-input-helper-text>${this.helper}</ha-input-helper-text>`
-        : ""}
+        : nothing}
     `;
   }
 
@@ -45,6 +78,7 @@ export class HaTemplateSelector extends LitElement {
     if (this.value === value) {
       return;
     }
+    this.warn = WARNING_STRINGS.find((str) => value.includes(str));
     fireEvent(this, "value-changed", { value });
   }
 

src/data/conversation.ts

@@ -1,6 +1,10 @@
 import { ensureArray } from "../common/array/ensure-array";
 import { HomeAssistant } from "../types";
 
+export const enum ConversationEntityFeature {
+  CONTROL = 1,
+}
+
 interface IntentTarget {
   type: "area" | "device" | "entity" | "domain" | "device_class" | "custom";
   name: string;

src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts

@@ -41,6 +41,8 @@ import { AudioRecorder } from "../../util/audio-recorder";
 import { documentationUrl } from "../../util/documentation-url";
 import { showAlertDialog } from "../generic/show-dialog-box";
 import { VoiceCommandDialogParams } from "./show-ha-voice-command-dialog";
+import { supportsFeature } from "../../common/entity/supports-feature";
+import { ConversationEntityFeature } from "../../data/conversation";
 
 interface Message {
   who: string;
@@ -136,6 +138,12 @@ export class HaVoiceCommandDialog extends LitElement {
       return nothing;
     }
 
+    const controlHA = !this._pipeline
+      ? false
+      : supportsFeature(
+          this.hass.states[this._pipeline?.conversation_engine],
+          ConversationEntityFeature.CONTROL
+        );
     const supportsMicrophone = AudioRecorder.isSupported;
     const supportsSTT = this._pipeline?.stt_engine;
 
@@ -212,6 +220,15 @@ export class HaVoiceCommandDialog extends LitElement {
             ></ha-icon-button>
           </a>
         </ha-dialog-header>
+        ${controlHA
+          ? nothing
+          : html`
+              <ha-alert>
+                ${this.hass.localize(
+                  "ui.dialogs.voice_command.conversation_no_control"
+                )}
+              </ha-alert>
+            `}
         <div class="messages">
           <div class="messages-container" id="scroll-container">
             ${this._conversation!.map(
@@ -469,10 +486,11 @@ export class HaVoiceCommandDialog extends LitElement {
       who: "user",
       text: "…",
     };
-    this._audioRecorder.start().then(() => {
-      this._addMessage(userMessage);
-      this.requestUpdate("_audioRecorder");
-    });
+    await this._audioRecorder.start();
+
+    this._addMessage(userMessage);
+    this.requestUpdate("_audioRecorder");
+
     const hassMessage: Message = {
       who: "hass",
       text: "…",

src/panels/config/entities/entity-registry-settings-editor.ts

@@ -69,7 +69,10 @@ import {
   updateEntityRegistryEntry,
 } from "../../../data/entity_registry";
 import { entityIcon, entryIcon } from "../../../data/icons";
-import { domainToName } from "../../../data/integration";
+import {
+  domainToName,
+  fetchIntegrationManifest,
+} from "../../../data/integration";
 import { getNumberDeviceClassConvertibleUnits } from "../../../data/number";
 import {
   createOptionsFlow,
@@ -1459,7 +1462,12 @@ export class EntityRegistrySettingsEditor extends LitElement {
   }
 
   private async _showOptionsFlow() {
-    showOptionsFlowDialog(this, this.helperConfigEntry!);
+    showOptionsFlowDialog(this, this.helperConfigEntry!, {
+      manifest: await fetchIntegrationManifest(
+        this.hass,
+        this.helperConfigEntry!.domain
+      ),
+    });
   }
 
   private _switchAsDomainsSorted = memoizeOne(

src/panels/config/helpers/dialog-helper-detail.ts

@@ -25,7 +25,10 @@ import { createInputDateTime } from "../../../data/input_datetime";
 import { createInputNumber } from "../../../data/input_number";
 import { createInputSelect } from "../../../data/input_select";
 import { createInputText } from "../../../data/input_text";
-import { domainToName } from "../../../data/integration";
+import {
+  domainToName,
+  fetchIntegrationManifest,
+} from "../../../data/integration";
 import { createSchedule } from "../../../data/schedule";
 import { createTimer } from "../../../data/timer";
 import { showConfigFlowDialog } from "../../../dialogs/config-flow/show-dialog-config-flow";
@@ -325,6 +328,7 @@ export class DialogHelperDetail extends LitElement {
     } else {
       showConfigFlowDialog(this, {
         startFlowHandler: domain,
+        manifest: await fetchIntegrationManifest(this.hass, domain),
         dialogClosedCallback: this._params!.dialogClosedCallback,
       });
       this.closeDialog();

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

@@ -74,6 +74,7 @@ import {
 import {
   IntegrationManifest,
   domainToName,
+  fetchIntegrationManifest,
   fetchIntegrationManifests,
 } from "../../../data/integration";
 import {
@@ -1026,6 +1027,7 @@ ${rejected
     }
     showConfigFlowDialog(this, {
       startFlowHandler: domain,
+      manifest: await fetchIntegrationManifest(this.hass, domain),
       showAdvanced: this.hass.userData?.showAdvanced,
     });
   }

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

@@ -48,6 +48,7 @@ import {
   getScriptEditorInitData,
   getScriptStateConfig,
   hasScriptFields,
+  migrateAutomationAction,
   showScriptEditor,
   triggerScript,
 } from "../../../data/script";
@@ -487,6 +488,7 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
     if (value && !Array.isArray(value)) {
       config.sequence = [value];
     }
+    config.sequence = migrateAutomationAction(config.sequence);
     return config;
   }
 

src/panels/lovelace/components/hui-action-editor.ts

@@ -292,7 +292,7 @@ export class HuiActionEditor extends LitElement {
     ev.stopPropagation();
     const value = {
       ...this.config!,
-      perform_action: ev.detail.value.service || "",
+      perform_action: ev.detail.value.action || "",
       data: ev.detail.value.data,
       target: ev.detail.value.target || {},
     };

src/panels/lovelace/editor/badge-editor/hui-badge-element-editor.ts

@@ -1,3 +1,5 @@
+import "@polymer/paper-tabs/paper-tab";
+import "@polymer/paper-tabs/paper-tabs";
 import { css, CSSResultGroup, html, nothing, TemplateResult } from "lit";
 import { customElement, state } from "lit/decorators";
 import { LovelaceBadgeConfig } from "../../../../data/lovelace/config/badge";

src/panels/lovelace/editor/card-editor/hui-card-element-editor.ts

@@ -1,5 +1,5 @@
-import "@polymer/paper-tabs/paper-tab";
-import "@polymer/paper-tabs/paper-tabs";
+import "@material/mwc-tab-bar/mwc-tab-bar";
+import "@material/mwc-tab/mwc-tab";
 import { CSSResultGroup, TemplateResult, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { LovelaceCardConfig } from "../../../../data/lovelace/config/card";

src/panels/lovelace/editor/hui-picture-elements-card-row-editor.ts

@@ -8,6 +8,7 @@ import "../../../components/ha-svg-icon";
 import { HomeAssistant } from "../../../types";
 import "../../../components/ha-select";
 import type { HaSelect } from "../../../components/ha-select";
+import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box";
 import {
   ConditionalElementConfig,
   IconElementConfig,
@@ -77,7 +78,7 @@ export class HuiPictureElementsCardRowEditor extends LitElement {
                   `
                 : nothing}
               <ha-icon-button
-                .label=${this.hass!.localize("ui.common.clear")}
+                .label=${this.hass!.localize("ui.common.delete")}
                 .path=${mdiClose}
                 class="remove-icon"
                 .index=${index}
@@ -187,11 +188,28 @@ export class HuiPictureElementsCardRowEditor extends LitElement {
 
   private _removeRow(ev: CustomEvent): void {
     const index = (ev.currentTarget as any).index;
-    const newElements = this.elements!.concat();
-
-    newElements.splice(index, 1);
-
-    fireEvent(this, "elements-changed", { elements: newElements });
+    const element = this.elements?.[index];
+    if (!element) {
+      return;
+    }
+    showConfirmationDialog(this, {
+      text: this.hass!.localize(
+        "ui.panel.lovelace.editor.card.picture-elements.confirm_delete_element",
+        {
+          type:
+            this.hass!.localize(
+              `ui.panel.lovelace.editor.card.picture-elements.element_types.${element.type}`
+            ) || element.type,
+        }
+      ),
+      confirmText: this.hass!.localize("ui.common.delete"),
+      destructive: true,
+      confirm: () => {
+        const newElements = this.elements!.concat();
+        newElements.splice(index, 1);
+        fireEvent(this, "elements-changed", { elements: newElements });
+      },
+    });
   }
 
   private _editRow(ev: CustomEvent): void {

src/translations/en.json

@@ -420,6 +420,10 @@
             "manual": "Manual Entry"
           }
         },
+        "template": {
+          "yaml_warning": "It appears you may be writing YAML into this template field (saw ''{string}''), which is likely incorrect. This field is intended for templates only (e.g. '{{ states(sensor.test) > 0 }}' ).",
+          "learn_more": "Learn more about templating."
+        },
         "text": {
           "show_password": "Show password",
           "hide_password": "Hide password"
@@ -1125,6 +1129,7 @@
         "did_not_understand": "Didn't quite get that",
         "found": "I found the following for you:",
         "error": "Oops, an error has occurred",
+        "conversation_no_control": "This assistant cannot control your home.",
         "how_can_i_help": "How can I assist?",
         "input_label": "Enter a request",
         "send_text": "Send text",
@@ -5990,6 +5995,7 @@
               "card_options": "Card Options",
               "elements": "Elements",
               "new_element": "Add new element",
+              "confirm_delete_element": "Are you sure you want to delete the {type} element?",
               "dark_mode_image": "Dark mode image path",
               "state_filter": "State filter",
               "dark_mode_filter": "Dark mode state filter",

src/util/register-service-worker.ts

@@ -23,6 +23,13 @@ export const registerServiceWorker = async (
     return;
   }
 
+  if (reg?.active?.scriptURL.includes("service_worker.js")) {
+    // We are running an old version of the service worker. Force reload.
+    await reg.unregister();
+    // @ts-ignore Firefox supports force reload
+    location.reload(true);
+  }
+
   reg.addEventListener("updatefound", () => {
     const installingWorker = reg.installing;
 

yarn.lock

@@ -1548,14 +1548,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@codemirror/view@npm:6.29.0, @codemirror/view@npm:^6.0.0, @codemirror/view@npm:^6.17.0, @codemirror/view@npm:^6.23.0, @codemirror/view@npm:^6.27.0":
-  version: 6.29.0
-  resolution: "@codemirror/view@npm:6.29.0"
+"@codemirror/view@npm:6.29.1, @codemirror/view@npm:^6.0.0, @codemirror/view@npm:^6.17.0, @codemirror/view@npm:^6.23.0, @codemirror/view@npm:^6.27.0":
+  version: 6.29.1
+  resolution: "@codemirror/view@npm:6.29.1"
   dependencies:
     "@codemirror/state": "npm:^6.4.0"
     style-mod: "npm:^4.1.0"
     w3c-keyname: "npm:^2.2.4"
-  checksum: 10/c9ef04ca7b8a4ff08bd8534fe208f9a3304f6b94b276f732ec89c775c841e7340db453579a41e21cf839a568a599660e45be405056e036e31600dd1939eac2bd
+  checksum: 10/69002f500efed9bd864c710a4040ef03136b08351a61a423c653340d1134acdcab78a92a495666a08045b2bf54ff0811274a7e328c4c1ca4456de3f67694e955
   languageName: node
   linkType: hard
 
@@ -2069,7 +2069,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jridgewell/sourcemap-codec@npm:^1.4.10, @jridgewell/sourcemap-codec@npm:^1.4.14, @jridgewell/sourcemap-codec@npm:^1.4.15":
+"@jridgewell/sourcemap-codec@npm:^1.4.10, @jridgewell/sourcemap-codec@npm:^1.4.14, @jridgewell/sourcemap-codec@npm:^1.5.0":
   version: 1.5.0
   resolution: "@jridgewell/sourcemap-codec@npm:1.5.0"
   checksum: 10/4ed6123217569a1484419ac53f6ea0d9f3b57e5b57ab30d7c267bdb27792a27eb0e4b08e84a2680aa55cc2f2b411ffd6ec3db01c44fdc6dc43aca4b55f8374fd
@@ -8991,7 +8991,7 @@ __metadata:
     "@codemirror/legacy-modes": "npm:6.4.0"
     "@codemirror/search": "npm:6.5.6"
     "@codemirror/state": "npm:6.4.1"
-    "@codemirror/view": "npm:6.29.0"
+    "@codemirror/view": "npm:6.29.1"
     "@egjs/hammerjs": "npm:2.0.17"
     "@formatjs/intl-datetimeformat": "npm:6.12.5"
     "@formatjs/intl-displaynames": "npm:6.6.8"
@@ -9126,7 +9126,7 @@ __metadata:
     hls.js: "patch:hls.js@npm%3A1.5.7#~/.yarn/patches/hls.js-npm-1.5.7-f5bbd3d060.patch"
     home-assistant-js-websocket: "npm:9.4.0"
     html-minifier-terser: "npm:7.2.0"
-    husky: "npm:9.1.3"
+    husky: "npm:9.1.4"
     idb-keyval: "npm:6.2.1"
     instant-mocha: "npm:1.5.2"
     intl-messageformat: "npm:10.5.14"
@@ -9140,7 +9140,7 @@ __metadata:
     lodash.merge: "npm:4.6.2"
     lodash.template: "npm:4.5.0"
     luxon: "npm:3.4.4"
-    magic-string: "npm:0.30.10"
+    magic-string: "npm:0.30.11"
     map-stream: "npm:0.0.7"
     marked: "npm:13.0.3"
     memoize-one: "npm:6.0.0"
@@ -9399,12 +9399,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"husky@npm:9.1.3":
-  version: 9.1.3
-  resolution: "husky@npm:9.1.3"
+"husky@npm:9.1.4":
+  version: 9.1.4
+  resolution: "husky@npm:9.1.4"
   bin:
     husky: bin.js
-  checksum: 10/35d7ad85a247fb130659ae60b05bca9461820d261d6ff181b55c3dc6f2ae5da5ae3f3807367b90cc85d3bb915a2de8295aa9950e3cba3309994b7763dfd70cb1
+  checksum: 10/c43aa7cbf98246d4f347bc3da807049555b5003af7c6e1658c5cea44a9743b4d0683c72973a4fe02a4ccceb81031a664ecaa7a1a86efe4d37a80a0af17c988ea
   languageName: node
   linkType: hard
 
@@ -10868,12 +10868,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"magic-string@npm:0.30.10, magic-string@npm:^0.30.3":
-  version: 0.30.10
-  resolution: "magic-string@npm:0.30.10"
+"magic-string@npm:0.30.11, magic-string@npm:^0.30.3":
+  version: 0.30.11
+  resolution: "magic-string@npm:0.30.11"
   dependencies:
-    "@jridgewell/sourcemap-codec": "npm:^1.4.15"
-  checksum: 10/9f8bf6363a14c98a9d9f32ef833b194702a5c98fb931b05ac511b76f0b06fd30ed92beda6ca3261d2d52d21e39e891ef1136fbd032023f6cbb02d0b7d5767201
+    "@jridgewell/sourcemap-codec": "npm:^1.5.0"
+  checksum: 10/b784d2240252f5b1e755d487354ada4c672cbca16f045144f7185a75b059210e5fcca7be7be03ef1bac2ca754c4428b21d36ae64a9057ba429916f06b8c54eb2
   languageName: node
   linkType: hard