Update .devcontainer.json

Bumps [webpack-cli](https://github.com/webpack/webpack-cli) from 4.8.0 to 5.0.1.
- [Release notes](https://github.com/webpack/webpack-cli/releases)
- [Changelog](https://github.com/webpack/webpack-cli/blob/master/CHANGELOG.md)
- [Commits](https://github.com/webpack/webpack-cli/compare/webpack-cli@4.8.0...webpack-cli@5.0.1)

---
updated-dependencies:
- dependency-name: webpack-cli
  dependency-type: direct:development
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

.devcontainer.json

@@ -1,13 +1,20 @@
 {
   "name": "Home Assistant Frontend",
-  "build": {
+  "image": "mcr.microsoft.com/devcontainers/python:0-3.10",
-    "dockerfile": "Dockerfile",
-    "context": ".."
-  },
   "appPort": "8124:8123",
   "postCreateCommand": "script/bootstrap",
   "containerEnv": {
-    "WORKSPACE_DIRECTORY": "${containerWorkspaceFolder}"
+    "WORKSPACE_DIRECTORY": "${containerWorkspaceFolder}",
+    "DEVCONTAINER": "true"
+  },
+  "remoteUser": "vscode",
+  "remoteEnv": {
+    "PATH": "${containerEnv:PATH}:${containerWorkspaceFolder}/node_modules/.bin:/home/vscode/.local/bin"
+  },
+  "features": {
+    "ghcr.io/devcontainers/features/node:1": {
+      "version": "16"
+    }
   },
   "customizations": {
     "vscode": {

.devcontainer/Dockerfile

@@ -1,13 +0,0 @@
-# See here for image contents: https://github.com/microsoft/vscode-dev-containers/tree/v0.148.1/containers/python-3/.devcontainer/base.Dockerfile
-FROM mcr.microsoft.com/vscode/devcontainers/python:0-3.10
-
-ENV \
-  DEBIAN_FRONTEND=noninteractive \
-  DEVCONTAINER=true \
-  PATH=$PATH:./node_modules/.bin
-
-# Install nvm
-COPY .nvmrc /tmp/.nvmrc
-RUN \
-  su vscode -c \
-    "source /usr/local/share/nvm/nvm.sh && nvm install $(cat /tmp/.nvmrc) 2>&1"

package.json

@@ -27,7 +27,7 @@
     "@braintree/sanitize-url": "^6.0.0",
     "@codemirror/autocomplete": "^6.4.0",
     "@codemirror/commands": "^6.1.3",
-    "@codemirror/language": "^6.3.2",
+    "@codemirror/language": "^6.4.0",
     "@codemirror/legacy-modes": "^6.3.1",
     "@codemirror/search": "^6.2.3",
     "@codemirror/state": "^6.2.0",
@@ -105,13 +105,13 @@
     "date-fns-tz": "^1.3.7",
     "deep-clone-simple": "^1.1.1",
     "deep-freeze": "^0.0.1",
-    "fuse.js": "^6.0.0",
+    "fuse.js": "^6.6.2",
     "google-timezones-json": "^1.0.2",
     "hammerjs": "^2.0.8",
     "hls.js": "^1.3.1",
     "home-assistant-js-websocket": "^8.0.1",
     "idb-keyval": "^5.1.3",
-    "intl-messageformat": "^9.9.1",
+    "intl-messageformat": "^10.2.5",
     "js-yaml": "^4.1.0",
     "leaflet": "^1.7.1",
     "leaflet-draw": "^1.0.4",
@@ -122,13 +122,13 @@
     "proxy-polyfill": "^0.3.2",
     "punycode": "^2.3.0",
     "qr-scanner": "^1.3.0",
-    "qrcode": "^1.4.4",
+    "qrcode": "^1.5.1",
     "regenerator-runtime": "^0.13.11",
     "resize-observer-polyfill": "^1.5.1",
     "roboto-fontface": "^0.10.0",
     "rrule": "^2.7.1",
     "sortablejs": "^1.14.0",
-    "superstruct": "^0.15.2",
+    "superstruct": "^1.0.3",
     "tinykeys": "^1.1.3",
     "tsparticles": "^1.34.0",
     "unfetch": "^4.1.0",
@@ -160,7 +160,7 @@
     "@babel/preset-typescript": "^7.18.6",
     "@koa/cors": "^3.1.0",
     "@octokit/auth-oauth-device": "^4.0.2",
-    "@octokit/rest": "^19.0.5",
+    "@octokit/rest": "^19.0.7",
     "@open-wc/dev-server-hmr": "^0.0.2",
     "@rollup/plugin-babel": "^5.2.1",
     "@rollup/plugin-commonjs": "^11.1.0",
@@ -176,12 +176,12 @@
     "@types/leaflet-draw": "^1",
     "@types/marked": "^4",
     "@types/mocha": "^8",
-    "@types/qrcode": "^1.4.2",
+    "@types/qrcode": "^1.5.0",
     "@types/sortablejs": "^1",
     "@types/tar": "^6",
     "@types/webspeechapi": "^0.0.29",
     "@typescript-eslint/eslint-plugin": "^5.46.1",
-    "@typescript-eslint/parser": "^5.44.0",
+    "@typescript-eslint/parser": "^5.49.0",
     "@web/dev-server": "^0.0.24",
     "@web/dev-server-rollup": "^0.2.11",
     "babel-loader": "^9.1.0",
@@ -190,7 +190,7 @@
     "eslint": "^7.32.0",
     "eslint-config-airbnb-base": "^14.2.1",
     "eslint-config-airbnb-typescript": "^14.0.0",
-    "eslint-config-prettier": "^8.5.0",
+    "eslint-config-prettier": "^8.6.0",
     "eslint-import-resolver-webpack": "^0.13.1",
     "eslint-plugin-disable": "^2.0.1",
     "eslint-plugin-import": "^2.24.2",
@@ -203,7 +203,7 @@
     "gulp": "^4.0.2",
     "gulp-flatmap": "^1.0.2",
     "gulp-json-transform": "^0.4.6",
-    "gulp-merge-json": "^1.3.1",
+    "gulp-merge-json": "^2.1.2",
     "gulp-rename": "^2.0.0",
     "gulp-zopfli-green": "^3.0.1",
     "html-minifier": "^4.0.0",
@@ -237,10 +237,10 @@
     "vinyl-buffer": "^1.0.1",
     "vinyl-source-stream": "^2.0.0",
     "webpack": "^5.55.1",
-    "webpack-cli": "^4.8.0",
+    "webpack-cli": "^5.0.1",
     "webpack-dev-server": "^4.11.1",
     "webpack-manifest-plugin": "^4.0.2",
-    "webpackbar": "^5.0.0-3",
+    "webpackbar": "^5.0.2",
     "workbox-build": "^6.5.4"
   },
   "_comment": "Polymer 3.2 contained a bug, fixed in https://github.com/Polymer/polymer/pull/5569, add as patch",

pyproject.toml

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

src/components/chart/statistics-chart.ts

@@ -133,6 +133,7 @@ class StatisticsChart extends LitElement {
 
     return html`
       <ha-chart-base
+        .hass=${this.hass}
         .data=${this._chartData}
         .options=${this._chartOptions}
         .chartType=${this.chartType}

src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts

@@ -1,6 +1,11 @@
 /* eslint-disable lit/prefer-static-styles */
 import "@material/mwc-button/mwc-button";
-import { mdiClose, mdiMicrophone, mdiSend } from "@mdi/js";
+import {
+  mdiClose,
+  mdiHelpCircleOutline,
+  mdiMicrophone,
+  mdiSend,
+} from "@mdi/js";
 import {
   css,
   CSSResultGroup,
@@ -27,6 +32,7 @@ import {
 } from "../../data/conversation";
 import { haStyleDialog } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
+import { documentationUrl } from "../../util/documentation-url";
 
 interface Message {
   who: string;
@@ -102,6 +108,17 @@ export class HaVoiceCommandDialog extends LitElement {
               .label=${this.hass.localize("ui.common.close")}
               .path=${mdiClose}
             ></ha-icon-button>
+            <a
+              href=${documentationUrl(this.hass, "/docs/assist/")}
+              slot="actionItems"
+              target="_blank"
+              rel="noopener noreferer"
+            >
+              <ha-icon-button
+                .label=${this.hass.localize("ui.common.help")}
+                .path=${mdiHelpCircleOutline}
+              ></ha-icon-button>
+            </a>
           </ha-header-bar>
         </div>
         <div class="messages">
@@ -400,6 +417,9 @@ export class HaVoiceCommandDialog extends LitElement {
           --mdc-theme-on-primary: var(--primary-text-color);
           --mdc-theme-primary: var(--mdc-theme-surface);
         }
+        ha-header-bar a {
+          color: var(--primary-text-color);
+        }
 
         ha-textfield {
           display: block;
@@ -487,6 +507,11 @@ export class HaVoiceCommandDialog extends LitElement {
           color: var(--text-primary-color);
         }
 
+        .input {
+          margin-left: 0;
+          margin-right: 0;
+        }
+
         .interimTranscript {
           color: var(--secondary-text-color);
         }

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

@@ -410,6 +410,7 @@ class HaConfigHardware extends SubscribeMixin(LitElement) {
                   </div>
                   <div class="card-content">
                     <ha-chart-base
+                      .hass=${this.hass}
                       .data=${{
                         datasets: [
                           {
@@ -441,6 +442,7 @@ class HaConfigHardware extends SubscribeMixin(LitElement) {
                   </div>
                   <div class="card-content">
                     <ha-chart-base
+                      .hass=${this.hass}
                       .data=${{
                         datasets: [
                           {

src/panels/config/tags/dialog-tag-detail.ts

@@ -96,7 +96,7 @@ class DialogTagDetail
             ></ha-textfield>
             ${!this._params.entry
               ? html`<ha-textfield
-                  .value=${this._id}
+                  .value=${this._id || ""}
                   .configValue=${"id"}
                   @input=${this._valueChanged}
                   .label=${this.hass!.localize(
@@ -236,7 +236,7 @@ class DialogTagDetail
     await new Promise((resolve) => {
       imageObj.onload = resolve;
     });
-    context.drawImage(
+    context?.drawImage(
       imageObj,
       canvas.width / 3,
       canvas.height / 3,

src/panels/lovelace/cards/energy/hui-energy-devices-graph-card.ts

@@ -87,6 +87,7 @@ export class HuiEnergyDevicesGraphCard
           })}"
         >
           <ha-chart-base
+            .hass=${this.hass}
             .data=${this._chartData}
             .options=${this._createOptions(this.hass.locale)}
             .height=${(this._chartData?.datasets[0]?.data.length || 0) * 28 +

src/panels/lovelace/cards/energy/hui-energy-gas-graph-card.ts

@@ -106,6 +106,7 @@ export class HuiEnergyGasGraphCard
           })}"
         >
           <ha-chart-base
+            .hass=${this.hass}
             .data=${this._chartData}
             .options=${this._createOptions(
               this._start,

src/panels/lovelace/cards/energy/hui-energy-solar-graph-card.ts

@@ -105,6 +105,7 @@ export class HuiEnergySolarGraphCard
           })}"
         >
           <ha-chart-base
+            .hass=${this.hass}
             .data=${this._chartData}
             .options=${this._createOptions(
               this._start,

src/panels/lovelace/cards/energy/hui-energy-usage-graph-card.ts

@@ -99,6 +99,7 @@ export class HuiEnergyUsageGraphCard
           })}"
         >
           <ha-chart-base
+            .hass=${this.hass}
             .data=${this._chartData}
             .options=${this._createOptions(
               this._start,

src/panels/lovelace/cards/energy/hui-energy-water-graph-card.ts

@@ -106,6 +106,7 @@ export class HuiEnergyWaterGraphCard
           })}"
         >
           <ha-chart-base
+            .hass=${this.hass}
             .data=${this._chartData}
             .options=${this._createOptions(
               this._start,

src/panels/profile/ha-long-lived-access-token-dialog.ts

@@ -77,7 +77,7 @@ export class HaLongLivedAccessTokenDialog extends LitElement {
     await new Promise((resolve) => {
       imageObj.onload = resolve;
     });
-    context.drawImage(
+    context?.drawImage(
       imageObj,
       canvas.width / 3,
       canvas.height / 3,

src/translations/en.json

@@ -803,7 +803,7 @@
         "nothing_found": "Nothing found!"
       },
       "voice_command": {
-        "title": "Assistant",
+        "title": "Assist",
         "did_not_hear": "Home Assistant did not hear anything",
         "did_not_understand": "Didn't quite get that",
         "found": "I found the following for you:",