20220928.0 (#13904)

.github/workflows/stale.yml

@@ -10,7 +10,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: 90 days stale policy
-        uses: actions/stale@v5.1.1
+        uses: actions/stale@v6.0.0
         with:
           repo-token: ${{ secrets.GITHUB_TOKEN }}
           days-before-stale: 90

demo/src/ha-demo.ts

@@ -68,6 +68,7 @@ class HaDemo extends HomeAssistantAppEl {
         hidden_by: null,
         entity_category: null,
         has_entity_name: false,
+        unique_id: "co2_intensity",
       },
       {
         config_entry_id: "co2signal",
@@ -82,6 +83,7 @@ class HaDemo extends HomeAssistantAppEl {
         hidden_by: null,
         entity_category: null,
         has_entity_name: false,
+        unique_id: "grid_fossil_fuel_percentage",
       },
     ]);
 

demo/src/stubs/energy.ts

@@ -11,14 +11,12 @@ export const mockEnergy = (hass: MockHomeAssistant) => {
           {
             stat_energy_from: "sensor.energy_consumption_tarif_1",
             stat_cost: "sensor.energy_consumption_tarif_1_cost",
-            entity_energy_from: "sensor.energy_consumption_tarif_1",
             entity_energy_price: null,
             number_energy_price: null,
           },
           {
             stat_energy_from: "sensor.energy_consumption_tarif_2",
             stat_cost: "sensor.energy_consumption_tarif_2_cost",
-            entity_energy_from: "sensor.energy_consumption_tarif_2",
             entity_energy_price: null,
             number_energy_price: null,
           },
@@ -27,14 +25,12 @@ export const mockEnergy = (hass: MockHomeAssistant) => {
           {
             stat_energy_to: "sensor.energy_production_tarif_1",
             stat_compensation: "sensor.energy_production_tarif_1_compensation",
-            entity_energy_to: "sensor.energy_production_tarif_1",
             entity_energy_price: null,
             number_energy_price: null,
           },
           {
             stat_energy_to: "sensor.energy_production_tarif_2",
             stat_compensation: "sensor.energy_production_tarif_2_compensation",
-            entity_energy_to: "sensor.energy_production_tarif_2",
             entity_energy_price: null,
             number_energy_price: null,
           },
@@ -55,7 +51,6 @@ export const mockEnergy = (hass: MockHomeAssistant) => {
         type: "gas",
         stat_energy_from: "sensor.energy_gas",
         stat_cost: "sensor.energy_gas_cost",
-        entity_energy_from: "sensor.energy_gas",
         entity_energy_price: null,
         number_energy_price: null,
       },

demo/src/stubs/history.ts

@@ -6,7 +6,7 @@ import {
   endOfDay,
 } from "date-fns/esm";
 import { HassEntity } from "home-assistant-js-websocket";
-import { StatisticValue } from "../../../src/data/history";
+import { StatisticValue } from "../../../src/data/recorder";
 import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 
 interface HistoryQueryParams {

gallery/src/pages/components/ha-selector.ts

@@ -195,6 +195,48 @@ const SCHEMAS: {
           },
         },
       },
+      select_disabled_list: {
+        name: "Select disabled option",
+        selector: {
+          select: {
+            options: [
+              { label: "Option 1", value: "Option 1" },
+              { label: "Option 2", value: "Option 2" },
+              { label: "Option 3", value: "Option 3", disabled: true },
+            ],
+            mode: "list",
+          },
+        },
+      },
+      select_disabled_multiple: {
+        name: "Select disabled option",
+        selector: {
+          select: {
+            multiple: true,
+            options: [
+              { label: "Option 1", value: "Option 1" },
+              { label: "Option 2", value: "Option 2" },
+              { label: "Option 3", value: "Option 3", disabled: true },
+            ],
+            mode: "list",
+          },
+        },
+      },
+      select_disabled: {
+        name: "Select disabled option",
+        selector: {
+          select: {
+            options: [
+              { label: "Option 1", value: "Option 1" },
+              { label: "Option 2", value: "Option 2" },
+              { label: "Option 3", value: "Option 3", disabled: true },
+              { label: "Option 4", value: "Option 4", disabled: true },
+              { label: "Option 5", value: "Option 5", disabled: true },
+              { label: "Option 6", value: "Option 6" },
+            ],
+          },
+        },
+      },
       select_custom: {
         name: "Select (Custom)",
         selector: {

gallery/src/pages/misc/integration-card.ts

@@ -196,6 +196,7 @@ const createEntityRegistryEntries = (
     icon: null,
     platform: "updater",
     has_entity_name: false,
+    unique_id: "updater",
   },
 ];
 

gallery/src/pages/more-info/cover.ts

@@ -1,16 +1,7 @@
 import { html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import "../../../../src/components/ha-card";
-import {
+import { CoverEntityFeature } from "../../../../src/data/cover";
-  SUPPORT_OPEN,
-  SUPPORT_STOP,
-  SUPPORT_CLOSE,
-  SUPPORT_SET_POSITION,
-  SUPPORT_OPEN_TILT,
-  SUPPORT_STOP_TILT,
-  SUPPORT_CLOSE_TILT,
-  SUPPORT_SET_TILT_POSITION,
-} from "../../../../src/data/cover";
 import "../../../../src/dialogs/more-info/more-info-content";
 import { getEntity } from "../../../../src/fake_data/entity";
 import {
@@ -22,113 +13,127 @@ import "../../components/demo-more-infos";
 const ENTITIES = [
   getEntity("cover", "position_buttons", "on", {
     friendly_name: "Position Buttons",
-    supported_features: SUPPORT_OPEN + SUPPORT_STOP + SUPPORT_CLOSE,
+    supported_features:
+      CoverEntityFeature.OPEN +
+      CoverEntityFeature.STOP +
+      CoverEntityFeature.CLOSE,
   }),
   getEntity("cover", "position_slider_half", "on", {
     friendly_name: "Position Half-Open",
     supported_features:
-      SUPPORT_OPEN + SUPPORT_STOP + SUPPORT_CLOSE + SUPPORT_SET_POSITION,
+      CoverEntityFeature.OPEN +
+      CoverEntityFeature.STOP +
+      CoverEntityFeature.CLOSE +
+      CoverEntityFeature.SET_POSITION,
     current_position: 50,
   }),
   getEntity("cover", "position_slider_open", "on", {
     friendly_name: "Position Open",
     supported_features:
-      SUPPORT_OPEN + SUPPORT_STOP + SUPPORT_CLOSE + SUPPORT_SET_POSITION,
+      CoverEntityFeature.OPEN +
+      CoverEntityFeature.STOP +
+      CoverEntityFeature.CLOSE +
+      CoverEntityFeature.SET_POSITION,
     current_position: 100,
   }),
   getEntity("cover", "position_slider_closed", "on", {
     friendly_name: "Position Closed",
     supported_features:
-      SUPPORT_OPEN + SUPPORT_STOP + SUPPORT_CLOSE + SUPPORT_SET_POSITION,
+      CoverEntityFeature.OPEN +
+      CoverEntityFeature.STOP +
+      CoverEntityFeature.CLOSE +
+      CoverEntityFeature.SET_POSITION,
     current_position: 0,
   }),
   getEntity("cover", "tilt_buttons", "on", {
     friendly_name: "Tilt Buttons",
     supported_features:
-      SUPPORT_OPEN_TILT + SUPPORT_STOP_TILT + SUPPORT_CLOSE_TILT,
+      CoverEntityFeature.OPEN_TILT +
+      CoverEntityFeature.STOP_TILT +
+      CoverEntityFeature.CLOSE_TILT,
   }),
   getEntity("cover", "tilt_slider_half", "on", {
     friendly_name: "Tilt Half-Open",
     supported_features:
-      SUPPORT_OPEN_TILT +
+      CoverEntityFeature.OPEN_TILT +
-      SUPPORT_STOP_TILT +
+      CoverEntityFeature.STOP_TILT +
-      SUPPORT_CLOSE_TILT +
+      CoverEntityFeature.CLOSE_TILT +
-      SUPPORT_SET_TILT_POSITION,
+      CoverEntityFeature.SET_TILT_POSITION,
     current_tilt_position: 50,
   }),
   getEntity("cover", "tilt_slider_open", "on", {
     friendly_name: "Tilt Open",
     supported_features:
-      SUPPORT_OPEN_TILT +
+      CoverEntityFeature.OPEN_TILT +
-      SUPPORT_STOP_TILT +
+      CoverEntityFeature.STOP_TILT +
-      SUPPORT_CLOSE_TILT +
+      CoverEntityFeature.CLOSE_TILT +
-      SUPPORT_SET_TILT_POSITION,
+      CoverEntityFeature.SET_TILT_POSITION,
     current_tilt_position: 100,
   }),
   getEntity("cover", "tilt_slider_closed", "on", {
     friendly_name: "Tilt Closed",
     supported_features:
-      SUPPORT_OPEN_TILT +
+      CoverEntityFeature.OPEN_TILT +
-      SUPPORT_STOP_TILT +
+      CoverEntityFeature.STOP_TILT +
-      SUPPORT_CLOSE_TILT +
+      CoverEntityFeature.CLOSE_TILT +
-      SUPPORT_SET_TILT_POSITION,
+      CoverEntityFeature.SET_TILT_POSITION,
     current_tilt_position: 0,
   }),
   getEntity("cover", "position_slider_tilt_slider", "on", {
     friendly_name: "Both Sliders",
     supported_features:
-      SUPPORT_OPEN +
+      CoverEntityFeature.OPEN +
-      SUPPORT_STOP +
+      CoverEntityFeature.STOP +
-      SUPPORT_CLOSE +
+      CoverEntityFeature.CLOSE +
-      SUPPORT_SET_POSITION +
+      CoverEntityFeature.SET_POSITION +
-      SUPPORT_OPEN_TILT +
+      CoverEntityFeature.OPEN_TILT +
-      SUPPORT_STOP_TILT +
+      CoverEntityFeature.STOP_TILT +
-      SUPPORT_CLOSE_TILT +
+      CoverEntityFeature.CLOSE_TILT +
-      SUPPORT_SET_TILT_POSITION,
+      CoverEntityFeature.SET_TILT_POSITION,
     current_position: 30,
     current_tilt_position: 70,
   }),
   getEntity("cover", "position_tilt_slider", "on", {
     friendly_name: "Position & Tilt Slider",
     supported_features:
-      SUPPORT_OPEN +
+      CoverEntityFeature.OPEN +
-      SUPPORT_STOP +
+      CoverEntityFeature.STOP +
-      SUPPORT_CLOSE +
+      CoverEntityFeature.CLOSE +
-      SUPPORT_OPEN_TILT +
+      CoverEntityFeature.OPEN_TILT +
-      SUPPORT_STOP_TILT +
+      CoverEntityFeature.STOP_TILT +
-      SUPPORT_CLOSE_TILT +
+      CoverEntityFeature.CLOSE_TILT +
-      SUPPORT_SET_TILT_POSITION,
+      CoverEntityFeature.SET_TILT_POSITION,
     current_tilt_position: 70,
   }),
   getEntity("cover", "position_slider_tilt", "on", {
     friendly_name: "Position Slider & Tilt",
     supported_features:
-      SUPPORT_OPEN +
+      CoverEntityFeature.OPEN +
-      SUPPORT_STOP +
+      CoverEntityFeature.STOP +
-      SUPPORT_CLOSE +
+      CoverEntityFeature.CLOSE +
-      SUPPORT_SET_POSITION +
+      CoverEntityFeature.SET_POSITION +
-      SUPPORT_OPEN_TILT +
+      CoverEntityFeature.OPEN_TILT +
-      SUPPORT_STOP_TILT +
+      CoverEntityFeature.STOP_TILT +
-      SUPPORT_CLOSE_TILT,
+      CoverEntityFeature.CLOSE_TILT,
     current_position: 30,
   }),
   getEntity("cover", "position_slider_only_tilt_slider", "on", {
     friendly_name: "Position Slider Only & Tilt Buttons",
     supported_features:
-      SUPPORT_SET_POSITION +
+      CoverEntityFeature.SET_POSITION +
-      SUPPORT_OPEN_TILT +
+      CoverEntityFeature.OPEN_TILT +
-      SUPPORT_STOP_TILT +
+      CoverEntityFeature.STOP_TILT +
-      SUPPORT_CLOSE_TILT,
+      CoverEntityFeature.CLOSE_TILT,
     current_position: 30,
   }),
   getEntity("cover", "position_slider_only_tilt", "on", {
     friendly_name: "Position Slider Only & Tilt",
     supported_features:
-      SUPPORT_SET_POSITION +
+      CoverEntityFeature.SET_POSITION +
-      SUPPORT_OPEN_TILT +
+      CoverEntityFeature.OPEN_TILT +
-      SUPPORT_STOP_TILT +
+      CoverEntityFeature.STOP_TILT +
-      SUPPORT_CLOSE_TILT +
+      CoverEntityFeature.CLOSE_TILT +
-      SUPPORT_SET_TILT_POSITION,
+      CoverEntityFeature.SET_TILT_POSITION,
     current_position: 30,
     current_tilt_position: 70,
   }),

gallery/src/pages/more-info/input-number.markdown

@@ -0,0 +1,3 @@
+---
+title: Input Number
+---

gallery/src/pages/more-info/input-number.ts

@@ -0,0 +1,60 @@
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { customElement, property, query } from "lit/decorators";
+import "../../../../src/components/ha-card";
+import "../../../../src/dialogs/more-info/more-info-content";
+import { getEntity } from "../../../../src/fake_data/entity";
+import {
+  MockHomeAssistant,
+  provideHass,
+} from "../../../../src/fake_data/provide_hass";
+import "../../components/demo-more-infos";
+
+const ENTITIES = [
+  getEntity("input_number", "box1", 0, {
+    friendly_name: "Box1",
+    min: 0,
+    max: 100,
+    step: 1,
+    initial: 0,
+    mode: "box",
+    unit_of_measurement: "items",
+  }),
+  getEntity("input_number", "slider1", 0, {
+    friendly_name: "Slider1",
+    min: 0,
+    max: 100,
+    step: 1,
+    initial: 0,
+    mode: "slider",
+    unit_of_measurement: "items",
+  }),
+];
+
+@customElement("demo-more-info-input-number")
+class DemoMoreInfoInputNumber extends LitElement {
+  @property() public hass!: MockHomeAssistant;
+
+  @query("demo-more-infos") private _demoRoot!: HTMLElement;
+
+  protected render(): TemplateResult {
+    return html`
+      <demo-more-infos
+        .hass=${this.hass}
+        .entities=${ENTITIES.map((ent) => ent.entityId)}
+      ></demo-more-infos>
+    `;
+  }
+
+  protected firstUpdated(changedProperties: PropertyValues) {
+    super.firstUpdated(changedProperties);
+    const hass = provideHass(this._demoRoot);
+    hass.updateTranslations(null, "en");
+    hass.addEntities(ENTITIES);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-more-info-input-number": DemoMoreInfoInputNumber;
+  }
+}

gallery/src/pages/more-info/light.ts

@@ -1,12 +1,7 @@
 import { html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import "../../../../src/components/ha-card";
-import {
+import { LightColorMode, LightEntityFeature } from "../../../../src/data/light";
-  LightColorModes,
-  SUPPORT_EFFECT,
-  SUPPORT_FLASH,
-  SUPPORT_TRANSITION,
-} from "../../../../src/data/light";
 import "../../../../src/dialogs/more-info/more-info-content";
 import { getEntity } from "../../../../src/fake_data/entity";
 import {
@@ -22,8 +17,8 @@ const ENTITIES = [
   getEntity("light", "kitchen_light", "on", {
     friendly_name: "Brightness Light",
     brightness: 200,
-    supported_color_modes: [LightColorModes.BRIGHTNESS],
+    supported_color_modes: [LightColorMode.BRIGHTNESS],
-    color_mode: LightColorModes.BRIGHTNESS,
+    color_mode: LightColorMode.BRIGHTNESS,
   }),
   getEntity("light", "color_temperature_light", "on", {
     friendly_name: "White Color Temperature Light",
@@ -32,10 +27,10 @@ const ENTITIES = [
     min_mireds: 30,
     max_mireds: 150,
     supported_color_modes: [
-      LightColorModes.BRIGHTNESS,
+      LightColorMode.BRIGHTNESS,
-      LightColorModes.COLOR_TEMP,
+      LightColorMode.COLOR_TEMP,
     ],
-    color_mode: LightColorModes.COLOR_TEMP,
+    color_mode: LightColorMode.COLOR_TEMP,
   }),
   getEntity("light", "color_hs_light", "on", {
     friendly_name: "Color HS Light",
@@ -44,13 +39,16 @@ const ENTITIES = [
     rgb_color: [30, 100, 255],
     min_mireds: 30,
     max_mireds: 150,
-    supported_features: SUPPORT_EFFECT + SUPPORT_FLASH + SUPPORT_TRANSITION,
+    supported_features:
+      LightEntityFeature.EFFECT +
+      LightEntityFeature.FLASH +
+      LightEntityFeature.TRANSITION,
     supported_color_modes: [
-      LightColorModes.BRIGHTNESS,
+      LightColorMode.BRIGHTNESS,
-      LightColorModes.COLOR_TEMP,
+      LightColorMode.COLOR_TEMP,
-      LightColorModes.HS,
+      LightColorMode.HS,
     ],
-    color_mode: LightColorModes.HS,
+    color_mode: LightColorMode.HS,
     effect_list: ["random", "colorloop"],
   }),
   getEntity("light", "color_rgb_ct_light", "on", {
@@ -59,22 +57,28 @@ const ENTITIES = [
     color_temp: 75,
     min_mireds: 30,
     max_mireds: 150,
-    supported_features: SUPPORT_EFFECT + SUPPORT_FLASH + SUPPORT_TRANSITION,
+    supported_features:
+      LightEntityFeature.EFFECT +
+      LightEntityFeature.FLASH +
+      LightEntityFeature.TRANSITION,
     supported_color_modes: [
-      LightColorModes.BRIGHTNESS,
+      LightColorMode.BRIGHTNESS,
-      LightColorModes.COLOR_TEMP,
+      LightColorMode.COLOR_TEMP,
-      LightColorModes.RGB,
+      LightColorMode.RGB,
     ],
-    color_mode: LightColorModes.COLOR_TEMP,
+    color_mode: LightColorMode.COLOR_TEMP,
     effect_list: ["random", "colorloop"],
   }),
   getEntity("light", "color_RGB_light", "on", {
     friendly_name: "Color Effects Light",
     brightness: 255,
     rgb_color: [30, 100, 255],
-    supported_features: SUPPORT_EFFECT + SUPPORT_FLASH + SUPPORT_TRANSITION,
+    supported_features:
-    supported_color_modes: [LightColorModes.BRIGHTNESS, LightColorModes.RGB],
+      LightEntityFeature.EFFECT +
-    color_mode: LightColorModes.RGB,
+      LightEntityFeature.FLASH +
+      LightEntityFeature.TRANSITION,
+    supported_color_modes: [LightColorMode.BRIGHTNESS, LightColorMode.RGB],
+    color_mode: LightColorMode.RGB,
     effect_list: ["random", "colorloop"],
   }),
   getEntity("light", "color_rgbw_light", "on", {
@@ -83,13 +87,16 @@ const ENTITIES = [
     rgbw_color: [30, 100, 255, 125],
     min_mireds: 30,
     max_mireds: 150,
-    supported_features: SUPPORT_EFFECT + SUPPORT_FLASH + SUPPORT_TRANSITION,
+    supported_features:
+      LightEntityFeature.EFFECT +
+      LightEntityFeature.FLASH +
+      LightEntityFeature.TRANSITION,
     supported_color_modes: [
-      LightColorModes.BRIGHTNESS,
+      LightColorMode.BRIGHTNESS,
-      LightColorModes.COLOR_TEMP,
+      LightColorMode.COLOR_TEMP,
-      LightColorModes.RGBW,
+      LightColorMode.RGBW,
     ],
-    color_mode: LightColorModes.RGBW,
+    color_mode: LightColorMode.RGBW,
     effect_list: ["random", "colorloop"],
   }),
   getEntity("light", "color_rgbww_light", "on", {
@@ -98,13 +105,16 @@ const ENTITIES = [
     rgbww_color: [30, 100, 255, 125, 10],
     min_mireds: 30,
     max_mireds: 150,
-    supported_features: SUPPORT_EFFECT + SUPPORT_FLASH + SUPPORT_TRANSITION,
+    supported_features:
+      LightEntityFeature.EFFECT +
+      LightEntityFeature.FLASH +
+      LightEntityFeature.TRANSITION,
     supported_color_modes: [
-      LightColorModes.BRIGHTNESS,
+      LightColorMode.BRIGHTNESS,
-      LightColorModes.COLOR_TEMP,
+      LightColorMode.COLOR_TEMP,
-      LightColorModes.RGBWW,
+      LightColorMode.RGBWW,
     ],
-    color_mode: LightColorModes.RGBWW,
+    color_mode: LightColorMode.RGBWW,
     effect_list: ["random", "colorloop"],
   }),
   getEntity("light", "color_xy_light", "on", {
@@ -114,13 +124,16 @@ const ENTITIES = [
     rgb_color: [30, 100, 255],
     min_mireds: 30,
     max_mireds: 150,
-    supported_features: SUPPORT_EFFECT + SUPPORT_FLASH + SUPPORT_TRANSITION,
+    supported_features:
+      LightEntityFeature.EFFECT +
+      LightEntityFeature.FLASH +
+      LightEntityFeature.TRANSITION,
     supported_color_modes: [
-      LightColorModes.BRIGHTNESS,
+      LightColorMode.BRIGHTNESS,
-      LightColorModes.COLOR_TEMP,
+      LightColorMode.COLOR_TEMP,
-      LightColorModes.XY,
+      LightColorMode.XY,
     ],
-    color_mode: LightColorModes.XY,
+    color_mode: LightColorMode.XY,
     effect_list: ["random", "colorloop"],
   }),
 ];

hassio/src/addon-view/info/hassio-addon-info.ts

@@ -1024,10 +1024,13 @@ class HassioAddonInfo extends LitElement {
     button.progress = true;
 
     const confirmed = await showConfirmationDialog(this, {
-      title: this.addon.name,
+      title: this.supervisor.localize("dialog.uninstall_addon.title", {
-      text: "Are you sure you want to uninstall this add-on?",
+        name: this.addon.name,
-      confirmText: "uninstall add-on",
+      }),
-      dismissText: "no",
+      text: this.supervisor.localize("dialog.uninstall_addon.text"),
+      confirmText: this.supervisor.localize("dialog.uninstall_addon.uninstall"),
+      dismissText: this.supervisor.localize("common.cancel"),
+      destructive: true,
     });
 
     if (!confirmed) {

hassio/src/dialogs/suggestAddonRestart.ts

@@ -18,9 +18,11 @@ export const suggestAddonRestart = async (
   addon: HassioAddonDetails
 ): Promise<void> => {
   const confirmed = await showConfirmationDialog(element, {
-    title: supervisor.localize("common.restart_name", "name", addon.name),
+    title: supervisor.localize("dialog.restart_addon.title", {
+      name: addon.name,
+    }),
     text: supervisor.localize("dialog.restart_addon.text"),
-    confirmText: supervisor.localize("dialog.restart_addon.confirm_text"),
+    confirmText: supervisor.localize("dialog.restart_addon.restart"),
     dismissText: supervisor.localize("common.cancel"),
   });
   if (confirmed) {
@@ -28,11 +30,9 @@ export const suggestAddonRestart = async (
       await restartHassioAddon(hass, addon.slug);
     } catch (err: any) {
       showAlertDialog(element, {
-        title: supervisor.localize(
+        title: supervisor.localize("common.failed_to_restart_name", {
-          "common.failed_to_restart_name",
+          name: addon.name,
-          "name",
+        }),
-          addon.name
-        ),
         text: extractApiErrorMessage(err),
       });
     }

hassio/src/system/hassio-supervisor-info.ts

@@ -23,6 +23,7 @@ import {
   showAlertDialog,
   showConfirmationDialog,
 } from "../../../src/dialogs/generic/show-dialog-box";
+import { showJoinBetaDialog } from "../../../src/panels/config/core/updates/show-dialog-join-beta";
 import {
   UNHEALTHY_REASON_URL,
   UNSUPPORTED_REASON_URL,
@@ -230,36 +231,27 @@ class HassioSupervisorInfo extends LitElement {
     button.progress = true;
 
     if (this.supervisor.supervisor.channel === "stable") {
-      const confirmed = await showConfirmationDialog(this, {
+      showJoinBetaDialog(this, {
-        title: this.supervisor.localize("system.supervisor.warning"),
+        join: async () => {
-        text: html`${this.supervisor.localize("system.supervisor.beta_warning")}
+          await this._setChannel("beta");
-          <br />
+          button.progress = false;
-          <b> ${this.supervisor.localize("system.supervisor.beta_backup")} </b>
+        },
-          <br /><br />
+        cancel: () => {
-          ${this.supervisor.localize("system.supervisor.beta_release_items")}
+          button.progress = false;
-          <ul>
+        },
-            <li>Home Assistant Core</li>
+      });
-            <li>Home Assistant Supervisor</li>
+    } else {
-            <li>Home Assistant Operating System</li>
+      await this._setChannel("stable");
-          </ul>
-          <br />
-          ${this.supervisor.localize("system.supervisor.beta_join_confirm")}`,
-        confirmText: this.supervisor.localize(
-          "system.supervisor.join_beta_action"
-        ),
-        dismissText: this.supervisor.localize("common.cancel"),
-      });
-
-      if (!confirmed) {
       button.progress = false;
-        return;
     }
   }
 
+  private async _setChannel(
+    channel: SupervisorOptions["channel"]
+  ): Promise<void> {
     try {
       const data: Partial<SupervisorOptions> = {
-        channel:
+        channel,
-          this.supervisor.supervisor.channel === "stable" ? "beta" : "stable",
       };
       await setSupervisorOption(this.hass, data);
       await this._reloadSupervisor();
@@ -270,8 +262,6 @@ class HassioSupervisorInfo extends LitElement {
         ),
         text: extractApiErrorMessage(err),
       });
-    } finally {
-      button.progress = false;
     }
   }
 

package.json

@@ -111,7 +111,7 @@
     "deep-freeze": "^0.0.1",
     "fuse.js": "^6.0.0",
     "google-timezones-json": "^1.0.2",
-    "hls.js": "^1.2.1",
+    "hls.js": "^1.2.3",
     "home-assistant-js-websocket": "^8.0.0",
     "idb-keyval": "^5.1.3",
     "intl-messageformat": "^9.9.1",

pyproject.toml

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

script/core

@@ -46,6 +46,14 @@ frontend:
 #   development_repo: ${WD}" >> "${WD}/config/configuration.yaml"
   fi
 
+  if [ ! -z "${CODESPACES}" ]; then
+  echo "
+http:
+  use_x_forwarded_for: true
+  trusted_proxies:
+    - 127.0.0.1
+" >> "${WD}/config/configuration.yaml"
+  fi
 fi
 
 hass -c "${WD}/config"

src/common/const.ts

@@ -6,6 +6,7 @@ import {
   mdiAlert,
   mdiAngleAcute,
   mdiAppleSafari,
+  mdiArrowLeftRight,
   mdiBell,
   mdiBookmark,
   mdiBrightness5,
@@ -25,7 +26,6 @@ import {
   mdiFlower,
   mdiFormatListBulleted,
   mdiFormTextbox,
-  mdiGasCylinder,
   mdiGauge,
   mdiGestureTapButton,
   mdiGoogleAssistant,
@@ -37,6 +37,8 @@ import {
   mdiLightningBolt,
   mdiMailbox,
   mdiMapMarkerRadius,
+  mdiMeterGas,
+  mdiMicrophoneMessage,
   mdiMolecule,
   mdiMoleculeCo,
   mdiMoleculeCo2,
@@ -47,13 +49,14 @@ import {
   mdiRobotVacuum,
   mdiScriptText,
   mdiSineWave,
-  mdiMicrophoneMessage,
+  mdiSpeedometer,
   mdiThermometer,
   mdiThermostat,
   mdiTimerOutline,
   mdiVideo,
   mdiWaterPercent,
   mdiWeatherCloudy,
+  mdiWeight,
   mdiWhiteBalanceSunny,
   mdiWifi,
 } from "@mdi/js";
@@ -121,9 +124,10 @@ export const FIXED_DEVICE_CLASS_ICONS = {
   carbon_monoxide: mdiMoleculeCo,
   current: mdiCurrentAc,
   date: mdiCalendar,
+  distance: mdiArrowLeftRight,
   energy: mdiLightningBolt,
   frequency: mdiSineWave,
-  gas: mdiGasCylinder,
+  gas: mdiMeterGas,
   humidity: mdiWaterPercent,
   illuminance: mdiBrightness5,
   moisture: mdiWaterPercent,
@@ -140,11 +144,14 @@ export const FIXED_DEVICE_CLASS_ICONS = {
   pressure: mdiGauge,
   reactive_power: mdiFlash,
   signal_strength: mdiWifi,
+  speed: mdiSpeedometer,
   sulphur_dioxide: mdiMolecule,
   temperature: mdiThermometer,
   timestamp: mdiClock,
   volatile_organic_compounds: mdiMolecule,
   voltage: mdiSineWave,
+  // volume: TBD, => no well matching icon found
+  weight: mdiWeight,
 };
 
 /** Domains that have a state card. */

src/common/entity/feature_class_names.ts

@@ -1,10 +1,14 @@
 import { HassEntity } from "home-assistant-js-websocket";
 import { supportsFeature } from "./supports-feature";
 
+export type FeatureClassNames<T extends number = number> = Partial<
+  Record<T, string>
+>;
+
 // Expects classNames to be an object mapping feature-bit -> className
 export const featureClassNames = (
   stateObj: HassEntity,
-  classNames: { [feature: number]: string }
+  classNames: FeatureClassNames
 ) => {
   if (!stateObj || !stateObj.attributes.supported_features) {
     return "";

src/common/entity/get_states.ts

@@ -37,6 +37,7 @@ const FIXED_DOMAIN_STATES = {
   siren: ["on", "off"],
   sun: ["above_horizon", "below_horizon"],
   switch: ["on", "off"],
+  timer: ["active", "idle", "paused"],
   update: ["on", "off"],
   vacuum: ["cleaning", "docked", "error", "idle", "paused", "returning"],
   weather: [

src/common/integrations/protocolIntegrationPicked.ts

@@ -1,11 +1,11 @@
 import { html } from "lit";
 import { getConfigEntries } from "../../data/config_entries";
+import { showConfigFlowDialog } from "../../dialogs/config-flow/show-dialog-config-flow";
 import { showConfirmationDialog } from "../../dialogs/generic/show-dialog-box";
 import { showZWaveJSAddNodeDialog } from "../../panels/config/integrations/integration-panels/zwave_js/show-dialog-zwave_js-add-node";
 import type { HomeAssistant } from "../../types";
 import { documentationUrl } from "../../util/documentation-url";
 import { isComponentLoaded } from "../config/is_component_loaded";
-import { fireEvent } from "../dom/fire_event";
 import { navigate } from "../navigate";
 
 export const protocolIntegrationPicked = async (
@@ -39,8 +39,8 @@ export const protocolIntegrationPicked = async (
           "ui.panel.config.integrations.config_flow.proceed"
         ),
         confirm: () => {
-          fireEvent(element, "handler-picked", {
+          showConfigFlowDialog(element, {
-            handler: "zwave_js",
+            startFlowHandler: "zwave_js",
           });
         },
       });
@@ -75,8 +75,8 @@ export const protocolIntegrationPicked = async (
           "ui.panel.config.integrations.config_flow.proceed"
         ),
         confirm: () => {
-          fireEvent(element, "handler-picked", {
+          showConfigFlowDialog(element, {
-            handler: "zha",
+            startFlowHandler: "zha",
           });
         },
       });

src/common/string/title-case.ts

@@ -0,0 +1,4 @@
+export const titleCase = (s) =>
+  s.replace(/^_*(.)|_+(.)/g, (_s, c, d) =>
+    c ? c.toUpperCase() : " " + d.toUpperCase()
+  );

src/components/chart/statistics-chart.ts

@@ -13,6 +13,7 @@ import {
   TemplateResult,
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import memoizeOne from "memoize-one";
 import { getGraphColorByIndex } from "../../common/color/colors";
 import { isComponentLoaded } from "../../common/config/is_component_loaded";
 import {
@@ -20,31 +21,37 @@ import {
   numberFormatToLocale,
 } from "../../common/number/format_number";
 import {
-  getStatisticIds,
   getStatisticLabel,
+  getStatisticMetadata,
   Statistics,
   statisticsHaveType,
-  StatisticsMetaData,
   StatisticType,
-} from "../../data/history";
+} from "../../data/recorder";
 import type { HomeAssistant } from "../../types";
 import "./ha-chart-base";
 
+export type ExtendedStatisticType = StatisticType | "state";
+
+export const statTypeMap: Record<ExtendedStatisticType, StatisticType> = {
+  mean: "mean",
+  min: "min",
+  max: "max",
+  sum: "sum",
+  state: "sum",
+};
 @customElement("statistics-chart")
 class StatisticsChart extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property({ attribute: false }) public statisticsData!: Statistics;
 
-  @property({ type: Array }) public statisticIds?: StatisticsMetaData[];
-
   @property() public names: boolean | Record<string, string> = false;
 
   @property() public unit?: string;
 
   @property({ attribute: false }) public endTime?: Date;
 
-  @property({ type: Array }) public statTypes: Array<StatisticType> = [
+  @property({ type: Array }) public statTypes: Array<ExtendedStatisticType> = [
     "sum",
     "min",
     "mean",
@@ -191,18 +198,28 @@ class StatisticsChart extends LitElement {
     };
   }
 
-  private async _getStatisticIds() {
+  private _getStatisticsMetaData = memoizeOne(
-    this.statisticIds = await getStatisticIds(this.hass);
+    async (statisticIds: string[] | undefined) => {
+      const statsMetadataArray = await getStatisticMetadata(
+        this.hass,
+        statisticIds
+      );
+      const statisticsMetaData = {};
+      statsMetadataArray.forEach((x) => {
+        statisticsMetaData[x.statistic_id] = x;
+      });
+      return statisticsMetaData;
     }
+  );
 
   private async _generateData() {
     if (!this.statisticsData) {
       return;
     }
 
-    if (!this.statisticIds) {
+    const statisticsMetaData = await this._getStatisticsMetaData(
-      await this._getStatisticIds();
+      Object.keys(this.statisticsData)
-    }
+    );
 
     let colorIndex = 0;
     const statisticsData = Object.values(this.statisticsData);
@@ -233,9 +250,7 @@ class StatisticsChart extends LitElement {
     const names = this.names || {};
     statisticsData.forEach((stats) => {
       const firstStat = stats[0];
-      const meta = this.statisticIds!.find(
+      const meta = statisticsMetaData?.[firstStat.statistic_id];
-        (stat) => stat.statistic_id === firstStat.statistic_id
-      );
       let name = names[firstStat.statistic_id];
       if (!name) {
         name = getStatisticLabel(this.hass, firstStat.statistic_id, meta);
@@ -301,7 +316,7 @@ class StatisticsChart extends LitElement {
         : this.statTypes;
 
       sortedTypes.forEach((type) => {
-        if (statisticsHaveType(stats, type)) {
+        if (statisticsHaveType(stats, statTypeMap[type])) {
           const band = drawBands && (type === "min" || type === "max");
           statTypes.push(type);
           statDataSets.push({
@@ -329,7 +344,6 @@ class StatisticsChart extends LitElement {
 
       let prevDate: Date | null = null;
       // Process chart data.
-      let initVal: number | null = null;
       let prevSum: number | null = null;
       stats.forEach((stat) => {
         const date = new Date(stat.start);
@@ -341,11 +355,11 @@ class StatisticsChart extends LitElement {
         statTypes.forEach((type) => {
           let val: number | null;
           if (type === "sum") {
-            if (initVal === null) {
+            if (prevSum === null) {
-              initVal = val = stat.state || 0;
+              val = 0;
               prevSum = stat.sum;
             } else {
-              val = initVal + ((stat.sum || 0) - prevSum!);
+              val = (stat.sum || 0) - prevSum;
             }
           } else {
             val = stat[type];

src/components/entity/ha-statistic-picker.ts

@@ -3,10 +3,11 @@ import { html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
 import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
+import { ensureArray } from "../../common/ensure-array";
 import { fireEvent } from "../../common/dom/fire_event";
 import { computeStateName } from "../../common/entity/compute_state_name";
 import { stringCompare } from "../../common/string/compare";
-import { getStatisticIds, StatisticsMetaData } from "../../data/history";
+import { getStatisticIds, StatisticsMetaData } from "../../data/recorder";
 import { PolymerChangedEvent } from "../../polymer-types";
 import { HomeAssistant } from "../../types";
 import { documentationUrl } from "../../util/documentation-url";
@@ -39,22 +40,20 @@ export class HaStatisticPicker extends LitElement {
     type: Array,
     attribute: "include-statistics-unit-of-measurement",
   })
-  public includeStatisticsUnitOfMeasurement?: string[];
+  public includeStatisticsUnitOfMeasurement?: string | string[];
 
   /**
    * Show only statistics displayed with these units of measurements.
-   * @type {Array}
    * @attr include-display-unit-of-measurement
    */
-  @property({ type: Array, attribute: "include-display-unit-of-measurement" })
+  @property({ attribute: "include-display-unit-of-measurement" })
-  public includeDisplayUnitOfMeasurement?: string[];
+  public includeDisplayUnitOfMeasurement?: string | string[];
 
   /**
    * Show only statistics with these device classes.
-   * @type {Array}
    * @attr include-device-classes
    */
-  @property({ type: Array, attribute: "include-device-classes" })
+  @property({ attribute: "include-device-classes" })
   public includeDeviceClasses?: string[];
 
   /**
@@ -97,8 +96,8 @@ export class HaStatisticPicker extends LitElement {
   private _getStatistics = memoizeOne(
     (
       statisticIds: StatisticsMetaData[],
-      includeStatisticsUnitOfMeasurement?: string[],
+      includeStatisticsUnitOfMeasurement?: string | string[],
-      includeDisplayUnitOfMeasurement?: string[],
+      includeDisplayUnitOfMeasurement?: string | string[],
       includeDeviceClasses?: string[],
       entitiesOnly?: boolean
     ): Array<{ id: string; name: string; state?: HassEntity }> => {
@@ -114,17 +113,15 @@ export class HaStatisticPicker extends LitElement {
       }
 
       if (includeStatisticsUnitOfMeasurement) {
+        const includeUnits = ensureArray(includeStatisticsUnitOfMeasurement);
         statisticIds = statisticIds.filter((meta) =>
-          includeStatisticsUnitOfMeasurement.includes(
+          includeUnits.includes(meta.statistics_unit_of_measurement)
-            meta.statistics_unit_of_measurement
-          )
         );
       }
       if (includeDisplayUnitOfMeasurement) {
+        const includeUnits = ensureArray(includeDisplayUnitOfMeasurement);
         statisticIds = statisticIds.filter((meta) =>
-          includeDisplayUnitOfMeasurement.includes(
+          includeUnits.includes(meta.display_unit_of_measurement)
-            meta.display_unit_of_measurement
-          )
         );
       }
 

src/components/entity/ha-statistics-picker.ts

@@ -22,11 +22,52 @@ class HaStatisticsPicker extends LitElement {
   @property({ attribute: "pick-statistic-label" })
   public pickStatisticLabel?: string;
 
+  /**
+   * Show only statistics natively stored with these units of measurements.
+   * @attr include-statistics-unit-of-measurement
+   */
+  @property({
+    attribute: "include-statistics-unit-of-measurement",
+  })
+  public includeStatisticsUnitOfMeasurement?: string[] | string;
+
+  /**
+   * Show only statistics displayed with these units of measurements.
+   * @attr include-display-unit-of-measurement
+   */
+  @property({ attribute: "include-display-unit-of-measurement" })
+  public includeDisplayUnitOfMeasurement?: string[] | string;
+
+  /**
+   * Ignore filtering of statistics type and units when only a single statistic is selected.
+   * @type {boolean}
+   * @attr ignore-restrictions-on-first-statistic
+   */
+  @property({
+    type: Boolean,
+    attribute: "ignore-restrictions-on-first-statistic",
+  })
+  public ignoreRestrictionsOnFirstStatistic = false;
+
   protected render(): TemplateResult {
     if (!this.hass) {
       return html``;
     }
 
+    const ignoreRestriction =
+      this.ignoreRestrictionsOnFirstStatistic &&
+      this._currentStatistics.length <= 1;
+
+    const includeDisplayUnitCurrent = ignoreRestriction
+      ? undefined
+      : this.includeDisplayUnitOfMeasurement;
+    const includeStatisticsUnitCurrent = ignoreRestriction
+      ? undefined
+      : this.includeStatisticsUnitOfMeasurement;
+    const includeStatisticTypesCurrent = ignoreRestriction
+      ? undefined
+      : this.statisticTypes;
+
     return html`
       ${this._currentStatistics.map(
         (statisticId) => html`
@@ -34,8 +75,10 @@ class HaStatisticsPicker extends LitElement {
             <ha-statistic-picker
               .curValue=${statisticId}
               .hass=${this.hass}
+              .includeDisplayUnitOfMeasurement=${includeDisplayUnitCurrent}
+              .includeStatisticsUnitOfMeasurement=${includeStatisticsUnitCurrent}
               .value=${statisticId}
-              .statisticTypes=${this.statisticTypes}
+              .statisticTypes=${includeStatisticTypesCurrent}
               .statisticIds=${this.statisticIds}
               .label=${this.pickedStatisticLabel}
               @value-changed=${this._statisticChanged}
@@ -46,6 +89,10 @@ class HaStatisticsPicker extends LitElement {
       <div>
         <ha-statistic-picker
           .hass=${this.hass}
+          .includeDisplayUnitOfMeasurement=${this
+            .includeDisplayUnitOfMeasurement}
+          .includeStatisticsUnitOfMeasurement=${this
+            .includeStatisticsUnitOfMeasurement}
           .statisticTypes=${this.statisticTypes}
           .statisticIds=${this.statisticIds}
           .label=${this.pickStatisticLabel}

src/components/ha-combo-box.ts

@@ -290,6 +290,7 @@ export class HaComboBox extends LitElement {
       }
       vaadin-combo-box-light {
         position: relative;
+        --vaadin-combo-box-overlay-max-height: calc(45vh);
       }
       ha-textfield {
         width: 100%;

src/components/ha-cover-controls.ts

@@ -3,15 +3,14 @@ import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { computeCloseIcon, computeOpenIcon } from "../common/entity/cover_icon";
+import { supportsFeature } from "../common/entity/supports-feature";
 import {
   CoverEntity,
+  CoverEntityFeature,
   isClosing,
   isFullyClosed,
   isFullyOpen,
   isOpening,
-  supportsClose,
-  supportsOpen,
-  supportsStop,
 } from "../data/cover";
 import { UNAVAILABLE } from "../data/entity";
 import type { HomeAssistant } from "../types";
@@ -32,7 +31,7 @@ class HaCoverControls extends LitElement {
       <div class="state">
         <ha-icon-button
           class=${classMap({
-            hidden: !supportsOpen(this.stateObj),
+            hidden: !supportsFeature(this.stateObj, CoverEntityFeature.OPEN),
           })}
           .label=${this.hass.localize(
             "ui.dialogs.more_info_control.cover.open_cover"
@@ -44,7 +43,7 @@ class HaCoverControls extends LitElement {
         </ha-icon-button>
         <ha-icon-button
           class=${classMap({
-            hidden: !supportsStop(this.stateObj),
+            hidden: !supportsFeature(this.stateObj, CoverEntityFeature.STOP),
           })}
           .label=${this.hass.localize(
             "ui.dialogs.more_info_control.cover.stop_cover"
@@ -55,7 +54,7 @@ class HaCoverControls extends LitElement {
         ></ha-icon-button>
         <ha-icon-button
           class=${classMap({
-            hidden: !supportsClose(this.stateObj),
+            hidden: !supportsFeature(this.stateObj, CoverEntityFeature.CLOSE),
           })}
           .label=${this.hass.localize(
             "ui.dialogs.more_info_control.cover.close_cover"

src/components/ha-cover-tilt-controls.ts

@@ -2,13 +2,12 @@ import { mdiArrowBottomLeft, mdiArrowTopRight, mdiStop } from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
+import { supportsFeature } from "../common/entity/supports-feature";
 import {
   CoverEntity,
+  CoverEntityFeature,
   isFullyClosedTilt,
   isFullyOpenTilt,
-  supportsCloseTilt,
-  supportsOpenTilt,
-  supportsStopTilt,
 } from "../data/cover";
 import { UNAVAILABLE } from "../data/entity";
 import { HomeAssistant } from "../types";
@@ -27,7 +26,10 @@ class HaCoverTiltControls extends LitElement {
 
     return html` <ha-icon-button
         class=${classMap({
-          invisible: !supportsOpenTilt(this.stateObj),
+          invisible: !supportsFeature(
+            this.stateObj,
+            CoverEntityFeature.OPEN_TILT
+          ),
         })}
         .label=${this.hass.localize(
           "ui.dialogs.more_info_control.cover.open_tilt_cover"
@@ -38,7 +40,10 @@ class HaCoverTiltControls extends LitElement {
       ></ha-icon-button>
       <ha-icon-button
         class=${classMap({
-          invisible: !supportsStopTilt(this.stateObj),
+          invisible: !supportsFeature(
+            this.stateObj,
+            CoverEntityFeature.STOP_TILT
+          ),
         })}
         .label=${this.hass.localize(
           "ui.dialogs.more_info_control.cover.stop_cover"
@@ -49,7 +54,10 @@ class HaCoverTiltControls extends LitElement {
       ></ha-icon-button>
       <ha-icon-button
         class=${classMap({
-          invisible: !supportsCloseTilt(this.stateObj),
+          invisible: !supportsFeature(
+            this.stateObj,
+            CoverEntityFeature.CLOSE_TILT
+          ),
         })}
         .label=${this.hass.localize(
           "ui.dialogs.more_info_control.cover.close_tilt_cover"

src/components/ha-dialog.ts

@@ -91,7 +91,7 @@ export class HaDialog extends DialogBase {
       .header_button {
         position: absolute;
         right: 16px;
-        top: 10px;
+        top: 14px;
         text-decoration: none;
         color: inherit;
       }

src/components/ha-formfield.ts

@@ -13,6 +13,9 @@ export class HaFormfield extends FormfieldBase {
       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;

src/components/ha-hls-player.ts

@@ -165,7 +165,7 @@ class HaHLSPlayer extends LitElement {
     window.addEventListener("resize", this._resizeExoPlayer);
     this.updateComplete.then(() => nextRender()).then(this._resizeExoPlayer);
     this._videoEl.style.visibility = "hidden";
-    await this.hass!.auth.external!.sendMessage({
+    await this.hass!.auth.external!.fireMessage({
       type: "exoplayer/play_hls",
       payload: {
         url: new URL(url, window.location.href).toString(),

src/components/ha-navigation-picker.ts

@@ -0,0 +1,221 @@
+import { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
+import { css, html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { customElement, property, query, state } from "lit/decorators";
+import { fireEvent } from "../common/dom/fire_event";
+import { titleCase } from "../common/string/title-case";
+import {
+  fetchConfig,
+  LovelaceConfig,
+  LovelaceViewConfig,
+} from "../data/lovelace";
+import { PolymerChangedEvent } from "../polymer-types";
+import { HomeAssistant, PanelInfo } from "../types";
+import "./ha-combo-box";
+import type { HaComboBox } from "./ha-combo-box";
+import "./ha-icon";
+
+type NavigationItem = {
+  path: string;
+  icon: string;
+  title: string;
+};
+
+const DEFAULT_ITEMS: NavigationItem[] = [{ path: "", icon: "", title: "" }];
+
+// eslint-disable-next-line lit/prefer-static-styles
+const rowRenderer: ComboBoxLitRenderer<NavigationItem> = (item) => html`
+  <mwc-list-item graphic="icon" .twoline=${!!item.title}>
+    <ha-icon .icon=${item.icon} slot="graphic"></ha-icon>
+    <span>${item.title || item.path}</span>
+    <span slot="secondary">${item.path}</span>
+  </mwc-list-item>
+`;
+
+const createViewNavigationItem = (
+  prefix: string,
+  view: LovelaceViewConfig,
+  index: number
+) => ({
+  path: `/${prefix}/${view.path ?? index}`,
+  icon: view.icon ?? "mdi:view-compact",
+  title: view.title ?? (view.path ? titleCase(view.path) : `${index}`),
+});
+
+const createPanelNavigationItem = (hass: HomeAssistant, panel: PanelInfo) => ({
+  path: `/${panel.url_path}`,
+  icon: panel.icon ?? "mdi:view-dashboard",
+  title:
+    panel.url_path === hass.defaultPanel
+      ? hass.localize("panel.states")
+      : hass.localize(`panel.${panel.title}`) ||
+        panel.title ||
+        (panel.url_path ? titleCase(panel.url_path) : ""),
+});
+
+@customElement("ha-navigation-picker")
+export class HaNavigationPicker extends LitElement {
+  @property() public hass?: HomeAssistant;
+
+  @property() public label?: string;
+
+  @property() public value?: string;
+
+  @property() public helper?: string;
+
+  @property({ type: Boolean }) public disabled = false;
+
+  @property({ type: Boolean }) public required = false;
+
+  @state() private _opened = false;
+
+  private navigationItemsLoaded = false;
+
+  private navigationItems: NavigationItem[] = DEFAULT_ITEMS;
+
+  @query("ha-combo-box", true) private comboBox!: HaComboBox;
+
+  protected render(): TemplateResult {
+    return html`
+      <ha-combo-box
+        .hass=${this.hass}
+        item-value-path="path"
+        item-label-path="path"
+        .value=${this._value}
+        allow-custom-value
+        .filteredItems=${this.navigationItems}
+        .label=${this.label}
+        .helper=${this.helper}
+        .disabled=${this.disabled}
+        .required=${this.required}
+        .renderer=${rowRenderer}
+        @opened-changed=${this._openedChanged}
+        @value-changed=${this._valueChanged}
+        @filter-changed=${this._filterChanged}
+      >
+      </ha-combo-box>
+    `;
+  }
+
+  private async _openedChanged(ev: PolymerChangedEvent<boolean>) {
+    this._opened = ev.detail.value;
+    if (this._opened && !this.navigationItemsLoaded) {
+      this._loadNavigationItems();
+    }
+  }
+
+  private async _loadNavigationItems() {
+    this.navigationItemsLoaded = true;
+
+    const panels = Object.entries(this.hass!.panels).map(([id, panel]) => ({
+      id,
+      ...panel,
+    }));
+    const lovelacePanels = panels.filter(
+      (panel) => panel.component_name === "lovelace"
+    );
+
+    const viewConfigs = await Promise.all(
+      lovelacePanels.map((panel) =>
+        fetchConfig(
+          this.hass!.connection,
+          // path should be null to fetch default lovelace panel
+          panel.url_path === "lovelace" ? null : panel.url_path,
+          true
+        )
+          .then((config) => [panel.id, config] as [string, LovelaceConfig])
+          .catch((_) => [panel.id, undefined] as [string, undefined])
+      )
+    );
+
+    const panelViewConfig = new Map(viewConfigs);
+
+    this.navigationItems = [];
+
+    for (const panel of panels) {
+      this.navigationItems.push(createPanelNavigationItem(this.hass!, panel));
+
+      const config = panelViewConfig.get(panel.id);
+
+      if (!config) continue;
+
+      config.views.forEach((view, index) =>
+        this.navigationItems.push(
+          createViewNavigationItem(panel.url_path, view, index)
+        )
+      );
+    }
+
+    this.comboBox.filteredItems = this.navigationItems;
+  }
+
+  protected shouldUpdate(changedProps: PropertyValues) {
+    return !this._opened || changedProps.has("_opened");
+  }
+
+  private _valueChanged(ev: PolymerChangedEvent<string>) {
+    ev.stopPropagation();
+    this._setValue(ev.detail.value);
+  }
+
+  private _setValue(value: string) {
+    this.value = value;
+    fireEvent(
+      this,
+      "value-changed",
+      { value: this._value },
+      {
+        bubbles: false,
+        composed: false,
+      }
+    );
+  }
+
+  private _filterChanged(ev: CustomEvent): void {
+    const filterString = ev.detail.value.toLowerCase();
+    const characterCount = filterString.length;
+    if (characterCount >= 2) {
+      const filteredItems: NavigationItem[] = [];
+
+      this.navigationItems.forEach((item) => {
+        if (
+          item.path.toLowerCase().includes(filterString) ||
+          item.title.toLowerCase().includes(filterString)
+        ) {
+          filteredItems.push(item);
+        }
+      });
+
+      if (filteredItems.length > 0) {
+        this.comboBox.filteredItems = filteredItems;
+      } else {
+        this.comboBox.filteredItems = [];
+      }
+    } else {
+      this.comboBox.filteredItems = this.navigationItems;
+    }
+  }
+
+  private get _value() {
+    return this.value || "";
+  }
+
+  static get styles() {
+    return css`
+      ha-icon,
+      ha-svg-icon {
+        color: var(--primary-text-color);
+        position: relative;
+        bottom: 0px;
+      }
+      *[slot="prefix"] {
+        margin-right: 8px;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-navigation-picker": HaNavigationPicker;
+  }
+}

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

@@ -0,0 +1,47 @@
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
+import { fireEvent } from "../../common/dom/fire_event";
+import { NavigationSelector } from "../../data/selector";
+import { HomeAssistant } from "../../types";
+import "../ha-navigation-picker";
+
+@customElement("ha-selector-navigation")
+export class HaNavigationSelector extends LitElement {
+  @property() public hass!: HomeAssistant;
+
+  @property() public selector!: NavigationSelector;
+
+  @property() public value?: string;
+
+  @property() public label?: string;
+
+  @property() public helper?: string;
+
+  @property({ type: Boolean, reflect: true }) public disabled = false;
+
+  @property({ type: Boolean }) public required = true;
+
+  protected render() {
+    return html`
+      <ha-navigation-picker
+        .hass=${this.hass}
+        .label=${this.label}
+        .value=${this.value}
+        .required=${this.required}
+        .disabled=${this.disabled}
+        .helper=${this.helper}
+        @value-changed=${this._valueChanged}
+      ></ha-navigation-picker>
+    `;
+  }
+
+  private _valueChanged(ev: CustomEvent) {
+    fireEvent(this, "value-changed", { value: ev.detail.value });
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-selector-navigation": HaNavigationSelector;
+  }
+}

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

@@ -13,6 +13,7 @@ import type { HaComboBox } from "../ha-combo-box";
 import "../ha-formfield";
 import "../ha-radio";
 import "../ha-select";
+import "../ha-input-helper-text";
 
 @customElement("ha-selector-select")
 export class HaSelectSelector extends LitElement {
@@ -40,7 +41,7 @@ export class HaSelectSelector extends LitElement {
     );
 
     if (!this.selector.select.custom_value && this._mode === "list") {
-      if (!this.selector.select.multiple || this.required) {
+      if (!this.selector.select.multiple) {
         return html`
           <div>
             ${this.label}
@@ -50,7 +51,7 @@ export class HaSelectSelector extends LitElement {
                   <ha-radio
                     .checked=${item.value === this.value}
                     .value=${item.value}
-                    .disabled=${this.disabled}
+                    .disabled=${item.disabled || this.disabled}
                     @change=${this._valueChanged}
                   ></ha-radio>
                 </ha-formfield>
@@ -63,13 +64,14 @@ export class HaSelectSelector extends LitElement {
 
       return html`
         <div>
-          ${this.label}${options.map(
+          ${this.label}
+          ${options.map(
             (item: SelectOption) => html`
               <ha-formfield .label=${item.label}>
                 <ha-checkbox
                   .checked=${this.value?.includes(item.value)}
                   .value=${item.value}
-                  .disabled=${this.disabled}
+                  .disabled=${item.disabled || this.disabled}
                   @change=${this._checkboxChanged}
                 ></ha-checkbox>
               </ha-formfield>
@@ -112,7 +114,9 @@ export class HaSelectSelector extends LitElement {
           .disabled=${this.disabled}
           .required=${this.required && !value.length}
           .value=${this._filter}
-          .items=${options.filter((item) => !this.value?.includes(item.value))}
+          .items=${options.filter(
+            (option) => !option.disabled && !value?.includes(option.value)
+          )}
           @filter-changed=${this._filterChanged}
           @value-changed=${this._comboBoxValueChanged}
         ></ha-combo-box>
@@ -136,7 +140,7 @@ export class HaSelectSelector extends LitElement {
           .helper=${this.helper}
           .disabled=${this.disabled}
           .required=${this.required}
-          .items=${options}
+          .items=${options.filter((item) => !item.disabled)}
           .value=${this.value}
           @filter-changed=${this._filterChanged}
           @value-changed=${this._comboBoxValueChanged}
@@ -157,7 +161,9 @@ export class HaSelectSelector extends LitElement {
       >
         ${options.map(
           (item: SelectOption) => html`
-            <mwc-list-item .value=${item.value}>${item.label}</mwc-list-item>
+            <mwc-list-item .value=${item.value} .disabled=${item.disabled}
+              >${item.label}</mwc-list-item
+            >
           `
         )}
       </ha-select>
@@ -285,6 +291,9 @@ export class HaSelectSelector extends LitElement {
     ha-formfield {
       display: block;
     }
+    mwc-list-item[disabled] {
+      --mdc-theme-text-primary-on-background: var(--disabled-text-color);
+    }
   `;
 }
 

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

@@ -16,6 +16,7 @@ import "./ha-selector-device";
 import "./ha-selector-duration";
 import "./ha-selector-entity";
 import "./ha-selector-file";
+import "./ha-selector-navigation";
 import "./ha-selector-number";
 import "./ha-selector-object";
 import "./ha-selector-select";

src/components/ha-textfield.ts

@@ -82,6 +82,13 @@ export class HaTextField extends TextFieldBase {
         direction: var(--direction);
       }
 
+      .mdc-floating-label:not(.mdc-floating-label--float-above) {
+        text-overflow: ellipsis;
+        width: inherit;
+        padding-right: 30px;
+        box-sizing: border-box;
+      }
+
       input {
         text-align: var(--text-field-text-align, start);
       }

src/components/trace/trace-tab-styles.ts

@@ -28,7 +28,7 @@ export const traceTabStyles = css`
   }
 
   .tabs > *.active {
-    border-bottom-color: var(--accent-color);
+    border-bottom-color: var(--primary-color);
   }
 
   .tabs > *:focus,

src/data/application_credential.ts

@@ -8,6 +8,10 @@ export interface ApplicationCredentialsConfig {
   integrations: Record<string, ApplicationCredentialsDomainConfig>;
 }
 
+export interface ApplicationCredentialsConfigEntry {
+  application_credentials_id?: string;
+}
+
 export interface ApplicationCredential {
   id: string;
   domain: string;
@@ -21,6 +25,15 @@ export const fetchApplicationCredentialsConfig = async (hass: HomeAssistant) =>
     type: "application_credentials/config",
   });
 
+export const fetchApplicationCredentialsConfigEntry = async (
+  hass: HomeAssistant,
+  configEntryId: string
+) =>
+  hass.callWS<ApplicationCredentialsConfigEntry>({
+    type: "application_credentials/config_entry",
+    config_entry_id: configEntryId,
+  });
+
 export const fetchApplicationCredentials = async (hass: HomeAssistant) =>
   hass.callWS<ApplicationCredential[]>({
     type: "application_credentials/list",

src/data/automation_i18n.ts

@@ -189,7 +189,7 @@ export const describeTrigger = (
   // Time Trigger
   if (trigger.platform === "time" && trigger.at) {
     const at = trigger.at.includes(".")
-      ? hass.states[trigger.at] || trigger.at
+      ? `entity ${computeStateName(hass.states[trigger.at]) || trigger.at}`
       : trigger.at;
 
     return `When the time is equal to ${at}`;

src/data/camera.ts

@@ -6,6 +6,7 @@ import { timeCacheEntityPromiseFunc } from "../common/util/time-cache-entity-pro
 import { HomeAssistant } from "../types";
 import { getSignedPath } from "./auth";
 
+export const CAMERA_ORIENTATIONS = [1, 2, 3, 4, 6, 8];
 export const CAMERA_SUPPORT_ON_OFF = 1;
 export const CAMERA_SUPPORT_STREAM = 2;
 
@@ -26,6 +27,7 @@ export interface CameraEntity extends HassEntityBase {
 
 export interface CameraPreferences {
   preload_stream: boolean;
+  orientation: number;
 }
 
 export interface CameraThumbnail {
@@ -109,11 +111,13 @@ export const fetchCameraPrefs = (hass: HomeAssistant, entityId: string) =>
     entity_id: entityId,
   });
 
+type ValueOf<T extends any[]> = T[number];
 export const updateCameraPrefs = (
   hass: HomeAssistant,
   entityId: string,
   prefs: {
     preload_stream?: boolean;
+    orientation?: ValueOf<typeof CAMERA_ORIENTATIONS>;
   }
 ) =>
   hass.callWS<CameraPreferences>({

src/data/config_entries.ts

@@ -1,3 +1,4 @@
+import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { HomeAssistant } from "../types";
 
 export interface ConfigEntry {
@@ -44,6 +45,29 @@ export const RECOVERABLE_STATES: ConfigEntry["state"][] = [
   "setup_retry",
 ];
 
+export interface ConfigEntryUpdate {
+  // null means no update as is the current state
+  type: null | "added" | "removed" | "updated";
+  entry: ConfigEntry;
+}
+
+export const subscribeConfigEntries = (
+  hass: HomeAssistant,
+  callbackFunction: (message: ConfigEntryUpdate[]) => void,
+  filters?: { type?: "helper" | "integration"; domain?: string }
+): Promise<UnsubscribeFunc> => {
+  const params: any = {
+    type: "config_entries/subscribe",
+  };
+  if (filters && filters.type) {
+    params.type_filter = filters.type;
+  }
+  return hass.connection.subscribeMessage<ConfigEntryUpdate[]>(
+    (message) => callbackFunction(message),
+    params
+  );
+};
+
 export const getConfigEntries = (
   hass: HomeAssistant,
   filters?: { type?: "helper" | "integration"; domain?: string }

src/data/cover.ts

@@ -4,46 +4,16 @@ import {
 } from "home-assistant-js-websocket";
 import { supportsFeature } from "../common/entity/supports-feature";
 
-export const SUPPORT_OPEN = 1;
+export const enum CoverEntityFeature {
-export const SUPPORT_CLOSE = 2;
+  OPEN = 1,
-export const SUPPORT_SET_POSITION = 4;
+  CLOSE = 2,
-export const SUPPORT_STOP = 8;
+  SET_POSITION = 4,
-export const SUPPORT_OPEN_TILT = 16;
+  STOP = 8,
-export const SUPPORT_CLOSE_TILT = 32;
+  OPEN_TILT = 16,
-export const SUPPORT_STOP_TILT = 64;
+  CLOSE_TILT = 32,
-export const SUPPORT_SET_TILT_POSITION = 128;
+  STOP_TILT = 64,
-
+  SET_TILT_POSITION = 128,
-export const FEATURE_CLASS_NAMES = {
+}
-  4: "has-set_position",
-  16: "has-open_tilt",
-  32: "has-close_tilt",
-  64: "has-stop_tilt",
-  128: "has-set_tilt_position",
-};
-
-export const supportsOpen = (stateObj) =>
-  supportsFeature(stateObj, SUPPORT_OPEN);
-
-export const supportsClose = (stateObj) =>
-  supportsFeature(stateObj, SUPPORT_CLOSE);
-
-export const supportsSetPosition = (stateObj) =>
-  supportsFeature(stateObj, SUPPORT_SET_POSITION);
-
-export const supportsStop = (stateObj) =>
-  supportsFeature(stateObj, SUPPORT_STOP);
-
-export const supportsOpenTilt = (stateObj) =>
-  supportsFeature(stateObj, SUPPORT_OPEN_TILT);
-
-export const supportsCloseTilt = (stateObj) =>
-  supportsFeature(stateObj, SUPPORT_CLOSE_TILT);
-
-export const supportsStopTilt = (stateObj) =>
-  supportsFeature(stateObj, SUPPORT_STOP_TILT);
-
-export const supportsSetTiltPosition = (stateObj) =>
-  supportsFeature(stateObj, SUPPORT_SET_TILT_POSITION);
 
 export function isFullyOpen(stateObj: CoverEntity) {
   if (stateObj.attributes.current_position !== undefined) {
@@ -77,17 +47,19 @@ export function isClosing(stateObj: CoverEntity) {
 
 export function isTiltOnly(stateObj: CoverEntity) {
   const supportsCover =
-    supportsOpen(stateObj) || supportsClose(stateObj) || supportsStop(stateObj);
+    supportsFeature(stateObj, CoverEntityFeature.OPEN) ||
+    supportsFeature(stateObj, CoverEntityFeature.CLOSE) ||
+    supportsFeature(stateObj, CoverEntityFeature.STOP);
   const supportsTilt =
-    supportsOpenTilt(stateObj) ||
+    supportsFeature(stateObj, CoverEntityFeature.OPEN_TILT) ||
-    supportsCloseTilt(stateObj) ||
+    supportsFeature(stateObj, CoverEntityFeature.CLOSE_TILT) ||
-    supportsStopTilt(stateObj);
+    supportsFeature(stateObj, CoverEntityFeature.STOP_TILT);
   return supportsTilt && !supportsCover;
 }
 
 interface CoverEntityAttributes extends HassEntityAttributeBase {
-  current_position: number;
+  current_position?: number;
-  current_tilt_position: number;
+  current_tilt_position?: number;
 }
 
 export interface CoverEntity extends HassEntityBase {

src/data/energy.ts

@@ -20,7 +20,8 @@ import {
   getStatisticMetadata,
   Statistics,
   StatisticsMetaData,
-} from "./history";
+  StatisticsUnitConfiguration,
+} from "./recorder";
 
 const energyCollectionKeys: (string | undefined)[] = [];
 
@@ -28,7 +29,6 @@ export const emptyFlowFromGridSourceEnergyPreference =
   (): FlowFromGridSourceEnergyPreference => ({
     stat_energy_from: "",
     stat_cost: null,
-    entity_energy_from: null,
     entity_energy_price: null,
     number_energy_price: null,
   });
@@ -37,7 +37,6 @@ export const emptyFlowToGridSourceEnergyPreference =
   (): FlowToGridSourceEnergyPreference => ({
     stat_energy_to: "",
     stat_compensation: null,
-    entity_energy_to: null,
     entity_energy_price: null,
     number_energy_price: null,
   });
@@ -67,7 +66,6 @@ export const emptyGasEnergyPreference = (): GasSourceTypeEnergyPreference => ({
   type: "gas",
   stat_energy_from: "",
   stat_cost: null,
-  entity_energy_from: null,
   entity_energy_price: null,
   number_energy_price: null,
 });
@@ -92,7 +90,6 @@ export interface FlowFromGridSourceEnergyPreference {
   stat_cost: string | null;
 
   // Can be used to generate costs if stat_cost omitted
-  entity_energy_from: string | null;
   entity_energy_price: string | null;
   number_energy_price: number | null;
 }
@@ -104,8 +101,7 @@ export interface FlowToGridSourceEnergyPreference {
   // $ meter
   stat_compensation: string | null;
 
-  // Can be used to generate costs if stat_cost omitted
+  // Can be used to generate costs if stat_compensation omitted
-  entity_energy_to: string | null;
   entity_energy_price: string | null;
   number_energy_price: number | null;
 }
@@ -141,7 +137,6 @@ export interface GasSourceTypeEnergyPreference {
   stat_cost: string | null;
 
   // Can be used to generate costs if stat_cost omitted
-  entity_energy_from: string | null;
   entity_energy_price: string | null;
   number_energy_price: number | null;
   unit_of_measurement?: string | null;
@@ -358,12 +353,19 @@ const getEnergyData = async (
   // Subtract 1 hour from start to get starting point data
   const startMinHour = addHours(start, -1);
 
+  const lengthUnit = hass.config.unit_system.length || "";
+  const units: StatisticsUnitConfiguration = {
+    energy: "kWh",
+    volume: lengthUnit === "km" ? "m³" : "ft³",
+  };
+
   const stats = await fetchStatistics(
     hass!,
     startMinHour,
     end,
     statIDs,
-    period
+    period,
+    units
   );
 
   let statsCompare;
@@ -385,7 +387,8 @@ const getEnergyData = async (
       compareStartMinHour,
       endCompare,
       statIDs,
-      period
+      period,
+      units
     );
   }
 
@@ -621,7 +624,7 @@ export const getEnergyGasUnitCategory = (
     const statisticIdWithMeta = statisticsMetaData[source.stat_energy_from];
     if (statisticIdWithMeta) {
       return ENERGY_GAS_VOLUME_UNITS.includes(
-        statisticIdWithMeta.display_unit_of_measurement
+        statisticIdWithMeta.statistics_unit_of_measurement
       )
         ? "volume"
         : "energy";

src/data/entity_registry.ts

@@ -20,10 +20,10 @@ export interface EntityRegistryEntry {
   entity_category: "config" | "diagnostic" | null;
   has_entity_name: boolean;
   original_name?: string;
+  unique_id: string;
 }
 
 export interface ExtEntityRegistryEntry extends EntityRegistryEntry {
-  unique_id: string;
   capabilities: Record<string, unknown>;
   original_icon?: string;
   device_class?: string;
@@ -61,7 +61,7 @@ export interface EntityRegistryEntryUpdateParams {
   hidden_by: string | null;
   new_entity_id?: string;
   options_domain?: string;
-  options?: SensorEntityOptions | WeatherEntityOptions;
+  options?: SensorEntityOptions | NumberEntityOptions | WeatherEntityOptions;
 }
 
 export const findBatteryEntity = (

src/data/history.ts

@@ -1,10 +1,7 @@
 import { HassEntities, HassEntity } from "home-assistant-js-websocket";
 import { computeDomain } from "../common/entity/compute_domain";
 import { computeStateDisplayFromEntityAttributes } from "../common/entity/compute_state_display";
-import {
+import { computeStateNameFromEntityAttributes } from "../common/entity/compute_state_name";
-  computeStateName,
-  computeStateNameFromEntityAttributes,
-} from "../common/entity/compute_state_name";
 import { LocalizeFunc } from "../common/translations/localize";
 import { HomeAssistant } from "../types";
 import { FrontendLocaleData } from "./translation";
@@ -63,87 +60,6 @@ export interface HistoryResult {
   timeline: TimelineEntity[];
 }
 
-export type StatisticType = "sum" | "min" | "max" | "mean";
-
-export interface Statistics {
-  [statisticId: string]: StatisticValue[];
-}
-
-export interface StatisticValue {
-  statistic_id: string;
-  start: string;
-  end: string;
-  last_reset: string | null;
-  max: number | null;
-  mean: number | null;
-  min: number | null;
-  sum: number | null;
-  state: number | null;
-}
-
-export interface StatisticsMetaData {
-  display_unit_of_measurement: string;
-  statistics_unit_of_measurement: string;
-  statistic_id: string;
-  source: string;
-  name?: string | null;
-  has_sum: boolean;
-  has_mean: boolean;
-}
-
-export type StatisticsValidationResult =
-  | StatisticsValidationResultNoState
-  | StatisticsValidationResultEntityNotRecorded
-  | StatisticsValidationResultEntityNoLongerRecorded
-  | StatisticsValidationResultUnsupportedStateClass
-  | StatisticsValidationResultUnitsChanged
-  | StatisticsValidationResultUnsupportedUnitMetadata
-  | StatisticsValidationResultUnsupportedUnitState;
-
-export interface StatisticsValidationResultNoState {
-  type: "no_state";
-  data: { statistic_id: string };
-}
-
-export interface StatisticsValidationResultEntityNoLongerRecorded {
-  type: "entity_no_longer_recorded";
-  data: { statistic_id: string };
-}
-
-export interface StatisticsValidationResultEntityNotRecorded {
-  type: "entity_not_recorded";
-  data: { statistic_id: string };
-}
-
-export interface StatisticsValidationResultUnsupportedStateClass {
-  type: "unsupported_state_class";
-  data: { statistic_id: string; state_class: string };
-}
-
-export interface StatisticsValidationResultUnitsChanged {
-  type: "units_changed";
-  data: { statistic_id: string; state_unit: string; metadata_unit: string };
-}
-
-export interface StatisticsValidationResultUnsupportedUnitMetadata {
-  type: "unsupported_unit_metadata";
-  data: {
-    statistic_id: string;
-    device_class: string;
-    metadata_unit: string;
-    supported_unit: string;
-  };
-}
-
-export interface StatisticsValidationResultUnsupportedUnitState {
-  type: "unsupported_unit_state";
-  data: { statistic_id: string; device_class: string; metadata_unit: string };
-}
-
-export interface StatisticsValidationResults {
-  [statisticId: string]: StatisticsValidationResult[];
-}
-
 export interface HistoryStates {
   [entityId: string]: EntityHistoryState[];
 }
@@ -449,132 +365,3 @@ export const computeHistory = (
 
   return { line: unitStates, timeline: timelineDevices };
 };
-
-// Statistics
-
-export const getStatisticIds = (
-  hass: HomeAssistant,
-  statistic_type?: "mean" | "sum"
-) =>
-  hass.callWS<StatisticsMetaData[]>({
-    type: "history/list_statistic_ids",
-    statistic_type,
-  });
-
-export const getStatisticMetadata = (
-  hass: HomeAssistant,
-  statistic_ids?: string[]
-) =>
-  hass.callWS<StatisticsMetaData[]>({
-    type: "recorder/get_statistics_metadata",
-    statistic_ids,
-  });
-
-export const fetchStatistics = (
-  hass: HomeAssistant,
-  startTime: Date,
-  endTime?: Date,
-  statistic_ids?: string[],
-  period: "5minute" | "hour" | "day" | "month" = "hour"
-) =>
-  hass.callWS<Statistics>({
-    type: "history/statistics_during_period",
-    start_time: startTime.toISOString(),
-    end_time: endTime?.toISOString(),
-    statistic_ids,
-    period,
-  });
-
-export const validateStatistics = (hass: HomeAssistant) =>
-  hass.callWS<StatisticsValidationResults>({
-    type: "recorder/validate_statistics",
-  });
-
-export const updateStatisticsMetadata = (
-  hass: HomeAssistant,
-  statistic_id: string,
-  unit_of_measurement: string | null
-) =>
-  hass.callWS<void>({
-    type: "recorder/update_statistics_metadata",
-    statistic_id,
-    unit_of_measurement,
-  });
-
-export const clearStatistics = (hass: HomeAssistant, statistic_ids: string[]) =>
-  hass.callWS<void>({
-    type: "recorder/clear_statistics",
-    statistic_ids,
-  });
-
-export const calculateStatisticSumGrowth = (
-  values: StatisticValue[]
-): number | null => {
-  if (!values || values.length < 2) {
-    return null;
-  }
-  const endSum = values[values.length - 1].sum;
-  if (endSum === null) {
-    return null;
-  }
-  const startSum = values[0].sum;
-  if (startSum === null) {
-    return endSum;
-  }
-  return endSum - startSum;
-};
-
-export const calculateStatisticsSumGrowth = (
-  data: Statistics,
-  stats: string[]
-): number | null => {
-  let totalGrowth: number | null = null;
-
-  for (const stat of stats) {
-    if (!(stat in data)) {
-      continue;
-    }
-    const statGrowth = calculateStatisticSumGrowth(data[stat]);
-
-    if (statGrowth === null) {
-      continue;
-    }
-    if (totalGrowth === null) {
-      totalGrowth = statGrowth;
-    } else {
-      totalGrowth += statGrowth;
-    }
-  }
-
-  return totalGrowth;
-};
-
-export const statisticsHaveType = (
-  stats: StatisticValue[],
-  type: StatisticType
-) => stats.some((stat) => stat[type] !== null);
-
-export const adjustStatisticsSum = (
-  hass: HomeAssistant,
-  statistic_id: string,
-  start_time: string,
-  adjustment: number
-): Promise<void> =>
-  hass.callWS({
-    type: "recorder/adjust_sum_statistics",
-    statistic_id,
-    start_time,
-    adjustment,
-  });
-
-export const getStatisticLabel = (
-  hass: HomeAssistant,
-  statisticsId: string,
-  statisticsMetaData: StatisticsMetaData | undefined
-): string => {
-  const entity = hass.states[statisticsId];
-  if (entity) {
-    return computeStateName(entity);
-  }
-  return statisticsMetaData?.name || statisticsId;
-};

src/data/integrations.ts

@@ -0,0 +1,37 @@
+import { HomeAssistant } from "../types";
+
+export type IotStandards = "z-wave" | "zigbee" | "homekit" | "matter";
+
+export interface Integration {
+  name?: string;
+  config_flow?: boolean;
+  integrations?: Integrations;
+  iot_standards?: IotStandards[];
+  is_built_in?: boolean;
+  iot_class?: string;
+}
+
+export interface Integrations {
+  [domain: string]: Integration;
+}
+
+export interface IntegrationDescriptions {
+  core: {
+    integration: Integrations;
+    hardware: Integrations;
+    helper: Integrations;
+    translated_name: string[];
+  };
+  custom: {
+    integration: Integrations;
+    hardware: Integrations;
+    helper: Integrations;
+  };
+}
+
+export const getIntegrationDescriptions = (
+  hass: HomeAssistant
+): Promise<IntegrationDescriptions> =>
+  hass.callWS<IntegrationDescriptions>({
+    type: "integration/descriptions",
+  });

src/data/light.ts

@@ -3,76 +3,83 @@ import {
   HassEntityBase,
 } from "home-assistant-js-websocket";
 
-export const enum LightColorModes {
+export const enum LightEntityFeature {
+  EFFECT = 4,
+  FLASH = 8,
+  TRANSITION = 32,
+}
+
+export const enum LightColorMode {
   UNKNOWN = "unknown",
   ONOFF = "onoff",
   BRIGHTNESS = "brightness",
   COLOR_TEMP = "color_temp",
-  WHITE = "white",
   HS = "hs",
   XY = "xy",
   RGB = "rgb",
   RGBW = "rgbw",
   RGBWW = "rgbww",
+  WHITE = "white",
 }
 
 const modesSupportingColor = [
-  LightColorModes.HS,
+  LightColorMode.HS,
-  LightColorModes.XY,
+  LightColorMode.XY,
-  LightColorModes.RGB,
+  LightColorMode.RGB,
-  LightColorModes.RGBW,
+  LightColorMode.RGBW,
-  LightColorModes.RGBWW,
+  LightColorMode.RGBWW,
 ];
 
-const modesSupportingDimming = [
+const modesSupportingBrightness = [
   ...modesSupportingColor,
-  LightColorModes.COLOR_TEMP,
+  LightColorMode.COLOR_TEMP,
-  LightColorModes.BRIGHTNESS,
+  LightColorMode.BRIGHTNESS,
+  LightColorMode.WHITE,
 ];
 
-export const SUPPORT_EFFECT = 4;
-export const SUPPORT_FLASH = 8;
-export const SUPPORT_TRANSITION = 32;
-
 export const lightSupportsColorMode = (
   entity: LightEntity,
-  mode: LightColorModes
+  mode: LightColorMode
-) => entity.attributes.supported_color_modes?.includes(mode);
+) => entity.attributes.supported_color_modes?.includes(mode) || false;
 
 export const lightIsInColorMode = (entity: LightEntity) =>
-  modesSupportingColor.includes(entity.attributes.color_mode);
+  (entity.attributes.color_mode &&
+    modesSupportingColor.includes(entity.attributes.color_mode)) ||
+  false;
 
 export const lightSupportsColor = (entity: LightEntity) =>
   entity.attributes.supported_color_modes?.some((mode) =>
     modesSupportingColor.includes(mode)
   );
 
-export const lightSupportsDimming = (entity: LightEntity) =>
+export const lightSupportsBrightness = (entity: LightEntity) =>
   entity.attributes.supported_color_modes?.some((mode) =>
-    modesSupportingDimming.includes(mode)
+    modesSupportingBrightness.includes(mode)
-  );
+  ) || false;
 
-export const getLightCurrentModeRgbColor = (entity: LightEntity): number[] =>
+export const getLightCurrentModeRgbColor = (
-  entity.attributes.color_mode === LightColorModes.RGBWW
+  entity: LightEntity
+): number[] | undefined =>
+  entity.attributes.color_mode === LightColorMode.RGBWW
     ? entity.attributes.rgbww_color
-    : entity.attributes.color_mode === LightColorModes.RGBW
+    : entity.attributes.color_mode === LightColorMode.RGBW
     ? entity.attributes.rgbw_color
     : entity.attributes.rgb_color;
 
 interface LightEntityAttributes extends HassEntityAttributeBase {
-  min_mireds: number;
+  min_mireds?: number;
-  max_mireds: number;
+  max_mireds?: number;
-  friendly_name: string;
+  brightness?: number;
-  brightness: number;
+  xy_color?: [number, number];
-  hs_color: [number, number];
+  hs_color?: [number, number];
-  rgb_color: [number, number, number];
+  color_temp?: number;
-  rgbw_color: [number, number, number, number];
+  rgb_color?: [number, number, number];
-  rgbww_color: [number, number, number, number, number];
+  rgbw_color?: [number, number, number, number];
-  color_temp: number;
+  rgbww_color?: [number, number, number, number, number];
   effect?: string;
-  effect_list: string[] | null;
+  effect_list?: string[] | null;
-  supported_color_modes: LightColorModes[];
+  supported_color_modes?: LightColorMode[];
-  color_mode: LightColorModes;
+  color_mode?: LightColorMode;
 }
 
 export interface LightEntity extends HassEntityBase {

src/data/lovelace.ts

@@ -93,6 +93,8 @@ export interface LovelaceViewConfig {
   panel?: boolean;
   background?: string;
   visible?: boolean | ShowViewConfig[];
+  subview?: boolean;
+  back_path?: string;
 }
 
 export interface LovelaceViewElement extends HTMLElement {

src/data/recorder.ts

@@ -0,0 +1,247 @@
+import { computeStateName } from "../common/entity/compute_state_name";
+import { HomeAssistant } from "../types";
+
+export type StatisticType = "state" | "sum" | "min" | "max" | "mean";
+
+export interface Statistics {
+  [statisticId: string]: StatisticValue[];
+}
+
+export interface StatisticValue {
+  statistic_id: string;
+  start: string;
+  end: string;
+  last_reset: string | null;
+  max: number | null;
+  mean: number | null;
+  min: number | null;
+  sum: number | null;
+  state: number | null;
+}
+
+export interface StatisticsMetaData {
+  display_unit_of_measurement: string;
+  statistics_unit_of_measurement: string;
+  statistic_id: string;
+  source: string;
+  name?: string | null;
+  has_sum: boolean;
+  has_mean: boolean;
+}
+
+export type StatisticsValidationResult =
+  | StatisticsValidationResultNoState
+  | StatisticsValidationResultEntityNotRecorded
+  | StatisticsValidationResultEntityNoLongerRecorded
+  | StatisticsValidationResultUnsupportedStateClass
+  | StatisticsValidationResultUnitsChanged
+  | StatisticsValidationResultUnsupportedUnitMetadata
+  | StatisticsValidationResultUnsupportedUnitState;
+
+export interface StatisticsValidationResultNoState {
+  type: "no_state";
+  data: { statistic_id: string };
+}
+
+export interface StatisticsValidationResultEntityNoLongerRecorded {
+  type: "entity_no_longer_recorded";
+  data: { statistic_id: string };
+}
+
+export interface StatisticsValidationResultEntityNotRecorded {
+  type: "entity_not_recorded";
+  data: { statistic_id: string };
+}
+
+export interface StatisticsValidationResultUnsupportedStateClass {
+  type: "unsupported_state_class";
+  data: { statistic_id: string; state_class: string };
+}
+
+export interface StatisticsValidationResultUnitsChanged {
+  type: "units_changed";
+  data: { statistic_id: string; state_unit: string; metadata_unit: string };
+}
+
+export interface StatisticsValidationResultUnsupportedUnitMetadata {
+  type: "unsupported_unit_metadata";
+  data: {
+    statistic_id: string;
+    device_class: string;
+    metadata_unit: string;
+    supported_unit: string;
+  };
+}
+
+export interface StatisticsUnitConfiguration {
+  energy?: "Wh" | "kWh" | "MWh";
+  power?: "W" | "kW";
+  pressure?:
+    | "Pa"
+    | "hPa"
+    | "kPa"
+    | "bar"
+    | "cbar"
+    | "mbar"
+    | "inHg"
+    | "psi"
+    | "mmHg";
+  temperature?: "°C" | "°F" | "K";
+  volume?: "ft³" | "m³";
+}
+
+export interface StatisticsValidationResultUnsupportedUnitState {
+  type: "unsupported_unit_state";
+  data: { statistic_id: string; device_class: string; metadata_unit: string };
+}
+
+export interface StatisticsValidationResults {
+  [statisticId: string]: StatisticsValidationResult[];
+}
+
+export const getStatisticIds = (
+  hass: HomeAssistant,
+  statistic_type?: "mean" | "sum"
+) =>
+  hass.callWS<StatisticsMetaData[]>({
+    type: "recorder/list_statistic_ids",
+    statistic_type,
+  });
+
+export const getStatisticMetadata = (
+  hass: HomeAssistant,
+  statistic_ids?: string[]
+) =>
+  hass.callWS<StatisticsMetaData[]>({
+    type: "recorder/get_statistics_metadata",
+    statistic_ids,
+  });
+
+export const fetchStatistics = (
+  hass: HomeAssistant,
+  startTime: Date,
+  endTime?: Date,
+  statistic_ids?: string[],
+  period: "5minute" | "hour" | "day" | "month" = "hour",
+  units?: StatisticsUnitConfiguration
+) =>
+  hass.callWS<Statistics>({
+    type: "recorder/statistics_during_period",
+    start_time: startTime.toISOString(),
+    end_time: endTime?.toISOString(),
+    statistic_ids,
+    period,
+    units,
+  });
+
+export const validateStatistics = (hass: HomeAssistant) =>
+  hass.callWS<StatisticsValidationResults>({
+    type: "recorder/validate_statistics",
+  });
+
+export const updateStatisticsMetadata = (
+  hass: HomeAssistant,
+  statistic_id: string,
+  unit_of_measurement: string | null
+) =>
+  hass.callWS<void>({
+    type: "recorder/update_statistics_metadata",
+    statistic_id,
+    unit_of_measurement,
+  });
+
+export const clearStatistics = (hass: HomeAssistant, statistic_ids: string[]) =>
+  hass.callWS<void>({
+    type: "recorder/clear_statistics",
+    statistic_ids,
+  });
+
+export const calculateStatisticSumGrowth = (
+  values: StatisticValue[]
+): number | null => {
+  if (!values || values.length < 2) {
+    return null;
+  }
+  const endSum = values[values.length - 1].sum;
+  if (endSum === null) {
+    return null;
+  }
+  const startSum = values[0].sum;
+  if (startSum === null) {
+    return endSum;
+  }
+  return endSum - startSum;
+};
+
+export const calculateStatisticsSumGrowth = (
+  data: Statistics,
+  stats: string[]
+): number | null => {
+  let totalGrowth: number | null = null;
+
+  for (const stat of stats) {
+    if (!(stat in data)) {
+      continue;
+    }
+    const statGrowth = calculateStatisticSumGrowth(data[stat]);
+
+    if (statGrowth === null) {
+      continue;
+    }
+    if (totalGrowth === null) {
+      totalGrowth = statGrowth;
+    } else {
+      totalGrowth += statGrowth;
+    }
+  }
+
+  return totalGrowth;
+};
+
+export const statisticsHaveType = (
+  stats: StatisticValue[],
+  type: StatisticType
+) => stats.some((stat) => stat[type] !== null);
+
+const mean_stat_types: readonly StatisticType[] = ["mean", "min", "max"];
+const sum_stat_types: readonly StatisticType[] = ["sum"];
+
+export const statisticsMetaHasType = (
+  metadata: StatisticsMetaData,
+  type: StatisticType
+) => {
+  if (mean_stat_types.includes(type) && metadata.has_mean) {
+    return true;
+  }
+  if (sum_stat_types.includes(type) && metadata.has_sum) {
+    return true;
+  }
+  return false;
+};
+
+export const adjustStatisticsSum = (
+  hass: HomeAssistant,
+  statistic_id: string,
+  start_time: string,
+  adjustment: number,
+  display_unit: string
+): Promise<void> =>
+  hass.callWS({
+    type: "recorder/adjust_sum_statistics",
+    statistic_id,
+    start_time,
+    adjustment,
+    display_unit,
+  });
+
+export const getStatisticLabel = (
+  hass: HomeAssistant,
+  statisticsId: string,
+  statisticsMetaData: StatisticsMetaData | undefined
+): string => {
+  const entity = hass.states[statisticsId];
+  if (entity) {
+    return computeStateName(entity);
+  }
+  return statisticsMetaData?.name || statisticsId;
+};

src/data/scene.ts

@@ -14,8 +14,11 @@ export const SCENE_IGNORED_DOMAINS = [
   "input_button",
   "persistent_notification",
   "person",
+  "scene",
+  "schedule",
   "sensor",
   "sun",
+  "update",
   "weather",
   "zone",
 ];

src/data/script.ts

@@ -15,7 +15,6 @@ import {
   Describe,
   boolean,
 } from "superstruct";
-import { computeObjectId } from "../common/entity/compute_object_id";
 import { navigate } from "../common/navigate";
 import { HomeAssistant } from "../types";
 import {
@@ -278,9 +277,9 @@ export type ActionType = keyof ActionTypes;
 
 export const triggerScript = (
   hass: HomeAssistant,
-  entityId: string,
+  scriptId: string,
   variables?: Record<string, unknown>
-) => hass.callService("script", computeObjectId(entityId), variables);
+) => hass.callService("script", scriptId, variables);
 
 export const canRun = (state: ScriptEntity) => {
   if (state.state === "off") {

src/data/selector.ts

@@ -21,6 +21,7 @@ export type Selector =
   | IconSelector
   | LocationSelector
   | MediaSelector
+  | NavigationSelector
   | NumberSelector
   | ObjectSelector
   | SelectSelector
@@ -171,6 +172,11 @@ export interface MediaSelectorValue {
   };
 }
 
+export interface NavigationSelector {
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  navigation: {};
+}
+
 export interface NumberSelector {
   number: {
     min?: number;
@@ -189,6 +195,7 @@ export interface ObjectSelector {
 export interface SelectOption {
   value: string;
   label: string;
+  disabled?: boolean;
 }
 
 export interface SelectSelector {

src/data/supported_brands.ts

@@ -1,6 +1,13 @@
-import { SupportedBrandObj } from "../dialogs/config-flow/step-flow-pick-handler";
 import type { HomeAssistant } from "../types";
 
+export interface SupportedBrandObj {
+  name: string;
+  slug: string;
+  is_add?: boolean;
+  is_helper?: boolean;
+  supported_flows: string[];
+}
+
 export type SupportedBrandHandler = Record<string, string>;
 
 export const getSupportedBrands = (hass: HomeAssistant) =>

src/data/zha.ts

@@ -309,7 +309,7 @@ export const fetchCommandsForCluster = (
     cluster_type: clusterType,
   });
 
-export const fetchClustersForZhaNode = (
+export const fetchClustersForZhaDevice = (
   hass: HomeAssistant,
   ieeeAddress: string
 ): Promise<Cluster[]> =>

src/dialogs/config-entry-system-options/dialog-config-entry-system-options.ts

@@ -170,7 +170,6 @@ class DialogConfigEntrySystemOptions extends LitElement {
           ),
         });
       }
-      this._params!.entryUpdated(result.config_entry);
       this.closeDialog();
     } catch (err: any) {
       this._error = err.message || "Unknown error";

src/dialogs/config-entry-system-options/show-dialog-config-entry-system-options.ts

@@ -5,7 +5,6 @@ import { IntegrationManifest } from "../../data/integration";
 export interface ConfigEntrySystemOptionsDialogParams {
   entry: ConfigEntry;
   manifest?: IntegrationManifest;
-  entryUpdated(entry: ConfigEntry): void;
 }
 
 export const loadConfigEntrySystemOptionsDialog = () =>

src/dialogs/config-flow/dialog-data-entry-flow.ts

@@ -18,9 +18,7 @@ import {
   AreaRegistryEntry,
   subscribeAreaRegistry,
 } from "../../data/area_registry";
-import { fetchConfigFlowInProgress } from "../../data/config_flow";
 import {
-  DataEntryFlowProgress,
   DataEntryFlowStep,
   subscribeDataEntryFlowProgressed,
 } from "../../data/data_entry_flow";
@@ -28,14 +26,12 @@ import {
   DeviceRegistryEntry,
   subscribeDeviceRegistry,
 } from "../../data/device_registry";
-import { fetchIntegrationManifest } from "../../data/integration";
 import { haStyleDialog } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
 import { documentationUrl } from "../../util/documentation-url";
 import { showAlertDialog } from "../generic/show-dialog-box";
 import {
   DataEntryFlowDialogParams,
-  FlowHandlers,
   LoadingReason,
 } from "./show-dialog-data-entry-flow";
 import "./step-flow-abort";
@@ -44,8 +40,6 @@ import "./step-flow-external";
 import "./step-flow-form";
 import "./step-flow-loading";
 import "./step-flow-menu";
-import "./step-flow-pick-flow";
-import "./step-flow-pick-handler";
 import "./step-flow-progress";
 
 let instance = 0;
@@ -86,12 +80,8 @@ class DataEntryFlowDialog extends LitElement {
 
   @state() private _areas?: AreaRegistryEntry[];
 
-  @state() private _handlers?: FlowHandlers;
-
   @state() private _handler?: string;
 
-  @state() private _flowsInProgress?: DataEntryFlowProgress[];
-
   private _unsubAreas?: UnsubscribeFunc;
 
   private _unsubDevices?: UnsubscribeFunc;
@@ -102,15 +92,39 @@ class DataEntryFlowDialog extends LitElement {
     this._params = params;
     this._instance = instance++;
 
-    if (params.startFlowHandler) {
-      this._checkFlowsInProgress(params.startFlowHandler);
-      return;
-    }
-
-    if (params.continueFlowId) {
-      this._loading = "loading_flow";
     const curInstance = this._instance;
     let step: DataEntryFlowStep;
+
+    if (params.startFlowHandler) {
+      this._loading = "loading_flow";
+      this._handler = params.startFlowHandler;
+      try {
+        step = await this._params!.flowConfig.createFlow(
+          this.hass,
+          params.startFlowHandler
+        );
+      } catch (err: any) {
+        this.closeDialog();
+        let message = err.message || err.body || "Unknown error";
+        if (typeof message !== "string") {
+          message = JSON.stringify(message);
+        }
+        showAlertDialog(this, {
+          title: this.hass.localize(
+            "ui.panel.config.integrations.config_flow.error"
+          ),
+          text: `${this.hass.localize(
+            "ui.panel.config.integrations.config_flow.could_not_load"
+          )}: ${message}`,
+        });
+        return;
+      }
+      // Happens if second showDialog called
+      if (curInstance !== this._instance) {
+        return;
+      }
+    } else if (params.continueFlowId) {
+      this._loading = "loading_flow";
       try {
         step = await params.flowConfig.fetchFlow(
           this.hass,
@@ -132,6 +146,9 @@ class DataEntryFlowDialog extends LitElement {
         });
         return;
       }
+    } else {
+      return;
+    }
 
     // Happens if second showDialog called
     if (curInstance !== this._instance) {
@@ -140,24 +157,6 @@ class DataEntryFlowDialog extends LitElement {
 
     this._processStep(step);
     this._loading = undefined;
-      return;
-    }
-
-    // Create a new config flow. Show picker
-    if (!params.flowConfig.getFlowHandlers) {
-      throw new Error("No getFlowHandlers defined in flow config");
-    }
-    this._step = null;
-
-    // We only load the handlers once
-    if (this._handlers === undefined) {
-      this._loading = "loading_handlers";
-      try {
-        this._handlers = await params.flowConfig.getFlowHandlers(this.hass);
-      } finally {
-        this._loading = undefined;
-      }
-    }
   }
 
   public closeDialog() {
@@ -185,7 +184,6 @@ class DataEntryFlowDialog extends LitElement {
     this._step = undefined;
     this._params = undefined;
     this._devices = undefined;
-    this._flowsInProgress = undefined;
     this._handler = undefined;
     if (this._unsubAreas) {
       this._unsubAreas();
@@ -218,15 +216,12 @@ class DataEntryFlowDialog extends LitElement {
         hideActions
       >
         <div>
-          ${this._loading ||
+          ${this._loading || this._step === null
-          (this._step === null &&
-            this._handlers === undefined &&
-            this._handler === undefined)
             ? html`
                 <step-flow-loading
                   .flowConfig=${this._params.flowConfig}
                   .hass=${this.hass}
-                  .loadingReason=${this._loading || "loading_handlers"}
+                  .loadingReason=${this._loading}
                   .handler=${this._handler}
                   .step=${this._step}
                 ></step-flow-loading>
@@ -273,24 +268,7 @@ class DataEntryFlowDialog extends LitElement {
                     dialogAction="close"
                   ></ha-icon-button>
                 </div>
-                ${this._step === null
+                ${this._step.type === "form"
-                  ? this._handler
-                    ? html`<step-flow-pick-flow
-                        .flowConfig=${this._params.flowConfig}
-                        .hass=${this.hass}
-                        .handler=${this._handler}
-                        .flowsInProgress=${this._flowsInProgress}
-                      ></step-flow-pick-flow>`
-                    : // Show handler picker
-                      html`
-                        <step-flow-pick-handler
-                          .hass=${this.hass}
-                          .handlers=${this._handlers}
-                          .initialFilter=${this._params.searchQuery}
-                          @handler-picked=${this._handlerPicked}
-                        ></step-flow-pick-handler>
-                      `
-                  : this._step.type === "form"
                   ? html`
                       <step-flow-form
                         .flowConfig=${this._params.flowConfig}
@@ -400,64 +378,6 @@ class DataEntryFlowDialog extends LitElement {
     });
   }
 
-  private async _checkFlowsInProgress(handler: string) {
-    this._loading = "loading_handlers";
-    this._handler = handler;
-
-    const flowsInProgress = (
-      await fetchConfigFlowInProgress(this.hass.connection)
-    ).filter((flow) => flow.handler === handler);
-
-    if (!flowsInProgress.length) {
-      // No flows in progress, create a new flow
-      this._loading = "loading_flow";
-      let step: DataEntryFlowStep;
-      try {
-        step = await this._params!.flowConfig.createFlow(this.hass, handler);
-      } catch (err: any) {
-        this.closeDialog();
-        const message =
-          err?.status_code === 404
-            ? this.hass.localize(
-                "ui.panel.config.integrations.config_flow.no_config_flow"
-              )
-            : `${this.hass.localize(
-                "ui.panel.config.integrations.config_flow.could_not_load"
-              )}: ${err?.body?.message || err?.message}`;
-
-        showAlertDialog(this, {
-          title: this.hass.localize(
-            "ui.panel.config.integrations.config_flow.error"
-          ),
-          text: message,
-        });
-        return;
-      } finally {
-        this._handler = undefined;
-      }
-      this._processStep(step);
-      if (this._params!.manifest === undefined) {
-        try {
-          this._params!.manifest = await fetchIntegrationManifest(
-            this.hass,
-            this._params?.domain || step.handler
-          );
-        } catch (_) {
-          // No manifest
-          this._params!.manifest = null;
-        }
-      }
-    } else {
-      this._step = null;
-      this._flowsInProgress = flowsInProgress;
-    }
-    this._loading = undefined;
-  }
-
-  private _handlerPicked(ev) {
-    this._checkFlowsInProgress(ev.detail.handler);
-  }
-
   private async _processStep(
     step: DataEntryFlowStep | undefined | Promise<DataEntryFlowStep>
   ): Promise<void> {

src/dialogs/config-flow/show-dialog-config-flow.ts

@@ -3,11 +3,9 @@ import {
   createConfigFlow,
   deleteConfigFlow,
   fetchConfigFlow,
-  getConfigFlowHandlers,
   handleConfigFlowStep,
 } from "../../data/config_flow";
 import { domainToName } from "../../data/integration";
-import { getSupportedBrands } from "../../data/supported_brands";
 import {
   DataEntryFlowDialogParams,
   loadDataEntryFlowDialog,
@@ -22,16 +20,6 @@ export const showConfigFlowDialog = (
 ): void =>
   showFlowDialog(element, dialogParams, {
     loadDevicesAndAreas: true,
-    getFlowHandlers: async (hass) => {
-      const [integrations, helpers, supportedBrands] = await Promise.all([
-        getConfigFlowHandlers(hass, "integration"),
-        getConfigFlowHandlers(hass, "helper"),
-        getSupportedBrands(hass),
-        hass.loadBackendTranslation("title", undefined, true),
-      ]);
-
-      return { integrations, helpers, supportedBrands };
-    },
     createFlow: async (hass, handler) => {
       const [step] = await Promise.all([
         createConfigFlow(hass, handler),

src/dialogs/config-flow/show-dialog-data-entry-flow.ts

@@ -22,8 +22,6 @@ export interface FlowHandlers {
 export interface FlowConfig {
   loadDevicesAndAreas: boolean;
 
-  getFlowHandlers?: (hass: HomeAssistant) => Promise<FlowHandlers>;
-
   createFlow(hass: HomeAssistant, handler: string): Promise<DataEntryFlowStep>;
 
   fetchFlow(hass: HomeAssistant, flowId: string): Promise<DataEntryFlowStep>;

src/dialogs/config-flow/step-flow-abort.ts

@@ -12,10 +12,10 @@ import { DataEntryFlowStepAbort } from "../../data/data_entry_flow";
 import { HomeAssistant } from "../../types";
 import { showAddApplicationCredentialDialog } from "../../panels/config/application_credentials/show-dialog-add-application-credential";
 import { configFlowContentStyles } from "./styles";
-import { showConfirmationDialog } from "../generic/show-dialog-box";
-import { domainToName } from "../../data/integration";
 import { DataEntryFlowDialogParams } from "./show-dialog-data-entry-flow";
 import { showConfigFlowDialog } from "./show-dialog-config-flow";
+import { domainToName } from "../../data/integration";
+import { showConfirmationDialog } from "../generic/show-dialog-box";
 
 @customElement("step-flow-abort")
 class StepFlowAbort extends LitElement {
@@ -56,11 +56,16 @@ class StepFlowAbort extends LitElement {
   private async _handleMissingCreds() {
     const confirm = await showConfirmationDialog(this, {
       title: this.hass.localize(
+        "ui.panel.config.integrations.config_flow.missing_credentials_title"
+      ),
+      text: this.hass.localize(
         "ui.panel.config.integrations.config_flow.missing_credentials",
         {
           integration: domainToName(this.hass.localize, this.domain),
         }
       ),
+      confirmText: this.hass.localize("ui.common.yes"),
+      dismissText: this.hass.localize("ui.common.no"),
     });
     this._flowDone();
     if (!confirm) {

src/dialogs/config-flow/step-flow-pick-flow.ts

@@ -1,130 +0,0 @@
-import "@polymer/paper-item";
-import "@polymer/paper-item/paper-icon-item";
-import "@polymer/paper-item/paper-item";
-import "@polymer/paper-item/paper-item-body";
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property } from "lit/decorators";
-import { fireEvent } from "../../common/dom/fire_event";
-import "../../components/ha-icon-next";
-import { localizeConfigFlowTitle } from "../../data/config_flow";
-import { DataEntryFlowProgress } from "../../data/data_entry_flow";
-import { domainToName } from "../../data/integration";
-import { HomeAssistant } from "../../types";
-import { brandsUrl } from "../../util/brands-url";
-import { FlowConfig } from "./show-dialog-data-entry-flow";
-import { configFlowContentStyles } from "./styles";
-
-@customElement("step-flow-pick-flow")
-class StepFlowPickFlow extends LitElement {
-  public flowConfig!: FlowConfig;
-
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property({ attribute: false })
-  public flowsInProgress!: DataEntryFlowProgress[];
-
-  @property() public handler!: string;
-
-  protected render(): TemplateResult {
-    return html`
-      <h2>
-        ${this.hass.localize(
-          "ui.panel.config.integrations.config_flow.pick_flow_step.title"
-        )}
-      </h2>
-
-      <div>
-        ${this.flowsInProgress.map(
-          (flow) => html` <paper-icon-item
-            @click=${this._flowInProgressPicked}
-            .flow=${flow}
-          >
-            <img
-              slot="item-icon"
-              loading="lazy"
-              src=${brandsUrl({
-                domain: flow.handler,
-                type: "icon",
-                useFallback: true,
-                darkOptimized: this.hass.themes?.darkMode,
-              })}
-              referrerpolicy="no-referrer"
-            />
-
-            <paper-item-body>
-              ${localizeConfigFlowTitle(this.hass.localize, flow)}
-            </paper-item-body>
-            <ha-icon-next></ha-icon-next>
-          </paper-icon-item>`
-        )}
-        <paper-item @click=${this._startNewFlowPicked} .handler=${this.handler}>
-          <paper-item-body>
-            ${this.hass.localize(
-              "ui.panel.config.integrations.config_flow.pick_flow_step.new_flow",
-              "integration",
-              domainToName(this.hass.localize, this.handler)
-            )}
-          </paper-item-body>
-          <ha-icon-next></ha-icon-next>
-        </paper-item>
-      </div>
-    `;
-  }
-
-  private _startNewFlowPicked(ev) {
-    this._startFlow(ev.currentTarget.handler);
-  }
-
-  private _startFlow(handler: string) {
-    fireEvent(this, "flow-update", {
-      stepPromise: this.flowConfig.createFlow(this.hass, handler),
-    });
-  }
-
-  private _flowInProgressPicked(ev) {
-    const flow: DataEntryFlowProgress = ev.currentTarget.flow;
-    fireEvent(this, "flow-update", {
-      stepPromise: this.flowConfig.fetchFlow(this.hass, flow.flow_id),
-    });
-  }
-
-  static get styles(): CSSResultGroup {
-    return [
-      configFlowContentStyles,
-      css`
-        img {
-          width: 40px;
-          height: 40px;
-        }
-        ha-icon-next {
-          margin-right: 8px;
-        }
-        div {
-          overflow: auto;
-          max-height: 600px;
-          margin: 16px 0;
-        }
-        h2 {
-          padding-inline-end: 66px;
-          direction: var(--direction);
-        }
-        @media all and (max-height: 900px) {
-          div {
-            max-height: calc(100vh - 134px);
-          }
-        }
-        paper-icon-item,
-        paper-item {
-          cursor: pointer;
-          margin-bottom: 4px;
-        }
-      `,
-    ];
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "step-flow-pick-flow": StepFlowPickFlow;
-  }
-}

src/dialogs/config-flow/step-flow-pick-handler.ts

@@ -1,372 +0,0 @@
-import "@material/mwc-list/mwc-list";
-import "@material/mwc-list/mwc-list-item";
-import Fuse from "fuse.js";
-import {
-  css,
-  CSSResultGroup,
-  html,
-  LitElement,
-  PropertyValues,
-  TemplateResult,
-} from "lit";
-import { customElement, property, state } from "lit/decorators";
-import { styleMap } from "lit/directives/style-map";
-import memoizeOne from "memoize-one";
-import { isComponentLoaded } from "../../common/config/is_component_loaded";
-import { fireEvent } from "../../common/dom/fire_event";
-import { protocolIntegrationPicked } from "../../common/integrations/protocolIntegrationPicked";
-import { navigate } from "../../common/navigate";
-import { caseInsensitiveStringCompare } from "../../common/string/compare";
-import { LocalizeFunc } from "../../common/translations/localize";
-import "../../components/ha-icon-next";
-import "../../components/search-input";
-import { domainToName } from "../../data/integration";
-import { haStyleScrollbar } from "../../resources/styles";
-import { HomeAssistant } from "../../types";
-import { brandsUrl } from "../../util/brands-url";
-import { documentationUrl } from "../../util/documentation-url";
-import { showConfirmationDialog } from "../generic/show-dialog-box";
-import { FlowHandlers } from "./show-dialog-data-entry-flow";
-import { configFlowContentStyles } from "./styles";
-
-interface HandlerObj {
-  name: string;
-  slug: string;
-  is_add?: boolean;
-  is_helper?: boolean;
-}
-
-export interface SupportedBrandObj extends HandlerObj {
-  supported_flows: string[];
-}
-
-declare global {
-  // for fire event
-  interface HASSDomEvents {
-    "handler-picked": {
-      handler: string;
-    };
-  }
-}
-
-@customElement("step-flow-pick-handler")
-class StepFlowPickHandler extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property({ attribute: false }) public handlers!: FlowHandlers;
-
-  @property() public initialFilter?: string;
-
-  @state() private _filter?: string;
-
-  private _width?: number;
-
-  private _height?: number;
-
-  private _filterHandlers = memoizeOne(
-    (
-      h: FlowHandlers,
-      filter?: string,
-      _localize?: LocalizeFunc
-    ): [(HandlerObj | SupportedBrandObj)[], HandlerObj[]] => {
-      const integrations: (HandlerObj | SupportedBrandObj)[] =
-        h.integrations.map((handler) => ({
-          name: domainToName(this.hass.localize, handler),
-          slug: handler,
-        }));
-
-      for (const [domain, domainBrands] of Object.entries(h.supportedBrands)) {
-        for (const [slug, name] of Object.entries(domainBrands)) {
-          integrations.push({
-            slug,
-            name,
-            supported_flows: [domain],
-          });
-        }
-      }
-
-      if (filter) {
-        const options: Fuse.IFuseOptions<HandlerObj> = {
-          keys: ["name", "slug"],
-          isCaseSensitive: false,
-          minMatchCharLength: 2,
-          threshold: 0.2,
-        };
-        const helpers: HandlerObj[] = h.helpers.map((handler) => ({
-          name: domainToName(this.hass.localize, handler),
-          slug: handler,
-          is_helper: true,
-        }));
-        return [
-          new Fuse(integrations, options)
-            .search(filter)
-            .map((result) => result.item),
-          new Fuse(helpers, options)
-            .search(filter)
-            .map((result) => result.item),
-        ];
-      }
-      return [
-        integrations.sort((a, b) =>
-          caseInsensitiveStringCompare(a.name, b.name)
-        ),
-        [],
-      ];
-    }
-  );
-
-  protected render(): TemplateResult {
-    const [integrations, helpers] = this._getHandlers();
-
-    const addDeviceRows: HandlerObj[] = ["zha", "zwave_js"]
-      .filter((domain) => isComponentLoaded(this.hass, domain))
-      .map((domain) => ({
-        name: this.hass.localize(
-          `ui.panel.config.integrations.add_${domain}_device`
-        ),
-        slug: domain,
-        is_add: true,
-      }))
-      .sort((a, b) => caseInsensitiveStringCompare(a.name, b.name));
-
-    return html`
-      <h2>${this.hass.localize("ui.panel.config.integrations.new")}</h2>
-      <search-input
-        .hass=${this.hass}
-        autofocus
-        .filter=${this._filter}
-        @value-changed=${this._filterChanged}
-        .label=${this.hass.localize("ui.panel.config.integrations.search")}
-        @keypress=${this._maybeSubmit}
-      ></search-input>
-      <mwc-list
-        style=${styleMap({
-          width: `${this._width}px`,
-          height: `${this._height}px`,
-        })}
-        class="ha-scrollbar"
-      >
-        ${addDeviceRows.length
-          ? html`
-              ${addDeviceRows.map((handler) => this._renderRow(handler))}
-              <li divider padded class="divider" role="separator"></li>
-            `
-          : ""}
-        ${integrations.length
-          ? integrations.map((handler) => this._renderRow(handler))
-          : html`
-              <p>
-                ${this.hass.localize(
-                  "ui.panel.config.integrations.note_about_integrations"
-                )}<br />
-                ${this.hass.localize(
-                  "ui.panel.config.integrations.note_about_website_reference"
-                )}<a
-                  href=${documentationUrl(
-                    this.hass,
-                    `/integrations/${
-                      this._filter ? `#search/${this._filter}` : ""
-                    }`
-                  )}
-                  target="_blank"
-                  rel="noreferrer"
-                  >${this.hass.localize(
-                    "ui.panel.config.integrations.home_assistant_website"
-                  )}</a
-                >.
-              </p>
-            `}
-        ${helpers.length
-          ? html`
-              <li divider padded class="divider" role="separator"></li>
-              ${helpers.map((handler) => this._renderRow(handler))}
-            `
-          : ""}
-      </mwc-list>
-    `;
-  }
-
-  private _renderRow(handler: HandlerObj) {
-    return html`
-      <mwc-list-item
-        graphic="medium"
-        .hasMeta=${!handler.is_add}
-        .handler=${handler}
-        @click=${this._handlerPicked}
-      >
-        <img
-          slot="graphic"
-          loading="lazy"
-          src=${brandsUrl({
-            domain: handler.slug,
-            type: "icon",
-            useFallback: true,
-            darkOptimized: this.hass.themes?.darkMode,
-          })}
-          referrerpolicy="no-referrer"
-        />
-        <span>${handler.name} ${handler.is_helper ? " (helper)" : ""}</span>
-        ${handler.is_add ? "" : html`<ha-icon-next slot="meta"></ha-icon-next>`}
-      </mwc-list-item>
-    `;
-  }
-
-  public willUpdate(changedProps: PropertyValues): void {
-    super.willUpdate(changedProps);
-    if (this._filter === undefined && this.initialFilter !== undefined) {
-      this._filter = this.initialFilter;
-    }
-    if (this.initialFilter !== undefined && this._filter === "") {
-      this.initialFilter = undefined;
-      this._filter = "";
-      this._width = undefined;
-      this._height = undefined;
-    } else if (
-      this.hasUpdated &&
-      changedProps.has("_filter") &&
-      (!this._width || !this._height)
-    ) {
-      // Store the width and height so that when we search, box doesn't jump
-      const boundingRect =
-        this.shadowRoot!.querySelector("mwc-list")!.getBoundingClientRect();
-      this._width = boundingRect.width;
-      this._height = boundingRect.height;
-    }
-  }
-
-  protected firstUpdated(changedProps) {
-    super.firstUpdated(changedProps);
-    setTimeout(
-      () => this.shadowRoot!.querySelector("search-input")!.focus(),
-      0
-    );
-  }
-
-  private _getHandlers() {
-    return this._filterHandlers(
-      this.handlers,
-      this._filter,
-      this.hass.localize
-    );
-  }
-
-  private async _filterChanged(e) {
-    this._filter = e.detail.value;
-  }
-
-  private async _handlerPicked(ev) {
-    const handler: HandlerObj | SupportedBrandObj = ev.currentTarget.handler;
-
-    if (handler.is_add) {
-      this._handleAddPicked(handler.slug);
-      return;
-    }
-
-    if (handler.is_helper) {
-      navigate(`/config/helpers/add?domain=${handler.slug}`);
-      // This closes dialog.
-      fireEvent(this, "flow-update");
-      return;
-    }
-
-    if ("supported_flows" in handler) {
-      const slug = handler.supported_flows[0];
-
-      showConfirmationDialog(this, {
-        text: this.hass.localize(
-          "ui.panel.config.integrations.config_flow.supported_brand_flow",
-          {
-            supported_brand: handler.name,
-            flow_domain_name: domainToName(this.hass.localize, slug),
-          }
-        ),
-        confirm: () => {
-          if (["zha", "zwave_js"].includes(slug)) {
-            this._handleAddPicked(slug);
-            return;
-          }
-
-          fireEvent(this, "handler-picked", {
-            handler: slug,
-          });
-        },
-      });
-
-      return;
-    }
-
-    fireEvent(this, "handler-picked", {
-      handler: handler.slug,
-    });
-  }
-
-  private async _handleAddPicked(slug: string): Promise<void> {
-    await protocolIntegrationPicked(this, this.hass, slug);
-    // This closes dialog.
-    fireEvent(this, "flow-update");
-  }
-
-  private _maybeSubmit(ev: KeyboardEvent) {
-    if (ev.key !== "Enter") {
-      return;
-    }
-
-    const handlers = this._getHandlers();
-
-    if (handlers.length > 0) {
-      fireEvent(this, "handler-picked", {
-        handler: handlers[0][0].slug,
-      });
-    }
-  }
-
-  static get styles(): CSSResultGroup {
-    return [
-      configFlowContentStyles,
-      haStyleScrollbar,
-      css`
-        img {
-          width: 40px;
-          height: 40px;
-        }
-        search-input {
-          display: block;
-          margin: 16px 16px 0;
-        }
-        ha-icon-next {
-          margin-right: 8px;
-        }
-        mwc-list {
-          overflow: auto;
-          max-height: 600px;
-        }
-        .divider {
-          border-bottom-color: var(--divider-color);
-        }
-        h2 {
-          padding-inline-end: 66px;
-          direction: var(--direction);
-        }
-        @media all and (max-height: 900px) {
-          mwc-list {
-            max-height: calc(100vh - 134px);
-          }
-        }
-        p {
-          text-align: center;
-          padding: 16px;
-          margin: 0;
-        }
-        p > a {
-          color: var(--primary-color);
-        }
-      `,
-    ];
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "step-flow-pick-handler": StepFlowPickHandler;
-  }
-}

src/dialogs/generic/dialog-box.ts

@@ -2,6 +2,7 @@ import "@material/mwc-button/mwc-button";
 import { mdiAlertOutline } from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
 import { ifDefined } from "lit/directives/if-defined";
 import { fireEvent } from "../../common/dom/fire_event";
 import "../../components/ha-dialog";
@@ -96,6 +97,9 @@ class DialogBox extends LitElement {
           @click=${this._confirm}
           ?dialogInitialFocus=${!this._params.prompt}
           slot="primaryAction"
+          class=${classMap({
+            destructive: this._params.destructive || false,
+          })}
         >
           ${this._params.confirmText
             ? this._params.confirmText
@@ -153,6 +157,9 @@ class DialogBox extends LitElement {
       .secondary {
         color: var(--secondary-text-color);
       }
+      .destructive {
+        --mdc-theme-primary: var(--error-color);
+      }
       ha-dialog {
         --mdc-dialog-heading-ink-color: var(--primary-text-color);
         --mdc-dialog-content-ink-color: var(--primary-text-color);

src/dialogs/generic/show-dialog-box.ts

@@ -16,6 +16,7 @@ export interface ConfirmationDialogParams extends BaseDialogBoxParams {
   dismissText?: string;
   confirm?: () => void;
   cancel?: () => void;
+  destructive?: boolean;
 }
 
 export interface PromptDialogParams extends BaseDialogBoxParams {

src/dialogs/more-info/controls/more-info-climate.ts

@@ -377,6 +377,7 @@ class MoreInfoClimate extends LitElement {
 
   private _handlePresetmodeChanged(ev) {
     const newVal = ev.target.value || null;
+    if (newVal) {
       this._callServiceHelper(
         this.stateObj!.attributes.preset_mode,
         newVal,
@@ -384,6 +385,7 @@ class MoreInfoClimate extends LitElement {
         { preset_mode: newVal }
       );
     }
+  }
 
   private async _callServiceHelper(
     oldVal: unknown,

src/dialogs/more-info/controls/more-info-cover.ts

@@ -1,19 +1,29 @@
 import { css, CSSResult, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { attributeClassNames } from "../../../common/entity/attribute_class_names";
-import { featureClassNames } from "../../../common/entity/feature_class_names";
+import {
+  FeatureClassNames,
+  featureClassNames,
+} from "../../../common/entity/feature_class_names";
+import { supportsFeature } from "../../../common/entity/supports-feature";
 import "../../../components/ha-attributes";
 import "../../../components/ha-cover-tilt-controls";
 import "../../../components/ha-labeled-slider";
 import {
   CoverEntity,
-  FEATURE_CLASS_NAMES,
+  CoverEntityFeature,
   isTiltOnly,
-  supportsSetPosition,
-  supportsSetTiltPosition,
 } from "../../../data/cover";
 import { HomeAssistant } from "../../../types";
 
+export const FEATURE_CLASS_NAMES: FeatureClassNames<CoverEntityFeature> = {
+  [CoverEntityFeature.SET_POSITION]: "has-set_position",
+  [CoverEntityFeature.OPEN_TILT]: "has-open_tilt",
+  [CoverEntityFeature.CLOSE_TILT]: "has-close_tilt",
+  [CoverEntityFeature.STOP_TILT]: "has-stop_tilt",
+  [CoverEntityFeature.SET_TILT_POSITION]: "has-set_tilt_position",
+};
+
 @customElement("more-info-cover")
 class MoreInfoCover extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -34,13 +44,16 @@ class MoreInfoCover extends LitElement {
             .caption=${this.hass.localize("ui.card.cover.position")}
             pin=""
             .value=${this.stateObj.attributes.current_position}
-            .disabled=${!supportsSetPosition(this.stateObj)}
+            .disabled=${!supportsFeature(
+              this.stateObj,
+              CoverEntityFeature.SET_POSITION
+            )}
             @change=${this._coverPositionSliderChanged}
           ></ha-labeled-slider>
         </div>
 
         <div class="tilt">
-          ${supportsSetTiltPosition(this.stateObj)
+          ${supportsFeature(this.stateObj, CoverEntityFeature.SET_TILT_POSITION)
             ? // Either render the labeled slider and put the tilt buttons into its slot
               // or (if tilt position is not supported and therefore no slider is shown)
               // render a title <div> (same style as for a labeled slider) and directly put

src/dialogs/more-info/controls/more-info-light.ts

@@ -20,13 +20,13 @@ import "../../../components/ha-labeled-slider";
 import "../../../components/ha-select";
 import {
   getLightCurrentModeRgbColor,
-  LightColorModes,
+  LightColorMode,
   LightEntity,
+  LightEntityFeature,
   lightIsInColorMode,
   lightSupportsColor,
   lightSupportsColorMode,
-  lightSupportsDimming,
+  lightSupportsBrightness,
-  SUPPORT_EFFECT,
 } from "../../../data/light";
 import type { HomeAssistant } from "../../../types";
 
@@ -56,7 +56,7 @@ class MoreInfoLight extends LitElement {
 
   @state() private _colorPickerColor?: [number, number, number];
 
-  @state() private _mode?: "color" | LightColorModes;
+  @state() private _mode?: "color" | LightColorMode;
 
   protected render(): TemplateResult {
     if (!this.hass || !this.stateObj) {
@@ -65,29 +65,29 @@ class MoreInfoLight extends LitElement {
 
     const supportsTemp = lightSupportsColorMode(
       this.stateObj,
-      LightColorModes.COLOR_TEMP
+      LightColorMode.COLOR_TEMP
     );
 
     const supportsWhite = lightSupportsColorMode(
       this.stateObj,
-      LightColorModes.WHITE
+      LightColorMode.WHITE
     );
 
     const supportsRgbww = lightSupportsColorMode(
       this.stateObj,
-      LightColorModes.RGBWW
+      LightColorMode.RGBWW
     );
 
     const supportsRgbw =
       !supportsRgbww &&
-      lightSupportsColorMode(this.stateObj, LightColorModes.RGBW);
+      lightSupportsColorMode(this.stateObj, LightColorMode.RGBW);
 
     const supportsColor =
       supportsRgbww || supportsRgbw || lightSupportsColor(this.stateObj);
 
     return html`
       <div class="content">
-        ${lightSupportsDimming(this.stateObj)
+        ${lightSupportsBrightness(this.stateObj)
           ? html`
               <ha-labeled-slider
                 caption=${this.hass.localize("ui.card.light.brightness")}
@@ -113,7 +113,7 @@ class MoreInfoLight extends LitElement {
                 : ""}
               ${supportsTemp &&
               ((!supportsColor && !supportsWhite) ||
-                this._mode === LightColorModes.COLOR_TEMP)
+                this._mode === LightColorMode.COLOR_TEMP)
                 ? html`
                     <ha-labeled-slider
                       class="color_temp"
@@ -204,7 +204,7 @@ class MoreInfoLight extends LitElement {
                       : ""}
                   `
                 : ""}
-              ${supportsFeature(this.stateObj, SUPPORT_EFFECT) &&
+              ${supportsFeature(this.stateObj, LightEntityFeature.EFFECT) &&
               this.stateObj!.attributes.effect_list?.length
                 ? html`
                     <hr />
@@ -260,31 +260,31 @@ class MoreInfoLight extends LitElement {
       let brightnessAdjust = 100;
       this._brightnessAdjusted = undefined;
       if (
-        stateObj.attributes.color_mode === LightColorModes.RGB &&
+        stateObj.attributes.color_mode === LightColorMode.RGB &&
-        !lightSupportsColorMode(stateObj, LightColorModes.RGBWW) &&
+        !lightSupportsColorMode(stateObj, LightColorMode.RGBWW) &&
-        !lightSupportsColorMode(stateObj, LightColorModes.RGBW)
+        !lightSupportsColorMode(stateObj, LightColorMode.RGBW)
       ) {
-        const maxVal = Math.max(...stateObj.attributes.rgb_color);
+        const maxVal = Math.max(...stateObj.attributes.rgb_color!);
         if (maxVal < 255) {
           this._brightnessAdjusted = maxVal;
           brightnessAdjust = (this._brightnessAdjusted / 255) * 100;
         }
       }
       this._brightnessSliderValue = Math.round(
-        (stateObj.attributes.brightness * brightnessAdjust) / 255
+        ((stateObj.attributes.brightness || 0) * brightnessAdjust) / 255
       );
       this._ctSliderValue = stateObj.attributes.color_temp;
       this._wvSliderValue =
-        stateObj.attributes.color_mode === LightColorModes.RGBW
+        stateObj.attributes.color_mode === LightColorMode.RGBW
-          ? Math.round((stateObj.attributes.rgbw_color[3] * 100) / 255)
+          ? Math.round((stateObj.attributes.rgbw_color![3] * 100) / 255)
           : undefined;
       this._cwSliderValue =
-        stateObj.attributes.color_mode === LightColorModes.RGBWW
+        stateObj.attributes.color_mode === LightColorMode.RGBWW
-          ? Math.round((stateObj.attributes.rgbww_color[3] * 100) / 255)
+          ? Math.round((stateObj.attributes.rgbww_color![3] * 100) / 255)
           : undefined;
       this._wwSliderValue =
-        stateObj.attributes.color_mode === LightColorModes.RGBWW
+        stateObj.attributes.color_mode === LightColorMode.RGBWW
-          ? Math.round((stateObj.attributes.rgbww_color[4] * 100) / 255)
+          ? Math.round((stateObj.attributes.rgbww_color![4] * 100) / 255)
           : undefined;
 
       const currentRgbColor = getLightCurrentModeRgbColor(stateObj);
@@ -307,10 +307,10 @@ class MoreInfoLight extends LitElement {
     (supportsTemp: boolean, supportsWhite: boolean) => {
       const modes = [{ label: "Color", value: "color" }];
       if (supportsTemp) {
-        modes.push({ label: "Temperature", value: LightColorModes.COLOR_TEMP });
+        modes.push({ label: "Temperature", value: LightColorMode.COLOR_TEMP });
       }
       if (supportsWhite) {
-        modes.push({ label: "White", value: LightColorModes.WHITE });
+        modes.push({ label: "White", value: LightColorMode.WHITE });
       }
       return modes;
     }
@@ -342,7 +342,7 @@ class MoreInfoLight extends LitElement {
 
     this._brightnessSliderValue = bri;
 
-    if (this._mode === LightColorModes.WHITE) {
+    if (this._mode === LightColorMode.WHITE) {
       this.hass.callService("light", "turn_on", {
         entity_id: this.stateObj!.entity_id,
         white: Math.min(255, Math.round((bri * 255) / 100)),
@@ -486,7 +486,7 @@ class MoreInfoLight extends LitElement {
   }
 
   private _setRgbWColor(rgbColor: [number, number, number]) {
-    if (lightSupportsColorMode(this.stateObj!, LightColorModes.RGBWW)) {
+    if (lightSupportsColorMode(this.stateObj!, LightColorMode.RGBWW)) {
       const rgbww_color: [number, number, number, number, number] = this
         .stateObj!.attributes.rgbww_color
         ? [...this.stateObj!.attributes.rgbww_color]
@@ -495,7 +495,7 @@ class MoreInfoLight extends LitElement {
         entity_id: this.stateObj!.entity_id,
         rgbww_color: rgbColor.concat(rgbww_color.slice(3)),
       });
-    } else if (lightSupportsColorMode(this.stateObj!, LightColorModes.RGBW)) {
+    } else if (lightSupportsColorMode(this.stateObj!, LightColorMode.RGBW)) {
       const rgbw_color: [number, number, number, number] = this.stateObj!
         .attributes.rgbw_color
         ? [...this.stateObj!.attributes.rgbw_color]
@@ -524,8 +524,8 @@ class MoreInfoLight extends LitElement {
     ];
 
     if (
-      lightSupportsColorMode(this.stateObj!, LightColorModes.RGBWW) ||
+      lightSupportsColorMode(this.stateObj!, LightColorMode.RGBWW) ||
-      lightSupportsColorMode(this.stateObj!, LightColorModes.RGBW)
+      lightSupportsColorMode(this.stateObj!, LightColorMode.RGBW)
     ) {
       this._setRgbWColor(
         this._colorBrightnessSliderValue
@@ -535,7 +535,7 @@ class MoreInfoLight extends LitElement {
             )
           : [ev.detail.rgb.r, ev.detail.rgb.g, ev.detail.rgb.b]
       );
-    } else if (lightSupportsColorMode(this.stateObj!, LightColorModes.RGB)) {
+    } else if (lightSupportsColorMode(this.stateObj!, LightColorMode.RGB)) {
       const rgb_color: [number, number, number] = [
         ev.detail.rgb.r,
         ev.detail.rgb.g,

src/dialogs/more-info/ha-more-info-dialog.ts

@@ -90,7 +90,7 @@ export class MoreInfoDialog extends LitElement {
     const stateObj = this.hass.states[entityId];
 
     const domain = computeDomain(entityId);
-    const name = stateObj ? computeStateName(stateObj) : entityId;
+    const name = (stateObj && computeStateName(stateObj)) || entityId;
     const tabs = this._getTabs(entityId, this.hass.user!.is_admin);
 
     return html`

src/external_app/external_app_entrypoint.ts

@@ -7,7 +7,7 @@ This is the entry point for providing external app stuff from app entrypoint.
 
 import { fireEvent } from "../common/dom/fire_event";
 import { HomeAssistantMain } from "../layouts/home-assistant-main";
-import type { EMExternalMessageCommands } from "./external_messaging";
+import type { EMIncomingMessageCommands } from "./external_messaging";
 
 export const attachExternalToApp = (hassMainEl: HomeAssistantMain) => {
   window.addEventListener("haptic", (ev) =>
@@ -24,7 +24,7 @@ export const attachExternalToApp = (hassMainEl: HomeAssistantMain) => {
 
 const handleExternalMessage = (
   hassMainEl: HomeAssistantMain,
-  msg: EMExternalMessageCommands
+  msg: EMIncomingMessageCommands
 ): boolean => {
   const bus = hassMainEl.hass.auth.external!;
 

src/external_app/external_messaging.ts

@@ -8,7 +8,6 @@ interface CommandInFlight {
 export interface EMMessage {
   id?: number;
   type: string;
-  payload?: unknown;
 }
 
 interface EMError {
@@ -30,34 +29,120 @@ interface EMMessageResultError {
   error: EMError;
 }
 
-interface EMExternalMessageRestart {
+interface EMOutgoingMessageConfigGet extends EMMessage {
+  type: "config/get";
+}
+
+interface EMOutgoingMessageMatterCommission extends EMMessage {
+  type: "matter/commission";
+}
+
+type EMOutgoingMessageWithAnswer = {
+  "config/get": {
+    request: EMOutgoingMessageConfigGet;
+    response: ExternalConfig;
+  };
+  "matter/commission": {
+    request: EMOutgoingMessageMatterCommission;
+    response: {
+      code: string;
+    };
+  };
+};
+
+interface EMOutgoingMessageExoplayerPlayHLS extends EMMessage {
+  type: "exoplayer/play_hls";
+  payload: {
+    url: string;
+    muted: boolean;
+  };
+}
+interface EMOutgoingMessageExoplayerResize extends EMMessage {
+  type: "exoplayer/resize";
+  payload: {
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+  };
+}
+
+interface EMOutgoingMessageExoplayerStop extends EMMessage {
+  type: "exoplayer/stop";
+}
+
+interface EMOutgoingMessageThemeUpdate extends EMMessage {
+  type: "theme-update";
+}
+
+interface EMOutgoingMessageHaptic extends EMMessage {
+  type: "haptic";
+  payload: { hapticType: string };
+}
+
+interface EMOutgoingMessageConnectionStatus extends EMMessage {
+  type: "connection-status";
+  payload: { event: string };
+}
+
+interface EMOutgoingMessageAppConfiguration extends EMMessage {
+  type: "config_screen/show";
+}
+
+interface EMOutgoingMessageTagWrite extends EMMessage {
+  type: "tag/write";
+  payload: {
+    name: string | null;
+    tag: string;
+  };
+}
+
+interface EMOutgoingMessageSidebarShow extends EMMessage {
+  type: "sidebar/show";
+}
+
+type EMOutgoingMessageWithoutAnswer =
+  | EMOutgoingMessageHaptic
+  | EMOutgoingMessageConnectionStatus
+  | EMOutgoingMessageAppConfiguration
+  | EMOutgoingMessageTagWrite
+  | EMOutgoingMessageSidebarShow
+  | EMOutgoingMessageExoplayerPlayHLS
+  | EMOutgoingMessageExoplayerResize
+  | EMOutgoingMessageExoplayerStop
+  | EMOutgoingMessageThemeUpdate
+  | EMMessageResultSuccess
+  | EMMessageResultError;
+
+interface EMIncomingMessageRestart {
   id: number;
   type: "command";
   command: "restart";
 }
 
-interface EMExternMessageShowNotifications {
+interface EMIncomingMessageShowNotifications {
   id: number;
   type: "command";
   command: "notifications/show";
 }
 
-export type EMExternalMessageCommands =
+export type EMIncomingMessageCommands =
-  | EMExternalMessageRestart
+  | EMIncomingMessageRestart
-  | EMExternMessageShowNotifications;
+  | EMIncomingMessageShowNotifications;
 
-type ExternalMessage =
+type EMIncomingMessage =
   | EMMessageResultSuccess
   | EMMessageResultError
-  | EMExternalMessageCommands;
+  | EMIncomingMessageCommands;
 
-type ExternalMessageHandler = (msg: EMExternalMessageCommands) => boolean;
+type EMIncomingMessageHandler = (msg: EMIncomingMessageCommands) => boolean;
 
 export interface ExternalConfig {
   hasSettingsScreen: boolean;
   hasSidebar: boolean;
   canWriteTag: boolean;
   hasExoPlayer: boolean;
+  canCommissionMatter: boolean;
 }
 
 export class ExternalMessaging {
@@ -67,7 +152,7 @@ export class ExternalMessaging {
 
   public msgId = 0;
 
-  private _commandHandler?: ExternalMessageHandler;
+  private _commandHandler?: EMIncomingMessageHandler;
 
   public async attach() {
     window[CALLBACK_EXTERNAL_BUS] = (msg) => this.receiveMessage(msg);
@@ -77,12 +162,12 @@ export class ExternalMessaging {
         payload: { event: ev.detail },
       })
     );
-    this.config = await this.sendMessage<ExternalConfig>({
+    this.config = await this.sendMessage<"config/get">({
       type: "config/get",
     });
   }
 
-  public addCommandHandler(handler: ExternalMessageHandler) {
+  public addCommandHandler(handler: EMIncomingMessageHandler) {
     this._commandHandler = handler;
   }
 
@@ -90,31 +175,33 @@ export class ExternalMessaging {
    * Send message to external app that expects a response.
    * @param msg message to send
    */
-  public sendMessage<T>(msg: EMMessage): Promise<T> {
+  public sendMessage<T extends keyof EMOutgoingMessageWithAnswer>(
+    msg: EMOutgoingMessageWithAnswer[T]["request"]
+  ): Promise<EMOutgoingMessageWithAnswer[T]["response"]> {
     const msgId = ++this.msgId;
     msg.id = msgId;
 
-    this.fireMessage(msg);
+    this._sendExternal(msg);
 
-    return new Promise<T>((resolve, reject) => {
+    return new Promise<EMOutgoingMessageWithAnswer[T]["response"]>(
+      (resolve, reject) => {
         this.commands[msgId] = { resolve, reject };
-    });
+      }
+    );
   }
 
   /**
    * Send message to external app without expecting a response.
    * @param msg message to send
    */
-  public fireMessage(
+  public fireMessage(msg: EMOutgoingMessageWithoutAnswer) {
-    msg: EMMessage | EMMessageResultSuccess | EMMessageResultError
-  ) {
     if (!msg.id) {
       msg.id = ++this.msgId;
     }
     this._sendExternal(msg);
   }
 
-  public receiveMessage(msg: ExternalMessage) {
+  public receiveMessage(msg: EMIncomingMessage) {
     if (__DEV__) {
       // eslint-disable-next-line no-console
       console.log("Receiving message from external app", msg);

src/panels/config/application_credentials/dialog-add-application-credential.ts

@@ -1,8 +1,9 @@
 import "@material/mwc-button";
 import "@material/mwc-list/mwc-list-item";
+import { mdiOpenInNew } from "@mdi/js";
+import { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
 import { fireEvent } from "../../../common/dom/fire_event";
 import "../../../components/ha-circular-progress";
 import "../../../components/ha-combo-box";
@@ -10,14 +11,15 @@ import { createCloseHeading } from "../../../components/ha-dialog";
 import "../../../components/ha-markdown";
 import "../../../components/ha-textfield";
 import {
-  fetchApplicationCredentialsConfig,
-  createApplicationCredential,
-  ApplicationCredentialsConfig,
   ApplicationCredential,
+  ApplicationCredentialsConfig,
+  createApplicationCredential,
+  fetchApplicationCredentialsConfig,
 } from "../../../data/application_credential";
 import { domainToName } from "../../../data/integration";
 import { haStyleDialog } from "../../../resources/styles";
 import { HomeAssistant } from "../../../types";
+import { documentationUrl } from "../../../util/documentation-url";
 import { AddApplicationCredentialDialogParams } from "./show-dialog-add-application-credential";
 
 interface Domain {
@@ -98,6 +100,25 @@ export class DialogAddApplicationCredential extends LitElement {
       >
         <div>
           ${this._error ? html` <div class="error">${this._error}</div> ` : ""}
+          <p>
+            ${this.hass.localize(
+              "ui.panel.config.application_credentials.editor.description"
+            )}
+            <br />
+            <a
+              href=${documentationUrl(
+                this.hass!,
+                "/integrations/application_credentials"
+              )}
+              target="_blank"
+              rel="noreferrer"
+            >
+              ${this.hass!.localize(
+                "ui.panel.config.application_credentials.editor.view_documentation"
+              )}
+              <ha-svg-icon .path=${mdiOpenInNew}></ha-svg-icon>
+            </a>
+          </p>
           <ha-combo-box
             name="domain"
             .hass=${this.hass}
@@ -143,6 +164,10 @@ export class DialogAddApplicationCredential extends LitElement {
             @input=${this._handleValueChanged}
             error-message=${this.hass.localize("ui.common.error_required")}
             dialogInitialFocus
+            .helper=${this.hass.localize(
+              "ui.panel.config.application_credentials.editor.client_id_helper"
+            )}
+            helperPersistent
           ></ha-textfield>
           <ha-textfield
             .label=${this.hass.localize(
@@ -154,6 +179,10 @@ export class DialogAddApplicationCredential extends LitElement {
             required
             @input=${this._handleValueChanged}
             error-message=${this.hass.localize("ui.common.error_required")}
+            .helper=${this.hass.localize(
+              "ui.panel.config.application_credentials.editor.client_secret_helper"
+            )}
+            helperPersistent
           ></ha-textfield>
         </div>
         ${this._loading
@@ -163,15 +192,18 @@ export class DialogAddApplicationCredential extends LitElement {
               </div>
             `
           : html`
+              <mwc-button slot="primaryAction" @click=${this._abortDialog}>
+                ${this.hass.localize("ui.common.cancel")}
+              </mwc-button>
               <mwc-button
                 slot="primaryAction"
                 .disabled=${!this._domain ||
                 !this._clientId ||
                 !this._clientSecret}
-                @click=${this._createApplicationCredential}
+                @click=${this._addApplicationCredential}
               >
                 ${this.hass.localize(
-                  "ui.panel.config.application_credentials.editor.create"
+                  "ui.panel.config.application_credentials.editor.add"
                 )}
               </mwc-button>
             `}
@@ -213,7 +245,7 @@ export class DialogAddApplicationCredential extends LitElement {
     this.closeDialog();
   }
 
-  private async _createApplicationCredential(ev) {
+  private async _addApplicationCredential(ev) {
     ev.preventDefault();
     if (!this._domain || !this._clientId || !this._clientSecret) {
       return;
@@ -260,6 +292,12 @@ export class DialogAddApplicationCredential extends LitElement {
           display: block;
           margin-bottom: 24px;
         }
+        a {
+          text-decoration: none;
+        }
+        a ha-svg-icon {
+          --mdc-icon-size: 16px;
+        }
       `,
     ];
   }

src/panels/config/automation/action/ha-automation-action-row.ts

@@ -404,11 +404,15 @@ export default class HaAutomationActionRow extends LitElement {
 
   private _onDelete() {
     showConfirmationDialog(this, {
+      title: this.hass.localize(
+        "ui.panel.config.automation.editor.actions.delete_confirm_title"
+      ),
       text: this.hass.localize(
-        "ui.panel.config.automation.editor.actions.delete_confirm"
+        "ui.panel.config.automation.editor.actions.delete_confirm_text"
       ),
       dismissText: this.hass.localize("ui.common.cancel"),
       confirmText: this.hass.localize("ui.common.delete"),
+      destructive: true,
       confirm: () => {
         fireEvent(this, "value-changed", { value: null });
       },

src/panels/config/automation/condition/ha-automation-condition-row.ts

@@ -314,11 +314,15 @@ export default class HaAutomationConditionRow extends LitElement {
 
   private _onDelete() {
     showConfirmationDialog(this, {
+      title: this.hass.localize(
+        "ui.panel.config.automation.editor.conditions.delete_confirm_title"
+      ),
       text: this.hass.localize(
-        "ui.panel.config.automation.editor.conditions.delete_confirm"
+        "ui.panel.config.automation.editor.conditions.delete_confirm_text"
       ),
       dismissText: this.hass.localize("ui.common.cancel"),
       confirmText: this.hass.localize("ui.common.delete"),
+      destructive: true,
       confirm: () => {
         fireEvent(this, "value-changed", { value: null });
       },

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

@@ -31,6 +31,7 @@ import { classMap } from "lit/directives/class-map";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { navigate } from "../../../common/navigate";
 import { copyToClipboard } from "../../../common/util/copy-clipboard";
+import { afterNextRender } from "../../../common/util/render-status";
 import "../../../components/ha-button-menu";
 import "../../../components/ha-card";
 import "../../../components/ha-fab";
@@ -540,11 +541,15 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
   private async confirmUnsavedChanged(): Promise<boolean> {
     if (this._dirty) {
       return showConfirmationDialog(this, {
+        title: this.hass!.localize(
+          "ui.panel.config.automation.editor.unsaved_confirm_title"
+        ),
         text: this.hass!.localize(
-          "ui.panel.config.automation.editor.unsaved_confirm"
+          "ui.panel.config.automation.editor.unsaved_confirm_text"
         ),
         confirmText: this.hass!.localize("ui.common.leave"),
         dismissText: this.hass!.localize("ui.common.stay"),
+        destructive: true,
       });
     }
     return true;
@@ -553,7 +558,7 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
   private _backTapped = async () => {
     const result = await this.confirmUnsavedChanged();
     if (result) {
-      history.back();
+      afterNextRender(() => history.back());
     }
   };
 
@@ -570,10 +575,15 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
 
   private async _deleteConfirm() {
     showConfirmationDialog(this, {
+      title: this.hass.localize(
+        "ui.panel.config.automation.picker.delete_confirm_title"
+      ),
       text: this.hass.localize(
-        "ui.panel.config.automation.picker.delete_confirm"
+        "ui.panel.config.automation.picker.delete_confirm_text",
+        { name: this._config?.alias }
       ),
       confirmText: this.hass!.localize("ui.common.delete"),
+      destructive: true,
       dismissText: this.hass!.localize("ui.common.cancel"),
       confirm: () => this._delete(),
     });

src/panels/config/automation/ha-automation-picker.ts

@@ -341,12 +341,17 @@ class HaAutomationPicker extends LitElement {
 
   private async _deleteConfirm(automation) {
     showConfirmationDialog(this, {
+      title: this.hass.localize(
+        "ui.panel.config.automation.picker.delete_confirm_title"
+      ),
       text: this.hass.localize(
-        "ui.panel.config.automation.picker.delete_confirm"
+        "ui.panel.config.automation.picker.delete_confirm_text",
+        { name: automation.name }
       ),
       confirmText: this.hass!.localize("ui.common.delete"),
       dismissText: this.hass!.localize("ui.common.cancel"),
       confirm: () => this._delete(automation),
+      destructive: true,
     });
   }
 

src/panels/config/automation/trigger/ha-automation-trigger-row.ts

@@ -430,11 +430,15 @@ export default class HaAutomationTriggerRow extends LitElement {
 
   private _onDelete() {
     showConfirmationDialog(this, {
+      title: this.hass.localize(
+        "ui.panel.config.automation.editor.triggers.delete_confirm_title"
+      ),
       text: this.hass.localize(
-        "ui.panel.config.automation.editor.triggers.delete_confirm"
+        "ui.panel.config.automation.editor.triggers.delete_confirm_text"
       ),
       dismissText: this.hass.localize("ui.common.cancel"),
       confirmText: this.hass.localize("ui.common.delete"),
+      destructive: true,
       confirm: () => {
         fireEvent(this, "value-changed", { value: null });
       },

src/panels/config/blueprint/dialog-import-blueprint.ts

@@ -1,4 +1,5 @@
 import "@material/mwc-button";
+import { mdiOpenInNew } from "@mdi/js";
 import { css, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { fireEvent } from "../../../common/dom/fire_event";
@@ -105,28 +106,42 @@ class DialogImportBlueprint extends LitElement {
                 >
                   <pre>${this._result.raw_data}</pre>
                 </ha-expansion-panel>`
-            : html`${this.hass.localize(
+            : html`
-                  "ui.panel.config.blueprint.add.import_introduction_link",
+                <p>
-                  "community_link",
+                  ${this.hass.localize(
-                  html`<a
+                    "ui.panel.config.blueprint.add.import_introduction"
+                  )}
+                </p>
+                <a
                   href="https://www.home-assistant.io/get-blueprints"
                   target="_blank"
                   rel="noreferrer noopener"
-                    >${this.hass.localize(
+                >
+                  ${this.hass.localize(
                     "ui.panel.config.blueprint.add.community_forums"
-                    )}</a
+                  )}
-                  >`
+                  <ha-svg-icon .path=${mdiOpenInNew}></ha-svg-icon>
-                )}<ha-textfield
+                </a>
+                <ha-textfield
                   id="input"
                   .label=${this.hass.localize(
                     "ui.panel.config.blueprint.add.url"
                   )}
                   .value=${this._url || ""}
                   dialogInitialFocus
-                ></ha-textfield>`}
+                ></ha-textfield>
+              `}
         </div>
+        <mwc-button
+          slot="primaryAction"
+          @click=${this.closeDialog}
+          .disabled=${this._saving}
+        >
+          ${this.hass.localize("ui.common.cancel")}
+        </mwc-button>
         ${!this._result
-          ? html`<mwc-button
+          ? html`
+              <mwc-button
                 slot="primaryAction"
                 @click=${this._import}
                 .disabled=${this._importing}
@@ -140,15 +155,12 @@ class DialogImportBlueprint extends LitElement {
                       )}
                     ></ha-circular-progress>`
                   : ""}
-              ${this.hass.localize("ui.panel.config.blueprint.add.import_btn")}
+                ${this.hass.localize(
-            </mwc-button>`
+                  "ui.panel.config.blueprint.add.import_btn"
-          : html`<mwc-button
+                )}
-                slot="secondaryAction"
-                @click=${this.closeDialog}
-                .disabled=${this._saving}
-              >
-                ${this.hass.localize("ui.common.cancel")}
               </mwc-button>
+            `
+          : html`
               <mwc-button
                 slot="primaryAction"
                 @click=${this._save}
@@ -164,7 +176,8 @@ class DialogImportBlueprint extends LitElement {
                     ></ha-circular-progress>`
                   : ""}
                 ${this.hass.localize("ui.panel.config.blueprint.add.save_btn")}
-              </mwc-button>`}
+              </mwc-button>
+            `}
       </ha-dialog>
     `;
   }
@@ -215,9 +228,19 @@ class DialogImportBlueprint extends LitElement {
   static styles = [
     haStyleDialog,
     css`
+      p {
+        margin-top: 0;
+        margin-bottom: 8px;
+      }
       ha-textfield {
         display: block;
-        margin-top: 8px;
+        margin-top: 24px;
+      }
+      a {
+        text-decoration: none;
+      }
+      a ha-svg-icon {
+        --mdc-icon-size: 16px;
       }
     `,
   ];

src/panels/config/blueprint/ha-blueprint-overview.ts

@@ -329,11 +329,15 @@ class HaBlueprintOverview extends LitElement {
     if (
       !(await showConfirmationDialog(this, {
         title: this.hass.localize(
-          "ui.panel.config.blueprint.overview.confirm_delete_header"
+          "ui.panel.config.blueprint.overview.confirm_delete_title"
         ),
         text: this.hass.localize(
-          "ui.panel.config.blueprint.overview.confirm_delete_text"
+          "ui.panel.config.blueprint.overview.confirm_delete_text",
+          { name: blueprint.name }
         ),
+        confirmText: this.hass!.localize("ui.common.delete"),
+        dismissText: this.hass!.localize("ui.common.cancel"),
+        destructive: true,
       }))
     ) {
       return;

src/panels/config/cloud/account/cloud-alexa-pref.ts

@@ -1,11 +1,13 @@
 import "@material/mwc-button";
+import { mdiHelpCircle } from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { property, state } from "lit/decorators";
+import { property } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
+import "../../../../components/ha-alert";
 import "../../../../components/ha-card";
+import "../../../../components/ha-settings-row";
 import "../../../../components/ha-switch";
 import type { HaSwitch } from "../../../../components/ha-switch";
-import { syncCloudAlexaEntities } from "../../../../data/alexa";
 import { CloudStatusLoggedIn, updateCloudPref } from "../../../../data/cloud";
 import type { HomeAssistant } from "../../../../types";
 
@@ -14,8 +16,6 @@ export class CloudAlexaPref extends LitElement {
 
   @property() public cloudStatus?: CloudStatusLoggedIn;
 
-  @state() private _syncing = false;
-
   protected render(): TemplateResult {
     if (!this.cloudStatus) {
       return html``;
@@ -31,7 +31,20 @@ export class CloudAlexaPref extends LitElement {
           "ui.panel.config.cloud.account.alexa.title"
         )}
       >
-        <div class="switch">
+        <div class="header-actions">
+          <a
+            href="https://www.nabucasa.com/config/amazon_alexa/"
+            target="_blank"
+            rel="noreferrer"
+            class="icon-link"
+          >
+            <ha-icon-button
+              .label=${this.hass.localize(
+                "ui.panel.config.cloud.account.alexa.link_learn_how_it_works"
+              )}
+              .path=${mdiHelpCircle}
+            ></ha-icon-button>
+          </a>
           <ha-switch
             .checked=${alexa_enabled}
             @change=${this._enabledToggleChanged}
@@ -81,40 +94,25 @@ export class CloudAlexaPref extends LitElement {
                 </ha-alert>
               `
             : html`
-                <div class="state-reporting">
+                <ha-settings-row>
-                  <h3>
+                  <span slot="heading">
                     ${this.hass!.localize(
                       "ui.panel.config.cloud.account.alexa.enable_state_reporting"
                     )}
-                  </h3>
+                  </span>
-                  <div class="state-reporting-switch">
+                  <span slot="description">
+                    ${this.hass!.localize(
+                      "ui.panel.config.cloud.account.alexa.info_state_reporting"
+                    )}
+                  </span>
                   <ha-switch
                     .checked=${alexa_report_state}
                     @change=${this._reportToggleChanged}
                   ></ha-switch>
-                  </div>
+                </ha-settings-row>
-                </div>
-                <p>
-                  ${this.hass!.localize(
-                    "ui.panel.config.cloud.account.alexa.info_state_reporting"
-                  )}
-                </p>
               `}
         </div>
         <div class="card-actions">
-          ${alexa_registered
-            ? html`
-                <mwc-button
-                  @click=${this._handleSync}
-                  .disabled=${!alexa_enabled || this._syncing}
-                >
-                  ${this.hass!.localize(
-                    "ui.panel.config.cloud.account.alexa.sync_entities"
-                  )}
-                </mwc-button>
-              `
-            : ""}
-          <div class="spacer"></div>
           <a href="/config/cloud/alexa">
             <mwc-button
               >${this.hass!.localize(
@@ -127,21 +125,6 @@ export class CloudAlexaPref extends LitElement {
     `;
   }
 
-  private async _handleSync() {
-    this._syncing = true;
-    try {
-      await syncCloudAlexaEntities(this.hass!);
-    } catch (err: any) {
-      alert(
-        `${this.hass!.localize(
-          "ui.panel.config.cloud.account.alexa.sync_entities_error"
-        )} ${err.body.message}`
-      );
-    } finally {
-      this._syncing = false;
-    }
-  }
-
   private async _enabledToggleChanged(ev) {
     const toggle = ev.target as HaSwitch;
     try {
@@ -180,40 +163,33 @@ export class CloudAlexaPref extends LitElement {
       a {
         color: var(--primary-color);
       }
-      .switch {
+      ha-settings-row {
+        padding: 0;
+      }
+      .header-actions {
         position: absolute;
         right: 24px;
         top: 24px;
+        display: flex;
+        flex-direction: row;
       }
-      :host([dir="rtl"]) .switch {
+      :host([dir="rtl"]) .header-actions {
         right: auto;
         left: 24px;
       }
+      .header-actions .icon-link {
+        margin-top: -16px;
+        margin-inline-end: 8px;
+        margin-right: 8px;
+        direction: var(--direction);
+        color: var(--secondary-text-color);
+      }
       .card-actions {
         display: flex;
       }
       .card-actions a {
         text-decoration: none;
       }
-      .spacer {
-        flex-grow: 1;
-      }
-      .state-reporting {
-        display: flex;
-        margin-top: 1.5em;
-      }
-      .state-reporting + p {
-        margin-top: 0.5em;
-      }
-      .state-reporting h3 {
-        flex-grow: 1;
-        margin: 0;
-      }
-      .state-reporting-switch {
-        margin-top: 0.25em;
-        margin-right: 7px;
-        margin-left: 0.5em;
-      }
     `;
   }
 }

src/panels/config/cloud/account/cloud-google-pref.ts

@@ -1,15 +1,15 @@
 import "@material/mwc-button";
+import { mdiHelpCircle } from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { property, state } from "lit/decorators";
+import { property } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-alert";
 import "../../../../components/ha-card";
+import "../../../../components/ha-settings-row";
 import type { HaSwitch } from "../../../../components/ha-switch";
 import "../../../../components/ha-textfield";
 import type { HaTextField } from "../../../../components/ha-textfield";
 import { CloudStatusLoggedIn, updateCloudPref } from "../../../../data/cloud";
-import { syncCloudGoogleEntities } from "../../../../data/google_assistant";
-import { showAlertDialog } from "../../../../dialogs/generic/show-dialog-box";
 import type { HomeAssistant } from "../../../../types";
 import { showSaveSuccessToast } from "../../../../util/toast-saved-success";
 
@@ -18,8 +18,6 @@ export class CloudGooglePref extends LitElement {
 
   @property({ attribute: false }) public cloudStatus?: CloudStatusLoggedIn;
 
-  @state() private _syncing = false;
-
   protected render(): TemplateResult {
     if (!this.cloudStatus) {
       return html``;
@@ -36,11 +34,23 @@ export class CloudGooglePref extends LitElement {
           "ui.panel.config.cloud.account.google.title"
         )}
       >
-        <div class="switch">
+        <div class="header-actions">
+          <a
+            href="https://www.nabucasa.com/config/google_assistant/"
+            target="_blank"
+            rel="noreferrer"
+            class="icon-link"
+          >
+            <ha-icon-button
+              .label=${this.hass.localize(
+                "ui.panel.config.cloud.account.google.link_learn_how_it_works"
+              )}
+              .path=${mdiHelpCircle}
+            ></ha-icon-button>
+          </a>
           <ha-switch
-            id="google_enabled"
             .checked=${google_enabled}
-            @change=${this._enableToggleChanged}
+            @change=${this._enabledToggleChanged}
           ></ha-switch>
         </div>
         <div class="card-content">
@@ -110,33 +120,36 @@ export class CloudGooglePref extends LitElement {
                     `
                   : ""}
 
-                <div class="state-reporting">
+                <ha-settings-row>
-                  <h3>
+                  <span slot="heading">
-                    ${this.hass.localize(
+                    ${this.hass!.localize(
                       "ui.panel.config.cloud.account.google.enable_state_reporting"
                     )}
-                  </h3>
+                  </span>
-                  <div class="state-reporting-switch">
+                  <span slot="description">
+                    ${this.hass!.localize(
+                      "ui.panel.config.cloud.account.google.info_state_reporting"
+                    )}
+                  </span>
                   <ha-switch
                     .checked=${google_report_state}
                     @change=${this._reportToggleChanged}
                   ></ha-switch>
-                  </div>
+                </ha-settings-row>
-                </div>
+
-                <p>
+                <ha-settings-row>
-                  ${this.hass.localize(
+                  <span slot="heading">
-                    "ui.panel.config.cloud.account.google.info_state_reporting"
-                  )}
-                </p>
-                <div class="secure_devices">
-                  <h3>
                     ${this.hass.localize(
                       "ui.panel.config.cloud.account.google.security_devices"
                     )}
-                  </h3>
+                  </span>
+                  <span slot="description">
                     ${this.hass.localize(
                       "ui.panel.config.cloud.account.google.enter_pin_info"
                     )}
+                  </span>
+                </ha-settings-row>
+
                 <ha-textfield
                   id="google_secure_devices_pin"
                   .label=${this.hass.localize(
@@ -148,23 +161,9 @@ export class CloudGooglePref extends LitElement {
                   .value=${google_secure_devices_pin || ""}
                   @change=${this._pinChanged}
                 ></ha-textfield>
-                </div>
               `}
         </div>
         <div class="card-actions">
-          ${google_registered
-            ? html`
-                <mwc-button
-                  @click=${this._handleSync}
-                  .disabled=${!google_enabled || this._syncing}
-                >
-                  ${this.hass.localize(
-                    "ui.panel.config.cloud.account.google.sync_entities"
-                  )}
-                </mwc-button>
-              `
-            : ""}
-          <div class="spacer"></div>
           <a href="/config/cloud/google-assistant">
             <mwc-button>
               ${this.hass.localize(
@@ -177,32 +176,7 @@ export class CloudGooglePref extends LitElement {
     `;
   }
 
-  private async _handleSync() {
+  private async _enabledToggleChanged(ev) {
-    this._syncing = true;
-    try {
-      await syncCloudGoogleEntities(this.hass!);
-    } catch (err: any) {
-      showAlertDialog(this, {
-        title: this.hass.localize(
-          `ui.panel.config.cloud.account.google.${
-            err.status_code === 404
-              ? "not_configured_title"
-              : "sync_failed_title"
-          }`
-        ),
-        text: this.hass.localize(
-          `ui.panel.config.cloud.account.google.${
-            err.status_code === 404 ? "not_configured_text" : "sync_failed_text"
-          }`
-        ),
-      });
-      fireEvent(this, "ha-refresh-cloud-status");
-    } finally {
-      this._syncing = false;
-    }
-  }
-
-  private async _enableToggleChanged(ev) {
     const toggle = ev.target as HaSwitch;
     try {
       await updateCloudPref(this.hass, { [toggle.id]: toggle.checked! });
@@ -252,15 +226,27 @@ export class CloudGooglePref extends LitElement {
       a {
         color: var(--primary-color);
       }
-      .switch {
+      .header-actions {
         position: absolute;
         right: 24px;
         top: 24px;
+        display: flex;
+        flex-direction: row;
       }
-      :host([dir="rtl"]) .switch {
+      :host([dir="rtl"]) .header-actions {
         right: auto;
         left: 24px;
       }
+      .header-actions .icon-link {
+        margin-top: -16px;
+        margin-inline-end: 8px;
+        margin-right: 8px;
+        direction: var(--direction);
+        color: var(--secondary-text-color);
+      }
+      ha-settings-row {
+        padding: 0;
+      }
       ha-textfield {
         width: 250px;
         display: block;
@@ -275,32 +261,6 @@ export class CloudGooglePref extends LitElement {
       .warning {
         color: var(--error-color);
       }
-      .secure_devices {
-        padding-top: 8px;
-      }
-      .spacer {
-        flex-grow: 1;
-      }
-
-      .state-reporting {
-        display: flex;
-        margin-top: 1.5em;
-      }
-      .state-reporting + p {
-        margin-top: 0.5em;
-      }
-      h3 {
-        margin: 0 0 8px 0;
-      }
-      .state-reporting h3 {
-        flex-grow: 1;
-        margin: 0;
-      }
-      .state-reporting-switch {
-        margin-top: 0.25em;
-        margin-right: 7px;
-        margin-left: 0.5em;
-      }
     `;
   }
 }

src/panels/config/cloud/account/cloud-remote-pref.ts

@@ -1,5 +1,5 @@
 import "@material/mwc-button";
-import { mdiContentCopy } from "@mdi/js";
+import { mdiContentCopy, mdiHelpCircle } from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
@@ -58,12 +58,26 @@ export class CloudRemotePref extends LitElement {
           "ui.panel.config.cloud.account.remote.title"
         )}
       >
-        <div class="switch">
+        <div class="header-actions">
+          <a
+            href="https://www.nabucasa.com/config/remote/"
+            target="_blank"
+            rel="noreferrer"
+            class="icon-link"
+          >
+            <ha-icon-button
+              .label=${this.hass.localize(
+                "ui.panel.config.cloud.account.remote.link_learn_how_it_works"
+              )}
+              .path=${mdiHelpCircle}
+            ></ha-icon-button>
+          </a>
           <ha-switch
             .checked=${remote_enabled}
             @change=${this._toggleChanged}
           ></ha-switch>
         </div>
+
         <div class="card-content">
           ${!remote_connected && remote_enabled
             ? html`
@@ -98,18 +112,6 @@ export class CloudRemotePref extends LitElement {
           ></ha-svg-icon>
         </div>
         <div class="card-actions">
-          <a
-            href="https://www.nabucasa.com/config/remote/"
-            target="_blank"
-            rel="noreferrer"
-          >
-            <mwc-button
-              >${this.hass.localize(
-                "ui.panel.config.cloud.account.remote.link_learn_how_it_works"
-              )}</mwc-button
-            >
-          </a>
-          <div class="spacer"></div>
           <mwc-button @click=${this._openCertInfo}>
             ${this.hass.localize(
               "ui.panel.config.cloud.account.remote.certificate_info"
@@ -158,15 +160,24 @@ export class CloudRemotePref extends LitElement {
       a {
         color: var(--primary-color);
       }
-      .switch {
+      .header-actions {
         position: absolute;
         right: 24px;
         top: 24px;
+        display: flex;
+        flex-direction: row;
       }
-      :host([dir="rtl"]) .switch {
+      :host([dir="rtl"]) .header-actions {
         right: auto;
         left: 24px;
       }
+      .header-actions .icon-link {
+        margin-top: -16px;
+        margin-inline-end: 8px;
+        margin-right: 8px;
+        direction: var(--direction);
+        color: var(--secondary-text-color);
+      }
       .warning {
         font-weight: bold;
         margin-bottom: 1em;
@@ -179,19 +190,12 @@ export class CloudRemotePref extends LitElement {
         right: 24px;
         top: 24px;
       }
-      :host([dir="rtl"]) .switch {
-        right: auto;
-        left: 24px;
-      }
       .card-actions {
         display: flex;
       }
       .card-actions a {
         text-decoration: none;
       }
-      .spacer {
-        flex-grow: 1;
-      }
       ha-svg-icon {
         --mdc-icon-size: 18px;
         color: var(--secondary-text-color);

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

@@ -5,6 +5,9 @@ import {
   mdiCheckboxMultipleMarked,
   mdiCloseBox,
   mdiCloseBoxMultiple,
+  mdiDotsVertical,
+  mdiFormatListChecks,
+  mdiSync,
 } from "@mdi/js";
 import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
@@ -26,7 +29,11 @@ import "../../../../components/ha-card";
 import "../../../../components/ha-formfield";
 import "../../../../components/ha-icon-button";
 import "../../../../components/ha-switch";
-import { AlexaEntity, fetchCloudAlexaEntities } from "../../../../data/alexa";
+import {
+  AlexaEntity,
+  fetchCloudAlexaEntities,
+  syncCloudAlexaEntities,
+} from "../../../../data/alexa";
 import {
   AlexaEntityConfig,
   CloudPreferences,
@@ -59,6 +66,8 @@ class CloudAlexa extends SubscribeMixin(LitElement) {
 
   @state() private _entities?: AlexaEntity[];
 
+  @state() private _syncing = false;
+
   @state()
   private _entityConfigs: CloudPreferences["alexa_entity_configs"] = {};
 
@@ -222,33 +231,47 @@ class CloudAlexa extends SubscribeMixin(LitElement) {
     }
 
     return html`
-      <hass-subpage .hass=${this.hass} .narrow=${
+      <hass-subpage
-      this.narrow
+        .hass=${this.hass}
-    } .header=${this.hass!.localize("ui.panel.config.cloud.alexa.title")}>
+        .narrow=${this.narrow}
-        ${
+        .header=${this.hass!.localize("ui.panel.config.cloud.alexa.title")}
-          emptyFilter
-            ? html`
-                <mwc-button
-                  slot="toolbar-icon"
-                  @click=${this._openDomainToggler}
-                  >${this.hass!.localize(
-                    "ui.panel.config.cloud.alexa.manage_defaults"
-                  )}</mwc-button
       >
-              `
+        <ha-button-menu corner="BOTTOM_START" slot="toolbar-icon">
-            : ""
+          <ha-icon-button
-        }
+            slot="trigger"
-        ${
+            .label=${this.hass.localize("ui.common.menu")}
-          !emptyFilter
+            .path=${mdiDotsVertical}
+          ></ha-icon-button>
+
+          <mwc-list-item
+            graphic="icon"
+            .disabled=${!emptyFilter}
+            @click=${this._openDomainToggler}
+          >
+            ${this.hass.localize("ui.panel.config.cloud.alexa.manage_defaults")}
+            <ha-svg-icon
+              slot="graphic"
+              .path=${mdiFormatListChecks}
+            ></ha-svg-icon>
+          </mwc-list-item>
+
+          <mwc-list-item
+            graphic="icon"
+            .disabled=${this._syncing}
+            @click=${this._handleSync}
+          >
+            ${this.hass.localize("ui.panel.config.cloud.alexa.sync_entities")}
+            <ha-svg-icon slot="graphic" .path=${mdiSync}></ha-svg-icon>
+          </mwc-list-item>
+        </ha-button-menu>
+        ${!emptyFilter
           ? html`
               <div class="banner">
                 ${this.hass!.localize("ui.panel.config.cloud.alexa.banner")}
               </div>
             `
-            : ""
+          : ""}
-        }
+        ${exposedCards.length > 0
-          ${
-            exposedCards.length > 0
           ? html`
               <div class="header">
                 <h3>
@@ -266,10 +289,8 @@ class CloudAlexa extends SubscribeMixin(LitElement) {
               </div>
               <div class="content">${exposedCards}</div>
             `
-              : ""
+          : ""}
-          }
+        ${notExposedCards.length > 0
-          ${
-            notExposedCards.length > 0
           ? html`
               <div class="header second">
                 <h3>
@@ -287,9 +308,7 @@ class CloudAlexa extends SubscribeMixin(LitElement) {
               </div>
               <div class="content">${notExposedCards}</div>
             `
-              : ""
+          : ""}
-          }
-        </div>
       </hass-subpage>
     `;
   }
@@ -423,6 +442,21 @@ class CloudAlexa extends SubscribeMixin(LitElement) {
     });
   }
 
+  private async _handleSync() {
+    this._syncing = true;
+    try {
+      await syncCloudAlexaEntities(this.hass!);
+    } catch (err: any) {
+      alert(
+        `${this.hass!.localize(
+          "ui.panel.config.cloud.alexa.sync_entities_error"
+        )} ${err.body.message}`
+      );
+    } finally {
+      this._syncing = false;
+    }
+  }
+
   private async _updateDomainExposed(domain: string, expose: boolean) {
     const defaultExpose =
       this.cloudStatus.prefs.alexa_default_expose ||

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

@@ -3,6 +3,7 @@ import { css, CSSResultGroup, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { formatDateTime } from "../../../../common/datetime/format_date_time";
 import { fireEvent } from "../../../../common/dom/fire_event";
+import { createCloseHeading } from "../../../../components/ha-dialog";
 import { haStyleDialog } from "../../../../resources/styles";
 import type { HomeAssistant } from "../../../../types";
 import type { CloudCertificateParams as CloudCertificateDialogParams } from "./show-dialog-cloud-certificate";
@@ -32,8 +33,13 @@ class DialogCloudCertificate extends LitElement {
     return html`
       <ha-dialog
         open
-        .heading=${this.hass!.localize(
+        hideActions
+        @closed=${this.closeDialog}
+        .heading=${createCloseHeading(
+          this.hass,
+          this.hass.localize(
             "ui.panel.config.cloud.dialog_certificate.certificate_information"
+          )
         )}
       >
         <div>
@@ -76,6 +82,13 @@ class DialogCloudCertificate extends LitElement {
         .break-word {
           overflow-wrap: break-word;
         }
+        p {
+          margin-top: 0;
+          margin-bottom: 12px;
+        }
+        p:last-child {
+          margin-bottom: 0;
+        }
       `,
     ];
   }

src/panels/config/cloud/dialog-manage-cloudhook/dialog-manage-cloudhook.ts

@@ -1,18 +1,19 @@
 import "@material/mwc-button";
+import { mdiContentCopy, mdiOpenInNew } from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement } from "lit";
 import { query, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { copyToClipboard } from "../../../../common/util/copy-clipboard";
-import type { HaTextField } from "../../../../components/ha-textfield";
+import { createCloseHeading } from "../../../../components/ha-dialog";
 import "../../../../components/ha-textfield";
+import type { HaTextField } from "../../../../components/ha-textfield";
 import { showConfirmationDialog } from "../../../../dialogs/generic/show-dialog-box";
 import { haStyle, haStyleDialog } from "../../../../resources/styles";
 import { HomeAssistant } from "../../../../types";
 import { documentationUrl } from "../../../../util/documentation-url";
+import { showToast } from "../../../../util/toast";
 import { WebhookDialogParams } from "./show-dialog-manage-cloudhook";
 
-const inputLabel = "Public URL – Click to copy to clipboard";
-
 export class DialogManageCloudhook extends LitElement {
   protected hass?: HomeAssistant;
 
@@ -44,26 +45,19 @@ export class DialogManageCloudhook extends LitElement {
     return html`
       <ha-dialog
         open
-        .heading=${this.hass!.localize(
+        hideActions
+        @closed=${this.closeDialog}
+        .heading=${createCloseHeading(
+          this.hass!,
+          this.hass!.localize(
             "ui.panel.config.cloud.dialog_cloudhook.webhook_for",
-          "name",
+            { name: webhook.name }
-          webhook.name
+          )
         )}
       >
         <div>
           <p>
-            ${this.hass!.localize(
+            ${!cloudhook.managed
-              "ui.panel.config.cloud.dialog_cloudhook.available_at"
-            )}
-          </p>
-          <ha-textfield
-            .label=${inputLabel}
-            .value=${cloudhook.cloudhook_url}
-            @click=${this._copyClipboard}
-            @blur=${this._restoreLabel}
-          ></ha-textfield>
-          <p>
-            ${cloudhook.managed
               ? html`
                   ${this.hass!.localize(
                     "ui.panel.config.cloud.dialog_cloudhook.managed_by_integration"
@@ -79,7 +73,29 @@ export class DialogManageCloudhook extends LitElement {
                     )}</button
                   >.
                 `}
+            <br />
+            <a href=${docsUrl} target="_blank" rel="noreferrer">
+              ${this.hass!.localize(
+                "ui.panel.config.cloud.dialog_cloudhook.view_documentation"
+              )}
+              <ha-svg-icon .path=${mdiOpenInNew}></ha-svg-icon>
+            </a>
           </p>
+          <ha-textfield
+            .label=${this.hass!.localize(
+              "ui.panel.config.cloud.dialog_cloudhook.public_url"
+            )}
+            .value=${cloudhook.cloudhook_url}
+            iconTrailing
+            readOnly
+            @click=${this.focusInput}
+          >
+            <ha-icon-button
+              @click=${this._copyUrl}
+              slot="trailingIcon"
+              .path=${mdiContentCopy}
+            ></ha-icon-button>
+          </ha-textfield>
         </div>
 
         <a
@@ -102,35 +118,42 @@ export class DialogManageCloudhook extends LitElement {
   }
 
   private async _disableWebhook() {
-    showConfirmationDialog(this, {
+    const confirmed = await showConfirmationDialog(this, {
+      title: this.hass!.localize(
+        "ui.panel.config.cloud.dialog_cloudhook.confirm_disable_title"
+      ),
       text: this.hass!.localize(
-        "ui.panel.config.cloud.dialog_cloudhook.confirm_disable"
+        "ui.panel.config.cloud.dialog_cloudhook.confirm_disable_text",
+        { name: this._params!.webhook.name }
       ),
       dismissText: this.hass!.localize("ui.common.cancel"),
       confirmText: this.hass!.localize("ui.common.disable"),
-      confirm: () => {
+      destructive: true,
+    });
+    if (confirmed) {
       this._params!.disableHook();
       this.closeDialog();
-      },
+    }
+  }
+
+  private focusInput(ev) {
+    const inputElement = ev.currentTarget as HaTextField;
+    inputElement.select();
+  }
+
+  private async _copyUrl(ev): Promise<void> {
+    if (!this.hass) return;
+    ev.stopPropagation();
+    const inputElement = ev.target.parentElement as HaTextField;
+    inputElement.select();
+    const url = this.hass.hassUrl(inputElement.value);
+
+    await copyToClipboard(url);
+    showToast(this, {
+      message: this.hass.localize("ui.common.copied_clipboard"),
     });
   }
 
-  private _copyClipboard(ev: FocusEvent) {
-    const textField = ev.currentTarget as HaTextField;
-    try {
-      copyToClipboard(textField.value);
-      textField.label = this.hass!.localize(
-        "ui.panel.config.cloud.dialog_cloudhook.copied_to_clipboard"
-      );
-    } catch (err: any) {
-      // Copying failed. Oh no
-    }
-  }
-
-  private _restoreLabel() {
-    this._input.label = inputLabel;
-  }
-
   static get styles(): CSSResultGroup {
     return [
       haStyle,
@@ -142,12 +165,24 @@ export class DialogManageCloudhook extends LitElement {
         ha-textfield {
           display: block;
         }
+        ha-textfield > ha-icon-button {
+          --mdc-icon-button-size: 24px;
+          --mdc-icon-size: 18px;
+        }
         button.link {
           color: var(--primary-color);
+          text-decoration: none;
         }
         a {
           text-decoration: none;
         }
+        a ha-svg-icon {
+          --mdc-icon-size: 16px;
+        }
+        p {
+          margin-top: 0;
+          margin-bottom: 16px;
+        }
       `,
     ];
   }

src/panels/config/cloud/google-assistant/cloud-google-assistant.ts

@@ -5,6 +5,9 @@ import {
   mdiCheckboxMultipleMarked,
   mdiCloseBox,
   mdiCloseBoxMultiple,
+  mdiDotsVertical,
+  mdiFormatListChecks,
+  mdiSync,
 } from "@mdi/js";
 import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
@@ -45,6 +48,7 @@ import {
   GoogleEntity,
 } from "../../../../data/google_assistant";
 import { showDomainTogglerDialog } from "../../../../dialogs/domain-toggler/show-dialog-domain-toggler";
+import { showAlertDialog } from "../../../../dialogs/generic/show-dialog-box";
 import "../../../../layouts/hass-loading-screen";
 import "../../../../layouts/hass-subpage";
 import { SubscribeMixin } from "../../../../mixins/subscribe-mixin";
@@ -64,6 +68,8 @@ class CloudGoogleAssistant extends SubscribeMixin(LitElement) {
 
   @state() private _entities?: GoogleEntity[];
 
+  @state() private _syncing = false;
+
   @state()
   private _entityConfigs: CloudPreferences["google_entity_configs"] = {};
 
@@ -249,19 +255,39 @@ class CloudGoogleAssistant extends SubscribeMixin(LitElement) {
         .hass=${this.hass}
         .header=${this.hass!.localize("ui.panel.config.cloud.google.title")}
         .narrow=${this.narrow}>
-        ${
+        <ha-button-menu corner="BOTTOM_START" slot="toolbar-icon">
-          emptyFilter
+          <ha-icon-button
-            ? html`
+            slot="trigger"
-                <mwc-button
+            .label=${this.hass.localize("ui.common.menu")}
-                  slot="toolbar-icon"
+            .path=${mdiDotsVertical}
+          ></ha-icon-button>
+
+          <mwc-list-item
+            graphic="icon"
+            .disabled=${!emptyFilter}
             @click=${this._openDomainToggler}
-                  >${this.hass!.localize(
-                    "ui.panel.config.cloud.google.manage_defaults"
-                  )}</mwc-button
           >
-              `
+            ${this.hass.localize(
-            : ""
+              "ui.panel.config.cloud.google.manage_defaults"
-        }
+            )}
+            <ha-svg-icon
+              slot="graphic"
+              .path=${mdiFormatListChecks}
+            ></ha-svg-icon>
+          </mwc-list-item>
+
+          <mwc-list-item
+            graphic="icon"
+            .disabled=${this._syncing}
+            @click=${this._handleSync}
+          >
+          ${this.hass.localize("ui.panel.config.cloud.google.sync_entities")}
+            <ha-svg-icon
+              slot="graphic"
+              .path=${mdiSync}
+            ></ha-svg-icon>
+          </mwc-list-item>
+        </ha-button-menu>
         ${
           !emptyFilter
             ? html`
@@ -506,6 +532,31 @@ class CloudGoogleAssistant extends SubscribeMixin(LitElement) {
     );
   }
 
+  private async _handleSync() {
+    this._syncing = true;
+    try {
+      await cloudSyncGoogleAssistant(this.hass!);
+    } catch (err: any) {
+      showAlertDialog(this, {
+        title: this.hass.localize(
+          `ui.panel.config.cloud.google.${
+            err.status_code === 404
+              ? "not_configured_title"
+              : "sync_failed_title"
+          }`
+        ),
+        text: this.hass.localize(
+          `ui.panel.config.cloud.google.${
+            err.status_code === 404 ? "not_configured_text" : "sync_failed_text"
+          }`
+        ),
+      });
+      fireEvent(this, "ha-refresh-cloud-status");
+    } finally {
+      this._syncing = false;
+    }
+  }
+
   private _ensureEntitySync() {
     if (this._popstateSyncAttached) {
       return;

src/panels/config/core/ha-config-section-updates.ts

@@ -24,13 +24,11 @@ import {
   checkForEntityUpdates,
   filterUpdateEntitiesWithInstall,
 } from "../../../data/update";
-import {
+import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
-  showAlertDialog,
-  showConfirmationDialog,
-} from "../../../dialogs/generic/show-dialog-box";
 import "../../../layouts/hass-subpage";
 import type { HomeAssistant } from "../../../types";
 import "../dashboard/ha-config-updates";
+import { showJoinBetaDialog } from "./updates/show-dialog-join-beta";
 
 @customElement("ha-config-section-updates")
 class HaConfigSectionUpdates extends LitElement {
@@ -46,9 +44,7 @@ class HaConfigSectionUpdates extends LitElement {
     super.firstUpdated(changedProps);
 
     if (isComponentLoaded(this.hass, "hassio")) {
-      fetchHassioSupervisorInfo(this.hass).then((data) => {
+      this._refreshSupervisorInfo();
-        this._supervisorInfo = data;
-      });
     }
   }
 
@@ -126,6 +122,10 @@ class HaConfigSectionUpdates extends LitElement {
     `;
   }
 
+  private async _refreshSupervisorInfo() {
+    this._supervisorInfo = await fetchHassioSupervisorInfo(this.hass);
+  }
+
   private _toggleSkipped(ev: CustomEvent<RequestSelectedDetail>): void {
     if (ev.detail.source !== "property") {
       return;
@@ -142,35 +142,23 @@ class HaConfigSectionUpdates extends LitElement {
     }
 
     if (this._supervisorInfo!.channel === "stable") {
-      const confirmed = await showConfirmationDialog(this, {
+      showJoinBetaDialog(this, {
-        title: this.hass.localize("ui.dialogs.join_beta_channel.title"),
+        join: async () => this._setChannel("beta"),
-        text: html`${this.hass.localize("ui.dialogs.join_beta_channel.warning")}
-          <br />
-          <b> ${this.hass.localize("ui.dialogs.join_beta_channel.backup")} </b>
-          <br /><br />
-          ${this.hass.localize("ui.dialogs.join_beta_channel.release_items")}
-          <ul>
-            <li>Home Assistant Core</li>
-            <li>Home Assistant Supervisor</li>
-            <li>Home Assistant Operating System</li>
-          </ul>
-          <br />
-          ${this.hass.localize("ui.dialogs.join_beta_channel.confirm")}`,
-        confirmText: this.hass.localize("ui.panel.config.updates.join_beta"),
-        dismissText: this.hass.localize("ui.common.cancel"),
       });
-
+    } else {
-      if (!confirmed) {
+      this._setChannel("stable");
-        return;
     }
   }
 
+  private async _setChannel(
+    channel: SupervisorOptions["channel"]
+  ): Promise<void> {
     try {
-      const data: Partial<SupervisorOptions> = {
+      await setSupervisorOption(this.hass, {
-        channel: this._supervisorInfo!.channel === "stable" ? "beta" : "stable",
+        channel,
-      };
+      });
-      await setSupervisorOption(this.hass, data);
       await reloadSupervisor(this.hass);
+      await this._refreshSupervisorInfo();
     } catch (err: any) {
       showAlertDialog(this, {
         text: extractApiErrorMessage(err),

src/panels/config/core/ha-config-system-navigation.ts

@@ -181,6 +181,7 @@ class HaConfigSystemNavigation extends LitElement {
           });
         });
       },
+      destructive: true,
     });
   }
 
@@ -205,7 +206,7 @@ class HaConfigSystemNavigation extends LitElement {
       const hardwareInfo: HardwareInfo = await this.hass.callWS({
         type: "hardware/info",
       });
-      this._boardName = hardwareInfo?.hardware?.[0].name;
+      this._boardName = hardwareInfo?.hardware?.[0]?.name;
     } else if (isHassioLoaded) {
       const osData: HassioHassOSInfo = await fetchHassioHassOsInfo(this.hass);
       if (osData.board) {

src/panels/config/core/updates/dialog-join-beta.ts

@@ -0,0 +1,108 @@
+import "@material/mwc-button/mwc-button";
+import { mdiOpenInNew } from "@mdi/js";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { fireEvent } from "../../../../common/dom/fire_event";
+import "../../../../components/ha-alert";
+import { createCloseHeading } from "../../../../components/ha-dialog";
+import "../../../../components/ha-header-bar";
+import { HassDialog } from "../../../../dialogs/make-dialog-manager";
+import { haStyleDialog } from "../../../../resources/styles";
+import { HomeAssistant } from "../../../../types";
+import { documentationUrl } from "../../../../util/documentation-url";
+import { JoinBetaDialogParams } from "./show-dialog-join-beta";
+
+@customElement("dialog-join-beta")
+export class DialogJoinBeta
+  extends LitElement
+  implements HassDialog<JoinBetaDialogParams>
+{
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @state() private _dialogParams?: JoinBetaDialogParams;
+
+  public showDialog(dialogParams: JoinBetaDialogParams): void {
+    this._dialogParams = dialogParams;
+  }
+
+  public closeDialog(): void {
+    this._dialogParams = undefined;
+    fireEvent(this, "dialog-closed", { dialog: this.localName });
+  }
+
+  protected render(): TemplateResult {
+    if (!this._dialogParams) {
+      return html``;
+    }
+
+    return html`
+      <ha-dialog
+        open
+        @closed=${this.closeDialog}
+        .heading=${createCloseHeading(
+          this.hass,
+          this.hass.localize("ui.dialogs.join_beta_channel.title")
+        )}
+      >
+        <ha-alert alert-type="warning">
+          ${this.hass.localize("ui.dialogs.join_beta_channel.backup")}
+        </ha-alert>
+        <p>
+          ${this.hass.localize("ui.dialogs.join_beta_channel.warning")}
+          ${this.hass.localize("ui.dialogs.join_beta_channel.release_items")}
+        </p>
+        <ul>
+          <li>Home Assistant Core</li>
+          <li>Home Assistant Supervisor</li>
+          <li>Home Assistant Operating System</li>
+        </ul>
+        <a
+          href=${documentationUrl(this.hass!, "/faq/release/")}
+          target="_blank"
+          rel="noreferrer"
+        >
+          ${this.hass!.localize(
+            "ui.dialogs.join_beta_channel.view_documentation"
+          )}
+          <ha-svg-icon .path=${mdiOpenInNew}></ha-svg-icon>
+        </a>
+        <mwc-button slot="primaryAction" @click=${this._cancel}>
+          ${this.hass.localize("ui.common.cancel")}
+        </mwc-button>
+        <mwc-button slot="primaryAction" @click=${this._join}>
+          ${this.hass.localize("ui.dialogs.join_beta_channel.join")}
+        </mwc-button>
+      </ha-dialog>
+    `;
+  }
+
+  private _cancel() {
+    this._dialogParams?.cancel?.();
+    this.closeDialog();
+  }
+
+  private _join() {
+    this._dialogParams?.join?.();
+    this.closeDialog();
+  }
+
+  static get styles(): CSSResultGroup {
+    return [
+      haStyleDialog,
+      css`
+        a {
+          text-decoration: none;
+        }
+        a ha-svg-icon {
+          --mdc-icon-size: 16px;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "dialog-join-beta": DialogJoinBeta;
+  }
+}

src/panels/config/core/updates/show-dialog-join-beta.ts

@@ -0,0 +1,18 @@
+import { fireEvent } from "../../../../common/dom/fire_event";
+import "./dialog-join-beta";
+
+export interface JoinBetaDialogParams {
+  join?: () => any;
+  cancel?: () => any;
+}
+
+export const showJoinBetaDialog = (
+  element: HTMLElement,
+  dialogParams: JoinBetaDialogParams
+): void => {
+  fireEvent(element, "show-dialog", {
+    dialogTag: "dialog-join-beta",
+    dialogImport: () => import("./dialog-join-beta"),
+    dialogParams,
+  });
+};

src/panels/config/devices/device-detail/integration-elements/zha/device-actions.ts

@@ -1,9 +1,7 @@
 import {
   mdiCogRefresh,
   mdiDelete,
-  mdiDrawPen,
   mdiFamilyTree,
-  mdiFileTree,
   mdiGroup,
   mdiPlus,
 } from "@mdi/js";
@@ -12,9 +10,7 @@ import type { DeviceRegistryEntry } from "../../../../../../data/device_registry
 import { fetchZHADevice } from "../../../../../../data/zha";
 import { showConfirmationDialog } from "../../../../../../dialogs/generic/show-dialog-box";
 import type { HomeAssistant } from "../../../../../../types";
-import { showZHAClusterDialog } from "../../../../integrations/integration-panels/zha/show-dialog-zha-cluster";
+import { showZHAManageZigbeeDeviceDialog } from "../../../../integrations/integration-panels/zha/show-dialog-zha-manage-zigbee-device";
-import { showZHADeviceChildrenDialog } from "../../../../integrations/integration-panels/zha/show-dialog-zha-device-children";
-import { showZHADeviceZigbeeInfoDialog } from "../../../../integrations/integration-panels/zha/show-dialog-zha-device-zigbee-info";
 import { showZHAReconfigureDeviceDialog } from "../../../../integrations/integration-panels/zha/show-dialog-zha-reconfigure-device";
 import type { DeviceAction } from "../../../ha-config-device-page";
 
@@ -59,13 +55,6 @@ export const getZHADeviceActions = async (
           icon: mdiPlus,
           action: () => navigate(`/config/zha/add/${zhaDevice!.ieee}`),
         },
-        {
-          label: hass.localize(
-            "ui.dialogs.zha_device_info.buttons.device_children"
-          ),
-          icon: mdiFileTree,
-          action: () => showZHADeviceChildrenDialog(el, { device: zhaDevice! }),
-        },
       ]
     );
   }
@@ -73,16 +62,10 @@ export const getZHADeviceActions = async (
   actions.push(
     ...[
       {
-        label: hass.localize(
+        label: hass.localize("ui.dialogs.zha_device_info.buttons.manage"),
-          "ui.dialogs.zha_device_info.buttons.zigbee_information"
-        ),
-        icon: mdiDrawPen,
-        action: () => showZHADeviceZigbeeInfoDialog(el, { device: zhaDevice }),
-      },
-      {
-        label: hass.localize("ui.dialogs.zha_device_info.buttons.clusters"),
         icon: mdiGroup,
-        action: () => showZHAClusterDialog(el, { device: zhaDevice }),
+        action: () =>
+          showZHAManageZigbeeDeviceDialog(el, { device: zhaDevice }),
       },
       {
         label: hass.localize("ui.dialogs.zha_device_info.buttons.view_network"),

src/panels/config/devices/device-detail/integration-elements/zha/ha-device-info-zha.ts

@@ -23,6 +23,7 @@ export class HaDeviceActionsZha extends LitElement {
   @state() private _zhaDevice?: ZHADevice;
 
   protected updated(changedProperties: PropertyValues) {
+    super.updated(changedProperties);
     if (changedProperties.has("device")) {
       const zigbeeConnection = this.device.connections.find(
         (conn) => conn[0] === "zigbee"

src/panels/config/energy/components/ha-energy-battery-settings.ts

@@ -16,7 +16,7 @@ import {
 import {
   StatisticsMetaData,
   getStatisticLabel,
-} from "../../../../data/history";
+} from "../../../../data/recorder";
 import {
   showAlertDialog,
   showConfirmationDialog,
@@ -36,7 +36,7 @@ export class EnergyBatterySettings extends LitElement {
   public preferences!: EnergyPreferences;
 
   @property({ attribute: false })
-  public statsMetadata!: Record<string, StatisticsMetaData>;
+  public statsMetadata?: Record<string, StatisticsMetaData>;
 
   @property({ attribute: false })
   public validationResult?: EnergyPreferencesValidation;
@@ -104,14 +104,14 @@ export class EnergyBatterySettings extends LitElement {
                     >${getStatisticLabel(
                       this.hass,
                       source.stat_energy_from,
-                      this.statsMetadata[source.stat_energy_from]
+                      this.statsMetadata?.[source.stat_energy_from]
                     )}</span
                   >
                   <span
                     >${getStatisticLabel(
                       this.hass,
                       source.stat_energy_to,
-                      this.statsMetadata[source.stat_energy_to]
+                      this.statsMetadata?.[source.stat_energy_to]
                     )}</span
                   >
                 </div>

src/panels/config/energy/components/ha-energy-device-settings.ts

@@ -15,7 +15,7 @@ import {
 import {
   StatisticsMetaData,
   getStatisticLabel,
-} from "../../../../data/history";
+} from "../../../../data/recorder";
 import {
   showAlertDialog,
   showConfirmationDialog,
@@ -35,7 +35,7 @@ export class EnergyDeviceSettings extends LitElement {
   public preferences!: EnergyPreferences;
 
   @property({ attribute: false })
-  public statsMetadata!: Record<string, StatisticsMetaData>;
+  public statsMetadata?: Record<string, StatisticsMetaData>;
 
   @property({ attribute: false })
   public validationResult?: EnergyPreferencesValidation;
@@ -90,7 +90,7 @@ export class EnergyDeviceSettings extends LitElement {
                   >${getStatisticLabel(
                     this.hass,
                     device.stat_consumption,
-                    this.statsMetadata[device.stat_consumption]
+                    this.statsMetadata?.[device.stat_consumption]
                   )}</span
                 >
                 <ha-icon-button

src/panels/config/energy/components/ha-energy-gas-settings.ts

@@ -16,7 +16,7 @@ import {
 import {
   StatisticsMetaData,
   getStatisticLabel,
-} from "../../../../data/history";
+} from "../../../../data/recorder";
 import {
   showAlertDialog,
   showConfirmationDialog,
@@ -36,7 +36,7 @@ export class EnergyGasSettings extends LitElement {
   public preferences!: EnergyPreferences;
 
   @property({ attribute: false })
-  public statsMetadata!: Record<string, StatisticsMetaData>;
+  public statsMetadata?: Record<string, StatisticsMetaData>;
 
   @property({ attribute: false })
   public validationResult?: EnergyPreferencesValidation;
@@ -98,7 +98,7 @@ export class EnergyGasSettings extends LitElement {
                   >${getStatisticLabel(
                     this.hass,
                     source.stat_energy_from,
-                    this.statsMetadata[source.stat_energy_from]
+                    this.statsMetadata?.[source.stat_energy_from]
                   )}</span
                 >
                 <ha-icon-button
@@ -133,7 +133,10 @@ export class EnergyGasSettings extends LitElement {
 
   private _addSource() {
     showEnergySettingsGasDialog(this, {
-      unit: getEnergyGasUnitCategory(this.preferences, this.statsMetadata),
+      allowedGasUnitCategory: getEnergyGasUnitCategory(
+        this.preferences,
+        this.statsMetadata
+      ),
       saveCallback: async (source) => {
         delete source.unit_of_measurement;
         await this._savePreferences({
@@ -149,11 +152,12 @@ export class EnergyGasSettings extends LitElement {
       ev.currentTarget.closest(".row").source;
     showEnergySettingsGasDialog(this, {
       source: { ...origSource },
-      unit: getEnergyGasUnitCategory(
+      allowedGasUnitCategory: getEnergyGasUnitCategory(
         this.preferences,
         this.statsMetadata,
         origSource.stat_energy_from
       ),
+      metadata: this.statsMetadata?.[origSource.stat_energy_from],
       saveCallback: async (newSource) => {
         await this._savePreferences({
           ...this.preferences,

src/panels/config/energy/components/ha-energy-grid-settings.ts

@@ -30,7 +30,7 @@ import {
 import {
   StatisticsMetaData,
   getStatisticLabel,
-} from "../../../../data/history";
+} from "../../../../data/recorder";
 import { showConfigFlowDialog } from "../../../../dialogs/config-flow/show-dialog-config-flow";
 import {
   showAlertDialog,
@@ -55,7 +55,7 @@ export class EnergyGridSettings extends LitElement {
   public preferences!: EnergyPreferences;
 
   @property({ attribute: false })
-  public statsMetadata!: Record<string, StatisticsMetaData>;
+  public statsMetadata?: Record<string, StatisticsMetaData>;
 
   @property({ attribute: false })
   public validationResult?: EnergyPreferencesValidation;
@@ -136,7 +136,7 @@ export class EnergyGridSettings extends LitElement {
                   >${getStatisticLabel(
                     this.hass,
                     flow.stat_energy_from,
-                    this.statsMetadata[flow.stat_energy_from]
+                    this.statsMetadata?.[flow.stat_energy_from]
                   )}</span
                 >
                 <ha-icon-button
@@ -183,7 +183,7 @@ export class EnergyGridSettings extends LitElement {
                   >${getStatisticLabel(
                     this.hass,
                     flow.stat_energy_to,
-                    this.statsMetadata[flow.stat_energy_to]
+                    this.statsMetadata?.[flow.stat_energy_to]
                   )}</span
                 >
                 <ha-icon-button

src/panels/config/energy/components/ha-energy-solar-settings.ts

@@ -16,7 +16,7 @@ import {
 import {
   StatisticsMetaData,
   getStatisticLabel,
-} from "../../../../data/history";
+} from "../../../../data/recorder";
 import {
   showConfirmationDialog,
   showAlertDialog,
@@ -36,7 +36,7 @@ export class EnergySolarSettings extends LitElement {
   public preferences!: EnergyPreferences;
 
   @property({ attribute: false })
-  public statsMetadata!: Record<string, StatisticsMetaData>;
+  public statsMetadata?: Record<string, StatisticsMetaData>;
 
   @property({ attribute: false })
   public validationResult?: EnergyPreferencesValidation;
@@ -106,7 +106,7 @@ export class EnergySolarSettings extends LitElement {
                   >${getStatisticLabel(
                     this.hass,
                     source.stat_energy_from,
-                    this.statsMetadata[source.stat_energy_from]
+                    this.statsMetadata?.[source.stat_energy_from]
                   )}</span
                 >
                 ${this.info

src/panels/config/energy/components/ha-energy-validation-result.ts

@@ -32,9 +32,7 @@ class EnergyValidationMessage extends LitElement {
           >
             ${this.hass.localize(
               `ui.panel.config.energy.validation.issues.${issueType}.description`,
-              issueType === "entity_unexpected_unit_price"
+              { currency: this.hass.config.currency }
-                ? { currency: this.hass.config.currency }
-                : undefined
             )}
             ${
               issueType === "recorder_untracked"

src/panels/config/energy/dialogs/dialog-energy-gas-settings.ts

@@ -21,6 +21,7 @@ import "../../../../components/ha-radio";
 import "../../../../components/ha-formfield";
 import "../../../../components/ha-textfield";
 import type { HaRadio } from "../../../../components/ha-radio";
+import { getStatisticMetadata } from "../../../../data/recorder";
 
 @customElement("dialog-energy-gas-settings")
 export class DialogEnergyGasSettings
@@ -35,7 +36,9 @@ export class DialogEnergyGasSettings
 
   @state() private _costs?: "no-costs" | "number" | "entity" | "statistic";
 
-  @state() private _unit?: string;
+  @state() private _pickableUnit?: string;
+
+  @state() private _pickedDisplayUnit?: string;
 
   @state() private _error?: string;
 
@@ -46,6 +49,7 @@ export class DialogEnergyGasSettings
     this._source = params.source
       ? { ...params.source }
       : emptyGasEnergyPreference();
+    this._pickedDisplayUnit = params.metadata?.display_unit_of_measurement;
     this._costs = this._source.entity_energy_price
       ? "entity"
       : this._source.number_energy_price
@@ -58,7 +62,8 @@ export class DialogEnergyGasSettings
   public closeDialog(): void {
     this._params = undefined;
     this._source = undefined;
-    this._unit = undefined;
+    this._pickableUnit = undefined;
+    this._pickedDisplayUnit = undefined;
     this._error = undefined;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
@@ -68,13 +73,16 @@ export class DialogEnergyGasSettings
       return html``;
     }
 
-    const unit =
+    const pickableUnit =
-      this._unit ||
+      this._pickableUnit ||
-      (this._params.unit === undefined
+      (this._params.allowedGasUnitCategory === undefined
-        ? "m³ or kWh"
+        ? "ft³, m³, Wh, kWh or MWh"
-        : this._params.unit === "energy"
+        : this._params.allowedGasUnitCategory === "energy"
-        ? "kWh"
+        ? "Wh, kWh or MWh"
-        : "m³");
+        : "ft³ or m³");
+
+    const externalSource =
+      this._source.stat_cost && this._source.stat_cost.includes(":");
 
     return html`
       <ha-dialog
@@ -90,22 +98,21 @@ export class DialogEnergyGasSettings
 
         <ha-statistic-picker
           .hass=${this.hass}
-          .includeStatisticsUnitOfMeasurement=${this._params.unit === undefined
+          .includeStatisticsUnitOfMeasurement=${this._params
+            .allowedGasUnitCategory === undefined
             ? ENERGY_GAS_UNITS
-            : this._params.unit === "energy"
+            : this._params.allowedGasUnitCategory === "energy"
             ? ENERGY_GAS_ENERGY_UNITS
             : ENERGY_GAS_VOLUME_UNITS}
           .value=${this._source.stat_energy_from}
           .label=${`${this.hass.localize(
             "ui.panel.config.energy.gas.dialog.gas_usage"
           )} (${
-            this._params.unit === undefined
+            this._params.allowedGasUnitCategory === undefined
               ? this.hass.localize(
                   "ui.panel.config.energy.gas.dialog.m3_or_kWh"
                 )
-              : this._params.unit === "energy"
+              : pickableUnit
-              ? "kWh"
-              : "m³"
           })`}
           @value-changed=${this._statisticChanged}
           dialogInitialFocus
@@ -136,6 +143,7 @@ export class DialogEnergyGasSettings
             value="statistic"
             name="costs"
             .checked=${this._costs === "statistic"}
+            .disabled=${externalSource}
             @change=${this._handleCostChanged}
           ></ha-radio>
         </ha-formfield>
@@ -160,6 +168,7 @@ export class DialogEnergyGasSettings
             value="entity"
             name="costs"
             .checked=${this._costs === "entity"}
+            .disabled=${externalSource}
             @change=${this._handleCostChanged}
           ></ha-radio>
         </ha-formfield>
@@ -171,7 +180,7 @@ export class DialogEnergyGasSettings
               .value=${this._source.entity_energy_price}
               .label=${this.hass.localize(
                 `ui.panel.config.energy.gas.dialog.cost_entity_input`,
-                { unit }
+                { unit: this._pickedDisplayUnit || pickableUnit }
               )}
               @value-changed=${this._priceEntityChanged}
             ></ha-entity-picker>`
@@ -192,14 +201,16 @@ export class DialogEnergyGasSettings
           ? html`<ha-textfield
               .label=${this.hass.localize(
                 `ui.panel.config.energy.gas.dialog.cost_number_input`,
-                { unit }
+                { unit: this._pickedDisplayUnit || pickableUnit }
               )}
               class="price-options"
               step=".01"
               type="number"
               .value=${this._source.number_energy_price}
               @change=${this._numberPriceChanged}
-              .suffix=${`${this.hass.config.currency}/${unit}`}
+              .suffix=${`${this.hass.config.currency}/${
+                this._pickedDisplayUnit || pickableUnit
+              }`}
             >
             </ha-textfield>`
           : ""}
@@ -250,23 +261,25 @@ export class DialogEnergyGasSettings
     };
   }
 
-  private _statisticChanged(ev: CustomEvent<{ value: string }>) {
+  private async _statisticChanged(ev: CustomEvent<{ value: string }>) {
     if (ev.detail.value) {
       const entity = this.hass.states[ev.detail.value];
       if (entity?.attributes.unit_of_measurement) {
-        // Wh is normalized to kWh by stats generation
+        this._pickedDisplayUnit = entity.attributes.unit_of_measurement;
-        this._unit =
+      } else {
-          entity.attributes.unit_of_measurement === "Wh"
+        this._pickedDisplayUnit = (
-            ? "kWh"
+          await getStatisticMetadata(this.hass, [ev.detail.value])
-            : entity.attributes.unit_of_measurement;
+        )[0]?.display_unit_of_measurement;
       }
     } else {
-      this._unit = undefined;
+      this._pickedDisplayUnit = undefined;
+    }
+    if (ev.detail.value.includes(":") && this._costs !== "statistic") {
+      this._costs = "no-costs";
     }
     this._source = {
       ...this._source!,
       stat_energy_from: ev.detail.value,
-      entity_energy_from: ev.detail.value,
     };
   }
 

src/panels/config/energy/dialogs/dialog-energy-grid-flow-settings.ts

@@ -269,9 +269,6 @@ export class DialogEnergyGridFlowSettings
       [this._params!.direction === "from"
         ? "stat_energy_from"
         : "stat_energy_to"]: ev.detail.value,
-      [this._params!.direction === "from"
-        ? "entity_energy_from"
-        : "entity_energy_to"]: ev.detail.value,
     };
   }
 

src/panels/config/energy/dialogs/show-dialogs-energy.ts

@@ -9,6 +9,7 @@ import {
   GasSourceTypeEnergyPreference,
   SolarSourceTypeEnergyPreference,
 } from "../../../../data/energy";
+import { StatisticsMetaData } from "../../../../data/recorder";
 
 export interface EnergySettingsGridFlowDialogParams {
   source?:
@@ -45,7 +46,8 @@ export interface EnergySettingsBatteryDialogParams {
 
 export interface EnergySettingsGasDialogParams {
   source?: GasSourceTypeEnergyPreference;
-  unit?: EnergyGasUnit;
+  allowedGasUnitCategory?: EnergyGasUnit;
+  metadata?: StatisticsMetaData;
   saveCallback: (source: GasSourceTypeEnergyPreference) => Promise<void>;
 }
 

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

@@ -13,7 +13,7 @@ import {
 import {
   getStatisticMetadata,
   StatisticsMetaData,
-} from "../../../data/history";
+} from "../../../data/recorder";
 import "../../../layouts/hass-loading-screen";
 import "../../../layouts/hass-subpage";
 import { haStyle } from "../../../resources/styles";
@@ -90,37 +90,37 @@ class HaConfigEnergy extends LitElement {
           <ha-energy-grid-settings
             .hass=${this.hass}
             .preferences=${this._preferences!}
-            .statsMetadata=${this._statsMetadata!}
+            .statsMetadata=${this._statsMetadata}
-            .validationResult=${this._validationResult!}
+            .validationResult=${this._validationResult}
             @value-changed=${this._prefsChanged}
           ></ha-energy-grid-settings>
           <ha-energy-solar-settings
             .hass=${this.hass}
             .preferences=${this._preferences!}
-            .statsMetadata=${this._statsMetadata!}
+            .statsMetadata=${this._statsMetadata}
-            .validationResult=${this._validationResult!}
+            .validationResult=${this._validationResult}
             .info=${this._info}
             @value-changed=${this._prefsChanged}
           ></ha-energy-solar-settings>
           <ha-energy-battery-settings
             .hass=${this.hass}
             .preferences=${this._preferences!}
-            .statsMetadata=${this._statsMetadata!}
+            .statsMetadata=${this._statsMetadata}
-            .validationResult=${this._validationResult!}
+            .validationResult=${this._validationResult}
             @value-changed=${this._prefsChanged}
           ></ha-energy-battery-settings>
           <ha-energy-gas-settings
             .hass=${this.hass}
             .preferences=${this._preferences!}
-            .statsMetadata=${this._statsMetadata!}
+            .statsMetadata=${this._statsMetadata}
-            .validationResult=${this._validationResult!}
+            .validationResult=${this._validationResult}
             @value-changed=${this._prefsChanged}
           ></ha-energy-gas-settings>
           <ha-energy-device-settings
             .hass=${this.hass}
             .preferences=${this._preferences!}
-            .statsMetadata=${this._statsMetadata!}
+            .statsMetadata=${this._statsMetadata}
-            .validationResult=${this._validationResult!}
+            .validationResult=${this._validationResult}
             @value-changed=${this._prefsChanged}
           ></ha-energy-device-settings>
         </div>