20231005.0

hassio/src/backups/hassio-backups.ts

@@ -360,11 +360,9 @@ export class HassioBackups extends LitElement {
     if (this.supervisor!.info.state !== "running") {
       showAlertDialog(this, {
         title: this.supervisor!.localize("backup.could_not_create"),
-        text: this.supervisor!.localize(
-          "backup.create_blocked_not_running",
-          "state",
-          this.supervisor!.info.state
-        ),
+        text: this.supervisor!.localize("backup.create_blocked_not_running", {
+          state: this.supervisor!.info.state,
+        }),
       });
       return;
     }

hassio/src/dialogs/backup/dialog-hassio-backup.ts

@@ -31,6 +31,7 @@ import { fileDownload } from "../../../../src/util/file_download";
 import "../../components/supervisor-backup-content";
 import type { SupervisorBackupContent } from "../../components/supervisor-backup-content";
 import { HassioBackupDialogParams } from "./show-dialog-hassio-backup";
+import { BackupOrRestoreKey } from "../../util/translations";
 
 @customElement("dialog-hassio-backup")
 class HassioBackupDialog
@@ -64,6 +65,13 @@ class HassioBackupDialog
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
 
+  private _localize(key: BackupOrRestoreKey) {
+    return (
+      this._dialogParams!.supervisor?.localize(`backup.${key}`) ||
+      this._dialogParams!.localize!(`ui.panel.page-onboarding.restore.${key}`)
+    );
+  }
+
   protected render() {
     if (!this._dialogParams || !this._backup) {
       return nothing;
@@ -79,60 +87,64 @@ class HassioBackupDialog
           <ha-header-bar>
             <span slot="title">${this._backup.name}</span>
             <ha-icon-button
-              .label=${this.hass?.localize("ui.common.close") || "Close"}
+              .label=${this._localize("close")}
               .path=${mdiClose}
               slot="actionItems"
               dialogAction="cancel"
             ></ha-icon-button>
           </ha-header-bar>
         </div>
         ${this._restoringBackup
-          ? html` <ha-circular-progress active></ha-circular-progress>`
-          : html`<supervisor-backup-content
-              .hass=${this.hass}
-              .supervisor=${this._dialogParams.supervisor}
-              .backup=${this._backup}
-              .onboarding=${this._dialogParams.onboarding || false}
-              .localize=${this._dialogParams.localize}
-              dialogInitialFocus
-            >
-            </supervisor-backup-content>`}
+          ? html`<ha-circular-progress active></ha-circular-progress>`
+          : html`
+              <supervisor-backup-content
+                .hass=${this.hass}
+                .supervisor=${this._dialogParams.supervisor}
+                .backup=${this._backup}
+                .onboarding=${this._dialogParams.onboarding || false}
+                .localize=${this._dialogParams.localize}
+                dialogInitialFocus
+              >
+              </supervisor-backup-content>
+            `}
         ${this._error
           ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
-          : ""}
+          : nothing}
 
         <mwc-button
           .disabled=${this._restoringBackup}
           slot="secondaryAction"
           @click=${this._restoreClicked}
         >
-          Restore
+          ${this._localize("restore")}
         </mwc-button>
 
-        ${!this._dialogParams.onboarding
+        ${!this._dialogParams.onboarding && this._dialogParams.supervisor
           ? html`<ha-button-menu
               fixed
               slot="primaryAction"
               @action=${this._handleMenuAction}
               @closed=${stopPropagation}
             >
               <ha-icon-button
-                .label=${this.hass!.localize("ui.common.menu") || "Menu"}
+                .label=${this._dialogParams.supervisor.localize(
+                  "backup.more_actions"
+                )}
                 .path=${mdiDotsVertical}
                 slot="trigger"
               ></ha-icon-button>
               <mwc-list-item
-                >${this._dialogParams.supervisor?.localize(
+                >${this._dialogParams.supervisor.localize(
                   "backup.download_backup"
                 )}</mwc-list-item
               >
               <mwc-list-item class="error"
-                >${this._dialogParams.supervisor?.localize(
+                >${this._dialogParams.supervisor.localize(
                   "backup.delete_backup_title"
                 )}</mwc-list-item
               >
             </ha-button-menu>`
-          : ""}
+          : nothing}
       </ha-dialog>
     `;
   }
@@ -183,21 +195,22 @@ class HassioBackupDialog
   }
 
   private async _partialRestoreClicked(backupDetails) {
-    if (
-      this._dialogParams?.supervisor !== undefined &&
-      this._dialogParams?.supervisor.info.state !== "running"
-    ) {
+    const supervisor = this._dialogParams?.supervisor;
+    if (supervisor !== undefined && supervisor.info.state !== "running") {
       await showAlertDialog(this, {
-        title: "Could not restore backup",
-        text: `Restoring a backup is not possible right now because the system is in ${this._dialogParams?.supervisor.info.state} state.`,
+        title: supervisor.localize("backup.could_not_restore"),
+        text: supervisor.localize("backup.restore_blocked_not_running", {
+          state: supervisor.info.state,
+        }),
       });
       return;
     }
     if (
       !(await showConfirmationDialog(this, {
-        title: "Are you sure you want to restore this partial backup?",
-        confirmText: "restore",
-        dismissText: "cancel",
+        title: this._localize("confirm_restore_partial_backup_title"),
+        text: this._localize("confirm_restore_partial_backup_text"),
+        confirmText: this._localize("restore"),
+        dismissText: this._localize("cancel"),
       }))
     ) {
       return;
@@ -230,22 +243,22 @@ class HassioBackupDialog
   }
 
   private async _fullRestoreClicked(backupDetails) {
-    if (
-      this._dialogParams?.supervisor !== undefined &&
-      this._dialogParams?.supervisor.info.state !== "running"
-    ) {
+    const supervisor = this._dialogParams?.supervisor;
+    if (supervisor !== undefined && supervisor.info.state !== "running") {
       await showAlertDialog(this, {
-        title: "Could not restore backup",
-        text: `Restoring a backup is not possible right now because the system is in ${this._dialogParams?.supervisor.info.state} state.`,
+        title: supervisor.localize("backup.could_not_restore"),
+        text: supervisor.localize("backup.restore_blocked_not_running", {
+          state: supervisor.info.state,
+        }),
       });
       return;
     }
     if (
       !(await showConfirmationDialog(this, {
-        title:
-          "Are you sure you want to wipe your system and restore this backup?",
-        confirmText: "restore",
-        dismissText: "cancel",
+        title: this._localize("confirm_restore_full_backup_title"),
+        text: this._localize("confirm_restore_full_backup_text"),
+        confirmText: this._localize("restore"),
+        dismissText: this._localize("cancel"),
       }))
     ) {
       return;
@@ -279,11 +292,15 @@ class HassioBackupDialog
   }
 
   private async _deleteClicked() {
+    const supervisor = this._dialogParams?.supervisor;
+    if (!supervisor) return;
+
     if (
       !(await showConfirmationDialog(this, {
-        title: "Are you sure you want to delete this backup?",
-        confirmText: "delete",
-        dismissText: "cancel",
+        title: supervisor!.localize("backup.confirm_delete_title"),
+        text: supervisor!.localize("backup.confirm_delete_text"),
+        confirmText: supervisor!.localize("backup.delete"),
+        dismissText: supervisor!.localize("backup.cancel"),
       }))
     ) {
       return;
@@ -301,6 +318,9 @@ class HassioBackupDialog
   }
 
   private async _downloadClicked() {
+    const supervisor = this._dialogParams?.supervisor;
+    if (!supervisor) return;
+
     let signedPath: { path: string };
     try {
       signedPath = await getSignedPath(
@@ -320,10 +340,10 @@ class HassioBackupDialog
 
     if (window.location.href.includes("ui.nabu.casa")) {
       const confirm = await showConfirmationDialog(this, {
-        title: "Potential slow download",
-        text: "Downloading backups over the Nabu Casa URL will take some time, it is recomended to use your local URL instead, do you want to continue?",
-        confirmText: "continue",
-        dismissText: "cancel",
+        title: supervisor.localize("backup.remote_download_title"),
+        text: supervisor.localize("backup.remote_download_text"),
+        confirmText: supervisor.localize("backup.download"),
+        dismissText: this._localize("cancel"),
       });
       if (!confirm) {
         return;

hassio/src/dialogs/backup/dialog-hassio-create-backup.ts

@@ -89,8 +89,7 @@ class HassioCreateBackupDialog extends LitElement {
         ),
         text: this._dialogParams!.supervisor.localize(
           "backup.create_blocked_not_running",
-          "state",
-          this._dialogParams!.supervisor.info.state
+          { state: this._dialogParams!.supervisor.info.state }
         ),
       });
       return;

hassio/src/util/translations.ts

@@ -0,0 +1,4 @@
+import type { TranslationDict } from "../../../src/types";
+
+export type BackupOrRestoreKey = keyof TranslationDict["supervisor"]["backup"] &
+  keyof TranslationDict["ui"]["panel"]["page-onboarding"]["restore"];

package.json

@@ -28,12 +28,12 @@
     "@babel/runtime": "7.23.1",
     "@braintree/sanitize-url": "6.0.4",
     "@codemirror/autocomplete": "6.9.1",
-    "@codemirror/commands": "6.2.5",
+    "@codemirror/commands": "6.3.0",
     "@codemirror/language": "6.9.1",
     "@codemirror/legacy-modes": "6.3.3",
     "@codemirror/search": "6.5.4",
     "@codemirror/state": "6.2.1",
-    "@codemirror/view": "6.20.2",
+    "@codemirror/view": "6.21.1",
     "@egjs/hammerjs": "2.0.17",
     "@formatjs/intl-datetimeformat": "6.10.3",
     "@formatjs/intl-displaynames": "6.5.2",
@@ -80,7 +80,7 @@
     "@material/mwc-top-app-bar": "0.27.0",
     "@material/mwc-top-app-bar-fixed": "0.27.0",
     "@material/top-app-bar": "=14.0.0-canary.53b3cad2f.0",
-    "@material/web": "=1.0.0-pre.17",
+    "@material/web": "=1.0.0",
     "@mdi/js": "7.2.96",
     "@mdi/svg": "7.2.96",
     "@polymer/iron-flex-layout": "3.0.1",
@@ -94,8 +94,8 @@
     "@polymer/paper-toast": "3.0.1",
     "@polymer/polymer": "3.5.1",
     "@thomasloven/round-slider": "0.6.0",
-    "@vaadin/combo-box": "24.1.9",
-    "@vaadin/vaadin-themable-mixin": "24.1.9",
+    "@vaadin/combo-box": "24.1.10",
+    "@vaadin/vaadin-themable-mixin": "24.1.10",
     "@vibrant/color": "3.2.1-alpha.1",
     "@vibrant/core": "3.2.1-alpha.1",
     "@vibrant/quantizer-mmcq": "3.2.1-alpha.1",
@@ -223,7 +223,7 @@
     "lint-staged": "14.0.1",
     "lit-analyzer": "2.0.0-pre.3",
     "lodash.template": "4.5.0",
-    "magic-string": "0.30.3",
+    "magic-string": "0.30.4",
     "map-stream": "0.0.7",
     "mocha": "10.2.0",
     "object-hash": "3.0.0",

pyproject.toml

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

src/components/chart/state-history-chart-line.ts

@@ -180,7 +180,9 @@ export class StateHistoryChartLine extends LitElement {
             return;
           }
 
-          const points = e.chart.getElementsAtEventForMode(
+          const chart = e.chart;
+
+          const points = chart.getElementsAtEventForMode(
             e,
             "nearest",
             { intersect: true },
@@ -192,6 +194,7 @@ export class StateHistoryChartLine extends LitElement {
             fireEvent(this, "hass-more-info", {
               entityId: this._entityIds[firstPoint.datasetIndex],
             });
+            chart.canvas.dispatchEvent(new Event("mouseout")); // to hide tooltip
           }
         },
       };

src/components/chart/state-history-chart-timeline.ts

@@ -238,6 +238,7 @@ export class StateHistoryChartTimeline extends LitElement {
           // @ts-ignore
           entityId: this._chartData?.datasets[index]?.label,
         });
+        chart.canvas.dispatchEvent(new Event("mouseout")); // to hide tooltip
       },
     };
   }

src/components/ha-icon-button-arrow-next.ts

@@ -12,19 +12,8 @@ export class HaIconButtonArrowNext extends LitElement {
 
   @property() public label?: string;
 
-  @state() private _icon = mdiArrowRight;
-
-  public connectedCallback() {
-    super.connectedCallback();
-
-    // wait to check for direction since otherwise direction is wrong even though top level is RTL
-    setTimeout(() => {
-      this._icon =
-        window.getComputedStyle(this).direction === "ltr"
-          ? mdiArrowRight
-          : mdiArrowLeft;
-    }, 100);
-  }
+  @state() private _icon =
+    document.dir === "ltr" ? mdiArrowRight : mdiArrowLeft;
 
   protected render(): TemplateResult {
     return html`

src/components/ha-icon-button-arrow-prev.ts

@@ -12,19 +12,8 @@ export class HaIconButtonArrowPrev extends LitElement {
 
   @property() public label?: string;
 
-  @state() private _icon = mdiArrowLeft;
-
-  public connectedCallback() {
-    super.connectedCallback();
-
-    // wait to check for direction since otherwise direction is wrong even though top level is RTL
-    setTimeout(() => {
-      this._icon =
-        window.getComputedStyle(this).direction === "ltr"
-          ? mdiArrowLeft
-          : mdiArrowRight;
-    }, 100);
-  }
+  @state() private _icon =
+    document.dir === "ltr" ? mdiArrowLeft : mdiArrowRight;
 
   protected render(): TemplateResult {
     return html`

src/components/ha-icon-button-next.ts

@@ -12,19 +12,8 @@ export class HaIconButtonNext extends LitElement {
 
   @property() public label?: string;
 
-  @state() private _icon = mdiChevronRight;
-
-  public connectedCallback() {
-    super.connectedCallback();
-
-    // wait to check for direction since otherwise direction is wrong even though top level is RTL
-    setTimeout(() => {
-      this._icon =
-        window.getComputedStyle(this).direction === "ltr"
-          ? mdiChevronRight
-          : mdiChevronLeft;
-    }, 100);
-  }
+  @state() private _icon =
+    document.dir === "ltr" ? mdiChevronRight : mdiChevronLeft;
 
   protected render(): TemplateResult {
     return html`