Merge branch 'rc'

pyproject.toml

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

src/components/entity/ha-state-label-badge.ts

@@ -133,9 +133,9 @@ export class HaStateLabelBadge extends LitElement {
           entityState,
           this._timerTimeRemaining
         )}
-        .description=${this.showName === false
-          ? undefined
-          : this.name ?? computeStateName(entityState)}
+        .description=${this.showName
+          ? this.name ?? computeStateName(entityState)
+          : undefined}
       >
         ${!image && showIcon
           ? html`<ha-state-icon

src/panels/config/cloud/login/cloud-login.ts

@@ -144,15 +144,6 @@ export class CloudLogin extends LitElement {
                     "ui.panel.config.cloud.login.password_error_msg"
                   )}
                 ></ha-textfield>
-                <button
-                  class="link pwd-forgot-link"
-                  .disabled=${this._requestInProgress}
-                  @click=${this._handleForgotPassword}
-                >
-                  ${this.hass.localize(
-                    "ui.panel.config.cloud.login.forgot_password"
-                  )}
-                </button>
               </div>
               <div class="card-actions">
                 <ha-progress-button
@@ -162,6 +153,15 @@ export class CloudLogin extends LitElement {
                     "ui.panel.config.cloud.login.sign_in"
                   )}</ha-progress-button
                 >
+                <button
+                  class="link pwd-forgot-link"
+                  .disabled=${this._requestInProgress}
+                  @click=${this._handleForgotPassword}
+                >
+                  ${this.hass.localize(
+                    "ui.panel.config.cloud.login.forgot_password"
+                  )}
+                </button>
               </div>
             </ha-card>
 
@@ -311,11 +311,6 @@ export class CloudLogin extends LitElement {
           display: flex;
           flex-direction: column;
         }
-        .pwd-forgot-link {
-          color: var(--secondary-text-color) !important;
-          text-align: right !important;
-          align-self: flex-end;
-        }
       `,
     ];
   }

src/panels/config/integrations/integration-panels/matter/dialog-matter-open-commissioning-window.ts

@@ -1,18 +1,21 @@
 import "@material/mwc-button/mwc-button";
-import { mdiCheckCircle, mdiCloseCircle } from "@mdi/js";
-import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
+import { mdiCloseCircle } from "@mdi/js";
+import { CSSResultGroup, LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import "../../../../../components/ha-circular-progress";
-import "../../../../../components/ha-qr-code";
 import { createCloseHeading } from "../../../../../components/ha-dialog";
+import "../../../../../components/ha-qr-code";
+import { domainToName } from "../../../../../data/integration";
 import {
-  openMatterCommissioningWindow,
   MatterCommissioningParameters,
+  openMatterCommissioningWindow,
 } from "../../../../../data/matter";
 import { haStyleDialog } from "../../../../../resources/styles";
 import { HomeAssistant } from "../../../../../types";
+import { brandsUrl } from "../../../../../util/brands-url";
 import { MatterOpenCommissioningWindowDialogParams } from "./show-dialog-matter-open-commissioning-window";
+import { copyToClipboard } from "../../../../../common/util/copy-clipboard";
 
 @customElement("dialog-matter-open-commissioning-window")
 class DialogMatterOpenCommissioningWindow extends LitElement {
@@ -52,28 +55,46 @@ class DialogMatterOpenCommissioningWindow extends LitElement {
                 ${this.hass.localize(
                   "ui.panel.config.matter.open_commissioning_window.success"
                 )}
+                <br />
+                ${this.hass.localize(
+                  "ui.panel.config.matter.open_commissioning_window.scan_code"
+                )}
               </p>
-              <div class="flex-container">
-                <ha-svg-icon
-                  .path=${mdiCheckCircle}
-                  class="success"
-                ></ha-svg-icon>
-                <div class="status">
-                  <p>
-                    ${this.hass.localize(
-                      "ui.panel.config.matter.open_commissioning_window.sharing_code"
-                    )}: <b>${this._commissionParams.setup_manual_code}</b>
-                  </p>
+              <div class="sharing-code-container">
+                <div class="sharing-code">
+                  <img
+                    crossorigin="anonymous"
+                    referrerpolicy="no-referrer"
+                    alt=${domainToName(this.hass.localize, "matter")}
+                    src=${brandsUrl({
+                      domain: "matter",
+                      type: "logo",
+                      darkOptimized: this.hass.themes?.darkMode,
+                    })}
+                  />
+                  <ha-qr-code
+                    .data=${this._commissionParams.setup_qr_code}
+                    errorCorrectionLevel="quartile"
+                    scale="6"
+                    margin="1"
+                  ></ha-qr-code>
+                  <span class="code"
+                    >${this._commissionParams.setup_manual_code.substring(
+                      0,
+                      4
+                    )}-${this._commissionParams.setup_manual_code.substring(
+                      4,
+                      7
+                    )}-${this._commissionParams.setup_manual_code.substring(
+                      7
+                    )}</span
+                  >
                 </div>
               </div>
-              <ha-qr-code
-                .data=${this._commissionParams.setup_qr_code}
-                errorCorrectionLevel="quartile"
-                scale="6"
-              ></ha-qr-code>
-              <div></div>
-              <mwc-button slot="primaryAction" @click=${this.closeDialog}>
-                ${this.hass.localize("ui.common.close")}
+              <mwc-button slot="primaryAction" @click=${this._copyCode}>
+                ${this.hass.localize(
+                  "ui.panel.config.matter.open_commissioning_window.copy_code"
+                )}
               </mwc-button>
             `
           : this._status === "started"
@@ -145,9 +166,18 @@ class DialogMatterOpenCommissioningWindow extends LitElement {
     }
   }
 
+  private async _copyCode() {
+    if (!this._commissionParams) {
+      return;
+    }
+    await copyToClipboard(this._commissionParams.setup_manual_code);
+    this.closeDialog();
+  }
+
   public closeDialog(): void {
     this.device_id = undefined;
     this._status = undefined;
+    this._commissionParams = undefined;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
 
@@ -193,6 +223,30 @@ class DialogMatterOpenCommissioningWindow extends LitElement {
         .flex-container ha-svg-icon {
           margin-right: 20px;
         }
+
+        .sharing-code-container {
+          display: flex;
+          justify-content: center;
+          padding-top: 16px;
+        }
+
+        .sharing-code {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          border: 2px solid;
+          border-radius: 16px;
+          padding: 16px;
+        }
+
+        .sharing-code img {
+          width: 160px;
+          margin-bottom: 8px;
+        }
+
+        .code {
+          font-family: monospace;
+        }
       `,
     ];
   }

src/panels/history/ha-panel-history.ts

@@ -55,6 +55,7 @@ import { haStyle } from "../../resources/styles";
 import { HomeAssistant } from "../../types";
 import { fileDownload } from "../../util/file_download";
 import { showAlertDialog } from "../../dialogs/generic/show-dialog-box";
+import { computeDomain } from "../../common/entity/compute_domain";
 
 class HaPanelHistory extends SubscribeMixin(LitElement) {
   @property({ attribute: false }) hass!: HomeAssistant;
@@ -657,7 +658,8 @@ class HaPanelHistory extends SubscribeMixin(LitElement) {
   }
 
   private _downloadHistory() {
-    const entities = this._getEntityIds();
+    // Make a copy because getEntityIDs is memoized and sort works in-place
+    const entities = [...this._getEntityIds()].sort();
     if (entities.length === 0 || !this._mungedStateHistory) {
       showAlertDialog(this, {
         title: this.hass.localize("ui.panel.history.download_data_error"),
@@ -667,12 +669,46 @@ class HaPanelHistory extends SubscribeMixin(LitElement) {
       return;
     }
 
-    const csv: string[] = ["entity_id,state,last_changed\n"];
+    const csv: string[] = [""]; // headers will be replaced later.
+    const headers = ["entity_id", "state", "last_changed"];
+    const processedDomainAttributes = new Set<string>();
+    const domainAttributes: Record<string, Record<string, number>> = {
+      climate: {
+        current_temperature: 0,
+        hvac_action: 0,
+        target_temp_high: 0,
+        target_temp_low: 0,
+        temperature: 0,
+      },
+      humidifier: {
+        action: 0,
+        current_humidity: 0,
+        humidity: 0,
+      },
+      water_heater: {
+        current_temperature: 0,
+        operation_mode: 0,
+        temperature: 0,
+      },
+    };
     const formatDate = (number) => new Date(number).toISOString();
 
     for (const line of this._mungedStateHistory.line) {
       for (const entity of line.data) {
         const entityId = entity.entity_id;
+        const domain = computeDomain(entityId);
+        const extraAttributes = domainAttributes[domain];
+
+        // Add extra attributes to headers if needed
+        if (extraAttributes && !processedDomainAttributes.has(domain)) {
+          processedDomainAttributes.add(domain);
+          let index = headers.length;
+          for (const attr of Object.keys(extraAttributes)) {
+            headers.push(attr);
+            extraAttributes[attr] = index;
+            index += 1;
+          }
+        }
 
         if (entity.statistics) {
           for (const s of entity.statistics) {
@@ -681,7 +717,19 @@ class HaPanelHistory extends SubscribeMixin(LitElement) {
         }
 
         for (const s of entity.states) {
-          csv.push(`${entityId},${s.state},${formatDate(s.last_changed)}\n`);
+          const lastChanged = formatDate(s.last_changed);
+          const data = [entityId, s.state, lastChanged];
+
+          if (s.attributes && extraAttributes) {
+            const attrs = s.attributes;
+            for (const [attr, index] of Object.entries(extraAttributes)) {
+              if (attr in attrs) {
+                data[index] = attrs[attr];
+              }
+            }
+          }
+
+          csv.push(data.join(",") + "\n");
         }
       }
     }
@@ -691,6 +739,7 @@ class HaPanelHistory extends SubscribeMixin(LitElement) {
         csv.push(`${entityId},${s.state},${formatDate(s.last_changed)}\n`);
       }
     }
+    csv[0] = headers.join(",") + "\n";
     const blob = new Blob(csv, {
       type: "text/csv",
     });

src/panels/lovelace/badges/hui-state-label-badge.ts

@@ -34,7 +34,7 @@ export class HuiStateLabelBadge extends LitElement implements LovelaceBadge {
         .name=${this._config.name}
         .icon=${this._config.icon}
         .image=${this._config.image}
-        .showName=${this._config.show_name}
+        .showName=${this._config.show_name ?? true}
         @action=${this._handleAction}
         .actionHandler=${actionHandler({
           hasHold: hasAction(this._config!.hold_action),

src/panels/lovelace/badges/types.ts

@@ -17,6 +17,7 @@ export interface StateLabelBadgeConfig extends LovelaceBadgeConfig {
   name?: string;
   icon?: string;
   image?: string;
+  show_name?: boolean;
   tap_action?: ActionConfig;
   hold_action?: ActionConfig;
   double_tap_action?: ActionConfig;

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

@@ -29,26 +29,25 @@ export class HuiHorizontalStackCard extends HuiStackCard {
           display: flex;
           height: 100%;
         }
-        #root {
-          --stack-card-side-margin: 4px;
-        }
         #root > * {
           flex: 1 1 0;
           margin: var(
             --horizontal-stack-card-margin,
-            var(--stack-card-margin, 0 var(--stack-card-side-margin))
+            var(--stack-card-margin, 0 4px)
           );
           min-width: 0;
         }
-        #root > *:first-child {
+        #root[dir="ltr"] > *:first-child {
           margin-left: 0;
-          margin-inline-start: 0;
-          margin-inline-end: var(--stack-card-side-margin);
         }
-        #root > *:last-child {
+        #root[dir="ltr"] > *:last-child {
+          margin-right: 0;
+        }
+        #root[dir="rtl"] > *:first-child {
           margin-right: 0;
-          margin-inline-end: 0;
-          margin-inline-start: var(--stack-card-side-margin);
+        }
+        #root[dir="rtl"] > *:last-child {
+          margin-left: 0;
         }
       `,
     ];