use enter_password

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

.eslintrc.json

@@ -28,9 +28,7 @@
     "__BUILD__": false,
     "__VERSION__": false,
     "__STATIC_PATH__": false,
-    "Polymer": true,
-    "webkitSpeechRecognition": false,
-    "ResizeObserver": false
+    "Polymer": true
   },
   "env": {
     "browser": true,
@@ -106,5 +104,6 @@
     "lit/attribute-value-entities": 0
   },
   "plugins": ["disable", "import", "lit", "prettier", "@typescript-eslint"],
-  "processor": "disable/disable"
+  "processor": "disable/disable",
+  "ignorePatterns": ["src/resources/lit-virtualizer/*"]
 }

.gitignore

@@ -1,10 +1,17 @@
+.DS_Store
+.reify-cache
+
+# build
 build
 build-translations/*
+hass_frontend/*
+dist
+
+# yarn
+.yarn
+yarn-error.log
 node_modules/*
 npm-debug.log
-.DS_Store
-hass_frontend/*
-.reify-cache
 
 # Python stuff
 *.py[cod]
@@ -14,11 +21,8 @@ hass_frontend/*
 # venv stuff
 pyvenv.cfg
 pip-selfcheck.json
-venv
+venv/*
 .venv
-lib
-bin
-dist
 
 # vscode
 .vscode/*
@@ -31,9 +35,8 @@ src/cast/dev_const.ts
 
 # Secrets
 .lokalise_token
-yarn-error.log
 
-#asdf
+# asdf
 .tool-versions
 
 # Home Assistant config

.mocharc.cjs

@@ -0,0 +1,4 @@
+module.exports = {
+  require: "test-mocha/testconf.js",
+  timeout: 10000,
+};

build-scripts/bundle.js

@@ -52,6 +52,7 @@ module.exports.terserOptions = (latestBuild) => ({
 
 module.exports.babelOptions = ({ latestBuild }) => ({
   babelrc: false,
+  compact: false,
   presets: [
     !latestBuild && [
       "@babel/preset-env",
@@ -79,12 +80,6 @@ module.exports.babelOptions = ({ latestBuild }) => ({
   ].filter(Boolean),
 });
 
-// Are already ES5, cause warnings when babelified.
-module.exports.babelExclude = () => [
-  require.resolve("@mdi/js/mdi.js"),
-  require.resolve("hls.js"),
-];
-
 const outputPath = (outputRoot, latestBuild) =>
   path.resolve(outputRoot, latestBuild ? "frontend_latest" : "frontend_es5");
 

build-scripts/rollup.js

@@ -52,16 +52,11 @@ const createRollupConfig = ({
         browser: true,
         rootDir: paths.polymer_dir,
       }),
-      commonjs({
-        namedExports: {
-          "js-yaml": ["safeDump", "safeLoad"],
-        },
-      }),
+      commonjs(),
       json(),
       babel({
         ...bundle.babelOptions({ latestBuild }),
         extensions,
-        exclude: bundle.babelExclude(),
         babelHelpers: isWDS ? "inline" : "bundled",
       }),
       string({

build-scripts/webpack.js

@@ -47,7 +47,6 @@ const createWebpackConfig = ({
       rules: [
         {
           test: /\.m?js$|\.ts$/,
-          exclude: bundle.babelExclude(),
           use: {
             loader: "babel-loader",
             options: bundle.babelOptions({ latestBuild }),
@@ -116,8 +115,9 @@ const createWebpackConfig = ({
       // We need to change the import of the polyfill for EventTarget, so we replace the polyfill file with our customized one
       new webpack.NormalModuleReplacementPlugin(
         new RegExp(
-          require.resolve(
-            "@lit-labs/virtualizer/lib/uni-virtualizer/lib/polyfillLoaders/EventTarget.js"
+          path.resolve(
+            paths.polymer_dir,
+            "src/resources/lit-virtualizer/lib/uni-virtualizer/lib/polyfillLoaders/EventTarget.js"
           )
         ),
         path.resolve(paths.polymer_dir, "src/resources/EventTarget-ponyfill.js")

gallery/src/components/demo-card.js

@@ -1,7 +1,7 @@
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
-import { safeLoad } from "js-yaml";
+import { load } from "js-yaml";
 import { createCardElement } from "../../../src/panels/lovelace/create-element/create-card-element";
 
 class DemoCard extends PolymerElement {
@@ -80,7 +80,7 @@ class DemoCard extends PolymerElement {
       card.removeChild(card.lastChild);
     }
 
-    const el = this._createCardElement(safeLoad(config.config)[0]);
+    const el = this._createCardElement(load(config.config)[0]);
     card.appendChild(el);
     this._getSize(el);
   }

gallery/src/demos/demo-automation-describe-action.ts

@@ -1,4 +1,4 @@
-import { safeDump } from "js-yaml";
+import { dump } from "js-yaml";
 import { html, css, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import "../../../src/components/ha-card";
@@ -56,7 +56,7 @@ export class DemoAutomationDescribeAction extends LitElement {
           (conf) => html`
             <div class="action">
               <span>${describeAction(this.hass, conf as any)}</span>
-              <pre>${safeDump(conf)}</pre>
+              <pre>${dump(conf)}</pre>
             </div>
           `
         )}

gallery/src/demos/demo-automation-describe-condition.ts

@@ -1,4 +1,4 @@
-import { safeDump } from "js-yaml";
+import { dump } from "js-yaml";
 import { html, css, LitElement, TemplateResult } from "lit";
 import { customElement } from "lit/decorators";
 import "../../../src/components/ha-card";
@@ -26,7 +26,7 @@ export class DemoAutomationDescribeCondition extends LitElement {
           (conf) => html`
             <div class="condition">
               <span>${describeCondition(conf as any)}</span>
-              <pre>${safeDump(conf)}</pre>
+              <pre>${dump(conf)}</pre>
             </div>
           `
         )}

gallery/src/demos/demo-automation-describe-trigger.ts

@@ -1,4 +1,4 @@
-import { safeDump } from "js-yaml";
+import { dump } from "js-yaml";
 import { html, css, LitElement, TemplateResult } from "lit";
 import { customElement } from "lit/decorators";
 import "../../../src/components/ha-card";
@@ -29,7 +29,7 @@ export class DemoAutomationDescribeTrigger extends LitElement {
           (conf) => html`
             <div class="trigger">
               <span>${describeTrigger(conf as any)}</span>
-              <pre>${safeDump(conf)}</pre>
+              <pre>${dump(conf)}</pre>
             </div>
           `
         )}

gallery/src/demos/demo-integration-card.ts

@@ -28,10 +28,11 @@ const createConfigEntry = (
   title,
   source: "zeroconf",
   state: "loaded",
-  connection_class: "local_push",
   supports_options: false,
   supports_unload: true,
   disabled_by: null,
+  pref_disable_new_entities: false,
+  pref_disable_polling: false,
   reason: null,
   ...override,
 });
@@ -64,6 +65,9 @@ const configPanelEntry = createConfigEntry("Config Panel", {
 const optionsFlowEntry = createConfigEntry("Options Flow", {
   supports_options: true,
 });
+const disabledPollingEntry = createConfigEntry("Disabled Polling", {
+  pref_disable_polling: true,
+});
 const setupErrorEntry = createConfigEntry("Setup Error", {
   state: "setup_error",
 });
@@ -136,6 +140,7 @@ const configEntries: Array<{
   { items: [loadedEntry] },
   { items: [configPanelEntry] },
   { items: [optionsFlowEntry] },
+  { items: [disabledPollingEntry] },
   { items: [nameAsDomainEntry] },
   { items: [longNameEntry] },
   { items: [longNonBreakingNameEntry] },

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

@@ -3,6 +3,7 @@ import { ActionDetail } from "@material/mwc-list";
 import "@material/mwc-list/mwc-list-item";
 import { mdiDotsVertical } from "@mdi/js";
 import "@polymer/iron-autogrow-textarea/iron-autogrow-textarea";
+import { DEFAULT_SCHEMA, Type } from "js-yaml";
 import {
   css,
   CSSResultGroup,
@@ -11,7 +12,7 @@ import {
   PropertyValues,
   TemplateResult,
 } from "lit";
-import { customElement, property, state, query } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
 import "../../../../src/components/buttons/ha-progress-button";
@@ -27,6 +28,7 @@ import {
   HassioAddonDetails,
   HassioAddonSetOptionParams,
   setHassioAddonOption,
+  validateHassioAddonOption,
 } from "../../../../src/data/hassio/addon";
 import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
 import { Supervisor } from "../../../../src/data/supervisor/supervisor";
@@ -38,6 +40,13 @@ import { hassioStyle } from "../../resources/hassio-style";
 
 const SUPPORTED_UI_TYPES = ["string", "select", "boolean", "integer", "float"];
 
+const ADDON_YAML_SCHEMA = DEFAULT_SCHEMA.extend([
+  new Type("!secret", {
+    kind: "scalar",
+    construct: (data) => `!secret ${data}`,
+  }),
+]);
+
 @customElement("hassio-addon-config")
 class HassioAddonConfig extends LitElement {
   @property({ attribute: false }) public addon!: HassioAddonDetails;
@@ -125,6 +134,7 @@ class HassioAddonConfig extends LitElement {
               ></ha-form>`
             : html` <ha-yaml-editor
                 @value-changed=${this._configChanged}
+                .schema=${ADDON_YAML_SCHEMA}
               ></ha-yaml-editor>`}
           ${this._error ? html` <div class="errors">${this._error}</div> ` : ""}
           ${!this._yamlMode ||
@@ -269,6 +279,14 @@ class HassioAddonConfig extends LitElement {
     this._error = undefined;
 
     try {
+      const validation = await validateHassioAddonOption(
+        this.hass,
+        this.addon.slug,
+        this._editor?.value
+      );
+      if (!validation.valid) {
+        throw Error(validation.message);
+      }
       await setHassioAddonOption(this.hass, this.addon.slug, {
         options: this._yamlMode ? this._editor?.value : this._options,
       });

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

@@ -50,6 +50,10 @@ import {
   fetchHassioStats,
   HassioStats,
 } from "../../../../src/data/hassio/common";
+import {
+  fetchHassioSnapshots,
+  HassioSnapshot,
+} from "../../../../src/data/hassio/snapshot";
 import { StoreAddon } from "../../../../src/data/supervisor/store";
 import { Supervisor } from "../../../../src/data/supervisor/supervisor";
 import {
@@ -61,6 +65,7 @@ import { HomeAssistant } from "../../../../src/types";
 import { bytesToString } from "../../../../src/util/bytes-to-string";
 import "../../components/hassio-card-content";
 import "../../components/supervisor-metric";
+import { showHassioAddonRestoreDialog } from "../../dialogs/addon/show-dialog-hassio-addon-restore";
 import { showHassioMarkdownDialog } from "../../dialogs/markdown/show-dialog-hassio-markdown";
 import { showDialogSupervisorUpdate } from "../../dialogs/update/show-dialog-update";
 import { hassioStyle } from "../../resources/hassio-style";
@@ -82,6 +87,8 @@ class HassioAddonInfo extends LitElement {
 
   @property({ attribute: false }) public supervisor!: Supervisor;
 
+  @property({ attribute: false }) public snapshots?: HassioSnapshot[];
+
   @state() private _metrics?: HassioStats;
 
   @state() private _error?: string;
@@ -626,6 +633,11 @@ class HassioAddonInfo extends LitElement {
                     ${this.supervisor.localize("addon.dashboard.install")}
                   </ha-progress-button>
                 `}
+            ${this.snapshots?.length
+              ? html`<mwc-button @click=${this._restoreClicked}>
+                  ${this.supervisor.localize("addon.dashboard.restore")}
+                </mwc-button>`
+              : ""}
           </div>
           <div>
             ${this.addon.version
@@ -698,6 +710,11 @@ class HassioAddonInfo extends LitElement {
   }
 
   private async _loadData(): Promise<void> {
+    const snapshots = await fetchHassioSnapshots(this.hass);
+    this.snapshots = snapshots.filter((snapshot) =>
+      snapshot.content.addons.includes(this.addon.slug)
+    );
+
     if (this.addon.state === "started") {
       this._metrics = await fetchHassioStats(
         this.hass,
@@ -1000,6 +1017,22 @@ class HassioAddonInfo extends LitElement {
     fireEvent(this, "hass-api-called", eventdata);
   }
 
+  private async _restoreClicked(): Promise<void> {
+    showHassioAddonRestoreDialog(this, {
+      supervisor: this.supervisor,
+      snapshots: this.snapshots || [],
+      addon: this.addon,
+      onRestore: () => {
+        const eventdata = {
+          success: true,
+          response: undefined,
+          path: "update",
+        };
+        fireEvent(this, "hass-api-called", eventdata);
+      },
+    });
+  }
+
   private async _startClicked(ev: CustomEvent): Promise<void> {
     const button = ev.currentTarget as any;
     button.progress = true;

hassio/src/components/supervisor-metric.ts

@@ -64,6 +64,7 @@ class SupervisorMetric extends LitElement {
       .value {
         width: 48px;
         padding-right: 4px;
+        flex-shrink: 0;
       }
     `;
   }

hassio/src/components/supervisor-snapshot-content.ts

@@ -44,6 +44,9 @@ const _computeFolders = (folders): CheckboxItem[] => {
   if (folders.includes("share")) {
     list.push({ slug: "share", name: "Share", checked: false });
   }
+  if (folders.includes("media")) {
+    list.push({ slug: "media", name: "Media", checked: false });
+  }
   if (folders.includes("addons/local")) {
     list.push({ slug: "addons/local", name: "Local add-ons", checked: false });
   }

hassio/src/dialogs/addon/dialog-hassio-addon-restore.ts

@@ -0,0 +1,190 @@
+import "@material/mwc-button/mwc-button";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import relativeTime from "../../../../src/common/datetime/relative_time";
+import { fireEvent } from "../../../../src/common/dom/fire_event";
+import "../../../../src/common/search/search-input";
+import { compare } from "../../../../src/common/string/compare";
+import { nextRender } from "../../../../src/common/util/render-status";
+import "../../../../src/components/ha-circular-progress";
+import { createCloseHeading } from "../../../../src/components/ha-dialog";
+import "../../../../src/components/ha-expansion-panel";
+import "../../../../src/components/ha-settings-row";
+import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
+import {
+  fetchHassioSnapshotInfo,
+  HassioPartialSnapshotCreateParams,
+  HassioSnapshotDetail,
+  supervisorRestorePartialSnapshot,
+} from "../../../../src/data/hassio/snapshot";
+import {
+  showAlertDialog,
+  showPromptDialog,
+} from "../../../../src/dialogs/generic/show-dialog-box";
+import { haStyle, haStyleDialog } from "../../../../src/resources/styles";
+import { HomeAssistant } from "../../../../src/types";
+import { HassioAddonRestoreDialogParams } from "./show-dialog-hassio-addon-restore";
+
+@customElement("dialog-hassio-addon-restore")
+class HassioAddonRestoreDialog extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @state() private _dialogParams?: HassioAddonRestoreDialogParams;
+
+  @state() private _snapshots?: HassioSnapshotDetail[];
+
+  @state() private _restoring = false;
+
+  public showDialog(params: HassioAddonRestoreDialogParams) {
+    this._dialogParams = params;
+    this._restoring = false;
+    Promise.all(
+      params.snapshots.map((snapshot) =>
+        fetchHassioSnapshotInfo(this.hass, snapshot.slug)
+      )
+    ).then((data) => {
+      this._snapshots = data.sort((a, b) => compare(b.date, a.date));
+    });
+  }
+
+  public closeDialog() {
+    this._dialogParams = undefined;
+    this._snapshots = undefined;
+    this._restoring = false;
+    fireEvent(this, "dialog-closed", { dialog: this.localName });
+  }
+
+  protected render(): TemplateResult {
+    if (!this._dialogParams || (!this._snapshots && !this._restoring)) {
+      return html``;
+    }
+
+    const snapshotCount = this._snapshots?.length || 0;
+
+    return html`
+      <ha-dialog
+        open
+        hideActions
+        @closed=${this.closeDialog}
+        .heading=${createCloseHeading(
+          this.hass,
+          this._dialogParams.supervisor.localize("dialog.addon_restore.title", {
+            name: this._dialogParams.addon.name,
+          })
+        )}
+      >
+        ${this._restoring
+          ? html`<div class="restore">
+              <ha-circular-progress size="large" active></ha-circular-progress>
+              <span
+                >${this._dialogParams.supervisor.localize(
+                  "dialog.addon_restore.restore_in_progress"
+                )}
+              </span>
+            </div>`
+          : html`${this._dialogParams.supervisor.localize(
+              "dialog.addon_restore.description",
+              {
+                name: this._dialogParams.addon.name,
+                count: snapshotCount,
+              }
+            )}
+            ${this._snapshots?.map(
+              (snapshot) =>
+                html`<ha-settings-row three-lines>
+                  <span slot="heading">
+                    ${snapshot.name || snapshot.slug}
+                  </span>
+                  <span slot="description">
+                    <div>
+                      ${this._dialogParams!.supervisor.localize(
+                        "dialog.addon_restore.version",
+                        {
+                          version:
+                            snapshot.addons.find(
+                              (addon) =>
+                                addon.slug === this._dialogParams?.addon.slug
+                            )?.version ||
+                            this._dialogParams!.supervisor.localize(
+                              "dialog.addon_restore.no_version"
+                            ),
+                        }
+                      )}
+                    </div>
+                    ${relativeTime(new Date(snapshot.date), this.hass.localize)}
+                  </span>
+                  <mwc-button
+                    .snapshot=${snapshot}
+                    @click=${this._restoreClicked}
+                  >
+                    ${this._dialogParams!.supervisor.localize(
+                      "dialog.addon_restore.restore"
+                    )}
+                  </mwc-button>
+                </ha-settings-row>`
+            )}`}
+      </ha-dialog>
+    `;
+  }
+
+  private async _restoreClicked(ev: CustomEvent) {
+    let password: string | null = null;
+    const snapshot: HassioSnapshotDetail = (ev.currentTarget as any).snapshot;
+    if (snapshot.protected) {
+      password = await showPromptDialog(this, {
+        text: this._dialogParams?.supervisor.localize(
+          "dialog.addon_restore.protected"
+        ),
+        inputLabel: this._dialogParams?.supervisor.localize(
+          "dialog.addon_restore.password"
+        ),
+        inputType: "password",
+      });
+      await nextRender();
+      if (!password) {
+        return;
+      }
+    }
+    this._restoring = true;
+
+    const data: HassioPartialSnapshotCreateParams = {
+      addons: [this._dialogParams!.addon.slug],
+    };
+    if (password) {
+      data.password = password;
+    }
+
+    try {
+      await supervisorRestorePartialSnapshot(this.hass, snapshot.slug, data);
+    } catch (err) {
+      await showAlertDialog(this, {
+        text: extractApiErrorMessage(err),
+      });
+      await nextRender();
+      return;
+    }
+
+    this._dialogParams?.onRestore();
+    this.closeDialog();
+  }
+
+  static get styles(): CSSResultGroup {
+    return [
+      haStyle,
+      haStyleDialog,
+      css`
+        .restore {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "dialog-hassio-addon-restore": HassioAddonRestoreDialog;
+  }
+}

hassio/src/dialogs/addon/show-dialog-hassio-addon-restore.ts

@@ -0,0 +1,22 @@
+import { fireEvent } from "../../../../src/common/dom/fire_event";
+import { HassioAddonDetails } from "../../../../src/data/hassio/addon";
+import { HassioSnapshot } from "../../../../src/data/hassio/snapshot";
+import { Supervisor } from "../../../../src/data/supervisor/supervisor";
+
+export interface HassioAddonRestoreDialogParams {
+  supervisor: Supervisor;
+  snapshots: HassioSnapshot[];
+  addon: HassioAddonDetails;
+  onRestore: () => void;
+}
+
+export const showHassioAddonRestoreDialog = (
+  element: HTMLElement,
+  dialogParams: HassioAddonRestoreDialogParams
+): void => {
+  fireEvent(element, "show-dialog", {
+    dialogTag: "dialog-hassio-addon-restore",
+    dialogImport: () => import("./dialog-hassio-addon-restore"),
+    dialogParams,
+  });
+};

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

@@ -0,0 +1,194 @@
+import { mdiClose } from "@mdi/js";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import memoizeOne from "memoize-one";
+import { fireEvent } from "../../../../src/common/dom/fire_event";
+import "../../../../src/common/search/search-input";
+import { compare } from "../../../../src/common/string/compare";
+import "../../../../src/components/ha-dialog";
+import "../../../../src/components/ha-expansion-panel";
+import { HassioHardwareInfo } from "../../../../src/data/hassio/hardware";
+import { dump } from "../../../../src/resources/js-yaml-dump";
+import { haStyle, haStyleDialog } from "../../../../src/resources/styles";
+import { HomeAssistant } from "../../../../src/types";
+import { HassioHardwareDialogParams } from "./show-dialog-hassio-hardware";
+
+const _filterDevices = memoizeOne(
+  (showAdvanced: boolean, hardware: HassioHardwareInfo, filter: string) =>
+    hardware.devices
+      .filter(
+        (device) =>
+          (showAdvanced ||
+            ["tty", "gpio", "input"].includes(device.subsystem)) &&
+          (device.by_id?.toLowerCase().includes(filter) ||
+            device.name.toLowerCase().includes(filter) ||
+            device.dev_path.toLocaleLowerCase().includes(filter) ||
+            JSON.stringify(device.attributes)
+              .toLocaleLowerCase()
+              .includes(filter))
+      )
+      .sort((a, b) => compare(a.name, b.name))
+);
+
+@customElement("dialog-hassio-hardware")
+class HassioHardwareDialog extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @state() private _dialogParams?: HassioHardwareDialogParams;
+
+  @state() private _filter?: string;
+
+  public showDialog(params: HassioHardwareDialogParams) {
+    this._dialogParams = params;
+  }
+
+  public closeDialog() {
+    this._dialogParams = undefined;
+    fireEvent(this, "dialog-closed", { dialog: this.localName });
+  }
+
+  protected render(): TemplateResult {
+    if (!this._dialogParams) {
+      return html``;
+    }
+
+    const devices = _filterDevices(
+      this.hass.userData?.showAdvanced || false,
+      this._dialogParams.hardware,
+      (this._filter || "").toLowerCase()
+    );
+
+    return html`
+      <ha-dialog
+        open
+        scrimClickAction
+        hideActions
+        @closed=${this.closeDialog}
+        .heading=${true}
+      >
+        <div class="header" slot="heading">
+          <h2>
+            ${this._dialogParams.supervisor.localize("dialog.hardware.title")}
+          </h2>
+          <mwc-icon-button dialogAction="close">
+            <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
+          </mwc-icon-button>
+          <search-input
+            autofocus
+            no-label-float
+            .filter=${this._filter}
+            @value-changed=${this._handleSearchChange}
+            .label=${this._dialogParams.supervisor.localize(
+              "dialog.hardware.search"
+            )}
+          >
+          </search-input>
+        </div>
+
+        ${devices.map(
+          (device) =>
+            html`<ha-expansion-panel
+              .header=${device.name}
+              .secondary=${device.by_id || undefined}
+              outlined
+            >
+              <div class="device-property">
+                <span>
+                  ${this._dialogParams!.supervisor.localize(
+                    "dialog.hardware.subsystem"
+                  )}:
+                </span>
+                <span>${device.subsystem}</span>
+              </div>
+              <div class="device-property">
+                <span>
+                  ${this._dialogParams!.supervisor.localize(
+                    "dialog.hardware.device_path"
+                  )}:
+                </span>
+                <code>${device.dev_path}</code>
+              </div>
+              ${device.by_id
+                ? html` <div class="device-property">
+                    <span>
+                      ${this._dialogParams!.supervisor.localize(
+                        "dialog.hardware.id"
+                      )}:
+                    </span>
+                    <code>${device.by_id}</code>
+                  </div>`
+                : ""}
+              <div class="attributes">
+                <span>
+                  ${this._dialogParams!.supervisor.localize(
+                    "dialog.hardware.attributes"
+                  )}:
+                </span>
+                <pre>${dump(device.attributes, { indent: 2 })}</pre>
+              </div>
+            </ha-expansion-panel>`
+        )}
+      </ha-dialog>
+    `;
+  }
+
+  private _handleSearchChange(ev: CustomEvent) {
+    this._filter = ev.detail.value;
+  }
+
+  static get styles(): CSSResultGroup {
+    return [
+      haStyle,
+      haStyleDialog,
+      css`
+        mwc-icon-button {
+          position: absolute;
+          right: 16px;
+          top: 10px;
+          text-decoration: none;
+          color: var(--primary-text-color);
+        }
+        h2 {
+          margin: 18px 42px 0 18px;
+          color: var(--primary-text-color);
+        }
+
+        ha-expansion-panel {
+          margin: 4px 0;
+        }
+        pre,
+        code {
+          background-color: var(--markdown-code-background-color, none);
+          border-radius: 3px;
+        }
+        pre {
+          padding: 16px;
+          overflow: auto;
+          line-height: 1.45;
+          font-family: var(--code-font-family, monospace);
+        }
+        code {
+          font-size: 85%;
+          padding: 0.2em 0.4em;
+        }
+        search-input {
+          margin: 0 16px;
+          display: block;
+        }
+        .device-property {
+          display: flex;
+          justify-content: space-between;
+        }
+        .attributes {
+          margin-top: 12px;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "dialog-hassio-hardware": HassioHardwareDialog;
+  }
+}

hassio/src/dialogs/hardware/show-dialog-hassio-hardware.ts

@@ -0,0 +1,19 @@
+import { fireEvent } from "../../../../src/common/dom/fire_event";
+import { HassioHardwareInfo } from "../../../../src/data/hassio/hardware";
+import { Supervisor } from "../../../../src/data/supervisor/supervisor";
+
+export interface HassioHardwareDialogParams {
+  supervisor: Supervisor;
+  hardware: HassioHardwareInfo;
+}
+
+export const showHassioHardwareDialog = (
+  element: HTMLElement,
+  dialogParams: HassioHardwareDialogParams
+): void => {
+  fireEvent(element, "show-dialog", {
+    dialogTag: "dialog-hassio-hardware",
+    dialogImport: () => import("./dialog-hassio-hardware"),
+    dialogParams,
+  });
+};

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

@@ -45,7 +45,7 @@ class HassioRegistriesDialog extends LitElement {
     return html`
       <ha-dialog
         .open=${this._opened}
-        @closing=${this.closeDialog}
+        @closed=${this.closeDialog}
         scrimClickAction
         escapeKeyAction
         .heading=${createCloseHeading(
@@ -244,9 +244,6 @@ class HassioRegistriesDialog extends LitElement {
         mwc-list-item span[slot="secondary"] {
           color: var(--secondary-text-color);
         }
-        ha-paper-dropdown-menu {
-          display: block;
-        }
       `,
     ];
   }

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

@@ -67,7 +67,7 @@ class HassioRepositoriesDialog extends LitElement {
     return html`
       <ha-dialog
         .open=${this._opened}
-        @closing=${this.closeDialog}
+        @closed=${this.closeDialog}
         scrimClickAction
         escapeKeyAction
         .heading=${createCloseHeading(
@@ -150,9 +150,6 @@ class HassioRepositoriesDialog extends LitElement {
         mwc-button {
           margin-left: 8px;
         }
-        ha-paper-dropdown-menu {
-          display: block;
-        }
         ha-circular-progress {
           display: block;
           margin: 32px;

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

@@ -48,7 +48,8 @@ class HassioCreateSnapshotDialog extends LitElement {
     return html`
       <ha-dialog
         open
-        @closing=${this.closeDialog}
+        scrimClickAction
+        @closed=${this.closeDialog}
         .heading=${createCloseHeading(
           this.hass,
           this._dialogParams.supervisor.localize("snapshot.create_snapshot")

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

@@ -4,6 +4,7 @@ import { mdiDotsVertical } from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
+import { slugify } from "../../../../src/common/string/slugify";
 import "../../../../src/components/buttons/ha-progress-button";
 import "../../../../src/components/ha-button-menu";
 import { createCloseHeading } from "../../../../src/components/ha-dialog";
@@ -21,6 +22,7 @@ import {
 import { HassDialog } from "../../../../src/dialogs/make-dialog-manager";
 import { haStyle, haStyleDialog } from "../../../../src/resources/styles";
 import { HomeAssistant } from "../../../../src/types";
+import { fileDownload } from "../../../../src/util/file_download";
 import "../../components/supervisor-snapshot-content";
 import type { SupervisorSnapshotContent } from "../../components/supervisor-snapshot-content";
 import { HassioSnapshotDialogParams } from "./show-dialog-hassio-snapshot";
@@ -63,7 +65,8 @@ class HassioSnapshotDialog
     return html`
       <ha-dialog
         open
-        @closing=${this.closeDialog}
+        scrimClickAction
+        @closed=${this.closeDialog}
         .heading=${createCloseHeading(this.hass, this._computeName)}
       >
         ${this._restoringSnapshot
@@ -88,7 +91,7 @@ class HassioSnapshotDialog
           fixed
           slot="primaryAction"
           @action=${this._handleMenuAction}
-          @closing=${(ev: Event) => ev.stopPropagation()}
+          @closed=${(ev: Event) => ev.stopPropagation()}
         >
           <mwc-icon-button slot="trigger" alt="menu">
             <ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon>
@@ -286,13 +289,11 @@ class HassioSnapshotDialog
       }
     }
 
-    const name = this._computeName.replace(/[^a-z0-9]+/gi, "_");
-    const a = document.createElement("a");
-    a.href = signedPath.path;
-    a.download = `Hass_io_${name}.tar`;
-    this.shadowRoot!.appendChild(a);
-    a.click();
-    this.shadowRoot!.removeChild(a);
+    fileDownload(
+      this,
+      signedPath.path,
+      `home_assistant_snapshot_${slugify(this._computeName)}.tar`
+    );
   }
 
   private get _computeName() {

hassio/src/hassio-main.ts

@@ -103,27 +103,25 @@ export class HassioMain extends SupervisorBaseElement {
 
   private _applyTheme() {
     let themeName: string;
-    let themeSettings:
-      | Partial<HomeAssistant["selectedThemeSettings"]>
-      | undefined;
+    let themeSettings: Partial<HomeAssistant["selectedTheme"]> | undefined;
 
     if (atLeastVersion(this.hass.config.version, 0, 114)) {
       themeName =
-        this.hass.selectedThemeSettings?.theme ||
+        this.hass.selectedTheme?.theme ||
         (this.hass.themes.darkMode && this.hass.themes.default_dark_theme
           ? this.hass.themes.default_dark_theme!
           : this.hass.themes.default_theme);
 
-      themeSettings = this.hass.selectedThemeSettings;
+      themeSettings = this.hass.selectedTheme;
       if (themeSettings?.dark === undefined) {
         themeSettings = {
-          ...this.hass.selectedThemeSettings,
+          ...this.hass.selectedTheme,
           dark: this.hass.themes.darkMode,
         };
       }
     } else {
       themeName =
-        ((this.hass.selectedThemeSettings as unknown) as string) ||
+        ((this.hass.selectedTheme as unknown) as string) ||
         this.hass.themes.default_theme;
     }
 

hassio/src/ingress-view/hassio-ingress-view.ts

@@ -97,16 +97,23 @@ class HassioIngressView extends LitElement {
             title: requestedAddon,
           });
           await nextRender();
-          history.back();
+          navigate("/hassio/store", { replace: true });
           return;
         }
-        if (!addonInfo.ingress) {
+        if (!addonInfo.version) {
+          await showAlertDialog(this, {
+            text: this.supervisor.localize("my.error_addon_not_installed"),
+            title: addonInfo.name,
+          });
+          await nextRender();
+          navigate(`/hassio/addon/${addonInfo.slug}/info`, { replace: true });
+        } else if (!addonInfo.ingress) {
           await showAlertDialog(this, {
             text: this.supervisor.localize("my.error_addon_no_ingress"),
             title: addonInfo.name,
           });
           await nextRender();
-          history.back();
+          navigate(`/hassio/addon/${addonInfo.slug}/info`, { replace: true });
         } else {
           navigate(`/hassio/ingress/${addonInfo.slug}`, { replace: true });
         }

hassio/src/snapshots/hassio-snapshots.ts

@@ -1,15 +1,17 @@
 import "@material/mwc-button";
 import { ActionDetail } from "@material/mwc-list";
 import "@material/mwc-list/mwc-list-item";
-import { mdiDotsVertical, mdiPlus } from "@mdi/js";
+import { mdiDelete, mdiDotsVertical, mdiPlus } from "@mdi/js";
 import {
+  css,
   CSSResultGroup,
   html,
   LitElement,
   PropertyValues,
   TemplateResult,
 } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
 import memoizeOne from "memoize-one";
 import { atLeastVersion } from "../../../src/common/config/version";
 import relativeTime from "../../../src/common/datetime/relative_time";
@@ -17,18 +19,25 @@ import { HASSDomEvent } from "../../../src/common/dom/fire_event";
 import {
   DataTableColumnContainer,
   RowClickedEvent,
+  SelectionChangedEvent,
 } from "../../../src/components/data-table/ha-data-table";
 import "../../../src/components/ha-button-menu";
 import "../../../src/components/ha-fab";
+import { extractApiErrorMessage } from "../../../src/data/hassio/common";
 import {
   fetchHassioSnapshots,
   friendlyFolderName,
   HassioSnapshot,
   reloadHassioSnapshots,
+  removeSnapshot,
 } from "../../../src/data/hassio/snapshot";
 import { Supervisor } from "../../../src/data/supervisor/supervisor";
-import { showAlertDialog } from "../../../src/dialogs/generic/show-dialog-box";
+import {
+  showAlertDialog,
+  showConfirmationDialog,
+} from "../../../src/dialogs/generic/show-dialog-box";
 import "../../../src/layouts/hass-tabs-subpage-data-table";
+import type { HaTabsSubpageDataTable } from "../../../src/layouts/hass-tabs-subpage-data-table";
 import { haStyle } from "../../../src/resources/styles";
 import { HomeAssistant, Route } from "../../../src/types";
 import { showHassioCreateSnapshotDialog } from "../dialogs/snapshot/show-dialog-hassio-create-snapshot";
@@ -49,10 +58,15 @@ export class HassioSnapshots extends LitElement {
 
   @property({ type: Boolean }) public isWide!: boolean;
 
-  private _firstUpdatedCalled = false;
+  @state() private _selectedSnapshots: string[] = [];
 
   @state() private _snapshots?: HassioSnapshot[] = [];
 
+  @query("hass-tabs-subpage-data-table", true)
+  private _dataTable!: HaTabsSubpageDataTable;
+
+  private _firstUpdatedCalled = false;
+
   public connectedCallback(): void {
     super.connectedCallback();
     if (this.hass && this._firstUpdatedCalled) {
@@ -153,7 +167,9 @@ export class HassioSnapshots extends LitElement {
         .data=${this._snapshotData(this._snapshots || [])}
         id="slug"
         @row-click=${this._handleRowClicked}
+        @selection-changed=${this._handleSelectionChanged}
         clickable
+        selectable
         hasFab
         main-page
         supervisor
@@ -176,6 +192,45 @@ export class HassioSnapshots extends LitElement {
             : ""}
         </ha-button-menu>
 
+        ${this._selectedSnapshots.length
+          ? html`<div
+              class=${classMap({
+                "header-toolbar": this.narrow,
+                "table-header": !this.narrow,
+              })}
+              slot="header"
+            >
+              <p class="selected-txt">
+                ${this.supervisor.localize("snapshot.selected", {
+                  number: this._selectedSnapshots.length,
+                })}
+              </p>
+              <div class="header-btns">
+                ${!this.narrow
+                  ? html`
+                      <mwc-button
+                        @click=${this._deleteSelected}
+                        class="warning"
+                      >
+                        ${this.supervisor.localize("snapshot.delete_selected")}
+                      </mwc-button>
+                    `
+                  : html`
+                      <mwc-icon-button
+                        id="delete-btn"
+                        class="warning"
+                        @click=${this._deleteSelected}
+                      >
+                        <ha-svg-icon .path=${mdiDelete}></ha-svg-icon>
+                      </mwc-icon-button>
+                      <paper-tooltip animation-delay="0" for="delete-btn">
+                        ${this.supervisor.localize("snapshot.delete_selected")}
+                      </paper-tooltip>
+                    `}
+              </div>
+            </div> `
+          : ""}
+
         <ha-fab
           slot="fab"
           @click=${this._createSnapshot}
@@ -199,6 +254,12 @@ export class HassioSnapshots extends LitElement {
     }
   }
 
+  private _handleSelectionChanged(
+    ev: HASSDomEvent<SelectionChangedEvent>
+  ): void {
+    this._selectedSnapshots = ev.detail.value;
+  }
+
   private _showUploadSnapshotDialog() {
     showSnapshotUploadDialog(this, {
       showSnapshot: (slug: string) =>
@@ -216,6 +277,35 @@ export class HassioSnapshots extends LitElement {
     this._snapshots = await fetchHassioSnapshots(this.hass);
   }
 
+  private async _deleteSelected() {
+    const confirm = await showConfirmationDialog(this, {
+      title: this.supervisor.localize("snapshot.delete_snapshot_title"),
+      text: this.supervisor.localize("snapshot.delete_snapshot_text", {
+        number: this._selectedSnapshots.length,
+      }),
+      confirmText: this.supervisor.localize("snapshot.delete_snapshot_confirm"),
+    });
+
+    if (!confirm) {
+      return;
+    }
+
+    try {
+      await Promise.all(
+        this._selectedSnapshots.map((slug) => removeSnapshot(this.hass, slug))
+      );
+    } catch (err) {
+      showAlertDialog(this, {
+        title: this.supervisor.localize("snapshot.failed_to_delete"),
+        text: extractApiErrorMessage(err),
+      });
+      return;
+    }
+    await reloadHassioSnapshots(this.hass);
+    this._snapshots = await fetchHassioSnapshots(this.hass);
+    this._dataTable.clearSelection();
+  }
+
   private _handleRowClicked(ev: HASSDomEvent<RowClickedEvent>) {
     const slug = ev.detail.id;
     showHassioSnapshotDialog(this, {
@@ -244,7 +334,45 @@ export class HassioSnapshots extends LitElement {
   }
 
   static get styles(): CSSResultGroup {
-    return [haStyle, hassioStyle];
+    return [
+      haStyle,
+      hassioStyle,
+      css`
+        .table-header {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          height: 58px;
+          border-bottom: 1px solid rgba(var(--rgb-primary-text-color), 0.12);
+        }
+        .header-toolbar {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          color: var(--secondary-text-color);
+          position: relative;
+          top: -4px;
+        }
+        .selected-txt {
+          font-weight: bold;
+          padding-left: 16px;
+          color: var(--primary-text-color);
+        }
+        .table-header .selected-txt {
+          margin-top: 20px;
+        }
+        .header-toolbar .selected-txt {
+          font-size: 16px;
+        }
+        .header-toolbar .header-btns {
+          margin-right: -12px;
+        }
+        .header-btns > mwc-button,
+        .header-btns > mwc-icon-button {
+          margin: 8px;
+        }
+      `,
+    ];
   }
 }
 

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

@@ -2,7 +2,6 @@ import "@material/mwc-button";
 import { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
 import "@material/mwc-list/mwc-list-item";
 import { mdiDotsVertical } from "@mdi/js";
-import { safeDump } from "js-yaml";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import memoizeOne from "memoize-one";
@@ -41,8 +40,8 @@ import {
   roundWithOneDecimal,
 } from "../../../src/util/calculate";
 import "../components/supervisor-metric";
-import { showHassioMarkdownDialog } from "../dialogs/markdown/show-dialog-hassio-markdown";
 import { showNetworkDialog } from "../dialogs/network/show-dialog-network";
+import { showHassioHardwareDialog } from "../dialogs/hardware/show-dialog-hassio-hardware";
 import { hassioStyle } from "../resources/hassio-style";
 
 @customElement("hassio-host-info")
@@ -229,20 +228,19 @@ class HassioHostInfo extends LitElement {
   }
 
   private async _showHardware(): Promise<void> {
+    let hardware;
     try {
-      const content = await fetchHassioHardwareInfo(this.hass);
-      showHassioMarkdownDialog(this, {
-        title: this.supervisor.localize("system.host.hardware"),
-        content: `<pre>${safeDump(content, { indent: 2 })}</pre>`,
-      });
+      hardware = await fetchHassioHardwareInfo(this.hass);
     } catch (err) {
-      showAlertDialog(this, {
+      await showAlertDialog(this, {
         title: this.supervisor.localize(
           "system.host.failed_to_get_hardware_list"
         ),
         text: extractApiErrorMessage(err),
       });
+      return;
     }
+    showHassioHardwareDialog(this, { supervisor: this.supervisor, hardware });
   }
 
   private async _hostReboot(ev: CustomEvent): Promise<void> {

lint-staged.config.js

@@ -1,5 +1,4 @@
 module.exports = {
-  "*.ts": () => "tsc -p tsconfig.json",
   "*.{js,ts}": "eslint --fix",
   "!(/translations)*.{js,ts,json,css,md,html}": "prettier --write",
 };

package.json

@@ -16,13 +16,13 @@
     "lint:lit": "lit-analyzer \"**/src/**/*.ts\" --format markdown --outFile result.md",
     "lint": "yarn run lint:eslint && yarn run lint:prettier && yarn run lint:types",
     "format": "yarn run format:eslint && yarn run format:prettier",
-    "mocha": "node_modules/.bin/ts-mocha -p test-mocha/tsconfig.test.json --opts test-mocha/mocha.opts",
+    "mocha": "ts-mocha -p test-mocha/tsconfig.test.json \"test-mocha/**/*.ts\"",
     "test": "yarn run lint && yarn run mocha"
   },
   "author": "Paulus Schoutsen <Paulus@PaulusSchoutsen.nl> (http://paulusschoutsen.nl)",
   "license": "Apache-2.0",
   "dependencies": {
-    "@braintree/sanitize-url": "^5.0.0",
+    "@braintree/sanitize-url": "^5.0.1",
     "@codemirror/commands": "^0.18.0",
     "@codemirror/gutter": "^0.18.0",
     "@codemirror/highlight": "^0.18.0",
@@ -35,8 +35,8 @@
     "@codemirror/text": "^0.18.0",
     "@codemirror/view": "^0.18.0",
     "@formatjs/intl-getcanonicallocales": "^1.5.10",
-    "@formatjs/intl-locale": "^2.4.24",
-    "@formatjs/intl-pluralrules": "^4.0.18",
+    "@formatjs/intl-locale": "^2.4.28",
+    "@formatjs/intl-pluralrules": "^4.0.22",
     "@fullcalendar/common": "5.1.0",
     "@fullcalendar/core": "5.1.0",
     "@fullcalendar/daygrid": "5.1.0",
@@ -71,7 +71,6 @@
     "@polymer/iron-label": "^3.0.1",
     "@polymer/iron-overlay-behavior": "^3.0.2",
     "@polymer/iron-resizable-behavior": "^3.0.1",
-    "@polymer/paper-card": "^3.0.1",
     "@polymer/paper-checkbox": "^3.1.0",
     "@polymer/paper-dialog": "^3.0.1",
     "@polymer/paper-dialog-behavior": "^3.0.1",
@@ -101,26 +100,26 @@
     "@webcomponents/webcomponentsjs": "^2.2.7",
     "chart.js": "^2.9.4",
     "chartjs-chart-timeline": "^0.4.0",
-    "comlink": "^4.3.0",
+    "comlink": "^4.3.1",
     "core-js": "^3.6.5",
-    "cropperjs": "^1.5.7",
+    "cropperjs": "^1.5.11",
     "deep-clone-simple": "^1.1.1",
     "deep-freeze": "^0.0.1",
     "fecha": "^4.2.0",
     "fuse.js": "^6.0.0",
     "google-timezones-json": "^1.0.2",
-    "hls.js": "^1.0.3",
+    "hls.js": "^1.0.5",
     "home-assistant-js-websocket": "^5.10.0",
-    "idb-keyval": "^3.2.0",
-    "intl-messageformat": "^9.6.13",
-    "js-yaml": "^3.13.1",
+    "idb-keyval": "^5.0.5",
+    "intl-messageformat": "^9.6.16",
+    "js-yaml": "^4.1.0",
     "leaflet": "^1.7.1",
     "leaflet-draw": "^1.0.4",
     "lit": "^2.0.0-rc.2",
     "lit-vaadin-helpers": "^0.1.3",
-    "marked": "2.0.0",
+    "marked": "^2.0.5",
     "mdn-polyfills": "^5.16.0",
-    "memoize-one": "^5.0.2",
+    "memoize-one": "^5.2.1",
     "node-vibrant": "3.2.1-alpha.1",
     "proxy-polyfill": "^0.3.1",
     "punycode": "^2.1.1",
@@ -130,12 +129,12 @@
     "roboto-fontface": "^0.10.0",
     "sortablejs": "^1.10.2",
     "superstruct": "^0.15.2",
-    "tinykeys": "^1.1.1",
+    "tinykeys": "^1.1.3",
     "tsparticles": "^1.19.2",
     "unfetch": "^4.1.0",
-    "vis-data": "^7.1.1",
+    "vis-data": "^7.1.2",
     "vis-network": "^8.5.4",
-    "vue": "^2.6.11",
+    "vue": "^2.6.12",
     "vue2-daterange-picker": "^0.5.1",
     "web-animations-js": "^2.3.2",
     "workbox-cacheable-response": "^6.1.5",
@@ -147,7 +146,7 @@
     "xss": "^1.0.9"
   },
   "devDependencies": {
-    "@babel/core": "^7.14.0",
+    "@babel/core": "^7.14.3",
     "@babel/plugin-external-helpers": "^7.12.13",
     "@babel/plugin-proposal-class-properties": "^7.13.0",
     "@babel/plugin-proposal-decorators": "^7.13.15",
@@ -156,7 +155,7 @@
     "@babel/plugin-proposal-optional-chaining": "^7.13.12",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/plugin-syntax-import-meta": "^7.10.4",
-    "@babel/preset-env": "^7.14.0",
+    "@babel/preset-env": "^7.14.2",
     "@babel/preset-typescript": "^7.13.0",
     "@koa/cors": "^3.1.0",
     "@open-wc/dev-server-hmr": "^0.0.2",
@@ -165,16 +164,13 @@
     "@rollup/plugin-json": "^4.0.3",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
-    "@types/chai": "^4.1.7",
-    "@types/chromecast-caf-receiver": "^5.0.11",
+    "@types/chromecast-caf-receiver": "5.0.12",
     "@types/chromecast-caf-sender": "^1.0.3",
-    "@types/js-yaml": "^3.12.1",
+    "@types/js-yaml": "^4.0.1",
     "@types/leaflet": "^1.7.0",
     "@types/leaflet-draw": "^1.0.3",
-    "@types/marked": "^1.2.2",
-    "@types/memoize-one": "4.1.0",
-    "@types/mocha": "^7.0.2",
-    "@types/resize-observer-browser": "^0.1.3",
+    "@types/marked": "^2.0.3",
+    "@types/mocha": "^8.2.2",
     "@types/sortablejs": "^1.10.6",
     "@types/webspeechapi": "^0.0.29",
     "@typescript-eslint/eslint-plugin": "^4.22.0",
@@ -182,7 +178,7 @@
     "@web/dev-server": "^0.0.24",
     "@web/dev-server-rollup": "^0.2.11",
     "babel-loader": "^8.1.0",
-    "chai": "^4.2.0",
+    "chai": "^4.3.4",
     "cpx": "^1.5.0",
     "del": "^4.0.0",
     "eslint": "^7.25.0",
@@ -196,7 +192,7 @@
     "eslint-plugin-wc": "^1.3.0",
     "fancy-log": "^1.3.3",
     "fs-extra": "^7.0.1",
-    "gulp": "^4.0.0",
+    "gulp": "^4.0.2",
     "gulp-foreach": "^0.1.0",
     "gulp-json-transform": "^0.4.6",
     "gulp-merge-json": "^1.3.1",
@@ -210,7 +206,7 @@
     "magic-string": "^0.25.7",
     "map-stream": "^0.0.7",
     "merge-stream": "^1.0.1",
-    "mocha": "^7.2.0",
+    "mocha": "^8.4.0",
     "object-hash": "^2.0.3",
     "open": "^7.0.4",
     "prettier": "^2.0.4",
@@ -220,13 +216,13 @@
     "rollup-plugin-string": "^3.0.0",
     "rollup-plugin-terser": "^5.3.0",
     "rollup-plugin-visualizer": "^4.0.4",
-    "serve": "^11.3.0",
-    "sinon": "^7.3.1",
+    "serve": "^11.3.2",
+    "sinon": "^11.0.0",
     "source-map-url": "^0.4.0",
     "systemjs": "^6.3.2",
-    "terser-webpack-plugin": "^5.1.1",
+    "terser-webpack-plugin": "^5.1.2",
     "ts-lit-plugin": "^1.2.1",
-    "ts-mocha": "^7.0.0",
+    "ts-mocha": "^8.0.0",
     "typescript": "^4.2.4",
     "vinyl-buffer": "^1.0.1",
     "vinyl-source-stream": "^2.0.0",

setup.py

@@ -2,7 +2,7 @@ from setuptools import setup, find_packages
 
 setup(
     name="home-assistant-frontend",
-    version="20210518.0",
+    version="20210603.0",
     description="The Home Assistant frontend",
     url="https://github.com/home-assistant/home-assistant-polymer",
     author="The Home Assistant Authors",

src/common/dom/apply_themes_on_element.ts

@@ -31,7 +31,7 @@ export const applyThemesOnElement = (
   element,
   themes: HomeAssistant["themes"],
   selectedTheme?: string,
-  themeSettings?: Partial<HomeAssistant["selectedThemeSettings"]>
+  themeSettings?: Partial<HomeAssistant["selectedTheme"]>
 ) => {
   let cacheKey = selectedTheme;
   let themeRules: Partial<ThemeVars> = {};
@@ -39,7 +39,7 @@ export const applyThemesOnElement = (
   if (themeSettings) {
     if (themeSettings.dark) {
       cacheKey = `${cacheKey}__dark`;
-      themeRules = darkStyles;
+      themeRules = { ...darkStyles };
     }
 
     if (selectedTheme === "default") {

src/common/dom/speech-recognition.ts

@@ -1,14 +1,7 @@
-/* eslint-disable */
-// @ts-ignore
 export const SpeechRecognition =
-  // @ts-ignore
   window.SpeechRecognition || window.webkitSpeechRecognition;
-// @ts-ignore
 export const SpeechGrammarList =
-  // @ts-ignore
   window.SpeechGrammarList || window.webkitSpeechGrammarList;
-// @ts-ignore
 export const SpeechRecognitionEvent =
-  // @ts-ignore
+  // @ts-expect-error
   window.SpeechRecognitionEvent || window.webkitSpeechRecognitionEvent;
-/* eslint-enable */

src/common/entity/domain_icon.ts

@@ -89,8 +89,6 @@ export const domainIcon = (
   }
 
   // eslint-disable-next-line
-  console.warn(
-    "Unable to find icon for domain " + domain + " (" + stateObj + ")"
-  );
+  console.warn(`Unable to find icon for domain ${domain}`);
   return DEFAULT_DOMAIN_ICON;
 };

src/common/search/search-input.ts

@@ -1,9 +1,16 @@
 import "@material/mwc-icon-button/mwc-icon-button";
 import { mdiClose, mdiMagnify } from "@mdi/js";
 import "@polymer/paper-input/paper-input";
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property } from "lit/decorators";
-import { classMap } from "lit/directives/class-map";
+import type { PaperInputElement } from "@polymer/paper-input/paper-input";
+import {
+  css,
+  CSSResultGroup,
+  html,
+  LitElement,
+  PropertyValues,
+  TemplateResult,
+} from "lit";
+import { customElement, property, query } from "lit/decorators";
 import "../../components/ha-svg-icon";
 import { fireEvent } from "../dom/fire_event";
 
@@ -27,18 +34,11 @@ class SearchInput extends LitElement {
     this.shadowRoot!.querySelector("paper-input")!.focus();
   }
 
+  @query("paper-input", true) private _input!: PaperInputElement;
+
   protected render(): TemplateResult {
     return html`
-      <style>
-        .no-underline:not(.focused) {
-          --paper-input-container-underline: {
-            display: none;
-            height: 0;
-          }
-        }
-      </style>
       <paper-input
-        class=${classMap({ "no-underline": this.noUnderline })}
         .autofocus=${this.autofocus}
         .label=${this.label || "Search"}
         .value=${this.filter}
@@ -62,6 +62,17 @@ class SearchInput extends LitElement {
     `;
   }
 
+  protected updated(changedProps: PropertyValues) {
+    if (
+      changedProps.has("noUnderline") &&
+      (this.noUnderline || changedProps.get("noUnderline") !== undefined)
+    ) {
+      (this._input.inputElement!.parentElement!.shadowRoot!.querySelector(
+        "div.unfocused-line"
+      ) as HTMLElement).style.display = this.noUnderline ? "none" : "block";
+    }
+  }
+
   private async _filterChanged(value: string) {
     fireEvent(this, "value-changed", { value: String(value) });
   }

src/common/string/escape_regexp.ts

@@ -0,0 +1,2 @@
+export const escapeRegExp = (text: string): string =>
+  text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");

src/common/string/filter/filter.ts

@@ -92,7 +92,7 @@ function isUpperCaseAtPos(pos: number, word: string, wordLow: string): boolean {
   return word[pos] !== wordLow[pos];
 }
 
-function isPatternInWord(
+export function isPatternInWord(
   patternLow: string,
   patternPos: number,
   patternLen: number,
@@ -121,7 +121,7 @@ enum Arrow {
 }
 
 /**
- * An array representating a fuzzy match.
+ * An array representing a fuzzy match.
  *
  * 0. the score
  * 1. the offset at which matching started

src/common/string/filter/sequence-matching.ts

@@ -5,7 +5,7 @@ import { fuzzyScore } from "./filter";
  *   in that order, allowing for skipping. Ex: "chdr" exists in "chandelier")
  *
  * @param {string} filter - Sequence of letters to check for
- * @param {string} word - Word to check for sequence
+ * @param {ScorableTextItem} item - Item against whose strings will be checked
  *
  * @return {number} Score representing how well the word matches the filter. Return of 0 means no match.
  */

src/common/string/is_date.ts

@@ -0,0 +1,11 @@
+// https://regex101.com/r/kc5C14/2
+const regExpString = "^\\d{4}-(0[1-9]|1[0-2])-([12]\\d|0[1-9]|3[01])";
+
+const regExp = new RegExp(regExpString + "$");
+// 2nd expression without the "end of string" enforced, so it can be used
+// to just verify the start of a string and then based on that result e.g.
+// check for a full timestamp string efficiently.
+const regExpNoStringEnd = new RegExp(regExpString);
+
+export const isDate = (input: string, allowCharsAfterDate = false): boolean =>
+  allowCharsAfterDate ? regExpNoStringEnd.test(input) : regExp.test(input);

src/common/string/is_timestamp.ts

@@ -0,0 +1,11 @@
+// https://stackoverflow.com/a/14322189/1947205
+// Changes:
+// 1. Do not allow a plus or minus at the start.
+// 2. Enforce that we have a "T" or a blank after the date portion
+//    to ensure we have a timestamp and not only a date.
+// 3. Disallow dates based on week number.
+// 4. Disallow dates only consisting of a year.
+// https://regex101.com/r/kc5C14/3
+const regexp = /^\d{4}-(0[1-9]|1[0-2])-([12]\d|0[1-9]|3[01])[T| ](((([01]\d|2[0-3])((:?)[0-5]\d)?|24:?00)([.,]\d+(?!:))?)(\8[0-5]\d([.,]\d+)?)?([zZ]|([+-])([01]\d|2[0-3]):?([0-5]\d)?)?)$/;
+
+export const isTimestamp = (input: string): boolean => regexp.test(input);

src/common/structs/is-custom-type.ts

@@ -0,0 +1,6 @@
+import { refine, string } from "superstruct";
+
+const isCustomType = (value: string) => value.startsWith("custom:");
+
+export const customType = () =>
+  refine(string(), "custom element type", isCustomType);

src/common/structs/is-entity-id.ts

@@ -1,11 +1,6 @@
 import { refine, string } from "superstruct";
 
-const isEntityId = (value: string): boolean => {
-  if (!value.includes(".")) {
-    return false;
-  }
-  return true;
-};
+const isEntityId = (value: string): boolean => value.includes(".");
 
 export const entityId = () =>
   refine(string(), "entity ID (domain.entity)", isEntityId);

src/common/structs/is-icon.ts

@@ -1,10 +1,5 @@
 import { refine, string } from "superstruct";
 
-const isIcon = (value: string) => {
-  if (!value.includes(":")) {
-    return false;
-  }
-  return true;
-};
+const isIcon = (value: string) => value.includes(":");
 
 export const icon = () => refine(string(), "icon (mdi:icon-name)", isIcon);

src/common/translations/localize.ts

@@ -1,4 +1,4 @@
-import { shouldPolyfill } from "@formatjs/intl-pluralrules/should-polyfill";
+import { shouldPolyfill } from "@formatjs/intl-pluralrules/lib/should-polyfill";
 import IntlMessageFormat from "intl-messageformat";
 import { Resources } from "../../types";
 
@@ -86,11 +86,15 @@ export const computeLocalize = async (
       | undefined;
 
     if (!translatedMessage) {
-      translatedMessage = new IntlMessageFormat(
-        translatedValue,
-        language,
-        formats
-      );
+      try {
+        translatedMessage = new IntlMessageFormat(
+          translatedValue,
+          language,
+          formats
+        );
+      } catch (err) {
+        return "Translation error: " + err.message;
+      }
       cache._localizationCache[messageKey] = translatedMessage;
     }
 

src/common/util/debounce.ts

@@ -4,29 +4,25 @@
 // be triggered. The function will be called after it stops being called for
 // N milliseconds. If `immediate` is passed, trigger the function on the
 // leading edge, instead of the trailing.
-// eslint-disable-next-line: ban-types
-export const debounce = <T extends (...args) => unknown>(
-  func: T,
-  wait,
+
+export const debounce = <T extends any[]>(
+  func: (...args: T) => void,
+  wait: number,
   immediate = false
-): T => {
-  let timeout;
-  // @ts-ignore
-  return function (...args) {
-    // @ts-ignore
-    // eslint-disable-next-line @typescript-eslint/no-this-alias
-    const context = this;
+) => {
+  let timeout: number | undefined;
+  return (...args: T): void => {
     const later = () => {
-      timeout = null;
+      timeout = undefined;
       if (!immediate) {
-        func.apply(context, args);
+        func(...args);
       }
     };
     const callNow = immediate && !timeout;
     clearTimeout(timeout);
-    timeout = setTimeout(later, wait);
+    timeout = window.setTimeout(later, wait);
     if (callNow) {
-      func.apply(context, args);
+      func(...args);
     }
   };
 };

src/common/util/promise-timeout.ts

@@ -0,0 +1,10 @@
+export const promiseTimeout = (ms: number, promise: Promise<any>) => {
+  const timeout = new Promise((_resolve, reject) => {
+    setTimeout(() => {
+      reject(`Timed out in ${ms} ms.`);
+    }, ms);
+  });
+
+  // Returns a race between our timeout and the passed in promise
+  return Promise.race([promise, timeout]);
+};

src/components/data-table/ha-data-table.ts

@@ -1,4 +1,4 @@
-import { Layout1d, scroll } from "@lit-labs/virtualizer";
+import { Layout1d, scroll } from "../../resources/lit-virtualizer";
 import deepClone from "deep-clone-simple";
 import {
   css,
@@ -246,7 +246,7 @@ export class HaDataTable extends LitElement {
           aria-rowcount=${this._filteredData.length + 1}
           style=${styleMap({
             height: this.autoHeight
-              ? `${(this._filteredData.length || 1) * 53 + 57}px`
+              ? `${(this._filteredData.length || 1) * 53 + 53}px`
               : `calc(100% - ${this._headerHeight}px)`,
           })}
         >
@@ -340,11 +340,10 @@ export class HaDataTable extends LitElement {
                   ${scroll({
                     items: this._items,
                     layout: Layout1d,
-                    // @ts-expect-error
                     renderItem: (row: DataTableRowData, index) => {
                       // not sure how this happens...
                       if (!row) {
-                        return "";
+                        return html``;
                       }
                       if (row.append) {
                         return html`
@@ -920,13 +919,11 @@ export class HaDataTable extends LitElement {
           color: var(--secondary-text-color);
         }
         .scroller {
-          display: flex;
-          position: relative;
-          contain: strict;
           height: calc(100% - 57px);
         }
-        .mdc-data-table__table:not(.auto-height) .scroller {
-          overflow: auto;
+
+        .mdc-data-table__table.auto-height .scroller {
+          overflow-y: hidden !important;
         }
         .grows {
           flex-grow: 1;

src/components/device/ha-device-action-picker.ts

@@ -4,7 +4,6 @@ import {
   fetchDeviceActions,
   localizeDeviceAutomationAction,
 } from "../../data/device_automation";
-import "../ha-paper-dropdown-menu";
 import { HaDeviceAutomationPicker } from "./ha-device-automation-picker";
 
 @customElement("ha-device-action-picker")

src/components/device/ha-device-condition-picker.ts

@@ -4,7 +4,6 @@ import {
   fetchDeviceConditions,
   localizeDeviceAutomationCondition,
 } from "../../data/device_automation";
-import "../ha-paper-dropdown-menu";
 import { HaDeviceAutomationPicker } from "./ha-device-automation-picker";
 
 @customElement("ha-device-condition-picker")

src/components/device/ha-device-trigger-picker.ts

@@ -4,7 +4,6 @@ import {
   fetchDeviceTriggers,
   localizeDeviceAutomationTrigger,
 } from "../../data/device_automation";
-import "../ha-paper-dropdown-menu";
 import { HaDeviceAutomationPicker } from "./ha-device-automation-picker";
 
 @customElement("ha-device-trigger-picker")

src/components/ha-attributes.ts

@@ -1,16 +1,14 @@
 import { HassEntity } from "home-assistant-js-websocket";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { until } from "lit/directives/until";
 import { haStyle } from "../resources/styles";
 import { HomeAssistant } from "../types";
 import hassAttributeUtil, {
   formatAttributeName,
+  formatAttributeValue,
 } from "../util/hass-attributes-util";
 import "./ha-expansion-panel";
 
-let jsYamlPromise: Promise<typeof import("js-yaml")>;
-
 @customElement("ha-attributes")
 class HaAttributes extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -56,17 +54,17 @@ class HaAttributes extends LitElement {
                     </div>
                   `
                 )}
-                ${this.stateObj.attributes.attribution
-                  ? html`
-                      <div class="attribution">
-                        ${this.stateObj.attributes.attribution}
-                      </div>
-                    `
-                  : ""}
               `
             : ""}
         </div>
       </ha-expansion-panel>
+      ${this.stateObj.attributes.attribution
+        ? html`
+            <div class="attribution">
+              ${this.stateObj.attributes.attribution}
+            </div>
+          `
+        : ""}
     `;
   }
 
@@ -93,6 +91,7 @@ class HaAttributes extends LitElement {
         .attribution {
           color: var(--secondary-text-color);
           text-align: center;
+          margin-top: 16px;
         }
         pre {
           font-family: inherit;
@@ -124,38 +123,7 @@ class HaAttributes extends LitElement {
       return "-";
     }
     const value = this.stateObj.attributes[attribute];
-    return this.formatAttributeValue(value);
-  }
-
-  private formatAttributeValue(value: any): string | TemplateResult {
-    if (value === null) {
-      return "-";
-    }
-    // YAML handling
-    if (
-      (Array.isArray(value) && value.some((val) => val instanceof Object)) ||
-      (!Array.isArray(value) && value instanceof Object)
-    ) {
-      if (!jsYamlPromise) {
-        jsYamlPromise = import("js-yaml");
-      }
-      const yaml = jsYamlPromise.then((jsYaml) => jsYaml.safeDump(value));
-      return html` <pre>${until(yaml, "")}</pre> `;
-    }
-    // URL handling
-    if (typeof value === "string" && value.startsWith("http")) {
-      try {
-        // If invalid URL, exception will be raised
-        const url = new URL(value);
-        if (url.protocol === "http:" || url.protocol === "https:")
-          return html`<a target="_blank" rel="noreferrer" href="${value}"
-            >${value}</a
-          >`;
-      } catch (_) {
-        // Nothing to do here
-      }
-    }
-    return Array.isArray(value) ? value.join(", ") : value;
+    return formatAttributeValue(this.hass, value);
   }
 
   private expandedChanged(ev) {

src/components/ha-circular-progress.ts

@@ -1,4 +1,5 @@
 import { CircularProgress } from "@material/mwc-circular-progress";
+import { CSSResultGroup, css } from "lit";
 import { customElement, property } from "lit/decorators";
 
 @customElement("ha-circular-progress")
@@ -41,6 +42,17 @@ export class HaCircularProgress extends CircularProgress {
   public get indeterminate() {
     return this.active;
   }
+
+  static get styles(): CSSResultGroup {
+    return [
+      super.styles,
+      css`
+        :host {
+          overflow: hidden;
+        }
+      `,
+    ];
+  }
 }
 
 declare global {

src/components/ha-cover-controls.ts

@@ -23,8 +23,8 @@ class HaCoverControls extends LitElement {
 
   @state() private _entityObj?: CoverEntity;
 
-  protected updated(changedProperties: PropertyValues): void {
-    super.updated(changedProperties);
+  public willUpdate(changedProperties: PropertyValues): void {
+    super.willUpdate(changedProperties);
 
     if (changedProperties.has("stateObj")) {
       this._entityObj = new CoverEntity(this.hass, this.stateObj);

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

@@ -22,8 +22,8 @@ class HaCoverTiltControls extends LitElement {
 
   @state() private _entityObj?: CoverEntity;
 
-  protected updated(changedProperties: PropertyValues): void {
-    super.updated(changedProperties);
+  public willUpdate(changedProperties: PropertyValues): void {
+    super.willUpdate(changedProperties);
 
     if (changedProperties.has("stateObj")) {
       this._entityObj = new CoverEntity(this.hass, this.stateObj);

src/components/ha-expansion-panel.ts

@@ -14,12 +14,17 @@ class HaExpansionPanel extends LitElement {
 
   @property() header?: string;
 
+  @property() secondary?: string;
+
   @query(".container") private _container!: HTMLDivElement;
 
   protected render(): TemplateResult {
     return html`
       <div class="summary" @click=${this._toggleContainer}>
-        <slot name="header">${this.header}</slot>
+        <slot class="header" name="header">
+          ${this.header}
+          <slot class="secondary" name="secondary">${this.secondary}</slot>
+        </slot>
         <ha-svg-icon
           .path=${mdiChevronDown}
           class="summary-icon ${classMap({ expanded: this.expanded })}"
@@ -106,6 +111,16 @@ class HaExpansionPanel extends LitElement {
       .container.expanded {
         height: auto;
       }
+
+      .header {
+        display: block;
+      }
+
+      .secondary {
+        display: block;
+        color: var(--secondary-text-color);
+        font-size: 12px;
+      }
     `;
   }
 }

src/components/ha-gauge.ts

@@ -7,14 +7,14 @@ import { afterNextRender } from "../common/util/render-status";
 import { FrontendLocaleData } from "../data/translation";
 import { getValueInPercentage, normalize } from "../util/calculate";
 
+// Workaround for https://github.com/home-assistant/frontend/issues/6467
+const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+
 const getAngle = (value: number, min: number, max: number) => {
   const percentage = getValueInPercentage(normalize(value, min, max), min, max);
   return (percentage * 180) / 100;
 };
 
-// Workaround for https://github.com/home-assistant/frontend/issues/6467
-const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
-
 @customElement("ha-gauge")
 export class Gauge extends LitElement {
   @property({ type: Number }) public min = 0;

src/components/ha-hls-player.ts

@@ -13,6 +13,11 @@ import { nextRender } from "../common/util/render-status";
 import { getExternalConfig } from "../external_app/external_config";
 import type { HomeAssistant } from "../types";
 
+type HlsLite = Omit<
+  HlsType,
+  "subtitleTrackController" | "audioTrackController" | "emeController"
+>;
+
 @customElement("ha-hls-player")
 class HaHLSPlayer extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -39,7 +44,7 @@ class HaHLSPlayer extends LitElement {
 
   @state() private _attached = false;
 
-  private _hlsPolyfillInstance?: HlsType;
+  private _hlsPolyfillInstance?: HlsLite;
 
   private _useExoPlayer = false;
 
@@ -103,7 +108,8 @@ class HaHLSPlayer extends LitElement {
     const useExoPlayerPromise = this._getUseExoPlayer();
     const masterPlaylistPromise = fetch(this.url);
 
-    const Hls = (await import("hls.js")).default;
+    const Hls: typeof HlsType = (await import("hls.js/dist/hls.light.min.js"))
+      .default;
     let hlsSupported = Hls.isSupported();
 
     if (!hlsSupported) {
@@ -182,7 +188,7 @@ class HaHLSPlayer extends LitElement {
     url: string
   ) {
     const hls = new Hls({
-      liveBackBufferLength: 60,
+      backBufferLength: 60,
       fragLoadingTimeOut: 30000,
       manifestLoadingTimeOut: 30000,
       levelLoadingTimeOut: 30000,

src/components/ha-icon.ts

@@ -125,6 +125,7 @@ export class HaIcon extends LitElement {
       databaseIcon = await getIcon(iconName);
     } catch (_err) {
       // Firefox in private mode doesn't support IDB
+      // iOS Safari sometimes doesn't open the DB
       databaseIcon = undefined;
     }
 

src/components/ha-network.ts

@@ -0,0 +1,179 @@
+import "@polymer/paper-tooltip/paper-tooltip";
+import {
+  css,
+  CSSResultGroup,
+  html,
+  nothing,
+  LitElement,
+  TemplateResult,
+} from "lit";
+import { customElement, state, property } from "lit/decorators";
+import {
+  Adapter,
+  NetworkConfig,
+  IPv6ConfiguredAddress,
+  IPv4ConfiguredAddress,
+} from "../data/network";
+import { fireEvent } from "../common/dom/fire_event";
+import { haStyle } from "../resources/styles";
+import { HomeAssistant } from "../types";
+import "./ha-checkbox";
+import type { HaCheckbox } from "./ha-checkbox";
+import "./ha-settings-row";
+import "./ha-icon";
+
+const format_addresses = (
+  addresses: IPv6ConfiguredAddress[] | IPv4ConfiguredAddress[]
+): TemplateResult =>
+  html`${addresses.map((address, i) => [
+    html`<span>${address.address}/${address.network_prefix}</span>`,
+    i < addresses.length - 1 ? ", " : nothing,
+  ])}`;
+
+const format_auto_detected_interfaces = (
+  adapters: Adapter[]
+): Array<TemplateResult | string> =>
+  adapters.map((adapter) =>
+    adapter.auto
+      ? html`${adapter.name}
+        (${format_addresses([...adapter.ipv4, ...adapter.ipv6])})`
+      : ""
+  );
+
+declare global {
+  interface HASSDomEvents {
+    "network-config-changed": { configured_adapters: string[] };
+  }
+}
+@customElement("ha-network")
+export class HaNetwork extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public networkConfig?: NetworkConfig;
+
+  @state() private _expanded?: boolean;
+
+  protected render(): TemplateResult {
+    if (this.networkConfig === undefined) {
+      return html``;
+    }
+    const configured_adapters = this.networkConfig.configured_adapters || [];
+    return html`
+      <ha-settings-row>
+        <span slot="prefix">
+          <ha-checkbox
+            id="auto_configure"
+            @change=${this._handleAutoConfigureCheckboxClick}
+            .checked=${!configured_adapters.length}
+            name="auto_configure"
+          >
+          </ha-checkbox>
+        </span>
+        <span slot="heading" data-for="auto_configure"> Auto Configure </span>
+        <span slot="description" data-for="auto_configure">
+          Detected:
+          ${format_auto_detected_interfaces(this.networkConfig.adapters)}
+        </span>
+      </ha-settings-row>
+      ${configured_adapters.length || this._expanded
+        ? this.networkConfig.adapters.map(
+            (adapter) =>
+              html`<ha-settings-row>
+                <span slot="prefix">
+                  <ha-checkbox
+                    id=${adapter.name}
+                    @change=${this._handleAdapterCheckboxClick}
+                    .checked=${configured_adapters.includes(adapter.name)}
+                    .adapter=${adapter.name}
+                    name=${adapter.name}
+                  >
+                  </ha-checkbox>
+                </span>
+                <span slot="heading">
+                  Adapter: ${adapter.name}
+                  ${adapter.default
+                    ? html`<ha-icon .icon="hass:star"></ha-icon> (Default)`
+                    : ""}
+                </span>
+                <span slot="description">
+                  ${format_addresses([...adapter.ipv4, ...adapter.ipv6])}
+                </span>
+              </ha-settings-row>`
+          )
+        : ""}
+    `;
+  }
+
+  private _handleAutoConfigureCheckboxClick(ev: Event) {
+    const checkbox = ev.currentTarget as HaCheckbox;
+    if (this.networkConfig === undefined) {
+      return;
+    }
+
+    let configured_adapters = [...this.networkConfig.configured_adapters];
+
+    if (checkbox.checked) {
+      this._expanded = false;
+      configured_adapters = [];
+    } else {
+      this._expanded = true;
+      for (const adapter of this.networkConfig.adapters) {
+        if (adapter.default) {
+          configured_adapters = [adapter.name];
+          break;
+        }
+      }
+    }
+
+    fireEvent(this, "network-config-changed", {
+      configured_adapters: configured_adapters,
+    });
+  }
+
+  private _handleAdapterCheckboxClick(ev: Event) {
+    const checkbox = ev.currentTarget as HaCheckbox;
+    const adapter_name = (checkbox as any).name;
+    if (this.networkConfig === undefined) {
+      return;
+    }
+
+    const configured_adapters = [...this.networkConfig.configured_adapters];
+
+    if (checkbox.checked) {
+      configured_adapters.push(adapter_name);
+    } else {
+      const index = configured_adapters.indexOf(adapter_name, 0);
+      configured_adapters.splice(index, 1);
+    }
+
+    fireEvent(this, "network-config-changed", {
+      configured_adapters: configured_adapters,
+    });
+  }
+
+  static get styles(): CSSResultGroup {
+    return [
+      haStyle,
+      css`
+        .error {
+          color: var(--error-color);
+        }
+
+        ha-settings-row {
+          padding: 0;
+        }
+
+        span[slot="heading"],
+        span[slot="description"] {
+          cursor: pointer;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-network": HaNetwork;
+  }
+}

src/components/ha-yaml-editor.ts

@@ -1,4 +1,4 @@
-import { safeDump, safeLoad } from "js-yaml";
+import { DEFAULT_SCHEMA, dump, load, Schema } from "js-yaml";
 import { html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
@@ -20,6 +20,8 @@ const isEmpty = (obj: Record<string, unknown>): boolean => {
 export class HaYamlEditor extends LitElement {
   @property() public value?: any;
 
+  @property({ attribute: false }) public yamlSchema: Schema = DEFAULT_SCHEMA;
+
   @property() public defaultValue?: any;
 
   @property() public isValid = true;
@@ -30,7 +32,10 @@ export class HaYamlEditor extends LitElement {
 
   public setValue(value): void {
     try {
-      this._yaml = value && !isEmpty(value) ? safeDump(value) : "";
+      this._yaml =
+        value && !isEmpty(value)
+          ? dump(value, { schema: this.yamlSchema })
+          : "";
     } catch (err) {
       // eslint-disable-next-line no-console
       console.error(err, value);
@@ -67,7 +72,7 @@ export class HaYamlEditor extends LitElement {
 
     if (this._yaml) {
       try {
-        parsed = safeLoad(this._yaml);
+        parsed = load(this._yaml, { schema: this.yamlSchema });
       } catch (err) {
         // Invalid YAML
         isValid = false;

src/components/media-player/ha-media-player-browse.ts

@@ -45,7 +45,6 @@ import "../ha-button-menu";
 import "../ha-card";
 import "../ha-circular-progress";
 import "../ha-fab";
-import "../ha-paper-dropdown-menu";
 import "../ha-svg-icon";
 
 declare global {

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

@@ -377,6 +377,10 @@ class StateHistoryChartLine extends LocalizeMixin(PolymerElement) {
                 major: {
                   fontStyle: "bold",
                 },
+                source: "auto",
+                sampleSize: 5,
+                autoSkipPadding: 20,
+                maxRotation: 0,
               },
             },
           ],

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

@@ -194,7 +194,10 @@ class StateHistoryChartTimeline extends LocalizeMixin(PolymerElement) {
           invertOnOff,
         ]);
       }
-      datasets.push({ data: dataRow, entity_id: stateInfo.entity_id });
+      datasets.push({
+        data: dataRow,
+        entity_id: stateInfo.entity_id,
+      });
       labels.push(entityDisplay);
     });
 
@@ -233,6 +236,14 @@ class StateHistoryChartTimeline extends LocalizeMixin(PolymerElement) {
                 major: {
                   fontStyle: "bold",
                 },
+                sampleSize: 5,
+                autoSkipPadding: 50,
+                maxRotation: 0,
+              },
+              categoryPercentage: undefined,
+              barPercentage: undefined,
+              time: {
+                format: undefined,
               },
             },
           ],
@@ -242,10 +253,17 @@ class StateHistoryChartTimeline extends LocalizeMixin(PolymerElement) {
                 yaxe.maxWidth = yaxe.chart.width * 0.18;
               },
               position: this._computeRTL ? "right" : "left",
+              categoryPercentage: undefined,
+              barPercentage: undefined,
+              time: { format: undefined },
             },
           ],
         },
       },
+      datasets: {
+        categoryPercentage: 0.8,
+        barPercentage: 0.9,
+      },
       data: {
         labels: labels,
         datasets: datasets,

src/components/user/ha-user-badge.ts

@@ -1,4 +1,11 @@
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import {
+  css,
+  CSSResultGroup,
+  html,
+  LitElement,
+  PropertyValues,
+  TemplateResult,
+} from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { styleMap } from "lit/directives/style-map";
@@ -32,13 +39,13 @@ class UserBadge extends LitElement {
 
   private _personEntityId?: string;
 
-  protected updated(changedProps) {
-    super.updated(changedProps);
+  public willUpdate(changedProps: PropertyValues<this>) {
+    super.willUpdate(changedProps);
     if (changedProps.has("user")) {
       this._getPersonPicture();
       return;
     }
-    const oldHass = changedProps.get("hass");
+    const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
     if (
       this._personEntityId &&
       oldHass &&

src/data/config_entries.ts

@@ -12,20 +12,20 @@ export interface ConfigEntry {
     | "setup_retry"
     | "not_loaded"
     | "failed_unload";
-  connection_class: string;
   supports_options: boolean;
   supports_unload: boolean;
+  pref_disable_new_entities: boolean;
+  pref_disable_polling: boolean;
   disabled_by: "user" | null;
   reason: string | null;
 }
 
-export interface ConfigEntryMutableParams {
-  title: string;
-}
-
-export interface ConfigEntrySystemOptions {
-  disable_new_entities: boolean;
-}
+export type ConfigEntryMutableParams = Partial<
+  Pick<
+    ConfigEntry,
+    "title" | "pref_disable_new_entities" | "pref_disable_polling"
+  >
+>;
 
 export const getConfigEntries = (hass: HomeAssistant) =>
   hass.callApi<ConfigEntry[]>("GET", "config/config_entries/entry");
@@ -33,9 +33,9 @@ export const getConfigEntries = (hass: HomeAssistant) =>
 export const updateConfigEntry = (
   hass: HomeAssistant,
   configEntryId: string,
-  updatedValues: Partial<ConfigEntryMutableParams>
+  updatedValues: ConfigEntryMutableParams
 ) =>
-  hass.callWS<ConfigEntry>({
+  hass.callWS<{ require_restart: boolean; config_entry: ConfigEntry }>({
     type: "config_entries/update",
     entry_id: configEntryId,
     ...updatedValues,
@@ -51,13 +51,15 @@ export const reloadConfigEntry = (hass: HomeAssistant, configEntryId: string) =>
     require_restart: boolean;
   }>("POST", `config/config_entries/entry/${configEntryId}/reload`);
 
+export interface DisableConfigEntryResult {
+  require_restart: boolean;
+}
+
 export const disableConfigEntry = (
   hass: HomeAssistant,
   configEntryId: string
 ) =>
-  hass.callWS<{
-    require_restart: boolean;
-  }>({
+  hass.callWS<DisableConfigEntryResult>({
     type: "config_entries/disable",
     entry_id: configEntryId,
     disabled_by: "user",
@@ -71,23 +73,3 @@ export const enableConfigEntry = (hass: HomeAssistant, configEntryId: string) =>
     entry_id: configEntryId,
     disabled_by: null,
   });
-
-export const getConfigEntrySystemOptions = (
-  hass: HomeAssistant,
-  configEntryId: string
-) =>
-  hass.callWS<ConfigEntrySystemOptions>({
-    type: "config_entries/system_options/list",
-    entry_id: configEntryId,
-  });
-
-export const updateConfigEntrySystemOptions = (
-  hass: HomeAssistant,
-  configEntryId: string,
-  params: Partial<ConfigEntrySystemOptions>
-) =>
-  hass.callWS({
-    type: "config_entries/system_options/update",
-    entry_id: configEntryId,
-    ...params,
-  });

src/data/hassio/addon.ts

@@ -212,13 +212,15 @@ export const setHassioAddonOption = async (
 
 export const validateHassioAddonOption = async (
   hass: HomeAssistant,
-  slug: string
+  slug: string,
+  data?: any
 ): Promise<{ message: string; valid: boolean }> => {
   if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
     return hass.callWS({
       type: "supervisor/api",
       endpoint: `/addons/${slug}/options/validate`,
       method: "post",
+      data,
     });
   }
 

src/data/hassio/hardware.ts

@@ -14,12 +14,17 @@ interface HassioHardwareAudioList {
   };
 }
 
+interface HardwareDevice {
+  attributes: Record<string, string>;
+  by_id: null | string;
+  dev_path: string;
+  name: string;
+  subsystem: string;
+  sysfs: string;
+}
+
 export interface HassioHardwareInfo {
-  serial: string[];
-  input: string[];
-  disk: string[];
-  gpio: string[];
-  audio: Record<string, unknown>;
+  devices: HardwareDevice[];
 }
 
 export const fetchHassioHardwareAudio = async (

src/data/hassio/snapshot.ts

@@ -39,7 +39,7 @@ export interface HassioSnapshotDetail extends HassioSnapshot {
 }
 
 export interface HassioFullSnapshotCreateParams {
-  name: string;
+  name?: string;
   password?: string;
 }
 export interface HassioPartialSnapshotCreateParams
@@ -130,6 +130,21 @@ export const createHassioFullSnapshot = async (
   );
 };
 
+export const removeSnapshot = async (hass: HomeAssistant, slug: string) => {
+  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
+    await hass.callWS({
+      type: "supervisor/api",
+      endpoint: `/snapshots/${slug}/remove`,
+      method: "post",
+    });
+    return;
+  }
+  await hass.callApi<HassioResponse<void>>(
+    "POST",
+    `hassio/snapshots/${slug}/remove`
+  );
+};
+
 export const createHassioPartialSnapshot = async (
   hass: HomeAssistant,
   data: HassioPartialSnapshotCreateParams
@@ -179,3 +194,26 @@ export const uploadSnapshot = async (
   }
   return resp.json();
 };
+
+export const supervisorRestorePartialSnapshot = async (
+  hass: HomeAssistant,
+  slug: string,
+  data: HassioPartialSnapshotCreateParams
+) => {
+  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
+    await hass.callWS({
+      type: "supervisor/api",
+      endpoint: `/snapshots/${slug}/restore/partial`,
+      method: "post",
+      timeout: null,
+      data,
+    });
+    return;
+  }
+
+  await hass.callApi<HassioResponse<void>>(
+    "POST",
+    `hassio/snapshots/${slug}/restore/partial`,
+    data
+  );
+};

src/data/iconsets.ts

@@ -1,4 +1,5 @@
-import { clear, get, set, Store } from "idb-keyval";
+import { clear, get, set, createStore, promisifyRequest } from "idb-keyval";
+import { promiseTimeout } from "../common/util/promise-timeout";
 import { iconMetadata } from "../resources/icon-metadata";
 import { IconMeta } from "../types";
 
@@ -10,45 +11,44 @@ export interface Chunks {
   [key: string]: Promise<Icons>;
 }
 
-export const iconStore = new Store("hass-icon-db", "mdi-icon-store");
+export const iconStore = createStore("hass-icon-db", "mdi-icon-store");
 
 export const MDI_PREFIXES = ["mdi", "hass", "hassio", "hademo"];
 
-let toRead: Array<[string, (string) => void, () => void]> = [];
+let toRead: Array<
+  [string, (iconPath: string | undefined) => void, (e: any) => void]
+> = [];
 
 // Queue up as many icon fetches in 1 transaction
 export const getIcon = (iconName: string) =>
-  new Promise<string>((resolve, reject) => {
+  new Promise<string | undefined>((resolve, reject) => {
     toRead.push([iconName, resolve, reject]);
 
     if (toRead.length > 1) {
       return;
     }
 
-    const results: Array<[(string) => void, IDBRequest]> = [];
-
-    iconStore
-      ._withIDBStore("readonly", (store) => {
-        for (const [iconName_, resolve_] of toRead) {
-          results.push([resolve_, store.get(iconName_)]);
+    promiseTimeout(
+      1000,
+      iconStore("readonly", (store) => {
+        for (const [iconName_, resolve_, reject_] of toRead) {
+          promisifyRequest<string | undefined>(store.get(iconName_))
+            .then((icon) => resolve_(icon))
+            .catch((e) => reject_(e));
         }
         toRead = [];
       })
-      .then(() => {
-        for (const [resolve_, request] of results) {
-          resolve_(request.result);
-        }
-      })
-      .catch(() => {
-        // Firefox in private mode doesn't support IDB
-        for (const [, , reject_] of toRead) {
-          reject_();
-        }
-        toRead = [];
-      });
+    ).catch((e) => {
+      // Firefox in private mode doesn't support IDB
+      // Safari sometime doesn't open the DB so we time out
+      for (const [, , reject_] of toRead) {
+        reject_(e);
+      }
+      toRead = [];
+    });
   });
 
-export const findIconChunk = (icon): string => {
+export const findIconChunk = (icon: string): string => {
   let lastChunk: IconMeta;
   for (const chunk of iconMetadata.parts) {
     if (chunk.start !== undefined && icon < chunk.start) {
@@ -63,7 +63,7 @@ export const writeCache = async (chunks: Chunks) => {
   const keys = Object.keys(chunks);
   const iconsSets: Icons[] = await Promise.all(Object.values(chunks));
   // We do a batch opening the store just once, for (considerable) performance
-  iconStore._withIDBStore("readwrite", (store) => {
+  iconStore("readwrite", (store) => {
     iconsSets.forEach((icons, idx) => {
       Object.entries(icons).forEach(([name, path]) => {
         store.put(path, name);
@@ -73,14 +73,13 @@ export const writeCache = async (chunks: Chunks) => {
   });
 };
 
-export const checkCacheVersion = () => {
-  get("_version", iconStore).then((version) => {
-    if (!version) {
-      set("_version", iconMetadata.version, iconStore);
-    } else if (version !== iconMetadata.version) {
-      clear(iconStore).then(() =>
-        set("_version", iconMetadata.version, iconStore)
-      );
-    }
-  });
+export const checkCacheVersion = async () => {
+  const version = await get("_version", iconStore);
+
+  if (!version) {
+    set("_version", iconMetadata.version, iconStore);
+  } else if (version !== iconMetadata.version) {
+    await clear(iconStore);
+    set("_version", iconMetadata.version, iconStore);
+  }
 };

src/data/network.ts

@@ -0,0 +1,43 @@
+import { HomeAssistant } from "../types";
+
+export interface IPv6ConfiguredAddress {
+  address: string;
+  flowinfo: number;
+  scope_id: number;
+  network_prefix: number;
+}
+
+export interface IPv4ConfiguredAddress {
+  address: string;
+  network_prefix: number;
+}
+
+export interface Adapter {
+  name: string;
+  enabled: boolean;
+  auto: boolean;
+  default: boolean;
+  ipv6: IPv6ConfiguredAddress[];
+  ipv4: IPv4ConfiguredAddress[];
+}
+
+export interface NetworkConfig {
+  adapters: Adapter[];
+  configured_adapters: string[];
+}
+
+export const getNetworkConfig = (hass: HomeAssistant) =>
+  hass.callWS<NetworkConfig>({
+    type: "network",
+  });
+
+export const setNetworkConfig = (
+  hass: HomeAssistant,
+  configured_adapters: string[]
+) =>
+  hass.callWS<string[]>({
+    type: "network/configure",
+    config: {
+      configured_adapters: configured_adapters,
+    },
+  });

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

@@ -3,17 +3,17 @@ import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import { computeRTLDirection } from "../../common/util/compute_rtl";
-import "../../components/ha-circular-progress";
 import "../../components/ha-dialog";
 import "../../components/ha-formfield";
 import "../../components/ha-switch";
 import type { HaSwitch } from "../../components/ha-switch";
 import {
-  getConfigEntrySystemOptions,
-  updateConfigEntrySystemOptions,
+  ConfigEntryMutableParams,
+  updateConfigEntry,
 } from "../../data/config_entries";
 import { haStyleDialog } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
+import { showAlertDialog } from "../generic/show-dialog-box";
 import { ConfigEntrySystemOptionsDialogParams } from "./show-dialog-config-entry-system-options";
 
 @customElement("dialog-config-entry-system-options")
@@ -22,12 +22,12 @@ class DialogConfigEntrySystemOptions extends LitElement {
 
   @state() private _disableNewEntities!: boolean;
 
+  @state() private _disablePolling!: boolean;
+
   @state() private _error?: string;
 
   @state() private _params?: ConfigEntrySystemOptionsDialogParams;
 
-  @state() private _loading = false;
-
   @state() private _submitting = false;
 
   public async showDialog(
@@ -35,13 +35,8 @@ class DialogConfigEntrySystemOptions extends LitElement {
   ): Promise<void> {
     this._params = params;
     this._error = undefined;
-    this._loading = true;
-    const systemOptions = await getConfigEntrySystemOptions(
-      this.hass,
-      params.entry.entry_id
-    );
-    this._loading = false;
-    this._disableNewEntities = systemOptions.disable_new_entities;
+    this._disableNewEntities = params.entry.pref_disable_new_entities;
+    this._disablePolling = params.entry.pref_disable_polling;
   }
 
   public closeDialog(): void {
@@ -66,45 +61,57 @@ class DialogConfigEntrySystemOptions extends LitElement {
             this._params.entry.domain
         )}
       >
-        <div>
-          ${this._loading
-            ? html`
-                <div class="init-spinner">
-                  <ha-circular-progress active></ha-circular-progress>
-                </div>
-              `
-            : html`
-                ${this._error
-                  ? html` <div class="error">${this._error}</div> `
-                  : ""}
-                <div class="form">
-                  <ha-formfield
-                    .label=${html`<p>
-                        ${this.hass.localize(
-                          "ui.dialogs.config_entry_system_options.enable_new_entities_label"
-                        )}
-                      </p>
-                      <p class="secondary">
-                        ${this.hass.localize(
-                          "ui.dialogs.config_entry_system_options.enable_new_entities_description",
-                          "integration",
-                          this.hass.localize(
-                            `component.${this._params.entry.domain}.title`
-                          ) || this._params.entry.domain
-                        )}
-                      </p>`}
-                    .dir=${computeRTLDirection(this.hass)}
-                  >
-                    <ha-switch
-                      .checked=${!this._disableNewEntities}
-                      @change=${this._disableNewEntitiesChanged}
-                      .disabled=${this._submitting}
-                    >
-                    </ha-switch>
-                  </ha-formfield>
-                </div>
-              `}
-        </div>
+        ${this._error ? html` <div class="error">${this._error}</div> ` : ""}
+        <ha-formfield
+          .label=${html`<p>
+              ${this.hass.localize(
+                "ui.dialogs.config_entry_system_options.enable_new_entities_label"
+              )}
+            </p>
+            <p class="secondary">
+              ${this.hass.localize(
+                "ui.dialogs.config_entry_system_options.enable_new_entities_description",
+                "integration",
+                this.hass.localize(
+                  `component.${this._params.entry.domain}.title`
+                ) || this._params.entry.domain
+              )}
+            </p>`}
+          .dir=${computeRTLDirection(this.hass)}
+        >
+          <ha-switch
+            .checked=${!this._disableNewEntities}
+            @change=${this._disableNewEntitiesChanged}
+            .disabled=${this._submitting}
+          ></ha-switch>
+        </ha-formfield>
+        ${this._allowUpdatePolling()
+          ? html`
+              <ha-formfield
+                .label=${html`<p>
+                    ${this.hass.localize(
+                      "ui.dialogs.config_entry_system_options.enable_polling_label"
+                    )}
+                  </p>
+                  <p class="secondary">
+                    ${this.hass.localize(
+                      "ui.dialogs.config_entry_system_options.enable_polling_description",
+                      "integration",
+                      this.hass.localize(
+                        `component.${this._params.entry.domain}.title`
+                      ) || this._params.entry.domain
+                    )}
+                  </p>`}
+                .dir=${computeRTLDirection(this.hass)}
+              >
+                <ha-switch
+                  .checked=${!this._disablePolling}
+                  @change=${this._disablePollingChanged}
+                  .disabled=${this._submitting}
+                ></ha-switch>
+              </ha-formfield>
+            `
+          : ""}
         <mwc-button
           slot="secondaryAction"
           @click=${this.closeDialog}
@@ -115,7 +122,7 @@ class DialogConfigEntrySystemOptions extends LitElement {
         <mwc-button
           slot="primaryAction"
           @click="${this._updateEntry}"
-          .disabled=${this._submitting || this._loading}
+          .disabled=${this._submitting}
         >
           ${this.hass.localize("ui.dialogs.config_entry_system_options.update")}
         </mwc-button>
@@ -123,22 +130,47 @@ class DialogConfigEntrySystemOptions extends LitElement {
     `;
   }
 
+  private _allowUpdatePolling() {
+    return (
+      this._params!.manifest &&
+      (this._params!.manifest.iot_class === "local_polling" ||
+        this._params!.manifest.iot_class === "cloud_polling")
+    );
+  }
+
   private _disableNewEntitiesChanged(ev: Event): void {
     this._error = undefined;
     this._disableNewEntities = !(ev.target as HaSwitch).checked;
   }
 
+  private _disablePollingChanged(ev: Event): void {
+    this._error = undefined;
+    this._disablePolling = !(ev.target as HaSwitch).checked;
+  }
+
   private async _updateEntry(): Promise<void> {
     this._submitting = true;
+    const data: ConfigEntryMutableParams = {
+      pref_disable_new_entities: this._disableNewEntities,
+    };
+    if (this._allowUpdatePolling()) {
+      data.pref_disable_polling = this._disablePolling;
+    }
     try {
-      await updateConfigEntrySystemOptions(
+      const result = await updateConfigEntry(
         this.hass,
         this._params!.entry.entry_id,
-        {
-          disable_new_entities: this._disableNewEntities,
-        }
+        data
       );
-      this._params = undefined;
+      if (result.require_restart) {
+        await showAlertDialog(this, {
+          text: this.hass.localize(
+            "ui.dialogs.config_entry_system_options.restart_home_assistant"
+          ),
+        });
+      }
+      this._params!.entryUpdated(result.config_entry);
+      this.closeDialog();
     } catch (err) {
       this._error = err.message || "Unknown error";
     } finally {
@@ -150,20 +182,6 @@ class DialogConfigEntrySystemOptions extends LitElement {
     return [
       haStyleDialog,
       css`
-        .init-spinner {
-          padding: 50px 100px;
-          text-align: center;
-        }
-
-        .form {
-          padding-top: 6px;
-          padding-bottom: 24px;
-          color: var(--primary-text-color);
-        }
-        .secondary {
-          color: var(--secondary-text-color);
-        }
-
         .error {
           color: var(--error-color);
         }

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

@@ -1,12 +1,11 @@
 import { fireEvent } from "../../common/dom/fire_event";
 import { ConfigEntry } from "../../data/config_entries";
+import { IntegrationManifest } from "../../data/integration";
 
 export interface ConfigEntrySystemOptionsDialogParams {
   entry: ConfigEntry;
-  // updateEntry: (
-  //   updates: Partial<EntityRegistryEntryUpdateParams>
-  // ) => Promise<unknown>;
-  // removeEntry: () => Promise<boolean>;
+  manifest?: IntegrationManifest;
+  entryUpdated(entry: ConfigEntry): void;
 }
 
 export const loadConfigEntrySystemOptionsDialog = () =>

src/dialogs/generic/dialog-box.ts

@@ -49,7 +49,7 @@ class DialogBox extends LitElement {
         open
         ?scrimClickAction=${confirmPrompt}
         ?escapeKeyAction=${confirmPrompt}
-        @closing=${this._dialogClosed}
+        @closed=${this._dialogClosed}
         defaultAction="ignore"
         .heading=${this._params.title
           ? this._params.title

src/dialogs/ha-store-auth-card.js

@@ -1,74 +0,0 @@
-import "@polymer/paper-card/paper-card";
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-/* eslint-plugin-disable lit */
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-import { enableWrite } from "../common/auth/token_storage";
-import LocalizeMixin from "../mixins/localize-mixin";
-import "../styles/polymer-ha-style";
-
-class HaStoreAuth extends LocalizeMixin(PolymerElement) {
-  static get template() {
-    return html`
-      <style include="ha-style">
-        paper-card {
-          position: fixed;
-          padding: 8px 0;
-          bottom: 16px;
-          right: 16px;
-        }
-
-        .card-content {
-          color: var(--primary-text-color);
-        }
-
-        .card-actions {
-          text-align: right;
-          border-top: 0;
-          margin-right: -4px;
-        }
-
-        :host(.small) paper-card {
-          bottom: 0;
-          left: 0;
-          right: 0;
-        }
-      </style>
-      <paper-card elevation="4">
-        <div class="card-content">[[localize('ui.auth_store.ask')]]</div>
-        <div class="card-actions">
-          <mwc-button on-click="_done"
-            >[[localize('ui.auth_store.decline')]]</mwc-button
-          >
-          <mwc-button raised on-click="_save"
-            >[[localize('ui.auth_store.confirm')]]</mwc-button
-          >
-        </div>
-      </paper-card>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: Object,
-    };
-  }
-
-  ready() {
-    super.ready();
-    this.classList.toggle("small", window.innerWidth < 600);
-  }
-
-  _save() {
-    enableWrite();
-    this._done();
-  }
-
-  _done() {
-    const card = this.shadowRoot.querySelector("paper-card");
-    card.style.transition = "bottom .25s";
-    card.style.bottom = `-${card.offsetHeight + 8}px`;
-    setTimeout(() => this.parentNode.removeChild(this), 300);
-  }
-}
-
-customElements.define("ha-store-auth-card", HaStoreAuth);

src/dialogs/ha-store-auth-card.ts

@@ -0,0 +1,78 @@
+import { LitElement, TemplateResult, html, css } from "lit";
+import { property } from "lit/decorators";
+import { enableWrite } from "../common/auth/token_storage";
+import { HomeAssistant } from "../types";
+import "../components/ha-card";
+import type { HaCard } from "../components/ha-card";
+import "@material/mwc-button/mwc-button";
+
+class HaStoreAuth extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  protected render(): TemplateResult {
+    return html`
+      <ha-card>
+        <div class="card-content">
+          ${this.hass.localize("ui.auth_store.ask")}
+        </div>
+        <div class="card-actions">
+          <mwc-button @click=${this._dismiss}>
+            ${this.hass.localize("ui.auth_store.decline")}
+          </mwc-button>
+          <mwc-button raised @click=${this._save}>
+            ${this.hass.localize("ui.auth_store.confirm")}
+          </mwc-button>
+        </div>
+      </ha-card>
+    `;
+  }
+
+  firstUpdated() {
+    this.classList.toggle("small", window.innerWidth < 600);
+  }
+
+  private _save(): void {
+    enableWrite();
+    this._dismiss();
+  }
+
+  private _dismiss(): void {
+    const card = this.shadowRoot!.querySelector("ha-card") as HaCard;
+    card.style.bottom = `-${card.offsetHeight + 8}px`;
+    setTimeout(() => this.parentNode!.removeChild(this), 300);
+  }
+
+  static get styles() {
+    return css`
+      ha-card {
+        position: fixed;
+        padding: 8px 0;
+        bottom: 16px;
+        right: 16px;
+        transition: bottom 0.25s;
+        --ha-card-box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
+          0px 6px 10px 0px rgba(0, 0, 0, 0.14),
+          0px 1px 18px 0px rgba(0, 0, 0, 0.12);
+      }
+
+      .card-actions {
+        text-align: right;
+        border-top: 0;
+      }
+
+      :host(.small) ha-card {
+        bottom: 0;
+        left: 0;
+        right: 0;
+      }
+    `;
+  }
+}
+
+customElements.define("ha-store-auth-card", HaStoreAuth);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-store-auth-card": HaStoreAuth;
+  }
+}

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

@@ -23,11 +23,6 @@ class MoreInfoPerson extends LitElement {
     }
 
     return html`
-      <ha-attributes
-        .hass=${this.hass}
-        .stateObj=${this.stateObj}
-        extra-filters="id,user_id,editable"
-      ></ha-attributes>
       ${this.stateObj.attributes.latitude && this.stateObj.attributes.longitude
         ? html`
             <ha-map
@@ -51,6 +46,11 @@ class MoreInfoPerson extends LitElement {
             </div>
           `
         : ""}
+      <ha-attributes
+        .hass=${this.hass}
+        .stateObj=${this.stateObj}
+        extra-filters="id,user_id,editable"
+      ></ha-attributes>
     `;
   }
 

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

@@ -17,11 +17,6 @@ class MoreInfoTimer extends LitElement {
     }
 
     return html`
-      <ha-attributes
-        .hass=${this.hass}
-        .stateObj=${this.stateObj}
-        extra-filters="remaining"
-      ></ha-attributes>
       <div class="actions">
         ${this.stateObj.state === "idle" || this.stateObj.state === "paused"
           ? html`
@@ -57,6 +52,11 @@ class MoreInfoTimer extends LitElement {
             `
           : ""}
       </div>
+      <ha-attributes
+        .hass=${this.hass}
+        .stateObj=${this.stateObj}
+        extra-filters="remaining"
+      ></ha-attributes>
     `;
   }
 

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

@@ -108,7 +108,7 @@ class MoreInfoWeather extends LitElement {
                   this.stateObj.attributes.pressure,
                   this.hass.locale
                 )}
-                ${getWeatherUnit(this.hass, "air_pressure")}
+                ${getWeatherUnit(this.hass, "pressure")}
               </div>
             </div>
           `

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

@@ -8,7 +8,7 @@ import "../../components/state-history-charts";
 import { getLogbookData, LogbookEntry } from "../../data/logbook";
 import { loadTraceContexts, TraceContexts } from "../../data/trace";
 import "../../panels/logbook/ha-logbook";
-import { haStyle, haStyleScrollbar } from "../../resources/styles";
+import { haStyle } from "../../resources/styles";
 import { HomeAssistant } from "../../types";
 import { closeDialog } from "../make-dialog-manager";
 
@@ -52,7 +52,6 @@ export class MoreInfoLogbook extends LitElement {
           : this._logbookEntries.length
           ? html`
               <ha-logbook
-                class="ha-scrollbar"
                 narrow
                 no-icon
                 no-name
@@ -149,7 +148,6 @@ export class MoreInfoLogbook extends LitElement {
   static get styles() {
     return [
       haStyle,
-      haStyleScrollbar,
       css`
         .no-entries {
           text-align: center;
@@ -157,12 +155,11 @@ export class MoreInfoLogbook extends LitElement {
           color: var(--secondary-text-color);
         }
         ha-logbook {
-          max-height: 250px;
-          overflow: auto;
+          --logbook-max-height: 250px;
         }
         @media all and (max-width: 450px), all and (max-height: 500px) {
           ha-logbook {
-            max-height: unset;
+            --logbook-max-height: unset;
           }
         }
         ha-circular-progress {

src/dialogs/quick-bar/ha-quick-bar.ts

@@ -1,4 +1,4 @@
-import { Layout1d, scroll } from "@lit-labs/virtualizer";
+import { Layout1d, scroll } from "../../resources/lit-virtualizer";
 import "@material/mwc-list/mwc-list";
 import type { List } from "@material/mwc-list/mwc-list";
 import { SingleSelectedEvent } from "@material/mwc-list/mwc-list-foundation";
@@ -188,7 +188,6 @@ export class QuickBar extends LitElement {
               ${scroll({
                 items,
                 layout: Layout1d,
-                // @ts-expect-error
                 renderItem: (item: QuickBarItem, index) =>
                   this._renderItem(item, index),
               })}
@@ -223,6 +222,9 @@ export class QuickBar extends LitElement {
   }
 
   private _renderItem(item: QuickBarItem, index?: number) {
+    if (!item) {
+      return html``;
+    }
     return isCommandItem(item)
       ? this._renderCommandItem(item, index)
       : this._renderEntityItem(item as EntityItem, index);
@@ -636,18 +638,6 @@ export class QuickBar extends LitElement {
           margin-left: 8px;
         }
 
-        .uni-virtualizer-host {
-          display: block;
-          position: relative;
-          contain: strict;
-          overflow: auto;
-          height: 100%;
-        }
-
-        .uni-virtualizer-host > * {
-          box-sizing: border-box;
-        }
-
         mwc-list-item {
           width: 100%;
         }

src/fake_data/provide_hass.ts

@@ -277,7 +277,7 @@ export const provideHass = (
     mockTheme(theme) {
       invalidateThemeCache();
       hass().updateHass({
-        selectedThemeSettings: { theme: theme ? "mock" : "default" },
+        selectedTheme: { theme: theme ? "mock" : "default" },
         themes: {
           ...hass().themes,
           themes: {
@@ -285,11 +285,11 @@ export const provideHass = (
           },
         },
       });
-      const { themes, selectedThemeSettings } = hass();
+      const { themes, selectedTheme } = hass();
       applyThemesOnElement(
         document.documentElement,
         themes,
-        selectedThemeSettings!.theme
+        selectedTheme!.theme
       );
     },
 

src/html/authorize.html.template

@@ -48,6 +48,9 @@
       window.providersPromise = fetch("/auth/providers", {
         credentials: "same-origin",
       });
+      if (!window.globalThis) {
+        window.globalThis = window;
+      }
     </script>
 
     <script>

src/html/index.html.template

@@ -71,6 +71,9 @@
       import("<%= latestAppJS %>");
       window.customPanelJS = "<%= latestCustomPanelJS %>";
       window.latestJS = true;
+      if (!window.globalThis) {
+        window.globalThis = window;
+      }
     </script>
     <script>
     {% for extra_module in extra_modules -%}

src/html/onboarding.html.template

@@ -80,6 +80,9 @@
       window.stepsPromise = fetch("/api/onboarding", {
         credentials: "same-origin",
       });
+      if (!window.globalThis) {
+        window.globalThis = window;
+      }
     </script>
 
     <script>

src/layouts/hass-tabs-subpage.ts

@@ -229,7 +229,7 @@ class HassTabsSubpage extends LitElement {
         color: var(--sidebar-text-color);
         text-decoration: none;
       }
-      :host([narrow]) .toolbar a {
+      .bottom-bar a {
         width: 25%;
       }
 

src/layouts/supervisor-error-screen.ts

@@ -81,27 +81,25 @@ class SupervisorErrorScreen extends LitElement {
 
   private _applyTheme() {
     let themeName: string;
-    let themeSettings:
-      | Partial<HomeAssistant["selectedThemeSettings"]>
-      | undefined;
+    let themeSettings: Partial<HomeAssistant["selectedTheme"]> | undefined;
 
     if (atLeastVersion(this.hass.config.version, 0, 114)) {
       themeName =
-        this.hass.selectedThemeSettings?.theme ||
+        this.hass.selectedTheme?.theme ||
         (this.hass.themes.darkMode && this.hass.themes.default_dark_theme
           ? this.hass.themes.default_dark_theme!
           : this.hass.themes.default_theme);
 
-      themeSettings = this.hass.selectedThemeSettings;
+      themeSettings = this.hass.selectedTheme;
       if (themeName === "default" && themeSettings?.dark === undefined) {
         themeSettings = {
-          ...this.hass.selectedThemeSettings,
+          ...this.hass.selectedTheme,
           dark: this.hass.themes.darkMode,
         };
       }
     } else {
       themeName =
-        ((this.hass.selectedThemeSettings as unknown) as string) ||
+        ((this.hass.selectedTheme as unknown) as string) ||
         this.hass.themes.default_theme;
     }
 

src/panels/calendar/ha-full-calendar.ts

@@ -90,9 +90,9 @@ export class HAFullCalendar extends LitElement {
 
   @property() public initialView: FullCalendarView = "dayGridMonth";
 
-  @state() private calendar?: Calendar;
+  private calendar?: Calendar;
 
-  @state() private _activeView?: FullCalendarView;
+  @state() private _activeView = this.initialView;
 
   public updateSize(): void {
     this.calendar?.updateSize();
@@ -181,8 +181,8 @@ export class HAFullCalendar extends LitElement {
     `;
   }
 
-  protected updated(changedProps: PropertyValues): void {
-    super.updated(changedProps);
+  public willUpdate(changedProps: PropertyValues): void {
+    super.willUpdate(changedProps);
 
     if (!this.calendar) {
       return;
@@ -216,8 +216,6 @@ export class HAFullCalendar extends LitElement {
       initialView: this.initialView,
     };
 
-    this._activeView = this.initialView;
-
     config.dateClick = (info) => this._handleDateClick(info);
     config.eventClick = (info) => this._handleEventClick(info);
 

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

@@ -48,9 +48,11 @@ class PanelCalendar extends LitElement {
 
   private _end?: Date;
 
-  protected firstUpdated(changedProps: PropertyValues): void {
-    super.firstUpdated(changedProps);
-    this._calendars = getCalendars(this.hass);
+  public willUpdate(changedProps: PropertyValues): void {
+    super.willUpdate(changedProps);
+    if (!this.hasUpdated) {
+      this._calendars = getCalendars(this.hass);
+    }
   }
 
   protected render(): TemplateResult {

src/panels/config/automation/trace/ha-automation-trace-blueprint-config.ts

@@ -1,4 +1,4 @@
-import { safeDump } from "js-yaml";
+import { dump } from "js-yaml";
 import { html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import "../../../../components/ha-code-editor";
@@ -15,7 +15,7 @@ export class HaAutomationTraceBlueprintConfig extends LitElement {
   protected render(): TemplateResult {
     return html`
       <ha-code-editor
-        .value=${safeDump(this.trace.blueprint_inputs || "").trimRight()}
+        .value=${dump(this.trace.blueprint_inputs || "").trimRight()}
         readOnly
       ></ha-code-editor>
     `;

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

@@ -1,4 +1,4 @@
-import { safeDump } from "js-yaml";
+import { dump } from "js-yaml";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import "../../../../components/ha-code-editor";
@@ -15,7 +15,7 @@ export class HaAutomationTraceConfig extends LitElement {
   protected render(): TemplateResult {
     return html`
       <ha-code-editor
-        .value=${safeDump(this.trace.config).trimRight()}
+        .value=${dump(this.trace.config).trimRight()}
         readOnly
       ></ha-code-editor>
     `;

src/panels/config/automation/trace/ha-automation-trace-path-details.ts

@@ -1,4 +1,4 @@
-import { safeDump } from "js-yaml";
+import { dump } from "js-yaml";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
@@ -132,13 +132,13 @@ export class HaAutomationTracePathDetails extends LitElement {
             )}<br />
             ${result
               ? html`Result:
-                  <pre>${safeDump(result)}</pre>`
+                  <pre>${dump(result)}</pre>`
               : error
               ? html`<div class="error">Error: ${error}</div>`
               : ""}
             ${Object.keys(rest).length === 0
               ? ""
-              : html`<pre>${safeDump(rest)}</pre>`}
+              : html`<pre>${dump(rest)}</pre>`}
           `;
         })
       );
@@ -154,7 +154,7 @@ export class HaAutomationTracePathDetails extends LitElement {
     const config = getDataFromPath(this.trace!.config, this.selected.path);
     return config
       ? html`<ha-code-editor
-          .value=${safeDump(config).trimRight()}
+          .value=${dump(config).trimRight()}
           readOnly
         ></ha-code-editor>`
       : "Unable to find config";
@@ -171,9 +171,7 @@ export class HaAutomationTracePathDetails extends LitElement {
             ${idx > 0 ? html`<p>Iteration ${idx + 1}</p>` : ""}
             ${Object.keys(trace.changed_variables || {}).length === 0
               ? "No variables changed"
-              : html`<pre>
-${safeDump(trace.changed_variables).trimRight()}</pre
-                >`}
+              : html`<pre>${dump(trace.changed_variables).trimRight()}</pre>`}
           `
         )}
       </div>

src/panels/config/automation/trigger/types/ha-automation-trigger-tag.ts

@@ -6,7 +6,7 @@ import { TagTrigger } from "../../../../../data/automation";
 import { fetchTags, Tag } from "../../../../../data/tag";
 import { HomeAssistant } from "../../../../../types";
 import { TriggerElement } from "../ha-automation-trigger-row";
-
+import "../../../../../components/ha-paper-dropdown-menu";
 @customElement("ha-automation-trigger-tag")
 export class HaTagTrigger extends LitElement implements TriggerElement {
   @property({ attribute: false }) public hass!: HomeAssistant;

src/panels/config/core/ha-config-network.ts

@@ -0,0 +1,141 @@
+import "@material/mwc-button/mwc-button";
+import {
+  css,
+  CSSResultGroup,
+  html,
+  LitElement,
+  PropertyValues,
+  TemplateResult,
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { isComponentLoaded } from "../../../common/config/is_component_loaded";
+import "../../../components/ha-card";
+import "../../../components/ha-checkbox";
+import "../../../components/ha-network";
+import "../../../components/ha-settings-row";
+import { fetchNetworkInfo } from "../../../data/hassio/network";
+import {
+  getNetworkConfig,
+  NetworkConfig,
+  setNetworkConfig,
+} from "../../../data/network";
+import { haStyle } from "../../../resources/styles";
+import type { HomeAssistant } from "../../../types";
+
+@customElement("ha-config-network")
+class ConfigNetwork extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @state() private _networkConfig?: NetworkConfig;
+
+  @state() private _error?: string;
+
+  protected render(): TemplateResult {
+    if (
+      !this.hass.userData?.showAdvanced ||
+      !isComponentLoaded(this.hass, "network")
+    ) {
+      return html``;
+    }
+
+    return html`
+      <ha-card header="Network">
+        <div class="card-content">
+          ${this._error ? html`<div class="error">${this._error}</div>` : ""}
+          <p>
+            Configure which network adapters integrations will use. Currently
+            this setting only affects multicast traffic. A restart is required
+            for these settings to apply.
+          </p>
+          <ha-network
+            @network-config-changed=${this._configChanged}
+            .hass=${this.hass}
+            .networkConfig=${this._networkConfig}
+          ></ha-network>
+        </div>
+        <div class="card-actions">
+          <mwc-button @click=${this._save}>
+            ${this.hass.localize(
+              "ui.panel.config.core.section.core.core_config.save_button"
+            )}
+          </mwc-button>
+        </div>
+      </ha-card>
+    `;
+  }
+
+  protected firstUpdated(changedProps: PropertyValues) {
+    super.firstUpdated(changedProps);
+    if (isComponentLoaded(this.hass, "network")) {
+      this._load();
+    }
+  }
+
+  private async _load() {
+    this._error = undefined;
+    try {
+      const coreNetwork = await getNetworkConfig(this.hass);
+      if (isComponentLoaded(this.hass, "hassio")) {
+        const supervisorNetwork = await fetchNetworkInfo(this.hass);
+        const interfaces = new Set(
+          supervisorNetwork.interfaces.map((int) => int.interface)
+        );
+        if (interfaces.size) {
+          coreNetwork.adapters = coreNetwork.adapters.filter((adapter) =>
+            interfaces.has(adapter.name)
+          );
+        }
+      }
+      this._networkConfig = coreNetwork;
+    } catch (err) {
+      this._error = err.message || err;
+    }
+  }
+
+  private async _save() {
+    this._error = undefined;
+    try {
+      await setNetworkConfig(
+        this.hass,
+        this._networkConfig?.configured_adapters || []
+      );
+    } catch (err) {
+      this._error = err.message || err;
+    }
+  }
+
+  private _configChanged(event: CustomEvent): void {
+    this._networkConfig = {
+      ...this._networkConfig!,
+      configured_adapters: event.detail.configured_adapters,
+    };
+  }
+
+  static get styles(): CSSResultGroup {
+    return [
+      haStyle,
+      css`
+        .error {
+          color: var(--error-color);
+        }
+
+        ha-settings-row {
+          padding: 0;
+        }
+
+        .card-actions {
+          display: flex;
+          flex-direction: row-reverse;
+          justify-content: space-between;
+          align-items: center;
+        }
+      `, // row-reverse so we tab first to "save"
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-config-network": ConfigNetwork;
+  }
+}

src/panels/config/core/ha-config-section-core.js

@@ -11,6 +11,7 @@ import "../ha-config-section";
 import "./ha-config-analytics";
 import "./ha-config-core-form";
 import "./ha-config-name-form";
+import "./ha-config-network";
 import "./ha-config-url-form";
 
 /*
@@ -30,6 +31,7 @@ class HaConfigSectionCore extends LocalizeMixin(PolymerElement) {
         <ha-config-name-form hass="[[hass]]"></ha-config-name-form>
         <ha-config-core-form hass="[[hass]]"></ha-config-core-form>
         <ha-config-url-form hass="[[hass]]"></ha-config-url-form>
+        <ha-config-network hass="[[hass]]"></ha-config-network>
         <ha-config-analytics hass="[[hass]]"></ha-config-analytics>
       </ha-config-section>
     `;

src/panels/config/devices/device-detail/integration-elements/mqtt/dialog-mqtt-device-debug-info.ts

@@ -49,7 +49,7 @@ class DialogMQTTDeviceDebugInfo extends LitElement {
     return html`
       <ha-dialog
         open
-        @closing=${this._close}
+        @closed=${this._close}
         .heading="${this.hass!.localize(
           "ui.dialogs.mqtt_device_debug_info.title",
           "device",

src/panels/config/devices/device-detail/integration-elements/mqtt/mqtt-discovery-payload.ts

@@ -1,4 +1,4 @@
-import { safeDump } from "js-yaml";
+import { dump } from "js-yaml";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
@@ -31,7 +31,7 @@ class MQTTDiscoveryPayload extends LitElement {
     const payload = this.payload;
     return html`
       ${this.showAsYaml
-        ? html` <pre>${safeDump(payload)}</pre> `
+        ? html` <pre>${dump(payload)}</pre> `
         : html` <pre>${JSON.stringify(payload, null, 2)}</pre> `}
     `;
   }

src/panels/config/devices/device-detail/integration-elements/mqtt/mqtt-messages.ts

@@ -1,4 +1,4 @@
-import { safeDump } from "js-yaml";
+import { dump } from "js-yaml";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
@@ -92,7 +92,7 @@ class MQTTMessages extends LitElement {
     return json
       ? html`
           ${this.showAsYaml
-            ? html` <pre>${safeDump(json)}</pre> `
+            ? html` <pre>${dump(json)}</pre> `
             : html` <pre>${JSON.stringify(json, null, 2)}</pre> `}
         `
       : html` <code>${message.payload}</code> `;

src/panels/config/devices/ha-config-device-page.ts

@@ -11,7 +11,11 @@ import { slugify } from "../../../common/string/slugify";
 import "../../../components/entity/ha-battery-icon";
 import "../../../components/ha-icon-next";
 import { AreaRegistryEntry } from "../../../data/area_registry";
-import { ConfigEntry, disableConfigEntry } from "../../../data/config_entries";
+import {
+  ConfigEntry,
+  disableConfigEntry,
+  DisableConfigEntryResult,
+} from "../../../data/config_entries";
 import {
   computeDeviceName,
   DeviceRegistryEntry,
@@ -25,7 +29,10 @@ import {
 } from "../../../data/entity_registry";
 import { SceneEntities, showSceneEditor } from "../../../data/scene";
 import { findRelated, RelatedResult } from "../../../data/search";
-import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box";
+import {
+  showAlertDialog,
+  showConfirmationDialog,
+} from "../../../dialogs/generic/show-dialog-box";
 import "../../../layouts/hass-error-screen";
 import "../../../layouts/hass-tabs-subpage";
 import { haStyle } from "../../../resources/styles";
@@ -671,13 +678,41 @@ export class HaConfigDevicePage extends LitElement {
                   dismissText: this.hass.localize("ui.common.no"),
                 }))
               ) {
-                disableConfigEntry(this.hass, cnfg_entry);
+                let result: DisableConfigEntryResult;
+                try {
+                  // eslint-disable-next-line no-await-in-loop
+                  result = await disableConfigEntry(this.hass, cnfg_entry);
+                } catch (err) {
+                  showAlertDialog(this, {
+                    title: this.hass.localize(
+                      "ui.panel.config.integrations.config_entry.disable_error"
+                    ),
+                    text: err.message,
+                  });
+                  return;
+                }
+                if (result.require_restart) {
+                  showAlertDialog(this, {
+                    text: this.hass.localize(
+                      "ui.panel.config.integrations.config_entry.disable_restart_confirm"
+                    ),
+                  });
+                }
                 delete updates.disabled_by;
               }
             }
           }
         }
-        await updateDeviceRegistryEntry(this.hass, this.deviceId, updates);
+        try {
+          await updateDeviceRegistryEntry(this.hass, this.deviceId, updates);
+        } catch (err) {
+          showAlertDialog(this, {
+            title: this.hass.localize(
+              "ui.panel.config.devices.update_device_error"
+            ),
+            text: err.message,
+          });
+        }
 
         if (
           !oldDeviceName ||

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

@@ -68,7 +68,7 @@ export class DialogHelperDetail extends LitElement {
     return html`
       <ha-dialog
         .open=${this._opened}
-        @closing=${this.closeDialog}
+        @closed=${this.closeDialog}
         class=${classMap({ "button-left": !this._platform })}
         scrimClickAction
         escapeKeyAction

src/panels/config/helpers/forms/ha-input_number-form.ts

@@ -193,9 +193,6 @@ class HaInputNumberForm extends LitElement {
         .form {
           color: var(--primary-text-color);
         }
-        ha-paper-dropdown-menu {
-          display: block;
-        }
       `,
     ];
   }

src/panels/config/helpers/forms/ha-input_select-form.ts

@@ -196,9 +196,6 @@ class HaInputSelectForm extends LitElement {
         mwc-button {
           margin-left: 8px;
         }
-        ha-paper-dropdown-menu {
-          display: block;
-        }
       `,
     ];
   }