20230911.0 (#17901)

.github/workflows/ci.yaml

@@ -37,7 +37,7 @@ jobs:
       - name: Build resources
         run: ./node_modules/.bin/gulp gen-icons-json build-translations build-locale-data gather-gallery-pages
       - name: Setup lint cache
-        uses: actions/[email protected].1
+        uses: actions/[email protected].2
         with:
           path: |
             node_modules/.cache/prettier

package.json

@@ -104,7 +104,7 @@
     "app-datepicker": "5.1.1",
     "chart.js": "4.3.3",
     "comlink": "4.4.1",
-    "core-js": "3.32.1",
+    "core-js": "3.32.2",
     "cropperjs": "1.6.0",
     "date-fns": "2.30.0",
     "date-fns-tz": "2.0.0",
@@ -120,7 +120,7 @@
     "leaflet": "1.9.4",
     "leaflet-draw": "1.0.4",
     "lit": "2.8.0",
-    "luxon": "3.4.2",
+    "luxon": "3.4.3",
     "marked": "7.0.5",
     "memoize-one": "6.0.0",
     "node-vibrant": "3.2.1-alpha.1",
@@ -237,7 +237,7 @@
     "sinon": "15.2.0",
     "source-map-url": "0.4.1",
     "systemjs": "6.14.2",
-    "tar": "6.1.15",
+    "tar": "6.2.0",
     "terser-webpack-plugin": "5.3.9",
     "ts-lit-plugin": "2.0.0-pre.1",
     "typescript": "5.2.2",

pyproject.toml

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

src/components/ha-form/compute-initial-ha-form-data.ts

@@ -61,8 +61,10 @@ export const computeInitialHaFormData = (
         data[field.name] = selector.number?.min ?? 0;
       } else if ("select" in selector) {
         if (selector.select?.options.length) {
-          const val = selector.select.options[0];
-          data[field.name] = typeof val === "string" ? val : val.value;
+          const firstOption = selector.select.options[0];
+          const val =
+            typeof firstOption === "string" ? firstOption : firstOption.value;
+          data[field.name] = selector.select.multiple ? [val] : val;
         }
       } else if ("duration" in selector) {
         data[field.name] = {

src/data/cloud.ts

@@ -11,6 +11,7 @@ export interface CertificateInformation {
   common_name: string;
   expire_date: string;
   fingerprint: string;
+  alternative_names: string[];
 }
 
 export interface CloudPreferences {

src/dialogs/more-info/components/cover/ha-more-info-cover-position.ts

@@ -35,9 +35,8 @@ export class HaMoreInfoCoverPosition extends LitElement {
   }
 
   protected render(): TemplateResult {
-    const forcedState = this.stateObj.state === "closed" ? "open" : undefined;
-
-    const color = stateColorCss(this.stateObj, forcedState);
+    const openColor = stateColorCss(this.stateObj, "open");
+    const color = stateColorCss(this.stateObj);
 
     return html`
       <ha-control-slider
@@ -55,6 +54,8 @@ export class HaMoreInfoCoverPosition extends LitElement {
           "current_position"
         )}
         style=${styleMap({
+          // Use open color for inactive state to avoid grey slider that looks disabled
+          "--state-cover-inactive-color": openColor,
           "--control-slider-color": color,
           "--control-slider-background": color,
         })}

src/dialogs/more-info/components/cover/ha-more-info-cover-tilt-position.ts

@@ -72,9 +72,8 @@ export class HaMoreInfoCoverTiltPosition extends LitElement {
   }
 
   protected render(): TemplateResult {
-    const forcedState = this.stateObj.state === "closed" ? "open" : undefined;
-
-    const color = stateColorCss(this.stateObj, forcedState);
+    const openColor = stateColorCss(this.stateObj, "open");
+    const color = stateColorCss(this.stateObj);
 
     return html`
       <ha-control-slider
@@ -91,6 +90,8 @@ export class HaMoreInfoCoverTiltPosition extends LitElement {
           "current_tilt_position"
         )}
         style=${styleMap({
+          // Use open color for inactive state to avoid grey slider that looks disabled
+          "--state-cover-inactive-color": openColor,
           "--control-slider-color": color,
           "--control-slider-background": color,
         })}

src/panels/config/cloud/dialog-cloud-certificate/dialog-cloud-certificate.ts

@@ -62,6 +62,16 @@ class DialogCloudCertificate extends LitElement {
             )}
             ${certificateInfo.fingerprint}
           </p>
+          <p class="break-word">
+            ${this.hass!.localize(
+              "ui.panel.config.cloud.dialog_certificate.alternative_names"
+            )}
+          </p>
+          <ul>
+            ${certificateInfo.alternative_names.map(
+              (name) => html`<li><code>${name}</code></li>`
+            )}
+          </ul>
         </div>
 
         <mwc-button @click=${this.closeDialog} slot="primaryAction">

src/panels/developer-tools/state/developer-tools-state.js

@@ -19,6 +19,7 @@ import "../../../components/ha-icon-button";
 import "../../../components/ha-svg-icon";
 import "../../../components/ha-checkbox";
 import "../../../components/ha-tip";
+import "../../../components/ha-alert";
 import "../../../components/search-input";
 import "../../../components/ha-expansion-panel";
 import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
@@ -185,6 +186,9 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
           [[localize('ui.panel.developer-tools.tabs.states.description1')]]<br />
           [[localize('ui.panel.developer-tools.tabs.states.description2')]]
         </p>
+        <template is="dom-if" if="[[_error]]">
+          <ha-alert alert-type="error">[[_error]]</ha-alert>
+        </template>
         <div class="state-wrapper flex layout horizontal">
           <div class="inputs">
             <ha-entity-picker
@@ -355,6 +359,11 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
         computed: "_computeValidJSON(parsedJSON)",
       },
 
+      _error: {
+        type: String,
+        value: "",
+      },
+
       _entityId: {
         type: String,
         value: "",
@@ -490,7 +499,8 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
     this.fire("hass-more-info", { entityId: ev.model.entity.entity_id });
   }
 
-  handleSetState() {
+  async handleSetState() {
+    this._error = "";
     if (!this._entityId) {
       showAlertDialog(this, {
         text: this.hass.localize(
@@ -499,10 +509,14 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
       });
       return;
     }
-    this.hass.callApi("POST", "states/" + this._entityId, {
-      state: this._state,
-      attributes: this.parsedJSON,
-    });
+    try {
+      await this.hass.callApi("POST", "states/" + this._entityId, {
+        state: this._state,
+        attributes: this.parsedJSON,
+      });
+    } catch (e) {
+      this._error = e.body?.message || "Unknown error";
+    }
   }
 
   informationOutlineIcon() {

src/panels/lovelace/tile-features/hui-cover-position-tile-feature.ts

@@ -64,14 +64,16 @@ class HuiCoverPositionTileFeature
 
     const value = Math.max(Math.round(percentage), 0);
 
-    const forcedState = this.stateObj.state === "closed" ? "open" : undefined;
+    const openColor = stateColorCss(this.stateObj, "open");
 
     const color = this.color
       ? computeCssColor(this.color)
-      : stateColorCss(this.stateObj, forcedState);
+      : stateColorCss(this.stateObj);
 
     const style = {
       "--color": color,
+      // Use open color for inactive state to avoid grey slider that looks disabled
+      "--state-cover-inactive-color": openColor,
     };
 
     return html`

src/panels/lovelace/tile-features/hui-cover-tilt-position-tile-feature.ts

@@ -64,14 +64,16 @@ class HuiCoverTiltPositionTileFeature
 
     const value = Math.max(Math.round(percentage), 0);
 
-    const forcedState = this.stateObj.state === "closed" ? "open" : undefined;
+    const openColor = stateColorCss(this.stateObj, "open");
 
     const color = this.color
       ? computeCssColor(this.color)
-      : stateColorCss(this.stateObj, forcedState);
+      : stateColorCss(this.stateObj);
 
     const style = {
       "--color": color,
+      // Use open color for inactive state to avoid grey slider that looks disabled
+      "--state-cover-inactive-color": openColor,
     };
 
     return html`

src/state/logging-mixin.ts

@@ -40,30 +40,46 @@ export const loggingMixin = <T extends Constructor<HassBaseEl>>(
           ev.stopPropagation();
           return;
         }
-        const { createLogMessage } = await import("../resources/log-message");
-        this._writeLog({
-          // The error object from browsers includes the message and a stack trace,
-          // so use the data in the error event just as fallback
-          message: await createLogMessage(
+        let message;
+        try {
+          const { createLogMessage } = await import("../resources/log-message");
+          message = await createLogMessage(
             ev.error,
             "Uncaught error",
             ev.message,
             `@${ev.filename}:${ev.lineno}:${ev.colno}`
-          ),
-        });
+          );
+          await this._writeLog({
+            // The error object from browsers includes the message and a stack trace,
+            // so use the data in the error event just as fallback
+            message,
+          });
+        } catch (e) {
+          // eslint-disable-next-line no-console
+          console.error("Error during logging error:", message, e);
+          // catch errors during logging so we don't get into a loop
+        }
       });
       window.addEventListener("unhandledrejection", async (ev) => {
         if (!this.hass?.connected) {
           return;
         }
-        const { createLogMessage } = await import("../resources/log-message");
-        this._writeLog({
-          message: await createLogMessage(
+        let message;
+        try {
+          const { createLogMessage } = await import("../resources/log-message");
+          message = await createLogMessage(
             ev.reason,
             "Unhandled promise rejection"
-          ),
-          level: "debug",
-        });
+          );
+          await this._writeLog({
+            message,
+            level: "debug",
+          });
+        } catch (e) {
+          // eslint-disable-next-line no-console
+          console.error("Error during logging error:", message, e);
+          // catch errors during logging so we don't get into a loop
+        }
       });
     }
 
@@ -75,7 +91,7 @@ export const loggingMixin = <T extends Constructor<HassBaseEl>>(
     }
 
     private _writeLog(log: WriteLogParams) {
-      this.hass?.callService("system_log", "write", {
+      return this.hass?.callService("system_log", "write", {
         logger: `frontend.${
           __DEV__ ? "js_dev" : "js"
         }.${__BUILD__}.${__VERSION__.replace(".", "")}`,

src/translations/en.json

@@ -3183,6 +3183,7 @@
             }
           },
           "dialog_certificate": {
+            "alternative_names": "Alternative names:",
             "certificate_information": "Certificate information",
             "certificate_expiration_date": "Certificate expiration date:",
             "will_be_auto_renewed": "will be automatically renewed",

yarn.lock

@@ -7152,10 +7152,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"core-js@npm:3.32.1":
-  version: 3.32.1
-  resolution: "core-js@npm:3.32.1"
-  checksum: e4af91d9c6be7b59235feb3f273d16705126ce09a0b4a787144d131d874f0cd10be3c24fc52e5eea7d7cb03ceabe4be7b255abcd9474b5eb1ff365d2c5611f9a
+"core-js@npm:3.32.2":
+  version: 3.32.2
+  resolution: "core-js@npm:3.32.2"
+  checksum: d6fac7e8eb054eefc211c76cd0a0ff07447a917122757d085f469f046ec888d122409c7db1a9601c3eb5fa767608ed380bcd219eace02bdf973da155680edeec
   languageName: node
   linkType: hard
 
@@ -9796,7 +9796,7 @@ __metadata:
     chai: 4.3.8
     chart.js: 4.3.3
     comlink: 4.4.1
-    core-js: 3.32.1
+    core-js: 3.32.2
     cropperjs: 1.6.0
     date-fns: 2.30.0
     date-fns-tz: 2.0.0
@@ -9841,7 +9841,7 @@ __metadata:
     lit: 2.8.0
     lit-analyzer: 2.0.0-pre.3
     lodash.template: 4.5.0
-    luxon: 3.4.2
+    luxon: 3.4.3
     magic-string: 0.30.3
     map-stream: 0.0.7
     marked: 7.0.5
@@ -9870,7 +9870,7 @@ __metadata:
     stacktrace-js: 2.0.2
     superstruct: 1.0.3
     systemjs: 6.14.2
-    tar: 6.1.15
+    tar: 6.2.0
     terser-webpack-plugin: 5.3.9
     tinykeys: 2.1.0
     ts-lit-plugin: 2.0.0-pre.1
@@ -11769,10 +11769,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"luxon@npm:3.4.2":
-  version: 3.4.2
-  resolution: "luxon@npm:3.4.2"
-  checksum: efefdfaea90f4c8e502db8eb255385e6dac6733b6a9e1372eaf1a866cc1118363e235a3f6df505b837abc8bbcdfd8f0718a8de387b80cef9ee624d8791ca0844
+"luxon@npm:3.4.3":
+  version: 3.4.3
+  resolution: "luxon@npm:3.4.3"
+  checksum: 3eade81506224d038ed24035a0cd0dd4887848d7eba9361dce9ad8ef81380596a68153240be3988721f9690c624fb449fcf8fd8c3fc0681a6a8496faf48e92a3
   languageName: node
   linkType: hard
 
@@ -15193,17 +15193,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tar@npm:6.1.15, tar@npm:^6.1.11, tar@npm:^6.1.2":
-  version: 6.1.15
-  resolution: "tar@npm:6.1.15"
+"tar@npm:6.2.0, tar@npm:^6.1.11, tar@npm:^6.1.2":
+  version: 6.2.0
+  resolution: "tar@npm:6.2.0"
   dependencies:
     chownr: ^2.0.0
     fs-minipass: ^2.0.0
     minipass: ^5.0.0
     minizlib: ^2.1.1
     mkdirp: ^1.0.3
     yallist: ^4.0.0
-  checksum: f23832fceeba7578bf31907aac744ae21e74a66f4a17a9e94507acf460e48f6db598c7023882db33bab75b80e027c21f276d405e4a0322d58f51c7088d428268
+  checksum: db4d9fe74a2082c3a5016630092c54c8375ff3b280186938cfd104f2e089c4fd9bad58688ef6be9cf186a889671bf355c7cda38f09bbf60604b281715ca57f5c
   languageName: node
   linkType: hard