Update src/dialogs/analytics/dialog-analytics-optin.ts

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

.eslintrc.json

@@ -84,7 +84,8 @@
     "@typescript-eslint/no-unused-vars": 0,
     "@typescript-eslint/explicit-function-return-type": 0,
     "@typescript-eslint/explicit-module-boundary-types": 0,
-    "@typescript-eslint/no-shadow": ["error"]
+    "@typescript-eslint/no-shadow": ["error"],
+    "lit/attribute-value-entities": 0
   },
   "plugins": ["disable", "import", "lit", "prettier", "@typescript-eslint"],
   "processor": "disable/disable"

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -1,8 +1,6 @@
 name: Report a bug with the UI, Frontend or Lovelace
-about: Report an issue related to the Home Assistant frontend.
+description: Report an issue related to the Home Assistant frontend.
 labels: bug
-title: ""
-issue_body: true
 body:
   - type: markdown
     attributes:
@@ -97,11 +95,7 @@ body:
         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.
-
-        ```
+      render: txt
   - type: textarea
     attributes:
       label: Problem-relevant frontend configuration
@@ -110,29 +104,18 @@ body:
         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.
-
-        ```
+      render: yaml
   - 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
+      render: txt
+  - type: textarea
     attributes:
-      value: |
-        ## Additional information
-  - type: markdown
-    attributes:
-      value: |
+      label: Additional information
+      description: >
         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.
+        Please note, you can attach screenshots or screen recordings here, by
+        dragging and dropping files in the field below.

.github/workflows/translations.yaml

@@ -7,7 +7,7 @@ on:
     branches:
       - dev
     paths:
-      - translations/en.json
+      - src/translations/en.json
 
 env:
   NODE_VERSION: 12

build-scripts/gulp/gather-static.js

@@ -85,6 +85,11 @@ gulp.task("copy-translations-app", async () => {
   copyTranslations(staticDir);
 });
 
+gulp.task("copy-translations-supervisor", async () => {
+  const staticDir = paths.hassio_output_static;
+  copyTranslations(staticDir);
+});
+
 gulp.task("copy-static-app", async () => {
   const staticDir = paths.app_output_static;
   // Basic static files

build-scripts/gulp/hassio.js

@@ -10,6 +10,8 @@ require("./gen-icons-json.js");
 require("./webpack.js");
 require("./compress.js");
 require("./rollup.js");
+require("./gather-static.js");
+require("./translations.js");
 
 gulp.task(
   "develop-hassio",
@@ -20,6 +22,8 @@ gulp.task(
     "clean-hassio",
     "gen-icons-json",
     "gen-index-hassio-dev",
+    "build-supervisor-translations",
+    "copy-translations-supervisor",
     env.useRollup() ? "rollup-watch-hassio" : "webpack-watch-hassio"
   )
 );
@@ -32,6 +36,8 @@ gulp.task(
     },
     "clean-hassio",
     "gen-icons-json",
+    "build-supervisor-translations",
+    "copy-translations-supervisor",
     env.useRollup() ? "rollup-prod-hassio" : "webpack-prod-hassio",
     "gen-index-hassio-prod",
     ...// Don't compress running tests

build-scripts/gulp/translations.js

@@ -266,6 +266,7 @@ gulp.task(taskName, function () {
         TRANSLATION_FRAGMENTS.forEach((fragment) => {
           delete data.ui.panel[fragment];
         });
+        delete data.supervisor;
         return data;
       })
     )
@@ -342,6 +343,62 @@ gulp.task(
   }
 );
 
+gulp.task("build-translation-fragment-supervisor", function () {
+  return gulp
+    .src(fullDir + "/*.json")
+    .pipe(transform((data) => data.supervisor))
+    .pipe(gulp.dest(workDir + "/supervisor"));
+});
+
+gulp.task("build-translation-flatten-supervisor", function () {
+  return gulp
+    .src(workDir + "/supervisor/*.json")
+    .pipe(
+      transform(function (data) {
+        // Polymer.AppLocalizeBehavior requires flattened json
+        return flatten(data);
+      })
+    )
+    .pipe(gulp.dest(outDir));
+});
+
+gulp.task("build-translation-write-metadata", function writeMetadata() {
+  return gulp
+    .src(
+      [
+        path.join(paths.translations_src, "translationMetadata.json"),
+        workDir + "/testMetadata.json",
+        workDir + "/translationFingerprints.json",
+      ],
+      { allowEmpty: true }
+    )
+    .pipe(merge({}))
+    .pipe(
+      transform(function (data) {
+        const newData = {};
+        Object.entries(data).forEach(([key, value]) => {
+          // Filter out translations without native name.
+          if (value.nativeName) {
+            newData[key] = value;
+          } else {
+            console.warn(
+              `Skipping language ${key}. Native name was not translated.`
+            );
+          }
+        });
+        return newData;
+      })
+    )
+    .pipe(
+      transform((data) => ({
+        fragments: TRANSLATION_FRAGMENTS,
+        translations: data,
+      }))
+    )
+    .pipe(rename("translationMetadata.json"))
+    .pipe(gulp.dest(workDir));
+});
+
 gulp.task(
   "build-translations",
   gulp.series(
@@ -353,42 +410,20 @@ gulp.task(
     gulp.parallel(...splitTasks),
     "build-flattened-translations",
     "build-translation-fingerprints",
-    function writeMetadata() {
-      return gulp
-        .src(
-          [
-            path.join(paths.translations_src, "translationMetadata.json"),
-            workDir + "/testMetadata.json",
-            workDir + "/translationFingerprints.json",
-          ],
-          { allowEmpty: true }
-        )
-        .pipe(merge({}))
-        .pipe(
-          transform(function (data) {
-            const newData = {};
-            Object.entries(data).forEach(([key, value]) => {
-              // Filter out translations without native name.
-              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;
-          })
-        )
-        .pipe(
-          transform((data) => ({
-            fragments: TRANSLATION_FRAGMENTS,
-            translations: data,
-          }))
-        )
-        .pipe(rename("translationMetadata.json"))
-        .pipe(gulp.dest(workDir));
-    }
+    "build-translation-write-metadata"
+  )
+);
+
+gulp.task(
+  "build-supervisor-translations",
+  gulp.series(
+    "clean-translations",
+    "ensure-translations-build-dir",
+    "build-master-translation",
+    "build-merged-translations",
+    "build-translation-fragment-supervisor",
+    "build-translation-flatten-supervisor",
+    "build-translation-fingerprints",
+    "build-translation-write-metadata"
   )
 );

build-scripts/gulp/webpack.js

@@ -137,7 +137,12 @@ gulp.task("webpack-watch-hassio", () => {
       isProdBuild: false,
       latestBuild: true,
     })
-  ).watch({}, doneHandler());
+  ).watch({ ignored: /build-translations/ }, doneHandler());
+
+  gulp.watch(
+    path.join(paths.translations_src, "en.json"),
+    gulp.series("build-supervisor-translations", "copy-translations-supervisor")
+  );
 });
 
 gulp.task("webpack-prod-hassio", () =>

build-scripts/paths.js

@@ -34,6 +34,7 @@ module.exports = {
 
   hassio_dir: path.resolve(__dirname, "../hassio"),
   hassio_output_root: path.resolve(__dirname, "../hassio/build"),
+  hassio_output_static: path.resolve(__dirname, "../hassio/build/static"),
   hassio_output_latest: path.resolve(
     __dirname,
     "../hassio/build/frontend_latest"

build-scripts/webpack.js

@@ -1,7 +1,7 @@
 const webpack = require("webpack");
 const path = require("path");
 const TerserPlugin = require("terser-webpack-plugin");
-const ManifestPlugin = require("webpack-manifest-plugin");
+const { WebpackManifestPlugin } = 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 ManifestPlugin({
+      new WebpackManifestPlugin({
         // Only include the JS of entrypoints
         filter: (file) => file.isInitial && !file.name.endsWith(".map"),
       }),

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

@@ -100,7 +100,7 @@ class HcLayout extends LitElement {
         display: block;
         margin: 0;
       }
-	
+
       .hero {
         border-radius: 4px 4px 0 0;
       }

cast/src/receiver/layout/hc-lovelace.ts

@@ -35,11 +35,12 @@ class HcLovelace extends LitElement {
     }
     const lovelace: Lovelace = {
       config: this.lovelaceConfig,
+      rawConfig: this.lovelaceConfig,
       editMode: false,
       urlPath: this.urlPath!,
       enableFullEditMode: () => undefined,
       mode: "storage",
-      language: "en",
+      locale: this.hass.locale,
       saveConfig: async () => undefined,
       deleteConfig: async () => undefined,
       setEditMode: () => undefined,
@@ -94,6 +95,7 @@ class HcLovelace extends LitElement {
     return css`
       :host {
         min-height: 100vh;
+        height: 0;
         display: flex;
         flex-direction: column;
         box-sizing: border-box;

cast/src/receiver/layout/hc-main.ts

@@ -221,11 +221,17 @@ export class HcMain extends HassElement {
   }
 
   private async _generateLovelaceConfig() {
-    const { generateLovelaceConfigFromHass } = await import(
-      "../../../../src/panels/lovelace/common/generate-lovelace-config"
+    const { generateLovelaceDashboardStrategy } = await import(
+      "../../../../src/panels/lovelace/strategies/get-strategy"
     );
     this._handleNewLovelaceConfig(
-      await generateLovelaceConfigFromHass(this.hass!)
+      await generateLovelaceDashboardStrategy(
+        {
+          hass: this.hass!,
+          narrow: false,
+        },
+        "original-states"
+      )
     );
   }
 

gallery/src/data/traces/basic_trace.ts

@@ -0,0 +1,349 @@
+import { DemoTrace } from "./types";
+
+export const basicTrace: DemoTrace = {
+  trace: {
+    last_step: "action/2",
+    run_id: "0",
+    state: "stopped",
+    timestamp: {
+      start: "2021-03-25T04:36:51.223693+00:00",
+      finish: "2021-03-25T04:36:51.266132+00:00",
+    },
+    trigger: "state of input_boolean.toggle_1",
+    domain: "automation",
+    item_id: "1615419646544",
+    trace: {
+      "trigger/0": [
+        {
+          path: "trigger/0",
+          timestamp: "2021-03-25T04:36:51.223693+00:00",
+        },
+      ],
+      "condition/0": [
+        {
+          path: "condition/0",
+          timestamp: "2021-03-25T04:36:51.228243+00:00",
+          changed_variables: {
+            trigger: {
+              platform: "state",
+              entity_id: "input_boolean.toggle_1",
+              from_state: {
+                entity_id: "input_boolean.toggle_1",
+                state: "on",
+                attributes: {
+                  editable: true,
+                  friendly_name: "Toggle 1",
+                },
+                last_changed: "2021-03-24T19:03:59.141440+00:00",
+                last_updated: "2021-03-24T19:03:59.141440+00:00",
+                context: {
+                  id: "5d0918eb379214d07554bdab6a08bcff",
+                  parent_id: null,
+                  user_id: null,
+                },
+              },
+              to_state: {
+                entity_id: "input_boolean.toggle_1",
+                state: "off",
+                attributes: {
+                  editable: true,
+                  friendly_name: "Toggle 1",
+                },
+                last_changed: "2021-03-25T04:36:51.220696+00:00",
+                last_updated: "2021-03-25T04:36:51.220696+00:00",
+                context: {
+                  id: "664d6d261450a9ecea6738e97269a149",
+                  parent_id: null,
+                  user_id: "d1b4e89da01445fa8bc98e39fac477ca",
+                },
+              },
+              for: null,
+              attribute: null,
+              description: "state of input_boolean.toggle_1",
+            },
+          },
+          result: {
+            result: true,
+          },
+        },
+      ],
+      "action/0": [
+        {
+          path: "action/0",
+          timestamp: "2021-03-25T04:36:51.243018+00:00",
+          changed_variables: {
+            trigger: {
+              platform: "state",
+              entity_id: "input_boolean.toggle_1",
+              from_state: {
+                entity_id: "input_boolean.toggle_1",
+                state: "on",
+                attributes: {
+                  editable: true,
+                  friendly_name: "Toggle 1",
+                },
+                last_changed: "2021-03-24T19:03:59.141440+00:00",
+                last_updated: "2021-03-24T19:03:59.141440+00:00",
+                context: {
+                  id: "5d0918eb379214d07554bdab6a08bcff",
+                  parent_id: null,
+                  user_id: null,
+                },
+              },
+              to_state: {
+                entity_id: "input_boolean.toggle_1",
+                state: "off",
+                attributes: {
+                  editable: true,
+                  friendly_name: "Toggle 1",
+                },
+                last_changed: "2021-03-25T04:36:51.220696+00:00",
+                last_updated: "2021-03-25T04:36:51.220696+00:00",
+                context: {
+                  id: "664d6d261450a9ecea6738e97269a149",
+                  parent_id: null,
+                  user_id: "d1b4e89da01445fa8bc98e39fac477ca",
+                },
+              },
+              for: null,
+              attribute: null,
+              description: "state of input_boolean.toggle_1",
+            },
+            context: {
+              id: "6cfcae368e7b3686fad6c59e83ae76c9",
+              parent_id: "664d6d261450a9ecea6738e97269a149",
+              user_id: null,
+            },
+          },
+          result: {
+            params: {
+              domain: "input_boolean",
+              service: "toggle",
+              service_data: {},
+              target: {
+                entity_id: ["input_boolean.toggle_4"],
+              },
+            },
+            running_script: false,
+            limit: 10,
+          },
+        },
+      ],
+      "action/1": [
+        {
+          path: "action/1",
+          timestamp: "2021-03-25T04:36:51.252406+00:00",
+          result: {
+            choice: 0,
+          },
+        },
+      ],
+      "action/1/choose/0": [
+        {
+          path: "action/1/choose/0",
+          timestamp: "2021-03-25T04:36:51.254569+00:00",
+          result: {
+            result: true,
+          },
+        },
+      ],
+      "action/1/choose/0/conditions/0": [
+        {
+          path: "action/1/choose/0/conditions/0",
+          timestamp: "2021-03-25T04:36:51.254697+00:00",
+          result: {
+            result: true,
+          },
+        },
+      ],
+      "action/1/choose/0/sequence/0": [
+        {
+          path: "action/1/choose/0/sequence/0",
+          timestamp: "2021-03-25T04:36:51.257360+00:00",
+          result: {
+            params: {
+              domain: "input_boolean",
+              service: "toggle",
+              service_data: {},
+              target: {
+                entity_id: ["input_boolean.toggle_2"],
+              },
+            },
+            running_script: false,
+            limit: 10,
+          },
+        },
+      ],
+      "action/1/choose/0/sequence/1": [
+        {
+          path: "action/1/choose/0/sequence/1",
+          timestamp: "2021-03-25T04:36:51.260658+00:00",
+          result: {
+            params: {
+              domain: "input_boolean",
+              service: "toggle",
+              service_data: {},
+              target: {
+                entity_id: ["input_boolean.toggle_3"],
+              },
+            },
+            running_script: false,
+            limit: 10,
+          },
+        },
+      ],
+      "action/2": [
+        {
+          path: "action/2",
+          timestamp: "2021-03-25T04:36:51.264159+00:00",
+          result: {
+            params: {
+              domain: "input_boolean",
+              service: "toggle",
+              service_data: {},
+              target: {
+                entity_id: ["input_boolean.toggle_4"],
+              },
+            },
+            running_script: false,
+            limit: 10,
+          },
+        },
+      ],
+    },
+
+    config: {
+      id: "1615419646544",
+      alias: "Ensure Party mode",
+      description: "",
+      trigger: [
+        {
+          platform: "state",
+          entity_id: "input_boolean.toggle_1",
+        },
+      ],
+      condition: [
+        {
+          condition: "template",
+          alias: "Test if Paulus is home",
+          value_template: "{{ true }}",
+        },
+      ],
+      action: [
+        {
+          service: "input_boolean.toggle",
+          target: {
+            entity_id: "input_boolean.toggle_4",
+          },
+        },
+        {
+          choose: [
+            {
+              alias: "If toggle 3 is on",
+              conditions: [
+                {
+                  condition: "template",
+                  value_template:
+                    "{{ is_state('input_boolean.toggle_3', 'on') }}",
+                },
+              ],
+              sequence: [
+                {
+                  service: "input_boolean.toggle",
+                  alias: "Toggle 2 while 3 is on",
+                  target: {
+                    entity_id: "input_boolean.toggle_2",
+                  },
+                },
+                {
+                  service: "input_boolean.toggle",
+                  alias: "Toggle 3",
+                  target: {
+                    entity_id: "input_boolean.toggle_3",
+                  },
+                },
+              ],
+            },
+          ],
+          default: [
+            {
+              service: "input_boolean.toggle",
+              alias: "Toggle 2",
+              target: {
+                entity_id: "input_boolean.toggle_2",
+              },
+            },
+          ],
+        },
+        {
+          service: "input_boolean.toggle",
+          target: {
+            entity_id: "input_boolean.toggle_4",
+          },
+        },
+      ],
+      mode: "single",
+    },
+    context: {
+      id: "6cfcae368e7b3686fad6c59e83ae76c9",
+      parent_id: "664d6d261450a9ecea6738e97269a149",
+      user_id: null,
+    },
+    script_execution: "finished",
+  },
+  logbookEntries: [
+    {
+      name: "Ensure Party mode",
+      message: "has been triggered by state of input_boolean.toggle_1",
+      source: "state of input_boolean.toggle_1",
+      entity_id: "automation.toggle_toggles",
+      context_id: "6cfcae368e7b3686fad6c59e83ae76c9",
+      when: "2021-03-25T04:36:51.240832+00:00",
+      domain: "automation",
+    },
+    {
+      when: "2021-03-25T04:36:51.249828+00:00",
+      name: "Toggle 4",
+      state: "on",
+      entity_id: "input_boolean.toggle_4",
+      context_entity_id: "automation.toggle_toggles",
+      context_entity_id_name: "Ensure Party mode",
+      context_event_type: "automation_triggered",
+      context_domain: "automation",
+      context_name: "Ensure Party mode",
+    },
+    {
+      when: "2021-03-25T04:36:51.258947+00:00",
+      name: "Toggle 2",
+      state: "on",
+      entity_id: "input_boolean.toggle_2",
+      context_entity_id: "automation.toggle_toggles",
+      context_entity_id_name: "Ensure Party mode",
+      context_event_type: "automation_triggered",
+      context_domain: "automation",
+      context_name: "Ensure Party mode",
+    },
+    {
+      when: "2021-03-25T04:36:51.261806+00:00",
+      name: "Toggle 3",
+      state: "off",
+      entity_id: "input_boolean.toggle_3",
+      context_entity_id: "automation.toggle_toggles",
+      context_entity_id_name: "Ensure Party mode",
+      context_event_type: "automation_triggered",
+      context_domain: "automation",
+      context_name: "Ensure Party mode",
+    },
+    {
+      when: "2021-03-25T04:36:51.265246+00:00",
+      name: "Toggle 4",
+      state: "off",
+      entity_id: "input_boolean.toggle_4",
+      context_entity_id: "automation.toggle_toggles",
+      context_entity_id_name: "Ensure Party mode",
+      context_event_type: "automation_triggered",
+      context_domain: "automation",
+      context_name: "Ensure Party mode",
+    },
+  ],
+};

gallery/src/data/traces/mock-demo-trace.ts

@@ -0,0 +1,44 @@
+import { LogbookEntry } from "../../../../src/data/logbook";
+import { AutomationTraceExtended } from "../../../../src/data/trace";
+import { DemoTrace } from "./types";
+
+export const mockDemoTrace = (
+  tracePartial: Partial<AutomationTraceExtended>,
+  logbookEntries?: LogbookEntry[]
+): DemoTrace => ({
+  trace: {
+    last_step: "",
+    run_id: "0",
+    state: "stopped",
+    timestamp: {
+      start: "2021-03-25T04:36:51.223693+00:00",
+      finish: "2021-03-25T04:36:51.266132+00:00",
+    },
+    trigger: "mocked trigger",
+    domain: "automation",
+    item_id: "1615419646544",
+    trace: {
+      "trigger/0": [
+        {
+          path: "trigger/0",
+          changed_variables: {
+            trigger: {
+              description: "mocked trigger",
+            },
+          },
+          timestamp: "2021-03-25T04:36:51.223693+00:00",
+        },
+      ],
+    },
+    config: {
+      trigger: [],
+      action: [],
+    },
+    context: {
+      id: "abcd",
+    },
+    script_execution: "finished",
+    ...tracePartial,
+  },
+  logbookEntries: logbookEntries || [],
+});

gallery/src/data/traces/motion-light-trace.ts

@@ -0,0 +1,214 @@
+import { DemoTrace } from "./types";
+
+export const motionLightTrace: DemoTrace = {
+  trace: {
+    last_step: "action/3",
+    run_id: "1",
+    state: "stopped",
+    timestamp: {
+      start: "2021-03-14T06:07:01.768006+00:00",
+      finish: "2021-03-14T06:07:53.287525+00:00",
+    },
+    trigger: "state of binary_sensor.pauluss_macbook_pro_camera_in_use",
+    domain: "automation",
+    item_id: "1614732497392",
+    trace: {
+      "trigger/0": [
+        {
+          path: "trigger/0",
+          timestamp: "2021-03-25T04:36:51.223693+00:00",
+        },
+      ],
+      "action/0": [
+        {
+          path: "action/0",
+          timestamp: "2021-03-14T06:07:01.771038+00:00",
+          changed_variables: {
+            trigger: {
+              platform: "state",
+              entity_id: "binary_sensor.pauluss_macbook_pro_camera_in_use",
+              from_state: {
+                entity_id: "binary_sensor.pauluss_macbook_pro_camera_in_use",
+                state: "off",
+                attributes: {
+                  friendly_name: "Paulus’s MacBook Pro Camera In Use",
+                  icon: "mdi:camera-off",
+                },
+                last_changed: "2021-03-14T06:06:29.235325+00:00",
+                last_updated: "2021-03-14T06:06:29.235325+00:00",
+                context: {
+                  id: "ad4864c5ce957c38a07b50378eeb245d",
+                  parent_id: null,
+                  user_id: null,
+                },
+              },
+              to_state: {
+                entity_id: "binary_sensor.pauluss_macbook_pro_camera_in_use",
+                state: "on",
+                attributes: {
+                  friendly_name: "Paulus’s MacBook Pro Camera In Use",
+                  icon: "mdi:camera",
+                },
+                last_changed: "2021-03-14T06:07:01.762009+00:00",
+                last_updated: "2021-03-14T06:07:01.762009+00:00",
+                context: {
+                  id: "e22ddfd5f11dc4aad9a52fc10dab613b",
+                  parent_id: null,
+                  user_id: null,
+                },
+              },
+              for: null,
+              attribute: null,
+              description:
+                "state of binary_sensor.pauluss_macbook_pro_camera_in_use",
+            },
+            context: {
+              id: "43b6ee9293a551c5cc14e8eb60af54ba",
+              parent_id: "e22ddfd5f11dc4aad9a52fc10dab613b",
+              user_id: null,
+            },
+          },
+        },
+      ],
+      "action/1": [
+        { path: "action/1", timestamp: "2021-03-14T06:07:01.875316+00:00" },
+      ],
+      "action/2": [
+        {
+          path: "action/2",
+          timestamp: "2021-03-14T06:07:53.195013+00:00",
+          changed_variables: {
+            wait: {
+              remaining: null,
+              trigger: {
+                platform: "state",
+                entity_id: "binary_sensor.pauluss_macbook_pro_camera_in_use",
+                from_state: {
+                  entity_id: "binary_sensor.pauluss_macbook_pro_camera_in_use",
+                  state: "on",
+                  attributes: {
+                    friendly_name: "Paulus’s MacBook Pro Camera In Use",
+                    icon: "mdi:camera",
+                  },
+                  last_changed: "2021-03-14T06:07:01.762009+00:00",
+                  last_updated: "2021-03-14T06:07:01.762009+00:00",
+                  context: {
+                    id: "e22ddfd5f11dc4aad9a52fc10dab613b",
+                    parent_id: null,
+                    user_id: null,
+                  },
+                },
+                to_state: {
+                  entity_id: "binary_sensor.pauluss_macbook_pro_camera_in_use",
+                  state: "off",
+                  attributes: {
+                    friendly_name: "Paulus’s MacBook Pro Camera In Use",
+                    icon: "mdi:camera-off",
+                  },
+                  last_changed: "2021-03-14T06:07:53.186755+00:00",
+                  last_updated: "2021-03-14T06:07:53.186755+00:00",
+                  context: {
+                    id: "b2308cc91d509ea8e0c623331ab178d6",
+                    parent_id: null,
+                    user_id: null,
+                  },
+                },
+                for: null,
+                attribute: null,
+                description:
+                  "state of binary_sensor.pauluss_macbook_pro_camera_in_use",
+              },
+            },
+          },
+        },
+      ],
+      "action/3": [
+        {
+          path: "action/3",
+          timestamp: "2021-03-14T06:07:53.196014+00:00",
+        },
+      ],
+    },
+    config: {
+      mode: "restart",
+      max_exceeded: "silent",
+      trigger: [
+        {
+          platform: "state",
+          entity_id: "binary_sensor.pauluss_macbook_pro_camera_in_use",
+          from: "off",
+          to: "on",
+        },
+      ],
+      action: [
+        {
+          service: "light.turn_on",
+          target: {
+            entity_id: "light.elgato_key_light_air",
+          },
+        },
+        {
+          wait_for_trigger: [
+            {
+              platform: "state",
+              entity_id: "binary_sensor.pauluss_macbook_pro_camera_in_use",
+              from: "on",
+              to: "off",
+            },
+          ],
+        },
+        {
+          delay: 0,
+        },
+        {
+          service: "light.turn_off",
+          target: {
+            entity_id: "light.elgato_key_light_air",
+          },
+        },
+      ],
+      id: "1614732497392",
+      alias: "Auto Elgato",
+      description: "",
+    },
+    context: {
+      id: "43b6ee9293a551c5cc14e8eb60af54ba",
+      parent_id: "e22ddfd5f11dc4aad9a52fc10dab613b",
+      user_id: null,
+    },
+    script_execution: "finished",
+  },
+  logbookEntries: [
+    {
+      name: "Auto Elgato",
+      message:
+        "has been triggered by state of binary_sensor.pauluss_macbook_pro_camera_in_use",
+      source: "state of binary_sensor.pauluss_macbook_pro_camera_in_use",
+      entity_id: "automation.auto_elgato",
+      when: "2021-03-14T06:07:01.768492+00:00",
+      domain: "automation",
+    },
+    {
+      when: "2021-03-14T06:07:01.872187+00:00",
+      name: "Elgato Key Light Air",
+      state: "on",
+      entity_id: "light.elgato_key_light_air",
+      context_entity_id: "automation.auto_elgato",
+      context_entity_id_name: "Auto Elgato",
+      context_event_type: "automation_triggered",
+      context_domain: "automation",
+      context_name: "Auto Elgato",
+    },
+    {
+      when: "2021-03-14T06:07:53.284505+00:00",
+      name: "Elgato Key Light Air",
+      state: "off",
+      entity_id: "light.elgato_key_light_air",
+      context_entity_id: "automation.auto_elgato",
+      context_entity_id_name: "Auto Elgato",
+      context_event_type: "automation_triggered",
+      context_domain: "automation",
+      context_name: "Auto Elgato",
+    },
+  ],
+};

gallery/src/data/traces/types.ts

@@ -0,0 +1,7 @@
+import { AutomationTraceExtended } from "../../../../src/data/trace";
+import { LogbookEntry } from "../../../../src/data/logbook";
+
+export interface DemoTrace {
+  trace: AutomationTraceExtended;
+  logbookEntries: LogbookEntry[];
+}

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

@@ -0,0 +1,102 @@
+import { safeDump } from "js-yaml";
+import {
+  customElement,
+  html,
+  css,
+  LitElement,
+  TemplateResult,
+  property,
+} from "lit-element";
+import "../../../src/components/ha-card";
+import { describeAction } from "../../../src/data/script_i18n";
+import { provideHass } from "../../../src/fake_data/provide_hass";
+import { HomeAssistant } from "../../../src/types";
+
+const actions = [
+  { wait_template: "{{ true }}", alias: "Something with an alias" },
+  { delay: "0:05" },
+  { wait_template: "{{ true }}" },
+  {
+    condition: "template",
+    value_template: "{{ true }}",
+  },
+  { event: "happy_event" },
+  {
+    device_id: "abcdefgh",
+    domain: "plex",
+    entity_id: "media_player.kitchen",
+  },
+  { scene: "scene.kitchen_morning" },
+  {
+    wait_for_trigger: [
+      {
+        platform: "state",
+        entity_id: "input_boolean.toggle_1",
+      },
+    ],
+  },
+  {
+    variables: {
+      hello: "world",
+    },
+  },
+  {
+    service: "input_boolean.toggle",
+    target: {
+      entity_id: "input_boolean.toggle_4",
+    },
+  },
+];
+
+@customElement("demo-automation-describe-action")
+export class DemoAutomationDescribeAction extends LitElement {
+  @property({ attribute: false }) hass!: HomeAssistant;
+
+  protected render(): TemplateResult {
+    if (!this.hass) {
+      return html``;
+    }
+    return html`
+      <ha-card header="Actions">
+        ${actions.map(
+          (conf) => html`
+            <div class="action">
+              <span>${describeAction(this.hass, conf as any)}</span>
+              <pre>${safeDump(conf)}</pre>
+            </div>
+          `
+        )}
+      </ha-card>
+    `;
+  }
+
+  protected firstUpdated(changedProps) {
+    super.firstUpdated(changedProps);
+    const hass = provideHass(this);
+    hass.updateTranslations(null, "en");
+  }
+
+  static get styles() {
+    return css`
+      ha-card {
+        max-width: 600px;
+        margin: 24px auto;
+      }
+      .action {
+        padding: 16px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+      span {
+        margin-right: 16px;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-automation-describe-action": DemoAutomationDescribeAction;
+  }
+}

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

@@ -0,0 +1,65 @@
+import { safeDump } from "js-yaml";
+import {
+  customElement,
+  html,
+  css,
+  LitElement,
+  TemplateResult,
+} from "lit-element";
+import "../../../src/components/ha-card";
+import { describeCondition } from "../../../src/data/automation_i18n";
+
+const conditions = [
+  { condition: "and" },
+  { condition: "not" },
+  { condition: "or" },
+  { condition: "state" },
+  { condition: "numeric_state" },
+  { condition: "sun", after: "sunset" },
+  { condition: "sun", after: "sunrise" },
+  { condition: "zone" },
+  { condition: "time" },
+  { condition: "template" },
+];
+
+@customElement("demo-automation-describe-condition")
+export class DemoAutomationDescribeCondition extends LitElement {
+  protected render(): TemplateResult {
+    return html`
+      <ha-card header="Conditions">
+        ${conditions.map(
+          (conf) => html`
+            <div class="condition">
+              <span>${describeCondition(conf as any)}</span>
+              <pre>${safeDump(conf)}</pre>
+            </div>
+          `
+        )}
+      </ha-card>
+    `;
+  }
+
+  static get styles() {
+    return css`
+      ha-card {
+        max-width: 600px;
+        margin: 24px auto;
+      }
+      .condition {
+        padding: 16px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+      span {
+        margin-right: 16px;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-automation-describe-condition": DemoAutomationDescribeCondition;
+  }
+}

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

@@ -0,0 +1,68 @@
+import { safeDump } from "js-yaml";
+import {
+  customElement,
+  html,
+  css,
+  LitElement,
+  TemplateResult,
+} from "lit-element";
+import "../../../src/components/ha-card";
+import { describeTrigger } from "../../../src/data/automation_i18n";
+
+const triggers = [
+  { platform: "state" },
+  { platform: "mqtt" },
+  { platform: "geo_location" },
+  { platform: "homeassistant" },
+  { platform: "numeric_state" },
+  { platform: "sun" },
+  { platform: "time_pattern" },
+  { platform: "webhook" },
+  { platform: "zone" },
+  { platform: "tag" },
+  { platform: "time" },
+  { platform: "template" },
+  { platform: "event" },
+];
+
+@customElement("demo-automation-describe-trigger")
+export class DemoAutomationDescribeTrigger extends LitElement {
+  protected render(): TemplateResult {
+    return html`
+      <ha-card header="Triggers">
+        ${triggers.map(
+          (conf) => html`
+            <div class="trigger">
+              <span>${describeTrigger(conf as any)}</span>
+              <pre>${safeDump(conf)}</pre>
+            </div>
+          `
+        )}
+      </ha-card>
+    `;
+  }
+
+  static get styles() {
+    return css`
+      ha-card {
+        max-width: 600px;
+        margin: 24px auto;
+      }
+      .trigger {
+        padding: 16px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+      span {
+        margin-right: 16px;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-automation-describe-trigger": DemoAutomationDescribeTrigger;
+  }
+}

gallery/src/demos/demo-automation-trace-timeline.ts

@@ -0,0 +1,87 @@
+import {
+  customElement,
+  html,
+  css,
+  LitElement,
+  TemplateResult,
+  property,
+} from "lit-element";
+import "../../../src/components/ha-card";
+import "../../../src/components/trace/hat-script-graph";
+import "../../../src/components/trace/hat-trace-timeline";
+import { provideHass } from "../../../src/fake_data/provide_hass";
+import { HomeAssistant } from "../../../src/types";
+import { mockDemoTrace } from "../data/traces/mock-demo-trace";
+import { DemoTrace } from "../data/traces/types";
+
+const traces: DemoTrace[] = [
+  mockDemoTrace({ state: "running" }),
+  mockDemoTrace({ state: "debugged" }),
+  mockDemoTrace({ state: "stopped", script_execution: "failed_conditions" }),
+  mockDemoTrace({ state: "stopped", script_execution: "failed_single" }),
+  mockDemoTrace({ state: "stopped", script_execution: "failed_max_runs" }),
+  mockDemoTrace({ state: "stopped", script_execution: "finished" }),
+  mockDemoTrace({ state: "stopped", script_execution: "aborted" }),
+  mockDemoTrace({
+    state: "stopped",
+    script_execution: "error",
+    error: 'Variable "beer" cannot be None',
+  }),
+  mockDemoTrace({ state: "stopped", script_execution: "cancelled" }),
+];
+
+@customElement("demo-automation-trace-timeline")
+export class DemoAutomationTraceTimeline extends LitElement {
+  @property({ attribute: false }) hass?: HomeAssistant;
+
+  protected render(): TemplateResult {
+    if (!this.hass) {
+      return html``;
+    }
+    return html`
+      ${traces.map(
+        (trace) => html`
+          <ha-card .header=${trace.trace.config.alias}>
+            <div class="card-content">
+              <hat-trace-timeline
+                .hass=${this.hass}
+                .trace=${trace.trace}
+                .logbookEntries=${trace.logbookEntries}
+              ></hat-trace-timeline>
+              <button @click=${() => console.log(trace)}>Log trace</button>
+            </div>
+          </ha-card>
+        `
+      )}
+    `;
+  }
+
+  protected firstUpdated(changedProps) {
+    super.firstUpdated(changedProps);
+    const hass = provideHass(this);
+    hass.updateTranslations(null, "en");
+  }
+
+  static get styles() {
+    return css`
+      ha-card {
+        max-width: 600px;
+        margin: 24px;
+      }
+      .card-content {
+        display: flex;
+      }
+      button {
+        position: absolute;
+        top: 0;
+        right: 0;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-automation-trace-timeline": DemoAutomationTraceTimeline;
+  }
+}

gallery/src/demos/demo-automation-trace.ts

@@ -0,0 +1,98 @@
+import {
+  customElement,
+  html,
+  css,
+  LitElement,
+  TemplateResult,
+  internalProperty,
+  property,
+} from "lit-element";
+import "../../../src/components/ha-card";
+import "../../../src/components/trace/hat-script-graph";
+import "../../../src/components/trace/hat-trace-timeline";
+import { provideHass } from "../../../src/fake_data/provide_hass";
+import { HomeAssistant } from "../../../src/types";
+import { DemoTrace } from "../data/traces/types";
+import { basicTrace } from "../data/traces/basic_trace";
+import { motionLightTrace } from "../data/traces/motion-light-trace";
+
+const traces: DemoTrace[] = [basicTrace, motionLightTrace];
+
+@customElement("demo-automation-trace")
+export class DemoAutomationTrace extends LitElement {
+  @property({ attribute: false }) hass?: HomeAssistant;
+
+  @internalProperty() private _selected = {};
+
+  protected render(): TemplateResult {
+    if (!this.hass) {
+      return html``;
+    }
+    return html`
+      ${traces.map(
+        (trace, idx) => html`
+          <ha-card .header=${trace.trace.config.alias}>
+            <div class="card-content">
+              <hat-script-graph
+                .trace=${trace.trace}
+                .selected=${this._selected[idx]}
+                @graph-node-selected=${(ev) => {
+                  this._selected = { ...this._selected, [idx]: ev.detail.path };
+                }}
+              ></hat-script-graph>
+              <hat-trace-timeline
+                allowPick
+                .hass=${this.hass}
+                .trace=${trace.trace}
+                .logbookEntries=${trace.logbookEntries}
+                .selectedPath=${this._selected[idx]}
+                @value-changed=${(ev) => {
+                  this._selected = {
+                    ...this._selected,
+                    [idx]: ev.detail.value,
+                  };
+                }}
+              ></hat-trace-timeline>
+              <button @click=${() => console.log(trace)}>Log trace</button>
+            </div>
+          </ha-card>
+        `
+      )}
+    `;
+  }
+
+  protected firstUpdated(changedProps) {
+    super.firstUpdated(changedProps);
+    const hass = provideHass(this);
+    hass.updateTranslations(null, "en");
+  }
+
+  static get styles() {
+    return css`
+      ha-card {
+        max-width: 600px;
+        margin: 24px;
+      }
+      .card-content {
+        display: flex;
+      }
+      .card-content > * {
+        margin-right: 16px;
+      }
+      .card-content > *:last-child {
+        margin-right: 0;
+      }
+      button {
+        position: absolute;
+        top: 0;
+        right: 0;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-automation-trace": DemoAutomationTrace;
+  }
+}

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

@@ -0,0 +1,350 @@
+import {
+  customElement,
+  html,
+  css,
+  internalProperty,
+  LitElement,
+  TemplateResult,
+  property,
+} from "lit-element";
+import "../../../src/components/ha-formfield";
+import "../../../src/components/ha-switch";
+
+import { IntegrationManifest } from "../../../src/data/integration";
+
+import { provideHass } from "../../../src/fake_data/provide_hass";
+import { HomeAssistant } from "../../../src/types";
+import "../../../src/panels/config/integrations/ha-integration-card";
+import "../../../src/panels/config/integrations/ha-ignored-config-entry-card";
+import "../../../src/panels/config/integrations/ha-config-flow-card";
+import type {
+  ConfigEntryExtended,
+  DataEntryFlowProgressExtended,
+} from "../../../src/panels/config/integrations/ha-config-integrations";
+import { DeviceRegistryEntry } from "../../../src/data/device_registry";
+import { EntityRegistryEntry } from "../../../src/data/entity_registry";
+import { classMap } from "lit-html/directives/class-map";
+
+const createConfigEntry = (
+  title: string,
+  override: Partial<ConfigEntryExtended> = {}
+): ConfigEntryExtended => ({
+  entry_id: title,
+  domain: "esphome",
+  localized_domain_name: "ESPHome",
+  title,
+  source: "zeroconf",
+  state: "loaded",
+  connection_class: "local_push",
+  supports_options: false,
+  supports_unload: true,
+  disabled_by: null,
+  reason: null,
+  ...override,
+});
+
+const createManifest = (
+  isCustom: boolean,
+  isCloud: boolean,
+  name = "ESPHome"
+): IntegrationManifest => ({
+  name,
+  domain: "esphome",
+  is_built_in: !isCustom,
+  config_flow: false,
+  documentation: "https://www.home-assistant.io/integrations/esphome/",
+  iot_class: isCloud ? "cloud_polling" : "local_polling",
+});
+
+const loadedEntry = createConfigEntry("Loaded");
+const nameAsDomainEntry = createConfigEntry("ESPHome");
+const longNameEntry = createConfigEntry(
+  "Entry with a super long name that is going to the next line"
+);
+const configPanelEntry = createConfigEntry("Config Panel", {
+  domain: "mqtt",
+  localized_domain_name: "MQTT",
+});
+const optionsFlowEntry = createConfigEntry("Options Flow", {
+  supports_options: true,
+});
+const setupErrorEntry = createConfigEntry("Setup Error", {
+  state: "setup_error",
+});
+const migrationErrorEntry = createConfigEntry("Migration Error", {
+  state: "migration_error",
+});
+const setupRetryEntry = createConfigEntry("Setup Retry", {
+  state: "setup_retry",
+});
+const setupRetryReasonEntry = createConfigEntry("Setup Retry", {
+  state: "setup_retry",
+  reason: "connection_error",
+});
+const setupRetryReasonMissingKeyEntry = createConfigEntry("Setup Retry", {
+  state: "setup_retry",
+  reason: "resolve_error",
+});
+const failedUnloadEntry = createConfigEntry("Failed Unload", {
+  state: "failed_unload",
+});
+const notLoadedEntry = createConfigEntry("Not Loaded", { state: "not_loaded" });
+const disabledEntry = createConfigEntry("Disabled", {
+  state: "not_loaded",
+  disabled_by: "user",
+});
+const disabledFailedUnloadEntry = createConfigEntry(
+  "Disabled - Failed Unload",
+  {
+    state: "failed_unload",
+    disabled_by: "user",
+  }
+);
+
+const configFlows: DataEntryFlowProgressExtended[] = [
+  {
+    flow_id: "adbb401329d8439ebb78ef29837826a8",
+    handler: "roku",
+    context: {
+      source: "ssdp",
+      unique_id: "YF008D862864",
+      title_placeholders: {
+        name: "Living room Roku",
+      },
+    },
+    step_id: "discovery_confirm",
+    localized_title: "Living room Roku",
+  },
+  {
+    flow_id: "adbb401329d8439ebb78ef29837826a8",
+    handler: "hue",
+    context: {
+      source: "reauth",
+      unique_id: "YF008D862864",
+      title_placeholders: {
+        name: "Living room Roku",
+      },
+    },
+    step_id: "discovery_confirm",
+    localized_title: "Philips Hue",
+  },
+];
+
+const configEntries: Array<{
+  items: ConfigEntryExtended[];
+  is_custom?: boolean;
+  disabled?: boolean;
+  highlight?: string;
+}> = [
+  { items: [loadedEntry] },
+  { items: [configPanelEntry] },
+  { items: [optionsFlowEntry] },
+  { items: [nameAsDomainEntry] },
+  { items: [longNameEntry] },
+  { items: [setupErrorEntry] },
+  { items: [migrationErrorEntry] },
+  { items: [setupRetryEntry] },
+  { items: [setupRetryReasonEntry] },
+  { items: [setupRetryReasonMissingKeyEntry] },
+  { items: [failedUnloadEntry] },
+  { items: [notLoadedEntry] },
+  {
+    items: [
+      loadedEntry,
+      setupErrorEntry,
+      migrationErrorEntry,
+      longNameEntry,
+      setupRetryEntry,
+      failedUnloadEntry,
+      notLoadedEntry,
+      disabledEntry,
+      nameAsDomainEntry,
+      configPanelEntry,
+      optionsFlowEntry,
+    ],
+  },
+  { disabled: true, items: [disabledEntry] },
+  { disabled: true, items: [disabledFailedUnloadEntry] },
+  {
+    disabled: true,
+    items: [disabledEntry, disabledFailedUnloadEntry],
+  },
+  {
+    items: [loadedEntry, configPanelEntry],
+    highlight: "Loaded",
+  },
+];
+
+const createEntityRegistryEntries = (
+  item: ConfigEntryExtended
+): EntityRegistryEntry[] => [
+  {
+    config_entry_id: item.entry_id,
+    device_id: "mock-device-id",
+    area_id: null,
+    disabled_by: null,
+    entity_id: "binary_sensor.updater",
+    name: null,
+    icon: null,
+    platform: "updater",
+  },
+];
+
+const createDeviceRegistryEntries = (
+  item: ConfigEntryExtended
+): DeviceRegistryEntry[] => [
+  {
+    entry_type: null,
+    config_entries: [item.entry_id],
+    connections: [],
+    manufacturer: "ESPHome",
+    model: "Mock Device",
+    name: "Tag Reader",
+    sw_version: null,
+    id: "mock-device-id",
+    identifiers: [],
+    via_device_id: null,
+    area_id: null,
+    name_by_user: null,
+    disabled_by: null,
+  },
+];
+
+@customElement("demo-integration-card")
+export class DemoIntegrationCard extends LitElement {
+  @property({ attribute: false }) hass?: HomeAssistant;
+
+  @internalProperty() isCustomIntegration = false;
+
+  @internalProperty() isCloud = false;
+
+  protected render(): TemplateResult {
+    if (!this.hass) {
+      return html``;
+    }
+    return html`
+      <div class="container">
+        <div class="filters">
+          <ha-formfield label="Custom Integration">
+            <ha-switch @change=${this._toggleCustomIntegration}></ha-switch>
+          </ha-formfield>
+          <ha-formfield label="Relies on cloud">
+            <ha-switch @change=${this._toggleCloud}></ha-switch>
+          </ha-formfield>
+        </div>
+
+        <ha-ignored-config-entry-card
+          .hass=${this.hass}
+          .entry=${createConfigEntry("Ignored Entry")}
+          .manifest=${createManifest(this.isCustomIntegration, this.isCloud)}
+        ></ha-ignored-config-entry-card>
+
+        ${configFlows.map(
+          (flow) => html`
+            <ha-config-flow-card
+              .hass=${this.hass}
+              .flow=${flow}
+              .manifest=${createManifest(
+                this.isCustomIntegration,
+                this.isCloud,
+                flow.handler === "roku" ? "Roku" : "Philips Hue"
+              )}
+            ></ha-config-flow-card>
+          `
+        )}
+        ${configEntries.map(
+          (info) => html`
+            <ha-integration-card
+              class=${classMap({
+                highlight: info.highlight !== undefined,
+              })}
+              .hass=${this.hass}
+              domain="esphome"
+              .items=${info.items}
+              .manifest=${createManifest(
+                this.isCustomIntegration,
+                this.isCloud
+              )}
+              .entityRegistryEntries=${createEntityRegistryEntries(
+                info.items[0]
+              )}
+              .deviceRegistryEntries=${createDeviceRegistryEntries(
+                info.items[0]
+              )}
+              ?disabled=${info.disabled}
+              .selectedConfigEntryId=${info.highlight}
+            ></ha-integration-card>
+          `
+        )}
+      </div>
+      <div class="container">
+        <!-- One that is standalone to see how it increases height if height
+           not defined by other cards. -->
+        <ha-integration-card
+          .hass=${this.hass}
+          domain="esphome"
+          .items=${[
+            loadedEntry,
+            setupErrorEntry,
+            migrationErrorEntry,
+            setupRetryEntry,
+            failedUnloadEntry,
+          ]}
+          .manifest=${createManifest(this.isCustomIntegration, this.isCloud)}
+          .entityRegistryEntries=${createEntityRegistryEntries(loadedEntry)}
+          .deviceRegistryEntries=${createDeviceRegistryEntries(loadedEntry)}
+        ></ha-integration-card>
+      </div>
+    `;
+  }
+
+  protected firstUpdated(changedProps) {
+    super.firstUpdated(changedProps);
+    const hass = provideHass(this);
+    hass.updateTranslations(null, "en");
+    hass.updateTranslations("config", "en");
+    // Normally this string is loaded from backend
+    hass.addTranslations(
+      {
+        "component.esphome.config.error.connection_error":
+          "Can't connect to ESP. Please make sure your YAML file contains an 'api:' line.",
+      },
+      "en"
+    );
+  }
+
+  private _toggleCustomIntegration() {
+    this.isCustomIntegration = !this.isCustomIntegration;
+  }
+
+  private _toggleCloud() {
+    this.isCloud = !this.isCloud;
+  }
+
+  static get styles() {
+    return css`
+      .container {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+        grid-gap: 16px 16px;
+        padding: 8px 16px 16px;
+        margin-bottom: 64px;
+      }
+
+      .container > * {
+        max-width: 500px;
+      }
+
+      ha-formfield {
+        margin: 8px 0;
+        display: block;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-integration-card": DemoIntegrationCard;
+  }
+}

gallery/src/demos/demo-more-info-light.ts

@@ -81,4 +81,8 @@ class DemoMoreInfoLight extends LitElement {
   }
 }
 
-customElements.define("demo-more-info-light", DemoMoreInfoLight);
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-more-info-light": DemoMoreInfoLight;
+  }
+}

gallery/src/ha-gallery.js

@@ -111,29 +111,9 @@ class HaGallery extends PolymerElement {
                 </template>
               </ha-card>
 
-              <ha-card header="More Info Demos">
-                <div class="card-content intro">
-                  <p>
-                    More info screens show up when an entity is clicked.
-                  </p>
-                </div>
-                <template is="dom-repeat" items="[[_moreInfoDemos]]">
-                  <a href="#[[item]]">
-                    <paper-item>
-                      <paper-item-body>{{ item }}</paper-item-body>
-                      <ha-icon icon="hass:chevron-right"></ha-icon>
-                    </paper-item>
-                  </a>
-                </template>
-              </ha-card>
-
-              <ha-card header="Util Demos">
-                <div class="card-content intro">
-                  <p>
-                    Test pages for our utility functions.
-                  </p>
-                </div>
-                <template is="dom-repeat" items="[[_utilDemos]]">
+              <ha-card header="Other Demos">
+                <div class="card-content intro"></div>
+                <template is="dom-repeat" items="[[_restDemos]]">
                   <a href="#[[item]]">
                     <paper-item>
                       <paper-item-body>{{ item }}</paper-item-body>
@@ -178,13 +158,9 @@ class HaGallery extends PolymerElement {
         type: Array,
         computed: "_computeLovelace(_demos)",
       },
-      _moreInfoDemos: {
+      _restDemos: {
         type: Array,
-        computed: "_computeMoreInfos(_demos)",
-      },
-      _utilDemos: {
-        type: Array,
-        computed: "_computeUtil(_demos)",
+        computed: "_computeRest(_demos)",
       },
     };
   }
@@ -237,12 +213,8 @@ class HaGallery extends PolymerElement {
     return demos.filter((demo) => demo.includes("hui"));
   }
 
-  _computeMoreInfos(demos) {
-    return demos.filter((demo) => demo.includes("more-info"));
-  }
-
-  _computeUtil(demos) {
-    return demos.filter((demo) => demo.includes("util"));
+  _computeRest(demos) {
+    return demos.filter((demo) => !demo.includes("hui"));
   }
 }
 

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

@@ -15,6 +15,7 @@ import {
   HassioAddonInfo,
   HassioAddonRepository,
 } from "../../../src/data/hassio/addon";
+import { Supervisor } from "../../../src/data/supervisor/supervisor";
 import { HomeAssistant } from "../../../src/types";
 import "../components/hassio-card-content";
 import { filterAndSort } from "../components/hassio-filter-addons";
@@ -23,6 +24,8 @@ import { hassioStyle } from "../resources/hassio-style";
 class HassioAddonRepositoryEl extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
+  @property({ attribute: false }) public supervisor!: Supervisor;
+
   @property({ attribute: false }) public repo!: HassioAddonRepository;
 
   @property({ attribute: false }) public addons!: HassioAddonInfo[];
@@ -54,7 +57,11 @@ class HassioAddonRepositoryEl extends LitElement {
       return html`
         <div class="content">
           <p class="description">
-            No results found in "${repo.name}."
+            ${this.supervisor.localize(
+              "store.no_results_found",
+              "repository",
+              repo.name
+            )}
           </p>
         </div>
       `;
@@ -83,11 +90,13 @@ class HassioAddonRepositoryEl extends LitElement {
                       : mdiPuzzle}
                     .iconTitle=${addon.installed
                       ? addon.update_available
-                        ? "New version available"
-                        : "Add-on is installed"
+                        ? this.supervisor.localize(
+                            "common.new_version_available"
+                          )
+                        : this.supervisor.localize("addon.installed")
                       : addon.available
-                      ? "Add-on is not installed"
-                      : "Add-on is not available on your system"}
+                      ? this.supervisor.localize("addon.not_installed")
+                      : this.supervisor.localize("addon.not_available")}
                     .iconClass=${addon.installed
                       ? addon.update_available
                         ? "update"

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

@@ -14,7 +14,9 @@ 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 { navigate } from "../../../src/common/navigate";
 import "../../../src/common/search/search-input";
+import { extractSearchParam } from "../../../src/common/url/search-params";
 import "../../../src/components/ha-button-menu";
 import "../../../src/components/ha-svg-icon";
 import {
@@ -69,20 +71,24 @@ class HassioAddonStore extends LitElement {
     if (this.supervisor.addon.repositories) {
       repos = this.addonRepositories(
         this.supervisor.addon.repositories,
-        this.supervisor.addon.addons
+        this.supervisor.addon.addons,
+        this._filter
       );
     }
 
     return html`
       <hass-tabs-subpage
         .hass=${this.hass}
+        .localizeFunc=${this.supervisor.localize}
         .narrow=${this.narrow}
         .route=${this.route}
-        hassio
-        main-page
         .tabs=${supervisorTabs}
+        main-page
+        supervisor
       >
-        <span slot="header">Add-on Store</span>
+        <span slot="header">
+          ${this.supervisor.localize("panel.store")}
+        </span>
         <ha-button-menu
           corner="BOTTOM_START"
           slot="toolbar-icon"
@@ -92,15 +98,15 @@ class HassioAddonStore extends LitElement {
             <ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon>
           </mwc-icon-button>
           <mwc-list-item>
-            Repositories
+            ${this.supervisor.localize("store.repositories")}
           </mwc-list-item>
           <mwc-list-item>
-            Reload
+            ${this.supervisor.localize("common.reload")}
           </mwc-list-item>
           ${this.hass.userData?.showAdvanced &&
           atLeastVersion(this.hass.config.version, 0, 117)
             ? html`<mwc-list-item>
-                Registries
+                ${this.supervisor.localize("store.registries")}
               </mwc-list-item>`
             : ""}
         </ha-button-menu>
@@ -121,11 +127,9 @@ class HassioAddonStore extends LitElement {
         ${!this.hass.userData?.showAdvanced
           ? html`
               <div class="advanced">
-                Missing add-ons? Enable advanced mode on
                 <a href="/profile" target="_top">
-                  your profile page
+                  ${this.supervisor.localize("store.missing_addons")}
                 </a>
-                .
               </div>
             `
           : ""}
@@ -135,12 +139,22 @@ class HassioAddonStore extends LitElement {
 
   protected firstUpdated(changedProps: PropertyValues) {
     super.firstUpdated(changedProps);
+    const repositoryUrl = extractSearchParam("repository_url");
+    navigate(this, "/hassio/store", true);
+    if (repositoryUrl) {
+      this._manageRepositories(repositoryUrl);
+    }
+
     this.addEventListener("hass-api-called", (ev) => this.apiCalled(ev));
     this._loadData();
   }
 
   private addonRepositories = memoizeOne(
-    (repositories: HassioAddonRepository[], addons: HassioAddonInfo[]) => {
+    (
+      repositories: HassioAddonRepository[],
+      addons: HassioAddonInfo[],
+      filter?: string
+    ) => {
       return repositories.sort(sortRepos).map((repo) => {
         const filteredAddons = addons.filter(
           (addon) => addon.repository === repo.slug
@@ -152,7 +166,8 @@ class HassioAddonStore extends LitElement {
                 .hass=${this.hass}
                 .repo=${repo}
                 .addons=${filteredAddons}
-                .filter=${this._filter!}
+                .filter=${filter!}
+                .supervisor=${this.supervisor}
               ></hassio-addon-repository>
             `
           : html``;
@@ -163,7 +178,7 @@ class HassioAddonStore extends LitElement {
   private _handleAction(ev: CustomEvent<ActionDetail>) {
     switch (ev.detail.index) {
       case 0:
-        this._manageRepositories();
+        this._manageRepositoriesClicked();
         break;
       case 1:
         this.refreshData();
@@ -180,20 +195,26 @@ class HassioAddonStore extends LitElement {
     }
   }
 
-  private async _manageRepositories() {
+  private _manageRepositoriesClicked() {
+    this._manageRepositories();
+  }
+
+  private async _manageRepositories(url?: string) {
     showRepositoriesDialog(this, {
-      repos: this.supervisor.addon.repositories,
-      loadData: () => this._loadData(),
+      supervisor: this.supervisor,
+      url,
     });
   }
 
   private async _manageRegistries() {
-    showRegistriesDialog(this);
+    showRegistriesDialog(this, { supervisor: this.supervisor });
   }
 
   private async _loadData() {
-    fireEvent(this, "supervisor-store-refresh", { store: "addon" });
-    fireEvent(this, "supervisor-store-refresh", { store: "supervisor" });
+    fireEvent(this, "supervisor-collection-refresh", { collection: "addon" });
+    fireEvent(this, "supervisor-collection-refresh", {
+      collection: "supervisor",
+    });
   }
 
   private async _filterChanged(e) {

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

@@ -25,6 +25,7 @@ import {
   fetchHassioHardwareAudio,
   HassioHardwareAudioDevice,
 } from "../../../../src/data/hassio/hardware";
+import { Supervisor } from "../../../../src/data/supervisor/supervisor";
 import { haStyle } from "../../../../src/resources/styles";
 import { HomeAssistant } from "../../../../src/types";
 import { suggestAddonRestart } from "../../dialogs/suggestAddonRestart";
@@ -34,6 +35,8 @@ import { hassioStyle } from "../../resources/hassio-style";
 class HassioAddonAudio extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
+  @property({ attribute: false }) public supervisor!: Supervisor;
+
   @property({ attribute: false }) public addon!: HassioAddonDetails;
 
   @internalProperty() private _error?: string;
@@ -48,12 +51,16 @@ class HassioAddonAudio extends LitElement {
 
   protected render(): TemplateResult {
     return html`
-      <ha-card header="Audio">
+      <ha-card
+        .header=${this.supervisor.localize("addon.configuration.audio.header")}
+      >
         <div class="card-content">
           ${this._error ? html` <div class="errors">${this._error}</div> ` : ""}
 
           <paper-dropdown-menu
-            label="Input"
+            .label=${this.supervisor.localize(
+              "addon.configuration.audio.input"
+            )}
             @iron-select=${this._setInputDevice}
           >
             <paper-listbox
@@ -64,15 +71,17 @@ class HassioAddonAudio extends LitElement {
               ${this._inputDevices &&
               this._inputDevices.map((item) => {
                 return html`
-                  <paper-item device=${item.device || ""}
-                    >${item.name}</paper-item
-                  >
+                  <paper-item device=${item.device || ""}>
+                    ${item.name}
+                  </paper-item>
                 `;
               })}
             </paper-listbox>
           </paper-dropdown-menu>
           <paper-dropdown-menu
-            label="Output"
+            .label=${this.supervisor.localize(
+              "addon.configuration.audio.output"
+            )}
             @iron-select=${this._setOutputDevice}
           >
             <paper-listbox
@@ -93,7 +102,7 @@ class HassioAddonAudio extends LitElement {
         </div>
         <div class="card-actions">
           <ha-progress-button @click=${this._saveSettings}>
-            Save
+            ${this.supervisor.localize("common.save")}
           </ha-progress-button>
         </div>
       </ha-card>
@@ -152,7 +161,7 @@ class HassioAddonAudio extends LitElement {
 
     const noDevice: HassioHardwareAudioDevice = {
       device: "default",
-      name: "Default",
+      name: this.supervisor.localize("addon.configuration.audio.default"),
     };
 
     try {
@@ -189,7 +198,7 @@ class HassioAddonAudio extends LitElement {
     try {
       await setHassioAddonOption(this.hass, this.addon.slug, data);
       if (this.addon?.state === "started") {
-        await suggestAddonRestart(this, this.hass, this.addon);
+        await suggestAddonRestart(this, this.hass, this.supervisor, this.addon);
       }
     } catch {
       this._error = "Failed to set addon audio device";

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

@@ -9,6 +9,7 @@ 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";
@@ -20,26 +21,28 @@ import "./hassio-addon-network";
 class HassioAddonConfigDashboard extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
+  @property({ attribute: false }) public supervisor!: Supervisor;
+
   @property({ attribute: false }) public addon?: HassioAddonDetails;
 
   protected render(): TemplateResult {
     if (!this.addon) {
       return html`<ha-circular-progress active></ha-circular-progress>`;
     }
-    const hasOptions =
-      this.addon.options && Object.keys(this.addon.options).length;
-    const hasSchema =
-      hasOptions && this.addon.schema && Object.keys(this.addon.schema).length;
+    const hasConfiguration =
+      (this.addon.options && Object.keys(this.addon.options).length) ||
+      (this.addon.schema && Object.keys(this.addon.schema).length);
 
     return html`
       <div class="content">
-        ${hasOptions || hasSchema || this.addon.network || this.addon.audio
+        ${hasConfiguration || this.addon.network || this.addon.audio
           ? html`
-              ${hasOptions || hasSchema
+              ${hasConfiguration
                 ? html`
                     <hassio-addon-config
                       .hass=${this.hass}
                       .addon=${this.addon}
+                      .supervisor=${this.supervisor}
                     ></hassio-addon-config>
                   `
                 : ""}
@@ -48,6 +51,7 @@ class HassioAddonConfigDashboard extends LitElement {
                     <hassio-addon-network
                       .hass=${this.hass}
                       .addon=${this.addon}
+                      .supervisor=${this.supervisor}
                     ></hassio-addon-network>
                   `
                 : ""}
@@ -56,11 +60,12 @@ class HassioAddonConfigDashboard extends LitElement {
                     <hassio-addon-audio
                       .hass=${this.hass}
                       .addon=${this.addon}
+                      .supervisor=${this.supervisor}
                     ></hassio-addon-audio>
                   `
                 : ""}
             `
-          : "This add-on does not expose configuration for you to mess with.... 👋"}
+          : this.supervisor.localize("addon.configuration.no_configuration")}
       </div>
     `;
   }

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

@@ -15,11 +15,15 @@ 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 {
@@ -28,6 +32,7 @@ import {
   setHassioAddonOption,
 } from "../../../../src/data/hassio/addon";
 import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
+import { Supervisor } from "../../../../src/data/supervisor/supervisor";
 import { showConfirmationDialog } from "../../../../src/dialogs/generic/show-dialog-box";
 import { haStyle } from "../../../../src/resources/styles";
 import type { HomeAssistant } from "../../../../src/types";
@@ -42,12 +47,16 @@ class HassioAddonConfig extends LitElement {
 
   @property({ attribute: false }) public hass!: HomeAssistant;
 
+  @property({ attribute: false }) public supervisor!: Supervisor;
+
   @property({ type: Boolean }) private _configHasChanged = false;
 
   @property({ type: Boolean }) private _valid = true;
 
   @internalProperty() private _canShowSchema = false;
 
+  @internalProperty() private _showOptional = false;
+
   @internalProperty() private _error?: string;
 
   @internalProperty() private _options?: Record<string, unknown>;
@@ -56,33 +65,70 @@ class HassioAddonConfig extends LitElement {
 
   @query("ha-yaml-editor") private _editor?: HaYamlEditor;
 
+  public computeLabel = (entry: HaFormSchema): string => {
+    return (
+      this.addon.translations[this.hass.language]?.configuration?.[entry.name]
+        ?.name ||
+      this.addon.translations.en?.configuration?.[entry.name].name ||
+      entry.name
+    );
+  };
+
+  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>
         <div class="header">
-          <h2>Configuration</h2>
+          <h2>
+            ${this.supervisor.localize("addon.configuration.options.header")}
+          </h2>
           <div class="card-menu">
             <ha-button-menu corner="BOTTOM_START" @action=${this._handleAction}>
               <mwc-icon-button slot="trigger">
                 <ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon>
               </mwc-icon-button>
               <mwc-list-item .disabled=${!this._canShowSchema}>
-                ${this._yamlMode ? "Edit in UI" : "Edit in YAML"}
+                ${this._yamlMode
+                  ? this.supervisor.localize(
+                      "addon.configuration.options.edit_in_ui"
+                    )
+                  : this.supervisor.localize(
+                      "addon.configuration.options.edit_in_yaml"
+                    )}
               </mwc-list-item>
               <mwc-list-item class="warning">
-                Reset to defaults
+                ${this.supervisor.localize("common.reset_defaults")}
               </mwc-list-item>
             </ha-button-menu>
           </div>
         </div>
 
         <div class="card-content">
-          ${!this._yamlMode && this._canShowSchema && this.addon.schema
+          ${showForm
             ? html`<ha-form
                 .data=${this._options!}
                 @value-changed=${this._configChanged}
-                .schema=${this.addon.schema}
+                .computeLabel=${this.computeLabel}
+                .schema=${this._showOptional
+                  ? this.addon.schema!
+                  : this._filteredShchema(
+                      this.addon.options,
+                      this.addon.schema!
+                    )}
               ></ha-form>`
             : html` <ha-yaml-editor
                 @value-changed=${this._configChanged}
@@ -92,14 +138,34 @@ class HassioAddonConfig extends LitElement {
           (this._canShowSchema && this.addon.schema) ||
           this._valid
             ? ""
-            : html` <div class="errors">Invalid YAML</div> `}
+            : html`
+                <div class="errors">
+                  ${this.supervisor.localize(
+                    "addon.configuration.options.invalid_yaml"
+                  )}
+                </div>
+              `}
         </div>
+        ${hasHiddenOptions
+          ? html`<ha-formfield
+              class="show-additional"
+              .label=${this.supervisor.localize(
+                "addon.configuration.options.show_unused_optional"
+              )}
+            >
+              <ha-switch
+                @change=${this._toggleOptional}
+                .checked=${this._showOptional}
+              >
+              </ha-switch>
+            </ha-formfield>`
+          : ""}
         <div class="card-actions right">
           <ha-progress-button
             @click=${this._saveTapped}
             .disabled=${!this._configHasChanged || !this._valid}
           >
-            Save
+            ${this.supervisor.localize("common.save")}
           </ha-progress-button>
         </div>
       </ha-card>
@@ -108,12 +174,10 @@ class HassioAddonConfig extends LitElement {
 
   protected firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
-    this._canShowSchema =
-      Object.keys(this.addon.options).length !== 0 &&
-      !this.addon.schema!.find(
-        // @ts-ignore
-        (entry) => !SUPPORTED_UI_TYPES.includes(entry.type) || entry.multiple
-      );
+    this._canShowSchema = !this.addon.schema!.find(
+      // @ts-ignore
+      (entry) => !SUPPORTED_UI_TYPES.includes(entry.type) || entry.multiple
+    );
     this._yamlMode = !this._canShowSchema;
   }
 
@@ -146,6 +210,10 @@ 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;
@@ -162,10 +230,10 @@ class HassioAddonConfig extends LitElement {
     button.progress = true;
 
     const confirmed = await showConfirmationDialog(this, {
-      title: this.addon.name,
-      text: "Are you sure you want to reset all your options?",
-      confirmText: "reset options",
-      dismissText: "no",
+      title: this.supervisor.localize("confirm.reset_options.title"),
+      text: this.supervisor.localize("confirm.reset_options.text"),
+      confirmText: this.supervisor.localize("common.reset_options"),
+      dismissText: this.supervisor.localize("common.cancel"),
     });
 
     if (!confirmed) {
@@ -187,9 +255,11 @@ class HassioAddonConfig extends LitElement {
       };
       fireEvent(this, "hass-api-called", eventdata);
     } catch (err) {
-      this._error = `Failed to reset addon configuration, ${extractApiErrorMessage(
-        err
-      )}`;
+      this._error = this.supervisor.localize(
+        "addon.common.update_available",
+        "error",
+        extractApiErrorMessage(err)
+      );
     }
     button.progress = false;
   }
@@ -213,12 +283,14 @@ class HassioAddonConfig extends LitElement {
       };
       fireEvent(this, "hass-api-called", eventdata);
       if (this.addon?.state === "started") {
-        await suggestAddonRestart(this, this.hass, this.addon);
+        await suggestAddonRestart(this, this.hass, this.supervisor, this.addon);
       }
     } catch (err) {
-      this._error = `Failed to save addon configuration, ${extractApiErrorMessage(
-        err
-      )}`;
+      this._error = this.supervisor.localize(
+        "addon.configuration.options.failed_to_save",
+        "error",
+        extractApiErrorMessage(err)
+      );
     }
     button.progress = false;
   }
@@ -275,6 +347,10 @@ class HassioAddonConfig extends LitElement {
         .card-actions.right {
           justify-content: flex-end;
         }
+
+        .show-additional {
+          padding: 16px;
+        }
       `,
     ];
   }

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

@@ -19,6 +19,7 @@ import {
   setHassioAddonOption,
 } from "../../../../src/data/hassio/addon";
 import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
+import { Supervisor } from "../../../../src/data/supervisor/supervisor";
 import { haStyle } from "../../../../src/resources/styles";
 import { HomeAssistant } from "../../../../src/types";
 import { suggestAddonRestart } from "../../dialogs/suggestAddonRestart";
@@ -38,6 +39,8 @@ interface NetworkItemInput extends PaperInputElement {
 class HassioAddonNetwork extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
+  @property({ attribute: false }) public supervisor!: Supervisor;
+
   @property({ attribute: false }) public addon!: HassioAddonDetails;
 
   @internalProperty() private _error?: string;
@@ -55,16 +58,30 @@ class HassioAddonNetwork extends LitElement {
     }
 
     return html`
-      <ha-card header="Network">
+      <ha-card
+        .header=${this.supervisor.localize(
+          "addon.configuration.network.header"
+        )}
+      >
         <div class="card-content">
           ${this._error ? html` <div class="errors">${this._error}</div> ` : ""}
 
           <table>
             <tbody>
               <tr>
-                <th>Container</th>
-                <th>Host</th>
-                <th>Description</th>
+                <th>
+                  ${this.supervisor.localize(
+                    "addon.configuration.network.container"
+                  )}
+                </th>
+                <th>
+                  ${this.supervisor.localize(
+                    "addon.configuration.network.host"
+                  )}
+                </th>
+                <th>
+                  ${this.supervisor.localize("common.description")}
+                </th>
               </tr>
               ${this._config!.map((item) => {
                 return html`
@@ -73,13 +90,15 @@ class HassioAddonNetwork extends LitElement {
                     <td>
                       <paper-input
                         @value-changed=${this._configChanged}
-                        placeholder="disabled"
+                        placeholder="${this.supervisor.localize(
+                          "addon.configuration.network.disabled"
+                        )}"
                         .value=${item.host ? String(item.host) : ""}
                         .container=${item.container}
                         no-label-float
                       ></paper-input>
                     </td>
-                    <td>${item.description}</td>
+                    <td>${this._computeDescription(item)}</td>
                   </tr>
                 `;
               })}
@@ -88,10 +107,10 @@ class HassioAddonNetwork extends LitElement {
         </div>
         <div class="card-actions">
           <ha-progress-button class="warning" @click=${this._resetTapped}>
-            Reset to defaults
+            ${this.supervisor.localize("common.reset_defaults")}
           </ha-progress-button>
           <ha-progress-button @click=${this._saveTapped}>
-            Save
+            ${this.supervisor.localize("common.save")}
           </ha-progress-button>
         </div>
       </ha-card>
@@ -105,6 +124,15 @@ class HassioAddonNetwork extends LitElement {
     }
   }
 
+  private _computeDescription = (item: NetworkItem): string => {
+    return (
+      this.addon.translations[this.hass.language]?.network?.[item.container]
+        ?.description ||
+      this.addon.translations.en?.network?.[item.container]?.description ||
+      item.description
+    );
+  };
+
   private _setNetworkConfig(): void {
     const network = this.addon.network || {};
     const description = this.addon.network_description || {};
@@ -147,12 +175,14 @@ class HassioAddonNetwork extends LitElement {
       };
       fireEvent(this, "hass-api-called", eventdata);
       if (this.addon?.state === "started") {
-        await suggestAddonRestart(this, this.hass, this.addon);
+        await suggestAddonRestart(this, this.hass, this.supervisor, this.addon);
       }
     } catch (err) {
-      this._error = `Failed to set addon network configuration, ${extractApiErrorMessage(
-        err
-      )}`;
+      this._error = this.supervisor.localize(
+        "addon.failed_to_reset",
+        "error",
+        extractApiErrorMessage(err)
+      );
     }
 
     button.progress = false;
@@ -181,12 +211,14 @@ class HassioAddonNetwork extends LitElement {
       };
       fireEvent(this, "hass-api-called", eventdata);
       if (this.addon?.state === "started") {
-        await suggestAddonRestart(this, this.hass, this.addon);
+        await suggestAddonRestart(this, this.hass, this.supervisor, this.addon);
       }
     } catch (err) {
-      this._error = `Failed to set addon network configuration, ${extractApiErrorMessage(
-        err
-      )}`;
+      this._error = this.supervisor.localize(
+        "addon.failed_to_save",
+        "error",
+        extractApiErrorMessage(err)
+      );
     }
     button.progress = false;
   }

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

@@ -1,3 +1,4 @@
+import "../../../../src/components/ha-card";
 import {
   css,
   CSSResult,
@@ -19,11 +20,14 @@ import "../../../../src/layouts/hass-loading-screen";
 import { haStyle } from "../../../../src/resources/styles";
 import { HomeAssistant } from "../../../../src/types";
 import { hassioStyle } from "../../resources/hassio-style";
+import { Supervisor } from "../../../../src/data/supervisor/supervisor";
 
 @customElement("hassio-addon-documentation-tab")
 class HassioAddonDocumentationDashboard extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
+  @property({ attribute: false }) public supervisor!: Supervisor;
+
   @property({ attribute: false }) public addon?: HassioAddonDetails;
 
   @internalProperty() private _error?: string;
@@ -81,9 +85,11 @@ class HassioAddonDocumentationDashboard extends LitElement {
         this.addon!.slug
       );
     } catch (err) {
-      this._error = `Failed to get addon documentation, ${extractApiErrorMessage(
-        err
-      )}`;
+      this._error = this.supervisor.localize(
+        "addon.documentation.get_logs",
+        "error",
+        extractApiErrorMessage(err)
+      );
     }
   }
 }

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

@@ -21,6 +21,7 @@ import { extractSearchParam } from "../../../src/common/url/search-params";
 import "../../../src/components/ha-circular-progress";
 import {
   fetchHassioAddonInfo,
+  fetchHassioAddonsInfo,
   HassioAddonDetails,
 } from "../../../src/data/hassio/addon";
 import { extractApiErrorMessage } from "../../../src/data/hassio/common";
@@ -79,7 +80,7 @@ class HassioAddonDashboard extends LitElement {
 
     const addonTabs: PageNavigation[] = [
       {
-        name: "Info",
+        translationKey: "addon.panel.info",
         path: `/hassio/addon/${this.addon.slug}/info`,
         iconPath: mdiInformationVariant,
       },
@@ -87,7 +88,7 @@ class HassioAddonDashboard extends LitElement {
 
     if (this.addon.documentation) {
       addonTabs.push({
-        name: "Documentation",
+        translationKey: "addon.panel.documentation",
         path: `/hassio/addon/${this.addon.slug}/documentation`,
         iconPath: mdiFileDocument,
       });
@@ -96,12 +97,12 @@ class HassioAddonDashboard extends LitElement {
     if (this.addon.version) {
       addonTabs.push(
         {
-          name: "Configuration",
+          translationKey: "addon.panel.configuration",
           path: `/hassio/addon/${this.addon.slug}/config`,
           iconPath: mdiCogs,
         },
         {
-          name: "Log",
+          translationKey: "addon.panel.log",
           path: `/hassio/addon/${this.addon.slug}/logs`,
           iconPath: mdiMathLog,
         }
@@ -113,11 +114,12 @@ class HassioAddonDashboard extends LitElement {
     return html`
       <hass-tabs-subpage
         .hass=${this.hass}
+        .localizeFunc=${this.supervisor.localize}
         .narrow=${this.narrow}
         .backPath=${this.addon.version ? "/hassio/dashboard" : "/hassio/store"}
         .route=${route}
-        hassio
         .tabs=${addonTabs}
+        supervisor
       >
         <span slot="header">${this.addon.name}</span>
         <hassio-addon-router
@@ -172,9 +174,17 @@ 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);
+      const requestedAddon = extractSearchParam("addon");
+      if (requestedAddon) {
+        const addonsInfo = await fetchHassioAddonsInfo(this.hass);
+        const validAddon = addonsInfo.addons.some(
+          (addon) => addon.slug === requestedAddon
+        );
+        if (!validAddon) {
+          this._error = this.supervisor.localize("my.error_addon_not_found");
+        } else {
+          navigate(this, `/hassio/addon/${requestedAddon}`, true);
+        }
       }
     }
     this.addEventListener("hass-api-called", (ev) => this._apiCalled(ev));
@@ -190,7 +200,9 @@ class HassioAddonDashboard extends LitElement {
     const path: string = pathSplit[pathSplit.length - 1];
 
     if (["uninstall", "install", "update", "start", "stop"].includes(path)) {
-      fireEvent(this, "supervisor-store-refresh", { store: "supervisor" });
+      fireEvent(this, "supervisor-collection-refresh", {
+        collection: "supervisor",
+      });
     }
 
     if (path === "uninstall") {

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

@@ -25,6 +25,7 @@ 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";
@@ -57,6 +58,7 @@ import {
   fetchHassioStats,
   HassioStats,
 } from "../../../../src/data/hassio/common";
+import { StoreAddon } from "../../../../src/data/supervisor/store";
 import { Supervisor } from "../../../../src/data/supervisor/supervisor";
 import {
   showAlertDialog,
@@ -68,6 +70,7 @@ import { bytesToString } from "../../../../src/util/bytes-to-string";
 import "../../components/hassio-card-content";
 import "../../components/supervisor-metric";
 import { showHassioMarkdownDialog } from "../../dialogs/markdown/show-dialog-hassio-markdown";
+import { showDialogSupervisorUpdate } from "../../dialogs/update/show-dialog-update";
 import { hassioStyle } from "../../resources/hassio-style";
 import { addonArchIsSupported } from "../../util/addon";
 
@@ -77,63 +80,6 @@ const STAGE_ICON = {
   deprecated: mdiExclamationThick,
 };
 
-const PERMIS_DESC = {
-  stage: {
-    title: "Add-on Stage",
-    description: `Add-ons can have one of three stages:\n\n<ha-svg-icon path="${STAGE_ICON.stable}"></ha-svg-icon> **Stable**: These are add-ons ready to be used in production.\n\n<ha-svg-icon path="${STAGE_ICON.experimental}"></ha-svg-icon> **Experimental**: These may contain bugs, and may be unfinished.\n\n<ha-svg-icon path="${STAGE_ICON.deprecated}"></ha-svg-icon> **Deprecated**: These add-ons will no longer receive any updates.`,
-  },
-  rating: {
-    title: "Add-on Security Rating",
-    description:
-      "Home Assistant provides a security rating to each of the add-ons, which indicates the risks involved when using this add-on. The more access an add-on requires on your system, the lower the score, thus raising the possible security risks.\n\nA score is on a scale from 1 to 6. Where 1 is the lowest score (considered the most insecure and highest risk) and a score of 6 is the highest score (considered the most secure and lowest risk).",
-  },
-  host_network: {
-    title: "Host Network",
-    description:
-      "Add-ons usually run in their own isolated network layer, which prevents them from accessing the network of the host operating system. In some cases, this network isolation can limit add-ons in providing their services and therefore, the isolation can be lifted by the add-on author, giving the add-on full access to the network capabilities of the host machine. This gives the add-on more networking capabilities but lowers the security, hence, the security rating of the add-on will be lowered when this option is used by the add-on.",
-  },
-  homeassistant_api: {
-    title: "Home Assistant API Access",
-    description:
-      "This add-on is allowed to access your running Home Assistant instance directly via the Home Assistant API. This mode handles authentication for the add-on as well, which enables an add-on to interact with Home Assistant without the need for additional authentication tokens.",
-  },
-  full_access: {
-    title: "Full Hardware Access",
-    description:
-      "This add-on is given full access to the hardware of your system, by request of the add-on author. Access is comparable to the privileged mode in Docker. Since this opens up possible security risks, this feature impacts the add-on security score negatively.\n\nThis level of access is not granted automatically and needs to be confirmed by you. To do this, you need to disable the protection mode on the add-on manually. Only disable the protection mode if you know, need AND trust the source of this add-on.",
-  },
-  hassio_api: {
-    title: "Supervisor API Access",
-    description:
-      "The add-on was given access to the Supervisor API, by request of the add-on author. By default, the add-on can access general version information of your system. When the add-on requests 'manager' or 'admin' level access to the API, it will gain access to control multiple parts of your Home Assistant system. This permission is indicated by this badge and will impact the security score of the addon negatively.",
-  },
-  docker_api: {
-    title: "Full Docker Access",
-    description:
-      "The add-on author has requested the add-on to have management access to the Docker instance running on your system. This mode gives the add-on full access and control to your entire Home Assistant system, which adds security risks, and could damage your system when misused. Therefore, this feature impacts the add-on security score negatively.\n\nThis level of access is not granted automatically and needs to be confirmed by you. To do this, you need to disable the protection mode on the add-on manually. Only disable the protection mode if you know, need AND trust the source of this add-on.",
-  },
-  host_pid: {
-    title: "Host Processes Namespace",
-    description:
-      "Usually, the processes the add-on runs, are isolated from all other system processes. The add-on author has requested the add-on to have access to the system processes running on the host system instance, and allow the add-on to spawn processes on the host system as well. This mode gives the add-on full access and control to your entire Home Assistant system, which adds security risks, and could damage your system when misused. Therefore, this feature impacts the add-on security score negatively.\n\nThis level of access is not granted automatically and needs to be confirmed by you. To do this, you need to disable the protection mode on the add-on manually. Only disable the protection mode if you know, need AND trust the source of this add-on.",
-  },
-  apparmor: {
-    title: "AppArmor",
-    description:
-      "AppArmor ('Application Armor') is a Linux kernel security module that restricts add-ons capabilities like network access, raw socket access, and permission to read, write, or execute specific files.\n\nAdd-on authors can provide their security profiles, optimized for the add-on, or request it to be disabled. If AppArmor is disabled, it will raise security risks and therefore, has a negative impact on the security score of the add-on.",
-  },
-  auth_api: {
-    title: "Home Assistant Authentication",
-    description:
-      "An add-on can authenticate users against Home Assistant, allowing add-ons to give users the possibility to log into applications running inside add-ons, using their Home Assistant username/password. This badge indicates if the add-on author requests this capability.",
-  },
-  ingress: {
-    title: "Ingress",
-    description:
-      "This add-on is using Ingress to embed its interface securely into Home Assistant.",
-  },
-};
-
 @customElement("hassio-addon-info")
 class HassioAddonInfo extends LitElement {
   @property({ type: Boolean }) public narrow!: boolean;
@@ -148,14 +94,23 @@ class HassioAddonInfo extends LitElement {
 
   @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",
+        description: this.supervisor.localize("addon.dashboard.cpu_usage"),
         value: this._metrics?.cpu_percent,
       },
       {
-        description: "Add-on RAM Usage",
+        description: this.supervisor.localize("addon.dashboard.ram_usage"),
         value: this._metrics?.memory_percent,
         tooltip: `${bytesToString(this._metrics?.memory_usage)}/${bytesToString(
           this._metrics?.memory_limit
@@ -165,47 +120,64 @@ class HassioAddonInfo extends LitElement {
     return html`
       ${this.addon.update_available
         ? html`
-            <ha-card header="Update available! 🎉">
+            <ha-card
+              .header="${this.supervisor.localize(
+                "common.update_available",
+                "count",
+                1
+              )}🎉"
+            >
               <div class="card-content">
                 <hassio-card-content
                   .hass=${this.hass}
-                  .title="${this.addon.name} ${this.addon
-                    .version_latest} is available"
-                  .description="You are currently running version ${this.addon
-                    .version}"
+                  .title="${this.supervisor.localize(
+                    "addon.dashboard.new_update_available",
+                    "name",
+                    this.addon.name,
+                    "version",
+                    this.addon.version_latest
+                  )}"
+                  .description="${this.supervisor.localize(
+                    "common.running_version",
+                    "version",
+                    this.addon.version
+                  )}"
                   icon=${mdiArrowUpBoldCircle}
                   iconClass="update"
                 ></hassio-card-content>
-                ${!this.addon.available
+                ${!this.addon.available && addonStoreInfo
                   ? !addonArchIsSupported(
                       this.supervisor.info.supported_arch,
                       this.addon.arch
                     )
                     ? html`
-                        <p>
-                          This add-on is not compatible with the processor of
-                          your device or the operating system you have installed
-                          on your device.
+                        <p class="warning">
+                          ${this.supervisor.localize(
+                            "addon.dashboard.not_available_arch"
+                          )}
                         </p>
                       `
                     : html`
-                        <p>
-                          You are running Home Assistant
-                          ${this.supervisor.core.version}, to update to this
-                          version of the add-on you need at least version
-                          ${this.addon.homeassistant} of Home Assistant
+                        <p class="warning">
+                          ${this.supervisor.localize(
+                            "addon.dashboard.not_available_arch",
+                            "core_version_installed",
+                            this.supervisor.core.version,
+                            "core_version_needed",
+                            addonStoreInfo.homeassistant
+                          )}
                         </p>
                       `
                   : ""}
               </div>
               <div class="card-actions">
-                <ha-progress-button @click=${this._updateClicked}>
-                  Update
-                </ha-progress-button>
+                <mwc-button @click=${this._updateClicked}>
+                  ${this.supervisor.localize("common.update")}
+                </mwc-button>
                 ${this.addon.changelog
                   ? html`
                       <mwc-button @click=${this._openChangelog}>
-                        Changelog
+                        ${this.supervisor.localize("addon.dashboard.changelog")}
                       </mwc-button>
                     `
                   : ""}
@@ -216,12 +188,19 @@ class HassioAddonInfo extends LitElement {
       ${!this.addon.protected
         ? html`
         <ha-card class="warning">
-          <h1 class="card-header">Warning: Protection mode is disabled!</h1>
+          <h1 class="card-header">${this.supervisor.localize(
+            "addon.dashboard.protection_mode.title"
+          )}
+          </h1>
           <div class="card-content">
-            Protection mode on this add-on is disabled! This gives the add-on full access to the entire system, which adds security risks, and could damage your system when used incorrectly. Only disable the protection mode if you know, need AND trust the source of this add-on.
+          ${this.supervisor.localize("addon.dashboard.protection_mode.content")}
           </div>
           <div class="card-actions protection-enable">
-              <mwc-button @click=${this._protectionToggled}>Enable Protection mode</mwc-button>
+              <mwc-button @click=${this._protectionToggled}>
+              ${this.supervisor.localize(
+                "addon.dashboard.protection_mode.enable"
+              )}
+              </mwc-button>
             </div>
           </div>
         </ha-card>
@@ -238,14 +217,18 @@ class HassioAddonInfo extends LitElement {
                     ${this._computeIsRunning
                       ? html`
                           <ha-svg-icon
-                            title="Add-on is running"
+                            .title=${this.supervisor.localize(
+                              "dashboard.addon_running"
+                            )}
                             class="running"
                             .path=${mdiCircle}
                           ></ha-svg-icon>
                         `
                       : html`
                           <ha-svg-icon
-                            title="Add-on is stopped"
+                            .title=${this.supervisor.localize(
+                              "dashboard.addon_stopped"
+                            )}
                             class="stopped"
                             .path=${mdiCircle}
                           ></ha-svg-icon>
@@ -259,21 +242,33 @@ class HassioAddonInfo extends LitElement {
               ? html`
                   Current version: ${this.addon.version}
                   <div class="changelog" @click=${this._openChangelog}>
-                    (<span class="changelog-link">changelog</span>)
+                    (<span class="changelog-link"
+                      >${this.supervisor.localize(
+                        "addon.dashboard.changelog"
+                      )}</span
+                    >)
                   </div>
                 `
               : html`<span class="changelog-link" @click=${this._openChangelog}
-                  >Changelog</span
+                  >${this.supervisor.localize(
+                    "addon.dashboard.changelog"
+                  )}</span
                 >`}
           </div>
 
           <div class="description light-color">
             ${this.addon.description}.<br />
-            Visit
-            <a href="${this.addon.url!}" target="_blank" rel="noreferrer">
-              ${this.addon.name} page</a
-            >
-            for details.
+            ${this.supervisor.localize(
+              "addon.dashboard.visit_addon_page",
+              "name",
+              html`<a
+                href="${this.addon.url!}"
+                target="_blank"
+                rel="noreferrer"
+              >
+                ${this.addon.name}
+              </a>`
+            )}
           </div>
           <div class="addon-container">
             <div>
@@ -294,7 +289,9 @@ class HassioAddonInfo extends LitElement {
                       })}
                       @click=${this._showMoreInfo}
                       id="stage"
-                      label="stage"
+                      .label=${this.supervisor.localize(
+                        "addon.dashboard.capability.label.stage"
+                      )}
                       description=""
                     >
                       <ha-svg-icon
@@ -320,7 +317,9 @@ class HassioAddonInfo extends LitElement {
                       <ha-label-badge
                         @click=${this._showMoreInfo}
                         id="host_network"
-                        label="host"
+                        .label=${this.supervisor.localize(
+                          "addon.dashboard.capability.label.host"
+                        )}
                         description=""
                       >
                         <ha-svg-icon .path=${mdiNetwork}></ha-svg-icon>
@@ -332,7 +331,9 @@ class HassioAddonInfo extends LitElement {
                       <ha-label-badge
                         @click=${this._showMoreInfo}
                         id="full_access"
-                        label="hardware"
+                        .label=${this.supervisor.localize(
+                          "addon.dashboard.capability.label.hardware"
+                        )}
                         description=""
                       >
                         <ha-svg-icon .path=${mdiChip}></ha-svg-icon>
@@ -344,7 +345,9 @@ class HassioAddonInfo extends LitElement {
                       <ha-label-badge
                         @click=${this._showMoreInfo}
                         id="homeassistant_api"
-                        label="hass"
+                        .label=${this.supervisor.localize(
+                          "addon.dashboard.capability.label.hass"
+                        )}
                         description=""
                       >
                         <ha-svg-icon .path=${mdiHomeAssistant}></ha-svg-icon>
@@ -356,8 +359,12 @@ class HassioAddonInfo extends LitElement {
                       <ha-label-badge
                         @click=${this._showMoreInfo}
                         id="hassio_api"
-                        label="hassio"
-                        .description=${this.addon.hassio_role}
+                        .label=${this.supervisor.localize(
+                          "addon.dashboard.capability.label.hassio"
+                        )}
+                        .description=${this.supervisor.localize(
+                          `addon.dashboard.capability.role.${this.addon.hassio_role}`
+                        ) || this.addon.hassio_role}
                       >
                         <ha-svg-icon .path=${mdiHomeAssistant}></ha-svg-icon>
                       </ha-label-badge>
@@ -368,7 +375,9 @@ class HassioAddonInfo extends LitElement {
                       <ha-label-badge
                         @click=${this._showMoreInfo}
                         id="docker_api"
-                        label="docker"
+                        .label=".${this.supervisor.localize(
+                          "addon.dashboard.capability.label.docker"
+                        )}"
                         description=""
                       >
                         <ha-svg-icon .path=${mdiDocker}></ha-svg-icon>
@@ -380,7 +389,9 @@ class HassioAddonInfo extends LitElement {
                       <ha-label-badge
                         @click=${this._showMoreInfo}
                         id="host_pid"
-                        label="host pid"
+                        .label=${this.supervisor.localize(
+                          "addon.dashboard.capability.label.host_pid"
+                        )}
                         description=""
                       >
                         <ha-svg-icon .path=${mdiPound}></ha-svg-icon>
@@ -393,7 +404,9 @@ class HassioAddonInfo extends LitElement {
                         @click=${this._showMoreInfo}
                         class=${this._computeApparmorClassName}
                         id="apparmor"
-                        label="apparmor"
+                        .label=${this.supervisor.localize(
+                          "addon.dashboard.capability.label.apparmor"
+                        )}
                         description=""
                       >
                         <ha-svg-icon .path=${mdiShield}></ha-svg-icon>
@@ -405,7 +418,9 @@ class HassioAddonInfo extends LitElement {
                       <ha-label-badge
                         @click=${this._showMoreInfo}
                         id="auth_api"
-                        label="auth"
+                        .label=${this.supervisor.localize(
+                          "addon.dashboard.capability.label.auth"
+                        )}
                         description=""
                       >
                         <ha-svg-icon .path=${mdiKey}></ha-svg-icon>
@@ -417,7 +432,9 @@ class HassioAddonInfo extends LitElement {
                       <ha-label-badge
                         @click=${this._showMoreInfo}
                         id="ingress"
-                        label="ingress"
+                        .label=${this.supervisor.localize(
+                          "addon.dashboard.capability.label.ingress"
+                        )}
                         description=""
                       >
                         <ha-svg-icon
@@ -438,10 +455,14 @@ class HassioAddonInfo extends LitElement {
                     >
                       <ha-settings-row ?three-line=${this.narrow}>
                         <span slot="heading">
-                          Start on boot
+                          ${this.supervisor.localize(
+                            "addon.dashboard.option.boot.title"
+                          )}
                         </span>
                         <span slot="description">
-                          Make the add-on start during a system boot
+                          ${this.supervisor.localize(
+                            "addon.dashboard.option.boot.description"
+                          )}
                         </span>
                         <ha-switch
                           @change=${this._startOnBootToggled}
@@ -454,10 +475,14 @@ class HassioAddonInfo extends LitElement {
                         ? html`
                             <ha-settings-row ?three-line=${this.narrow}>
                               <span slot="heading">
-                                Watchdog
+                                ${this.supervisor.localize(
+                                  "addon.dashboard.option.watchdog.title"
+                                )}
                               </span>
                               <span slot="description">
-                                This will start the add-on if it crashes
+                                ${this.supervisor.localize(
+                                  "addon.dashboard.option.watchdog.description"
+                                )}
                               </span>
                               <ha-switch
                                 @change=${this._watchdogToggled}
@@ -472,11 +497,14 @@ class HassioAddonInfo extends LitElement {
                         ? html`
                             <ha-settings-row ?three-line=${this.narrow}>
                               <span slot="heading">
-                                Auto update
+                                ${this.supervisor.localize(
+                                  "addon.dashboard.option.auto_update.title"
+                                )}
                               </span>
                               <span slot="description">
-                                Auto update the add-on when there is a new
-                                version available
+                                ${this.supervisor.localize(
+                                  "addon.dashboard.option.auto_update.description"
+                                )}
                               </span>
                               <ha-switch
                                 @change=${this._autoUpdateToggled}
@@ -486,21 +514,22 @@ class HassioAddonInfo extends LitElement {
                             </ha-settings-row>
                           `
                         : ""}
-                      ${this.addon.ingress
+                      ${!this._computeCannotIngressSidebar && this.addon.ingress
                         ? html`
                             <ha-settings-row ?three-line=${this.narrow}>
                               <span slot="heading">
-                                Show in sidebar
+                                ${this.supervisor.localize(
+                                  "addon.dashboard.option.ingress_panel.title"
+                                )}
                               </span>
                               <span slot="description">
-                                ${this._computeCannotIngressSidebar
-                                  ? "This option requires Home Assistant 0.92 or later."
-                                  : "Add this add-on to your sidebar"}
+                                ${this.supervisor.localize(
+                                  "addon.dashboard.option.ingress_panel.description"
+                                )}
                               </span>
                               <ha-switch
                                 @change=${this._panelToggled}
                                 .checked=${this.addon.ingress_panel}
-                                .disabled=${this._computeCannotIngressSidebar}
                                 haptic
                               ></ha-switch>
                             </ha-settings-row>
@@ -510,10 +539,14 @@ class HassioAddonInfo extends LitElement {
                         ? html`
                             <ha-settings-row ?three-line=${this.narrow}>
                               <span slot="heading">
-                                Protection mode
+                                ${this.supervisor.localize(
+                                  "addon.dashboard.option.protected.title"
+                                )}
                               </span>
                               <span slot="description">
-                                Blocks elevated system access from the add-on
+                                ${this.supervisor.localize(
+                                  "addon.dashboard.option.protected.description"
+                                )}
                               </span>
                               <ha-switch
                                 @change=${this._protectionToggled}
@@ -531,7 +564,7 @@ class HassioAddonInfo extends LitElement {
               ${this.addon.state === "started"
                 ? html`<ha-settings-row ?three-line=${this.narrow}>
                       <span slot="heading">
-                        Hostname
+                        ${this.supervisor.localize("addon.dashboard.hostname")}
                       </span>
                       <code slot="description">
                         ${this.addon.hostname}
@@ -551,24 +584,27 @@ class HassioAddonInfo extends LitElement {
             </div>
           </div>
           ${this._error ? html` <div class="errors">${this._error}</div> ` : ""}
-          ${!this.addon.available
+          ${!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.
+                    ${this.supervisor.localize(
+                      "addon.dashboard.not_available_arch"
+                    )}
                   </p>
                 `
               : html`
                   <p class="warning">
-                    You are running Home Assistant
-                    ${this.supervisor.core.version}, to install this add-on you
-                    need at least version ${this.addon.homeassistant} of Home
-                    Assistant
+                    ${this.supervisor.localize(
+                      "addon.dashboard.not_available_version",
+                      "core_version_installed",
+                      this.supervisor.core.version,
+                      "core_version_needed",
+                      addonStoreInfo!.homeassistant
+                    )}
                   </p>
                 `
             : ""}
@@ -582,18 +618,18 @@ class HassioAddonInfo extends LitElement {
                       class="warning"
                       @click=${this._stopClicked}
                     >
-                      Stop
+                      ${this.supervisor.localize("addon.dashboard.stop")}
                     </ha-progress-button>
                     <ha-progress-button
                       class="warning"
                       @click=${this._restartClicked}
                     >
-                      Restart
+                      ${this.supervisor.localize("addon.dashboard.restart")}
                     </ha-progress-button>
                   `
                 : html`
                     <ha-progress-button @click=${this._startClicked}>
-                      Start
+                      ${this.supervisor.localize("addon.dashboard.start")}
                     </ha-progress-button>
                   `
               : html`
@@ -601,7 +637,7 @@ class HassioAddonInfo extends LitElement {
                     .disabled=${!this.addon.available}
                     @click=${this._installClicked}
                   >
-                    Install
+                    ${this.supervisor.localize("addon.dashboard.install")}
                   </ha-progress-button>
                 `}
           </div>
@@ -616,7 +652,9 @@ class HassioAddonInfo extends LitElement {
                           rel="noopener"
                         >
                           <mwc-button>
-                            Open web UI
+                            ${this.supervisor.localize(
+                              "addon.dashboard.open_web_ui"
+                            )}
                           </mwc-button>
                         </a>
                       `
@@ -624,7 +662,9 @@ class HassioAddonInfo extends LitElement {
                   ${this._computeShowIngressUI
                     ? html`
                         <mwc-button @click=${this._openIngress}>
-                          Open web UI
+                          ${this.supervisor.localize(
+                            "addon.dashboard.open_web_ui"
+                          )}
                         </mwc-button>
                       `
                     : ""}
@@ -632,7 +672,7 @@ class HassioAddonInfo extends LitElement {
                     class="warning"
                     @click=${this._uninstallClicked}
                   >
-                    Uninstall
+                    ${this.supervisor.localize("addon.dashboard.uninstall")}
                   </ha-progress-button>
                   ${this.addon.build
                     ? html`
@@ -641,7 +681,7 @@ class HassioAddonInfo extends LitElement {
                           .hass=${this.hass}
                           .path="hassio/addons/${this.addon.slug}/rebuild"
                         >
-                          Rebuild
+                          ${this.supervisor.localize("addon.dashboard.rebuild")}
                         </ha-call-api-button>
                       `
                     : ""}`
@@ -701,8 +741,21 @@ class HassioAddonInfo extends LitElement {
   private _showMoreInfo(ev): void {
     const id = ev.currentTarget.id;
     showHassioMarkdownDialog(this, {
-      title: PERMIS_DESC[id].title,
-      content: PERMIS_DESC[id].description,
+      title: this.supervisor.localize(`addon.dashboard.capability.${id}.title`),
+      content:
+        id === "stage"
+          ? this.supervisor.localize(
+              `addon.dashboard.capability.${id}.description`,
+              "icon_stable",
+              `<ha-svg-icon path="${STAGE_ICON.stable}"></ha-svg-icon>`,
+              "icon_experimental",
+              `<ha-svg-icon path="${STAGE_ICON.experimental}"></ha-svg-icon>`,
+              "icon_deprecated",
+              `<ha-svg-icon path="${STAGE_ICON.deprecated}"></ha-svg-icon>`
+            )
+          : this.supervisor.localize(
+              `addon.dashboard.capability.${id}.description`
+            ),
     });
   }
 
@@ -755,9 +808,11 @@ class HassioAddonInfo extends LitElement {
       };
       fireEvent(this, "hass-api-called", eventdata);
     } catch (err) {
-      this._error = `Failed to set addon option, ${extractApiErrorMessage(
-        err
-      )}`;
+      this._error = this.supervisor.localize(
+        "addon.failed_to_save",
+        "error",
+        extractApiErrorMessage(err)
+      );
     }
   }
 
@@ -775,9 +830,11 @@ class HassioAddonInfo extends LitElement {
       };
       fireEvent(this, "hass-api-called", eventdata);
     } catch (err) {
-      this._error = `Failed to set addon option, ${extractApiErrorMessage(
-        err
-      )}`;
+      this._error = this.supervisor.localize(
+        "addon.failed_to_save",
+        "error",
+        extractApiErrorMessage(err)
+      );
     }
   }
 
@@ -795,9 +852,11 @@ class HassioAddonInfo extends LitElement {
       };
       fireEvent(this, "hass-api-called", eventdata);
     } catch (err) {
-      this._error = `Failed to set addon option, ${extractApiErrorMessage(
-        err
-      )}`;
+      this._error = this.supervisor.localize(
+        "addon.failed_to_save",
+        "error",
+        extractApiErrorMessage(err)
+      );
     }
   }
 
@@ -815,9 +874,11 @@ class HassioAddonInfo extends LitElement {
       };
       fireEvent(this, "hass-api-called", eventdata);
     } catch (err) {
-      this._error = `Failed to set addon security option, ${extractApiErrorMessage(
-        err
-      )}`;
+      this._error = this.supervisor.localize(
+        "addon.failed_to_save",
+        "error",
+        extractApiErrorMessage(err)
+      );
     }
   }
 
@@ -835,9 +896,11 @@ class HassioAddonInfo extends LitElement {
       };
       fireEvent(this, "hass-api-called", eventdata);
     } catch (err) {
-      this._error = `Failed to set addon option, ${extractApiErrorMessage(
-        err
-      )}`;
+      this._error = this.supervisor.localize(
+        "addon.failed_to_save",
+        "error",
+        extractApiErrorMessage(err)
+      );
     }
   }
 
@@ -848,12 +911,14 @@ class HassioAddonInfo extends LitElement {
         this.addon.slug
       );
       showHassioMarkdownDialog(this, {
-        title: "Changelog",
+        title: this.supervisor.localize("addon.dashboard.changelog"),
         content,
       });
     } catch (err) {
       showAlertDialog(this, {
-        title: "Failed to get addon changelog",
+        title: this.supervisor.localize(
+          "addon.dashboard.action_error.get_changelog"
+        ),
         text: extractApiErrorMessage(err),
       });
     }
@@ -873,7 +938,7 @@ class HassioAddonInfo extends LitElement {
       fireEvent(this, "hass-api-called", eventdata);
     } catch (err) {
       showAlertDialog(this, {
-        title: "Failed to install addon",
+        title: this.supervisor.localize("addon.dashboard.action_error.install"),
         text: extractApiErrorMessage(err),
       });
     }
@@ -894,7 +959,7 @@ class HassioAddonInfo extends LitElement {
       fireEvent(this, "hass-api-called", eventdata);
     } catch (err) {
       showAlertDialog(this, {
-        title: "Failed to stop addon",
+        title: this.supervisor.localize("addon.dashboard.action_error.stop"),
         text: extractApiErrorMessage(err),
       });
     }
@@ -915,45 +980,38 @@ class HassioAddonInfo extends LitElement {
       fireEvent(this, "hass-api-called", eventdata);
     } catch (err) {
       showAlertDialog(this, {
-        title: "Failed to restart addon",
+        title: this.supervisor.localize("addon.dashboard.action_error.restart"),
         text: extractApiErrorMessage(err),
       });
     }
     button.progress = false;
   }
 
-  private async _updateClicked(ev: CustomEvent): Promise<void> {
-    const button = ev.currentTarget as any;
-    button.progress = true;
-
-    const confirmed = await showConfirmationDialog(this, {
-      title: this.addon.name,
-      text: "Are you sure you want to update this add-on?",
-      confirmText: "update add-on",
-      dismissText: "no",
+  private async _updateClicked(): Promise<void> {
+    showDialogSupervisorUpdate(this, {
+      supervisor: this.supervisor,
+      name: this.addon.name,
+      version: this.addon.version_latest,
+      snapshotParams: {
+        name: `addon_${this.addon.slug}_${this.addon.version}`,
+        addons: [this.addon.slug],
+        homeassistant: false,
+      },
+      updateHandler: async () => await this._updateAddon(),
     });
+  }
 
-    if (!confirmed) {
-      button.progress = false;
-      return;
-    }
-
-    this._error = undefined;
-    try {
-      await updateHassioAddon(this.hass, this.addon.slug);
-      const eventdata = {
-        success: true,
-        response: undefined,
-        path: "update",
-      };
-      fireEvent(this, "hass-api-called", eventdata);
-    } catch (err) {
-      showAlertDialog(this, {
-        title: "Failed to update addon",
-        text: extractApiErrorMessage(err),
-      });
-    }
-    button.progress = false;
+  private async _updateAddon(): Promise<void> {
+    await updateHassioAddon(this.hass, this.addon.slug);
+    fireEvent(this, "supervisor-collection-refresh", {
+      collection: "addon",
+    });
+    const eventdata = {
+      success: true,
+      response: undefined,
+      path: "update",
+    };
+    fireEvent(this, "hass-api-called", eventdata);
   }
 
   private async _startClicked(ev: CustomEvent): Promise<void> {
@@ -966,11 +1024,15 @@ class HassioAddonInfo extends LitElement {
       );
       if (!validate.valid) {
         await showConfirmationDialog(this, {
-          title: "Failed to start addon - configuration validation failed!",
+          title: this.supervisor.localize(
+            "addon.dashboard.action_error.start_invalid_config"
+          ),
           text: validate.message.split(" Got ")[0],
           confirm: () => this._openConfiguration(),
-          confirmText: "Go to configuration",
-          dismissText: "Cancel",
+          confirmText: this.supervisor.localize(
+            "addon.dashboard.action_error.go_to_config"
+          ),
+          dismissText: this.supervisor.localize("common.cancel"),
         });
         button.progress = false;
         return;
@@ -995,7 +1057,7 @@ class HassioAddonInfo extends LitElement {
       fireEvent(this, "hass-api-called", eventdata);
     } catch (err) {
       showAlertDialog(this, {
-        title: "Failed to start addon",
+        title: this.supervisor.localize("addon.dashboard.action_error.start"),
         text: extractApiErrorMessage(err),
       });
     }
@@ -1033,7 +1095,9 @@ class HassioAddonInfo extends LitElement {
       fireEvent(this, "hass-api-called", eventdata);
     } catch (err) {
       showAlertDialog(this, {
-        title: "Failed to uninstall addon",
+        title: this.supervisor.localize(
+          "addon.dashboard.action_error.uninstall"
+        ),
         text: extractApiErrorMessage(err),
       });
     }

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

@@ -9,6 +9,7 @@ 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";
@@ -18,6 +19,8 @@ import "./hassio-addon-logs";
 class HassioAddonLogDashboard extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
+  @property({ attribute: false }) public supervisor!: Supervisor;
+
   @property({ attribute: false }) public addon?: HassioAddonDetails;
 
   protected render(): TemplateResult {
@@ -28,6 +31,7 @@ class HassioAddonLogDashboard extends LitElement {
       <div class="content">
         <hassio-addon-logs
           .hass=${this.hass}
+          .supervisor=${this.supervisor}
           .addon=${this.addon}
         ></hassio-addon-logs>
       </div>

hassio/src/addon-view/log/hassio-addon-logs.ts

@@ -15,6 +15,7 @@ import {
   HassioAddonDetails,
 } from "../../../../src/data/hassio/addon";
 import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
+import { Supervisor } from "../../../../src/data/supervisor/supervisor";
 import { haStyle } from "../../../../src/resources/styles";
 import { HomeAssistant } from "../../../../src/types";
 import "../../components/hassio-ansi-to-html";
@@ -24,6 +25,8 @@ import { hassioStyle } from "../../resources/hassio-style";
 class HassioAddonLogs extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
+  @property({ attribute: false }) public supervisor!: Supervisor;
+
   @property({ attribute: false }) public addon!: HassioAddonDetails;
 
   @internalProperty() private _error?: string;
@@ -48,7 +51,9 @@ class HassioAddonLogs extends LitElement {
             : ""}
         </div>
         <div class="card-actions">
-          <mwc-button @click=${this._refresh}>Refresh</mwc-button>
+          <mwc-button @click=${this._refresh}>
+            ${this.supervisor.localize("common.refresh")}
+          </mwc-button>
         </div>
       </ha-card>
     `;
@@ -76,7 +81,11 @@ class HassioAddonLogs extends LitElement {
     try {
       this._content = await fetchHassioAddonLogs(this.hass, this.addon.slug);
     } catch (err) {
-      this._error = `Failed to get addon logs, ${extractApiErrorMessage(err)}`;
+      this._error = this.supervisor.localize(
+        "addon.logs.get_logs",
+        "error",
+        extractApiErrorMessage(err)
+      );
     }
   }
 

hassio/src/components/hassio-card-content.ts

@@ -44,7 +44,7 @@ class HassioCardContent extends LitElement {
       ${this.iconImage
         ? html`
             <div class="icon_image ${this.iconClass}">
-              <img src="${this.iconImage}" title="${this.iconTitle}" />
+              <img src="${this.iconImage}" .title=${this.iconTitle} />
               <div></div>
             </div>
           `

hassio/src/components/supervisor-metric.ts

@@ -26,9 +26,9 @@ class SupervisorMetric extends LitElement {
       <span slot="heading">
         ${this.description}
       </span>
-      <div slot="description" title="${this.tooltip ?? ""}">
+      <div slot="description" .title=${this.tooltip ?? ""}>
         <span class="value">
-          ${roundedValue}%
+          ${roundedValue} %
         </span>
         <ha-bar
           class="${classMap({
@@ -73,7 +73,7 @@ class SupervisorMetric extends LitElement {
         );
       }
       .value {
-        width: 42px;
+        width: 48px;
         padding-right: 4px;
       }
     `;

hassio/src/dashboard/hassio-addons.ts

@@ -27,17 +27,15 @@ class HassioAddons extends LitElement {
   protected render(): TemplateResult {
     return html`
       <div class="content">
-        <h1>Add-ons</h1>
+        <h1>${this.supervisor.localize("dashboard.addons")}</h1>
         <div class="card-group">
           ${!this.supervisor.supervisor.addons?.length
             ? html`
                 <ha-card>
                   <div class="card-content">
-                    You don't have any add-ons installed yet. Head over to
                     <button class="link" @click=${this._openStore}>
-                      the add-on store
+                      ${this.supervisor.localize("dashboard.no_addons")}
                     </button>
-                    to get started!
                   </div>
                 </ha-card>
               `
@@ -58,10 +56,16 @@ class HassioAddons extends LitElement {
                             ? mdiArrowUpBoldCircle
                             : mdiPuzzle}
                           .iconTitle=${addon.state !== "started"
-                            ? "Add-on is stopped"
+                            ? this.supervisor.localize(
+                                "dashboard.addon_stopped"
+                              )
                             : addon.update_available!
-                            ? "New version available"
-                            : "Add-on is running"}
+                            ? this.supervisor.localize(
+                                "dashboard.addon_new_version"
+                              )
+                            : this.supervisor.localize(
+                                "dashboard.addon_running"
+                              )}
                           .iconClass=${addon.update_available
                             ? addon.state === "started"
                               ? "update"

hassio/src/dashboard/hassio-dashboard.ts

@@ -29,13 +29,16 @@ class HassioDashboard extends LitElement {
     return html`
       <hass-tabs-subpage
         .hass=${this.hass}
+        .localizeFunc=${this.supervisor.localize}
         .narrow=${this.narrow}
-        hassio
-        main-page
         .route=${this.route}
         .tabs=${supervisorTabs}
+        main-page
+        supervisor
       >
-        <span slot="header">Dashboard</span>
+        <span slot="header">
+          ${this.supervisor.localize("panel.dashboard")}
+        </span>
         <div class="content">
           <hassio-update
             .hass=${this.hass}

hassio/src/dashboard/hassio-update.ts

@@ -10,29 +10,40 @@ 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-card";
+import "../../../src/components/ha-settings-row";
 import "../../../src/components/ha-svg-icon";
 import {
   extractApiErrorMessage,
   HassioResponse,
-  ignoredStatusCodes,
+  ignoreSupervisorError,
 } from "../../../src/data/hassio/common";
 import { HassioHassOSInfo } from "../../../src/data/hassio/host";
 import {
   HassioHomeAssistantInfo,
   HassioSupervisorInfo,
 } from "../../../src/data/hassio/supervisor";
-import { Supervisor } from "../../../src/data/supervisor/supervisor";
+import { updateCore } from "../../../src/data/supervisor/core";
+import {
+  Supervisor,
+  supervisorApiWsRequest,
+} from "../../../src/data/supervisor/supervisor";
 import {
   showAlertDialog,
   showConfirmationDialog,
 } from "../../../src/dialogs/generic/show-dialog-box";
 import { haStyle } from "../../../src/resources/styles";
 import { HomeAssistant } from "../../../src/types";
+import { showDialogSupervisorUpdate } from "../dialogs/update/show-dialog-update";
 import { hassioStyle } from "../resources/hassio-style";
 
+const computeVersion = (key: string, version: string): string => {
+  return key === "os" ? version : `${key}-${version}`;
+};
+
 @customElement("hassio-update")
 export class HassioUpdate extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -58,9 +69,12 @@ export class HassioUpdate extends LitElement {
     return html`
       <div class="content">
         <h1>
-          ${updatesAvailable > 1
-            ? "Updates Available 🎉"
-            : "Update Available 🎉"}
+          ${this.supervisor.localize(
+            "common.update_available",
+            "count",
+            updatesAvailable
+          )}
+          🎉
         </h1>
         <div class="card-group">
           ${this._renderUpdateCard(
@@ -109,14 +123,30 @@ export class HassioUpdate extends LitElement {
           <div class="icon">
             <ha-svg-icon .path=${mdiHomeAssistant}></ha-svg-icon>
           </div>
-          <div class="update-heading">${name} ${object.version_latest}</div>
-          <div class="warning">
-            You are currently running version ${object.version}
-          </div>
+          <div class="update-heading">${name}</div>
+          <ha-settings-row two-line>
+            <span slot="heading">
+              ${this.supervisor.localize("common.version")}
+            </span>
+            <span slot="description">
+              ${computeVersion(key, object.version!)}
+            </span>
+          </ha-settings-row>
+
+          <ha-settings-row two-line>
+            <span slot="heading">
+              ${this.supervisor.localize("common.newest_version")}
+            </span>
+            <span slot="description">
+              ${computeVersion(key, object.version_latest!)}
+            </span>
+          </ha-settings-row>
         </div>
         <div class="card-actions">
           <a href="${releaseNotesUrl}" target="_blank" rel="noreferrer">
-            <mwc-button>Release notes</mwc-button>
+            <mwc-button>
+              ${this.supervisor.localize("common.release_notes")}
+            </mwc-button>
           </a>
           <ha-progress-button
             .apiPath=${apiPath}
@@ -125,7 +155,7 @@ export class HassioUpdate extends LitElement {
             .version=${object.version_latest}
             @click=${this._confirmUpdate}
           >
-            Update
+            ${this.supervisor.localize("common.update")}
           </ha-progress-button>
         </div>
       </ha-card>
@@ -134,12 +164,36 @@ export class HassioUpdate extends LitElement {
 
   private async _confirmUpdate(ev): Promise<void> {
     const item = ev.currentTarget;
+    if (item.key === "core") {
+      showDialogSupervisorUpdate(this, {
+        supervisor: this.supervisor,
+        name: "Home Assistant Core",
+        version: this.supervisor.core.version_latest,
+        snapshotParams: {
+          name: `core_${this.supervisor.core.version}`,
+          folders: ["homeassistant"],
+          homeassistant: true,
+        },
+        updateHandler: async () => this._updateCore(),
+      });
+      return;
+    }
     item.progress = true;
     const confirmed = await showConfirmationDialog(this, {
-      title: `Update ${item.name}`,
-      text: `Are you sure you want to update ${item.name} to version ${item.version}?`,
-      confirmText: "update",
-      dismissText: "cancel",
+      title: this.supervisor.localize(
+        "confirm.update.title",
+        "name",
+        item.name
+      ),
+      text: this.supervisor.localize(
+        "confirm.update.text",
+        "name",
+        item.name,
+        "version",
+        computeVersion(item.key, item.version)
+      ),
+      confirmText: this.supervisor.localize("common.update"),
+      dismissText: this.supervisor.localize("common.cancel"),
     });
 
     if (!confirmed) {
@@ -147,14 +201,24 @@ export class HassioUpdate extends LitElement {
       return;
     }
     try {
-      await this.hass.callApi<HassioResponse<void>>("POST", item.apiPath);
-      fireEvent(this, "supervisor-store-refresh", { store: item.key });
+      if (atLeastVersion(this.hass.config.version, 2021, 2, 4)) {
+        await supervisorApiWsRequest(this.hass.connection, {
+          method: "post",
+          endpoint: item.apiPath.replace("hassio", ""),
+          timeout: null,
+        });
+      } else {
+        await this.hass.callApi<HassioResponse<void>>("POST", item.apiPath);
+      }
+      fireEvent(this, "supervisor-collection-refresh", {
+        collection: 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 (err.status_code && !ignoredStatusCodes.has(err.status_code)) {
+      if (this.hass.connection.connected && !ignoreSupervisorError(err)) {
         showAlertDialog(this, {
-          title: "Update failed",
+          title: this.supervisor.localize("common.error.update_failed"),
           text: extractApiErrorMessage(err),
         });
       }
@@ -162,6 +226,13 @@ export class HassioUpdate extends LitElement {
     item.progress = false;
   }
 
+  private async _updateCore(): Promise<void> {
+    await updateCore(this.hass);
+    fireEvent(this, "supervisor-collection-refresh", {
+      collection: "core",
+    });
+  }
+
   static get styles(): CSSResult[] {
     return [
       haStyle,
@@ -179,9 +250,6 @@ export class HassioUpdate extends LitElement {
           margin-bottom: 0.5em;
           color: var(--primary-text-color);
         }
-        .warning {
-          color: var(--secondary-text-color);
-        }
         .card-content {
           height: calc(100% - 47px);
           box-sizing: border-box;
@@ -189,13 +257,13 @@ export class HassioUpdate extends LitElement {
         .card-actions {
           text-align: right;
         }
-        .errors {
-          color: var(--error-color);
-          padding: 16px;
-        }
         a {
           text-decoration: none;
         }
+        ha-settings-row {
+          padding: 0;
+          --paper-item-body-two-line-min-height: 32px;
+        }
       `,
     ];
   }

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

@@ -18,7 +18,6 @@ import {
 } from "lit-element";
 import { cache } from "lit-html/directives/cache";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
-import "../../../../src/components/ha-chips";
 import "../../../../src/components/ha-circular-progress";
 import "../../../../src/components/ha-dialog";
 import "../../../../src/components/ha-expansion-panel";
@@ -35,6 +34,7 @@ import {
   updateNetworkInterface,
   WifiConfiguration,
 } from "../../../../src/data/hassio/network";
+import { Supervisor } from "../../../../src/data/supervisor/supervisor";
 import {
   showAlertDialog,
   showConfirmationDialog,
@@ -51,6 +51,8 @@ export class DialogHassioNetwork extends LitElement
   implements HassDialog<HassioNetworkDialogParams> {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
+  @property({ attribute: false }) public supervisor!: Supervisor;
+
   @internalProperty() private _accessPoints?: AccessPoints;
 
   @internalProperty() private _curTabIndex = 0;
@@ -73,7 +75,8 @@ export class DialogHassioNetwork extends LitElement
     this._params = params;
     this._dirty = false;
     this._curTabIndex = 0;
-    this._interfaces = params.network.interfaces.sort((a, b) => {
+    this.supervisor = params.supervisor;
+    this._interfaces = params.supervisor.network.interfaces.sort((a, b) => {
       return a.primary > b.primary ? -1 : 1;
     });
     this._interface = { ...this._interfaces[this._curTabIndex] };
@@ -104,7 +107,7 @@ export class DialogHassioNetwork extends LitElement
         <div slot="heading">
           <ha-header-bar>
             <span slot="title">
-              Network settings
+              ${this.supervisor.localize("dialog.network.title")}
             </span>
             <mwc-icon-button slot="actionItems" dialogAction="cancel">
               <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
@@ -139,7 +142,13 @@ export class DialogHassioNetwork extends LitElement
           ? html`
               <ha-expansion-panel header="Wi-Fi" outlined>
                 ${this._interface?.wifi?.ssid
-                  ? html`<p>Connected to: ${this._interface?.wifi?.ssid}</p>`
+                  ? html`<p>
+                      ${this.supervisor.localize(
+                        "dialog.network.connected_to",
+                        "ssid",
+                        this._interface?.wifi?.ssid
+                      )}
+                    </p>`
                   : ""}
                 <mwc-button
                   class="scan"
@@ -149,7 +158,7 @@ export class DialogHassioNetwork extends LitElement
                   ${this._scanning
                     ? html`<ha-circular-progress active size="small">
                       </ha-circular-progress>`
-                    : "Scan for accesspoints"}
+                    : this.supervisor.localize("dialog.network.scan_ap")}
                 </mwc-button>
                 ${this._accessPoints &&
                 this._accessPoints.accesspoints &&
@@ -181,7 +190,11 @@ export class DialogHassioNetwork extends LitElement
                 ${this._wifiConfiguration
                   ? html`
                       <div class="radio-row">
-                        <ha-formfield label="open">
+                        <ha-formfield
+                          .label=${this.supervisor.localize(
+                            "dialog.network.open"
+                          )}
+                        >
                           <ha-radio
                             @change=${this._handleRadioValueChangedAp}
                             .ap=${this._wifiConfiguration}
@@ -193,7 +206,11 @@ export class DialogHassioNetwork extends LitElement
                           >
                           </ha-radio>
                         </ha-formfield>
-                        <ha-formfield label="wep">
+                        <ha-formfield
+                          .label=${this.supervisor.localize(
+                            "dialog.network.wep"
+                          )}
+                        >
                           <ha-radio
                             @change=${this._handleRadioValueChangedAp}
                             .ap=${this._wifiConfiguration}
@@ -203,7 +220,11 @@ export class DialogHassioNetwork extends LitElement
                           >
                           </ha-radio>
                         </ha-formfield>
-                        <ha-formfield label="wpa-psk">
+                        <ha-formfield
+                          .label=${this.supervisor.localize(
+                            "dialog.network.wpa"
+                          )}
+                        >
                           <ha-radio
                             @change=${this._handleRadioValueChangedAp}
                             .ap=${this._wifiConfiguration}
@@ -237,18 +258,21 @@ export class DialogHassioNetwork extends LitElement
           : ""}
         ${this._dirty
           ? html`<div class="warning">
-              If you are changing the Wi-Fi, IP or gateway addresses, you might
-              lose the connection!
+              ${this.supervisor.localize("dialog.network.warning")}
             </div>`
           : ""}
       </div>
       <div class="buttons">
-        <mwc-button label="close" @click=${this.closeDialog}> </mwc-button>
+        <mwc-button
+          .label=${this.supervisor.localize("common.cancel")}
+          @click=${this.closeDialog}
+        >
+        </mwc-button>
         <mwc-button @click=${this._updateNetwork} .disabled=${!this._dirty}>
           ${this._processing
             ? html`<ha-circular-progress active size="small">
               </ha-circular-progress>`
-            : "Save"}
+            : this.supervisor.localize("common.save")}
         </mwc-button>
       </div>`;
   }
@@ -285,7 +309,9 @@ export class DialogHassioNetwork extends LitElement
         outlined
       >
         <div class="radio-row">
-          <ha-formfield label="DHCP">
+          <ha-formfield
+            .label=${this.supervisor.localize("dialog.network.dhcp")}
+          >
             <ha-radio
               @change=${this._handleRadioValueChanged}
               .version=${version}
@@ -295,7 +321,9 @@ export class DialogHassioNetwork extends LitElement
             >
             </ha-radio>
           </ha-formfield>
-          <ha-formfield label="Static">
+          <ha-formfield
+            .label=${this.supervisor.localize("dialog.network.static")}
+          >
             <ha-radio
               @change=${this._handleRadioValueChanged}
               .version=${version}
@@ -305,7 +333,10 @@ export class DialogHassioNetwork extends LitElement
             >
             </ha-radio>
           </ha-formfield>
-          <ha-formfield label="Disabled" class="warning">
+          <ha-formfield
+            .label=${this.supervisor.localize("dialog.network.disabled")}
+            class="warning"
+          >
             <ha-radio
               @change=${this._handleRadioValueChanged}
               .version=${version}
@@ -321,7 +352,7 @@ export class DialogHassioNetwork extends LitElement
               <paper-input
                 class="flex-auto"
                 id="address"
-                label="IP address/Netmask"
+                .label=${this.supervisor.localize("dialog.network.ip_netmask")}
                 .version=${version}
                 .value=${this._toString(this._interface![version].address)}
                 @value-changed=${this._handleInputValueChanged}
@@ -330,7 +361,7 @@ export class DialogHassioNetwork extends LitElement
               <paper-input
                 class="flex-auto"
                 id="gateway"
-                label="Gateway address"
+                .label=${this.supervisor.localize("dialog.network.gateway")}
                 .version=${version}
                 .value=${this._interface![version].gateway}
                 @value-changed=${this._handleInputValueChanged}
@@ -339,7 +370,7 @@ export class DialogHassioNetwork extends LitElement
               <paper-input
                 class="flex-auto"
                 id="nameservers"
-                label="DNS servers"
+                .label=${this.supervisor.localize("dialog.network.dns_servers")}
                 .version=${version}
                 .value=${this._toString(this._interface![version].nameservers)}
                 @value-changed=${this._handleInputValueChanged}
@@ -424,7 +455,7 @@ export class DialogHassioNetwork extends LitElement
       );
     } catch (err) {
       showAlertDialog(this, {
-        title: "Failed to change network settings",
+        title: this.supervisor.localize("dialog.network.failed_to_change"),
         text: extractApiErrorMessage(err),
       });
       this._processing = false;
@@ -437,10 +468,9 @@ export class DialogHassioNetwork extends LitElement
   private async _handleTabActivated(ev: CustomEvent): Promise<void> {
     if (this._dirty) {
       const confirm = await showConfirmationDialog(this, {
-        text:
-          "You have unsaved changes, these will get lost if you change tabs, do you want to continue?",
-        confirmText: "yes",
-        dismissText: "no",
+        text: this.supervisor.localize("dialog.network.unsaved"),
+        confirmText: this.supervisor.localize("common.yes"),
+        dismissText: this.supervisor.localize("common.no"),
       });
       if (!confirm) {
         this.requestUpdate("_interface");

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

@@ -1,9 +1,9 @@
 import { fireEvent } from "../../../../src/common/dom/fire_event";
-import { NetworkInfo } from "../../../../src/data/hassio/network";
+import { Supervisor } from "../../../../src/data/supervisor/supervisor";
 import "./dialog-hassio-network";
 
 export interface HassioNetworkDialogParams {
-  network: NetworkInfo;
+  supervisor: Supervisor;
   loadData: () => Promise<void>;
 }
 

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

@@ -22,14 +22,18 @@ import {
   fetchHassioDockerRegistries,
   removeHassioDockerRegistry,
 } from "../../../../src/data/hassio/docker";
+import { Supervisor } from "../../../../src/data/supervisor/supervisor";
 import { showAlertDialog } from "../../../../src/dialogs/generic/show-dialog-box";
 import { haStyle, haStyleDialog } from "../../../../src/resources/styles";
 import type { HomeAssistant } from "../../../../src/types";
+import { RegistriesDialogParams } from "./show-dialog-registries";
 
 @customElement("dialog-hassio-registries")
 class HassioRegistriesDialog extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
+  @property({ attribute: false }) public supervisor!: Supervisor;
+
   @property({ attribute: false }) private _registries?: {
     registry: string;
     username: string;
@@ -55,8 +59,8 @@ class HassioRegistriesDialog extends LitElement {
         .heading=${createCloseHeading(
           this.hass,
           this._addingRegistry
-            ? "Add New Docker Registry"
-            : "Manage Docker Registries"
+            ? this.supervisor.localize("dialog.registries.title_add")
+            : this.supervisor.localize("dialog.registries.title_manage")
         )}
       >
         <div class="form">
@@ -66,7 +70,9 @@ class HassioRegistriesDialog extends LitElement {
                   @value-changed=${this._inputChanged}
                   class="flex-auto"
                   name="registry"
-                  label="Registry"
+                  .label=${this.supervisor.localize(
+                    "dialog.registries.registry"
+                  )}
                   required
                   auto-validate
                 ></paper-input>
@@ -74,7 +80,9 @@ class HassioRegistriesDialog extends LitElement {
                   @value-changed=${this._inputChanged}
                   class="flex-auto"
                   name="username"
-                  label="Username"
+                  .label=${this.supervisor.localize(
+                    "dialog.registries.username"
+                  )}
                   required
                   auto-validate
                 ></paper-input>
@@ -82,7 +90,9 @@ class HassioRegistriesDialog extends LitElement {
                   @value-changed=${this._inputChanged}
                   class="flex-auto"
                   name="password"
-                  label="Password"
+                  .label=${this.supervisor.localize(
+                    "dialog.registries.password"
+                  )}
                   type="password"
                   required
                   auto-validate
@@ -94,7 +104,7 @@ class HassioRegistriesDialog extends LitElement {
                   )}
                   @click=${this._addNewRegistry}
                 >
-                  Add registry
+                  ${this.supervisor.localize("dialog.registries.add_registry")}
                 </mwc-button>
               `
             : html`${this._registries?.length
@@ -103,11 +113,16 @@ class HassioRegistriesDialog extends LitElement {
                         <mwc-list-item class="option" hasMeta twoline>
                           <span>${entry.registry}</span>
                           <span slot="secondary"
-                            >Username: ${entry.username}</span
+                            >${this.supervisor.localize(
+                              "dialog.registries.username"
+                            )}:
+                            ${entry.username}</span
                           >
                           <mwc-icon-button
                             .entry=${entry}
-                            title="Remove"
+                            .title=${this.supervisor.localize(
+                              "dialog.registries.remove"
+                            )}
                             slot="meta"
                             @click=${this._removeRegistry}
                           >
@@ -118,11 +133,17 @@ class HassioRegistriesDialog extends LitElement {
                     })
                   : html`
                       <mwc-list-item>
-                        <span>No registries configured</span>
+                        <span
+                          >${this.supervisor.localize(
+                            "dialog.registries.no_registries"
+                          )}</span
+                        >
                       </mwc-list-item>
                     `}
                 <mwc-button @click=${this._addRegistry}>
-                  Add new registry
+                  ${this.supervisor.localize(
+                    "dialog.registries.add_new_registry"
+                  )}
                 </mwc-button> `}
         </div>
       </ha-dialog>
@@ -134,8 +155,9 @@ class HassioRegistriesDialog extends LitElement {
     this[`_${target.name}`] = target.value;
   }
 
-  public async showDialog(_dialogParams: any): Promise<void> {
+  public async showDialog(dialogParams: RegistriesDialogParams): Promise<void> {
     this._opened = true;
+    this.supervisor = dialogParams.supervisor;
     await this._loadRegistries();
     await this.updateComplete;
   }
@@ -178,7 +200,7 @@ class HassioRegistriesDialog extends LitElement {
       this._addingRegistry = false;
     } catch (err) {
       showAlertDialog(this, {
-        title: "Failed to add registry",
+        title: this.supervisor.localize("dialog.registries.failed_to_add"),
         text: extractApiErrorMessage(err),
       });
     }
@@ -192,7 +214,7 @@ class HassioRegistriesDialog extends LitElement {
       await this._loadRegistries();
     } catch (err) {
       showAlertDialog(this, {
-        title: "Failed to remove registry",
+        title: this.supervisor.localize("dialog.registries.failed_to_remove"),
         text: extractApiErrorMessage(err),
       });
     }

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

@@ -1,10 +1,18 @@
 import { fireEvent } from "../../../../src/common/dom/fire_event";
+import { Supervisor } from "../../../../src/data/supervisor/supervisor";
 import "./dialog-hassio-registries";
 
-export const showRegistriesDialog = (element: HTMLElement): void => {
+export interface RegistriesDialogParams {
+  supervisor: Supervisor;
+}
+
+export const showRegistriesDialog = (
+  element: HTMLElement,
+  dialogParams: RegistriesDialogParams
+): void => {
   fireEvent(element, "show-dialog", {
     dialogTag: "dialog-hassio-registries",
     dialogImport: () => import("./dialog-hassio-registries"),
-    dialogParams: {},
+    dialogParams,
   });
 };

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

@@ -17,8 +17,9 @@ import {
   TemplateResult,
 } from "lit-element";
 import memoizeOne from "memoize-one";
+import { fireEvent } from "../../../../src/common/dom/fire_event";
 import "../../../../src/components/ha-circular-progress";
-import "../../../../src/components/ha-dialog";
+import { createCloseHeading } from "../../../../src/components/ha-dialog";
 import "../../../../src/components/ha-svg-icon";
 import {
   fetchHassioAddonsInfo,
@@ -34,27 +35,29 @@ import { HassioRepositoryDialogParams } from "./show-dialog-repositories";
 class HassioRepositoriesDialog extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property({ attribute: false }) private _repos: HassioAddonRepository[] = [];
-
-  @property({ attribute: false })
-  private _dialogParams?: HassioRepositoryDialogParams;
-
   @query("#repository_input", true) private _optionInput?: PaperInputElement;
 
+  @internalProperty() private _repositories?: HassioAddonRepository[];
+
+  @internalProperty() private _dialogParams?: HassioRepositoryDialogParams;
+
   @internalProperty() private _opened = false;
 
   @internalProperty() private _prosessing = false;
 
   @internalProperty() private _error?: string;
 
-  public async showDialog(_dialogParams: any): Promise<void> {
-    this._dialogParams = _dialogParams;
-    this._repos = _dialogParams.repos;
+  public async showDialog(
+    dialogParams: HassioRepositoryDialogParams
+  ): Promise<void> {
+    this._dialogParams = dialogParams;
     this._opened = true;
+    await this._loadData();
     await this.updateComplete;
   }
 
   public closeDialog(): void {
+    this._dialogParams = undefined;
     this._opened = false;
     this._error = "";
   }
@@ -66,14 +69,20 @@ class HassioRepositoriesDialog extends LitElement {
   );
 
   protected render(): TemplateResult {
-    const repositories = this._filteredRepositories(this._repos);
+    if (!this._dialogParams?.supervisor || this._repositories === undefined) {
+      return html``;
+    }
+    const repositories = this._filteredRepositories(this._repositories);
     return html`
       <ha-dialog
         .open=${this._opened}
         @closing=${this.closeDialog}
         scrimClickAction
         escapeKeyAction
-        heading="Manage add-on repositories"
+        .heading=${createCloseHeading(
+          this.hass,
+          this._dialogParams!.supervisor.localize("dialog.repositories.title")
+        )}
       >
         ${this._error ? html`<div class="error">${this._error}</div>` : ""}
         <div class="form">
@@ -88,7 +97,9 @@ class HassioRepositoriesDialog extends LitElement {
                     </paper-item-body>
                     <mwc-icon-button
                       .slug=${repo.slug}
-                      title="Remove"
+                      .title=${this._dialogParams!.supervisor.localize(
+                        "dialog.repositories.remove"
+                      )}
                       @click=${this._removeRepository}
                     >
                       <ha-svg-icon .path=${mdiDelete}></ha-svg-icon>
@@ -105,18 +116,23 @@ class HassioRepositoriesDialog extends LitElement {
             <paper-input
               class="flex-auto"
               id="repository_input"
-              label="Add repository"
+              .value=${this._dialogParams!.url || ""}
+              .label=${this._dialogParams!.supervisor.localize(
+                "dialog.repositories.add"
+              )}
               @keydown=${this._handleKeyAdd}
             ></paper-input>
             <mwc-button @click=${this._addRepository}>
               ${this._prosessing
                 ? html`<ha-circular-progress active></ha-circular-progress>`
-                : "Add"}
+                : this._dialogParams!.supervisor.localize(
+                    "dialog.repositories.add"
+                  )}
             </mwc-button>
           </div>
         </div>
-        <mwc-button slot="primaryAction" @click="${this.closeDialog}">
-          Close
+        <mwc-button slot="primaryAction" @click=${this.closeDialog}>
+          ${this._dialogParams?.supervisor.localize("common.close")}
         </mwc-button>
       </ha-dialog>
     `;
@@ -147,6 +163,11 @@ class HassioRepositoriesDialog extends LitElement {
         ha-paper-dropdown-menu {
           display: block;
         }
+        ha-circular-progress {
+          display: block;
+          margin: 32px;
+          text-align: center;
+        }
       `,
     ];
   }
@@ -167,13 +188,25 @@ class HassioRepositoriesDialog extends LitElement {
     this._addRepository();
   }
 
+  private async _loadData(): Promise<void> {
+    try {
+      const addonsinfo = await fetchHassioAddonsInfo(this.hass);
+
+      this._repositories = addonsinfo.repositories;
+
+      fireEvent(this, "supervisor-collection-refresh", { collection: "addon" });
+    } catch (err) {
+      this._error = extractApiErrorMessage(err);
+    }
+  }
+
   private async _addRepository() {
     const input = this._optionInput;
     if (!input || !input.value) {
       return;
     }
     this._prosessing = true;
-    const repositories = this._filteredRepositories(this._repos);
+    const repositories = this._filteredRepositories(this._repositories!);
     const newRepositories = repositories.map((repo) => {
       return repo.source;
     });
@@ -183,11 +216,7 @@ class HassioRepositoriesDialog extends LitElement {
       await setSupervisorOption(this.hass, {
         addons_repositories: newRepositories,
       });
-
-      const addonsInfo = await fetchHassioAddonsInfo(this.hass);
-      this._repos = addonsInfo.repositories;
-
-      await this._dialogParams!.loadData();
+      await this._loadData();
 
       input.value = "";
     } catch (err) {
@@ -198,7 +227,7 @@ class HassioRepositoriesDialog extends LitElement {
 
   private async _removeRepository(ev: Event) {
     const slug = (ev.currentTarget as any).slug;
-    const repositories = this._filteredRepositories(this._repos);
+    const repositories = this._filteredRepositories(this._repositories!);
     const repository = repositories.find((repo) => {
       return repo.slug === slug;
     });
@@ -217,11 +246,7 @@ class HassioRepositoriesDialog extends LitElement {
       await setSupervisorOption(this.hass, {
         addons_repositories: newRepositories,
       });
-
-      const addonsInfo = await fetchHassioAddonsInfo(this.hass);
-      this._repos = addonsInfo.repositories;
-
-      await this._dialogParams!.loadData();
+      await this._loadData();
     } catch (err) {
       this._error = extractApiErrorMessage(err);
     }

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

@@ -1,10 +1,10 @@
 import { fireEvent } from "../../../../src/common/dom/fire_event";
-import { HassioAddonRepository } from "../../../../src/data/hassio/addon";
+import { Supervisor } from "../../../../src/data/supervisor/supervisor";
 import "./dialog-hassio-repositories";
 
 export interface HassioRepositoryDialogParams {
-  repos: HassioAddonRepository[];
-  loadData: () => Promise<void>;
+  supervisor: Supervisor;
+  url?: string;
 }
 
 export const showRepositoriesDialog = (

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

@@ -95,7 +95,7 @@ class HassioSnapshotDialog extends LitElement {
 
   @internalProperty() private _snapshotPassword!: string;
 
-  @internalProperty() private _restoreHass: boolean | null | undefined = true;
+  @internalProperty() private _restoreHass = true;
 
   public async showDialog(params: HassioSnapshotDialogParams) {
     this._snapshot = await fetchHassioSnapshotInfo(this.hass, params.slug);
@@ -109,6 +109,9 @@ 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 {
@@ -134,15 +137,17 @@ class HassioSnapshotDialog extends LitElement {
           (${this._computeSize})<br />
           ${this._formatDatetime(this._snapshot.date)}
         </div>
-        <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._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>`
+          : ""}
         ${this._folders.length
           ? html`
               <div>Folders:</div>
@@ -334,7 +339,7 @@ class HassioSnapshotDialog extends LitElement {
       .map((folder) => folder.slug);
 
     const data: {
-      homeassistant: boolean | null | undefined;
+      homeassistant: boolean;
       addons: any;
       folders: any;
       password?: string;

hassio/src/dialogs/suggestAddonRestart.ts

@@ -4,6 +4,7 @@ import {
   restartHassioAddon,
 } from "../../../src/data/hassio/addon";
 import { extractApiErrorMessage } from "../../../src/data/hassio/common";
+import { Supervisor } from "../../../src/data/supervisor/supervisor";
 import {
   showAlertDialog,
   showConfirmationDialog,
@@ -13,20 +14,25 @@ import { HomeAssistant } from "../../../src/types";
 export const suggestAddonRestart = async (
   element: LitElement,
   hass: HomeAssistant,
+  supervisor: Supervisor,
   addon: HassioAddonDetails
 ): Promise<void> => {
   const confirmed = await showConfirmationDialog(element, {
-    title: addon.name,
-    text: "Do you want to restart the add-on with your changes?",
-    confirmText: "restart add-on",
-    dismissText: "no",
+    title: supervisor.localize("common.restart_name", "name", addon.name),
+    text: supervisor.localize("dialog.restart_addon.text"),
+    confirmText: supervisor.localize("dialog.restart_addon.confirm_text"),
+    dismissText: supervisor.localize("common.cancel"),
   });
   if (confirmed) {
     try {
       await restartHassioAddon(hass, addon.slug);
     } catch (err) {
       showAlertDialog(element, {
-        title: "Failed to restart",
+        title: supervisor.localize(
+          "common.failed_to_restart_name",
+          "name",
+          addon.name
+        ),
         text: extractApiErrorMessage(err),
       });
     }

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

@@ -0,0 +1,208 @@
+import "@material/mwc-button/mwc-button";
+import {
+  css,
+  CSSResult,
+  customElement,
+  html,
+  internalProperty,
+  LitElement,
+  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,
+  ignoreSupervisorError,
+} from "../../../../src/data/hassio/common";
+import { createHassioPartialSnapshot } from "../../../../src/data/hassio/snapshot";
+import { haStyle, haStyleDialog } from "../../../../src/resources/styles";
+import type { HomeAssistant } from "../../../../src/types";
+import { SupervisorDialogSupervisorUpdateParams } from "./show-dialog-update";
+
+@customElement("dialog-supervisor-update")
+class DialogSupervisorUpdate extends LitElement {
+  public hass!: HomeAssistant;
+
+  @internalProperty() private _opened = false;
+
+  @internalProperty() private _createSnapshot = true;
+
+  @internalProperty() private _action: "snapshot" | "update" | null = null;
+
+  @internalProperty() private _error?: string;
+
+  @internalProperty()
+  private _dialogParams?: SupervisorDialogSupervisorUpdateParams;
+
+  public async showDialog(
+    params: SupervisorDialogSupervisorUpdateParams
+  ): Promise<void> {
+    this._opened = true;
+    this._dialogParams = params;
+    await this.updateComplete;
+  }
+
+  public closeDialog(): void {
+    this._action = null;
+    this._createSnapshot = true;
+    this._error = undefined;
+    this._dialogParams = undefined;
+    fireEvent(this, "dialog-closed", { dialog: this.localName });
+  }
+
+  public focus(): void {
+    this.updateComplete.then(() =>
+      (this.shadowRoot?.querySelector(
+        "[dialogInitialFocus]"
+      ) as HTMLElement)?.focus()
+    );
+  }
+
+  protected render(): TemplateResult {
+    if (!this._dialogParams) {
+      return html``;
+    }
+    return html`
+      <ha-dialog .open=${this._opened} scrimClickAction escapeKeyAction>
+        ${this._action === null
+          ? html`<slot name="heading">
+                <h2 id="title" class="header_title">
+                  ${this._dialogParams.supervisor.localize(
+                    "confirm.update.title",
+                    "name",
+                    this._dialogParams.name
+                  )}
+                </h2>
+              </slot>
+              <div>
+                ${this._dialogParams.supervisor.localize(
+                  "confirm.update.text",
+                  "name",
+                  this._dialogParams.name,
+                  "version",
+                  this._dialogParams.version
+                )}
+              </div>
+
+              <ha-settings-row>
+                <span slot="heading">
+                  ${this._dialogParams.supervisor.localize(
+                    "dialog.update.snapshot"
+                  )}
+                </span>
+                <span slot="description">
+                  ${this._dialogParams.supervisor.localize(
+                    "dialog.update.create_snapshot",
+                    "name",
+                    this._dialogParams.name
+                  )}
+                </span>
+                <ha-switch
+                  .checked=${this._createSnapshot}
+                  haptic
+                  @click=${this._toggleSnapshot}
+                >
+                </ha-switch>
+              </ha-settings-row>
+              <mwc-button @click=${this.closeDialog} slot="secondaryAction">
+                ${this._dialogParams.supervisor.localize("common.cancel")}
+              </mwc-button>
+              <mwc-button
+                .disabled=${this._error !== undefined}
+                @click=${this._update}
+                slot="primaryAction"
+              >
+                ${this._dialogParams.supervisor.localize("common.update")}
+              </mwc-button>`
+          : html`<ha-circular-progress alt="Updating" size="large" active>
+              </ha-circular-progress>
+              <p class="progress-text">
+                ${this._action === "update"
+                  ? this._dialogParams.supervisor.localize(
+                      "dialog.update.updating",
+                      "name",
+                      this._dialogParams.name,
+                      "version",
+                      this._dialogParams.version
+                    )
+                  : this._dialogParams.supervisor.localize(
+                      "dialog.update.snapshotting",
+                      "name",
+                      this._dialogParams.name
+                    )}
+              </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,
+          this._dialogParams!.snapshotParams
+        );
+      } catch (err) {
+        this._error = extractApiErrorMessage(err);
+        this._action = null;
+        return;
+      }
+    }
+
+    this._action = "update";
+    try {
+      await this._dialogParams!.updateHandler!();
+    } catch (err) {
+      if (this.hass.connection.connected && !ignoreSupervisorError(err)) {
+        this._error = extractApiErrorMessage(err);
+      }
+      this._action = null;
+      return;
+    }
+
+    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-update": DialogSupervisorUpdate;
+  }
+}

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

@@ -0,0 +1,21 @@
+import { fireEvent } from "../../../../src/common/dom/fire_event";
+import { Supervisor } from "../../../../src/data/supervisor/supervisor";
+
+export interface SupervisorDialogSupervisorUpdateParams {
+  supervisor: Supervisor;
+  name: string;
+  version: string;
+  snapshotParams: any;
+  updateHandler: () => Promise<void>;
+}
+
+export const showDialogSupervisorUpdate = (
+  element: HTMLElement,
+  dialogParams: SupervisorDialogSupervisorUpdateParams
+): void => {
+  fireEvent(element, "show-dialog", {
+    dialogTag: "dialog-supervisor-update",
+    dialogImport: () => import("./dialog-supervisor-update"),
+    dialogParams,
+  });
+};

hassio/src/hassio-main.ts

@@ -3,7 +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 { supervisorStore } from "../../src/data/supervisor/supervisor";
+import { Supervisor } 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";
@@ -14,6 +14,8 @@ import { SupervisorBaseElement } from "./supervisor-base-element";
 export class HassioMain extends SupervisorBaseElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
+  @property({ attribute: false }) public supervisor!: Supervisor;
+
   @property({ attribute: false }) public panel!: HassioPanelInfo;
 
   @property({ type: Boolean }) public narrow!: boolean;
@@ -42,7 +44,10 @@ export class HassioMain extends SupervisorBaseElement {
     // We changed the navigate event to fire directly on the window, as that's
     // where we are listening for it. However, the older panel_custom will
     // listen on this element for navigation events, so we need to forward them.
-    window.addEventListener("location-changed", (ev) =>
+
+    // Joakim - April 26, 2021
+    // Due to changes in behavior in Google Chrome, we changed navigate to fire on the top element
+    top.addEventListener("location-changed", (ev) =>
       // @ts-ignore
       fireEvent(this, ev.type, ev.detail, {
         bubbles: false,
@@ -72,16 +77,6 @@ export class HassioMain extends SupervisorBaseElement {
   }
 
   protected render() {
-    if (!this.supervisor || !this.hass) {
-      return html`<hass-loading-screen></hass-loading-screen>`;
-    }
-
-    if (
-      Object.keys(supervisorStore).some((store) => !this.supervisor![store])
-    ) {
-      return html`<hass-loading-screen></hass-loading-screen>`;
-    }
-
     return html`
       <hassio-router
         .hass=${this.hass}

hassio/src/hassio-my-redirect.ts

@@ -19,8 +19,12 @@ import {
 } from "../../src/panels/my/ha-panel-my";
 import { navigate } from "../../src/common/navigate";
 import { HomeAssistant, Route } from "../../src/types";
+import { Supervisor } from "../../src/data/supervisor/supervisor";
 
 const REDIRECTS: Redirects = {
+  supervisor: {
+    redirect: "/hassio/dashboard",
+  },
   supervisor_logs: {
     redirect: "/hassio/system",
   },
@@ -33,22 +37,27 @@ const REDIRECTS: Redirects = {
   supervisor_store: {
     redirect: "/hassio/store",
   },
-  supervisor: {
-    redirect: "/hassio/dashboard",
-  },
   supervisor_addon: {
     redirect: "/hassio/addon",
     params: {
       addon: "string",
     },
   },
+  supervisor_add_addon_repository: {
+    redirect: "/hassio/store",
+    params: {
+      repository_url: "url",
+    },
+  },
 };
 
 @customElement("hassio-my-redirect")
 class HassioMyRedirect extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public route!: Route;
+  @property({ attribute: false }) public supervisor!: Supervisor;
+
+  @property({ attribute: false }) public route!: Route;
 
   @internalProperty() public _error?: TemplateResult | string;
 
@@ -58,15 +67,17 @@ class HassioMyRedirect extends LitElement {
     const redirect = REDIRECTS[path];
 
     if (!redirect) {
-      this._error = html`This redirect is not supported by your Home Assistant
-        instance. Check the
-        <a
+      this._error = this.supervisor.localize(
+        "my.not_supported",
+        "link",
+        html`<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.`;
+          ${this.supervisor.localize("my.faq_link")}
+        </a>`
+      );
       return;
     }
 
@@ -74,7 +85,7 @@ class HassioMyRedirect extends LitElement {
     try {
       url = this._createRedirectUrl(redirect);
     } catch (err) {
-      this._error = "An unknown error occured";
+      this._error = this.supervisor.localize("my.error");
       return;
     }
 

hassio/src/hassio-panel.ts

@@ -7,7 +7,10 @@ import {
   property,
   TemplateResult,
 } from "lit-element";
-import { Supervisor } from "../../src/data/supervisor/supervisor";
+import {
+  Supervisor,
+  supervisorCollection,
+} from "../../src/data/supervisor/supervisor";
 import { HomeAssistant, Route } from "../../src/types";
 import "./hassio-panel-router";
 
@@ -22,6 +25,17 @@ class HassioPanel extends LitElement {
   @property({ attribute: false }) public route!: Route;
 
   protected render(): TemplateResult {
+    if (!this.hass) {
+      return html`<hass-loading-screen></hass-loading-screen>`;
+    }
+
+    if (
+      Object.keys(supervisorCollection).some(
+        (collection) => !this.supervisor[collection]
+      )
+    ) {
+      return html`<hass-loading-screen></hass-loading-screen>`;
+    }
     return html`
       <hassio-panel-router
         .hass=${this.hass}

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._fetchData(),
+    initialLoad: () => this._redirectIngress(),
     showLoading: true,
     routes: {
       dashboard: {
@@ -50,7 +50,13 @@ class HassioRouter extends HassRouterPage {
 
   protected updatePageEl(el) {
     // the tabs page does its own routing so needs full route.
-    const route = el.nodeName === "HASSIO-PANEL" ? this.route : this.routeTail;
+    const hassioPanel = el.nodeName === "HASSIO-PANEL";
+    const route = hassioPanel ? this.route : this.routeTail;
+
+    if (hassioPanel && this.panel.config?.ingress) {
+      this._redirectIngress();
+      return;
+    }
 
     el.hass = this.hass;
     el.narrow = this.narrow;
@@ -63,15 +69,14 @@ class HassioRouter extends HassRouterPage {
     }
   }
 
-  private async _fetchData() {
+  private async _redirectIngress() {
     if (this.panel.config && this.panel.config.ingress) {
-      this._redirectIngress(this.panel.config.ingress);
+      this.route = {
+        prefix: "/hassio",
+        path: `/ingress/${this.panel.config.ingress}`,
+      };
     }
   }
-
-  private _redirectIngress(addonSlug: string) {
-    this.route = { prefix: "/hassio", path: `/ingress/${addonSlug}` };
-  }
 }
 
 declare global {

hassio/src/hassio-tabs.ts

@@ -3,22 +3,22 @@ import type { PageNavigation } from "../../src/layouts/hass-tabs-subpage";
 
 export const supervisorTabs: PageNavigation[] = [
   {
-    name: "Dashboard",
+    translationKey: "panel.dashboard",
     path: `/hassio/dashboard`,
     iconPath: mdiViewDashboard,
   },
   {
-    name: "Add-on Store",
+    translationKey: "panel.store",
     path: `/hassio/store`,
     iconPath: mdiStore,
   },
   {
-    name: "Snapshots",
+    translationKey: "panel.snapshots",
     path: `/hassio/snapshots`,
     iconPath: mdiBackupRestore,
   },
   {
-    name: "System",
+    translationKey: "panel.system",
     path: `/hassio/system`,
     iconPath: mdiCogs,
   },

hassio/src/snapshots/hassio-snapshots.ts

@@ -55,8 +55,8 @@ import { hassioStyle } from "../resources/hassio-style";
 
 interface CheckboxItem {
   slug: string;
-  name: string;
   checked: boolean;
+  name?: string;
 }
 
 @customElement("hassio-snapshots")
@@ -84,13 +84,12 @@ class HassioSnapshots extends LitElement {
   @internalProperty() private _folderList: CheckboxItem[] = [
     {
       slug: "homeassistant",
-      name: "Home Assistant configuration",
       checked: true,
     },
-    { slug: "ssl", name: "SSL", checked: true },
-    { slug: "share", name: "Share", checked: true },
-    { slug: "media", name: "Media", checked: true },
-    { slug: "addons/local", name: "Local add-ons", checked: true },
+    { slug: "ssl", checked: true },
+    { slug: "share", checked: true },
+    { slug: "media", checked: true },
+    { slug: "addons/local", checked: true },
   ];
 
   @internalProperty() private _error = "";
@@ -104,13 +103,16 @@ class HassioSnapshots extends LitElement {
     return html`
       <hass-tabs-subpage
         .hass=${this.hass}
+        .localizeFunc=${this.supervisor.localize}
         .narrow=${this.narrow}
-        hassio
-        main-page
         .route=${this.route}
         .tabs=${supervisorTabs}
+        main-page
+        supervisor
       >
-        <span slot="header">Snapshots</span>
+        <span slot="header">
+          ${this.supervisor.localize("panel.snapshots")}
+        </span>
         <ha-button-menu
           corner="BOTTOM_START"
           slot="toolbar-icon"
@@ -120,50 +122,50 @@ class HassioSnapshots extends LitElement {
             <ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon>
           </mwc-icon-button>
           <mwc-list-item>
-            Reload
+            ${this.supervisor.localize("common.reload")}
           </mwc-list-item>
           ${atLeastVersion(this.hass.config.version, 0, 116)
             ? html`<mwc-list-item>
-                Upload snapshot
+                ${this.supervisor.localize("snapshot.upload_snapshot")}
               </mwc-list-item>`
             : ""}
         </ha-button-menu>
 
         <div class="content">
           <h1>
-            Create Snapshot
+            ${this.supervisor.localize("snapshot.create_snapshot")}
           </h1>
           <p class="description">
-            Snapshots allow you to easily backup and restore all data of your
-            Home Assistant instance.
+            ${this.supervisor.localize("snapshot.description")}
           </p>
           <div class="card-group">
             <ha-card>
               <div class="card-content">
                 <paper-input
                   autofocus
-                  label="Name"
+                  .label=${this.supervisor.localize("snapshot.name")}
                   name="snapshotName"
                   .value=${this._snapshotName}
                   @value-changed=${this._handleTextValueChanged}
                 ></paper-input>
-                Type:
+                ${this.supervisor.localize("snapshot.type")}:
                 <paper-radio-group
                   name="snapshotType"
+                  type="${this.supervisor.localize("snapshot.type")}"
                   .selected=${this._snapshotType}
                   @selected-changed=${this._handleRadioValueChanged}
                 >
                   <paper-radio-button name="full">
-                    Full snapshot
+                    ${this.supervisor.localize("snapshot.full_snapshot")}
                   </paper-radio-button>
                   <paper-radio-button name="partial">
-                    Partial snapshot
+                    ${this.supervisor.localize("snapshot.partial_snapshot")}
                   </paper-radio-button>
                 </paper-radio-group>
                 ${this._snapshotType === "full"
                   ? undefined
                   : html`
-                      Folders:
+                      ${this.supervisor.localize("snapshot.folders")}:
                       ${this._folderList.map(
                         (folder, idx) => html`
                           <paper-checkbox
@@ -171,11 +173,13 @@ class HassioSnapshots extends LitElement {
                             .checked=${folder.checked}
                             @checked-changed=${this._folderChecked}
                           >
-                            ${folder.name}
+                            ${this.supervisor.localize(
+                              `snapshot.folder.${folder.slug}`
+                            )}
                           </paper-checkbox>
                         `
                       )}
-                      Add-ons:
+                      ${this.supervisor.localize("snapshot.addons")}:
                       ${this._addonList.map(
                         (addon, idx) => html`
                           <paper-checkbox
@@ -188,18 +192,18 @@ class HassioSnapshots extends LitElement {
                         `
                       )}
                     `}
-                Security:
+                ${this.supervisor.localize("snapshot.security")}:
                 <paper-checkbox
                   name="snapshotHasPassword"
                   .checked=${this._snapshotHasPassword}
                   @checked-changed=${this._handleCheckboxValueChanged}
                 >
-                  Password protection
+                  ${this.supervisor.localize("snapshot.password_protection")}
                 </paper-checkbox>
                 ${this._snapshotHasPassword
                   ? html`
                       <paper-input
-                        label="Password"
+                        .label=${this.supervisor.localize("snapshot.password")}
                         type="password"
                         name="snapshotPassword"
                         .value=${this._snapshotPassword}
@@ -214,18 +218,22 @@ class HassioSnapshots extends LitElement {
               <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.`
-                    : ""}"
+                  .title=${this.supervisor.info.state !== "running"
+                    ? this.supervisor.localize(
+                        "snapshot.create_blocked_not_running",
+                        "state",
+                        this.supervisor.info.state
+                      )
+                    : ""}
                   .disabled=${this.supervisor.info.state !== "running"}
                 >
-                  Create
+                  ${this.supervisor.localize("snapshot.create")}
                 </ha-progress-button>
               </div>
             </ha-card>
           </div>
 
-          <h1>Available Snapshots</h1>
+          <h1>${this.supervisor.localize("snapshot.available_snapshots")}</h1>
           <div class="card-group">
             ${this._snapshots === undefined
               ? undefined
@@ -233,7 +241,7 @@ class HassioSnapshots extends LitElement {
               ? html`
                   <ha-card>
                     <div class="card-content">
-                      You don't have any snapshots yet.
+                      ${this.supervisor.localize("snapshot.no_snapshots")}
                     </div>
                   </ha-card>
                 `
@@ -334,8 +342,12 @@ 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.`,
+        title: this.supervisor.localize("snapshot.could_not_create"),
+        text: this.supervisor.localize(
+          "snapshot.create_blocked_not_running",
+          "state",
+          this.supervisor.info.state
+        ),
       });
     }
     const button = ev.currentTarget as any;
@@ -343,7 +355,7 @@ class HassioSnapshots extends LitElement {
 
     this._error = "";
     if (this._snapshotHasPassword && !this._snapshotPassword.length) {
-      this._error = "Please enter a password.";
+      this._error = this.supervisor.localize("snapshot.enter_password");
       button.progress = false;
       return;
     }
@@ -392,7 +404,9 @@ class HassioSnapshots extends LitElement {
 
   private _computeDetails(snapshot: HassioSnapshot) {
     const type =
-      snapshot.type === "full" ? "Full snapshot" : "Partial snapshot";
+      snapshot.type === "full"
+        ? this.supervisor.localize("snapshot.full_snapshot")
+        : this.supervisor.localize("snapshot.partial_snapshot");
     return snapshot.protected ? `${type}, password protected` : type;
   }
 

hassio/src/supervisor-base-element.ts

@@ -6,11 +6,9 @@ import {
   PropertyValues,
 } from "lit-element";
 import { atLeastVersion } from "../../src/common/config/version";
+import { computeLocalize } from "../../src/common/translations/localize";
 import { fetchHassioAddonsInfo } from "../../src/data/hassio/addon";
-import {
-  hassioApiResultExtractor,
-  HassioResponse,
-} from "../../src/data/hassio/common";
+import { HassioResponse } from "../../src/data/hassio/common";
 import {
   fetchHassioHassOsInfo,
   fetchHassioHostInfo,
@@ -22,30 +20,31 @@ import {
   fetchHassioInfo,
   fetchHassioSupervisorInfo,
 } from "../../src/data/hassio/supervisor";
+import { fetchSupervisorStore } from "../../src/data/supervisor/store";
 import {
   getSupervisorEventCollection,
-  subscribeSupervisorEvents,
   Supervisor,
-  supervisorApiRequest,
-  SupervisorAPIRequestParams,
-  supervisorApiWsRequest,
   SupervisorObject,
-  supervisorStore,
+  supervisorCollection,
 } from "../../src/data/supervisor/supervisor";
 import { ProvideHassLitMixin } from "../../src/mixins/provide-hass-lit-mixin";
 import { urlSyncMixin } from "../../src/state/url-sync-mixin";
+import { HomeAssistant } from "../../src/types";
+import { getTranslation } from "../../src/util/common-translation";
 
 declare global {
   interface HASSDomEvents {
     "supervisor-update": Partial<Supervisor>;
-    "supervisor-store-refresh": { store: SupervisorObject };
+    "supervisor-collection-refresh": { collection: SupervisorObject };
   }
 }
 
 export class SupervisorBaseElement extends urlSyncMixin(
   ProvideHassLitMixin(LitElement)
 ) {
-  @property({ attribute: false }) public supervisor?: Supervisor;
+  @property({ attribute: false }) public supervisor: Partial<Supervisor> = {
+    localize: () => "",
+  };
 
   @internalProperty() private _unsubs: Record<string, UnsubscribeFunc> = {};
 
@@ -54,6 +53,13 @@ export class SupervisorBaseElement extends urlSyncMixin(
     Collection<unknown>
   > = {};
 
+  @internalProperty() private _language = "en";
+
+  public connectedCallback(): void {
+    super.connectedCallback();
+    this._initializeLocalize();
+  }
+
   public disconnectedCallback() {
     super.disconnectedCallback();
     Object.keys(this._unsubs).forEach((unsub) => {
@@ -61,138 +67,154 @@ export class SupervisorBaseElement extends urlSyncMixin(
     });
   }
 
+  protected updated(changedProperties: PropertyValues) {
+    super.updated(changedProperties);
+    if (changedProperties.has("hass")) {
+      const oldHass = changedProperties.get("hass") as
+        | HomeAssistant
+        | undefined;
+      if (
+        oldHass !== undefined &&
+        oldHass.language !== undefined &&
+        oldHass.language !== this.hass.language
+      ) {
+        this._language = this.hass.language;
+      }
+    }
+
+    if (changedProperties.has("_language")) {
+      if (changedProperties.get("_language") !== this._language) {
+        this._initializeLocalize();
+      }
+    }
+
+    if (changedProperties.has("_collections")) {
+      if (this._collections) {
+        const unsubs = Object.keys(this._unsubs);
+        for (const collection of Object.keys(this._collections)) {
+          if (!unsubs.includes(collection)) {
+            this._unsubs[collection] = this._collections[
+              collection
+            ].subscribe((data) =>
+              this._updateSupervisor({ [collection]: data })
+            );
+          }
+        }
+      }
+    }
+  }
+
   protected _updateSupervisor(obj: Partial<Supervisor>): void {
-    this.supervisor = {
-      ...this.supervisor!,
-      ...obj,
-      callApi: (params) => this._callAPI(params),
-    };
+    this.supervisor = { ...this.supervisor, ...obj };
   }
 
   protected firstUpdated(changedProps: PropertyValues): void {
     super.firstUpdated(changedProps);
+    if (
+      this._language !== this.hass.language &&
+      this.hass.language !== undefined
+    ) {
+      this._language = this.hass.language;
+    }
+    this._initializeLocalize();
     this._initSupervisor();
   }
 
+  private async _initializeLocalize() {
+    const { language, data } = await getTranslation(
+      null,
+      this._language,
+      "/api/hassio/app/static/translations"
+    );
+
+    this.supervisor = {
+      ...this.supervisor,
+      localize: await computeLocalize(this.constructor.prototype, language, {
+        [language]: data,
+      }),
+    };
+  }
+
   private async _handleSupervisorStoreRefreshEvent(ev) {
-    const store = ev.detail.store;
+    const collection = ev.detail.collection;
     if (atLeastVersion(this.hass.config.version, 2021, 2, 4)) {
-      this._collections[store].refresh();
+      this._collections[collection].refresh();
       return;
     }
 
     const response = await this.hass.callApi<HassioResponse<any>>(
       "GET",
-      `hassio${supervisorStore[store]}`
+      `hassio${supervisorCollection[collection]}`
     );
-    this._updateSupervisor({ [store]: response.data });
+    this._updateSupervisor({ [collection]: response.data });
   }
 
   private async _initSupervisor(): Promise<void> {
     this.addEventListener(
-      "supervisor-store-refresh",
+      "supervisor-collection-refresh",
       this._handleSupervisorStoreRefreshEvent
     );
 
     if (atLeastVersion(this.hass.config.version, 2021, 2, 4)) {
-      Object.keys(supervisorStore).forEach((store) => {
-        this._unsubs[store] = subscribeSupervisorEvents(
-          this.hass,
-          (data) => this._updateSupervisor({ [store]: data }),
-          store,
-          supervisorStore[store]
-        );
-        if (this._collections[store]) {
-          this._collections[store].refresh();
+      Object.keys(supervisorCollection).forEach((collection) => {
+        if (collection in this._collections) {
+          this._collections[collection].refresh();
         } else {
-          this._collections[store] = getSupervisorEventCollection(
+          this._collections[collection] = getSupervisorEventCollection(
             this.hass.connection,
-            store,
-            supervisorStore[store]
+            collection,
+            supervisorCollection[collection]
           );
         }
       });
 
-      if (this.supervisor === undefined) {
-        Object.keys(this._collections).forEach((collection) =>
+      Object.keys(this._collections).forEach((collection) => {
+        if (
+          this.supervisor === undefined ||
+          this.supervisor[collection] === undefined
+        ) {
           this._updateSupervisor({
             [collection]: this._collections[collection].state,
-          })
-        );
-      }
-      return;
-    }
-
-    const [
-      addon,
-      supervisor,
-      host,
-      core,
-      info,
-      os,
-      network,
-      resolution,
-    ] = await Promise.all([
-      fetchHassioAddonsInfo(this.hass),
-      fetchHassioSupervisorInfo(this.hass),
-      fetchHassioHostInfo(this.hass),
-      fetchHassioHomeAssistantInfo(this.hass),
-      fetchHassioInfo(this.hass),
-      fetchHassioHassOsInfo(this.hass),
-      fetchNetworkInfo(this.hass),
-      fetchHassioResolution(this.hass),
-    ]);
-
-    this.supervisor = {
-      addon,
-      supervisor,
-      host,
-      core,
-      info,
-      os,
-      network,
-      resolution,
-      callApi: (params) => this._callAPI(params),
-    };
-
-    this.addEventListener("supervisor-update", (ev) =>
-      this._updateSupervisor(ev.detail)
-    );
-  }
-
-  private async _callAPI<T>(params: SupervisorAPIRequestParams): Promise<T> {
-    const hasHass = this.hass !== undefined;
-    const canUseWS =
-      !params.rest &&
-      hasHass &&
-      atLeastVersion(this.hass.config.version, 2021, 2, 4);
-
-    if (canUseWS) {
-      const connection = hasHass ? this.hass.connection : params.connection;
-      if (connection === undefined) {
-        throw Error(`No connection found, aborting API call - ${params}`);
-      }
-      const requestParams: supervisorApiRequest = {
-        ...params,
-      };
-      delete requestParams.rest;
-      delete requestParams.connection;
-      return await supervisorApiWsRequest<T>(connection, requestParams);
+          });
+        }
+      });
     } else {
-      const method =
-        params.method === "post"
-          ? "POST"
-          : params.method === "put"
-          ? "PUT"
-          : params.method === "delete"
-          ? "DELETE"
-          : "GET";
-      return hassioApiResultExtractor<T>(
-        await this.hass.callApi<HassioResponse<T>>(
-          method,
-          `hassio${params.endpoint}`,
-          params.data
-        )
+      const [
+        addon,
+        supervisor,
+        host,
+        core,
+        info,
+        os,
+        network,
+        resolution,
+        store,
+      ] = await Promise.all([
+        fetchHassioAddonsInfo(this.hass),
+        fetchHassioSupervisorInfo(this.hass),
+        fetchHassioHostInfo(this.hass),
+        fetchHassioHomeAssistantInfo(this.hass),
+        fetchHassioInfo(this.hass),
+        fetchHassioHassOsInfo(this.hass),
+        fetchNetworkInfo(this.hass),
+        fetchHassioResolution(this.hass),
+        fetchSupervisorStore(this.hass),
+      ]);
+
+      this._updateSupervisor({
+        addon,
+        supervisor,
+        host,
+        core,
+        info,
+        os,
+        network,
+        resolution,
+        store,
+      });
+
+      this.addEventListener("supervisor-update", (ev) =>
+        this._updateSupervisor(ev.detail)
       );
     }
   }

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

@@ -30,6 +30,7 @@ import { haStyle } from "../../../src/resources/styles";
 import { HomeAssistant } from "../../../src/types";
 import { bytesToString } from "../../../src/util/bytes-to-string";
 import "../components/supervisor-metric";
+import { showDialogSupervisorUpdate } from "../dialogs/update/show-dialog-update";
 import { hassioStyle } from "../resources/hassio-style";
 
 @customElement("hassio-core-info")
@@ -43,11 +44,11 @@ class HassioCoreInfo extends LitElement {
   protected render(): TemplateResult | void {
     const metrics = [
       {
-        description: "Core CPU Usage",
+        description: this.supervisor.localize("system.core.cpu_usage"),
         value: this._metrics?.cpu_percent,
       },
       {
-        description: "Core RAM Usage",
+        description: this.supervisor.localize("system.core.ram_usage"),
         value: this._metrics?.memory_percent,
         tooltip: `${bytesToString(this._metrics?.memory_usage)}/${bytesToString(
           this._metrics?.memory_limit
@@ -61,7 +62,7 @@ class HassioCoreInfo extends LitElement {
           <div>
             <ha-settings-row>
               <span slot="heading">
-                Version
+                ${this.supervisor.localize("common.version")}
               </span>
               <span slot="description">
                 core-${this.supervisor.core.version}
@@ -69,7 +70,7 @@ class HassioCoreInfo extends LitElement {
             </ha-settings-row>
             <ha-settings-row>
               <span slot="heading">
-                Newest Version
+                ${this.supervisor.localize("common.newest_version")}
               </span>
               <span slot="description">
                 core-${this.supervisor.core.version_latest}
@@ -77,10 +78,10 @@ class HassioCoreInfo extends LitElement {
               ${this.supervisor.core.update_available
                 ? html`
                     <ha-progress-button
-                      title="Update the core"
+                      .title=${this.supervisor.localize("common.update")}
                       @click=${this._coreUpdate}
                     >
-                      Update
+                      ${this.supervisor.localize("common.update")}
                     </ha-progress-button>
                   `
                 : ""}
@@ -104,9 +105,13 @@ class HassioCoreInfo extends LitElement {
             slot="primaryAction"
             class="warning"
             @click=${this._coreRestart}
-            title="Restart Home Assistant Core"
+            .title=${this.supervisor.localize(
+              "common.restart_name",
+              "name",
+              "Core"
+            )}
           >
-            Restart Core
+            ${this.supervisor.localize("common.restart_name", "name", "Core")}
           </ha-progress-button>
         </div>
       </ha-card>
@@ -126,10 +131,18 @@ class HassioCoreInfo extends LitElement {
     button.progress = true;
 
     const confirmed = await showConfirmationDialog(this, {
-      title: "Restart Home Assistant Core",
-      text: "Are you sure you want to restart Home Assistant Core",
-      confirmText: "restart",
-      dismissText: "cancel",
+      title: this.supervisor.localize(
+        "confirm.restart.title",
+        "name",
+        "Home Assistant Core"
+      ),
+      text: this.supervisor.localize(
+        "confirm.restart.text",
+        "name",
+        "Home Assistant Core"
+      ),
+      confirmText: this.supervisor.localize("common.restart"),
+      dismissText: this.supervisor.localize("common.cancel"),
     });
 
     if (!confirmed) {
@@ -140,42 +153,40 @@ class HassioCoreInfo extends LitElement {
     try {
       await restartCore(this.hass);
     } catch (err) {
-      showAlertDialog(this, {
-        title: "Failed to restart Home Assistant Core",
-        text: extractApiErrorMessage(err),
-      });
+      if (this.hass.connection.connected) {
+        showAlertDialog(this, {
+          title: this.supervisor.localize(
+            "common.failed_to_restart_name",
+            "name",
+            "Home AssistantCore"
+          ),
+          text: extractApiErrorMessage(err),
+        });
+      }
     } finally {
       button.progress = false;
     }
   }
 
-  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",
+  private async _coreUpdate(): Promise<void> {
+    showDialogSupervisorUpdate(this, {
+      supervisor: this.supervisor,
+      name: "Home Assistant Core",
+      version: this.supervisor.core.version_latest,
+      snapshotParams: {
+        name: `core_${this.supervisor.core.version}`,
+        folders: ["homeassistant"],
+        homeassistant: true,
+      },
+      updateHandler: async () => await this._updateCore(),
     });
+  }
 
-    if (!confirmed) {
-      button.progress = false;
-      return;
-    }
-
-    try {
-      await updateCore(this.hass);
-      fireEvent(this, "supervisor-store-refresh", { store: "core" });
-    } catch (err) {
-      showAlertDialog(this, {
-        title: "Failed to update Home Assistant Core",
-        text: extractApiErrorMessage(err),
-      });
-    } finally {
-      button.progress = false;
-    }
+  private async _updateCore(): Promise<void> {
+    await updateCore(this.hass);
+    fireEvent(this, "supervisor-collection-refresh", {
+      collection: "core",
+    });
   }
 
   static get styles(): CSSResult[] {

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

@@ -21,7 +21,7 @@ import "../../../src/components/ha-card";
 import "../../../src/components/ha-settings-row";
 import {
   extractApiErrorMessage,
-  ignoredStatusCodes,
+  ignoreSupervisorError,
 } from "../../../src/data/hassio/common";
 import { fetchHassioHardwareInfo } from "../../../src/data/hassio/hardware";
 import {
@@ -65,7 +65,7 @@ class HassioHostInfo extends LitElement {
 
     const metrics = [
       {
-        description: "Used Space",
+        description: this.supervisor.localize("system.host.used_space"),
         value: this._getUsedSpace(
           this.supervisor.host.disk_used,
           this.supervisor.host.disk_total
@@ -80,14 +80,13 @@ class HassioHostInfo extends LitElement {
             ${this.supervisor.host.features.includes("hostname")
               ? html`<ha-settings-row>
                   <span slot="heading">
-                    Hostname
+                    ${this.supervisor.localize("system.host.hostname")}
                   </span>
                   <span slot="description">
                     ${this.supervisor.host.hostname}
                   </span>
                   <mwc-button
-                    title="Change the hostname"
-                    label="Change"
+                    .label=${this.supervisor.localize("system.host.change")}
                     @click=${this._changeHostnameClicked}
                   >
                   </mwc-button>
@@ -96,14 +95,13 @@ class HassioHostInfo extends LitElement {
             ${this.supervisor.host.features.includes("network")
               ? html` <ha-settings-row>
                   <span slot="heading">
-                    IP Address
+                    ${this.supervisor.localize("system.host.ip_address")}
                   </span>
                   <span slot="description">
                     ${primaryIpAddress}
                   </span>
                   <mwc-button
-                    title="Change the network"
-                    label="Change"
+                    .label=${this.supervisor.localize("system.host.change")}
                     @click=${this._changeNetworkClicked}
                   >
                   </mwc-button>
@@ -112,18 +110,15 @@ class HassioHostInfo extends LitElement {
 
             <ha-settings-row>
               <span slot="heading">
-                Operating System
+                ${this.supervisor.localize("system.host.operating_system")}
               </span>
               <span slot="description">
                 ${this.supervisor.host.operating_system}
               </span>
               ${this.supervisor.os.update_available
                 ? html`
-                    <ha-progress-button
-                      title="Update the host OS"
-                      @click=${this._osUpdate}
-                    >
-                      Update
+                    <ha-progress-button @click=${this._osUpdate}>
+                      ${this.supervisor.localize("commmon.update")}
                     </ha-progress-button>
                   `
                 : ""}
@@ -131,7 +126,7 @@ class HassioHostInfo extends LitElement {
             ${!this.supervisor.host.features.includes("hassos")
               ? html`<ha-settings-row>
                   <span slot="heading">
-                    Docker version
+                    ${this.supervisor.localize("system.host.docker_version")}
                   </span>
                   <span slot="description">
                     ${this.supervisor.info.docker}
@@ -141,7 +136,7 @@ class HassioHostInfo extends LitElement {
             ${this.supervisor.host.deployment
               ? html`<ha-settings-row>
                   <span slot="heading">
-                    Deployment
+                    ${this.supervisor.localize("system.host.deployment")}
                   </span>
                   <span slot="description">
                     ${this.supervisor.host.deployment}
@@ -154,11 +149,13 @@ class HassioHostInfo extends LitElement {
             this.supervisor.host.disk_life_time >= 10
               ? html` <ha-settings-row>
                   <span slot="heading">
-                    eMMC Lifetime Used
+                    ${this.supervisor.localize(
+                      "system.host.emmc_lifetime_used"
+                    )}
                   </span>
                   <span slot="description">
-                    ${this.supervisor.host.disk_life_time - 10}% -
-                    ${this.supervisor.host.disk_life_time}%
+                    ${this.supervisor.host.disk_life_time - 10} % -
+                    ${this.supervisor.host.disk_life_time} %
                   </span>
                 </ha-settings-row>`
               : ""}
@@ -177,23 +174,18 @@ class HassioHostInfo extends LitElement {
         <div class="card-actions">
           ${this.supervisor.host.features.includes("reboot")
             ? html`
-                <ha-progress-button
-                  title="Reboot the host OS"
-                  class="warning"
-                  @click=${this._hostReboot}
-                >
-                  Reboot Host
+                <ha-progress-button class="warning" @click=${this._hostReboot}>
+                  ${this.supervisor.localize("system.host.reboot_host")}
                 </ha-progress-button>
               `
             : ""}
           ${this.supervisor.host.features.includes("shutdown")
             ? html`
                 <ha-progress-button
-                  title="Shutdown the host OS"
                   class="warning"
                   @click=${this._hostShutdown}
                 >
-                  Shutdown Host
+                  ${this.supervisor.localize("system.host.shutdown_host")}
                 </ha-progress-button>
               `
             : ""}
@@ -205,14 +197,12 @@ class HassioHostInfo extends LitElement {
             <mwc-icon-button slot="trigger">
               <ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon>
             </mwc-icon-button>
-            <mwc-list-item title="Show a list of hardware">
-              Hardware
+            <mwc-list-item>
+              ${this.supervisor.localize("system.host.hardware")}
             </mwc-list-item>
             ${this.supervisor.host.features.includes("hassos")
-              ? html`<mwc-list-item
-                  title="Load HassOS configs or updates from USB"
-                >
-                  Import from USB
+              ? html`<mwc-list-item>
+                  ${this.supervisor.localize("system.host.import_from_usb")}
                 </mwc-list-item>`
               : ""}
           </ha-button-menu>
@@ -251,12 +241,14 @@ class HassioHostInfo extends LitElement {
     try {
       const content = await fetchHassioHardwareInfo(this.hass);
       showHassioMarkdownDialog(this, {
-        title: "Hardware",
+        title: this.supervisor.localize("system.host.hardware"),
         content: `<pre>${safeDump(content, { indent: 2 })}</pre>`,
       });
     } catch (err) {
       showAlertDialog(this, {
-        title: "Failed to get hardware list",
+        title: this.supervisor.localize(
+          "system.host.failed_to_get_hardware_list"
+        ),
         text: extractApiErrorMessage(err),
       });
     }
@@ -267,10 +259,10 @@ class HassioHostInfo extends LitElement {
     button.progress = true;
 
     const confirmed = await showConfirmationDialog(this, {
-      title: "Reboot",
-      text: "Are you sure you want to reboot the host?",
-      confirmText: "reboot host",
-      dismissText: "no",
+      title: this.supervisor.localize("system.host.reboot_host"),
+      text: this.supervisor.localize("system.host.confirm_reboot"),
+      confirmText: this.supervisor.localize("system.host.reboot_host"),
+      dismissText: this.supervisor.localize("common.cancel"),
     });
 
     if (!confirmed) {
@@ -282,9 +274,9 @@ class HassioHostInfo extends LitElement {
       await rebootHost(this.hass);
     } catch (err) {
       // Ignore connection errors, these are all expected
-      if (err.status_code && !ignoredStatusCodes.has(err.status_code)) {
+      if (this.hass.connection.connected && !ignoreSupervisorError(err)) {
         showAlertDialog(this, {
-          title: "Failed to reboot",
+          title: this.supervisor.localize("system.host.failed_to_reboot"),
           text: extractApiErrorMessage(err),
         });
       }
@@ -297,10 +289,10 @@ class HassioHostInfo extends LitElement {
     button.progress = true;
 
     const confirmed = await showConfirmationDialog(this, {
-      title: "Shutdown",
-      text: "Are you sure you want to shutdown the host?",
-      confirmText: "shutdown host",
-      dismissText: "no",
+      title: this.supervisor.localize("system.host.shutdown_host"),
+      text: this.supervisor.localize("system.host.confirm_shutdown"),
+      confirmText: this.supervisor.localize("system.host.shutdown_host"),
+      dismissText: this.supervisor.localize("common.cancel"),
     });
 
     if (!confirmed) {
@@ -312,9 +304,9 @@ class HassioHostInfo extends LitElement {
       await shutdownHost(this.hass);
     } catch (err) {
       // Ignore connection errors, these are all expected
-      if (err.status_code && !ignoredStatusCodes.has(err.status_code)) {
+      if (this.hass.connection.connected && !ignoreSupervisorError(err)) {
         showAlertDialog(this, {
-          title: "Failed to shutdown",
+          title: this.supervisor.localize("system.host.failed_to_shutdown"),
           text: extractApiErrorMessage(err),
         });
       }
@@ -327,9 +319,19 @@ class HassioHostInfo extends LitElement {
     button.progress = true;
 
     const confirmed = await showConfirmationDialog(this, {
-      title: "Update",
-      text: "Are you sure you want to update the OS?",
-      confirmText: "update os",
+      title: this.supervisor.localize(
+        "confirm.update.title",
+        "name",
+        "Home Assistant Operating System"
+      ),
+      text: this.supervisor.localize(
+        "confirm.update.text",
+        "name",
+        "Home Assistant Operating System",
+        "version",
+        this.supervisor.os.version_latest
+      ),
+      confirmText: this.supervisor.localize("common.update"),
       dismissText: "no",
     });
 
@@ -340,19 +342,25 @@ class HassioHostInfo extends LitElement {
 
     try {
       await updateOS(this.hass);
-      fireEvent(this, "supervisor-store-refresh", { store: "os" });
+      fireEvent(this, "supervisor-collection-refresh", { collection: "os" });
     } catch (err) {
-      showAlertDialog(this, {
-        title: "Failed to update",
-        text: extractApiErrorMessage(err),
-      });
+      if (this.hass.connection.connected) {
+        showAlertDialog(this, {
+          title: this.supervisor.localize(
+            "common.failed_to_update_name",
+            "name",
+            "Home Assistant Operating System"
+          ),
+          text: extractApiErrorMessage(err),
+        });
+      }
     }
     button.progress = false;
   }
 
   private async _changeNetworkClicked(): Promise<void> {
     showNetworkDialog(this, {
-      network: this.supervisor.network!,
+      supervisor: this.supervisor,
       loadData: () => this._loadData(),
     });
   }
@@ -360,19 +368,22 @@ class HassioHostInfo extends LitElement {
   private async _changeHostnameClicked(): Promise<void> {
     const curHostname: string = this.supervisor.host.hostname;
     const hostname = await showPromptDialog(this, {
-      title: "Change Hostname",
-      inputLabel: "Please enter a new hostname:",
+      title: this.supervisor.localize("system.host.change_hostname"),
+      inputLabel: this.supervisor.localize("system.host.new_hostname"),
       inputType: "string",
       defaultValue: curHostname,
+      confirmText: this.supervisor.localize("common.update"),
     });
 
     if (hostname && hostname !== curHostname) {
       try {
         await changeHostOptions(this.hass, { hostname });
-        fireEvent(this, "supervisor-store-refresh", { store: "host" });
+        fireEvent(this, "supervisor-collection-refresh", {
+          collection: "host",
+        });
       } catch (err) {
         showAlertDialog(this, {
-          title: "Setting hostname failed",
+          title: this.supervisor.localize("system.host.failed_to_set_hostname"),
           text: extractApiErrorMessage(err),
         });
       }
@@ -382,10 +393,14 @@ class HassioHostInfo extends LitElement {
   private async _importFromUSB(): Promise<void> {
     try {
       await configSyncOS(this.hass);
-      fireEvent(this, "supervisor-store-refresh", { store: "host" });
+      fireEvent(this, "supervisor-collection-refresh", {
+        collection: "host",
+      });
     } catch (err) {
       showAlertDialog(this, {
-        title: "Failed to import from USB",
+        title: this.supervisor.localize(
+          "system.host.failed_to_import_from_usb"
+        ),
         text: extractApiErrorMessage(err),
       });
     }
@@ -393,7 +408,9 @@ class HassioHostInfo extends LitElement {
 
   private async _loadData(): Promise<void> {
     if (atLeastVersion(this.hass.config.version, 2021, 2, 4)) {
-      fireEvent(this, "supervisor-store-refresh", { store: "network" });
+      fireEvent(this, "supervisor-collection-refresh", {
+        collection: "network",
+      });
     } else {
       const network = await fetchNetworkInfo(this.hass);
       fireEvent(this, "supervisor-update", { network });

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

@@ -8,6 +8,7 @@ import {
   property,
   TemplateResult,
 } from "lit-element";
+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-card";
@@ -37,54 +38,27 @@ import { documentationUrl } from "../../../src/util/documentation-url";
 import "../components/supervisor-metric";
 import { hassioStyle } from "../resources/hassio-style";
 
-const UNSUPPORTED_REASON = {
-  container: {
-    title: "Containers known to cause issues",
-    url: "/more-info/unsupported/container",
-  },
-  dbus: { title: "DBUS", url: "/more-info/unsupported/dbus" },
-  docker_configuration: {
-    title: "Docker Configuration",
-    url: "/more-info/unsupported/docker_configuration",
-  },
-  docker_version: {
-    title: "Docker Version",
-    url: "/more-info/unsupported/docker_version",
-  },
-  job_conditions: {
-    title: "Ignored job conditions",
-    url: "/more-info/unsupported/job_conditions",
-  },
-  lxc: { title: "LXC", url: "/more-info/unsupported/lxc" },
-  network_manager: {
-    title: "Network Manager",
-    url: "/more-info/unsupported/network_manager",
-  },
-  os: { title: "Operating System", url: "/more-info/unsupported/os" },
-  privileged: {
-    title: "Supervisor is not privileged",
-    url: "/more-info/unsupported/privileged",
-  },
-  systemd: { title: "Systemd", url: "/more-info/unsupported/systemd" },
+const UNSUPPORTED_REASON_URL = {
+  apparmor: "/more-info/unsupported/apparmor",
+  container: "/more-info/unsupported/container",
+  dbus: "/more-info/unsupported/dbus",
+  docker_configuration: "/more-info/unsupported/docker_configuration",
+  docker_version: "/more-info/unsupported/docker_version",
+  job_conditions: "/more-info/unsupported/job_conditions",
+  lxc: "/more-info/unsupported/lxc",
+  network_manager: "/more-info/unsupported/network_manager",
+  os: "/more-info/unsupported/os",
+  privileged: "/more-info/unsupported/privileged",
+  systemd: "/more-info/unsupported/systemd",
+  content_trust: "/more-info/unsupported/content_trust",
 };
 
-const UNHEALTHY_REASON = {
-  privileged: {
-    title: "Supervisor is not privileged",
-    url: "/more-info/unsupported/privileged",
-  },
-  supervisor: {
-    title: "Supervisor was not able to update",
-    url: "/more-info/unhealthy/supervisor",
-  },
-  setup: {
-    title: "Setup of the Supervisor failed",
-    url: "/more-info/unhealthy/setup",
-  },
-  docker: {
-    title: "The Docker environment is not working properly",
-    url: "/more-info/unhealthy/docker",
-  },
+const UNHEALTHY_REASON_URL = {
+  privileged: "/more-info/unsupported/privileged",
+  supervisor: "/more-info/unhealthy/supervisor",
+  setup: "/more-info/unhealthy/setup",
+  docker: "/more-info/unhealthy/docker",
+  untrusted: "/more-info/unhealthy/untrusted",
 };
 
 @customElement("hassio-supervisor-info")
@@ -98,11 +72,11 @@ class HassioSupervisorInfo extends LitElement {
   protected render(): TemplateResult | void {
     const metrics = [
       {
-        description: "Supervisor CPU Usage",
+        description: this.supervisor.localize("system.supervisor.cpu_usage"),
         value: this._metrics?.cpu_percent,
       },
       {
-        description: "Supervisor RAM Usage",
+        description: this.supervisor.localize("system.supervisor.ram_usage"),
         value: this._metrics?.memory_percent,
         tooltip: `${bytesToString(this._metrics?.memory_usage)}/${bytesToString(
           this._metrics?.memory_limit
@@ -115,7 +89,7 @@ class HassioSupervisorInfo extends LitElement {
           <div>
             <ha-settings-row>
               <span slot="heading">
-                Version
+                ${this.supervisor.localize("common.version")}
               </span>
               <span slot="description">
                 supervisor-${this.supervisor.supervisor.version}
@@ -123,7 +97,7 @@ class HassioSupervisorInfo extends LitElement {
             </ha-settings-row>
             <ha-settings-row>
               <span slot="heading">
-                Newest Version
+                ${this.supervisor.localize("common.newest_version")}
               </span>
               <span slot="description">
                 supervisor-${this.supervisor.supervisor.version_latest}
@@ -131,17 +105,19 @@ class HassioSupervisorInfo extends LitElement {
               ${this.supervisor.supervisor.update_available
                 ? html`
                     <ha-progress-button
-                      title="Update the supervisor"
+                      .title=${this.supervisor.localize(
+                        "system.supervisor.update_supervisor"
+                      )}
                       @click=${this._supervisorUpdate}
                     >
-                      Update
+                      ${this.supervisor.localize("common.update")}
                     </ha-progress-button>
                   `
                 : ""}
             </ha-settings-row>
             <ha-settings-row>
               <span slot="heading">
-                Channel
+                ${this.supervisor.localize("system.supervisor.channel")}
               </span>
               <span slot="description">
                 ${this.supervisor.supervisor.channel}
@@ -150,49 +126,65 @@ class HassioSupervisorInfo extends LitElement {
                 ? html`
                     <ha-progress-button
                       @click=${this._toggleBeta}
-                      title="Get stable updates for Home Assistant, supervisor and host"
+                      .title=${this.supervisor.localize(
+                        "system.supervisor.leave_beta_description"
+                      )}
                     >
-                      Leave beta channel
+                      ${this.supervisor.localize(
+                        "system.supervisor.leave_beta_action"
+                      )}
                     </ha-progress-button>
                   `
                 : this.supervisor.supervisor.channel === "stable"
                 ? html`
                     <ha-progress-button
                       @click=${this._toggleBeta}
-                      title="Get beta updates for Home Assistant (RCs), supervisor and host"
+                      .title=${this.supervisor.localize(
+                        "system.supervisor.join_beta_description"
+                      )}
                     >
-                      Join beta channel
+                      ${this.supervisor.localize(
+                        "system.supervisor.join_beta_action"
+                      )}
                     </ha-progress-button>
                   `
                 : ""}
             </ha-settings-row>
 
             ${this.supervisor.supervisor.supported
-              ? html` <ha-settings-row three-line>
-                  <span slot="heading">
-                    Share Diagnostics
-                  </span>
-                  <div slot="description" class="diagnostics-description">
-                    Share crash reports and diagnostic information.
-                    <button
-                      class="link"
-                      title="Show more information about this"
-                      @click=${this._diagnosticsInformationDialog}
-                    >
-                      Learn more
-                    </button>
-                  </div>
-                  <ha-switch
-                    haptic
-                    .checked=${this.supervisor.supervisor.diagnostics}
-                    @change=${this._toggleDiagnostics}
-                  ></ha-switch>
-                </ha-settings-row>`
+              ? !atLeastVersion(this.hass.config.version, 2021, 4)
+                ? html` <ha-settings-row three-line>
+                    <span slot="heading">
+                      ${this.supervisor.localize(
+                        "system.supervisor.share_diagnostics"
+                      )}
+                    </span>
+                    <div slot="description" class="diagnostics-description">
+                      ${this.supervisor.localize(
+                        "system.supervisor.share_diagnostics_description"
+                      )}
+                      <button
+                        class="link"
+                        .title=${this.supervisor.localize("common.show_more")}
+                        @click=${this._diagnosticsInformationDialog}
+                      >
+                        ${this.supervisor.localize("common.learn_more")}
+                      </button>
+                    </div>
+                    <ha-switch
+                      haptic
+                      .checked=${this.supervisor.supervisor.diagnostics}
+                      @change=${this._toggleDiagnostics}
+                    ></ha-switch>
+                  </ha-settings-row>`
+                : ""
               : html`<div class="error">
-                  You are running an unsupported installation.
+                  ${this.supervisor.localize(
+                    "system.supervisor.unsupported_title"
+                  )}
                   <button
                     class="link"
-                    title="Learn more about how you can make your system compliant"
+                    .title=${this.supervisor.localize("common.learn_more")}
                     @click=${this._unsupportedDialog}
                   >
                     Learn more
@@ -200,10 +192,12 @@ class HassioSupervisorInfo extends LitElement {
                 </div>`}
             ${!this.supervisor.supervisor.healthy
               ? html`<div class="error">
-                  Your installation is running in an unhealthy state.
+                  ${this.supervisor.localize(
+                    "system.supervisor.unhealthy_title"
+                  )}
                   <button
                     class="link"
-                    title="Learn more about why your system is marked as unhealthy"
+                    .title=${this.supervisor.localize("common.learn_more")}
                     @click=${this._unhealthyDialog}
                   >
                     Learn more
@@ -227,16 +221,26 @@ class HassioSupervisorInfo extends LitElement {
         <div class="card-actions">
           <ha-progress-button
             @click=${this._supervisorReload}
-            title="Reload parts of the Supervisor"
+            .title=${this.supervisor.localize(
+              "system.supervisor.reload_supervisor"
+            )}
           >
-            Reload Supervisor
+            ${this.supervisor.localize("system.supervisor.reload_supervisor")}
           </ha-progress-button>
           <ha-progress-button
             class="warning"
             @click=${this._supervisorRestart}
-            title="Restart the Supervisor"
+            .title=${this.supervisor.localize(
+              "common.restart_name",
+              "name",
+              "Supervisor"
+            )}
           >
-            Restart Supervisor
+            ${this.supervisor.localize(
+              "common.restart_name",
+              "name",
+              "Supervisor"
+            )}
           </ha-progress-button>
         </div>
       </ha-card>
@@ -257,23 +261,25 @@ class HassioSupervisorInfo extends LitElement {
 
     if (this.supervisor.supervisor.channel === "stable") {
       const confirmed = await showConfirmationDialog(this, {
-        title: "WARNING",
-        text: html` Beta releases are for testers and early adopters and can
-          contain unstable code changes.
+        title: this.supervisor.localize("system.supervisor.warning"),
+        text: html`${this.supervisor.localize("system.supervisor.beta_warning")}
           <br />
           <b>
-            Make sure you have backups of your data before you activate this
-            feature.
+            ${this.supervisor.localize("system.supervisor.beta_backup")}
           </b>
           <br /><br />
-          This includes beta releases for:
-          <li>Home Assistant Core</li>
-          <li>Home Assistant Supervisor</li>
-          <li>Home Assistant Operating System</li>
+          ${this.supervisor.localize("system.supervisor.beta_release_items")}
+          <ul>
+            <li>Home Assistant Core</li>
+            <li>Home Assistant Supervisor</li>
+            <li>Home Assistant Operating System</li>
+          </ul>
           <br />
-          Do you want to join the beta channel?`,
-        confirmText: "join beta",
-        dismissText: "no",
+          ${this.supervisor.localize("system.supervisor.beta_join_confirm")}`,
+        confirmText: this.supervisor.localize(
+          "system.supervisor.join_beta_action"
+        ),
+        dismissText: this.supervisor.localize("common.cancel"),
       });
 
       if (!confirmed) {
@@ -291,7 +297,9 @@ class HassioSupervisorInfo extends LitElement {
       await this._reloadSupervisor();
     } catch (err) {
       showAlertDialog(this, {
-        title: "Failed to set supervisor option",
+        title: this.supervisor.localize(
+          "system.supervisor.failed_to_set_option"
+        ),
         text: extractApiErrorMessage(err),
       });
     } finally {
@@ -307,7 +315,7 @@ class HassioSupervisorInfo extends LitElement {
       await this._reloadSupervisor();
     } catch (err) {
       showAlertDialog(this, {
-        title: "Failed to reload the supervisor",
+        title: this.supervisor.localize("system.supervisor.failed_to_reload"),
         text: extractApiErrorMessage(err),
       });
     } finally {
@@ -317,7 +325,9 @@ class HassioSupervisorInfo extends LitElement {
 
   private async _reloadSupervisor(): Promise<void> {
     await reloadSupervisor(this.hass);
-    fireEvent(this, "supervisor-store-refresh", { store: "supervisor" });
+    fireEvent(this, "supervisor-collection-refresh", {
+      collection: "supervisor",
+    });
   }
 
   private async _supervisorRestart(ev: CustomEvent): Promise<void> {
@@ -325,10 +335,18 @@ class HassioSupervisorInfo extends LitElement {
     button.progress = true;
 
     const confirmed = await showConfirmationDialog(this, {
-      title: "Restart the Supervisor",
-      text: "Are you sure you want to restart the Supervisor",
-      confirmText: "restart",
-      dismissText: "cancel",
+      title: this.supervisor.localize(
+        "confirm.restart.title",
+        "name",
+        "Supervisor"
+      ),
+      text: this.supervisor.localize(
+        "confirm.restart.text",
+        "name",
+        "Supervisor"
+      ),
+      confirmText: this.supervisor.localize("common.restart"),
+      dismissText: this.supervisor.localize("common.cancel"),
     });
 
     if (!confirmed) {
@@ -340,7 +358,11 @@ class HassioSupervisorInfo extends LitElement {
       await restartSupervisor(this.hass);
     } catch (err) {
       showAlertDialog(this, {
-        title: "Failed to restart the supervisor",
+        title: this.supervisor.localize(
+          "common.failed_to_restart_name",
+          "name",
+          "Supervisor"
+        ),
         text: extractApiErrorMessage(err),
       });
     } finally {
@@ -353,10 +375,20 @@ class HassioSupervisorInfo extends LitElement {
     button.progress = true;
 
     const confirmed = await showConfirmationDialog(this, {
-      title: "Update Supervisor",
-      text: `Are you sure you want to update supervisor to version ${this.supervisor.supervisor.version_latest}?`,
-      confirmText: "update",
-      dismissText: "cancel",
+      title: this.supervisor.localize(
+        "confirm.update.title",
+        "name",
+        "Supervisor"
+      ),
+      text: this.supervisor.localize(
+        "confirm.update.text",
+        "name",
+        "Supervisor",
+        "version",
+        this.supervisor.supervisor.version_latest
+      ),
+      confirmText: this.supervisor.localize("common.update"),
+      dismissText: this.supervisor.localize("common.cancel"),
     });
 
     if (!confirmed) {
@@ -366,10 +398,16 @@ class HassioSupervisorInfo extends LitElement {
 
     try {
       await updateSupervisor(this.hass);
-      fireEvent(this, "supervisor-store-refresh", { store: "supervisor" });
+      fireEvent(this, "supervisor-collection-refresh", {
+        collection: "supervisor",
+      });
     } catch (err) {
       showAlertDialog(this, {
-        title: "Failed to update the supervisor",
+        title: this.supervisor.localize(
+          "common.failed_to_update_name",
+          "name",
+          "Supervisor"
+        ),
         text: extractApiErrorMessage(err),
       });
     } finally {
@@ -379,40 +417,41 @@ class HassioSupervisorInfo extends LitElement {
 
   private async _diagnosticsInformationDialog(): Promise<void> {
     await showAlertDialog(this, {
-      title: "Help Improve Home Assistant",
-      text: html`Would you want to automatically share crash reports and
-        diagnostic information when the supervisor encounters unexpected errors?
-        <br /><br />
-        This will allow us to fix the problems, the information is only
-        accessible to the Home Assistant Core team and will not be shared with
-        others.
-        <br /><br />
-        The data does not include any private/sensitive information and you can
-        disable this in settings at any time you want.`,
+      title: this.supervisor.localize(
+        "system.supervisor.share_diagonstics_title"
+      ),
+      text: this.supervisor.localize(
+        "system.supervisor.share_diagonstics_description",
+        "line_break",
+        html`<br /><br />`
+      ),
     });
   }
 
   private async _unsupportedDialog(): Promise<void> {
     await showAlertDialog(this, {
-      title: "You are running an unsupported installation",
-      text: html`Below is a list of issues found with your installation, click
-        on the links to learn how you can resolve the issues. <br /><br />
+      title: this.supervisor.localize("system.supervisor.unsupported_title"),
+      text: html`${this.supervisor.localize(
+          "system.supervisor.unsupported_description"
+        )} <br /><br />
         <ul>
           ${this.supervisor.resolution.unsupported.map(
-            (issue) => html`
+            (reason) => html`
               <li>
-                ${UNSUPPORTED_REASON[issue]
+                ${UNSUPPORTED_REASON_URL[reason]
                   ? html`<a
                       href="${documentationUrl(
                         this.hass,
-                        UNSUPPORTED_REASON[issue].url
+                        UNSUPPORTED_REASON_URL[reason]
                       )}"
                       target="_blank"
                       rel="noreferrer"
                     >
-                      ${UNSUPPORTED_REASON[issue].title}
+                      ${this.supervisor.localize(
+                        `system.supervisor.unsupported_reason.${reason}`
+                      ) || reason}
                     </a>`
-                  : issue}
+                  : reason}
               </li>
             `
           )}
@@ -422,26 +461,28 @@ class HassioSupervisorInfo extends LitElement {
 
   private async _unhealthyDialog(): Promise<void> {
     await showAlertDialog(this, {
-      title: "Your installation is unhealthy",
-      text: html`Running an unhealthy installation will cause issues. Below is a
-        list of issues found with your installation, click on the links to learn
-        how you can resolve the issues. <br /><br />
+      title: this.supervisor.localize("system.supervisor.unhealthy_title"),
+      text: html`${this.supervisor.localize(
+          "system.supervisor.unhealthy_description"
+        )} <br /><br />
         <ul>
           ${this.supervisor.resolution.unhealthy.map(
-            (issue) => html`
+            (reason) => html`
               <li>
-                ${UNHEALTHY_REASON[issue]
+                ${UNHEALTHY_REASON_URL[reason]
                   ? html`<a
                       href="${documentationUrl(
                         this.hass,
-                        UNHEALTHY_REASON[issue].url
+                        UNHEALTHY_REASON_URL[reason]
                       )}"
                       target="_blank"
                       rel="noreferrer"
                     >
-                      ${UNHEALTHY_REASON[issue].title}
+                      ${this.supervisor.localize(
+                        `system.supervisor.unhealthy_reason.${reason}`
+                      ) || reason}
                     </a>`
-                  : issue}
+                  : reason}
               </li>
             `
           )}
@@ -457,7 +498,9 @@ class HassioSupervisorInfo extends LitElement {
       await setSupervisorOption(this.hass, data);
     } catch (err) {
       showAlertDialog(this, {
-        title: "Failed to set supervisor option",
+        title: this.supervisor.localize(
+          "system.supervisor.failed_to_set_option"
+        ),
         text: extractApiErrorMessage(err),
       });
     }

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

@@ -16,6 +16,7 @@ import "../../../src/components/buttons/ha-progress-button";
 import "../../../src/components/ha-card";
 import { extractApiErrorMessage } from "../../../src/data/hassio/common";
 import { fetchHassioLogs } from "../../../src/data/hassio/supervisor";
+import { Supervisor } from "../../../src/data/supervisor/supervisor";
 import "../../../src/layouts/hass-loading-screen";
 import { haStyle } from "../../../src/resources/styles";
 import { HomeAssistant } from "../../../src/types";
@@ -58,6 +59,8 @@ const logProviders: LogProvider[] = [
 class HassioSupervisorLog extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
+  @property({ attribute: false }) public supervisor!: Supervisor;
+
   @internalProperty() private _error?: string;
 
   @internalProperty() private _selectedLogProvider = "supervisor";
@@ -76,7 +79,7 @@ class HassioSupervisorLog extends LitElement {
         ${this.hass.userData?.showAdvanced
           ? html`
               <paper-dropdown-menu
-                label="Log Provider"
+                .label=${this.supervisor.localize("system.log.log_provider")}
                 @iron-select=${this._setLogProvider}
               >
                 <paper-listbox
@@ -86,9 +89,9 @@ class HassioSupervisorLog extends LitElement {
                 >
                   ${logProviders.map((provider) => {
                     return html`
-                      <paper-item provider=${provider.key}
-                        >${provider.name}</paper-item
-                      >
+                      <paper-item provider=${provider.key}>
+                        ${provider.name}
+                      </paper-item>
                     `;
                   })}
                 </paper-listbox>
@@ -98,14 +101,13 @@ class HassioSupervisorLog extends LitElement {
 
         <div class="card-content" id="content">
           ${this._content
-            ? html`<hassio-ansi-to-html
-                .content=${this._content}
-              ></hassio-ansi-to-html>`
+            ? html`<hassio-ansi-to-html .content=${this._content}>
+              </hassio-ansi-to-html>`
             : html`<hass-loading-screen no-toolbar></hass-loading-screen>`}
         </div>
         <div class="card-actions">
           <ha-progress-button @click=${this._refresh}>
-            Refresh
+            ${this.supervisor.localize("common.refresh")}
           </ha-progress-button>
         </div>
       </ha-card>
@@ -134,9 +136,13 @@ class HassioSupervisorLog extends LitElement {
         this._selectedLogProvider
       );
     } catch (err) {
-      this._error = `Failed to get supervisor logs, ${extractApiErrorMessage(
-        err
-      )}`;
+      this._error = this.supervisor.localize(
+        "system.log.get_logs",
+        "provider",
+        this._selectedLogProvider,
+        "error",
+        extractApiErrorMessage(err)
+      );
     }
   }
 

hassio/src/system/hassio-system.ts

@@ -32,13 +32,16 @@ class HassioSystem extends LitElement {
     return html`
       <hass-tabs-subpage
         .hass=${this.hass}
+        .localizeFunc=${this.supervisor.localize}
         .narrow=${this.narrow}
-        hassio
-        main-page
         .route=${this.route}
         .tabs=${supervisorTabs}
+        main-page
+        supervisor
       >
-        <span slot="header">System</span>
+        <span slot="header">
+          ${this.supervisor.localize("panel.system")}
+        </span>
         <div class="content">
           <div class="card-group">
             <hassio-core-info
@@ -54,7 +57,10 @@ class HassioSystem extends LitElement {
               .supervisor=${this.supervisor}
             ></hassio-host-info>
           </div>
-          <hassio-supervisor-log .hass=${this.hass}></hassio-supervisor-log>
+          <hassio-supervisor-log
+            .hass=${this.hass}
+            .supervisor=${this.supervisor}
+          ></hassio-supervisor-log>
         </div>
       </hass-tabs-subpage>
     `;

package.json

@@ -23,6 +23,17 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@braintree/sanitize-url": "^5.0.0",
+    "@codemirror/commands": "^0.18.0",
+    "@codemirror/gutter": "^0.18.0",
+    "@codemirror/highlight": "^0.18.0",
+    "@codemirror/history": "^0.18.0",
+    "@codemirror/legacy-modes": "^0.18.0",
+    "@codemirror/rectangular-selection": "^0.18.0",
+    "@codemirror/search": "^0.18.0",
+    "@codemirror/state": "^0.18.0",
+    "@codemirror/stream-parser": "^0.18.0",
+    "@codemirror/text": "^0.18.0",
+    "@codemirror/view": "^0.18.0",
     "@formatjs/intl-getcanonicallocales": "^1.4.6",
     "@formatjs/intl-pluralrules": "^3.4.10",
     "@fullcalendar/common": "5.1.0",
@@ -46,8 +57,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.6.55",
-    "@mdi/svg": "5.6.55",
+    "@mdi/js": "5.9.55",
+    "@mdi/svg": "5.9.55",
     "@polymer/app-layout": "^3.0.2",
     "@polymer/app-route": "^3.0.2",
     "@polymer/app-storage": "^3.0.2",
@@ -80,8 +91,6 @@
     "@polymer/paper-tooltip": "^3.0.1",
     "@polymer/polymer": "3.1.0",
     "@thomasloven/round-slider": "0.5.2",
-    "@types/chromecast-caf-sender": "^1.0.3",
-    "@types/sortablejs": "^1.10.6",
     "@vaadin/vaadin-combo-box": "^5.0.10",
     "@vaadin/vaadin-date-picker": "^4.0.7",
     "@vibrant/color": "^3.2.1-alpha.1",
@@ -91,7 +100,6 @@
     "@webcomponents/webcomponentsjs": "^2.2.7",
     "chart.js": "~2.8.0",
     "chartjs-chart-timeline": "^0.3.0",
-    "codemirror": "^5.49.0",
     "comlink": "^4.3.0",
     "core-js": "^3.6.5",
     "cropperjs": "^1.5.7",
@@ -100,8 +108,8 @@
     "fecha": "^4.2.0",
     "fuse.js": "^6.0.0",
     "google-timezones-json": "^1.0.2",
-    "hls.js": "^0.13.2",
-    "home-assistant-js-websocket": "^5.8.1",
+    "hls.js": "^1.0.1",
+    "home-assistant-js-websocket": "^5.9.0",
     "idb-keyval": "^3.2.0",
     "intl-messageformat": "^8.3.9",
     "js-yaml": "^3.13.1",
@@ -123,6 +131,7 @@
     "sortablejs": "^1.10.2",
     "superstruct": "^0.10.13",
     "tinykeys": "^1.1.1",
+    "tsparticles": "^1.19.2",
     "unfetch": "^4.1.0",
     "vis-data": "^7.1.1",
     "vis-network": "^8.5.4",
@@ -156,8 +165,8 @@
     "@rollup/plugin-replace": "^2.3.2",
     "@types/chai": "^4.1.7",
     "@types/chromecast-caf-receiver": "^5.0.11",
+    "@types/chromecast-caf-sender": "^1.0.3",
     "@types/codemirror": "^0.0.97",
-    "@types/hls.js": "^0.12.3",
     "@types/js-yaml": "^3.12.1",
     "@types/leaflet": "^1.4.3",
     "@types/leaflet-draw": "^1.0.1",
@@ -165,6 +174,7 @@
     "@types/memoize-one": "4.1.0",
     "@types/mocha": "^7.0.2",
     "@types/resize-observer-browser": "^0.1.3",
+    "@types/sortablejs": "^1.10.6",
     "@types/webspeechapi": "^0.0.29",
     "@typescript-eslint/eslint-plugin": "^4.4.0",
     "@typescript-eslint/parser": "^4.4.0",
@@ -177,7 +187,7 @@
     "eslint": "^6.8.0",
     "eslint-config-airbnb-typescript": "^7.2.1",
     "eslint-config-prettier": "^6.10.1",
-    "eslint-import-resolver-webpack": "^0.12.2",
+    "eslint-import-resolver-webpack": "^0.13.0",
     "eslint-plugin-disable": "^2.0.1",
     "eslint-plugin-import": "^2.20.2",
     "eslint-plugin-lit": "^1.2.0",
@@ -213,16 +223,16 @@
     "sinon": "^7.3.1",
     "source-map-url": "^0.4.0",
     "systemjs": "^6.3.2",
-    "terser-webpack-plugin": "^5.0.0",
+    "terser-webpack-plugin": "^5.1.1",
     "ts-lit-plugin": "^1.2.1",
     "ts-mocha": "^7.0.0",
-    "typescript": "^4.0.3",
+    "typescript": "^4.2.4",
     "vinyl-buffer": "^1.0.1",
     "vinyl-source-stream": "^2.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",
+    "webpack": "^5.24.1",
+    "webpack-cli": "^4.5.0",
+    "webpack-dev-server": "^3.11.2",
+    "webpack-manifest-plugin": "^3.0.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 sdist
+python3 setup.py -q sdist
 python3 -m twine upload dist/* --skip-existing

script/version_bump.js

@@ -10,10 +10,10 @@ function patch(version) {
 
 function today() {
   const now = new Date();
-  return `${now.getFullYear()}${String(now.getMonth() + 1).padStart(
+  return `${now.getUTCFullYear()}${String(now.getUTCMonth() + 1).padStart(
     2,
     "0"
-  )}${String(now.getDate()).padStart(2, "0")}.0`;
+  )}${String(now.getUTCDate()).padStart(2, "0")}.0`;
 }
 
 function auto(version) {

setup.py

@@ -2,12 +2,12 @@ from setuptools import setup, find_packages
 
 setup(
     name="home-assistant-frontend",
-    version="20210208.0",
+    version="20210423.0",
     description="The Home Assistant frontend",
     url="https://github.com/home-assistant/home-assistant-polymer",
     author="The Home Assistant Authors",
     author_email="hello@home-assistant.io",
-    license="Apache License 2.0",
+    license="Apache-2.0",
     packages=find_packages(include=["hass_frontend", "hass_frontend.*"]),
     include_package_data=True,
     zip_safe=False,

src/auth/ha-authorize.ts

@@ -8,6 +8,7 @@ import {
   PropertyValues,
 } from "lit-element";
 import punycode from "punycode";
+import { applyThemesOnElement } from "../common/dom/apply_themes_on_element";
 import { extractSearchParamsObject } from "../common/url/search-params";
 import {
   AuthProvider,
@@ -116,6 +117,20 @@ class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
     this._fetchAuthProviders();
     this._fetchDiscoveryInfo();
 
+    if (matchMedia("(prefers-color-scheme: dark)").matches) {
+      applyThemesOnElement(
+        document.documentElement,
+        {
+          default_theme: "default",
+          default_dark_theme: null,
+          themes: {},
+          darkMode: false,
+        },
+        "default",
+        { dark: true }
+      );
+    }
+
     if (!this.redirectUri) {
       return;
     }

src/cast/receiver_messages.ts

@@ -62,7 +62,7 @@ export const ensureConnectedCastSession = (cast: CastManager, auth: Auth) => {
     return undefined;
   }
 
-  return new Promise((resolve) => {
+  return new Promise<void>((resolve) => {
     const unsub = cast.addEventListener("connection-changed", () => {
       if (cast.castConnectedToOurHass) {
         unsub();

src/common/config/version.ts

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

src/common/const.ts

@@ -56,6 +56,8 @@ export const FIXED_DOMAIN_ICONS = {
 
 export const FIXED_DEVICE_CLASS_ICONS = {
   current: "hass:current-ac",
+  carbon_dioxide: "mdi:molecule-co2",
+  carbon_monoxide: "mdi:molecule-co",
   energy: "hass:flash",
   humidity: "hass:water-percent",
   illuminance: "hass:brightness-5",
@@ -103,6 +105,7 @@ export const DOMAINS_WITH_MORE_INFO = [
   "lock",
   "media_player",
   "person",
+  "remote",
   "script",
   "sun",
   "timer",

src/common/datetime/format_date.ts

@@ -1,9 +1,10 @@
 import { format } from "fecha";
+import { FrontendTranslationData } from "../../data/translation";
 import { toLocaleDateStringSupportsOptions } from "./check_options_support";
 
 export const formatDate = toLocaleDateStringSupportsOptions
-  ? (dateObj: Date, locales: string) =>
-      dateObj.toLocaleDateString(locales, {
+  ? (dateObj: Date, locales: FrontendTranslationData) =>
+      dateObj.toLocaleDateString(locales.language, {
         year: "numeric",
         month: "long",
         day: "numeric",
@@ -11,8 +12,8 @@ export const formatDate = toLocaleDateStringSupportsOptions
   : (dateObj: Date) => format(dateObj, "longDate");
 
 export const formatDateWeekday = toLocaleDateStringSupportsOptions
-  ? (dateObj: Date, locales: string) =>
-      dateObj.toLocaleDateString(locales, {
+  ? (dateObj: Date, locales: FrontendTranslationData) =>
+      dateObj.toLocaleDateString(locales.language, {
         weekday: "long",
         month: "short",
         day: "numeric",

src/common/datetime/format_date_time.ts

@@ -1,9 +1,10 @@
 import { format } from "fecha";
+import { FrontendTranslationData } from "../../data/translation";
 import { toLocaleStringSupportsOptions } from "./check_options_support";
 
 export const formatDateTime = toLocaleStringSupportsOptions
-  ? (dateObj: Date, locales: string) =>
-      dateObj.toLocaleString(locales, {
+  ? (dateObj: Date, locales: FrontendTranslationData) =>
+      dateObj.toLocaleString(locales.language, {
         year: "numeric",
         month: "long",
         day: "numeric",
@@ -13,8 +14,8 @@ export const formatDateTime = toLocaleStringSupportsOptions
   : (dateObj: Date) => format(dateObj, "MMMM D, YYYY, HH:mm");
 
 export const formatDateTimeWithSeconds = toLocaleStringSupportsOptions
-  ? (dateObj: Date, locales: string) =>
-      dateObj.toLocaleString(locales, {
+  ? (dateObj: Date, locales: FrontendTranslationData) =>
+      dateObj.toLocaleString(locales.language, {
         year: "numeric",
         month: "long",
         day: "numeric",

src/common/datetime/format_time.ts

@@ -1,17 +1,18 @@
 import { format } from "fecha";
+import { FrontendTranslationData } from "../../data/translation";
 import { toLocaleTimeStringSupportsOptions } from "./check_options_support";
 
 export const formatTime = toLocaleTimeStringSupportsOptions
-  ? (dateObj: Date, locales: string) =>
-      dateObj.toLocaleTimeString(locales, {
+  ? (dateObj: Date, locales: FrontendTranslationData) =>
+      dateObj.toLocaleTimeString(locales.language, {
         hour: "numeric",
         minute: "2-digit",
       })
   : (dateObj: Date) => format(dateObj, "shortTime");
 
 export const formatTimeWithSeconds = toLocaleTimeStringSupportsOptions
-  ? (dateObj: Date, locales: string) =>
-      dateObj.toLocaleTimeString(locales, {
+  ? (dateObj: Date, locales: FrontendTranslationData) =>
+      dateObj.toLocaleTimeString(locales.language, {
         hour: "numeric",
         minute: "2-digit",
         second: "2-digit",
@@ -19,8 +20,8 @@ export const formatTimeWithSeconds = toLocaleTimeStringSupportsOptions
   : (dateObj: Date) => format(dateObj, "mediumTime");
 
 export const formatTimeWeekday = toLocaleTimeStringSupportsOptions
-  ? (dateObj: Date, locales: string) =>
-      dateObj.toLocaleTimeString(locales, {
+  ? (dateObj: Date, locales: FrontendTranslationData) =>
+      dateObj.toLocaleTimeString(locales.language, {
         weekday: "long",
         hour: "numeric",
         minute: "2-digit",

src/common/dom/apply_themes_on_element.ts

@@ -70,13 +70,18 @@ export const applyThemesOnElement = (
       themeRules["text-accent-color"] =
         rgbContrast(rgbAccentColor, [33, 33, 33]) < 6 ? "#fff" : "#212121";
     }
+
+    // Nothing was changed
+    if (element._themes?.cacheKey === cacheKey) {
+      return;
+    }
   }
 
   if (selectedTheme && themes.themes[selectedTheme]) {
     themeRules = themes.themes[selectedTheme];
   }
 
-  if (!element._themes && !Object.keys(themeRules).length) {
+  if (!element._themes?.keys && !Object.keys(themeRules).length) {
     // No styles to reset, and no styles to set
     return;
   }
@@ -87,8 +92,8 @@ export const applyThemesOnElement = (
       : undefined;
 
   // Add previous set keys to reset them, and new theme
-  const styles = { ...element._themes, ...newTheme?.styles };
-  element._themes = newTheme?.keys;
+  const styles = { ...element._themes?.keys, ...newTheme?.styles };
+  element._themes = { cacheKey, keys: newTheme?.keys };
 
   // Set and/or reset styles
   if (element.updateStyles) {

src/common/ensure-array.ts

@@ -1,6 +1,10 @@
-export const ensureArray = (value?: any) => {
-  if (!value || Array.isArray(value)) {
+type NonUndefined<T> = T extends undefined ? never : T;
+
+export function ensureArray(value: undefined): undefined;
+export function ensureArray<T>(value: T | T[]): NonUndefined<T>[];
+export function ensureArray(value) {
+  if (value === undefined || Array.isArray(value)) {
     return value;
   }
   return [value];
-};
+}

src/common/entity/battery_icon.ts

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

src/common/entity/compute_state_display.ts

@@ -1,5 +1,6 @@
 import { HassEntity } from "home-assistant-js-websocket";
 import { UNAVAILABLE, UNKNOWN } from "../../data/entity";
+import { FrontendTranslationData } from "../../data/translation";
 import { formatDate } from "../datetime/format_date";
 import { formatDateTime } from "../datetime/format_date_time";
 import { formatTime } from "../datetime/format_time";
@@ -10,7 +11,7 @@ import { computeStateDomain } from "./compute_state_domain";
 export const computeStateDisplay = (
   localize: LocalizeFunc,
   stateObj: HassEntity,
-  language: string,
+  locale: FrontendTranslationData,
   state?: string
 ): string => {
   const compareState = state !== undefined ? state : stateObj.state;
@@ -20,7 +21,7 @@ export const computeStateDisplay = (
   }
 
   if (stateObj.attributes.unit_of_measurement) {
-    return `${formatNumber(compareState, language)} ${
+    return `${formatNumber(compareState, locale)} ${
       stateObj.attributes.unit_of_measurement
     }`;
   }
@@ -35,7 +36,7 @@ export const computeStateDisplay = (
         stateObj.attributes.month - 1,
         stateObj.attributes.day
       );
-      return formatDate(date, language);
+      return formatDate(date, locale);
     }
     if (!stateObj.attributes.has_date) {
       const now = new Date();
@@ -48,7 +49,7 @@ export const computeStateDisplay = (
         stateObj.attributes.hour,
         stateObj.attributes.minute
       );
-      return formatTime(date, language);
+      return formatTime(date, locale);
     }
 
     date = new Date(
@@ -58,7 +59,7 @@ export const computeStateDisplay = (
       stateObj.attributes.hour,
       stateObj.attributes.minute
     );
-    return formatDateTime(date, language);
+    return formatDateTime(date, locale);
   }
 
   if (domain === "humidifier") {
@@ -67,8 +68,13 @@ export const computeStateDisplay = (
     }
   }
 
-  if (domain === "counter") {
-    return formatNumber(compareState, language);
+  // `counter` `number` and `input_number` domains do not have a unit of measurement but should still use `formatNumber`
+  if (
+    domain === "counter" ||
+    domain === "number" ||
+    domain === "input_number"
+  ) {
+    return formatNumber(compareState, locale);
   }
 
   return (

src/common/navigate.ts

@@ -12,16 +12,24 @@ declare global {
 export const navigate = (_node: any, path: string, replace = false) => {
   if (__DEMO__) {
     if (replace) {
-      history.replaceState(null, "", `${location.pathname}#${path}`);
+      top.history.replaceState(
+        top.history.state?.root ? { root: true } : null,
+        "",
+        `${top.location.pathname}#${path}`
+      );
     } else {
-      window.location.hash = path;
+      top.location.hash = path;
     }
   } else if (replace) {
-    history.replaceState(null, "", path);
+    top.history.replaceState(
+      top.history.state?.root ? { root: true } : null,
+      "",
+      path
+    );
   } else {
-    history.pushState(null, "", path);
+    top.history.pushState(null, "", path);
   }
-  fireEvent(window, "location-changed", {
+  fireEvent(top, "location-changed", {
     replace,
   });
 };

src/common/string/filter/filter.ts

@@ -34,14 +34,12 @@ const _maxLen = 128;
 
 function initTable() {
   const table: number[][] = [];
-  const row: number[] = [0];
-  for (let i = 1; i <= _maxLen; i++) {
-    row.push(-i);
+  const row: number[] = [];
+  for (let i = 0; i <= _maxLen; i++) {
+    row[i] = 0;
   }
   for (let i = 0; i <= _maxLen; i++) {
-    const thisRow = row.slice(0);
-    thisRow[0] = -i;
-    table.push(thisRow);
+    table.push(row.slice(0));
   }
   return table;
 }
@@ -50,7 +48,7 @@ function isSeparatorAtPos(value: string, index: number): boolean {
   if (index < 0 || index >= value.length) {
     return false;
   }
-  const code = value.charCodeAt(index);
+  const code = value.codePointAt(index);
   switch (code) {
     case CharCode.Underline:
     case CharCode.Dash:
@@ -62,8 +60,16 @@ function isSeparatorAtPos(value: string, index: number): boolean {
     case CharCode.DoubleQuote:
     case CharCode.Colon:
     case CharCode.DollarSign:
+    case CharCode.LessThan:
+    case CharCode.OpenParen:
+    case CharCode.OpenSquareBracket:
       return true;
+    case undefined:
+      return false;
     default:
+      if (isEmojiImprecise(code)) {
+        return true;
+      }
       return false;
   }
 }
@@ -92,10 +98,15 @@ function isPatternInWord(
   patternLen: number,
   wordLow: string,
   wordPos: number,
-  wordLen: number
+  wordLen: number,
+  fillMinWordPosArr = false
 ): boolean {
   while (patternPos < patternLen && wordPos < wordLen) {
     if (patternLow[patternPos] === wordLow[wordPos]) {
+      if (fillMinWordPosArr) {
+        // Remember the min word position for each pattern position
+        _minWordMatchPos[patternPos] = wordPos;
+      }
       patternPos += 1;
     }
     wordPos += 1;
@@ -104,42 +115,22 @@ function isPatternInWord(
 }
 
 enum Arrow {
-  Top = 0b1,
-  Diag = 0b10,
-  Left = 0b100,
+  Diag = 1,
+  Left = 2,
+  LeftLeft = 3,
 }
 
 /**
- * A tuple of three values.
+ * An array representating a fuzzy match.
+ *
  * 0. the score
- * 1. the matches encoded as bitmask (2^53)
- * 2. the offset at which matching started
+ * 1. the offset at which matching started
+ * 2. `<match_pos_N>`
+ * 3. `<match_pos_1>`
+ * 4. `<match_pos_0>` etc
  */
-export type FuzzyScore = [number, number, number];
-
-interface FilterGlobals {
-  _matchesCount: number;
-  _topMatch2: number;
-  _topScore: number;
-  _wordStart: number;
-  _firstMatchCanBeWeak: boolean;
-  _table: number[][];
-  _scores: number[][];
-  _arrows: Arrow[][];
-}
-
-function initGlobals(): FilterGlobals {
-  return {
-    _matchesCount: 0,
-    _topMatch2: 0,
-    _topScore: 0,
-    _wordStart: 0,
-    _firstMatchCanBeWeak: false,
-    _table: initTable(),
-    _scores: initTable(),
-    _arrows: <Arrow[][]>initTable(),
-  };
-}
+// export type FuzzyScore = [score: number, wordStart: number, ...matches: number[]];// [number, number, number];
+export type FuzzyScore = Array<number>;
 
 export function fuzzyScore(
   pattern: string,
@@ -150,7 +141,6 @@ export function fuzzyScore(
   wordStart: number,
   firstMatchCanBeWeak: boolean
 ): FuzzyScore | undefined {
-  const globals = initGlobals();
   const patternLen = pattern.length > _maxLen ? _maxLen : pattern.length;
   const wordLen = word.length > _maxLen ? _maxLen : word.length;
 
@@ -172,18 +162,30 @@ export function fuzzyScore(
       patternLen,
       wordLow,
       wordStart,
-      wordLen
+      wordLen,
+      true
     )
   ) {
     return undefined;
   }
 
+  // Find the max matching word position for each pattern position
+  // NOTE: the min matching word position was filled in above, in the `isPatternInWord` call
+  _fillInMaxWordMatchPos(
+    patternLen,
+    wordLen,
+    patternStart,
+    wordStart,
+    patternLow,
+    wordLow
+  );
+
   let row = 1;
   let column = 1;
   let patternPos = patternStart;
   let wordPos = wordStart;
 
-  let hasStrongFirstMatch = false;
+  const hasStrongFirstMatch = [false];
 
   // There will be a match, fill in tables
   for (
@@ -191,83 +193,146 @@ export function fuzzyScore(
     patternPos < patternLen;
     row++, patternPos++
   ) {
+    // Reduce search space to possible matching word positions and to possible access from next row
+    const minWordMatchPos = _minWordMatchPos[patternPos];
+    const maxWordMatchPos = _maxWordMatchPos[patternPos];
+    const nextMaxWordMatchPos =
+      patternPos + 1 < patternLen ? _maxWordMatchPos[patternPos + 1] : wordLen;
+
     for (
-      column = 1, wordPos = wordStart;
-      wordPos < wordLen;
+      column = minWordMatchPos - wordStart + 1, wordPos = minWordMatchPos;
+      wordPos < nextMaxWordMatchPos;
       column++, wordPos++
     ) {
-      const score = _doScore(
-        pattern,
-        patternLow,
-        patternPos,
-        patternStart,
-        word,
-        wordLow,
-        wordPos
-      );
+      let score = Number.MIN_SAFE_INTEGER;
+      let canComeDiag = false;
 
-      if (patternPos === patternStart && score > 1) {
-        hasStrongFirstMatch = true;
+      if (wordPos <= maxWordMatchPos) {
+        score = _doScore(
+          pattern,
+          patternLow,
+          patternPos,
+          patternStart,
+          word,
+          wordLow,
+          wordPos,
+          wordLen,
+          wordStart,
+          _diag[row - 1][column - 1] === 0,
+          hasStrongFirstMatch
+        );
       }
 
-      globals._scores[row][column] = score;
+      let diagScore = 0;
+      if (score !== Number.MAX_SAFE_INTEGER) {
+        canComeDiag = true;
+        diagScore = score + _table[row - 1][column - 1];
+      }
 
-      const diag =
-        globals._table[row - 1][column - 1] + (score > 1 ? 1 : score);
-      const top = globals._table[row - 1][column] + -1;
-      const left = globals._table[row][column - 1] + -1;
+      const canComeLeft = wordPos > minWordMatchPos;
+      const leftScore = canComeLeft
+        ? _table[row][column - 1] + (_diag[row][column - 1] > 0 ? -5 : 0)
+        : 0; // penalty for a gap start
 
-      if (left >= top) {
-        // left or diag
-        if (left > diag) {
-          globals._table[row][column] = left;
-          globals._arrows[row][column] = Arrow.Left;
-        } else if (left === diag) {
-          globals._table[row][column] = left;
-          globals._arrows[row][column] = Arrow.Left || Arrow.Diag;
-        } else {
-          globals._table[row][column] = diag;
-          globals._arrows[row][column] = Arrow.Diag;
-        }
-      } else if (top > diag) {
-        globals._table[row][column] = top;
-        globals._arrows[row][column] = Arrow.Top;
-      } else if (top === diag) {
-        globals._table[row][column] = top;
-        globals._arrows[row][column] = Arrow.Top || Arrow.Diag;
+      const canComeLeftLeft =
+        wordPos > minWordMatchPos + 1 && _diag[row][column - 1] > 0;
+      const leftLeftScore = canComeLeftLeft
+        ? _table[row][column - 2] + (_diag[row][column - 2] > 0 ? -5 : 0)
+        : 0; // penalty for a gap start
+
+      if (
+        canComeLeftLeft &&
+        (!canComeLeft || leftLeftScore >= leftScore) &&
+        (!canComeDiag || leftLeftScore >= diagScore)
+      ) {
+        // always prefer choosing left left to jump over a diagonal because that means a match is earlier in the word
+        _table[row][column] = leftLeftScore;
+        _arrows[row][column] = Arrow.LeftLeft;
+        _diag[row][column] = 0;
+      } else if (canComeLeft && (!canComeDiag || leftScore >= diagScore)) {
+        // always prefer choosing left since that means a match is earlier in the word
+        _table[row][column] = leftScore;
+        _arrows[row][column] = Arrow.Left;
+        _diag[row][column] = 0;
+      } else if (canComeDiag) {
+        _table[row][column] = diagScore;
+        _arrows[row][column] = Arrow.Diag;
+        _diag[row][column] = _diag[row - 1][column - 1] + 1;
       } else {
-        globals._table[row][column] = diag;
-        globals._arrows[row][column] = Arrow.Diag;
+        throw new Error(`not possible`);
       }
     }
   }
 
   if (_debug) {
-    printTables(pattern, patternStart, word, wordStart, globals);
+    printTables(pattern, patternStart, word, wordStart);
   }
 
-  if (!hasStrongFirstMatch && !firstMatchCanBeWeak) {
+  if (!hasStrongFirstMatch[0] && !firstMatchCanBeWeak) {
     return undefined;
   }
 
-  globals._matchesCount = 0;
-  globals._topScore = -100;
-  globals._wordStart = wordStart;
-  globals._firstMatchCanBeWeak = firstMatchCanBeWeak;
+  row--;
+  column--;
 
-  _findAllMatches2(
-    row - 1,
-    column - 1,
-    patternLen === wordLen ? 1 : 0,
-    0,
-    false,
-    globals
-  );
-  if (globals._matchesCount === 0) {
-    return undefined;
+  const result: FuzzyScore = [_table[row][column], wordStart];
+
+  let backwardsDiagLength = 0;
+  let maxMatchColumn = 0;
+
+  while (row >= 1) {
+    // Find the column where we go diagonally up
+    let diagColumn = column;
+    do {
+      const arrow = _arrows[row][diagColumn];
+      if (arrow === Arrow.LeftLeft) {
+        diagColumn -= 2;
+      } else if (arrow === Arrow.Left) {
+        diagColumn -= 1;
+      } else {
+        // found the diagonal
+        break;
+      }
+    } while (diagColumn >= 1);
+
+    // Overturn the "forwards" decision if keeping the "backwards" diagonal would give a better match
+    if (
+      backwardsDiagLength > 1 && // only if we would have a contiguous match of 3 characters
+      patternLow[patternStart + row - 1] === wordLow[wordStart + column - 1] && // only if we can do a contiguous match diagonally
+      !isUpperCaseAtPos(diagColumn + wordStart - 1, word, wordLow) && // only if the forwards chose diagonal is not an uppercase
+      backwardsDiagLength + 1 > _diag[row][diagColumn] // only if our contiguous match would be longer than the "forwards" contiguous match
+    ) {
+      diagColumn = column;
+    }
+
+    if (diagColumn === column) {
+      // this is a contiguous match
+      backwardsDiagLength++;
+    } else {
+      backwardsDiagLength = 1;
+    }
+
+    if (!maxMatchColumn) {
+      // remember the last matched column
+      maxMatchColumn = diagColumn;
+    }
+
+    row--;
+    column = diagColumn - 1;
+    result.push(column);
   }
 
-  return [globals._topScore, globals._topMatch2, wordStart];
+  if (wordLen === patternLen) {
+    // the word matches the pattern with all characters!
+    // giving the score a total match boost (to come up ahead other words)
+    result[0] += 2;
+  }
+
+  // Add 1 penalty for each skipped character in the word
+  const skippedCharsCount = maxMatchColumn - patternLen;
+  result[0] -= skippedCharsCount;
+
+  return result;
 }
 
 function _doScore(
@@ -277,50 +342,81 @@ function _doScore(
   patternStart: number,
   word: string,
   wordLow: string,
-  wordPos: number
-) {
+  wordPos: number,
+  wordLen: number,
+  wordStart: number,
+  newMatchStart: boolean,
+  outFirstMatchStrong: boolean[]
+): number {
   if (patternLow[patternPos] !== wordLow[wordPos]) {
-    return -1;
+    return Number.MIN_SAFE_INTEGER;
   }
+
+  let score = 1;
+  let isGapLocation = false;
   if (wordPos === patternPos - patternStart) {
     // common prefix: `foobar <-> foobaz`
     //                            ^^^^^
-    if (pattern[patternPos] === word[wordPos]) {
-      return 7;
-    }
-    return 5;
-  }
-
-  if (
+    score = pattern[patternPos] === word[wordPos] ? 7 : 5;
+  } else if (
     isUpperCaseAtPos(wordPos, word, wordLow) &&
     (wordPos === 0 || !isUpperCaseAtPos(wordPos - 1, word, wordLow))
   ) {
     // hitting upper-case: `foo <-> forOthers`
     //                              ^^ ^
-    if (pattern[patternPos] === word[wordPos]) {
-      return 7;
-    }
-    return 5;
-  }
-
-  if (
+    score = pattern[patternPos] === word[wordPos] ? 7 : 5;
+    isGapLocation = true;
+  } else if (
     isSeparatorAtPos(wordLow, wordPos) &&
     (wordPos === 0 || !isSeparatorAtPos(wordLow, wordPos - 1))
   ) {
     // hitting a separator: `. <-> foo.bar`
     //                                ^
-    return 5;
-  }
-
-  if (
+    score = 5;
+  } else if (
     isSeparatorAtPos(wordLow, wordPos - 1) ||
     isWhitespaceAtPos(wordLow, wordPos - 1)
   ) {
     // post separator: `foo <-> bar_foo`
     //                              ^^^
-    return 5;
+    score = 5;
+    isGapLocation = true;
   }
-  return 1;
+
+  if (score > 1 && patternPos === patternStart) {
+    outFirstMatchStrong[0] = true;
+  }
+
+  if (!isGapLocation) {
+    isGapLocation =
+      isUpperCaseAtPos(wordPos, word, wordLow) ||
+      isSeparatorAtPos(wordLow, wordPos - 1) ||
+      isWhitespaceAtPos(wordLow, wordPos - 1);
+  }
+
+  //
+  if (patternPos === patternStart) {
+    // first character in pattern
+    if (wordPos > wordStart) {
+      // the first pattern character would match a word character that is not at the word start
+      // so introduce a penalty to account for the gap preceding this match
+      score -= isGapLocation ? 3 : 5;
+    }
+  } else if (newMatchStart) {
+    // this would be the beginning of a new match (i.e. there would be a gap before this location)
+    score += isGapLocation ? 2 : 0;
+  } else {
+    // this is part of a contiguous match, so give it a slight bonus, but do so only if it would not be a prefered gap location
+    score += isGapLocation ? 0 : 1;
+  }
+
+  if (wordPos + 1 === wordLen) {
+    // we always penalize gaps, but this gives unfair advantages to a match that would match the last character in the word
+    // so pretend there is a gap after the last character in the word to normalize things
+    score -= isGapLocation ? 3 : 5;
+  }
+
+  return score;
 }
 
 function printTable(
@@ -360,104 +456,96 @@ function printTables(
   pattern: string,
   patternStart: number,
   word: string,
-  wordStart: number,
-  globals: FilterGlobals
+  wordStart: number
 ): void {
   pattern = pattern.substr(patternStart);
   word = word.substr(wordStart);
-  console.log(
-    printTable(globals._table, pattern, pattern.length, word, word.length)
-  );
-  console.log(
-    printTable(globals._arrows, pattern, pattern.length, word, word.length)
-  );
-  console.log(
-    printTable(globals._scores, pattern, pattern.length, word, word.length)
-  );
+  console.log(printTable(_table, pattern, pattern.length, word, word.length));
+  console.log(printTable(_arrows, pattern, pattern.length, word, word.length));
+  console.log(printTable(_diag, pattern, pattern.length, word, word.length));
 }
 
-function _findAllMatches2(
-  row: number,
-  column: number,
-  total: number,
-  matches: number,
-  lastMatched: boolean,
-  globals: FilterGlobals
-): void {
-  if (globals._matchesCount >= 10 || total < -25) {
-    // stop when having already 10 results, or
-    // when a potential alignment as already 5 gaps
-    return;
+const _minWordMatchPos = initArr(2 * _maxLen); // min word position for a certain pattern position
+const _maxWordMatchPos = initArr(2 * _maxLen); // max word position for a certain pattern position
+const _diag = initTable(); // the length of a contiguous diagonal match
+const _table = initTable();
+const _arrows = <Arrow[][]>initTable();
+
+function initArr(maxLen: number) {
+  const row: number[] = [];
+  for (let i = 0; i <= maxLen; i++) {
+    row[i] = 0;
   }
+  return row;
+}
 
-  let simpleMatchCount = 0;
+function _fillInMaxWordMatchPos(
+  patternLen: number,
+  wordLen: number,
+  patternStart: number,
+  wordStart: number,
+  patternLow: string,
+  wordLow: string
+) {
+  let patternPos = patternLen - 1;
+  let wordPos = wordLen - 1;
+  while (patternPos >= patternStart && wordPos >= wordStart) {
+    if (patternLow[patternPos] === wordLow[wordPos]) {
+      _maxWordMatchPos[patternPos] = wordPos;
+      patternPos--;
+    }
+    wordPos--;
+  }
+}
 
-  while (row > 0 && column > 0) {
-    const score = globals._scores[row][column];
-    const arrow = globals._arrows[row][column];
+export interface FuzzyScorer {
+  (
+    pattern: string,
+    lowPattern: string,
+    patternPos: number,
+    word: string,
+    lowWord: string,
+    wordPos: number,
+    firstMatchCanBeWeak: boolean
+  ): FuzzyScore | undefined;
+}
 
-    if (arrow === Arrow.Left) {
-      // left -> no match, skip a word character
-      column -= 1;
-      if (lastMatched) {
-        total -= 5; // new gap penalty
-      } else if (matches !== 0) {
-        total -= 1; // gap penalty after first match
-      }
-      lastMatched = false;
-      simpleMatchCount = 0;
-    } else if (arrow && Arrow.Diag) {
-      if (arrow && Arrow.Left) {
-        // left
-        _findAllMatches2(
-          row,
-          column - 1,
-          matches !== 0 ? total - 1 : total, // gap penalty after first match
-          matches,
-          lastMatched,
-          globals
-        );
-      }
-
-      // diag
-      total += score;
-      row -= 1;
-      column -= 1;
-      lastMatched = true;
-
-      // match -> set a 1 at the word pos
-      matches += 2 ** (column + globals._wordStart);
-
-      // count simple matches and boost a row of
-      // simple matches when they yield in a
-      // strong match.
-      if (score === 1) {
-        simpleMatchCount += 1;
-
-        if (row === 0 && !globals._firstMatchCanBeWeak) {
-          // when the first match is a weak
-          // match we discard it
-          return;
-        }
-      } else {
-        // boost
-        total += 1 + simpleMatchCount * (score - 1);
-        simpleMatchCount = 0;
-      }
+export function createMatches(score: undefined | FuzzyScore): Match[] {
+  if (typeof score === "undefined") {
+    return [];
+  }
+  const res: Match[] = [];
+  const wordPos = score[1];
+  for (let i = score.length - 1; i > 1; i--) {
+    const pos = score[i] + wordPos;
+    const last = res[res.length - 1];
+    if (last && last.end === pos) {
+      last.end = pos + 1;
     } else {
-      return;
+      res.push({ start: pos, end: pos + 1 });
     }
   }
-
-  total -= column >= 3 ? 9 : column * 3; // late start penalty
-
-  // dynamically keep track of the current top score
-  // and insert the current best score at head, the rest at tail
-  globals._matchesCount += 1;
-  if (total > globals._topScore) {
-    globals._topScore = total;
-    globals._topMatch2 = matches;
-  }
+  return res;
 }
 
-// #endregion
+/**
+ * A fast function (therefore imprecise) to check if code points are emojis.
+ * Generated using https://github.com/alexdima/unicode-utils/blob/master/generate-emoji-test.js
+ */
+export function isEmojiImprecise(x: number): boolean {
+  return (
+    (x >= 0x1f1e6 && x <= 0x1f1ff) ||
+    x === 8986 ||
+    x === 8987 ||
+    x === 9200 ||
+    x === 9203 ||
+    (x >= 9728 && x <= 10175) ||
+    x === 11088 ||
+    x === 11093 ||
+    (x >= 127744 && x <= 128591) ||
+    (x >= 128640 && x <= 128764) ||
+    (x >= 128992 && x <= 129003) ||
+    (x >= 129280 && x <= 129535) ||
+    (x >= 129648 && x <= 129750)
+  );
+}

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

@@ -10,10 +10,13 @@ import { fuzzyScore } from "./filter";
  * @return {number} Score representing how well the word matches the filter. Return of 0 means no match.
  */
 
-export const fuzzySequentialMatch = (filter: string, ...words: string[]) => {
-  let topScore = 0;
+export const fuzzySequentialMatch = (
+  filter: string,
+  item: ScorableTextItem
+) => {
+  let topScore = Number.NEGATIVE_INFINITY;
 
-  for (const word of words) {
+  for (const word of item.strings) {
     const scores = fuzzyScore(
       filter,
       filter.toLowerCase(),
@@ -28,22 +31,39 @@ export const fuzzySequentialMatch = (filter: string, ...words: string[]) => {
       continue;
     }
 
-    // The VS Code implementation of filter treats a score of "0" as just barely a match
-    // But we will typically use this matcher in a .filter(), which interprets 0 as a failure.
-    // By shifting all scores up by 1, we allow "0" matches, while retaining score precedence
-    const score = scores[0] + 1;
+    // The VS Code implementation of filter returns a 0 for a weak match.
+    // But if .filter() sees a "0", it considers that a failed match and will remove it.
+    // So, we set score to 1 in these cases so the match will be included, and mostly respect correct ordering.
+    const score = scores[0] === 0 ? 1 : scores[0];
 
     if (score > topScore) {
       topScore = score;
     }
   }
+
+  if (topScore === Number.NEGATIVE_INFINITY) {
+    return undefined;
+  }
+
   return topScore;
 };
 
+/**
+ * An interface that objects must extend in order to use the fuzzy sequence matcher
+ *
+ * @param {number} score - A number representing the existence and strength of a match.
+ *    - `< 0` means a good match that starts in the middle of the string
+ *    - `> 0` means a good match that starts at the beginning of the string
+ *    - `0` means just barely a match
+ *    - `undefined` means not a match
+ *
+ * @param {string} strings - Array of strings (aliases) representing the item. The filter string will be compared against each of these for a match.
+ *
+ */
+
 export interface ScorableTextItem {
   score?: number;
-  text: string;
-  altText?: string;
+  strings: string[];
 }
 
 type FuzzyFilterSort = <T extends ScorableTextItem>(
@@ -54,12 +74,10 @@ type FuzzyFilterSort = <T extends ScorableTextItem>(
 export const fuzzyFilterSort: FuzzyFilterSort = (filter, items) => {
   return items
     .map((item) => {
-      item.score = item.altText
-        ? fuzzySequentialMatch(filter, item.text, item.altText)
-        : fuzzySequentialMatch(filter, item.text);
+      item.score = fuzzySequentialMatch(filter, item);
       return item;
     })
-    .filter((item) => item.score !== undefined && item.score > 0)
+    .filter((item) => item.score !== undefined)
     .sort(({ score: scoreA = 0 }, { score: scoreB = 0 }) =>
       scoreA > scoreB ? -1 : scoreA < scoreB ? 1 : 0
     );

src/common/string/format_number.ts

@@ -1,14 +1,36 @@
+import { FrontendTranslationData, NumberFormat } from "../../data/translation";
+
 /**
- * Formats a number based on the specified language with thousands separator(s) and decimal character for better legibility.
+ * Formats a number based on the user's preference with thousands separator(s) and decimal character for better legibility.
  *
  * @param num The number to format
- * @param language The language to use when formatting the number
+ * @param locale The user-selected language and number format, from `hass.locale`
+ * @param options Intl.NumberFormatOptions to use
  */
 export const formatNumber = (
   num: string | number,
-  language: string,
+  locale?: FrontendTranslationData,
   options?: Intl.NumberFormatOptions
 ): string => {
+  let format: string | string[] | undefined;
+
+  switch (locale?.number_format) {
+    case NumberFormat.comma_decimal:
+      format = ["en-US", "en"]; // Use United States with fallback to English formatting 1,234,567.89
+      break;
+    case NumberFormat.decimal_comma:
+      format = ["de", "es", "it"]; // Use German with fallback to Spanish then Italian formatting 1.234.567,89
+      break;
+    case NumberFormat.space_comma:
+      format = ["fr", "sv", "cs"]; // Use French with fallback to Swedish and Czech formatting 1 234 567,89
+      break;
+    case NumberFormat.system:
+      format = undefined;
+      break;
+    default:
+      format = locale?.language;
+  }
+
   // Polyfill for Number.isNaN, which is more reliable than the global isNaN()
   Number.isNaN =
     Number.isNaN ||
@@ -16,11 +38,25 @@ export const formatNumber = (
       return typeof input === "number" && isNaN(input);
     };
 
-  if (!Number.isNaN(Number(num)) && Intl) {
-    return new Intl.NumberFormat(
-      language,
-      getDefaultFormatOptions(num, options)
-    ).format(Number(num));
+  if (
+    !Number.isNaN(Number(num)) &&
+    Intl &&
+    locale?.number_format !== NumberFormat.none
+  ) {
+    try {
+      return new Intl.NumberFormat(
+        format,
+        getDefaultFormatOptions(num, options)
+      ).format(Number(num));
+    } catch (error) {
+      // Don't fail when using "TEST" language
+      // eslint-disable-next-line no-console
+      console.error(error);
+      return new Intl.NumberFormat(
+        undefined,
+        getDefaultFormatOptions(num, options)
+      ).format(Number(num));
+    }
   }
   return num.toString();
 };

src/common/string/has-template.ts

@@ -0,0 +1,18 @@
+const isTemplateRegex = new RegExp("{%|{{");
+
+export const isTemplate = (value: string): boolean =>
+  isTemplateRegex.test(value);
+
+export const hasTemplate = (value: unknown): boolean => {
+  if (!value) {
+    return false;
+  }
+  if (typeof value === "string") {
+    return isTemplate(value);
+  }
+  if (typeof value === "object") {
+    const values = Array.isArray(value) ? value : Object.values(value!);
+    return values.some((val) => val && hasTemplate(val));
+  }
+  return false;
+};

src/common/string/starts-with.ts

@@ -0,0 +1,2 @@
+export const strStartsWith = (value: string, search: string) =>
+  value.substring(0, search.length) === search;

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="running"],
+  ha-icon[data-domain="script"][data-state="on"],
   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/construct-url.ts

@@ -0,0 +1,5 @@
+export const constructUrlCurrentPath = (searchParams: string): string => {
+  const base = window.location.pathname;
+  // Prevent trailing "?" if no parameters exist
+  return searchParams ? base + "?" + searchParams : base;
+};

src/common/url/search-params.ts

@@ -19,3 +19,17 @@ export const createSearchParam = (params: Record<string, string>): string => {
   });
   return urlParams.toString();
 };
+
+export const addSearchParam = (params: Record<string, string>): string => {
+  const urlParams = new URLSearchParams(window.location.search);
+  Object.entries(params).forEach(([key, value]) => {
+    urlParams.set(key, value);
+  });
+  return urlParams.toString();
+};
+
+export const removeSearchParam = (param: string): string => {
+  const urlParams = new URLSearchParams(window.location.search);
+  urlParams.delete(param);
+  return urlParams.toString();
+};

src/common/util/render-status.ts

@@ -1,4 +1,4 @@
-export const afterNextRender = (cb: () => void): void => {
+export const afterNextRender = (cb: (value: unknown) => void): void => {
   requestAnimationFrame(() => setTimeout(cb, 0));
 };
 

src/components/buttons/ha-call-api-button.js

@@ -1,65 +0,0 @@
-import { html, LitElement } from "lit-element";
-import { fireEvent } from "../../common/dom/fire_event";
-import "./ha-progress-button";
-
-class HaCallApiButton extends LitElement {
-  render() {
-    return html`
-      <ha-progress-button
-        .progress="${this.progress}"
-        @click="${this._buttonTapped}"
-        ?disabled="${this.disabled}"
-        ><slot></slot
-      ></ha-progress-button>
-    `;
-  }
-
-  constructor() {
-    super();
-    this.method = "POST";
-    this.data = {};
-    this.disabled = false;
-    this.progress = false;
-  }
-
-  static get properties() {
-    return {
-      hass: {},
-      progress: Boolean,
-      path: String,
-      method: String,
-      data: {},
-      disabled: Boolean,
-    };
-  }
-
-  get progressButton() {
-    return this.renderRoot.querySelector("ha-progress-button");
-  }
-
-  async _buttonTapped() {
-    this.progress = true;
-    const eventData = {
-      method: this.method,
-      path: this.path,
-      data: this.data,
-    };
-
-    try {
-      const resp = await this.hass.callApi(this.method, this.path, this.data);
-      this.progress = false;
-      this.progressButton.actionSuccess();
-      eventData.success = true;
-      eventData.response = resp;
-    } catch (err) {
-      this.progress = false;
-      this.progressButton.actionError();
-      eventData.success = false;
-      eventData.response = err;
-    }
-
-    fireEvent(this, "hass-api-called", eventData);
-  }
-}
-
-customElements.define("ha-call-api-button", HaCallApiButton);

src/components/buttons/ha-call-api-button.ts

@@ -0,0 +1,77 @@
+import { css, CSSResult, html, LitElement, property, query } from "lit-element";
+import { fireEvent } from "../../common/dom/fire_event";
+import { HomeAssistant } from "../../types";
+import "./ha-progress-button";
+
+class HaCallApiButton extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property() public method: "POST" | "GET" | "PUT" | "DELETE" = "POST";
+
+  @property() public data = {};
+
+  @property({ type: Boolean, reflect: true }) public disabled = false;
+
+  @property({ type: Boolean }) public progress = false;
+
+  @property() public path?: string;
+
+  @query("ha-progress-button", true) private _progressButton;
+
+  render() {
+    return html`
+      <ha-progress-button
+        .progress=${this.progress}
+        @click=${this._buttonTapped}
+        ?disabled=${this.disabled}
+        ><slot></slot
+      ></ha-progress-button>
+    `;
+  }
+
+  async _buttonTapped() {
+    this.progress = true;
+    const eventData: {
+      method: string;
+      path: string;
+      data: any;
+      success?: boolean;
+      response?: any;
+    } = {
+      method: this.method,
+      path: this.path!,
+      data: this.data,
+    };
+
+    try {
+      const resp = await this.hass.callApi(this.method, this.path!, this.data);
+      this.progress = false;
+      this._progressButton.actionSuccess();
+      eventData.success = true;
+      eventData.response = resp;
+    } catch (err) {
+      this.progress = false;
+      this._progressButton.actionError();
+      eventData.success = false;
+      eventData.response = err;
+    }
+
+    fireEvent(this, "hass-api-called", eventData as any);
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      :host([disabled]) {
+        pointer-events: none;
+      }
+    `;
+  }
+}
+
+customElements.define("ha-call-api-button", HaCallApiButton);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-call-api-button": HaCallApiButton;
+  }
+}

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

@@ -63,7 +63,7 @@ export interface DataTableSortColumnData {
 }
 
 export interface DataTableColumnData extends DataTableSortColumnData {
-  title: string;
+  title: TemplateResult | string;
   type?: "numeric" | "icon" | "icon-button";
   template?: <T>(data: any, row: T) => TemplateResult | string;
   width?: string;
@@ -74,7 +74,7 @@ export interface DataTableColumnData extends DataTableSortColumnData {
 }
 
 type ClonedDataTableColumnData = Omit<DataTableColumnData, "title"> & {
-  title?: string;
+  title?: TemplateResult | string;
 };
 
 export interface DataTableRowData {
@@ -132,7 +132,7 @@ export class HaDataTable extends LitElement {
 
   @query("slot[name='header']") private _header!: HTMLSlotElement;
 
-  private _items: DataTableRowData[] = [];
+  @internalProperty() private _items: DataTableRowData[] = [];
 
   private _checkableRowsCount?: number;
 
@@ -160,9 +160,9 @@ export class HaDataTable extends LitElement {
 
   public connectedCallback() {
     super.connectedCallback();
-    if (this._filteredData.length) {
+    if (this._items.length) {
       // Force update of location of rows
-      this._filteredData = [...this._filteredData];
+      this._items = [...this._items];
     }
   }
 
@@ -236,20 +236,19 @@ export class HaDataTable extends LitElement {
             "auto-height": this.autoHeight,
           })}"
           role="table"
-          aria-rowcount=${this._filteredData.length}
+          aria-rowcount=${this._filteredData.length + 1}
           style=${styleMap({
             height: this.autoHeight
               ? `${(this._filteredData.length || 1) * 53 + 57}px`
               : `calc(100% - ${this._headerHeight}px)`,
           })}
         >
-          <div class="mdc-data-table__header-row" role="row">
+          <div class="mdc-data-table__header-row" role="row" aria-rowindex="1">
             ${this.selectable
               ? html`
                   <div
                     class="mdc-data-table__header-cell mdc-data-table__header-cell--checkbox"
                     role="columnheader"
-                    scope="col"
                   >
                     <ha-checkbox
                       class="mdc-data-table__row-checkbox"
@@ -292,7 +291,13 @@ export class HaDataTable extends LitElement {
                       })
                     : ""}
                   role="columnheader"
-                  scope="col"
+                  aria-sort=${ifDefined(
+                    sorted
+                      ? this._sortDirection === "desc"
+                        ? "descending"
+                        : "ascending"
+                      : undefined
+                  )}
                   @click=${this._handleHeaderClick}
                   .columnId=${key}
                 >
@@ -338,7 +343,7 @@ export class HaDataTable extends LitElement {
                       }
                       return html`
                         <div
-                          aria-rowindex=${index}
+                          aria-rowindex=${index! + 2}
                           role="row"
                           .rowId=${row[this.id]}
                           @click=${this._handleRowClick}
@@ -545,7 +550,9 @@ export class HaDataTable extends LitElement {
 
   private _checkedRowsChanged() {
     // force scroller to update, change it's items
-    this._filteredData = [...this._filteredData];
+    if (this._items.length) {
+      this._items = [...this._items];
+    }
     fireEvent(this, "selection-changed", {
       value: this._checkedRows,
     });

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

@@ -6,6 +6,7 @@ import {
   CSSResult,
   customElement,
   html,
+  internalProperty,
   LitElement,
   property,
   PropertyValues,
@@ -33,7 +34,8 @@ import {
 import { SubscribeMixin } from "../../mixins/subscribe-mixin";
 import { PolymerChangedEvent } from "../../polymer-types";
 import { HomeAssistant } from "../../types";
-import { HaComboBox } from "../ha-combo-box";
+import type { HaComboBox } from "../ha-combo-box";
+import "../ha-combo-box";
 
 interface Device {
   name: string;
@@ -98,7 +100,7 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
   public excludeDomains?: string[];
 
   /**
-   * Show only deviced with entities of these device classes.
+   * Show only devices with entities of these device classes.
    * @type {Array}
    * @attr include-device-classes
    */
@@ -107,10 +109,11 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
 
   @property() public deviceFilter?: HaDevicePickerDeviceFilterFunc;
 
-  @property({ type: Boolean })
-  private _opened?: boolean;
+  @property({ type: Boolean }) public disabled?: boolean;
 
-  @query("ha-combo-box", true) private _comboBox!: HaComboBox;
+  @internalProperty() private _opened?: boolean;
+
+  @query("ha-combo-box", true) public comboBox!: HaComboBox;
 
   private _init = false;
 
@@ -239,11 +242,11 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
   );
 
   public open() {
-    this._comboBox?.open();
+    this.comboBox?.open();
   }
 
   public focus() {
-    this._comboBox?.focus();
+    this.comboBox?.focus();
   }
 
   public hassSubscribe(): UnsubscribeFunc[] {
@@ -266,7 +269,7 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
       (changedProps.has("_opened") && this._opened)
     ) {
       this._init = true;
-      (this._comboBox as any).items = this._getDevices(
+      (this.comboBox as any).items = this._getDevices(
         this.devices!,
         this.areas!,
         this.entities!,
@@ -290,6 +293,7 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
           : this.label}
         .value=${this._value}
         .renderer=${rowRenderer}
+        .disabled=${this.disabled}
         item-value-path="id"
         item-id-path="id"
         item-label-path="name"

src/components/entity/ha-chart-base.js

@@ -371,7 +371,7 @@ class HaChartBase extends mixinBehaviors(
       return value;
     }
     const date = new Date(values[index].value);
-    return formatTime(date, this.hass.language);
+    return formatTime(date, this.hass.locale);
   }
 
   drawChart() {

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

@@ -99,7 +99,7 @@ export class HaEntityPicker extends LitElement {
 
   @property({ type: Boolean }) private _opened = false;
 
-  @query("vaadin-combo-box-light", true) private _comboBox!: HTMLElement;
+  @query("vaadin-combo-box-light", true) private comboBox!: HTMLElement;
 
   public open() {
     this.updateComplete.then(() => {
@@ -208,7 +208,7 @@ export class HaEntityPicker extends LitElement {
         this.entityFilter,
         this.includeDeviceClasses
       );
-      (this._comboBox as any).filteredItems = this._states;
+      (this.comboBox as any).filteredItems = this._states;
       this._initedStates = true;
     }
   }
@@ -296,7 +296,7 @@ export class HaEntityPicker extends LitElement {
 
   private _filterChanged(ev: CustomEvent): void {
     const filterString = ev.detail.value.toLowerCase();
-    (this._comboBox as any).filteredItems = this._states.filter(
+    (this.comboBox as any).filteredItems = this._states.filter(
       (state) =>
         state.entity_id.toLowerCase().includes(filterString) ||
         computeStateName(state).toLowerCase().includes(filterString)

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

@@ -17,6 +17,7 @@ import { forwardHaptic } from "../../data/haptics";
 import { HomeAssistant } from "../../types";
 import "../ha-icon-button";
 import "../ha-switch";
+import "../ha-formfield";
 
 const isOn = (stateObj?: HassEntity) =>
   stateObj !== undefined &&
@@ -29,6 +30,8 @@ export class HaEntityToggle extends LitElement {
 
   @property() public stateObj?: HassEntity;
 
+  @property() public label?: string;
+
   @internalProperty() private _isOn = false;
 
   protected render(): TemplateResult {
@@ -55,15 +58,21 @@ export class HaEntityToggle extends LitElement {
       `;
     }
 
+    const switchTemplate = html`<ha-switch
+      aria-label=${`Toggle ${computeStateName(this.stateObj)} ${
+        this._isOn ? "off" : "on"
+      }`}
+      .checked=${this._isOn}
+      .disabled=${UNAVAILABLE_STATES.includes(this.stateObj.state)}
+      @change=${this._toggleChanged}
+    ></ha-switch>`;
+
+    if (!this.label) {
+      return switchTemplate;
+    }
+
     return html`
-      <ha-switch
-        aria-label=${`Toggle ${computeStateName(this.stateObj)} ${
-          this._isOn ? "off" : "on"
-        }`}
-        .checked=${this._isOn}
-        .disabled=${UNAVAILABLE_STATES.includes(this.stateObj.state)}
-        @change=${this._toggleChanged}
-      ></ha-switch>
+      <ha-formfield .label=${this.label}>${switchTemplate}</ha-formfield>
     `;
   }
 

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

@@ -116,12 +116,8 @@ export class HaStateLabelBadge extends LitElement {
           : state.state === UNKNOWN
           ? "-"
           : state.attributes.unit_of_measurement
-          ? formatNumber(state.state, this.hass!.language)
-          : computeStateDisplay(
-              this.hass!.localize,
-              state,
-              this.hass!.language
-            );
+          ? formatNumber(state.state, this.hass!.locale)
+          : computeStateDisplay(this.hass!.localize, state, this.hass!.locale);
     }
   }
 

src/components/entity/state-badge.ts

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

src/components/entity/state-info.ts

@@ -84,7 +84,7 @@ class StateInfo extends LitElement {
     }
 
     const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
-    if (!oldHass || oldHass.language !== this.hass.language) {
+    if (!oldHass || oldHass.locale !== this.hass.locale) {
       this.rtl = computeRTL(this.hass);
     }
   }

src/components/ha-addon-picker.ts

@@ -0,0 +1,148 @@
+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-analytics-learn-more.ts

@@ -0,0 +1,10 @@
+import { html } from "lit-element";
+import { HomeAssistant } from "../types";
+import { documentationUrl } from "../util/documentation-url";
+
+export const analyticsLearnMore = (hass: HomeAssistant) => html`<a
+  .href=${documentationUrl(hass, "/integrations/analytics/")}
+  target="_blank"
+  rel="noreferrer"
+  >${hass.localize("ui.panel.config.core.section.core.analytics.learn_more")}</a
+>`;