Change function name

.devcontainer/devcontainer.json

@@ -4,7 +4,7 @@
     "dockerfile": "Dockerfile",
     "context": ".."
   },
-  "appPort": "8124:8123",
+  "appPort": 8123,
   "context": "..",
   "postCreateCommand": "script/bootstrap",
   "extensions": [

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -1,138 +0,0 @@
-name: Report a bug with the UI, Frontend or Lovelace
-about: Report an issue related to the Home Assistant frontend.
-labels: bug
-title: ""
-issue_body: true
-body:
-  - type: markdown
-    attributes:
-      value: |
-        Make sure you are running the [latest version of Home Assistant][releases] before reporting an issue.
-
-        If you have a feature or enhancement request for the frontend, please [start an discussion][fr] instead of creating an issue.
-
-        **Please not not report issues for custom Lovelace cards.**
-
-        [fr]: https://github.com/home-assistant/frontend/discussions
-        [releases]: https://github.com/home-assistant/home-assistant/releases
-  - type: checkboxes
-    attributes:
-      label: Checklist
-      description: Please verify that you've followed these steps
-      options:
-        - label: I have updated to the latest available Home Assistant version.
-          required: true
-        - label: I have cleared the cache of my browser.
-          required: true
-        - label: I have tried a different browser to see if it is related to my browser.
-          required: true
-  - type: markdown
-    attributes:
-      value: |
-        ## The problem
-  - type: textarea
-    validations:
-      required: true
-    attributes:
-      label: Describe the issue you are experiencing
-      description: Provide a clear and concise description of what the bug is.
-  - type: textarea
-    validations:
-      required: true
-    attributes:
-      label: Describe the behavior you expected
-      description: Describe what you expected to happen or it should look/behave.
-  - type: textarea
-    validations:
-      required: true
-    attributes:
-      label: Steps to reproduce the issue
-      description: |
-        Please tell us exactly how to reproduce your issue.
-        Provide clear and concise step by step instructions and add code snippets if needed.
-      value: |
-        1.
-        2.
-        3.
-        ...
-  - type: markdown
-    attributes:
-      value: |
-        ## Environment
-  - type: input
-    validations:
-      required: true
-    attributes:
-      label: What version of Home Assistant Core has the issue?
-      placeholder: core-
-      description: >
-        Can be found in the Configuration panel -> Info.
-  - type: input
-    attributes:
-      label: What was the last working version of Home Assistant Core?
-      placeholder: core-
-      description: >
-        If known, otherwise leave blank.
-  - type: input
-    attributes:
-      label: In which browser are you experiencing the issue with?
-      placeholder: Google Chrome 88.0.4324.150
-      description: >
-        Provide the full name and don't forget to add the version!
-  - type: input
-    attributes:
-      label: Which operating system are you using to run this browser?
-      placeholder: macOS Big Sur (1.11)
-      description: >
-        Don't forget to add the version!
-  - type: markdown
-    attributes:
-      value: |
-        # Details
-
-  - type: textarea
-    attributes:
-      label: State of relevant entities
-      description: >
-        If your issue is about how an entity is shown in the UI, please add the
-        state and attributes for all situations. You can find this information
-        at Developer Tools -> States.
-      value: |
-        ```yaml
-        # Paste your state here.
-
-        ```
-  - type: textarea
-    attributes:
-      label: Problem-relevant frontend configuration
-      description: >
-        An example configuration that caused the problem for you, e.g., the YAML
-        configuration of the used cards. Fill this out even if it seems
-        unimportant to you. Please be sure to remove personal information like
-        passwords, private URLs and other credentials.
-      value: |
-        ```yaml
-        # Paste your YAML here.
-
-        ```
-  - type: textarea
-    attributes:
-      label: Javascript errors shown in your browser console/inspector
-      description: >
-        If you come across any Javascript or other error logs, e.g., in your
-        browser console/inspector please provide them.
-      value: |
-        ```txt
-        # Paste your logs here.
-
-        ```
-  - type: markdown
-    attributes:
-      value: |
-        ## Additional information
-  - type: markdown
-    attributes:
-      value: |
-        If you have any additional information for us, use the field below.
-        Please note, you can attach screenshots or screen recordings here,
-        by dragging and dropping files in the field below.

build-scripts/gulp/translations.js

@@ -369,13 +369,14 @@ gulp.task(
             const newData = {};
             Object.entries(data).forEach(([key, value]) => {
               // Filter out translations without native name.
-              if (value.nativeName) {
-                newData[key] = value;
+              if (data[key].nativeName) {
+                newData[key] = data[key];
               } else {
                 console.warn(
                   `Skipping language ${key}. Native name was not translated.`
                 );
               }
+              if (data[key]) newData[key] = value;
             });
             return newData;
           })

build-scripts/webpack.js

@@ -1,7 +1,7 @@
 const webpack = require("webpack");
 const path = require("path");
 const TerserPlugin = require("terser-webpack-plugin");
-const { WebpackManifestPlugin } = require("webpack-manifest-plugin");
+const ManifestPlugin = require("webpack-manifest-plugin");
 const paths = require("./paths.js");
 const bundle = require("./bundle");
 const log = require("fancy-log");
@@ -68,7 +68,7 @@ const createWebpackConfig = ({
       ],
     },
     plugins: [
-      new WebpackManifestPlugin({
+      new ManifestPlugin({
         // Only include the JS of entrypoints
         filter: (file) => file.isInitial && !file.name.endsWith(".map"),
       }),

cast/src/launcher/layout/hc-cast.ts

@@ -48,7 +48,7 @@ class HcCast extends LitElement {
 
   protected render(): TemplateResult {
     if (this.lovelaceConfig === undefined) {
-      return html`<hass-loading-screen no-toolbar></hass-loading-screen>`;
+      return html` <hass-loading-screen no-toolbar></hass-loading-screen>> `;
     }
 
     const error =

cast/src/launcher/layout/hc-layout.ts

@@ -98,12 +98,8 @@ class HcLayout extends LitElement {
         line-height: 32px;
         padding: 24px 16px 16px;
         display: block;
-        margin: 0;
-      }
-	
-      .hero {
-        border-radius: 4px 4px 0 0;
       }
+
       .subtitle {
         font-size: 14px;
         color: var(--secondary-text-color);

hassio/src/addon-store/hassio-addon-store.ts

@@ -11,18 +11,19 @@ import {
   PropertyValues,
 } from "lit-element";
 import { html, TemplateResult } from "lit-html";
-import memoizeOne from "memoize-one";
 import { atLeastVersion } from "../../../src/common/config/version";
 import { fireEvent } from "../../../src/common/dom/fire_event";
 import "../../../src/common/search/search-input";
 import "../../../src/components/ha-button-menu";
 import "../../../src/components/ha-svg-icon";
 import {
+  fetchHassioAddonsInfo,
   HassioAddonInfo,
   HassioAddonRepository,
   reloadHassioAddons,
 } from "../../../src/data/hassio/addon";
-import { Supervisor } from "../../../src/data/supervisor/supervisor";
+import { extractApiErrorMessage } from "../../../src/data/hassio/common";
+import { fetchHassioSupervisorInfo } from "../../../src/data/hassio/supervisor";
 import "../../../src/layouts/hass-loading-screen";
 import "../../../src/layouts/hass-tabs-subpage";
 import { HomeAssistant, Route } from "../../../src/types";
@@ -50,28 +51,46 @@ const sortRepos = (a: HassioAddonRepository, b: HassioAddonRepository) => {
 class HassioAddonStore extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property({ attribute: false }) public supervisor!: Supervisor;
-
   @property({ type: Boolean }) public narrow!: boolean;
 
   @property({ attribute: false }) public route!: Route;
 
+  @property({ attribute: false }) private _addons?: HassioAddonInfo[];
+
+  @property({ attribute: false }) private _repos?: HassioAddonRepository[];
+
   @internalProperty() private _filter?: string;
 
   public async refreshData() {
+    this._repos = undefined;
+    this._addons = undefined;
+    this._filter = undefined;
     await reloadHassioAddons(this.hass);
     await this._loadData();
   }
 
   protected render(): TemplateResult {
-    let repos: TemplateResult[] = [];
+    const repos: TemplateResult[] = [];
 
-    if (this.supervisor.addon.repositories) {
-      repos = this.addonRepositories(
-        this.supervisor.addon.repositories,
-        this.supervisor.addon.addons,
-        this._filter
-      );
+    if (this._repos) {
+      for (const repo of this._repos) {
+        const addons = this._addons!.filter(
+          (addon) => addon.repository === repo.slug
+        );
+
+        if (addons.length === 0) {
+          continue;
+        }
+
+        repos.push(html`
+          <hassio-addon-repository
+            .hass=${this.hass}
+            .repo=${repo}
+            .addons=${addons}
+            .filter=${this._filter!}
+          ></hassio-addon-repository>
+        `);
+      }
     }
 
     return html`
@@ -140,31 +159,6 @@ class HassioAddonStore extends LitElement {
     this._loadData();
   }
 
-  private addonRepositories = memoizeOne(
-    (
-      repositories: HassioAddonRepository[],
-      addons: HassioAddonInfo[],
-      filter?: string
-    ) => {
-      return repositories.sort(sortRepos).map((repo) => {
-        const filteredAddons = addons.filter(
-          (addon) => addon.repository === repo.slug
-        );
-
-        return filteredAddons.length !== 0
-          ? html`
-              <hassio-addon-repository
-                .hass=${this.hass}
-                .repo=${repo}
-                .addons=${filteredAddons}
-                .filter=${filter!}
-              ></hassio-addon-repository>
-            `
-          : html``;
-      });
-    }
-  );
-
   private _handleAction(ev: CustomEvent<ActionDetail>) {
     switch (ev.detail.index) {
       case 0:
@@ -187,7 +181,7 @@ class HassioAddonStore extends LitElement {
 
   private async _manageRepositories() {
     showRepositoriesDialog(this, {
-      repos: this.supervisor.addon.repositories,
+      repos: this._repos!,
       loadData: () => this._loadData(),
     });
   }
@@ -197,10 +191,18 @@ class HassioAddonStore extends LitElement {
   }
 
   private async _loadData() {
-    fireEvent(this, "supervisor-colllection-refresh", { colllection: "addon" });
-    fireEvent(this, "supervisor-colllection-refresh", {
-      colllection: "supervisor",
-    });
+    try {
+      const [addonsInfo, supervisor] = await Promise.all([
+        fetchHassioAddonsInfo(this.hass),
+        fetchHassioSupervisorInfo(this.hass),
+      ]);
+      fireEvent(this, "supervisor-update", { supervisor });
+      this._repos = addonsInfo.repositories;
+      this._repos.sort(sortRepos);
+      this._addons = addonsInfo.addons;
+    } catch (err) {
+      alert(extractApiErrorMessage(err));
+    }
   }
 
   private async _filterChanged(e) {

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

@@ -26,15 +26,16 @@ class HassioAddonConfigDashboard extends LitElement {
     if (!this.addon) {
       return html`<ha-circular-progress active></ha-circular-progress>`;
     }
-    const hasConfiguration =
-      (this.addon.options && Object.keys(this.addon.options).length) ||
-      (this.addon.schema && Object.keys(this.addon.schema).length);
+    const hasOptions =
+      this.addon.options && Object.keys(this.addon.options).length;
+    const hasSchema =
+      this.addon.schema && Object.keys(this.addon.schema).length;
 
     return html`
       <div class="content">
-        ${hasConfiguration || this.addon.network || this.addon.audio
+        ${hasOptions || hasSchema || this.addon.network || this.addon.audio
           ? html`
-              ${hasConfiguration
+              ${hasOptions || hasSchema
                 ? html`
                     <hassio-addon-config
                       .hass=${this.hass}

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

@@ -15,15 +15,11 @@ import {
   query,
   TemplateResult,
 } from "lit-element";
-import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
 import "../../../../src/components/buttons/ha-progress-button";
 import "../../../../src/components/ha-button-menu";
 import "../../../../src/components/ha-card";
 import "../../../../src/components/ha-form/ha-form";
-import type { HaFormSchema } from "../../../../src/components/ha-form/ha-form";
-import "../../../../src/components/ha-formfield";
-import "../../../../src/components/ha-switch";
 import "../../../../src/components/ha-yaml-editor";
 import type { HaYamlEditor } from "../../../../src/components/ha-yaml-editor";
 import {
@@ -52,8 +48,6 @@ class HassioAddonConfig extends LitElement {
 
   @internalProperty() private _canShowSchema = false;
 
-  @internalProperty() private _showOptional = false;
-
   @internalProperty() private _error?: string;
 
   @internalProperty() private _options?: Record<string, unknown>;
@@ -62,21 +56,7 @@ class HassioAddonConfig extends LitElement {
 
   @query("ha-yaml-editor") private _editor?: HaYamlEditor;
 
-  private _filteredShchema = memoizeOne(
-    (options: Record<string, unknown>, schema: HaFormSchema[]) => {
-      return schema.filter((entry) => entry.name in options || entry.required);
-    }
-  );
-
   protected render(): TemplateResult {
-    const showForm =
-      !this._yamlMode && this._canShowSchema && this.addon.schema;
-    const hasHiddenOptions =
-      showForm &&
-      JSON.stringify(this.addon.schema) !==
-        JSON.stringify(
-          this._filteredShchema(this.addon.options, this.addon.schema!)
-        );
     return html`
       <h1>${this.addon.name}</h1>
       <ha-card>
@@ -98,16 +78,11 @@ class HassioAddonConfig extends LitElement {
         </div>
 
         <div class="card-content">
-          ${showForm
+          ${!this._yamlMode && this._canShowSchema && this.addon.schema
             ? html`<ha-form
                 .data=${this._options!}
                 @value-changed=${this._configChanged}
-                .schema=${this._showOptional
-                  ? this.addon.schema!
-                  : this._filteredShchema(
-                      this.addon.options,
-                      this.addon.schema!
-                    )}
+                .schema=${this.addon.schema}
               ></ha-form>`
             : html` <ha-yaml-editor
                 @value-changed=${this._configChanged}
@@ -119,19 +94,7 @@ class HassioAddonConfig extends LitElement {
             ? ""
             : html` <div class="errors">Invalid YAML</div> `}
         </div>
-        ${hasHiddenOptions
-          ? html`<ha-formfield
-              class="show-additional"
-              label="Show unused optional configuration options"
-            >
-              <ha-switch
-                @change=${this._toggleOptional}
-                .checked=${this._showOptional}
-              >
-              </ha-switch>
-            </ha-formfield>`
-          : ""}
-        <div class="card-actions right">
+        <div class="card-actions">
           <ha-progress-button
             @click=${this._saveTapped}
             .disabled=${!this._configHasChanged || !this._valid}
@@ -145,7 +108,7 @@ class HassioAddonConfig extends LitElement {
 
   protected firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
-    this._canShowSchema = !this.addon.schema!.find(
+    this._canShowSchema = !this.addon.schema.find(
       // @ts-ignore
       (entry) => !SUPPORTED_UI_TYPES.includes(entry.type) || entry.multiple
     );
@@ -181,19 +144,17 @@ class HassioAddonConfig extends LitElement {
     }
   }
 
-  private _toggleOptional() {
-    this._showOptional = !this._showOptional;
-  }
-
   private _configChanged(ev): void {
     if (this.addon.schema && this._canShowSchema && !this._yamlMode) {
       this._valid = true;
       this._configHasChanged = true;
-      this._options! = ev.detail.value;
     } else {
       this._configHasChanged = true;
       this._valid = ev.detail.isValid;
     }
+    if (this._valid) {
+      this._options! = ev.detail.value;
+    }
   }
 
   private async _resetTapped(ev: CustomEvent): Promise<void> {
@@ -241,9 +202,8 @@ class HassioAddonConfig extends LitElement {
 
     try {
       await setHassioAddonOption(this.hass, this.addon.slug, {
-        options: this._yamlMode ? this._editor?.value : this._options,
+        options: this._options!,
       });
-
       this._configHasChanged = false;
       const eventdata = {
         success: true,
@@ -311,13 +271,6 @@ class HassioAddonConfig extends LitElement {
           margin-block: 0px;
           font-weight: normal;
         }
-        .card-actions.right {
-          justify-content: flex-end;
-        }
-
-        .show-additional {
-          padding: 16px;
-        }
       `,
     ];
   }

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

@@ -9,24 +9,16 @@ import {
   CSSResult,
   customElement,
   html,
-  internalProperty,
   LitElement,
   property,
   TemplateResult,
 } from "lit-element";
 import memoizeOne from "memoize-one";
-import { fireEvent } from "../../../src/common/dom/fire_event";
-import { navigate } from "../../../src/common/navigate";
-import { extractSearchParam } from "../../../src/common/url/search-params";
 import "../../../src/components/ha-circular-progress";
 import {
   fetchHassioAddonInfo,
   HassioAddonDetails,
 } from "../../../src/data/hassio/addon";
-import { extractApiErrorMessage } from "../../../src/data/hassio/common";
-import { Supervisor } from "../../../src/data/supervisor/supervisor";
-import "../../../src/layouts/hass-error-screen";
-import "../../../src/layouts/hass-loading-screen";
 import "../../../src/layouts/hass-tabs-subpage";
 import type { PageNavigation } from "../../../src/layouts/hass-tabs-subpage";
 import { haStyle } from "../../../src/resources/styles";
@@ -43,16 +35,12 @@ import "./log/hassio-addon-logs";
 class HassioAddonDashboard extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property({ attribute: false }) public supervisor!: Supervisor;
-
   @property({ attribute: false }) public route!: Route;
 
   @property({ attribute: false }) public addon?: HassioAddonDetails;
 
   @property({ type: Boolean }) public narrow!: boolean;
 
-  @internalProperty() _error?: string;
-
   private _computeTail = memoizeOne((route: Route) => {
     const dividerPos = route.path.indexOf("/", 1);
     return dividerPos === -1
@@ -67,14 +55,8 @@ class HassioAddonDashboard extends LitElement {
   });
 
   protected render(): TemplateResult {
-    if (this._error) {
-      return html`<hass-error-screen
-        .error=${this._error}
-      ></hass-error-screen>`;
-    }
-
     if (!this.addon) {
-      return html`<hass-loading-screen></hass-loading-screen>`;
+      return html`<ha-circular-progress active></ha-circular-progress>`;
     }
 
     const addonTabs: PageNavigation[] = [
@@ -124,7 +106,6 @@ class HassioAddonDashboard extends LitElement {
           .route=${route}
           .narrow=${this.narrow}
           .hass=${this.hass}
-          .supervisor=${this.supervisor}
           .addon=${this.addon}
         ></hassio-addon-router>
       </hass-tabs-subpage>
@@ -171,53 +152,30 @@ class HassioAddonDashboard extends LitElement {
   }
 
   protected async firstUpdated(): Promise<void> {
-    if (this.route.path === "") {
-      const addon = extractSearchParam("addon");
-      if (addon) {
-        navigate(this, `/hassio/addon/${addon}`, true);
-      }
-    }
+    await this._routeDataChanged(this.route);
     this.addEventListener("hass-api-called", (ev) => this._apiCalled(ev));
   }
 
   private async _apiCalled(ev): Promise<void> {
-    const pathSplit: string[] = ev.detail.path?.split("/");
+    const path: string = ev.detail.path;
 
-    if (!pathSplit || pathSplit.length === 0) {
+    if (!path) {
       return;
     }
 
-    const path: string = pathSplit[pathSplit.length - 1];
-
-    if (["uninstall", "install", "update", "start", "stop"].includes(path)) {
-      fireEvent(this, "supervisor-colllection-refresh", {
-        colllection: "supervisor",
-      });
-    }
-
     if (path === "uninstall") {
-      window.history.back();
+      history.back();
     } else {
-      await this._routeDataChanged();
+      await this._routeDataChanged(this.route);
     }
   }
 
-  protected updated(changedProperties) {
-    if (changedProperties.has("route") && !this.addon) {
-      this._routeDataChanged();
-    }
-  }
-
-  private async _routeDataChanged(): Promise<void> {
-    const addon = this.route.path.split("/")[1];
-    if (!addon) {
-      return;
-    }
+  private async _routeDataChanged(routeData: Route): Promise<void> {
+    const addon = routeData.path.split("/")[1];
     try {
       const addoninfo = await fetchHassioAddonInfo(this.hass, addon);
       this.addon = addoninfo;
-    } catch (err) {
-      this._error = `Error fetching addon info: ${extractApiErrorMessage(err)}`;
+    } catch {
       this.addon = undefined;
     }
   }

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

@@ -1,6 +1,5 @@
 import { customElement, property } from "lit-element";
 import { HassioAddonDetails } from "../../../src/data/hassio/addon";
-import { Supervisor } from "../../../src/data/supervisor/supervisor";
 import {
   HassRouterPage,
   RouterOptions,
@@ -18,8 +17,6 @@ class HassioAddonRouter extends HassRouterPage {
 
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property({ attribute: false }) public supervisor!: Supervisor;
-
   @property({ attribute: false }) public addon!: HassioAddonDetails;
 
   protected routerOptions: RouterOptions = {
@@ -44,7 +41,6 @@ class HassioAddonRouter extends HassRouterPage {
   protected updatePageEl(el) {
     el.route = this.routeTail;
     el.hass = this.hass;
-    el.supervisor = this.supervisor;
     el.addon = this.addon;
     el.narrow = this.narrow;
   }

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

@@ -9,7 +9,6 @@ import {
 } from "lit-element";
 import "../../../../src/components/ha-circular-progress";
 import { HassioAddonDetails } from "../../../../src/data/hassio/addon";
-import { Supervisor } from "../../../../src/data/supervisor/supervisor";
 import { haStyle } from "../../../../src/resources/styles";
 import { HomeAssistant } from "../../../../src/types";
 import { hassioStyle } from "../../resources/hassio-style";
@@ -21,8 +20,6 @@ class HassioAddonInfoDashboard extends LitElement {
 
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property({ attribute: false }) public supervisor!: Supervisor;
-
   @property({ attribute: false }) public addon?: HassioAddonDetails;
 
   protected render(): TemplateResult {
@@ -35,7 +32,6 @@ class HassioAddonInfoDashboard extends LitElement {
         <hassio-addon-info
           .narrow=${this.narrow}
           .hass=${this.hass}
-          .supervisor=${this.supervisor}
           .addon=${this.addon}
         ></hassio-addon-info>
       </div>

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

@@ -25,7 +25,6 @@ import {
   TemplateResult,
 } from "lit-element";
 import { classMap } from "lit-html/directives/class-map";
-import memoizeOne from "memoize-one";
 import { atLeastVersion } from "../../../../src/common/config/version";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
 import { navigate } from "../../../../src/common/navigate";
@@ -44,11 +43,9 @@ import {
   HassioAddonSetOptionParams,
   HassioAddonSetSecurityParams,
   installHassioAddon,
-  restartHassioAddon,
   setHassioAddonOption,
   setHassioAddonSecurity,
   startHassioAddon,
-  stopHassioAddon,
   uninstallHassioAddon,
   validateHassioAddonOption,
 } from "../../../../src/data/hassio/addon";
@@ -57,8 +54,6 @@ import {
   fetchHassioStats,
   HassioStats,
 } from "../../../../src/data/hassio/common";
-import { StoreAddon } from "../../../../src/data/supervisor/store";
-import { Supervisor } from "../../../../src/data/supervisor/supervisor";
 import {
   showAlertDialog,
   showConfirmationDialog,
@@ -68,10 +63,8 @@ import { HomeAssistant } from "../../../../src/types";
 import { bytesToString } from "../../../../src/util/bytes-to-string";
 import "../../components/hassio-card-content";
 import "../../components/supervisor-metric";
-import { showDialogSupervisorAddonUpdate } from "../../dialogs/addon/show-dialog-addon-update";
 import { showHassioMarkdownDialog } from "../../dialogs/markdown/show-dialog-hassio-markdown";
 import { hassioStyle } from "../../resources/hassio-style";
-import { addonArchIsSupported } from "../../util/addon";
 
 const STAGE_ICON = {
   stable: mdiCheckCircle,
@@ -144,22 +137,11 @@ class HassioAddonInfo extends LitElement {
 
   @property({ attribute: false }) public addon!: HassioAddonDetails;
 
-  @property({ attribute: false }) public supervisor!: Supervisor;
-
   @internalProperty() private _metrics?: HassioStats;
 
   @internalProperty() private _error?: string;
 
-  private _addonStoreInfo = memoizeOne(
-    (slug: string, storeAddons: StoreAddon[]) =>
-      storeAddons.find((addon) => addon.slug === slug)
-  );
-
   protected render(): TemplateResult {
-    const addonStoreInfo =
-      !this.addon.detached && !this.addon.available
-        ? this._addonStoreInfo(this.addon.slug, this.supervisor.store.addons)
-        : undefined;
     const metrics = [
       {
         description: "Add-on CPU Usage",
@@ -187,32 +169,22 @@ class HassioAddonInfo extends LitElement {
                   icon=${mdiArrowUpBoldCircle}
                   iconClass="update"
                 ></hassio-card-content>
-                ${!this.addon.available && addonStoreInfo
-                  ? !addonArchIsSupported(
-                      this.supervisor.info.supported_arch,
-                      this.addon.arch
-                    )
-                    ? html`
-                        <p class="warning">
-                          This add-on is not compatible with the processor of
-                          your device or the operating system you have installed
-                          on your device.
-                        </p>
-                      `
-                    : html`
-                        <p class="warning">
-                          You are running Home Assistant
-                          ${this.supervisor.core.version}, to update to this
-                          version of the add-on you need at least version
-                          ${addonStoreInfo.homeassistant} of Home Assistant
-                        </p>
-                      `
+                ${!this.addon.available
+                  ? html`
+                      <p>
+                        This update is no longer compatible with your system.
+                      </p>
+                    `
                   : ""}
               </div>
               <div class="card-actions">
-                <mwc-button @click=${this._updateClicked}>
+                <ha-call-api-button
+                  .hass=${this.hass}
+                  .disabled=${!this.addon.available}
+                  path="hassio/addons/${this.addon.slug}/update"
+                >
                   Update
-                </mwc-button>
+                </ha-call-api-button>
                 ${this.addon.changelog
                   ? html`
                       <mwc-button @click=${this._openChangelog}>
@@ -562,102 +534,87 @@ class HassioAddonInfo extends LitElement {
             </div>
           </div>
           ${this._error ? html` <div class="errors">${this._error}</div> ` : ""}
-          ${!this.addon.version && addonStoreInfo && !this.addon.available
-            ? !addonArchIsSupported(
-                this.supervisor.info.supported_arch,
-                this.addon.arch
-              )
-              ? html`
-                  <p class="warning">
-                    This add-on is not compatible with the processor of your
-                    device or the operating system you have installed on your
-                    device.
-                  </p>
-                `
-              : html`
-                  <p class="warning">
-                    You are running Home Assistant
-                    ${this.supervisor.core.version}, to install this add-on you
-                    need at least version ${addonStoreInfo!.homeassistant} of
-                    Home Assistant
-                  </p>
-                `
-            : ""}
         </div>
         <div class="card-actions">
-          <div>
-            ${this.addon.version
-              ? this._computeIsRunning
-                ? html`
-                    <ha-progress-button
-                      class="warning"
-                      @click=${this._stopClicked}
-                    >
-                      Stop
-                    </ha-progress-button>
-                    <ha-progress-button
-                      class="warning"
-                      @click=${this._restartClicked}
-                    >
-                      Restart
-                    </ha-progress-button>
-                  `
-                : html`
-                    <ha-progress-button @click=${this._startClicked}>
-                      Start
-                    </ha-progress-button>
-                  `
-              : html`
-                  <ha-progress-button
-                    .disabled=${!this.addon.available}
-                    @click=${this._installClicked}
-                  >
-                    Install
-                  </ha-progress-button>
-                `}
-          </div>
-          <div>
-            ${this.addon.version
-              ? html` ${this._computeShowWebUI
-                    ? html`
-                        <a
-                          href=${this._pathWebui!}
-                          tabindex="-1"
-                          target="_blank"
-                          rel="noopener"
-                        >
-                          <mwc-button>
-                            Open web UI
-                          </mwc-button>
-                        </a>
-                      `
-                    : ""}
-                  ${this._computeShowIngressUI
-                    ? html`
-                        <mwc-button @click=${this._openIngress}>
+          ${this.addon.version
+            ? html`
+                ${this._computeIsRunning
+                  ? html`
+                      <ha-call-api-button
+                        class="warning"
+                        .hass=${this.hass}
+                        .path="hassio/addons/${this.addon.slug}/stop"
+                      >
+                        Stop
+                      </ha-call-api-button>
+                      <ha-call-api-button
+                        class="warning"
+                        .hass=${this.hass}
+                        .path="hassio/addons/${this.addon.slug}/restart"
+                      >
+                        Restart
+                      </ha-call-api-button>
+                    `
+                  : html`
+                      <ha-progress-button @click=${this._startClicked}>
+                        Start
+                      </ha-progress-button>
+                    `}
+                ${this._computeShowWebUI
+                  ? html`
+                      <a
+                        href=${this._pathWebui!}
+                        tabindex="-1"
+                        target="_blank"
+                        class="right"
+                        rel="noopener"
+                      >
+                        <mwc-button>
                           Open web UI
                         </mwc-button>
-                      `
-                    : ""}
-                  <ha-progress-button
-                    class="warning"
-                    @click=${this._uninstallClicked}
-                  >
-                    Uninstall
-                  </ha-progress-button>
-                  ${this.addon.build
-                    ? html`
-                        <ha-call-api-button
-                          class="warning"
-                          .hass=${this.hass}
-                          .path="hassio/addons/${this.addon.slug}/rebuild"
-                        >
-                          Rebuild
-                        </ha-call-api-button>
-                      `
-                    : ""}`
-              : ""}
-          </div>
+                      </a>
+                    `
+                  : ""}
+                ${this._computeShowIngressUI
+                  ? html`
+                      <mwc-button class="right" @click=${this._openIngress}>
+                        Open web UI
+                      </mwc-button>
+                    `
+                  : ""}
+                <ha-progress-button
+                  class=" right warning"
+                  @click=${this._uninstallClicked}
+                >
+                  Uninstall
+                </ha-progress-button>
+                ${this.addon.build
+                  ? html`
+                      <ha-call-api-button
+                        class="warning right"
+                        .hass=${this.hass}
+                        .path="hassio/addons/${this.addon.slug}/rebuild"
+                      >
+                        Rebuild
+                      </ha-call-api-button>
+                    `
+                  : ""}
+              `
+            : html`
+                ${!this.addon.available
+                  ? html`
+                      <p class="warning">
+                        This add-on is not available on your system.
+                      </p>
+                    `
+                  : ""}
+                <ha-progress-button
+                  .disabled=${!this.addon.available}
+                  @click=${this._installClicked}
+                >
+                  Install
+                </ha-progress-button>
+              `}
         </div>
       </ha-card>
 
@@ -891,55 +848,6 @@ class HassioAddonInfo extends LitElement {
     button.progress = false;
   }
 
-  private async _stopClicked(ev: CustomEvent): Promise<void> {
-    const button = ev.currentTarget as any;
-    button.progress = true;
-
-    try {
-      await stopHassioAddon(this.hass, this.addon.slug);
-      const eventdata = {
-        success: true,
-        response: undefined,
-        path: "stop",
-      };
-      fireEvent(this, "hass-api-called", eventdata);
-    } catch (err) {
-      showAlertDialog(this, {
-        title: "Failed to stop addon",
-        text: extractApiErrorMessage(err),
-      });
-    }
-    button.progress = false;
-  }
-
-  private async _restartClicked(ev: CustomEvent): Promise<void> {
-    const button = ev.currentTarget as any;
-    button.progress = true;
-
-    try {
-      await restartHassioAddon(this.hass, this.addon.slug);
-      const eventdata = {
-        success: true,
-        response: undefined,
-        path: "stop",
-      };
-      fireEvent(this, "hass-api-called", eventdata);
-    } catch (err) {
-      showAlertDialog(this, {
-        title: "Failed to restart addon",
-        text: extractApiErrorMessage(err),
-      });
-    }
-    button.progress = false;
-  }
-
-  private async _updateClicked(): Promise<void> {
-    showDialogSupervisorAddonUpdate(this, {
-      addon: this.addon,
-      supervisor: this.supervisor,
-    });
-  }
-
   private async _startClicked(ev: CustomEvent): Promise<void> {
     const button = ev.currentTarget as any;
     button.progress = true;
@@ -948,10 +856,10 @@ class HassioAddonInfo extends LitElement {
         this.hass,
         this.addon.slug
       );
-      if (!validate.valid) {
+      if (!validate.data.valid) {
         await showConfirmationDialog(this, {
           title: "Failed to start addon - configuration validation failed!",
-          text: validate.message.split(" Got ")[0],
+          text: validate.data.message.split(" Got ")[0],
           confirm: () => this._openConfiguration(),
           confirmText: "Go to configuration",
           dismissText: "Cancel",
@@ -971,12 +879,6 @@ class HassioAddonInfo extends LitElement {
     try {
       await startHassioAddon(this.hass, this.addon.slug);
       this.addon = await fetchHassioAddonInfo(this.hass, this.addon.slug);
-      const eventdata = {
-        success: true,
-        response: undefined,
-        path: "start",
-      };
-      fireEvent(this, "hass-api-called", eventdata);
     } catch (err) {
       showAlertDialog(this, {
         title: "Failed to start addon",
@@ -1092,6 +994,9 @@ class HassioAddonInfo extends LitElement {
           font-weight: 500;
           color: var(--primary-color);
         }
+        .right {
+          float: right;
+        }
         protection-enable mwc-button {
           --mdc-theme-primary: white;
         }
@@ -1114,8 +1019,7 @@ class HassioAddonInfo extends LitElement {
           margin-bottom: 16px;
         }
         .card-actions {
-          justify-content: space-between;
-          display: flex;
+          display: flow-root;
         }
         .security h3 {
           margin-bottom: 8px;
@@ -1151,16 +1055,18 @@ class HassioAddonInfo extends LitElement {
         }
 
         .addon-options {
+          max-width: 50%;
+        }
+        .addon-options.started {
           max-width: 90%;
         }
 
         .addon-container {
           display: grid;
           grid-auto-flow: column;
-          grid-template-columns: 60% 40%;
+          grid-template-columns: 1fr auto;
         }
-
-        .addon-container > div:last-of-type {
+        .addon-container div:last-of-type {
           align-self: end;
         }
 

hassio/src/dashboard/hassio-update.ts

@@ -10,7 +10,6 @@ import {
   TemplateResult,
 } from "lit-element";
 import memoizeOne from "memoize-one";
-import { fireEvent } from "../../../src/common/dom/fire_event";
 import "../../../src/components/buttons/ha-progress-button";
 import "../../../src/components/ha-card";
 import "../../../src/components/ha-svg-icon";
@@ -31,7 +30,6 @@ import {
 } from "../../../src/dialogs/generic/show-dialog-box";
 import { haStyle } from "../../../src/resources/styles";
 import { HomeAssistant } from "../../../src/types";
-import { showDialogSupervisorCoreUpdate } from "../dialogs/core/show-dialog-core-update";
 import { hassioStyle } from "../resources/hassio-style";
 
 @customElement("hassio-update")
@@ -66,7 +64,6 @@ export class HassioUpdate extends LitElement {
         <div class="card-group">
           ${this._renderUpdateCard(
             "Home Assistant Core",
-            "core",
             this.supervisor.core,
             "hassio/homeassistant/update",
             `https://${
@@ -75,7 +72,6 @@ export class HassioUpdate extends LitElement {
           )}
           ${this._renderUpdateCard(
             "Supervisor",
-            "supervisor",
             this.supervisor.supervisor,
             "hassio/supervisor/update",
             `https://github.com//home-assistant/hassio/releases/tag/${this.supervisor.supervisor.version_latest}`
@@ -83,7 +79,6 @@ export class HassioUpdate extends LitElement {
           ${this.supervisor.host.features.includes("hassos")
             ? this._renderUpdateCard(
                 "Operating System",
-                "os",
                 this.supervisor.os,
                 "hassio/os/update",
                 `https://github.com//home-assistant/hassos/releases/tag/${this.supervisor.os.version_latest}`
@@ -96,7 +91,6 @@ export class HassioUpdate extends LitElement {
 
   private _renderUpdateCard(
     name: string,
-    key: string,
     object: HassioHomeAssistantInfo | HassioSupervisorInfo | HassioHassOSInfo,
     apiPath: string,
     releaseNotesUrl: string
@@ -122,7 +116,6 @@ export class HassioUpdate extends LitElement {
           <ha-progress-button
             .apiPath=${apiPath}
             .name=${name}
-            .key=${key}
             .version=${object.version_latest}
             @click=${this._confirmUpdate}
           >
@@ -135,10 +128,6 @@ export class HassioUpdate extends LitElement {
 
   private async _confirmUpdate(ev): Promise<void> {
     const item = ev.currentTarget;
-    if (item.key === "core") {
-      showDialogSupervisorCoreUpdate(this, { supervisor: this.supervisor });
-      return;
-    }
     item.progress = true;
     const confirmed = await showConfirmationDialog(this, {
       title: `Update ${item.name}`,
@@ -153,17 +142,10 @@ export class HassioUpdate extends LitElement {
     }
     try {
       await this.hass.callApi<HassioResponse<void>>("POST", item.apiPath);
-      fireEvent(this, "supervisor-colllection-refresh", {
-        colllection: item.key,
-      });
     } catch (err) {
       // Only show an error if the status code was not expected (user behind proxy)
       // or no status at all(connection terminated)
-      if (
-        this.hass.connection.connected &&
-        err.status_code &&
-        !ignoredStatusCodes.has(err.status_code)
-      ) {
+      if (err.status_code && !ignoredStatusCodes.has(err.status_code)) {
         showAlertDialog(this, {
           title: "Update failed",
           text: extractApiErrorMessage(err),

hassio/src/dialogs/addon/dialog-supervisor-addon-update.ts

@@ -1,190 +0,0 @@
-import "@material/mwc-button/mwc-button";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
-import { fireEvent } from "../../../../src/common/dom/fire_event";
-import "../../../../src/components/ha-circular-progress";
-import "../../../../src/components/ha-dialog";
-import "../../../../src/components/ha-settings-row";
-import "../../../../src/components/ha-svg-icon";
-import "../../../../src/components/ha-switch";
-import {
-  HassioAddonDetails,
-  updateHassioAddon,
-} from "../../../../src/data/hassio/addon";
-import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
-import { Supervisor } from "../../../../src/data/supervisor/supervisor";
-import { createHassioPartialSnapshot } from "../../../../src/data/hassio/snapshot";
-import { haStyle, haStyleDialog } from "../../../../src/resources/styles";
-import type { HomeAssistant } from "../../../../src/types";
-import { SupervisorDialogSupervisorAddonUpdateParams } from "./show-dialog-addon-update";
-
-@customElement("dialog-supervisor-addon-update")
-class DialogSupervisorAddonUpdate extends LitElement {
-  @property({ attribute: false }) public supervisor!: Supervisor;
-
-  public hass!: HomeAssistant;
-
-  public addon!: HassioAddonDetails;
-
-  @internalProperty() private _opened = false;
-
-  @internalProperty() private _createSnapshot = true;
-
-  @internalProperty() private _action: "snapshot" | "update" | null = null;
-
-  @internalProperty() private _error?: string;
-
-  public async showDialog(
-    params: SupervisorDialogSupervisorAddonUpdateParams
-  ): Promise<void> {
-    this._opened = true;
-    this.addon = params.addon;
-    this.supervisor = params.supervisor;
-    await this.updateComplete;
-  }
-
-  public closeDialog(): void {
-    this._action = null;
-    this._createSnapshot = true;
-    this._opened = false;
-    this._error = undefined;
-    fireEvent(this, "dialog-closed", { dialog: this.localName });
-  }
-
-  public focus(): void {
-    this.updateComplete.then(() =>
-      (this.shadowRoot?.querySelector(
-        "[dialogInitialFocus]"
-      ) as HTMLElement)?.focus()
-    );
-  }
-
-  protected render(): TemplateResult {
-    return html`
-      <ha-dialog .open=${this._opened} scrimClickAction escapeKeyAction>
-        ${this._action === null
-          ? html`<slot name="heading">
-                <h2 id="title" class="header_title">
-                  Update ${this.addon.name}
-                </h2>
-              </slot>
-              <div>
-                Are you sure you want to update the ${this.addon.name} add-on to
-                version ${this.addon.version_latest}?
-              </div>
-
-              <ha-settings-row>
-                <span slot="heading">
-                  Snapshot
-                </span>
-                <span slot="description">
-                  Create a snapshot of the ${this.addon.name} add-on before
-                  updating
-                </span>
-                <ha-switch
-                  .checked=${this._createSnapshot}
-                  haptic
-                  title="Create snapshot"
-                  @click=${this._toggleSnapshot}
-                >
-                </ha-switch>
-              </ha-settings-row>
-              <mwc-button @click=${this.closeDialog} slot="secondaryAction">
-                Cancel
-              </mwc-button>
-              <mwc-button
-                .disabled=${this._error !== undefined ||
-                this.supervisor.info.state !== "running"}
-                @click=${this._update}
-                slot="primaryAction"
-              >
-                Update
-              </mwc-button>`
-          : html`<ha-circular-progress alt="Updating" size="large" active>
-              </ha-circular-progress>
-              <p class="progress-text">
-                ${this._action === "update"
-                  ? `Updating ${this.addon.name} to version ${this.addon.version_latest}`
-                  : "Creating snapshot of Home Assistant Core"}
-              </p>`}
-        ${this._error ? html`<p class="error">${this._error}</p>` : ""}
-      </ha-dialog>
-    `;
-  }
-
-  private _toggleSnapshot() {
-    this._createSnapshot = !this._createSnapshot;
-  }
-
-  private async _update() {
-    if (this._createSnapshot) {
-      this._action = "snapshot";
-      try {
-        await createHassioPartialSnapshot(this.hass, {
-          name: `addon_${this.addon.slug}_${this.addon.version}`,
-          addons: [this.addon.slug],
-          homeassistant: false,
-        });
-      } catch (err) {
-        this._error = extractApiErrorMessage(err);
-        this._action = null;
-        return;
-      }
-    }
-
-    this._action = "update";
-    try {
-      await updateHassioAddon(this.hass, this.addon.slug);
-    } catch (err) {
-      this._error = extractApiErrorMessage(err);
-      this._action = null;
-      return;
-    }
-    fireEvent(this, "supervisor-colllection-refresh", { colllection: "addon" });
-    fireEvent(this, "supervisor-colllection-refresh", {
-      colllection: "supervisor",
-    });
-    this.closeDialog();
-  }
-
-  static get styles(): CSSResult[] {
-    return [
-      haStyle,
-      haStyleDialog,
-      css`
-        .form {
-          color: var(--primary-text-color);
-        }
-
-        ha-settings-row {
-          margin-top: 32px;
-          padding: 0;
-        }
-
-        ha-circular-progress {
-          display: block;
-          margin: 32px;
-          text-align: center;
-        }
-
-        .progress-text {
-          text-align: center;
-        }
-      `,
-    ];
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "dialog-supervisor-addon-update": DialogSupervisorAddonUpdate;
-  }
-}

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

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

hassio/src/dialogs/core/dialog-supervisor-core-update.ts

@@ -1,182 +0,0 @@
-import "@material/mwc-button/mwc-button";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
-import { fireEvent } from "../../../../src/common/dom/fire_event";
-import "../../../../src/components/ha-circular-progress";
-import "../../../../src/components/ha-dialog";
-import "../../../../src/components/ha-settings-row";
-import "../../../../src/components/ha-svg-icon";
-import "../../../../src/components/ha-switch";
-import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
-import { createHassioPartialSnapshot } from "../../../../src/data/hassio/snapshot";
-import { updateCore } from "../../../../src/data/supervisor/core";
-import { Supervisor } from "../../../../src/data/supervisor/supervisor";
-import { haStyle, haStyleDialog } from "../../../../src/resources/styles";
-import type { HomeAssistant } from "../../../../src/types";
-import { SupervisorDialogSupervisorCoreUpdateParams } from "./show-dialog-core-update";
-
-@customElement("dialog-supervisor-core-update")
-class DialogSupervisorCoreUpdate extends LitElement {
-  @property({ attribute: false }) public supervisor!: Supervisor;
-
-  public hass!: HomeAssistant;
-
-  @internalProperty() private _opened = false;
-
-  @internalProperty() private _createSnapshot = true;
-
-  @internalProperty() private _action: "snapshot" | "update" | null = null;
-
-  @internalProperty() private _error?: string;
-
-  public async showDialog(
-    params: SupervisorDialogSupervisorCoreUpdateParams
-  ): Promise<void> {
-    this._opened = true;
-    this.supervisor = params.supervisor;
-    await this.updateComplete;
-  }
-
-  public closeDialog(): void {
-    this._action = null;
-    this._createSnapshot = true;
-    this._opened = false;
-    this._error = undefined;
-    fireEvent(this, "dialog-closed", { dialog: this.localName });
-  }
-
-  public focus(): void {
-    this.updateComplete.then(() =>
-      (this.shadowRoot?.querySelector(
-        "[dialogInitialFocus]"
-      ) as HTMLElement)?.focus()
-    );
-  }
-
-  protected render(): TemplateResult {
-    return html`
-      <ha-dialog .open=${this._opened} scrimClickAction escapeKeyAction>
-        ${this._action === null
-          ? html`<slot name="heading">
-                <h2 id="title" class="header_title">
-                  Update Home Assistant Core
-                </h2>
-              </slot>
-              <div>
-                Are you sure you want to update Home Assistant Core to version
-                ${this.supervisor.core.version_latest}?
-              </div>
-
-              <ha-settings-row three-rows>
-                <span slot="heading">
-                  Snapshot
-                </span>
-                <span slot="description">
-                  Create a snapshot of Home Assistant Core before updating
-                </span>
-                <ha-switch
-                  .checked=${this._createSnapshot}
-                  haptic
-                  title="Create snapshot"
-                  @click=${this._toggleSnapshot}
-                >
-                </ha-switch>
-              </ha-settings-row>
-              <mwc-button @click=${this.closeDialog} slot="secondaryAction">
-                Cancel
-              </mwc-button>
-              <mwc-button
-                .disabled=${this._error !== undefined ||
-                this.supervisor.info.state !== "running"}
-                @click=${this._update}
-                slot="primaryAction"
-              >
-                Update
-              </mwc-button>`
-          : html`<ha-circular-progress alt="Updating" size="large" active>
-              </ha-circular-progress>
-              <p class="progress-text">
-                ${this._action === "update"
-                  ? `Updating Home Assistant Core to version ${this.supervisor.core.version_latest}`
-                  : "Creating snapshot of Home Assistant Core"}
-              </p>`}
-        ${this._error ? html`<p class="error">${this._error}</p>` : ""}
-      </ha-dialog>
-    `;
-  }
-
-  private _toggleSnapshot() {
-    this._createSnapshot = !this._createSnapshot;
-  }
-
-  private async _update() {
-    if (this._createSnapshot) {
-      this._action = "snapshot";
-      try {
-        await createHassioPartialSnapshot(this.hass, {
-          name: `core_${this.supervisor.core.version}`,
-          folders: ["homeassistant"],
-          homeassistant: true,
-        });
-      } catch (err) {
-        this._error = extractApiErrorMessage(err);
-        this._action = null;
-        return;
-      }
-    }
-
-    this._action = "update";
-    try {
-      await updateCore(this.hass);
-    } catch (err) {
-      if (this.hass.connection.connected) {
-        this._error = extractApiErrorMessage(err);
-        this._action = null;
-        return;
-      }
-    }
-    fireEvent(this, "supervisor-colllection-refresh", { colllection: "core" });
-    this.closeDialog();
-  }
-
-  static get styles(): CSSResult[] {
-    return [
-      haStyle,
-      haStyleDialog,
-      css`
-        .form {
-          color: var(--primary-text-color);
-        }
-
-        ha-settings-row {
-          margin-top: 32px;
-          padding: 0;
-        }
-
-        ha-circular-progress {
-          display: block;
-          margin: 32px;
-          text-align: center;
-        }
-
-        .progress-text {
-          text-align: center;
-        }
-      `,
-    ];
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "dialog-supervisor-core-update": DialogSupervisorCoreUpdate;
-  }
-}

hassio/src/dialogs/core/show-dialog-core-update.ts

@@ -1,17 +0,0 @@
-import { fireEvent } from "../../../../src/common/dom/fire_event";
-import { Supervisor } from "../../../../src/data/supervisor/supervisor";
-
-export interface SupervisorDialogSupervisorCoreUpdateParams {
-  supervisor: Supervisor;
-}
-
-export const showDialogSupervisorCoreUpdate = (
-  element: HTMLElement,
-  dialogParams: SupervisorDialogSupervisorCoreUpdateParams
-): void => {
-  fireEvent(element, "show-dialog", {
-    dialogTag: "dialog-supervisor-core-update",
-    dialogImport: () => import("./dialog-supervisor-core-update"),
-    dialogParams,
-  });
-};

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

@@ -22,11 +22,7 @@ import {
   fetchHassioSnapshotInfo,
   HassioSnapshotDetail,
 } from "../../../../src/data/hassio/snapshot";
-import { Supervisor } from "../../../../src/data/supervisor/supervisor";
-import {
-  showAlertDialog,
-  showConfirmationDialog,
-} from "../../../../src/dialogs/generic/show-dialog-box";
+import { showConfirmationDialog } from "../../../../src/dialogs/generic/show-dialog-box";
 import { PolymerChangedEvent } from "../../../../src/polymer-types";
 import { haStyle, haStyleDialog } from "../../../../src/resources/styles";
 import { HomeAssistant } from "../../../../src/types";
@@ -79,8 +75,6 @@ interface FolderItem {
 class HassioSnapshotDialog extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property({ attribute: false }) public supervisor?: Supervisor;
-
   @internalProperty() private _error?: string;
 
   @internalProperty() private _onboarding = false;
@@ -95,7 +89,7 @@ class HassioSnapshotDialog extends LitElement {
 
   @internalProperty() private _snapshotPassword!: string;
 
-  @internalProperty() private _restoreHass = true;
+  @internalProperty() private _restoreHass: boolean | null | undefined = true;
 
   public async showDialog(params: HassioSnapshotDialogParams) {
     this._snapshot = await fetchHassioSnapshotInfo(this.hass, params.slug);
@@ -108,10 +102,6 @@ class HassioSnapshotDialog extends LitElement {
 
     this._dialogParams = params;
     this._onboarding = params.onboarding ?? false;
-    this.supervisor = params.supervisor;
-    if (!this._snapshot.homeassistant) {
-      this._restoreHass = false;
-    }
   }
 
   protected render(): TemplateResult {
@@ -137,17 +127,15 @@ class HassioSnapshotDialog extends LitElement {
           (${this._computeSize})<br />
           ${this._formatDatetime(this._snapshot.date)}
         </div>
-        ${this._snapshot.homeassistant
-          ? html`<div>Home Assistant:</div>
-              <paper-checkbox
-                .checked=${this._restoreHass}
-                @change="${(ev: Event) => {
-                  this._restoreHass = (ev.target as PaperCheckboxElement).checked!;
-                }}"
-              >
-                Home Assistant ${this._snapshot.homeassistant}
-              </paper-checkbox>`
-          : ""}
+        <div>Home Assistant:</div>
+        <paper-checkbox
+          .checked=${this._restoreHass}
+          @change="${(ev: Event) => {
+            this._restoreHass = (ev.target as PaperCheckboxElement).checked;
+          }}"
+        >
+          Home Assistant ${this._snapshot.homeassistant}
+        </paper-checkbox>
         ${this._folders.length
           ? html`
               <div>Folders:</div>
@@ -310,16 +298,6 @@ class HassioSnapshotDialog extends LitElement {
   }
 
   private async _partialRestoreClicked() {
-    if (
-      this.supervisor !== undefined &&
-      this.supervisor.info.state !== "running"
-    ) {
-      await showAlertDialog(this, {
-        title: "Could not restore snapshot",
-        text: `Restoring a snapshot is not possible right now because the system is in ${this.supervisor.info.state} state.`,
-      });
-      return;
-    }
     if (
       !(await showConfirmationDialog(this, {
         title: "Are you sure you want partially to restore this snapshot?",
@@ -339,7 +317,7 @@ class HassioSnapshotDialog extends LitElement {
       .map((folder) => folder.slug);
 
     const data: {
-      homeassistant: boolean;
+      homeassistant: boolean | null | undefined;
       addons: any;
       folders: any;
       password?: string;
@@ -381,16 +359,6 @@ class HassioSnapshotDialog extends LitElement {
   }
 
   private async _fullRestoreClicked() {
-    if (
-      this.supervisor !== undefined &&
-      this.supervisor.info.state !== "running"
-    ) {
-      await showAlertDialog(this, {
-        title: "Could not restore snapshot",
-        text: `Restoring a snapshot is not possible right now because the system is in ${this.supervisor.info.state} state.`,
-      });
-      return;
-    }
     if (
       !(await showConfirmationDialog(this, {
         title:

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

@@ -1,11 +1,9 @@
 import { fireEvent } from "../../../../src/common/dom/fire_event";
-import { Supervisor } from "../../../../src/data/supervisor/supervisor";
 
 export interface HassioSnapshotDialogParams {
   slug: string;
   onDelete?: () => void;
   onboarding?: boolean;
-  supervisor?: Supervisor;
 }
 
 export const showHassioSnapshotDialog = (

hassio/src/hassio-main.ts

@@ -3,9 +3,7 @@ import { atLeastVersion } from "../../src/common/config/version";
 import { applyThemesOnElement } from "../../src/common/dom/apply_themes_on_element";
 import { fireEvent } from "../../src/common/dom/fire_event";
 import { HassioPanelInfo } from "../../src/data/hassio/supervisor";
-import { supervisorCollection } from "../../src/data/supervisor/supervisor";
 import { makeDialogManager } from "../../src/dialogs/make-dialog-manager";
-import "../../src/layouts/hass-loading-screen";
 import { HomeAssistant, Route } from "../../src/types";
 import "./hassio-router";
 import { SupervisorBaseElement } from "./supervisor-base-element";
@@ -73,17 +71,8 @@ export class HassioMain extends SupervisorBaseElement {
 
   protected render() {
     if (!this.supervisor || !this.hass) {
-      return html`<hass-loading-screen></hass-loading-screen>`;
+      return html``;
     }
-
-    if (
-      Object.keys(supervisorCollection).some(
-        (colllection) => !this.supervisor![colllection]
-      )
-    ) {
-      return html`<hass-loading-screen></hass-loading-screen>`;
-    }
-
     return html`
       <hassio-router
         .hass=${this.hass}

hassio/src/hassio-my-redirect.ts

@@ -1,128 +0,0 @@
-import {
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
-import { sanitizeUrl } from "@braintree/sanitize-url";
-import {
-  createSearchParam,
-  extractSearchParamsObject,
-} from "../../src/common/url/search-params";
-import "../../src/layouts/hass-error-screen";
-import {
-  ParamType,
-  Redirect,
-  Redirects,
-} from "../../src/panels/my/ha-panel-my";
-import { navigate } from "../../src/common/navigate";
-import { HomeAssistant, Route } from "../../src/types";
-
-const REDIRECTS: Redirects = {
-  supervisor_logs: {
-    redirect: "/hassio/system",
-  },
-  supervisor_info: {
-    redirect: "/hassio/system",
-  },
-  supervisor_snapshots: {
-    redirect: "/hassio/snapshots",
-  },
-  supervisor_store: {
-    redirect: "/hassio/store",
-  },
-  supervisor: {
-    redirect: "/hassio/dashboard",
-  },
-  supervisor_addon: {
-    redirect: "/hassio/addon",
-    params: {
-      addon: "string",
-    },
-  },
-};
-
-@customElement("hassio-my-redirect")
-class HassioMyRedirect extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property() public route!: Route;
-
-  @internalProperty() public _error?: TemplateResult | string;
-
-  connectedCallback() {
-    super.connectedCallback();
-    const path = this.route.path.substr(1);
-    const redirect = REDIRECTS[path];
-
-    if (!redirect) {
-      this._error = html`This redirect is not supported by your Home Assistant
-        instance. Check the
-        <a
-          target="_blank"
-          rel="noreferrer noopener"
-          href="https://my.home-assistant.io/faq.html#supported-pages"
-          >My Home Assistant FAQ</a
-        >
-        for the supported redirects and the version they where introduced.`;
-      return;
-    }
-
-    let url: string;
-    try {
-      url = this._createRedirectUrl(redirect);
-    } catch (err) {
-      this._error = "An unknown error occured";
-      return;
-    }
-
-    navigate(this, url, true);
-  }
-
-  protected render(): TemplateResult {
-    if (this._error) {
-      return html`<hass-error-screen
-        .error=${this._error}
-      ></hass-error-screen>`;
-    }
-    return html``;
-  }
-
-  private _createRedirectUrl(redirect: Redirect): string {
-    const params = this._createRedirectParams(redirect);
-    return `${redirect.redirect}${params}`;
-  }
-
-  private _createRedirectParams(redirect: Redirect): string {
-    const params = extractSearchParamsObject();
-    if (!redirect.params && !Object.keys(params).length) {
-      return "";
-    }
-    const resultParams = {};
-    Object.entries(redirect.params || {}).forEach(([key, type]) => {
-      if (!params[key] || !this._checkParamType(type, params[key])) {
-        throw Error();
-      }
-      resultParams[key] = params[key];
-    });
-    return `?${createSearchParam(resultParams)}`;
-  }
-
-  private _checkParamType(type: ParamType, value: string) {
-    if (type === "string") {
-      return true;
-    }
-    if (type === "url") {
-      return value && value === sanitizeUrl(value);
-    }
-    return false;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hassio-my-redirect": HassioMyRedirect;
-  }
-}

hassio/src/hassio-router.ts

@@ -23,7 +23,7 @@ class HassioRouter extends HassRouterPage {
   protected routerOptions: RouterOptions = {
     // Hass.io has a page with tabs, so we route all non-matching routes to it.
     defaultPage: "dashboard",
-    initialLoad: () => this._redirectIngress(),
+    initialLoad: () => this._fetchData(),
     showLoading: true,
     routes: {
       dashboard: {
@@ -41,42 +41,32 @@ class HassioRouter extends HassRouterPage {
         tag: "hassio-ingress-view",
         load: () => import("./ingress-view/hassio-ingress-view"),
       },
-      _my_redirect: {
-        tag: "hassio-my-redirect",
-        load: () => import("./hassio-my-redirect"),
-      },
     },
   };
 
   protected updatePageEl(el) {
     // the tabs page does its own routing so needs full route.
-    const hassioPanel = el.nodeName === "HASSIO-PANEL";
-    const route = hassioPanel ? this.route : this.routeTail;
-
-    if (hassioPanel && this.panel.config?.ingress) {
-      this._redirectIngress();
-      return;
-    }
+    const route = el.nodeName === "HASSIO-PANEL" ? this.route : this.routeTail;
 
     el.hass = this.hass;
+    el.supervisor = this.supervisor;
     el.narrow = this.narrow;
     el.route = route;
 
     if (el.localName === "hassio-ingress-view") {
       el.ingressPanel = this.panel.config && this.panel.config.ingress;
-    } else {
-      el.supervisor = this.supervisor;
     }
   }
 
-  private async _redirectIngress() {
+  private async _fetchData() {
     if (this.panel.config && this.panel.config.ingress) {
-      this.route = {
-        prefix: "/hassio",
-        path: `/ingress/${this.panel.config.ingress}`,
-      };
+      this._redirectIngress(this.panel.config.ingress);
     }
   }
+
+  private _redirectIngress(addonSlug: string) {
+    this.route = { prefix: "/hassio", path: `/ingress/${addonSlug}` };
+  }
 }
 
 declare global {

hassio/src/snapshots/hassio-snapshots.ts

@@ -41,7 +41,6 @@ import {
   reloadHassioSnapshots,
 } from "../../../src/data/hassio/snapshot";
 import { Supervisor } from "../../../src/data/supervisor/supervisor";
-import { showAlertDialog } from "../../../src/dialogs/generic/show-dialog-box";
 import "../../../src/layouts/hass-tabs-subpage";
 import { PolymerChangedEvent } from "../../../src/polymer-types";
 import { haStyle } from "../../../src/resources/styles";
@@ -212,13 +211,7 @@ class HassioSnapshots extends LitElement {
                   : undefined}
               </div>
               <div class="card-actions">
-                <ha-progress-button
-                  @click=${this._createSnapshot}
-                  title="${this.supervisor.info.state !== "running"
-                    ? `Creating a snapshot is not possible right now because the system is in ${this.supervisor.info.state} state.`
-                    : ""}"
-                  .disabled=${this.supervisor.info.state !== "running"}
-                >
+                <ha-progress-button @click=${this._createSnapshot}>
                   Create
                 </ha-progress-button>
               </div>
@@ -332,12 +325,6 @@ class HassioSnapshots extends LitElement {
   }
 
   private async _createSnapshot(ev: CustomEvent): Promise<void> {
-    if (this.supervisor.info.state !== "running") {
-      await showAlertDialog(this, {
-        title: "Could not create snapshot",
-        text: `Creating a snapshot is not possible right now because the system is in ${this.supervisor.info.state} state.`,
-      });
-    }
     const button = ev.currentTarget as any;
     button.progress = true;
 
@@ -399,7 +386,6 @@ class HassioSnapshots extends LitElement {
   private _snapshotClicked(ev) {
     showHassioSnapshotDialog(this, {
       slug: ev.currentTarget!.snapshot.slug,
-      supervisor: this.supervisor,
       onDelete: () => this._updateSnapshots(),
     });
   }
@@ -409,7 +395,6 @@ class HassioSnapshots extends LitElement {
       showSnapshot: (slug: string) =>
         showHassioSnapshotDialog(this, {
           slug,
-          supervisor: this.supervisor,
           onDelete: () => this._updateSnapshots(),
         }),
       reloadSnapshot: () => this.refreshData(),

hassio/src/supervisor-base-element.ts

@@ -1,13 +1,4 @@
-import { Collection, UnsubscribeFunc } from "home-assistant-js-websocket";
-import {
-  internalProperty,
-  LitElement,
-  property,
-  PropertyValues,
-} from "lit-element";
-import { atLeastVersion } from "../../src/common/config/version";
-import { fetchHassioAddonsInfo } from "../../src/data/hassio/addon";
-import { HassioResponse } from "../../src/data/hassio/common";
+import { LitElement, property, PropertyValues } from "lit-element";
 import {
   fetchHassioHassOsInfo,
   fetchHassioHostInfo,
@@ -19,21 +10,13 @@ import {
   fetchHassioInfo,
   fetchHassioSupervisorInfo,
 } from "../../src/data/hassio/supervisor";
-import { fetchSupervisorStore } from "../../src/data/supervisor/store";
-import {
-  getSupervisorEventCollection,
-  subscribeSupervisorEvents,
-  Supervisor,
-  SupervisorObject,
-  supervisorCollection,
-} from "../../src/data/supervisor/supervisor";
+import { Supervisor } from "../../src/data/supervisor/supervisor";
 import { ProvideHassLitMixin } from "../../src/mixins/provide-hass-lit-mixin";
 import { urlSyncMixin } from "../../src/state/url-sync-mixin";
 
 declare global {
   interface HASSDomEvents {
     "supervisor-update": Partial<Supervisor>;
-    "supervisor-colllection-refresh": { colllection: SupervisorObject };
   }
 }
 
@@ -42,20 +25,6 @@ export class SupervisorBaseElement extends urlSyncMixin(
 ) {
   @property({ attribute: false }) public supervisor?: Supervisor;
 
-  @internalProperty() private _unsubs: Record<string, UnsubscribeFunc> = {};
-
-  @internalProperty() private _collections: Record<
-    string,
-    Collection<unknown>
-  > = {};
-
-  public disconnectedCallback() {
-    super.disconnectedCallback();
-    Object.keys(this._unsubs).forEach((unsub) => {
-      this._unsubs[unsub]();
-    });
-  }
-
   protected _updateSupervisor(obj: Partial<Supervisor>): void {
     this.supervisor = { ...this.supervisor!, ...obj };
   }
@@ -63,59 +32,13 @@ export class SupervisorBaseElement extends urlSyncMixin(
   protected firstUpdated(changedProps: PropertyValues): void {
     super.firstUpdated(changedProps);
     this._initSupervisor();
-  }
-
-  private async _handleSupervisorStoreRefreshEvent(ev) {
-    const colllection = ev.detail.colllection;
-    if (atLeastVersion(this.hass.config.version, 2021, 2, 4)) {
-      this._collections[colllection].refresh();
-      return;
-    }
-
-    const response = await this.hass.callApi<HassioResponse<any>>(
-      "GET",
-      `hassio${supervisorCollection[colllection]}`
+    this.addEventListener("supervisor-update", (ev) =>
+      this._updateSupervisor(ev.detail)
     );
-    this._updateSupervisor({ [colllection]: response.data });
   }
 
   private async _initSupervisor(): Promise<void> {
-    this.addEventListener(
-      "supervisor-colllection-refresh",
-      this._handleSupervisorStoreRefreshEvent
-    );
-
-    if (atLeastVersion(this.hass.config.version, 2021, 2, 4)) {
-      Object.keys(supervisorCollection).forEach((colllection) => {
-        this._unsubs[colllection] = subscribeSupervisorEvents(
-          this.hass,
-          (data) => this._updateSupervisor({ [colllection]: data }),
-          colllection,
-          supervisorCollection[colllection]
-        );
-        if (this._collections[colllection]) {
-          this._collections[colllection].refresh();
-        } else {
-          this._collections[colllection] = getSupervisorEventCollection(
-            this.hass.connection,
-            colllection,
-            supervisorCollection[colllection]
-          );
-        }
-      });
-
-      if (this.supervisor === undefined) {
-        Object.keys(this._collections).forEach((collection) =>
-          this._updateSupervisor({
-            [collection]: this._collections[collection].state,
-          })
-        );
-      }
-      return;
-    }
-
     const [
-      addon,
       supervisor,
       host,
       core,
@@ -123,9 +46,7 @@ export class SupervisorBaseElement extends urlSyncMixin(
       os,
       network,
       resolution,
-      store,
     ] = await Promise.all([
-      fetchHassioAddonsInfo(this.hass),
       fetchHassioSupervisorInfo(this.hass),
       fetchHassioHostInfo(this.hass),
       fetchHassioHomeAssistantInfo(this.hass),
@@ -133,11 +54,9 @@ export class SupervisorBaseElement extends urlSyncMixin(
       fetchHassioHassOsInfo(this.hass),
       fetchNetworkInfo(this.hass),
       fetchHassioResolution(this.hass),
-      fetchSupervisorStore(this.hass),
     ]);
 
     this.supervisor = {
-      addon,
       supervisor,
       host,
       core,
@@ -145,11 +64,6 @@ export class SupervisorBaseElement extends urlSyncMixin(
       os,
       network,
       resolution,
-      store,
     };
-
-    this.addEventListener("supervisor-update", (ev) =>
-      this._updateSupervisor(ev.detail)
-    );
   }
 }

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

@@ -19,7 +19,7 @@ import {
   fetchHassioStats,
   HassioStats,
 } from "../../../src/data/hassio/common";
-import { restartCore } from "../../../src/data/supervisor/core";
+import { restartCore, updateCore } from "../../../src/data/supervisor/core";
 import { Supervisor } from "../../../src/data/supervisor/supervisor";
 import {
   showAlertDialog,
@@ -29,7 +29,6 @@ import { haStyle } from "../../../src/resources/styles";
 import { HomeAssistant } from "../../../src/types";
 import { bytesToString } from "../../../src/util/bytes-to-string";
 import "../components/supervisor-metric";
-import { showDialogSupervisorCoreUpdate } from "../dialogs/core/show-dialog-core-update";
 import { hassioStyle } from "../resources/hassio-style";
 
 @customElement("hassio-core-info")
@@ -140,19 +139,41 @@ class HassioCoreInfo extends LitElement {
     try {
       await restartCore(this.hass);
     } catch (err) {
-      if (this.hass.connection.connected) {
-        showAlertDialog(this, {
-          title: "Failed to restart Home Assistant Core",
-          text: extractApiErrorMessage(err),
-        });
-      }
+      showAlertDialog(this, {
+        title: "Failed to restart Home Assistant Core",
+        text: extractApiErrorMessage(err),
+      });
     } finally {
       button.progress = false;
     }
   }
 
-  private async _coreUpdate(): Promise<void> {
-    showDialogSupervisorCoreUpdate(this, { supervisor: this.supervisor });
+  private async _coreUpdate(ev: CustomEvent): Promise<void> {
+    const button = ev.currentTarget as any;
+    button.progress = true;
+
+    const confirmed = await showConfirmationDialog(this, {
+      title: "Update Home Assistant Core",
+      text: `Are you sure you want to update Home Assistant Core to version ${this.supervisor.core.version_latest}?`,
+      confirmText: "update",
+      dismissText: "cancel",
+    });
+
+    if (!confirmed) {
+      button.progress = false;
+      return;
+    }
+
+    try {
+      await updateCore(this.hass);
+    } catch (err) {
+      showAlertDialog(this, {
+        title: "Failed to update Home Assistant Core",
+        text: extractApiErrorMessage(err),
+      });
+    } finally {
+      button.progress = false;
+    }
   }
 
   static get styles(): CSSResult[] {

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

@@ -13,7 +13,6 @@ import {
   TemplateResult,
 } from "lit-element";
 import memoizeOne from "memoize-one";
-import { atLeastVersion } from "../../../src/common/config/version";
 import { fireEvent } from "../../../src/common/dom/fire_event";
 import "../../../src/components/buttons/ha-progress-button";
 import "../../../src/components/ha-button-menu";
@@ -27,6 +26,7 @@ import { fetchHassioHardwareInfo } from "../../../src/data/hassio/hardware";
 import {
   changeHostOptions,
   configSyncOS,
+  fetchHassioHostInfo,
   rebootHost,
   shutdownHost,
   updateOS,
@@ -150,18 +150,6 @@ class HassioHostInfo extends LitElement {
               : ""}
           </div>
           <div>
-            ${this.supervisor.host.disk_life_time !== "" &&
-            this.supervisor.host.disk_life_time >= 10
-              ? html` <ha-settings-row>
-                  <span slot="heading">
-                    eMMC Lifetime Used
-                  </span>
-                  <span slot="description">
-                    ${this.supervisor.host.disk_life_time - 10}% -
-                    ${this.supervisor.host.disk_life_time}%
-                  </span>
-                </ha-settings-row>`
-              : ""}
             ${metrics.map(
               (metric) =>
                 html`
@@ -340,14 +328,11 @@ class HassioHostInfo extends LitElement {
 
     try {
       await updateOS(this.hass);
-      fireEvent(this, "supervisor-colllection-refresh", { colllection: "os" });
     } catch (err) {
-      if (this.hass.connection.connected) {
-        showAlertDialog(this, {
-          title: "Failed to update",
-          text: extractApiErrorMessage(err),
-        });
-      }
+      showAlertDialog(this, {
+        title: "Failed to update",
+        text: extractApiErrorMessage(err),
+      });
     }
     button.progress = false;
   }
@@ -371,9 +356,8 @@ class HassioHostInfo extends LitElement {
     if (hostname && hostname !== curHostname) {
       try {
         await changeHostOptions(this.hass, { hostname });
-        fireEvent(this, "supervisor-colllection-refresh", {
-          colllection: "host",
-        });
+        const host = await fetchHassioHostInfo(this.hass);
+        fireEvent(this, "supervisor-update", { host });
       } catch (err) {
         showAlertDialog(this, {
           title: "Setting hostname failed",
@@ -386,9 +370,8 @@ class HassioHostInfo extends LitElement {
   private async _importFromUSB(): Promise<void> {
     try {
       await configSyncOS(this.hass);
-      fireEvent(this, "supervisor-colllection-refresh", {
-        colllection: "host",
-      });
+      const host = await fetchHassioHostInfo(this.hass);
+      fireEvent(this, "supervisor-update", { host });
     } catch (err) {
       showAlertDialog(this, {
         title: "Failed to import from USB",
@@ -398,14 +381,8 @@ class HassioHostInfo extends LitElement {
   }
 
   private async _loadData(): Promise<void> {
-    if (atLeastVersion(this.hass.config.version, 2021, 2, 4)) {
-      fireEvent(this, "supervisor-colllection-refresh", {
-        colllection: "network",
-      });
-    } else {
-      const network = await fetchNetworkInfo(this.hass);
-      fireEvent(this, "supervisor-update", { network });
-    }
+    const network = await fetchNetworkInfo(this.hass);
+    fireEvent(this, "supervisor-update", { network });
   }
 
   static get styles(): CSSResult[] {

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

@@ -19,6 +19,7 @@ import {
   HassioStats,
 } from "../../../src/data/hassio/common";
 import {
+  fetchHassioSupervisorInfo,
   reloadSupervisor,
   restartSupervisor,
   setSupervisorOption,
@@ -317,9 +318,8 @@ class HassioSupervisorInfo extends LitElement {
 
   private async _reloadSupervisor(): Promise<void> {
     await reloadSupervisor(this.hass);
-    fireEvent(this, "supervisor-colllection-refresh", {
-      colllection: "supervisor",
-    });
+    const supervisor = await fetchHassioSupervisorInfo(this.hass);
+    fireEvent(this, "supervisor-update", { supervisor });
   }
 
   private async _supervisorRestart(ev: CustomEvent): Promise<void> {
@@ -368,9 +368,6 @@ class HassioSupervisorInfo extends LitElement {
 
     try {
       await updateSupervisor(this.hass);
-      fireEvent(this, "supervisor-colllection-refresh", {
-        colllection: "supervisor",
-      });
     } catch (err) {
       showAlertDialog(this, {
         title: "Failed to update the supervisor",

hassio/src/util/addon.ts

@@ -1,7 +0,0 @@
-import memoizeOne from "memoize-one";
-import { SupervisorArch } from "../../../src/data/supervisor/supervisor";
-
-export const addonArchIsSupported = memoizeOne(
-  (supported_archs: SupervisorArch[], addon_archs: SupervisorArch[]) =>
-    addon_archs.some((arch) => supported_archs.includes(arch))
-);

package.json

@@ -22,17 +22,6 @@
   "author": "Paulus Schoutsen <Paulus@PaulusSchoutsen.nl> (http://paulusschoutsen.nl)",
   "license": "Apache-2.0",
   "dependencies": {
-    "@braintree/sanitize-url": "^5.0.0",
-    "@codemirror/commands": "^0.17.0",
-    "@codemirror/gutter": "^0.17.0",
-    "@codemirror/highlight": "^0.17.0",
-    "@codemirror/history": "^0.17.0",
-    "@codemirror/legacy-modes": "^0.17.0",
-    "@codemirror/search": "^0.17.0",
-    "@codemirror/state": "^0.17.0",
-    "@codemirror/stream-parser": "^0.17.0",
-    "@codemirror/text": "^0.17.0",
-    "@codemirror/view": "^0.17.0",
     "@formatjs/intl-getcanonicallocales": "^1.4.6",
     "@formatjs/intl-pluralrules": "^3.4.10",
     "@fullcalendar/common": "5.1.0",
@@ -56,8 +45,8 @@
     "@material/mwc-tab": "^0.20.0",
     "@material/mwc-tab-bar": "^0.20.0",
     "@material/top-app-bar": "=9.0.0-canary.1c156d69d.0",
-    "@mdi/js": "5.9.55",
-    "@mdi/svg": "5.9.55",
+    "@mdi/js": "5.6.55",
+    "@mdi/svg": "5.6.55",
     "@polymer/app-layout": "^3.0.2",
     "@polymer/app-route": "^3.0.2",
     "@polymer/app-storage": "^3.0.2",
@@ -111,7 +100,7 @@
     "fuse.js": "^6.0.0",
     "google-timezones-json": "^1.0.2",
     "hls.js": "^0.13.2",
-    "home-assistant-js-websocket": "^5.9.0",
+    "home-assistant-js-websocket": "^5.4.1",
     "idb-keyval": "^3.2.0",
     "intl-messageformat": "^8.3.9",
     "js-yaml": "^3.13.1",
@@ -120,7 +109,7 @@
     "lit-element": "^2.4.0",
     "lit-html": "^1.3.0",
     "lit-virtualizer": "^0.4.2",
-    "marked": "2.0.0",
+    "marked": "^1.1.1",
     "mdn-polyfills": "^5.16.0",
     "memoize-one": "^5.0.2",
     "node-vibrant": "3.2.1-alpha.1",
@@ -171,7 +160,7 @@
     "@types/js-yaml": "^3.12.1",
     "@types/leaflet": "^1.4.3",
     "@types/leaflet-draw": "^1.0.1",
-    "@types/marked": "^1.2.2",
+    "@types/marked": "^1.1.0",
     "@types/memoize-one": "4.1.0",
     "@types/mocha": "^7.0.2",
     "@types/resize-observer-browser": "^0.1.3",
@@ -187,7 +176,7 @@
     "eslint": "^6.8.0",
     "eslint-config-airbnb-typescript": "^7.2.1",
     "eslint-config-prettier": "^6.10.1",
-    "eslint-import-resolver-webpack": "^0.13.0",
+    "eslint-import-resolver-webpack": "^0.12.2",
     "eslint-plugin-disable": "^2.0.1",
     "eslint-plugin-import": "^2.20.2",
     "eslint-plugin-lit": "^1.2.0",
@@ -223,16 +212,16 @@
     "sinon": "^7.3.1",
     "source-map-url": "^0.4.0",
     "systemjs": "^6.3.2",
-    "terser-webpack-plugin": "^5.1.1",
+    "terser-webpack-plugin": "^5.0.0",
     "ts-lit-plugin": "^1.2.1",
     "ts-mocha": "^7.0.0",
     "typescript": "^4.0.3",
     "vinyl-buffer": "^1.0.1",
     "vinyl-source-stream": "^2.0.0",
-    "webpack": "^5.24.1",
-    "webpack-cli": "^4.5.0",
-    "webpack-dev-server": "^3.11.2",
-    "webpack-manifest-plugin": "^3.0.0",
+    "webpack": "5.1.3",
+    "webpack-cli": "4.1.0",
+    "webpack-dev-server": "^3.11.0",
+    "webpack-manifest-plugin": "3.0.0-rc.0",
     "workbox-build": "^5.1.3"
   },
   "_comment": "Polymer fixed to 3.1 because 3.2 throws on logbook page",

script/release

@@ -12,5 +12,5 @@ yarn install
 script/build_frontend
 
 rm -rf dist
-python3 setup.py -q sdist
+python3 setup.py sdist
 python3 -m twine upload dist/* --skip-existing

setup.py

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

src/common/config/version.ts

@@ -1,19 +1,11 @@
 export const atLeastVersion = (
   version: string,
   major: number,
-  minor: number,
-  patch?: number
+  minor: number
 ): boolean => {
-  const [haMajor, haMinor, haPatch] = version.split(".", 3);
-
+  const [haMajor, haMinor] = version.split(".", 2);
   return (
     Number(haMajor) > major ||
-    (Number(haMajor) === major && (patch === undefined
-      ? Number(haMinor) >= minor
-      : Number(haMinor) > minor)) ||
-    (patch !== undefined &&
-      Number(haMajor) === major &&
-      Number(haMinor) === minor &&
-      Number(haPatch) >= patch)
+    (Number(haMajor) === major && Number(haMinor) >= minor)
   );
 };

src/common/entity/battery_icon.ts

@@ -8,19 +8,12 @@ export const batteryIcon = (
   const battery = Number(batteryState.state);
   const battery_charging =
     batteryChargingState && batteryChargingState.state === "on";
-  let icon = "hass:battery";
 
   if (isNaN(battery)) {
-    if (batteryState.state === "off") {
-      icon += "-full";
-    } else if (batteryState.state === "on") {
-      icon += "-alert";
-    } else {
-      icon += "-unknown";
-    }
-    return icon;
+    return "hass:battery-unknown";
   }
 
+  let icon = "hass:battery";
   const batteryRound = Math.round(battery / 10) * 10;
   if (battery_charging && battery > 10) {
     icon += `-charging-${batteryRound}`;

src/common/style/icon_color_css.ts

@@ -15,7 +15,7 @@ export const iconColorCSS = css`
   ha-icon[data-domain="media_player"][data-state="on"],
   ha-icon[data-domain="media_player"][data-state="paused"],
   ha-icon[data-domain="media_player"][data-state="playing"],
-  ha-icon[data-domain="script"][data-state="on"],
+  ha-icon[data-domain="script"][data-state="running"],
   ha-icon[data-domain="sun"][data-state="above_horizon"],
   ha-icon[data-domain="switch"][data-state="on"],
   ha-icon[data-domain="timer"][data-state="active"],

src/common/url/search-params.ts

@@ -6,16 +6,3 @@ export const extractSearchParamsObject = (): Record<string, string> => {
   }
   return query;
 };
-
-export const extractSearchParam = (param: string): string | null => {
-  const urlParams = new URLSearchParams(window.location.search);
-  return urlParams.get(param);
-};
-
-export const createSearchParam = (params: Record<string, string>): string => {
-  const urlParams = new URLSearchParams();
-  Object.entries(params).forEach(([key, value]) => {
-    urlParams.append(key, value);
-  });
-  return urlParams.toString();
-};

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

@@ -1,12 +1,16 @@
+import "@material/mwc-icon-button/mwc-icon-button";
+import { mdiClose, mdiMenuDown, mdiMenuUp } from "@mdi/js";
+import "@polymer/paper-input/paper-input";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-item/paper-item-body";
+import "@polymer/paper-listbox/paper-listbox";
+import "@vaadin/vaadin-combo-box/theme/material/vaadin-combo-box-light";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import {
   css,
   CSSResult,
   customElement,
   html,
-  internalProperty,
   LitElement,
   property,
   PropertyValues,
@@ -34,8 +38,7 @@ import {
 import { SubscribeMixin } from "../../mixins/subscribe-mixin";
 import { PolymerChangedEvent } from "../../polymer-types";
 import { HomeAssistant } from "../../types";
-import type { HaComboBox } from "../ha-combo-box";
-import "../ha-combo-box";
+import "../ha-svg-icon";
 
 interface Device {
   name: string;
@@ -109,11 +112,10 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
 
   @property() public deviceFilter?: HaDevicePickerDeviceFilterFunc;
 
-  @property({ type: Boolean }) public disabled?: boolean;
+  @property({ type: Boolean })
+  private _opened?: boolean;
 
-  @internalProperty() private _opened?: boolean;
-
-  @query("ha-combo-box", true) private _comboBox!: HaComboBox;
+  @query("vaadin-combo-box-light", true) private _comboBox!: HTMLElement;
 
   private _init = false;
 
@@ -242,11 +244,15 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
   );
 
   public open() {
-    this._comboBox?.open();
+    this.updateComplete.then(() => {
+      (this.shadowRoot?.querySelector("vaadin-combo-box-light") as any)?.open();
+    });
   }
 
   public focus() {
-    this._comboBox?.focus();
+    this.updateComplete.then(() => {
+      this.shadowRoot?.querySelector("paper-input")?.focus();
+    });
   }
 
   public hassSubscribe(): UnsubscribeFunc[] {
@@ -286,29 +292,70 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
       return html``;
     }
     return html`
-      <ha-combo-box
-        .hass=${this.hass}
-        .label=${this.label === undefined && this.hass
-          ? this.hass.localize("ui.components.device-picker.device")
-          : this.label}
-        .value=${this._value}
-        .renderer=${rowRenderer}
-        .disabled=${this.disabled}
+      <vaadin-combo-box-light
         item-value-path="id"
         item-id-path="id"
         item-label-path="name"
+        .value=${this._value}
+        .renderer=${rowRenderer}
         @opened-changed=${this._openedChanged}
         @value-changed=${this._deviceChanged}
-      ></ha-combo-box>
+      >
+        <paper-input
+          .label=${this.label === undefined && this.hass
+            ? this.hass.localize("ui.components.device-picker.device")
+            : this.label}
+          class="input"
+          autocapitalize="none"
+          autocomplete="off"
+          autocorrect="off"
+          spellcheck="false"
+        >
+          ${this.value
+            ? html`
+                <mwc-icon-button
+                  .label=${this.hass.localize(
+                    "ui.components.device-picker.clear"
+                  )}
+                  slot="suffix"
+                  class="clear-button"
+                  @click=${this._clearValue}
+                >
+                  <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
+                </mwc-icon-button>
+              `
+            : ""}
+
+          <mwc-icon-button
+            .label=${this.hass.localize(
+              "ui.components.device-picker.show_devices"
+            )}
+            slot="suffix"
+            class="toggle-button"
+          >
+            <ha-svg-icon
+              .path=${this._opened ? mdiMenuUp : mdiMenuDown}
+            ></ha-svg-icon>
+          </mwc-icon-button>
+        </paper-input>
+      </vaadin-combo-box-light>
     `;
   }
 
+  private _clearValue(ev: Event) {
+    ev.stopPropagation();
+    this._setValue("");
+  }
+
   private get _value() {
     return this.value || "";
   }
 
+  private _openedChanged(ev: PolymerChangedEvent<boolean>) {
+    this._opened = ev.detail.value;
+  }
+
   private _deviceChanged(ev: PolymerChangedEvent<string>) {
-    ev.stopPropagation();
     const newValue = ev.detail.value;
 
     if (newValue !== this._value) {
@@ -316,10 +363,6 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
     }
   }
 
-  private _openedChanged(ev: PolymerChangedEvent<boolean>) {
-    this._opened = ev.detail.value;
-  }
-
   private _setValue(value: string) {
     this.value = value;
     setTimeout(() => {

src/components/entity/state-badge.ts

@@ -115,7 +115,7 @@ export class StateBadge extends LitElement {
             // eslint-disable-next-line
             console.warn(errorMessage);
           }
-          // lowest brightness will be around 50% (that's pretty dark)
+          // lowest brighntess will be around 50% (that's pretty dark)
           iconStyle.filter = `brightness(${(brightness + 245) / 5}%)`;
         }
       }

src/components/ha-addon-picker.ts

@@ -1,148 +0,0 @@
-import {
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  query,
-  TemplateResult,
-} from "lit-element";
-import { isComponentLoaded } from "../common/config/is_component_loaded";
-import { fireEvent } from "../common/dom/fire_event";
-import { compare } from "../common/string/compare";
-import { HassioAddonInfo } from "../data/hassio/addon";
-import { fetchHassioSupervisorInfo } from "../data/hassio/supervisor";
-import { showAlertDialog } from "../dialogs/generic/show-dialog-box";
-import { PolymerChangedEvent } from "../polymer-types";
-import { HomeAssistant } from "../types";
-import { HaComboBox } from "./ha-combo-box";
-
-const rowRenderer = (
-  root: HTMLElement,
-  _owner,
-  model: { item: HassioAddonInfo }
-) => {
-  if (!root.firstElementChild) {
-    root.innerHTML = `
-    <style>
-      paper-item {
-        margin: -10px 0;
-        padding: 0;
-      }
-    </style>
-    <paper-item>
-      <paper-item-body two-line="">
-        <div class='name'>[[item.name]]</div>
-        <div secondary>[[item.slug]]</div>
-      </paper-item-body>
-    </paper-item>
-    `;
-  }
-
-  root.querySelector(".name")!.textContent = model.item.name;
-  root.querySelector("[secondary]")!.textContent = model.item.slug;
-};
-
-@customElement("ha-addon-picker")
-class HaAddonPicker extends LitElement {
-  public hass!: HomeAssistant;
-
-  @property() public label?: string;
-
-  @property() public value = "";
-
-  @internalProperty() private _addons?: HassioAddonInfo[];
-
-  @property({ type: Boolean }) public disabled = false;
-
-  @query("ha-combo-box") private _comboBox!: HaComboBox;
-
-  public open() {
-    this._comboBox?.open();
-  }
-
-  public focus() {
-    this._comboBox?.focus();
-  }
-
-  protected firstUpdated() {
-    this._getAddons();
-  }
-
-  protected render(): TemplateResult {
-    if (!this._addons) {
-      return html``;
-    }
-    return html`
-      <ha-combo-box
-        .hass=${this.hass}
-        .label=${this.label === undefined && this.hass
-          ? this.hass.localize("ui.components.addon-picker.addon")
-          : this.label}
-        .value=${this._value}
-        .renderer=${rowRenderer}
-        .items=${this._addons}
-        item-value-path="slug"
-        item-id-path="slug"
-        item-label-path="name"
-        @value-changed=${this._addonChanged}
-      ></ha-combo-box>
-    `;
-  }
-
-  private async _getAddons() {
-    try {
-      if (isComponentLoaded(this.hass, "hassio")) {
-        const supervisorInfo = await fetchHassioSupervisorInfo(this.hass);
-        this._addons = supervisorInfo.addons.sort((a, b) =>
-          compare(a.name, b.name)
-        );
-      } else {
-        showAlertDialog(this, {
-          title: this.hass.localize(
-            "ui.componencts.addon-picker.error.no_supervisor.title"
-          ),
-          text: this.hass.localize(
-            "ui.componencts.addon-picker.error.no_supervisor.description"
-          ),
-        });
-      }
-    } catch (error) {
-      showAlertDialog(this, {
-        title: this.hass.localize(
-          "ui.componencts.addon-picker.error.fetch_addons.title"
-        ),
-        text: this.hass.localize(
-          "ui.componencts.addon-picker.error.fetch_addons.description"
-        ),
-      });
-    }
-  }
-
-  private get _value() {
-    return this.value || "";
-  }
-
-  private _addonChanged(ev: PolymerChangedEvent<string>) {
-    ev.stopPropagation();
-    const newValue = ev.detail.value;
-
-    if (newValue !== this._value) {
-      this._setValue(newValue);
-    }
-  }
-
-  private _setValue(value: string) {
-    this.value = value;
-    setTimeout(() => {
-      fireEvent(this, "value-changed", { value });
-      fireEvent(this, "change");
-    }, 0);
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-addon-picker": HaAddonPicker;
-  }
-}

src/components/ha-area-picker.ts

@@ -117,8 +117,6 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {
 
   @property() public entityFilter?: (entity: EntityRegistryEntry) => boolean;
 
-  @property({ type: Boolean }) public disabled?: boolean;
-
   @internalProperty() private _areas?: AreaRegistryEntry[];
 
   @internalProperty() private _devices?: DeviceRegistryEntry[];
@@ -140,7 +138,7 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {
         this._devices = devices;
       }),
       subscribeEntityRegistry(this.hass.connection!, (entities) => {
-        this._entities = entities.filter((entity) => entity.area_id);
+        this._entities = entities;
       }),
     ];
   }
@@ -193,14 +191,11 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {
           deviceEntityLookup[entity.device_id].push(entity);
         }
         inputDevices = devices;
-        inputEntities = entities;
-      } else {
-        if (deviceFilter) {
-          inputDevices = devices;
-        }
-        if (entityFilter) {
-          inputEntities = entities;
-        }
+        inputEntities = entities.filter((entity) => entity.area_id);
+      } else if (deviceFilter) {
+        inputDevices = devices;
+      } else if (entityFilter) {
+        inputEntities = entities.filter((entity) => entity.area_id);
       }
 
       if (includeDomains) {
@@ -344,7 +339,6 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {
         item-label-path="name"
         .value=${this._value}
         .renderer=${rowRenderer}
-        .disabled=${this.disabled}
         @opened-changed=${this._openedChanged}
         @value-changed=${this._areaChanged}
       >
@@ -355,7 +349,6 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {
           .placeholder=${this.placeholder
             ? this._area(this.placeholder)?.name
             : undefined}
-          .disabled=${this.disabled}
           class="input"
           autocapitalize="none"
           autocomplete="off"

src/components/ha-code-editor.ts

@@ -1,5 +1,4 @@
-import type { StreamLanguage } from "@codemirror/stream-parser";
-import type { EditorView, KeyBinding, ViewUpdate } from "@codemirror/view";
+import { Editor } from "codemirror";
 import {
   customElement,
   internalProperty,
@@ -16,40 +15,32 @@ declare global {
   }
 }
 
-const modeTag = Symbol("mode");
-
-const readOnlyTag = Symbol("readOnly");
-
-const saveKeyBinding: KeyBinding = {
-  key: "Mod-s",
-  run: (view: EditorView) => {
-    fireEvent(view.dom, "editor-save");
-    return true;
-  },
-};
-
 @customElement("ha-code-editor")
 export class HaCodeEditor extends UpdatingElement {
-  public codemirror?: EditorView;
+  public codemirror?: Editor;
 
-  @property() public mode = "yaml";
+  @property() public mode?: string;
 
   @property({ type: Boolean }) public autofocus = false;
 
   @property({ type: Boolean }) public readOnly = false;
 
+  @property() public rtl = false;
+
   @property() public error = false;
 
   @internalProperty() private _value = "";
 
-  @internalProperty() private _langs?: Record<string, StreamLanguage<unknown>>;
-
   public set value(value: string) {
     this._value = value;
   }
 
   public get value(): string {
-    return this.codemirror ? this.codemirror.state.doc.toString() : this._value;
+    return this.codemirror ? this.codemirror.getValue() : this._value;
+  }
+
+  public get hasComments(): boolean {
+    return !!this.shadowRoot!.querySelector("span.cm-comment");
   }
 
   public connectedCallback() {
@@ -57,6 +48,7 @@ export class HaCodeEditor extends UpdatingElement {
     if (!this.codemirror) {
       return;
     }
+    this.codemirror.refresh();
     if (this.autofocus !== false) {
       this.codemirror.focus();
     }
@@ -70,27 +62,17 @@ export class HaCodeEditor extends UpdatingElement {
     }
 
     if (changedProps.has("mode")) {
-      this.codemirror.dispatch({
-        reconfigure: {
-          [modeTag]: this._mode,
-        },
-      });
+      this.codemirror.setOption("mode", this.mode);
     }
-    if (changedProps.has("readOnly")) {
-      this.codemirror.dispatch({
-        reconfigure: {
-          [readOnlyTag]: !this.readOnly,
-        },
-      });
+    if (changedProps.has("autofocus")) {
+      this.codemirror.setOption("autofocus", this.autofocus !== false);
     }
     if (changedProps.has("_value") && this._value !== this.value) {
-      this.codemirror.dispatch({
-        changes: {
-          from: 0,
-          to: this.codemirror.state.doc.length,
-          insert: this._value,
-        },
-      });
+      this.codemirror.setValue(this._value);
+    }
+    if (changedProps.has("rtl")) {
+      this.codemirror.setOption("gutters", this._calcGutters());
+      this._setScrollBarDirection();
     }
     if (changedProps.has("error")) {
       this.classList.toggle("error-state", this.error);
@@ -103,66 +85,159 @@ export class HaCodeEditor extends UpdatingElement {
     this._load();
   }
 
-  private get _mode() {
-    return this._langs![this.mode];
-  }
-
   private async _load(): Promise<void> {
     const loaded = await loadCodeMirror();
 
-    this._langs = loaded.langs;
+    const codeMirror = loaded.codeMirror;
 
     const shadowRoot = this.attachShadow({ mode: "open" });
 
-    shadowRoot!.innerHTML = `<style>
-      :host(.error-state) div.cm-wrap .cm-gutters {
+    shadowRoot!.innerHTML = `
+    <style>
+      ${loaded.codeMirrorCss}
+      .CodeMirror {
+        height: var(--code-mirror-height, auto);
+        direction: var(--code-mirror-direction, ltr);
+        font-family: var(--code-font-family, monospace);
+      }
+      .CodeMirror-scroll {
+        max-height: var(--code-mirror-max-height, --code-mirror-height);
+      }
+      :host(.error-state) .CodeMirror-gutters {
         border-color: var(--error-state-color, red);
       }
+      .CodeMirror-focused .CodeMirror-gutters {
+        border-right: 2px solid var(--paper-input-container-focus-color, var(--primary-color));
+      }
+      .CodeMirror-linenumber {
+        color: var(--paper-dialog-color, var(--secondary-text-color));
+      }
+      .rtl .CodeMirror-vscrollbar {
+        right: auto;
+        left: 0px;
+      }
+      .rtl-gutter {
+        width: 20px;
+      }
+      .CodeMirror-gutters {
+        border-right: 1px solid var(--paper-input-container-color, var(--secondary-text-color));
+        background-color: var(--paper-dialog-background-color, var(--primary-background-color));
+        transition: 0.2s ease border-right;
+      }
+      .cm-s-default.CodeMirror {
+        background-color: var(--code-editor-background-color, var(--card-background-color));
+        color: var(--primary-text-color);
+      }
+      .cm-s-default .CodeMirror-cursor {
+        border-left: 1px solid var(--secondary-text-color);
+      }
+
+      .cm-s-default div.CodeMirror-selected, .cm-s-default.CodeMirror-focused div.CodeMirror-selected {
+        background: rgba(var(--rgb-primary-color), 0.2);
+      }
+
+      .cm-s-default .CodeMirror-line::selection,
+      .cm-s-default .CodeMirror-line>span::selection,
+      .cm-s-default .CodeMirror-line>span>span::selection {
+        background: rgba(var(--rgb-primary-color), 0.2);
+      }
+
+      .cm-s-default .cm-keyword {
+        color: var(--codemirror-keyword, #6262FF);
+      }
+
+      .cm-s-default .cm-operator {
+        color: var(--codemirror-operator, #cda869);
+      }
+
+      .cm-s-default .cm-variable-2 {
+        color: var(--codemirror-variable-2, #690);
+      }
+
+      .cm-s-default .cm-builtin {
+        color: var(--codemirror-builtin, #9B7536);
+      }
+
+      .cm-s-default .cm-atom {
+        color: var(--codemirror-atom, #F90);
+      }
+
+      .cm-s-default .cm-number {
+        color: var(--codemirror-number, #ca7841);
+      }
+
+      .cm-s-default .cm-def {
+        color: var(--codemirror-def, #8DA6CE);
+      }
+
+      .cm-s-default .cm-string {
+        color: var(--codemirror-string, #07a);
+      }
+
+      .cm-s-default .cm-string-2 {
+        color: var(--codemirror-string-2, #bd6b18);
+      }
+
+      .cm-s-default .cm-comment {
+        color: var(--codemirror-comment, #777);
+      }
+
+      .cm-s-default .cm-variable {
+        color: var(--codemirror-variable, #07a);
+      }
+
+      .cm-s-default .cm-tag {
+        color: var(--codemirror-tag, #997643);
+      }
+
+      .cm-s-default .cm-meta {
+        color: var(--codemirror-meta, var(--primary-text-color));
+      }
+
+      .cm-s-default .cm-attribute {
+        color: var(--codemirror-attribute, #d6bb6d);
+      }
+
+      .cm-s-default .cm-property {
+        color: var(--codemirror-property, #905);
+      }
+
+      .cm-s-default .cm-qualifier {
+        color: var(--codemirror-qualifier, #690);
+      }
+
+      .cm-s-default .cm-variable-3  {
+        color: var(--codemirror-variable-3, #07a);
+      }
+
+      .cm-s-default .cm-type {
+        color: var(--codemirror-type, #07a);
+      }
     </style>`;
 
-    const container = document.createElement("span");
-
-    shadowRoot.appendChild(container);
-
-    this.codemirror = new loaded.EditorView({
-      state: loaded.EditorState.create({
-        doc: this._value,
-        extensions: [
-          loaded.lineNumbers(),
-          loaded.history(),
-          loaded.highlightSelectionMatches(),
-          loaded.keymap.of([
-            ...loaded.defaultKeymap,
-            ...loaded.searchKeymap,
-            ...loaded.historyKeymap,
-            ...loaded.tabKeyBindings,
-            saveKeyBinding,
-          ] as KeyBinding[]),
-          loaded.tagExtension(modeTag, this._mode),
-          loaded.theme,
-          loaded.Prec.fallback(loaded.highlightStyle),
-          loaded.tagExtension(
-            readOnlyTag,
-            loaded.EditorView.editable.of(!this.readOnly)
-          ),
-          loaded.EditorView.updateListener.of((update) =>
-            this._onUpdate(update)
-          ),
-        ],
-      }),
-      root: shadowRoot,
-      parent: container,
+    this.codemirror = codeMirror(shadowRoot, {
+      value: this._value,
+      lineNumbers: true,
+      tabSize: 2,
+      mode: this.mode,
+      autofocus: this.autofocus !== false,
+      viewportMargin: Infinity,
+      readOnly: this.readOnly,
+      extraKeys: {
+        Tab: "indentMore",
+        "Shift-Tab": "indentLess",
+      },
+      gutters: this._calcGutters(),
     });
+    this._setScrollBarDirection();
+    this.codemirror!.on("changes", () => this._onChange());
   }
 
   private _blockKeyboardShortcuts() {
     this.addEventListener("keydown", (ev) => ev.stopPropagation());
   }
 
-  private _onUpdate(update: ViewUpdate): void {
-    if (!update.docChanged) {
-      return;
-    }
+  private _onChange(): void {
     const newValue = this.value;
     if (newValue === this._value) {
       return;
@@ -170,6 +245,16 @@ export class HaCodeEditor extends UpdatingElement {
     this._value = newValue;
     fireEvent(this, "value-changed", { value: this._value });
   }
+
+  private _calcGutters(): string[] {
+    return this.rtl ? ["rtl-gutter", "CodeMirror-linenumbers"] : [];
+  }
+
+  private _setScrollBarDirection(): void {
+    if (this.codemirror) {
+      this.codemirror.getWrapperElement().classList.toggle("rtl", this.rtl);
+    }
+  }
 }
 
 declare global {

src/components/ha-combo-box.js

@@ -0,0 +1,116 @@
+import "@polymer/paper-input/paper-input";
+import "@polymer/paper-item/paper-item";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+/* eslint-plugin-disable lit */
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+import "@vaadin/vaadin-combo-box/theme/material/vaadin-combo-box-light";
+import { EventsMixin } from "../mixins/events-mixin";
+import "./ha-icon-button";
+
+class HaComboBox extends EventsMixin(PolymerElement) {
+  static get template() {
+    return html`
+      <style>
+        paper-input > ha-icon-button {
+          --mdc-icon-button-size: 24px;
+          padding: 2px;
+          color: var(--secondary-text-color);
+        }
+        [hidden] {
+          display: none;
+        }
+      </style>
+      <vaadin-combo-box-light
+        items="[[_items]]"
+        item-value-path="[[itemValuePath]]"
+        item-label-path="[[itemLabelPath]]"
+        value="{{value}}"
+        opened="{{opened}}"
+        allow-custom-value="[[allowCustomValue]]"
+        on-change="_fireChanged"
+      >
+        <paper-input
+          autofocus="[[autofocus]]"
+          label="[[label]]"
+          class="input"
+          value="[[value]]"
+        >
+          <ha-icon-button
+            slot="suffix"
+            class="clear-button"
+            icon="hass:close"
+            hidden$="[[!value]]"
+            >Clear</ha-icon-button
+          >
+          <ha-icon-button
+            slot="suffix"
+            class="toggle-button"
+            icon="[[_computeToggleIcon(opened)]]"
+            hidden$="[[!items.length]]"
+            >Toggle</ha-icon-button
+          >
+        </paper-input>
+        <template>
+          <style>
+            paper-item {
+              margin: -5px -10px;
+              padding: 0;
+            }
+          </style>
+          <paper-item>[[_computeItemLabel(item, itemLabelPath)]]</paper-item>
+        </template>
+      </vaadin-combo-box-light>
+    `;
+  }
+
+  static get properties() {
+    return {
+      allowCustomValue: Boolean,
+      items: {
+        type: Object,
+        observer: "_itemsChanged",
+      },
+      _items: Object,
+      itemLabelPath: String,
+      itemValuePath: String,
+      autofocus: Boolean,
+      label: String,
+      opened: {
+        type: Boolean,
+        value: false,
+        observer: "_openedChanged",
+      },
+      value: {
+        type: String,
+        notify: true,
+      },
+    };
+  }
+
+  _openedChanged(newVal) {
+    if (!newVal) {
+      this._items = this.items;
+    }
+  }
+
+  _itemsChanged(newVal) {
+    if (!this.opened) {
+      this._items = newVal;
+    }
+  }
+
+  _computeToggleIcon(opened) {
+    return opened ? "hass:menu-up" : "hass:menu-down";
+  }
+
+  _computeItemLabel(item, itemLabelPath) {
+    return itemLabelPath ? item[itemLabelPath] : item;
+  }
+
+  _fireChanged(ev) {
+    ev.stopPropagation();
+    this.fire("change");
+  }
+}
+
+customElements.define("ha-combo-box", HaComboBox);

src/components/ha-combo-box.ts

@@ -1,181 +0,0 @@
-import "@material/mwc-icon-button/mwc-icon-button";
-import { mdiClose, mdiMenuDown, mdiMenuUp } from "@mdi/js";
-import "@polymer/paper-input/paper-input";
-import "@polymer/paper-item/paper-item";
-import "@polymer/paper-item/paper-item-body";
-import "@polymer/paper-listbox/paper-listbox";
-import "@vaadin/vaadin-combo-box/theme/material/vaadin-combo-box-light";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  query,
-  TemplateResult,
-} from "lit-element";
-import { fireEvent } from "../common/dom/fire_event";
-import { PolymerChangedEvent } from "../polymer-types";
-import { HomeAssistant } from "../types";
-import "./ha-svg-icon";
-
-const defaultRowRenderer = (
-  root: HTMLElement,
-  _owner,
-  model: { item: any }
-) => {
-  if (!root.firstElementChild) {
-    root.innerHTML = `
-    <style>
-      paper-item {
-        margin: -5px -10px;
-        padding: 0;
-      }
-    </style>
-    <paper-item></paper-item>
-    `;
-  }
-
-  root.querySelector("paper-item")!.textContent = model.item;
-};
-
-@customElement("ha-combo-box")
-export class HaComboBox extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property() public label?: string;
-
-  @property() public value?: string;
-
-  @property() public items?: [];
-
-  @property() public filteredItems?: [];
-
-  @property({ attribute: "allow-custom-value", type: Boolean })
-  public allowCustomValue?: boolean;
-
-  @property({ attribute: "item-value-path" }) public itemValuePath?: string;
-
-  @property({ attribute: "item-label-path" }) public itemLabelPath?: string;
-
-  @property({ attribute: "item-id-path" }) public itemIdPath?: string;
-
-  @property() public renderer?: (
-    root: HTMLElement,
-    owner: HTMLElement,
-    model: { item: any }
-  ) => void;
-
-  @property({ type: Boolean }) public disabled?: boolean;
-
-  @internalProperty() private _opened?: boolean;
-
-  @query("vaadin-combo-box-light", true) private _comboBox!: HTMLElement;
-
-  public open() {
-    this.updateComplete.then(() => {
-      (this._comboBox as any)?.open();
-    });
-  }
-
-  public focus() {
-    this.updateComplete.then(() => {
-      this.shadowRoot?.querySelector("paper-input")?.focus();
-    });
-  }
-
-  protected render(): TemplateResult {
-    return html`
-      <vaadin-combo-box-light
-        .itemValuePath=${this.itemValuePath}
-        .itemIdPath=${this.itemIdPath}
-        .itemLabelPath=${this.itemLabelPath}
-        .value=${this.value}
-        .items=${this.items}
-        .filteredItems=${this.filteredItems}
-        .renderer=${this.renderer || defaultRowRenderer}
-        .allowCustomValue=${this.allowCustomValue}
-        .disabled=${this.disabled}
-        @opened-changed=${this._openedChanged}
-        @filter-changed=${this._filterChanged}
-        @value-changed=${this._valueChanged}
-      >
-        <paper-input
-          .label=${this.label}
-          .disabled=${this.disabled}
-          class="input"
-          autocapitalize="none"
-          autocomplete="off"
-          autocorrect="off"
-          spellcheck="false"
-        >
-          ${this.value
-            ? html`
-                <mwc-icon-button
-                  .label=${this.hass.localize("ui.components.combo-box.clear")}
-                  slot="suffix"
-                  class="clear-button"
-                  @click=${this._clearValue}
-                >
-                  <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
-                </mwc-icon-button>
-              `
-            : ""}
-
-          <mwc-icon-button
-            .label=${this.hass.localize("ui.components.combo-box.show")}
-            slot="suffix"
-            class="toggle-button"
-          >
-            <ha-svg-icon
-              .path=${this._opened ? mdiMenuUp : mdiMenuDown}
-            ></ha-svg-icon>
-          </mwc-icon-button>
-        </paper-input>
-      </vaadin-combo-box-light>
-    `;
-  }
-
-  private _clearValue(ev: Event) {
-    ev.stopPropagation();
-    fireEvent(this, "value-changed", { value: undefined });
-  }
-
-  private _openedChanged(ev: PolymerChangedEvent<boolean>) {
-    this._opened = ev.detail.value;
-    // @ts-ignore
-    fireEvent(this, ev.type, ev.detail);
-  }
-
-  private _filterChanged(ev: PolymerChangedEvent<boolean>) {
-    // @ts-ignore
-    fireEvent(this, ev.type, ev.detail);
-  }
-
-  private _valueChanged(ev: PolymerChangedEvent<string>) {
-    ev.stopPropagation();
-    const newValue = ev.detail.value;
-
-    if (newValue !== this.value) {
-      fireEvent(this, "value-changed", { value: newValue });
-    }
-  }
-
-  static get styles(): CSSResult {
-    return css`
-      paper-input > mwc-icon-button {
-        --mdc-icon-button-size: 24px;
-        padding: 2px;
-        color: var(--secondary-text-color);
-      }
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-combo-box": HaComboBox;
-  }
-}

src/components/ha-form/ha-form-string.ts

@@ -1,9 +1,6 @@
-import { mdiEye, mdiEyeOff } from "@mdi/js";
 import "@polymer/paper-input/paper-input";
 import type { PaperInputElement } from "@polymer/paper-input/paper-input";
 import {
-  css,
-  CSSResult,
   customElement,
   html,
   internalProperty,
@@ -13,13 +10,12 @@ import {
   TemplateResult,
 } from "lit-element";
 import { fireEvent } from "../../common/dom/fire_event";
-import "../ha-svg-icon";
+import "../ha-icon-button";
 import type {
   HaFormElement,
   HaFormStringData,
   HaFormStringSchema,
 } from "./ha-form";
-import "@material/mwc-icon-button/mwc-icon-button";
 
 @customElement("ha-form-string")
 export class HaFormString extends LitElement implements HaFormElement {
@@ -52,17 +48,16 @@ export class HaFormString extends LitElement implements HaFormElement {
             .autoValidate=${this.schema.required}
             @value-changed=${this._valueChanged}
           >
-            <mwc-icon-button
+            <ha-icon-button
               toggles
               slot="suffix"
+              .icon=${this._unmaskedPassword ? "hass:eye-off" : "hass:eye"}
               id="iconButton"
               title="Click to toggle between masked and clear password"
               @click=${this._toggleUnmaskedPassword}
               tabindex="-1"
-              ><ha-svg-icon
-                .path=${this._unmaskedPassword ? mdiEyeOff : mdiEye}
-              ></ha-svg-icon>
-            </mwc-icon-button>
+            >
+            </ha-icon-button>
           </paper-input>
         `
       : html`
@@ -103,15 +98,6 @@ export class HaFormString extends LitElement implements HaFormElement {
     }
     return "text";
   }
-
-  static get styles(): CSSResult {
-    return css`
-      mwc-icon-button {
-        --mdc-icon-button-size: 24px;
-        color: var(--secondary-text-color);
-      }
-    `;
-  }
 }
 
 declare global {

src/components/ha-form/ha-form.ts

@@ -202,8 +202,9 @@ export class HaForm extends LitElement implements HaFormElement {
     ev.stopPropagation();
     const schema = (ev.target as HaFormElement).schema as HaFormSchema;
     const data = this.data as HaFormDataContainer;
+    data[schema.name] = ev.detail.value;
     fireEvent(this, "value-changed", {
-      value: { ...data, [schema.name]: ev.detail.value },
+      value: { ...data },
     });
   }
 

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

@@ -21,11 +21,8 @@ export class HaActionSelector extends LitElement {
 
   @property() public label?: string;
 
-  @property({ type: Boolean, reflect: true }) public disabled = false;
-
   protected render() {
     return html`<ha-automation-action
-      .disabled=${this.disabled}
       .actions=${this.value || []}
       .hass=${this.hass}
     ></ha-automation-action>`;
@@ -37,10 +34,6 @@ export class HaActionSelector extends LitElement {
         display: block;
         margin-bottom: 16px;
       }
-      :host([disabled]) ha-automation-action {
-        opacity: var(--light-disabled-opacity);
-        pointer-events: none;
-      }
     `;
   }
 }

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

@@ -1,30 +0,0 @@
-import { customElement, html, LitElement, property } from "lit-element";
-import { AddonSelector } from "../../data/selector";
-import { HomeAssistant } from "../../types";
-import "../ha-addon-picker";
-
-@customElement("ha-selector-addon")
-export class HaAddonSelector extends LitElement {
-  @property() public hass!: HomeAssistant;
-
-  @property() public selector!: AddonSelector;
-
-  @property() public value?: any;
-
-  @property() public label?: string;
-
-  protected render() {
-    return html`<ha-addon-picker
-      .hass=${this.hass}
-      .value=${this.value}
-      .label=${this.label}
-      allow-custom-entity
-    ></ha-addon-picker>`;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-selector-addon": HaAddonSelector;
-  }
-}

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

@@ -24,8 +24,6 @@ export class HaAreaSelector extends LitElement {
 
   @internalProperty() public _configEntries?: ConfigEntry[];
 
-  @property({ type: Boolean }) public disabled = false;
-
   protected updated(changedProperties) {
     if (changedProperties.has("selector")) {
       const oldSelector = changedProperties.get("selector");
@@ -52,7 +50,6 @@ export class HaAreaSelector extends LitElement {
       .includeDomains=${this.selector.area.entity?.domain
         ? [this.selector.area.entity.domain]
         : undefined}
-      .disabled=${this.disabled}
     ></ha-area-picker>`;
   }
 

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

@@ -19,14 +19,11 @@ export class HaBooleanSelector extends LitElement {
 
   @property() public label?: string;
 
-  @property({ type: Boolean }) public disabled = false;
-
   protected render() {
     return html` <ha-formfield alignEnd spaceBetween .label=${this.label}>
       <ha-switch
         .checked=${this.value}
         @change=${this._handleChange}
-        .disabled=${this.disabled}
       ></ha-switch>
     </ha-formfield>`;
   }

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

@@ -23,12 +23,10 @@ export class HaDeviceSelector extends LitElement {
 
   @internalProperty() public _configEntries?: ConfigEntry[];
 
-  @property({ type: Boolean }) public disabled = false;
-
   protected updated(changedProperties) {
     if (changedProperties.has("selector")) {
       const oldSelector = changedProperties.get("selector");
-      if (oldSelector !== this.selector && this.selector.device?.integration) {
+      if (oldSelector !== this.selector && this.selector.device.integration) {
         this._loadConfigEntries();
       }
     }
@@ -46,25 +44,24 @@ export class HaDeviceSelector extends LitElement {
       .includeDomains=${this.selector.device.entity?.domain
         ? [this.selector.device.entity.domain]
         : undefined}
-      .disabled=${this.disabled}
       allow-custom-entity
     ></ha-device-picker>`;
   }
 
   private _filterDevices(device: DeviceRegistryEntry): boolean {
     if (
-      this.selector.device?.manufacturer &&
+      this.selector.device.manufacturer &&
       device.manufacturer !== this.selector.device.manufacturer
     ) {
       return false;
     }
     if (
-      this.selector.device?.model &&
+      this.selector.device.model &&
       device.model !== this.selector.device.model
     ) {
       return false;
     }
-    if (this.selector.device?.integration) {
+    if (this.selector.device.integration) {
       if (
         this._configEntries &&
         !this._configEntries.some((entry) =>

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

@@ -25,15 +25,12 @@ export class HaEntitySelector extends SubscribeMixin(LitElement) {
 
   @property() public label?: string;
 
-  @property({ type: Boolean }) public disabled = false;
-
   protected render() {
     return html`<ha-entity-picker
       .hass=${this.hass}
       .value=${this.value}
       .label=${this.label}
       .entityFilter=${(entity) => this._filterEntities(entity)}
-      .disabled=${this.disabled}
       allow-custom-entity
     ></ha-entity-picker>`;
   }
@@ -54,12 +51,12 @@ export class HaEntitySelector extends SubscribeMixin(LitElement) {
   }
 
   private _filterEntities(entity: HassEntity): boolean {
-    if (this.selector.entity?.domain) {
+    if (this.selector.entity.domain) {
       if (computeStateDomain(entity) !== this.selector.entity.domain) {
         return false;
       }
     }
-    if (this.selector.entity?.device_class) {
+    if (this.selector.entity.device_class) {
       if (
         !entity.attributes.device_class ||
         entity.attributes.device_class !== this.selector.entity.device_class
@@ -67,7 +64,7 @@ export class HaEntitySelector extends SubscribeMixin(LitElement) {
         return false;
       }
     }
-    if (this.selector.entity?.integration) {
+    if (this.selector.entity.integration) {
       if (
         !this._entityPlaformLookup ||
         this._entityPlaformLookup[entity.entity_id] !==

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

@@ -21,12 +21,8 @@ export class HaNumberSelector extends LitElement {
 
   @property() public value?: number;
 
-  @property() public placeholder?: number;
-
   @property() public label?: string;
 
-  @property({ type: Boolean }) public disabled = false;
-
   protected render() {
     return html`${this.label}
       ${this.selector.number.mode === "slider"
@@ -35,7 +31,6 @@ export class HaNumberSelector extends LitElement {
             .max=${this.selector.number.max}
             .value=${this._value}
             .step=${this.selector.number.step}
-            .disabled=${this.disabled}
             pin
             ignore-bar-touch
             @change=${this._handleSliderChange}
@@ -47,14 +42,12 @@ export class HaNumberSelector extends LitElement {
         .label=${this.selector.number.mode === "slider"
           ? undefined
           : this.label}
-        .placeholder=${this.placeholder}
         .noLabelFloat=${this.selector.number.mode === "slider"}
         class=${classMap({ single: this.selector.number.mode === "box" })}
         .min=${this.selector.number.min}
         .max=${this.selector.number.max}
-        .value=${this.value}
+        .value=${this._value}
         .step=${this.selector.number.step}
-        .disabled=${this.disabled}
         type="number"
         auto-validate
         @value-changed=${this._handleInputChange}
@@ -72,21 +65,16 @@ export class HaNumberSelector extends LitElement {
   }
 
   private _handleInputChange(ev) {
-    ev.stopPropagation();
-    const value =
-      ev.detail.value === "" || isNaN(ev.detail.value)
-        ? undefined
-        : Number(ev.detail.value);
-    if (this.value === value) {
+    const value = ev.detail.value;
+    if (this._value === value) {
       return;
     }
     fireEvent(this, "value-changed", { value });
   }
 
   private _handleSliderChange(ev) {
-    ev.stopPropagation();
-    const value = Number(ev.target.value);
-    if (this.value === value) {
+    const value = ev.target.value;
+    if (this._value === value) {
       return;
     }
     fireEvent(this, "value-changed", { value });

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

@@ -11,14 +11,8 @@ export class HaObjectSelector extends LitElement {
 
   @property() public label?: string;
 
-  @property() public placeholder?: string;
-
-  @property({ type: Boolean }) public disabled = false;
-
   protected render() {
     return html`<ha-yaml-editor
-      .disabled=${this.disabled}
-      .placeholder=${this.placeholder}
       .defaultValue=${this.value}
       @value-changed=${this._handleChange}
     ></ha-yaml-editor>`;

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

@@ -1,78 +0,0 @@
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  property,
-} from "lit-element";
-import { fireEvent } from "../../common/dom/fire_event";
-import { HomeAssistant } from "../../types";
-import { SelectSelector } from "../../data/selector";
-import "../ha-paper-dropdown-menu";
-
-@customElement("ha-selector-select")
-export class HaSelectSelector extends LitElement {
-  @property() public hass!: HomeAssistant;
-
-  @property() public selector!: SelectSelector;
-
-  @property() public value?: string;
-
-  @property() public label?: string;
-
-  @property({ type: Boolean }) public disabled = false;
-
-  protected render() {
-    return html`<ha-paper-dropdown-menu
-      .disabled=${this.disabled}
-      .label=${this.label}
-    >
-      <paper-listbox
-        slot="dropdown-content"
-        attr-for-selected="item-value"
-        .selected=${this.value}
-        @selected-item-changed=${this._valueChanged}
-      >
-        ${this.selector.select.options.map(
-          (item: string) => html`
-            <paper-item .itemValue=${item}>
-              ${item}
-            </paper-item>
-          `
-        )}
-      </paper-listbox>
-    </ha-paper-dropdown-menu>`;
-  }
-
-  private _valueChanged(ev) {
-    if (this.disabled || !ev.detail.value) {
-      return;
-    }
-    fireEvent(this, "value-changed", {
-      value: ev.detail.value.itemValue,
-    });
-  }
-
-  static get styles(): CSSResult {
-    return css`
-      ha-paper-dropdown-menu {
-        width: 100%;
-        min-width: 200px;
-        display: block;
-      }
-      paper-listbox {
-        min-width: 200px;
-      }
-      paper-item {
-        cursor: pointer;
-      }
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-selector-select": HaSelectSelector;
-  }
-}

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

@@ -3,11 +3,7 @@ import "@material/mwc-list/mwc-list-item";
 import "@material/mwc-tab-bar/mwc-tab-bar";
 import "@material/mwc-tab/mwc-tab";
 import "@polymer/paper-input/paper-input";
-import {
-  HassEntity,
-  HassServiceTarget,
-  UnsubscribeFunc,
-} from "home-assistant-js-websocket";
+import { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket";
 import {
   css,
   CSSResult,
@@ -24,6 +20,7 @@ import {
   subscribeEntityRegistry,
 } from "../../data/entity_registry";
 import { TargetSelector } from "../../data/selector";
+import { Target } from "../../data/target";
 import { SubscribeMixin } from "../../mixins/subscribe-mixin";
 import { HomeAssistant } from "../../types";
 import "../ha-target-picker";
@@ -34,7 +31,7 @@ export class HaTargetSelector extends SubscribeMixin(LitElement) {
 
   @property() public selector!: TargetSelector;
 
-  @property() public value?: HassServiceTarget;
+  @property() public value?: Target;
 
   @property() public label?: string;
 
@@ -42,8 +39,6 @@ export class HaTargetSelector extends SubscribeMixin(LitElement) {
 
   @internalProperty() private _configEntries?: ConfigEntry[];
 
-  @property({ type: Boolean }) public disabled = false;
-
   public hassSubscribe(): UnsubscribeFunc[] {
     return [
       subscribeEntityRegistry(this.hass.connection!, (entities) => {
@@ -64,8 +59,7 @@ export class HaTargetSelector extends SubscribeMixin(LitElement) {
       const oldSelector = changedProperties.get("selector");
       if (
         oldSelector !== this.selector &&
-        (this.selector.target.device?.integration ||
-          this.selector.target.entity?.integration)
+        this.selector.target.device?.integration
       ) {
         this._loadConfigEntries();
       }
@@ -86,20 +80,15 @@ export class HaTargetSelector extends SubscribeMixin(LitElement) {
       .includeDomains=${this.selector.target.entity?.domain
         ? [this.selector.target.entity.domain]
         : undefined}
-      .disabled=${this.disabled}
     ></ha-target-picker>`;
   }
 
   private _filterEntities(entity: HassEntity): boolean {
-    if (
-      this.selector.target.entity?.integration ||
-      this.selector.target.device?.integration
-    ) {
+    if (this.selector.target.entity?.integration) {
       if (
         !this._entityPlaformLookup ||
         this._entityPlaformLookup[entity.entity_id] !==
-          (this.selector.target.entity?.integration ||
-            this.selector.target.device?.integration)
+          this.selector.target.entity.integration
       ) {
         return false;
       }
@@ -129,10 +118,7 @@ export class HaTargetSelector extends SubscribeMixin(LitElement) {
     ) {
       return false;
     }
-    if (
-      this.selector.target.device?.integration ||
-      this.selector.target.entity?.integration
-    ) {
+    if (this.selector.target.device?.integration) {
       if (
         !this._configEntries?.some((entry) =>
           device.config_entries.includes(entry.entry_id)
@@ -146,16 +132,14 @@ export class HaTargetSelector extends SubscribeMixin(LitElement) {
 
   private async _loadConfigEntries() {
     this._configEntries = (await getConfigEntries(this.hass)).filter(
-      (entry) =>
-        entry.domain ===
-        (this.selector.target.device?.integration ||
-          this.selector.target.entity?.integration)
+      (entry) => entry.domain === this.selector.target.device?.integration
     );
   }
 
   static get styles(): CSSResult {
     return css`
       ha-target-picker {
+        margin: 0 -8px;
         display: block;
       }
     `;

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

@@ -13,20 +13,14 @@ export class HaTextSelector extends LitElement {
 
   @property() public label?: string;
 
-  @property() public placeholder?: string;
-
   @property() public selector!: StringSelector;
 
-  @property({ type: Boolean }) public disabled = false;
-
   protected render() {
     if (this.selector.text?.multiline) {
       return html`<paper-textarea
         .label=${this.label}
-        .placeholder=${this.placeholder}
-        .value=${this.value}
-        .disabled=${this.disabled}
-        @value-changed=${this._handleChange}
+        .value="${this.value}"
+        @value-changed="${this._handleChange}"
         autocapitalize="none"
         autocomplete="off"
         spellcheck="false"
@@ -35,8 +29,6 @@ export class HaTextSelector extends LitElement {
     return html`<paper-input
       required
       .value=${this.value}
-      .placeholder=${this.placeholder}
-      .disabled=${this.disabled}
       @value-changed=${this._handleChange}
       .label=${this.label}
     ></paper-input>`;

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

@@ -17,8 +17,6 @@ export class HaTimeSelector extends LitElement {
 
   @property() public label?: string;
 
-  @property({ type: Boolean }) public disabled = false;
-
   protected render() {
     const parts = this.value?.split(":") || [];
     const hours = useAMPM ? parts[0] ?? "12" : parts[0] ?? "0";
@@ -31,7 +29,6 @@ export class HaTimeSelector extends LitElement {
         .sec=${parts[2] ?? "00"}
         .format=${useAMPM ? 12 : 24}
         .amPm=${useAMPM && (Number(hours) > 12 ? "PM" : "AM")}
-        .disabled=${this.disabled}
         @change=${this._timeChanged}
         @am-pm-changed=${this._timeChanged}
         hide-label

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

@@ -3,7 +3,6 @@ import { dynamicElement } from "../../common/dom/dynamic-element-directive";
 import { Selector } from "../../data/selector";
 import { HomeAssistant } from "../../types";
 import "./ha-selector-action";
-import "./ha-selector-addon";
 import "./ha-selector-area";
 import "./ha-selector-boolean";
 import "./ha-selector-device";
@@ -13,7 +12,6 @@ import "./ha-selector-target";
 import "./ha-selector-time";
 import "./ha-selector-object";
 import "./ha-selector-text";
-import "./ha-selector-select";
 
 @customElement("ha-selector")
 export class HaSelector extends LitElement {
@@ -25,10 +23,6 @@ export class HaSelector extends LitElement {
 
   @property() public label?: string;
 
-  @property() public placeholder?: any;
-
-  @property({ type: Boolean }) public disabled = false;
-
   public focus() {
     const input = this.shadowRoot!.getElementById("selector");
     if (!input) {
@@ -48,8 +42,6 @@ export class HaSelector extends LitElement {
         selector: this.selector,
         value: this.value,
         label: this.label,
-        placeholder: this.placeholder,
-        disabled: this.disabled,
         id: "selector",
       })}
     `;

src/components/ha-service-control.ts

@@ -1,407 +0,0 @@
-import { HassService, HassServiceTarget } from "home-assistant-js-websocket";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  PropertyValues,
-  query,
-} from "lit-element";
-import memoizeOne from "memoize-one";
-import { fireEvent } from "../common/dom/fire_event";
-import { computeDomain } from "../common/entity/compute_domain";
-import { computeObjectId } from "../common/entity/compute_object_id";
-import { ENTITY_COMPONENT_DOMAINS } from "../data/entity";
-import { Selector } from "../data/selector";
-import { PolymerChangedEvent } from "../polymer-types";
-import { HomeAssistant } from "../types";
-import "./ha-selector/ha-selector";
-import "./ha-service-picker";
-import "./ha-settings-row";
-import "./ha-yaml-editor";
-import "./ha-checkbox";
-import type { HaYamlEditor } from "./ha-yaml-editor";
-
-interface ExtHassService extends Omit<HassService, "fields"> {
-  fields: {
-    key: string;
-    name?: string;
-    description: string;
-    required?: boolean;
-    advanced?: boolean;
-    default?: any;
-    example?: any;
-    selector?: Selector;
-  }[];
-}
-
-@customElement("ha-service-control")
-export class HaServiceControl extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property({ attribute: false }) public value?: {
-    service: string;
-    target?: HassServiceTarget;
-    data?: Record<string, any>;
-  };
-
-  @property({ reflect: true, type: Boolean }) public narrow!: boolean;
-
-  @property({ type: Boolean }) public showAdvanced?: boolean;
-
-  @internalProperty() private _serviceData?: ExtHassService;
-
-  @internalProperty() private _checkedKeys = new Set();
-
-  @query("ha-yaml-editor") private _yamlEditor?: HaYamlEditor;
-
-  protected updated(changedProperties: PropertyValues) {
-    if (!changedProperties.has("value")) {
-      return;
-    }
-    const oldValue = changedProperties.get("value") as
-      | undefined
-      | this["value"];
-
-    if (oldValue?.service !== this.value?.service) {
-      this._checkedKeys = new Set();
-    }
-
-    this._serviceData = this.value?.service
-      ? this._getServiceInfo(this.value.service)
-      : undefined;
-
-    if (
-      this._serviceData &&
-      "target" in this._serviceData &&
-      (this.value?.data?.entity_id ||
-        this.value?.data?.area_id ||
-        this.value?.data?.device_id)
-    ) {
-      const target = {
-        ...this.value.target,
-      };
-
-      if (this.value.data.entity_id && !this.value.target?.entity_id) {
-        target.entity_id = this.value.data.entity_id;
-      }
-      if (this.value.data.area_id && !this.value.target?.area_id) {
-        target.area_id = this.value.data.area_id;
-      }
-      if (this.value.data.device_id && !this.value.target?.device_id) {
-        target.device_id = this.value.data.device_id;
-      }
-
-      this.value = {
-        ...this.value,
-        target,
-        data: { ...this.value.data },
-      };
-
-      delete this.value.data!.entity_id;
-      delete this.value.data!.device_id;
-      delete this.value.data!.area_id;
-    }
-
-    if (this.value?.data) {
-      const yamlEditor = this._yamlEditor;
-      if (yamlEditor && yamlEditor.value !== this.value.data) {
-        yamlEditor.setValue(this.value.data);
-      }
-    }
-  }
-
-  private _domainFilter = memoizeOne((service: string) => {
-    const domain = computeDomain(service);
-    return ENTITY_COMPONENT_DOMAINS.includes(domain) ? [domain] : null;
-  });
-
-  private _getServiceInfo = memoizeOne((service: string):
-    | ExtHassService
-    | undefined => {
-    if (!service) {
-      return undefined;
-    }
-    const domain = computeDomain(service);
-    const serviceName = computeObjectId(service);
-    const serviceDomains = this.hass.services;
-    if (!(domain in serviceDomains)) {
-      return undefined;
-    }
-    if (!(serviceName in serviceDomains[domain])) {
-      return undefined;
-    }
-
-    const fields = Object.entries(
-      serviceDomains[domain][serviceName].fields
-    ).map(([key, value]) => {
-      return {
-        key,
-        ...value,
-        selector: value.selector as Selector | undefined,
-      };
-    });
-    return {
-      ...serviceDomains[domain][serviceName],
-      fields,
-    };
-  });
-
-  protected render() {
-    const legacy =
-      this._serviceData?.fields.length &&
-      !this._serviceData.fields.some((field) => field.selector);
-
-    const entityId =
-      legacy &&
-      this._serviceData?.fields.find((field) => field.key === "entity_id");
-
-    const hasOptional = Boolean(
-      !legacy &&
-        this._serviceData?.fields.some(
-          (field) => field.selector && !field.required
-        )
-    );
-
-    return html`<ha-service-picker
-        .hass=${this.hass}
-        .value=${this.value?.service}
-        @value-changed=${this._serviceChanged}
-      ></ha-service-picker>
-      <p>${this._serviceData?.description}</p>
-      ${this._serviceData && "target" in this._serviceData
-        ? html`<ha-settings-row .narrow=${this.narrow}>
-            ${hasOptional
-              ? html`<div slot="prefix" class="checkbox-spacer"></div>`
-              : ""}
-            <span slot="heading"
-              >${this.hass.localize(
-                "ui.components.service-control.target"
-              )}</span
-            >
-            <span slot="description"
-              >${this.hass.localize(
-                "ui.components.service-control.target_description"
-              )}</span
-            ><ha-selector
-              .hass=${this.hass}
-              .selector=${this._serviceData.target
-                ? { target: this._serviceData.target }
-                : {
-                    target: {
-                      entity: { domain: computeDomain(this.value!.service) },
-                    },
-                  }}
-              @value-changed=${this._targetChanged}
-              .value=${this.value?.target}
-            ></ha-selector
-          ></ha-settings-row>`
-        : entityId
-        ? html`<ha-entity-picker
-            .hass=${this.hass}
-            .value=${this.value?.data?.entity_id}
-            .label=${entityId.description}
-            .includeDomains=${this._domainFilter(this.value!.service)}
-            @value-changed=${this._entityPicked}
-            allow-custom-entity
-          ></ha-entity-picker>`
-        : ""}
-      ${legacy
-        ? html`<ha-yaml-editor
-            .label=${this.hass.localize(
-              "ui.components.service-control.service_data"
-            )}
-            .name=${"data"}
-            .defaultValue=${this.value?.data}
-            @value-changed=${this._dataChanged}
-          ></ha-yaml-editor>`
-        : this._serviceData?.fields.map((dataField) =>
-            dataField.selector && (!dataField.advanced || this.showAdvanced)
-              ? html`<ha-settings-row .narrow=${this.narrow}>
-                  ${dataField.required
-                    ? hasOptional
-                      ? html`<div slot="prefix" class="checkbox-spacer"></div>`
-                      : ""
-                    : html`<ha-checkbox
-                        .key=${dataField.key}
-                        .checked=${this._checkedKeys.has(dataField.key) ||
-                        (this.value?.data &&
-                          this.value.data[dataField.key] !== undefined)}
-                        @change=${this._checkboxChanged}
-                        slot="prefix"
-                      ></ha-checkbox>`}
-                  <span slot="heading">${dataField.name || dataField.key}</span>
-                  <span slot="description">${dataField?.description}</span
-                  ><ha-selector
-                    .disabled=${!dataField.required &&
-                    !this._checkedKeys.has(dataField.key) &&
-                    (!this.value?.data ||
-                      this.value.data[dataField.key] === undefined)}
-                    .hass=${this.hass}
-                    .selector=${dataField.selector}
-                    .key=${dataField.key}
-                    @value-changed=${this._serviceDataChanged}
-                    .value=${this.value?.data &&
-                    this.value.data[dataField.key] !== undefined
-                      ? this.value.data[dataField.key]
-                      : dataField.default}
-                  ></ha-selector
-                ></ha-settings-row>`
-              : ""
-          )} `;
-  }
-
-  private _checkboxChanged(ev) {
-    const checked = ev.currentTarget.checked;
-    const key = ev.currentTarget.key;
-    if (checked) {
-      this._checkedKeys.add(key);
-    } else {
-      this._checkedKeys.delete(key);
-      const data = { ...this.value?.data };
-
-      delete data[key];
-
-      fireEvent(this, "value-changed", {
-        value: {
-          ...this.value,
-          data,
-        },
-      });
-    }
-    this.requestUpdate("_checkedKeys");
-  }
-
-  private _serviceChanged(ev: PolymerChangedEvent<string>) {
-    ev.stopPropagation();
-    if (ev.detail.value === this.value?.service) {
-      return;
-    }
-    fireEvent(this, "value-changed", {
-      value: { service: ev.detail.value || "" },
-    });
-  }
-
-  private _entityPicked(ev: CustomEvent) {
-    ev.stopPropagation();
-    const newValue = ev.detail.value;
-    if (this.value?.data?.entity_id === newValue) {
-      return;
-    }
-    let value;
-    if (!newValue && this.value?.data) {
-      value = { ...this.value };
-      delete value.data.entity_id;
-    } else {
-      value = {
-        ...this.value,
-        data: { ...this.value?.data, entity_id: ev.detail.value },
-      };
-    }
-    fireEvent(this, "value-changed", {
-      value,
-    });
-  }
-
-  private _targetChanged(ev: CustomEvent) {
-    ev.stopPropagation();
-    const newValue = ev.detail.value;
-    if (this.value?.target === newValue) {
-      return;
-    }
-    let value;
-    if (!newValue) {
-      value = { ...this.value };
-      delete value.target;
-    } else {
-      value = { ...this.value, target: ev.detail.value };
-    }
-    fireEvent(this, "value-changed", {
-      value,
-    });
-  }
-
-  private _serviceDataChanged(ev: CustomEvent) {
-    ev.stopPropagation();
-    const key = (ev.currentTarget as any).key;
-    const value = ev.detail.value;
-    if (this.value?.data && this.value.data[key] === value) {
-      return;
-    }
-
-    const data = { ...this.value?.data, [key]: value };
-
-    if (value === "" || value === undefined) {
-      delete data[key];
-    }
-
-    fireEvent(this, "value-changed", {
-      value: {
-        ...this.value,
-        data,
-      },
-    });
-  }
-
-  private _dataChanged(ev: CustomEvent) {
-    ev.stopPropagation();
-    if (!ev.detail.isValid) {
-      return;
-    }
-    fireEvent(this, "value-changed", {
-      value: {
-        ...this.value,
-        data: ev.detail.value,
-      },
-    });
-  }
-
-  static get styles(): CSSResult {
-    return css`
-      ha-settings-row {
-        padding: var(--service-control-padding, 0 16px);
-      }
-      ha-settings-row {
-        --paper-time-input-justify-content: flex-end;
-        border-top: var(
-          --service-control-items-border-top,
-          1px solid var(--divider-color)
-        );
-      }
-      ha-service-picker,
-      ha-entity-picker,
-      ha-yaml-editor {
-        display: block;
-        margin: var(--service-control-padding, 0 16px);
-      }
-      ha-yaml-editor {
-        padding: 16px 0;
-      }
-      p {
-        margin: var(--service-control-padding, 0 16px);
-        padding: 16px 0;
-      }
-      :host(:not([narrow])) ha-settings-row paper-input {
-        width: 60%;
-      }
-      :host(:not([narrow])) ha-settings-row ha-selector {
-        width: 60%;
-      }
-      .checkbox-spacer {
-        width: 32px;
-      }
-      ha-checkbox {
-        margin-left: -16px;
-      }
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-service-control": HaServiceControl;
-  }
-}

src/components/ha-service-picker.js

@@ -0,0 +1,60 @@
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+/* eslint-plugin-disable lit */
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+import LocalizeMixin from "../mixins/localize-mixin";
+import "./ha-combo-box";
+
+/*
+ * @appliesMixin LocalizeMixin
+ */
+class HaServicePicker extends LocalizeMixin(PolymerElement) {
+  static get template() {
+    return html`
+      <ha-combo-box
+        label="[[localize('ui.components.service-picker.service')]]"
+        items="[[_services]]"
+        value="{{value}}"
+        allow-custom-value=""
+      ></ha-combo-box>
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: {
+        type: Object,
+        observer: "_hassChanged",
+      },
+      _services: Array,
+      value: {
+        type: String,
+        notify: true,
+      },
+    };
+  }
+
+  _hassChanged(hass, oldHass) {
+    if (!hass) {
+      this._services = [];
+      return;
+    }
+    if (oldHass && hass.services === oldHass.services) {
+      return;
+    }
+    const result = [];
+
+    Object.keys(hass.services)
+      .sort()
+      .forEach((domain) => {
+        const services = Object.keys(hass.services[domain]).sort();
+
+        for (let i = 0; i < services.length; i++) {
+          result.push(`${domain}.${services[i]}`);
+        }
+      });
+
+    this._services = result;
+  }
+}
+
+customElements.define("ha-service-picker", HaServicePicker);

src/components/ha-service-picker.ts

@@ -1,135 +0,0 @@
-import { html, internalProperty, LitElement, property } from "lit-element";
-import memoizeOne from "memoize-one";
-import { fireEvent } from "../common/dom/fire_event";
-import { LocalizeFunc } from "../common/translations/localize";
-import { domainToName } from "../data/integration";
-import { HomeAssistant } from "../types";
-import "./ha-combo-box";
-
-const rowRenderer = (
-  root: HTMLElement,
-  _owner,
-  model: { item: { service: string; name: string } }
-) => {
-  if (!root.firstElementChild) {
-    root.innerHTML = `
-    <style>
-      paper-item {
-        margin: -10px 0;
-        padding: 0;
-      }
-    </style>
-    <paper-item>
-      <paper-item-body two-line="">
-        <div class='name'>[[item.name]]</div>
-        <div secondary>[[item.service]]</div>
-      </paper-item-body>
-    </paper-item>
-    `;
-  }
-
-  root.querySelector(".name")!.textContent = model.item.name;
-  root.querySelector("[secondary]")!.textContent =
-    model.item.name === model.item.service ? "" : model.item.service;
-};
-
-class HaServicePicker extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property() public value?: string;
-
-  @internalProperty() private _filter?: string;
-
-  protected render() {
-    return html`
-      <ha-combo-box
-        .hass=${this.hass}
-        .label=${this.hass.localize("ui.components.service-picker.service")}
-        .filteredItems=${this._filteredServices(
-          this.hass.localize,
-          this.hass.services,
-          this._filter
-        )}
-        .value=${this.value}
-        .renderer=${rowRenderer}
-        item-value-path="service"
-        item-label-path="name"
-        allow-custom-value
-        @filter-changed=${this._filterChanged}
-        @value-changed=${this._valueChanged}
-      ></ha-combo-box>
-    `;
-  }
-
-  private _services = memoizeOne(
-    (
-      localize: LocalizeFunc,
-      services: HomeAssistant["services"]
-    ): {
-      service: string;
-      name: string;
-    }[] => {
-      if (!services) {
-        return [];
-      }
-      const result: { service: string; name: string }[] = [];
-
-      Object.keys(services)
-        .sort()
-        .forEach((domain) => {
-          const services_keys = Object.keys(services[domain]).sort();
-
-          for (const service of services_keys) {
-            result.push({
-              service: `${domain}.${service}`,
-              name: `${domainToName(localize, domain)}: ${
-                services[domain][service].name || service
-              }`,
-            });
-          }
-        });
-
-      return result;
-    }
-  );
-
-  private _filteredServices = memoizeOne(
-    (
-      localize: LocalizeFunc,
-      services: HomeAssistant["services"],
-      filter?: string
-    ) => {
-      if (!services) {
-        return [];
-      }
-      const processedServices = this._services(localize, services);
-
-      if (!filter) {
-        return processedServices;
-      }
-      return processedServices.filter(
-        (service) =>
-          service.service.toLowerCase().includes(filter) ||
-          service.name?.toLowerCase().includes(filter)
-      );
-    }
-  );
-
-  private _filterChanged(ev: CustomEvent): void {
-    this._filter = ev.detail.value.toLowerCase();
-  }
-
-  private _valueChanged(ev) {
-    this.value = ev.detail.value;
-    fireEvent(this, "change");
-    fireEvent(this, "value-changed", { value: this.value });
-  }
-}
-
-customElements.define("ha-service-picker", HaServicePicker);
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-service-picker": HaServicePicker;
-  }
-}

src/components/ha-settings-row.ts

@@ -6,7 +6,7 @@ import {
   html,
   LitElement,
   property,
-  TemplateResult,
+  SVGTemplateResult,
 } from "lit-element";
 
 @customElement("ha-settings-row")
@@ -16,18 +16,15 @@ export class HaSettingsRow extends LitElement {
   @property({ type: Boolean, attribute: "three-line" })
   public threeLine = false;
 
-  protected render(): TemplateResult {
+  protected render(): SVGTemplateResult {
     return html`
-      <div class="prefix-wrap">
-        <slot name="prefix"></slot>
-        <paper-item-body
-          ?two-line=${!this.threeLine}
-          ?three-line=${this.threeLine}
-        >
-          <slot name="heading"></slot>
-          <div secondary><slot name="description"></slot></div>
-        </paper-item-body>
-      </div>
+      <paper-item-body
+        ?two-line=${!this.threeLine}
+        ?three-line=${this.threeLine}
+      >
+        <slot name="heading"></slot>
+        <div secondary><slot name="description"></slot></div>
+      </paper-item-body>
       <slot></slot>
     `;
   }
@@ -48,7 +45,6 @@ export class HaSettingsRow extends LitElement {
         min-height: calc(
           var(--paper-item-body-two-line-min-height, 72px) - 16px
         );
-        flex: 1;
       }
       :host([narrow]) {
         align-items: normal;
@@ -62,13 +58,6 @@ export class HaSettingsRow extends LitElement {
       div[secondary] {
         white-space: normal;
       }
-      .prefix-wrap {
-        display: contents;
-      }
-      :host([narrow]) .prefix-wrap {
-        display: flex;
-        align-items: center;
-      }
     `;
   }
 }

src/components/ha-slider.js

@@ -79,14 +79,6 @@ class HaSlider extends PaperSliderClass {
     return subTemplate;
   }
 
-  _setImmediateValue(newImmediateValue) {
-    super._setImmediateValue(
-      this.step >= 1
-        ? Math.round(newImmediateValue)
-        : Math.round(newImmediateValue * 100) / 100
-    );
-  }
-
   _calcStep(value) {
     if (!this.step) {
       return parseFloat(value);

src/components/ha-target-picker.ts

@@ -10,10 +10,7 @@ import {
   mdiUnfoldMoreVertical,
 } from "@mdi/js";
 import "@polymer/paper-tooltip/paper-tooltip";
-import {
-  HassServiceTarget,
-  UnsubscribeFunc,
-} from "home-assistant-js-websocket";
+import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import {
   css,
   CSSResult,
@@ -44,6 +41,7 @@ import {
   EntityRegistryEntry,
   subscribeEntityRegistry,
 } from "../data/entity_registry";
+import { Target } from "../data/target";
 import { SubscribeMixin } from "../mixins/subscribe-mixin";
 import { HomeAssistant } from "../types";
 import "./device/ha-device-picker";
@@ -58,7 +56,7 @@ import "./ha-svg-icon";
 export class HaTargetPicker extends SubscribeMixin(LitElement) {
   @property() public hass!: HomeAssistant;
 
-  @property() public value?: HassServiceTarget;
+  @property() public value?: Target;
 
   @property() public label?: string;
 
@@ -84,8 +82,6 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
 
   @property() public entityFilter?: HaEntityPickerEntityFilterFunc;
 
-  @property({ type: Boolean, reflect: true }) public disabled = false;
-
   @internalProperty() private _areas?: { [areaId: string]: AreaRegistryEntry };
 
   @internalProperty() private _devices?: {
@@ -440,9 +436,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
     type: string,
     id: string
   ): this["value"] {
-    const newVal = ensureArray(value![type])!.filter(
-      (val) => String(val) !== id
-    );
+    const newVal = ensureArray(value![type])!.filter((val) => val !== id);
     if (newVal.length) {
       return {
         ...value,
@@ -536,9 +530,6 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
       .items {
         z-index: 2;
       }
-      .mdc-chip-set {
-        padding: 4px 0;
-      }
       .mdc-chip.add {
         color: rgba(0, 0, 0, 0.87);
       }
@@ -603,10 +594,6 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
       paper-tooltip.expand {
         min-width: 200px;
       }
-      :host([disabled]) .mdc-chip {
-        opacity: var(--light-disabled-opacity);
-        pointer-events: none;
-      }
     `;
   }
 }

src/components/ha-yaml-editor.ts

@@ -5,10 +5,20 @@ import {
   internalProperty,
   LitElement,
   property,
+  query,
   TemplateResult,
 } from "lit-element";
 import { fireEvent } from "../common/dom/fire_event";
+import { afterNextRender } from "../common/util/render-status";
 import "./ha-code-editor";
+import type { HaCodeEditor } from "./ha-code-editor";
+
+declare global {
+  // for fire event
+  interface HASSDomEvents {
+    "editor-refreshed": undefined;
+  }
+}
 
 const isEmpty = (obj: Record<string, unknown>): boolean => {
   if (typeof obj !== "object") {
@@ -34,14 +44,22 @@ export class HaYamlEditor extends LitElement {
 
   @internalProperty() private _yaml = "";
 
+  @query("ha-code-editor", true) private _editor?: HaCodeEditor;
+
   public setValue(value): void {
     try {
       this._yaml = value && !isEmpty(value) ? safeDump(value) : "";
     } catch (err) {
       // eslint-disable-next-line no-console
-      console.error(err, value);
+      console.error(err);
       alert(`There was an error converting to YAML: ${err}`);
     }
+    afterNextRender(() => {
+      if (this._editor?.codemirror) {
+        this._editor.codemirror.refresh();
+      }
+      afterNextRender(() => fireEvent(this, "editor-refreshed"));
+    });
   }
 
   protected firstUpdated(): void {
@@ -55,7 +73,7 @@ export class HaYamlEditor extends LitElement {
       return html``;
     }
     return html`
-      ${this.label ? html`<p>${this.label}</p>` : ""}
+      ${this.label ? html` <p>${this.label}</p> ` : ""}
       <ha-code-editor
         .value=${this._yaml}
         mode="yaml"
@@ -67,13 +85,13 @@ export class HaYamlEditor extends LitElement {
 
   private _onChange(ev: CustomEvent): void {
     ev.stopPropagation();
-    this._yaml = ev.detail.value;
+    const value = ev.detail.value;
     let parsed;
     let isValid = true;
 
-    if (this._yaml) {
+    if (value) {
       try {
-        parsed = safeLoad(this._yaml);
+        parsed = safeLoad(value);
       } catch (err) {
         // Invalid YAML
         isValid = false;
@@ -89,7 +107,7 @@ export class HaYamlEditor extends LitElement {
   }
 
   get yaml() {
-    return this._yaml;
+    return this._editor?.value;
   }
 }
 

src/components/state-history-charts.ts

@@ -6,7 +6,6 @@ import {
   html,
   LitElement,
   property,
-  PropertyValues,
   TemplateResult,
 } from "lit-element";
 import "./state-history-chart-line";
@@ -84,10 +83,6 @@ class StateHistoryCharts extends LitElement {
     `;
   }
 
-  protected shouldUpdate(changedProps: PropertyValues): boolean {
-    return !(changedProps.size === 1 && changedProps.has("hass"));
-  }
-
   private _isHistoryEmpty(): boolean {
     const historyDataEmpty =
       !this.historyData ||

src/data/automation.ts

@@ -205,13 +205,9 @@ export type Condition =
   | DeviceCondition
   | LogicalCondition;
 
-export const triggerAutomationActions = (
-  hass: HomeAssistant,
-  entityId: string
-) => {
+export const triggerAutomation = (hass: HomeAssistant, entityId: string) => {
   hass.callService("automation", "trigger", {
     entity_id: entityId,
-    skip_condition: true,
   });
 };
 

src/data/config_entries.ts

@@ -9,7 +9,6 @@ export interface ConfigEntry {
   connection_class: string;
   supports_options: boolean;
   supports_unload: boolean;
-  disabled_by: string | null;
 }
 
 export interface ConfigEntryMutableParams {
@@ -44,27 +43,6 @@ export const reloadConfigEntry = (hass: HomeAssistant, configEntryId: string) =>
     require_restart: boolean;
   }>("POST", `config/config_entries/entry/${configEntryId}/reload`);
 
-export const disableConfigEntry = (
-  hass: HomeAssistant,
-  configEntryId: string
-) =>
-  hass.callWS<{
-    require_restart: boolean;
-  }>({
-    type: "config_entries/disable",
-    entry_id: configEntryId,
-    disabled_by: "user",
-  });
-
-export const enableConfigEntry = (hass: HomeAssistant, configEntryId: string) =>
-  hass.callWS<{
-    require_restart: boolean;
-  }>({
-    type: "config_entries/disable",
-    entry_id: configEntryId,
-    disabled_by: null,
-  });
-
 export const getConfigEntrySystemOptions = (
   hass: HomeAssistant,
   configEntryId: string

src/data/config_flow.ts

@@ -65,18 +65,16 @@ export const deleteConfigFlow = (hass: HomeAssistant, flowId: string) =>
 export const getConfigFlowHandlers = (hass: HomeAssistant) =>
   hass.callApi<string[]>("GET", "config/config_entries/flow_handlers");
 
-export const fetchConfigFlowInProgress = (
-  conn: Connection
-): Promise<DataEntryFlowProgress[]> =>
+const fetchConfigFlowInProgress = (conn) =>
   conn.sendMessagePromise({
     type: "config_entries/flow/progress",
   });
 
-const subscribeConfigFlowInProgressUpdates = (conn: Connection, store) =>
+const subscribeConfigFlowInProgressUpdates = (conn, store) =>
   conn.subscribeEvents(
     debounce(
       () =>
-        fetchConfigFlowInProgress(conn).then((flows: DataEntryFlowProgress[]) =>
+        fetchConfigFlowInProgress(conn).then((flows) =>
           store.setState(flows, true)
         ),
       500,

src/data/hassio/addon.ts

@@ -1,36 +1,21 @@
-import { atLeastVersion } from "../../common/config/version";
 import { HaFormSchema } from "../../components/ha-form/ha-form";
 import { HomeAssistant } from "../../types";
-import { SupervisorArch } from "../supervisor/supervisor";
 import { hassioApiResultExtractor, HassioResponse } from "./common";
 
-export type AddonStage = "stable" | "experimental" | "deprecated";
-export type AddonAppArmour = "disable" | "default" | "profile";
-export type AddonRole = "default" | "homeassistant" | "manager" | "admin";
-export type AddonStartup =
-  | "initialize"
-  | "system"
-  | "services"
-  | "application"
-  | "once";
-export type AddonState = "started" | "stopped" | null;
-export type AddonRepository = "core" | "local" | string;
-
 export interface HassioAddonInfo {
   advanced: boolean;
   available: boolean;
   build: boolean;
   description: string;
   detached: boolean;
-  homeassistant: string;
   icon: boolean;
   installed: boolean;
   logo: boolean;
   name: string;
-  repository: AddonRepository;
+  repository: "core" | "local" | string;
   slug: string;
-  stage: AddonStage;
-  state: AddonState;
+  stage: "stable" | "experimental" | "deprecated";
+  state: "started" | "stopped" | null;
   update_available: boolean;
   url: string | null;
   version_latest: string;
@@ -38,8 +23,8 @@ export interface HassioAddonInfo {
 }
 
 export interface HassioAddonDetails extends HassioAddonInfo {
-  apparmor: AddonAppArmour;
-  arch: SupervisorArch[];
+  apparmor: "disable" | "default" | "profile";
+  arch: "armhf" | "aarch64" | "i386" | "amd64";
   audio_input: null | string;
   audio_output: null | string;
   audio: boolean;
@@ -56,9 +41,10 @@ export interface HassioAddonDetails extends HassioAddonInfo {
   full_access: boolean;
   gpio: boolean;
   hassio_api: boolean;
-  hassio_role: AddonRole;
+  hassio_role: "default" | "homeassistant" | "manager" | "admin";
   hostname: string;
   homeassistant_api: boolean;
+  homeassistant: string;
   host_dbus: boolean;
   host_ipc: boolean;
   host_network: boolean;
@@ -77,10 +63,10 @@ export interface HassioAddonDetails extends HassioAddonInfo {
   privileged: any;
   protected: boolean;
   rating: "1-6";
-  schema: HaFormSchema[] | null;
+  schema: HaFormSchema[];
   services_role: string[];
   slug: string;
-  startup: AddonStartup;
+  startup: "initialize" | "system" | "services" | "application" | "once";
   stdin: boolean;
   watchdog: null | boolean;
   webui: null | string;
@@ -115,28 +101,10 @@ export interface HassioAddonSetOptionParams {
 }
 
 export const reloadHassioAddons = async (hass: HomeAssistant) => {
-  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
-    await hass.callWS({
-      type: "supervisor/api",
-      endpoint: "/addons/reload",
-      method: "post",
-    });
-    return;
-  }
   await hass.callApi<HassioResponse<void>>("POST", `hassio/addons/reload`);
 };
 
-export const fetchHassioAddonsInfo = async (
-  hass: HomeAssistant
-): Promise<HassioAddonsInfo> => {
-  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
-    return await hass.callWS({
-      type: "supervisor/api",
-      endpoint: "/addons",
-      method: "get",
-    });
-  }
-
+export const fetchHassioAddonsInfo = async (hass: HomeAssistant) => {
   return hassioApiResultExtractor(
     await hass.callApi<HassioResponse<HassioAddonsInfo>>("GET", `hassio/addons`)
   );
@@ -145,15 +113,7 @@ export const fetchHassioAddonsInfo = async (
 export const fetchHassioAddonInfo = async (
   hass: HomeAssistant,
   slug: string
-): Promise<HassioAddonDetails> => {
-  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
-    return await hass.callWS({
-      type: "supervisor/api",
-      endpoint: `/addons/${slug}/info`,
-      method: "get",
-    });
-  }
-
+) => {
   return hassioApiResultExtractor(
     await hass.callApi<HassioResponse<HassioAddonDetails>>(
       "GET",
@@ -188,16 +148,6 @@ export const setHassioAddonOption = async (
   slug: string,
   data: HassioAddonSetOptionParams
 ) => {
-  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
-    await hass.callWS({
-      type: "supervisor/api",
-      endpoint: `/addons/${slug}/options`,
-      method: "post",
-      data,
-    });
-    return;
-  }
-
   await hass.callApi<HassioResponse<void>>(
     "POST",
     `hassio/addons/${slug}/options`,
@@ -208,64 +158,21 @@ export const setHassioAddonOption = async (
 export const validateHassioAddonOption = async (
   hass: HomeAssistant,
   slug: string
-): Promise<{ message: string; valid: boolean }> => {
-  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
-    return await hass.callWS({
-      type: "supervisor/api",
-      endpoint: `/addons/${slug}/options/validate`,
-      method: "post",
-    });
-  }
-
-  return (
-    await hass.callApi<HassioResponse<{ message: string; valid: boolean }>>(
-      "POST",
-      `hassio/addons/${slug}/options/validate`
-    )
-  ).data;
+) => {
+  return await hass.callApi<
+    HassioResponse<{ message: string; valid: boolean }>
+  >("POST", `hassio/addons/${slug}/options/validate`);
 };
 
 export const startHassioAddon = async (hass: HomeAssistant, slug: string) => {
-  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
-    return await hass.callWS({
-      type: "supervisor/api",
-      endpoint: `/addons/${slug}/start`,
-      method: "post",
-      timeout: null,
-    });
-  }
-
   return hass.callApi<string>("POST", `hassio/addons/${slug}/start`);
 };
 
-export const stopHassioAddon = async (hass: HomeAssistant, slug: string) => {
-  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
-    return await hass.callWS({
-      type: "supervisor/api",
-      endpoint: `/addons/${slug}/stop`,
-      method: "post",
-      timeout: null,
-    });
-  }
-
-  return hass.callApi<string>("POST", `hassio/addons/${slug}/stop`);
-};
-
 export const setHassioAddonSecurity = async (
   hass: HomeAssistant,
   slug: string,
   data: HassioAddonSetSecurityParams
 ) => {
-  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
-    await hass.callWS({
-      type: "supervisor/api",
-      endpoint: `/addons/${slug}/security`,
-      method: "post",
-      data,
-    });
-    return;
-  }
-
   await hass.callApi<HassioResponse<void>>(
     "POST",
     `hassio/addons/${slug}/security`,
@@ -273,61 +180,15 @@ export const setHassioAddonSecurity = async (
   );
 };
 
-export const installHassioAddon = async (
-  hass: HomeAssistant,
-  slug: string
-): Promise<void> => {
-  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
-    await hass.callWS({
-      type: "supervisor/api",
-      endpoint: `/addons/${slug}/install`,
-      method: "post",
-      timeout: null,
-    });
-    return;
-  }
-
-  await hass.callApi<HassioResponse<void>>(
+export const installHassioAddon = async (hass: HomeAssistant, slug: string) => {
+  return hass.callApi<HassioResponse<void>>(
     "POST",
     `hassio/addons/${slug}/install`
   );
 };
 
-export const updateHassioAddon = async (
-  hass: HomeAssistant,
-  slug: string
-): Promise<void> => {
-  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
-    await hass.callWS({
-      type: "supervisor/api",
-      endpoint: `/store/addons/${slug}/update`,
-      method: "post",
-      timeout: null,
-    });
-    return;
-  }
-
-  await hass.callApi<HassioResponse<void>>(
-    "POST",
-    `hassio/addons/${slug}/update`
-  );
-};
-
-export const restartHassioAddon = async (
-  hass: HomeAssistant,
-  slug: string
-): Promise<void> => {
-  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
-    await hass.callWS({
-      type: "supervisor/api",
-      endpoint: `/addons/${slug}/restart`,
-      method: "post",
-      timeout: null,
-    });
-    return;
-  }
-
-  await hass.callApi<HassioResponse<void>>(
+export const restartHassioAddon = async (hass: HomeAssistant, slug: string) => {
+  return hass.callApi<HassioResponse<void>>(
     "POST",
     `hassio/addons/${slug}/restart`
   );
@@ -337,16 +198,6 @@ export const uninstallHassioAddon = async (
   hass: HomeAssistant,
   slug: string
 ) => {
-  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
-    await hass.callWS({
-      type: "supervisor/api",
-      endpoint: `/addons/${slug}/uninstall`,
-      method: "post",
-      timeout: null,
-    });
-    return;
-  }
-
   await hass.callApi<HassioResponse<void>>(
     "POST",
     `hassio/addons/${slug}/uninstall`

src/data/hassio/common.ts

@@ -1,4 +1,3 @@
-import { atLeastVersion } from "../../common/config/version";
 import { HomeAssistant } from "../../types";
 
 export interface HassioResponse<T> {
@@ -34,14 +33,6 @@ export const fetchHassioStats = async (
   hass: HomeAssistant,
   container: string
 ): Promise<HassioStats> => {
-  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
-    return await hass.callWS({
-      type: "supervisor/api",
-      endpoint: `/${container}/stats`,
-      method: "get",
-    });
-  }
-
   return hassioApiResultExtractor(
     await hass.callApi<HassioResponse<HassioStats>>(
       "GET",

src/data/hassio/docker.ts

@@ -1,4 +1,3 @@
-import { atLeastVersion } from "../../common/config/version";
 import { HomeAssistant } from "../../types";
 import { hassioApiResultExtractor, HassioResponse } from "./common";
 
@@ -6,17 +5,7 @@ interface HassioDockerRegistries {
   [key: string]: { username: string; password?: string };
 }
 
-export const fetchHassioDockerRegistries = async (
-  hass: HomeAssistant
-): Promise<HassioDockerRegistries> => {
-  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
-    return await hass.callWS({
-      type: "supervisor/api",
-      endpoint: `/docker/registries`,
-      method: "get",
-    });
-  }
-
+export const fetchHassioDockerRegistries = async (hass: HomeAssistant) => {
   return hassioApiResultExtractor(
     await hass.callApi<HassioResponse<HassioDockerRegistries>>(
       "GET",
@@ -29,16 +18,6 @@ export const addHassioDockerRegistry = async (
   hass: HomeAssistant,
   data: HassioDockerRegistries
 ) => {
-  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
-    await hass.callWS({
-      type: "supervisor/api",
-      endpoint: `/docker/registries`,
-      method: "post",
-      data,
-    });
-    return;
-  }
-
   await hass.callApi<HassioResponse<HassioDockerRegistries>>(
     "POST",
     "hassio/docker/registries",
@@ -50,15 +29,6 @@ export const removeHassioDockerRegistry = async (
   hass: HomeAssistant,
   registry: string
 ) => {
-  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
-    await hass.callWS({
-      type: "supervisor/api",
-      endpoint: `/docker/registries/${registry}`,
-      method: "delete",
-    });
-    return;
-  }
-
   await hass.callApi<HassioResponse<void>>(
     "DELETE",
     `hassio/docker/registries/${registry}`

src/data/hassio/hardware.ts

@@ -1,4 +1,3 @@
-import { atLeastVersion } from "../../common/config/version";
 import { HomeAssistant } from "../../types";
 import { hassioApiResultExtractor, HassioResponse } from "./common";
 
@@ -22,17 +21,7 @@ export interface HassioHardwareInfo {
   audio: Record<string, unknown>;
 }
 
-export const fetchHassioHardwareAudio = async (
-  hass: HomeAssistant
-): Promise<HassioHardwareAudioList> => {
-  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
-    return await hass.callWS({
-      type: "supervisor/api",
-      endpoint: `/hardware/audio`,
-      method: "get",
-    });
-  }
-
+export const fetchHassioHardwareAudio = async (hass: HomeAssistant) => {
   return hassioApiResultExtractor(
     await hass.callApi<HassioResponse<HassioHardwareAudioList>>(
       "GET",
@@ -41,17 +30,7 @@ export const fetchHassioHardwareAudio = async (
   );
 };
 
-export const fetchHassioHardwareInfo = async (
-  hass: HomeAssistant
-): Promise<HassioHardwareInfo> => {
-  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
-    return await hass.callWS({
-      type: "supervisor/api",
-      endpoint: `/hardware/info`,
-      method: "get",
-    });
-  }
-
+export const fetchHassioHardwareInfo = async (hass: HomeAssistant) => {
   return hassioApiResultExtractor(
     await hass.callApi<HassioResponse<HassioHardwareInfo>>(
       "GET",

src/data/hassio/host.ts

@@ -1,4 +1,3 @@
-import { atLeastVersion } from "../../common/config/version";
 import { HomeAssistant } from "../../types";
 import { hassioApiResultExtractor, HassioResponse } from "./common";
 
@@ -6,7 +5,6 @@ export type HassioHostInfo = {
   chassis: string;
   cpe: string;
   deployment: string;
-  disk_life_time: number | "";
   disk_free: number;
   disk_total: number;
   disk_used: number;
@@ -24,17 +22,7 @@ export interface HassioHassOSInfo {
   version: string | null;
 }
 
-export const fetchHassioHostInfo = async (
-  hass: HomeAssistant
-): Promise<HassioHostInfo> => {
-  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
-    return await hass.callWS({
-      type: "supervisor/api",
-      endpoint: "/host/info",
-      method: "get",
-    });
-  }
-
+export const fetchHassioHostInfo = async (hass: HomeAssistant) => {
   const response = await hass.callApi<HassioResponse<HassioHostInfo>>(
     "GET",
     "hassio/host/info"
@@ -42,17 +30,7 @@ export const fetchHassioHostInfo = async (
   return hassioApiResultExtractor(response);
 };
 
-export const fetchHassioHassOsInfo = async (
-  hass: HomeAssistant
-): Promise<HassioHassOSInfo> => {
-  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
-    return await hass.callWS({
-      type: "supervisor/api",
-      endpoint: "/os/info",
-      method: "get",
-    });
-  }
-
+export const fetchHassioHassOsInfo = async (hass: HomeAssistant) => {
   return hassioApiResultExtractor(
     await hass.callApi<HassioResponse<HassioHassOSInfo>>(
       "GET",
@@ -62,67 +40,22 @@ export const fetchHassioHassOsInfo = async (
 };
 
 export const rebootHost = async (hass: HomeAssistant) => {
-  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
-    return await hass.callWS({
-      type: "supervisor/api",
-      endpoint: "/host/reboot",
-      method: "post",
-      timeout: null,
-    });
-  }
-
   return hass.callApi<HassioResponse<void>>("POST", "hassio/host/reboot");
 };
 
 export const shutdownHost = async (hass: HomeAssistant) => {
-  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
-    return await hass.callWS({
-      type: "supervisor/api",
-      endpoint: "/host/shutdown",
-      method: "post",
-      timeout: null,
-    });
-  }
-
   return hass.callApi<HassioResponse<void>>("POST", "hassio/host/shutdown");
 };
 
 export const updateOS = async (hass: HomeAssistant) => {
-  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
-    return await hass.callWS({
-      type: "supervisor/api",
-      endpoint: "/os/update",
-      method: "post",
-      timeout: null,
-    });
-  }
-
   return hass.callApi<HassioResponse<void>>("POST", "hassio/os/update");
 };
 
 export const configSyncOS = async (hass: HomeAssistant) => {
-  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
-    return await hass.callWS({
-      type: "supervisor/api",
-      endpoint: "os/config/sync",
-      method: "post",
-      timeout: null,
-    });
-  }
-
   return hass.callApi<HassioResponse<void>>("POST", "hassio/os/config/sync");
 };
 
 export const changeHostOptions = async (hass: HomeAssistant, options: any) => {
-  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
-    return await hass.callWS({
-      type: "supervisor/api",
-      endpoint: "/host/options",
-      method: "post",
-      data: options,
-    });
-  }
-
   return hass.callApi<HassioResponse<void>>(
     "POST",
     "hassio/host/options",

src/data/hassio/ingress.ts

@@ -1,50 +1,26 @@
-import { atLeastVersion } from "../../common/config/version";
 import { HomeAssistant } from "../../types";
 import { HassioResponse } from "./common";
 import { CreateSessionResponse } from "./supervisor";
 
-function setIngressCookie(session: string): string {
-  document.cookie = `ingress_session=${session};path=/api/hassio_ingress/;SameSite=Strict${
+export const createHassioSession = async (hass: HomeAssistant) => {
+  const response = await hass.callApi<HassioResponse<CreateSessionResponse>>(
+    "POST",
+    "hassio/ingress/session"
+  );
+  document.cookie = `ingress_session=${
+    response.data.session
+  };path=/api/hassio_ingress/;SameSite=Strict${
     location.protocol === "https:" ? ";Secure" : ""
   }`;
-  return session;
-}
-
-export const createHassioSession = async (
-  hass: HomeAssistant
-): Promise<string> => {
-  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
-    const wsResponse: { session: string } = await hass.callWS({
-      type: "supervisor/api",
-      endpoint: "/ingress/session",
-      method: "post",
-    });
-    return setIngressCookie(wsResponse.session);
-  }
-
-  const restResponse: { data: { session: string } } = await hass.callApi<
-    HassioResponse<CreateSessionResponse>
-  >("POST", "hassio/ingress/session");
-  return setIngressCookie(restResponse.data.session);
+  return response.data.session;
 };
 
 export const validateHassioSession = async (
   hass: HomeAssistant,
   session: string
-): Promise<void> => {
-  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
-    await hass.callWS({
-      type: "supervisor/api",
-      endpoint: "/ingress/validate_session",
-      method: "post",
-      data: { session },
-    });
-    return;
-  }
-
-  await hass.callApi<HassioResponse<void>>(
+) =>
+  await hass.callApi<HassioResponse<null>>(
     "POST",
     "hassio/ingress/validate_session",
     { session }
   );
-};

src/data/hassio/network.ts

@@ -1,4 +1,3 @@
-import { atLeastVersion } from "../../common/config/version";
 import { HomeAssistant } from "../../types";
 import { hassioApiResultExtractor, HassioResponse } from "./common";
 
@@ -52,17 +51,7 @@ export interface NetworkInfo {
   docker: DockerNetwork;
 }
 
-export const fetchNetworkInfo = async (
-  hass: HomeAssistant
-): Promise<NetworkInfo> => {
-  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
-    return await hass.callWS({
-      type: "supervisor/api",
-      endpoint: "/network/info",
-      method: "get",
-    });
-  }
-
+export const fetchNetworkInfo = async (hass: HomeAssistant) => {
   return hassioApiResultExtractor(
     await hass.callApi<HassioResponse<NetworkInfo>>(
       "GET",
@@ -76,17 +65,6 @@ export const updateNetworkInterface = async (
   network_interface: string,
   options: Partial<NetworkInterface>
 ) => {
-  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
-    await hass.callWS({
-      type: "supervisor/api",
-      endpoint: `/network/interface/${network_interface}/update`,
-      method: "post",
-      data: options,
-      timeout: null,
-    });
-    return;
-  }
-
   await hass.callApi<HassioResponse<NetworkInfo>>(
     "POST",
     `hassio/network/interface/${network_interface}/update`,
@@ -97,16 +75,7 @@ export const updateNetworkInterface = async (
 export const accesspointScan = async (
   hass: HomeAssistant,
   network_interface: string
-): Promise<AccessPoints> => {
-  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
-    return await hass.callWS({
-      type: "supervisor/api",
-      endpoint: `/network/interface/${network_interface}/accesspoints`,
-      method: "get",
-      timeout: null,
-    });
-  }
-
+) => {
   return hassioApiResultExtractor(
     await hass.callApi<HassioResponse<AccessPoints>>(
       "GET",

src/data/hassio/resolution.ts

@@ -1,4 +1,3 @@
-import { atLeastVersion } from "../../common/config/version";
 import { HomeAssistant } from "../../types";
 import { hassioApiResultExtractor, HassioResponse } from "./common";
 
@@ -9,17 +8,7 @@ export interface HassioResolution {
   suggestions: string[];
 }
 
-export const fetchHassioResolution = async (
-  hass: HomeAssistant
-): Promise<HassioResolution> => {
-  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
-    return await hass.callWS({
-      type: "supervisor/api",
-      endpoint: "/resolution/info",
-      method: "get",
-    });
-  }
-
+export const fetchHassioResolution = async (hass: HomeAssistant) => {
   return hassioApiResultExtractor(
     await hass.callApi<HassioResponse<HassioResolution>>(
       "GET",

src/data/hassio/snapshot.ts

@@ -1,4 +1,3 @@
-import { atLeastVersion } from "../../common/config/version";
 import { HomeAssistant } from "../../types";
 import { hassioApiResultExtractor, HassioResponse } from "./common";
 
@@ -29,24 +28,12 @@ export interface HassioFullSnapshotCreateParams {
 }
 export interface HassioPartialSnapshotCreateParams {
   name: string;
-  folders?: string[];
-  addons?: string[];
+  folders: string[];
+  addons: string[];
   password?: string;
-  homeassistant?: boolean;
 }
 
-export const fetchHassioSnapshots = async (
-  hass: HomeAssistant
-): Promise<HassioSnapshot[]> => {
-  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
-    const data: { snapshots: HassioSnapshot[] } = await hass.callWS({
-      type: "supervisor/api",
-      endpoint: `/snapshots`,
-      method: "get",
-    });
-    return data.snapshots;
-  }
-
+export const fetchHassioSnapshots = async (hass: HomeAssistant) => {
   return hassioApiResultExtractor(
     await hass.callApi<HassioResponse<{ snapshots: HassioSnapshot[] }>>(
       "GET",
@@ -58,15 +45,8 @@ export const fetchHassioSnapshots = async (
 export const fetchHassioSnapshotInfo = async (
   hass: HomeAssistant,
   snapshot: string
-): Promise<HassioSnapshotDetail> => {
+) => {
   if (hass) {
-    if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
-      return await hass.callWS({
-        type: "supervisor/api",
-        endpoint: `/snapshots/${snapshot}/info`,
-        method: "get",
-      });
-    }
     return hassioApiResultExtractor(
       await hass.callApi<HassioResponse<HassioSnapshotDetail>>(
         "GET",
@@ -83,15 +63,6 @@ export const fetchHassioSnapshotInfo = async (
 };
 
 export const reloadHassioSnapshots = async (hass: HomeAssistant) => {
-  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
-    await hass.callWS({
-      type: "supervisor/api",
-      endpoint: "/snapshots/reload",
-      method: "post",
-    });
-    return;
-  }
-
   await hass.callApi<HassioResponse<void>>("POST", `hassio/snapshots/reload`);
 };
 
@@ -99,15 +70,6 @@ export const createHassioFullSnapshot = async (
   hass: HomeAssistant,
   data: HassioFullSnapshotCreateParams
 ) => {
-  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
-    await hass.callWS({
-      type: "supervisor/api",
-      endpoint: "/snapshots/new/full",
-      method: "post",
-      timeout: null,
-    });
-    return;
-  }
   await hass.callApi<HassioResponse<void>>(
     "POST",
     `hassio/snapshots/new/full`,
@@ -117,19 +79,8 @@ export const createHassioFullSnapshot = async (
 
 export const createHassioPartialSnapshot = async (
   hass: HomeAssistant,
-  data: HassioPartialSnapshotCreateParams
+  data: HassioFullSnapshotCreateParams
 ) => {
-  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
-    await hass.callWS({
-      type: "supervisor/api",
-      endpoint: "/snapshots/new/partial",
-      method: "post",
-      timeout: null,
-      data,
-    });
-    return;
-  }
-
   await hass.callApi<HassioResponse<void>>(
     "POST",
     `hassio/snapshots/new/partial`,

src/data/hassio/supervisor.ts

@@ -1,11 +1,9 @@
-import { atLeastVersion } from "../../common/config/version";
 import { HomeAssistant, PanelInfo } from "../../types";
-import { SupervisorArch } from "../supervisor/supervisor";
 import { HassioAddonInfo, HassioAddonRepository } from "./addon";
 import { hassioApiResultExtractor, HassioResponse } from "./common";
 
 export type HassioHomeAssistantInfo = {
-  arch: SupervisorArch;
+  arch: string;
   audio_input: string | null;
   audio_output: string | null;
   boot: boolean;
@@ -24,7 +22,7 @@ export type HassioHomeAssistantInfo = {
 export type HassioSupervisorInfo = {
   addons: HassioAddonInfo[];
   addons_repositories: HassioAddonRepository[];
-  arch: SupervisorArch;
+  arch: string;
   channel: string;
   debug: boolean;
   debug_block: boolean;
@@ -41,7 +39,7 @@ export type HassioSupervisorInfo = {
 };
 
 export type HassioInfo = {
-  arch: SupervisorArch;
+  arch: string;
   channel: string;
   docker: string;
   features: string[];
@@ -50,19 +48,10 @@ export type HassioInfo = {
   hostname: string;
   logging: string;
   machine: string;
-  state:
-    | "initialize"
-    | "setup"
-    | "startup"
-    | "running"
-    | "freeze"
-    | "shutdown"
-    | "stopping"
-    | "close";
   operating_system: string;
   supervisor: string;
   supported: boolean;
-  supported_arch: SupervisorArch[];
+  supported_arch: string[];
   timezone: string;
 };
 
@@ -84,57 +73,18 @@ export interface SupervisorOptions {
 }
 
 export const reloadSupervisor = async (hass: HomeAssistant) => {
-  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
-    await hass.callWS({
-      type: "supervisor/api",
-      endpoint: "/supervisor/reload",
-      method: "post",
-    });
-    return;
-  }
-
   await hass.callApi<HassioResponse<void>>("POST", `hassio/supervisor/reload`);
 };
 
 export const restartSupervisor = async (hass: HomeAssistant) => {
-  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
-    await hass.callWS({
-      type: "supervisor/api",
-      endpoint: "/supervisor/restart",
-      method: "post",
-      timeout: null,
-    });
-    return;
-  }
-
   await hass.callApi<HassioResponse<void>>("POST", `hassio/supervisor/restart`);
 };
 
 export const updateSupervisor = async (hass: HomeAssistant) => {
-  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
-    await hass.callWS({
-      type: "supervisor/api",
-      endpoint: "/supervisor/update",
-      method: "post",
-      timeout: null,
-    });
-    return;
-  }
-
   await hass.callApi<HassioResponse<void>>("POST", `hassio/supervisor/update`);
 };
 
-export const fetchHassioHomeAssistantInfo = async (
-  hass: HomeAssistant
-): Promise<HassioHomeAssistantInfo> => {
-  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
-    return await hass.callWS({
-      type: "supervisor/api",
-      endpoint: "/core/info",
-      method: "get",
-    });
-  }
-
+export const fetchHassioHomeAssistantInfo = async (hass: HomeAssistant) => {
   return hassioApiResultExtractor(
     await hass.callApi<HassioResponse<HassioHomeAssistantInfo>>(
       "GET",
@@ -143,17 +93,7 @@ export const fetchHassioHomeAssistantInfo = async (
   );
 };
 
-export const fetchHassioSupervisorInfo = async (
-  hass: HomeAssistant
-): Promise<HassioSupervisorInfo> => {
-  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
-    return await hass.callWS({
-      type: "supervisor/api",
-      endpoint: "/supervisor/info",
-      method: "get",
-    });
-  }
-
+export const fetchHassioSupervisorInfo = async (hass: HomeAssistant) => {
   return hassioApiResultExtractor(
     await hass.callApi<HassioResponse<HassioSupervisorInfo>>(
       "GET",
@@ -162,17 +102,7 @@ export const fetchHassioSupervisorInfo = async (
   );
 };
 
-export const fetchHassioInfo = async (
-  hass: HomeAssistant
-): Promise<HassioInfo> => {
-  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
-    return await hass.callWS({
-      type: "supervisor/api",
-      endpoint: "/info",
-      method: "get",
-    });
-  }
-
+export const fetchHassioInfo = async (hass: HomeAssistant) => {
   return hassioApiResultExtractor(
     await hass.callApi<HassioResponse<HassioInfo>>("GET", "hassio/info")
   );
@@ -189,16 +119,6 @@ export const setSupervisorOption = async (
   hass: HomeAssistant,
   data: SupervisorOptions
 ) => {
-  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
-    await hass.callWS({
-      type: "supervisor/api",
-      endpoint: "/supervisor/options",
-      method: "post",
-      data,
-    });
-    return;
-  }
-
   await hass.callApi<HassioResponse<void>>(
     "POST",
     "hassio/supervisor/options",

src/data/history.ts

@@ -4,6 +4,7 @@ import { computeStateDomain } from "../common/entity/compute_state_domain";
 import { computeStateName } from "../common/entity/compute_state_name";
 import { LocalizeFunc } from "../common/translations/localize";
 import { HomeAssistant } from "../types";
+import { UNAVAILABLE_STATES } from "./entity";
 
 const DOMAINS_USE_LAST_UPDATED = ["climate", "humidifier", "water_heater"];
 const LINE_ATTRIBUTES_TO_KEEP = [
@@ -200,6 +201,23 @@ const processLineChartEntities = (
   };
 };
 
+const isNumerical = (states: HassEntity[]): boolean => {
+  if (states.every((state) => UNAVAILABLE_STATES.includes(state.state))) {
+    return false;
+  }
+
+  if (
+    states.some(
+      (state) =>
+        isNaN(parseFloat(state.state)) &&
+        !UNAVAILABLE_STATES.includes(state.state)
+    )
+  ) {
+    return false;
+  }
+  return true;
+};
+
 export const computeHistory = (
   hass: HomeAssistant,
   stateHistory: HassEntity[][],
@@ -231,6 +249,8 @@ export const computeHistory = (
       unit = hass.config.unit_system.temperature;
     } else if (computeStateDomain(stateInfo[0]) === "humidifier") {
       unit = "%";
+    } else if (isNumerical(stateInfo)) {
+      unit = " ";
     }
 
     if (!unit) {

src/data/logbook.ts

@@ -216,6 +216,7 @@ export const getLogbookMessage = (
         case "cold":
         case "gas":
         case "heat":
+        case "colightld":
         case "moisture":
         case "motion":
         case "occupancy":
@@ -245,17 +246,9 @@ export const getLogbookMessage = (
     }
 
     case "cover":
-      switch (state) {
-        case "open":
-          return hass.localize(`${LOGBOOK_LOCALIZE_PATH}.was_opened`);
-        case "opening":
-          return hass.localize(`${LOGBOOK_LOCALIZE_PATH}.is_opening`);
-        case "closing":
-          return hass.localize(`${LOGBOOK_LOCALIZE_PATH}.is_closing`);
-        case "closed":
-          return hass.localize(`${LOGBOOK_LOCALIZE_PATH}.was_closed`);
-      }
-      break;
+      return state === "open"
+        ? hass.localize(`${LOGBOOK_LOCALIZE_PATH}.was_opened`)
+        : hass.localize(`${LOGBOOK_LOCALIZE_PATH}.was_closed`);
 
     case "lock":
       if (state === "unlocked") {

src/data/lovelace.ts

@@ -2,7 +2,6 @@ import {
   Connection,
   getCollection,
   HassEventBase,
-  HassServiceTarget,
 } from "home-assistant-js-websocket";
 import { HASSDomEvent } from "../common/dom/fire_event";
 import { HuiErrorCard } from "../panels/lovelace/cards/hui-error-card";
@@ -121,8 +120,8 @@ export interface ToggleActionConfig extends BaseActionConfig {
 export interface CallServiceActionConfig extends BaseActionConfig {
   action: "call-service";
   service: string;
-  target?: HassServiceTarget;
   service_data?: {
+    entity_id?: string | [string];
     [key: string]: any;
   };
 }

src/data/script.ts

@@ -1,7 +1,6 @@
 import {
   HassEntityAttributeBase,
   HassEntityBase,
-  HassServiceTarget,
 } from "home-assistant-js-websocket";
 import { computeObjectId } from "../common/entity/compute_object_id";
 import { navigate } from "../common/navigate";
@@ -37,7 +36,6 @@ export interface EventAction {
 export interface ServiceAction {
   service: string;
   entity_id?: string;
-  target?: HassServiceTarget;
   data?: Record<string, any>;
 }
 
@@ -117,7 +115,7 @@ export const triggerScript = (
   variables?: Record<string, unknown>
 ) => hass.callService("script", computeObjectId(entityId), variables);
 
-export const canRun = (state: ScriptEntity) => {
+export const canExcecute = (state: ScriptEntity) => {
   if (state.state === "off") {
     return true;
   }

src/data/selector.ts

@@ -1,5 +1,4 @@
 export type Selector =
-  | AddonSelector
   | EntitySelector
   | DeviceSelector
   | AreaSelector
@@ -9,8 +8,8 @@ export type Selector =
   | TimeSelector
   | ActionSelector
   | StringSelector
-  | ObjectSelector
-  | SelectSelector;
+  | ObjectSelector;
+
 export interface EntitySelector {
   entity: {
     integration?: string;
@@ -31,13 +30,6 @@ export interface DeviceSelector {
   };
 }
 
-export interface AddonSelector {
-  addon: {
-    name?: string;
-    slug?: string;
-  };
-}
-
 export interface AreaSelector {
   area: {
     entity?: {
@@ -103,9 +95,3 @@ export interface ObjectSelector {
   // eslint-disable-next-line @typescript-eslint/ban-types
   object: {};
 }
-
-export interface SelectSelector {
-  select: {
-    options: string[];
-  };
-}

src/data/supervisor/core.ts

@@ -1,4 +1,3 @@
-import { atLeastVersion } from "../../common/config/version";
 import { HomeAssistant } from "../../types";
 import { HassioResponse } from "../hassio/common";
 
@@ -7,15 +6,5 @@ export const restartCore = async (hass: HomeAssistant) => {
 };
 
 export const updateCore = async (hass: HomeAssistant) => {
-  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
-    await hass.callWS({
-      type: "supervisor/api",
-      endpoint: "/core/update",
-      method: "post",
-      timeout: null,
-    });
-    return;
-  }
-
   await hass.callApi<HassioResponse<void>>("POST", `hassio/core/update`);
 };

src/data/supervisor/store.ts

@@ -1,51 +0,0 @@
-import { atLeastVersion } from "../../common/config/version";
-import { HomeAssistant } from "../../types";
-import { AddonRepository, AddonStage } from "../hassio/addon";
-import { hassioApiResultExtractor, HassioResponse } from "../hassio/common";
-
-export interface StoreAddon {
-  advanced: boolean;
-  available: boolean;
-  build: boolean;
-  description: string;
-  homeassistant: string | null;
-  icon: boolean;
-  installed: boolean;
-  logo: boolean;
-  name: string;
-  repository: AddonRepository;
-  slug: string;
-  stage: AddonStage;
-  update_available: boolean;
-  url: string;
-  version: string | null;
-  version_latest: string;
-}
-interface StoreRepository {
-  maintainer: string;
-  name: string;
-  slug: string;
-  source: string;
-  url: string;
-}
-
-export interface SupervisorStore {
-  addons: StoreAddon[];
-  repositories: StoreRepository[];
-}
-
-export const fetchSupervisorStore = async (
-  hass: HomeAssistant
-): Promise<SupervisorStore> => {
-  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
-    return await hass.callWS({
-      type: "supervisor/api",
-      endpoint: "/store",
-      method: "get",
-    });
-  }
-
-  return hassioApiResultExtractor(
-    await hass.callApi<HassioResponse<SupervisorStore>>("GET", `hassio/store`)
-  );
-};

src/data/supervisor/supervisor.ts

@@ -1,7 +1,3 @@
-import { Connection, getCollection } from "home-assistant-js-websocket";
-import { Store } from "home-assistant-js-websocket/dist/store";
-import { HomeAssistant } from "../../types";
-import { HassioAddonsInfo } from "../hassio/addon";
 import { HassioHassOSInfo, HassioHostInfo } from "../hassio/host";
 import { NetworkInfo } from "../hassio/network";
 import { HassioResolution } from "../hassio/resolution";
@@ -10,50 +6,6 @@ import {
   HassioInfo,
   HassioSupervisorInfo,
 } from "../hassio/supervisor";
-import { SupervisorStore } from "./store";
-
-export const supervisorWSbaseCommand = {
-  type: "supervisor/api",
-  method: "GET",
-};
-
-export const supervisorCollection = {
-  host: "/host/info",
-  supervisor: "/supervisor/info",
-  info: "/info",
-  core: "/core/info",
-  network: "/network/info",
-  resolution: "/resolution/info",
-  os: "/os/info",
-  addon: "/addons",
-  store: "/store",
-};
-
-export type SupervisorArch = "armhf" | "armv7" | "aarch64" | "i386" | "amd64";
-export type SupervisorObject =
-  | "host"
-  | "supervisor"
-  | "info"
-  | "core"
-  | "network"
-  | "resolution"
-  | "os"
-  | "addon"
-  | "store";
-
-interface supervisorApiRequest {
-  endpoint: string;
-  method?: "get" | "post" | "delete" | "put";
-  force_rest?: boolean;
-  data?: any;
-}
-
-export interface SupervisorEvent {
-  event: string;
-  update_key?: SupervisorObject;
-  data?: any;
-  [key: string]: any;
-}
 
 export interface Supervisor {
   host: HassioHostInfo;
@@ -63,76 +15,4 @@ export interface Supervisor {
   network: NetworkInfo;
   resolution: HassioResolution;
   os: HassioHassOSInfo;
-  addon: HassioAddonsInfo;
-  store: SupervisorStore;
 }
-
-export const supervisorApiWsRequest = <T>(
-  conn: Connection,
-  request: supervisorApiRequest
-): Promise<T> =>
-  conn.sendMessagePromise<T>({ ...supervisorWSbaseCommand, ...request });
-
-async function processEvent(
-  conn: Connection,
-  store: Store<any>,
-  event: SupervisorEvent,
-  key: string
-) {
-  if (event.event !== "supervisor-update" || event.update_key !== key) {
-    return;
-  }
-
-  if (Object.keys(event.data).length === 0) {
-    const data = await supervisorApiWsRequest<any>(conn, {
-      endpoint: supervisorCollection[key],
-    });
-    store.setState(data);
-    return;
-  }
-
-  const state = store.state;
-  if (state === undefined) {
-    return;
-  }
-
-  store.setState({
-    ...state,
-    ...event.data,
-  });
-}
-
-const subscribeSupervisorEventUpdates = (
-  conn: Connection,
-  store: Store<unknown>,
-  key: string
-) =>
-  conn.subscribeMessage(
-    (event) => processEvent(conn, store, event as SupervisorEvent, key),
-    {
-      type: "supervisor/subscribe",
-    }
-  );
-
-export const getSupervisorEventCollection = (
-  conn: Connection,
-  key: string,
-  endpoint: string
-) =>
-  getCollection(
-    conn,
-    `_supervisor${key}Event`,
-    () => supervisorApiWsRequest(conn, { endpoint }),
-    (connection, store) =>
-      subscribeSupervisorEventUpdates(connection, store, key)
-  );
-
-export const subscribeSupervisorEvents = (
-  hass: HomeAssistant,
-  onChange: (event) => void,
-  key: string,
-  endpoint: string
-) =>
-  getSupervisorEventCollection(hass.connection, key, endpoint).subscribe(
-    onChange
-  );

src/data/target.ts

@@ -0,0 +1,5 @@
+export interface Target {
+  entity_id?: string[];
+  device_id?: string[];
+  area_id?: string[];
+}

src/data/zha.ts

@@ -89,11 +89,6 @@ export const reconfigureNode = (
     ieee: ieeeAddress,
   });
 
-export const refreshTopology = (hass: HomeAssistant): Promise<void> =>
-  hass.callWS({
-    type: "zha/topology/update",
-  });
-
 export const fetchAttributesForCluster = (
   hass: HomeAssistant,
   ieeeAddress: string,

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

@@ -22,9 +22,7 @@ import {
   AreaRegistryEntry,
   subscribeAreaRegistry,
 } from "../../data/area_registry";
-import { fetchConfigFlowInProgress } from "../../data/config_flow";
 import type {
-  DataEntryFlowProgress,
   DataEntryFlowProgressedEvent,
   DataEntryFlowStep,
 } from "../../data/data_entry_flow";
@@ -34,7 +32,6 @@ import {
 } from "../../data/device_registry";
 import { haStyleDialog } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
-import { showAlertDialog } from "../generic/show-dialog-box";
 import { DataEntryFlowDialogParams } from "./show-dialog-data-entry-flow";
 import "./step-flow-abort";
 import "./step-flow-create-entry";
@@ -43,7 +40,6 @@ import "./step-flow-form";
 import "./step-flow-loading";
 import "./step-flow-pick-handler";
 import "./step-flow-progress";
-import "./step-flow-pick-flow";
 
 let instance = 0;
 
@@ -79,10 +75,6 @@ class DataEntryFlowDialog extends LitElement {
 
   @internalProperty() private _handlers?: string[];
 
-  @internalProperty() private _handler?: string;
-
-  @internalProperty() private _flowsInProgress?: DataEntryFlowProgress[];
-
   private _unsubAreas?: UnsubscribeFunc;
 
   private _unsubDevices?: UnsubscribeFunc;
@@ -91,93 +83,48 @@ class DataEntryFlowDialog extends LitElement {
     this._params = params;
     this._instance = instance++;
 
-    if (params.startFlowHandler) {
-      this._checkFlowsInProgress(params.startFlowHandler);
-      return;
-    }
-
-    if (params.continueFlowId) {
-      this._loading = true;
-      const curInstance = this._instance;
-      let step: DataEntryFlowStep;
-      try {
-        step = await params.flowConfig.fetchFlow(
-          this.hass,
-          params.continueFlowId
-        );
-      } catch (err) {
-        this._step = undefined;
-        this._params = undefined;
-        showAlertDialog(this, {
-          title: this.hass.localize(
-            "ui.panel.config.integrations.config_flow.error"
-          ),
-          text: this.hass.localize(
-            "ui.panel.config.integrations.config_flow.could_not_load"
-          ),
-        });
-        return;
-      }
-
-      // Happens if second showDialog called
-      if (curInstance !== this._instance) {
-        return;
-      }
-
-      this._processStep(step);
-      this._loading = false;
-      return;
-    }
-
     // Create a new config flow. Show picker
-    if (!params.flowConfig.getFlowHandlers) {
-      throw new Error("No getFlowHandlers defined in flow config");
-    }
-    this._step = null;
-
-    // We only load the handlers once
-    if (this._handlers === undefined) {
-      this._loading = true;
-      try {
-        this._handlers = await params.flowConfig.getFlowHandlers(this.hass);
-      } finally {
-        this._loading = false;
+    if (!params.continueFlowId && !params.startFlowHandler) {
+      if (!params.flowConfig.getFlowHandlers) {
+        throw new Error("No getFlowHandlers defined in flow config");
       }
+      this._step = null;
+
+      // We only load the handlers once
+      if (this._handlers === undefined) {
+        this._loading = true;
+        try {
+          this._handlers = await params.flowConfig.getFlowHandlers(this.hass);
+        } finally {
+          this._loading = false;
+        }
+      }
+      await this.updateComplete;
+      return;
     }
-    await this.updateComplete;
+
+    this._loading = true;
+    const curInstance = this._instance;
+    const step = await (params.continueFlowId
+      ? params.flowConfig.fetchFlow(this.hass, params.continueFlowId)
+      : params.flowConfig.createFlow(this.hass, params.startFlowHandler!));
+
+    // Happens if second showDialog called
+    if (curInstance !== this._instance) {
+      return;
+    }
+
+    this._processStep(step);
+    this._loading = false;
   }
 
   public closeDialog() {
-    if (!this._params) {
-      return;
-    }
-    const flowFinished = Boolean(
-      this._step && ["create_entry", "abort"].includes(this._step.type)
-    );
-
-    // If we created this flow, delete it now.
-    if (this._step && !flowFinished && !this._params.continueFlowId) {
-      this._params.flowConfig.deleteFlow(this.hass, this._step.flow_id);
-    }
-
-    if (this._step !== null && this._params.dialogClosedCallback) {
-      this._params.dialogClosedCallback({
-        flowFinished,
-      });
-    }
-
-    this._step = undefined;
-    this._params = undefined;
-    this._devices = undefined;
-    this._flowsInProgress = undefined;
-    this._handler = undefined;
-    if (this._unsubAreas) {
-      this._unsubAreas();
-      this._unsubAreas = undefined;
-    }
-    if (this._unsubDevices) {
-      this._unsubDevices();
-      this._unsubDevices = undefined;
+    if (this._step) {
+      this._flowDone();
+    } else if (this._step === null) {
+      // Flow aborted during picking flow
+      this._step = undefined;
+      this._params = undefined;
     }
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
@@ -197,9 +144,7 @@ class DataEntryFlowDialog extends LitElement {
       >
         <div>
           ${this._loading ||
-          (this._step === null &&
-            this._handlers === undefined &&
-            this._handler === undefined)
+          (this._step === null && this._handlers === undefined)
             ? html`
                 <step-flow-loading
                   .label=${this.hass.localize(
@@ -221,22 +166,15 @@ class DataEntryFlowDialog extends LitElement {
                   ?rtl=${computeRTL(this.hass)}
                 ></ha-icon-button>
                 ${this._step === null
-                  ? this._handler
-                    ? html`<step-flow-pick-flow
+                  ? // Show handler picker
+                    html`
+                      <step-flow-pick-handler
                         .flowConfig=${this._params.flowConfig}
                         .hass=${this.hass}
-                        .handler=${this._handler}
-                        .flowsInProgress=${this._flowsInProgress}
-                      ></step-flow-pick-flow>`
-                    : // Show handler picker
-                      html`
-                        <step-flow-pick-handler
-                          .hass=${this.hass}
-                          .handlers=${this._handlers}
-                          .showAdvanced=${this._params.showAdvanced}
-                          @handler-picked=${this._handlerPicked}
-                        ></step-flow-pick-handler>
-                      `
+                        .handlers=${this._handlers}
+                        .showAdvanced=${this._params.showAdvanced}
+                      ></step-flow-pick-handler>
+                    `
                   : this._step.type === "form"
                   ? html`
                       <step-flow-form
@@ -341,43 +279,6 @@ class DataEntryFlowDialog extends LitElement {
     });
   }
 
-  private async _checkFlowsInProgress(handler: string) {
-    this._loading = true;
-
-    const flowsInProgress = (
-      await fetchConfigFlowInProgress(this.hass.connection)
-    ).filter((flow) => flow.handler === handler);
-
-    if (!flowsInProgress.length) {
-      let step: DataEntryFlowStep;
-      try {
-        step = await this._params!.flowConfig.createFlow(this.hass, handler);
-      } catch (err) {
-        this._step = undefined;
-        this._params = undefined;
-        showAlertDialog(this, {
-          title: this.hass.localize(
-            "ui.panel.config.integrations.config_flow.error"
-          ),
-          text: this.hass.localize(
-            "ui.panel.config.integrations.config_flow.could_not_load"
-          ),
-        });
-        return;
-      }
-      this._processStep(step);
-    } else {
-      this._step = null;
-      this._handler = handler;
-      this._flowsInProgress = flowsInProgress;
-    }
-    this._loading = false;
-  }
-
-  private _handlerPicked(ev) {
-    this._checkFlowsInProgress(ev.detail.handler);
-  }
-
   private async _processStep(
     step: DataEntryFlowStep | undefined | Promise<DataEntryFlowStep>
   ): Promise<void> {
@@ -392,7 +293,7 @@ class DataEntryFlowDialog extends LitElement {
     }
 
     if (step === undefined) {
-      this.closeDialog();
+      this._flowDone();
       return;
     }
     this._step = undefined;
@@ -400,6 +301,38 @@ class DataEntryFlowDialog extends LitElement {
     this._step = step;
   }
 
+  private _flowDone(): void {
+    if (!this._params) {
+      return;
+    }
+    const flowFinished = Boolean(
+      this._step && ["create_entry", "abort"].includes(this._step.type)
+    );
+
+    // If we created this flow, delete it now.
+    if (this._step && !flowFinished && !this._params.continueFlowId) {
+      this._params.flowConfig.deleteFlow(this.hass, this._step.flow_id);
+    }
+
+    if (this._params.dialogClosedCallback) {
+      this._params.dialogClosedCallback({
+        flowFinished,
+      });
+    }
+
+    this._step = undefined;
+    this._params = undefined;
+    this._devices = undefined;
+    if (this._unsubAreas) {
+      this._unsubAreas();
+      this._unsubAreas = undefined;
+    }
+    if (this._unsubDevices) {
+      this._unsubDevices();
+      this._unsubDevices = undefined;
+    }
+  }
+
   static get styles(): CSSResultArray {
     return [
       haStyleDialog,

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

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

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

@@ -22,6 +22,7 @@ import { domainToName } from "../../data/integration";
 import { HomeAssistant } from "../../types";
 import { brandsUrl } from "../../util/brands-url";
 import { documentationUrl } from "../../util/documentation-url";
+import { FlowConfig } from "./show-dialog-data-entry-flow";
 import { configFlowContentStyles } from "./styles";
 
 interface HandlerObj {
@@ -29,24 +30,17 @@ interface HandlerObj {
   slug: string;
 }
 
-declare global {
-  // for fire event
-  interface HASSDomEvents {
-    "handler-picked": {
-      handler: string;
-    };
-  }
-}
-
 @customElement("step-flow-pick-handler")
 class StepFlowPickHandler extends LitElement {
+  public flowConfig!: FlowConfig;
+
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property() public handlers!: string[];
 
   @property() public showAdvanced?: boolean;
 
-  @internalProperty() private _filter?: string;
+  @internalProperty() private filter?: string;
 
   private _width?: number;
 
@@ -80,7 +74,7 @@ class StepFlowPickHandler extends LitElement {
   protected render(): TemplateResult {
     const handlers = this._getHandlers(
       this.handlers,
-      this._filter,
+      this.filter,
       this.hass.localize
     );
 
@@ -88,7 +82,7 @@ class StepFlowPickHandler extends LitElement {
       <h2>${this.hass.localize("ui.panel.config.integrations.new")}</h2>
       <search-input
         autofocus
-        .filter=${this._filter}
+        .filter=${this.filter}
         @value-changed=${this._filterChanged}
         .label=${this.hass.localize("ui.panel.config.integrations.search")}
       ></search-input>
@@ -170,12 +164,15 @@ class StepFlowPickHandler extends LitElement {
   }
 
   private async _filterChanged(e) {
-    this._filter = e.detail.value;
+    this.filter = e.detail.value;
   }
 
   private async _handlerPicked(ev) {
-    fireEvent(this, "handler-picked", {
-      handler: ev.currentTarget.handler.slug,
+    fireEvent(this, "flow-update", {
+      stepPromise: this.flowConfig.createFlow(
+        this.hass,
+        ev.currentTarget.handler.slug
+      ),
     });
   }
 
@@ -198,9 +195,6 @@ class StepFlowPickHandler extends LitElement {
           overflow: auto;
           max-height: 600px;
         }
-        h2 {
-          padding-right: 66px;
-        }
         @media all and (max-height: 900px) {
           div {
             max-height: calc(100vh - 134px);

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

@@ -10,7 +10,7 @@ import {
   TemplateResult,
 } from "lit-element";
 import "../../../components/ha-relative-time";
-import { triggerAutomationActions } from "../../../data/automation";
+import { triggerAutomation } from "../../../data/automation";
 import { UNAVAILABLE_STATES } from "../../../data/entity";
 import { HomeAssistant } from "../../../types";
 
@@ -36,7 +36,7 @@ class MoreInfoAutomation extends LitElement {
 
       <div class="actions">
         <mwc-button
-          @click=${this._runActions}
+          @click=${this.handleAction}
           .disabled=${UNAVAILABLE_STATES.includes(this.stateObj!.state)}
         >
           ${this.hass.localize("ui.card.automation.trigger")}
@@ -45,8 +45,8 @@ class MoreInfoAutomation extends LitElement {
     `;
   }
 
-  private _runActions() {
-    triggerAutomationActions(this.hass, this.stateObj!.entity_id);
+  private handleAction() {
+    triggerAutomation(this.hass, this.stateObj!.entity_id);
   }
 
   static get styles(): CSSResult {

src/dialogs/more-info/controls/more-info-fan.js

@@ -52,7 +52,6 @@ class MoreInfoFan extends LocalizeMixin(EventsMixin(PolymerElement)) {
             caption="[[localize('ui.card.fan.speed')]]"
             min="0"
             max="100"
-            step="[[computePercentageStepSize(stateObj)]]"
             value="{{percentageSliderValue}}"
             on-change="percentageChanged"
             pin=""
@@ -114,7 +113,7 @@ class MoreInfoFan extends LocalizeMixin(EventsMixin(PolymerElement)) {
 
       <ha-attributes
         state-obj="[[stateObj]]"
-        extra-filters="percentage_step,speed,preset_mode,preset_modes,speed_list,percentage,oscillating,direction"
+        extra-filters="speed,preset_mode,preset_modes,speed_list,percentage,oscillating,direction"
       ></ha-attributes>
     `;
   }
@@ -155,13 +154,6 @@ class MoreInfoFan extends LocalizeMixin(EventsMixin(PolymerElement)) {
     }
   }
 
-  computePercentageStepSize(stateObj) {
-    if (stateObj.attributes.percentage_step) {
-      return stateObj.attributes.percentage_step;
-    }
-    return 1;
-  }
-
   computeClassNames(stateObj) {
     return (
       "more-info-fan " +

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

@@ -380,24 +380,22 @@ export class QuickBar extends LitElement {
     QuickBarNavigationItem,
     "action"
   >[] {
-    return Object.keys(this.hass.panels)
-      .filter((panelKey) => panelKey !== "_my_redirect")
-      .map((panelKey) => {
-        const panel = this.hass.panels[panelKey];
-        const translationKey = getPanelNameTranslationKey(panel);
+    return Object.keys(this.hass.panels).map((panelKey) => {
+      const panel = this.hass.panels[panelKey];
+      const translationKey = getPanelNameTranslationKey(panel);
 
-        const text = this.hass.localize(
-          "ui.dialogs.quick-bar.commands.navigation.navigate_to",
-          "panel",
-          this.hass.localize(translationKey) || panel.title || panel.url_path
-        );
+      const text = this.hass.localize(
+        "ui.dialogs.quick-bar.commands.navigation.navigate_to",
+        "panel",
+        this.hass.localize(translationKey) || panel.title || panel.url_path
+      );
 
-        return {
-          text,
-          icon: getPanelIcon(panel) || DEFAULT_NAVIGATION_ICON,
-          path: `/${panel.url_path}`,
-        };
-      });
+      return {
+        text,
+        icon: getPanelIcon(panel) || DEFAULT_NAVIGATION_ICON,
+        path: `/${panel.url_path}`,
+      };
+    });
   }
 
   private _generateNavigationConfigSectionCommands(): Partial<

src/entrypoints/core.ts

@@ -48,19 +48,10 @@ const authProm = isExternal
 const connProm = async (auth) => {
   try {
     const conn = await createConnection({ auth });
-    // Clear auth data from url if we have been able to establish a connection
+
+    // Clear url if we have been able to establish a connection
     if (location.search.includes("auth_callback=1")) {
-      const searchParams = new URLSearchParams(location.search);
-      // https://github.com/home-assistant/home-assistant-js-websocket/blob/master/lib/auth.ts
-      // Remove all data from QueryCallbackData type
-      searchParams.delete("auth_callback");
-      searchParams.delete("code");
-      searchParams.delete("state");
-      history.replaceState(
-        null,
-        "",
-        `${location.pathname}?${searchParams.toString()}`
-      );
+      history.replaceState(null, "", location.pathname);
     }
 
     return { auth, conn };

src/fake_data/demo_config.ts

@@ -15,8 +15,7 @@ export const demoConfig: HassConfig = {
   time_zone: "America/Los_Angeles",
   config_dir: "/config",
   version: "DEMO",
-  allowlist_external_dirs: [],
-  allowlist_external_urls: [],
+  whitelist_external_dirs: [],
   config_source: "storage",
   safe_mode: false,
   state: STATE_RUNNING,

src/html/_style_base.html.template

@@ -1,4 +1,4 @@
-<meta name='viewport' content='width=device-width, user-scalable=no, viewport-fit=cover'>
+<meta name='viewport' content='width=device-width, viewport-fit=cover'>
 <style>
   body {
     font-family: Roboto, sans-serif;

src/layouts/hass-error-screen.ts

@@ -70,14 +70,10 @@ class HassErrorScreen extends LitElement {
           color: var(--primary-text-color);
           height: calc(100% - var(--header-height));
           display: flex;
-          padding: 16px;
           align-items: center;
           justify-content: center;
           flex-direction: column;
         }
-        a {
-          color: var(--primary-color);
-        }
       `,
     ];
   }