20190904.0 (#3613)

* Alarm codes (#3566)

* Handle alarm codes from keyboard input

Closes #2602

* remove friendly_name changes

* remove unnecessary TS check

* Update azure-pipelines-release.yml for Azure Pipelines

* Don't remove `hvac_action` from history attributes (#3570)

So it can be used to plot a fill when active in the graph.

* Update the map when making config changes (#3568)

* Add haptic feedback to handle click (#3569)

* Filter camera service entities (#3583)

Closes #3582

* Notification drawer RTL support (#3580)

* add exceptional icon (#3572)

* Add options to badges (#3552)

* Add options to badges

name
icon
entity_picture

* lint

* lint

* rename entityPicture to image

* Align styling cast buttons (#3579)

* Align styling cast buttons

* Split dev constants

* Ignore dev_const

* Update README.md

* Move lovelace background settings to theme (#3561)

* Move lovelace background settings to theme

While being backwards compatible

* Also update cast

* Don't allow overwrite of english lang (#3590)

* Update hui-card-options.ts (#3591)

* Fix display of no triggers text if no device is selected or device has no triggers (#3592)

* Fix timing issue in external auth (#3587)

* Fix timing issue in external auth

* add await 0

* Show toast on successfull save (#3576)

* Show toast on successfull save

We need to make a list of places where this could benefit the user experience.

* Helper method

* Rename

* handle unavailable lights (#3549)

* handle unavailable lights

* unavailable overlay

* extract unavailable overlay

* Option to display last changed in glance-card (#3584)

* Option to display last changed in glance-card

Closes home-assistant/ui-schema#110

* move show_last_changed to entity-level

* address review comments

* Filter alerts in services (#3598)

Closes #3597

* Add exceptional in weather to translations (#3599)

* Add MQTT subscribe to dev tools (#3589)

* Add mqtt subscribe to dev tools

* Update mqtt-subscribe-card.ts

* Comments

* type

* Wrap long attributes in more-info-default (#3601)

Can likely be applied in many other places

Closes #2811

* Bumped version to 20190904.0 (#3612)

.gitignore

@@ -25,6 +25,9 @@ dist
 .vscode/*
 !.vscode/extensions.json
 
+# Cast dev settings 
+src/cast/dev_const.ts
+
 # Secrets
 .lokalise_token
 yarn-error.log

azure-pipelines-release.yml

@@ -8,7 +8,7 @@ trigger:
 pr: none
 variables:
   - name: versionWheels
-    value: '1.1-3.7-alpine3.10'
+    value: '1.3-3.7-alpine3.10'
   - name: versionNode
     value: '12.1'
   - group: twine

build-scripts/gulp/translations.js

@@ -214,6 +214,8 @@ gulp.task(
             const lang = subtags.slice(0, i).join("-");
             if (lang === "test") {
               src.push(workDir + "/test.json");
+            } else if (lang === "en") {
+              src.push("src/translations/en.json");
             } else {
               src.push(inDir + "/" + lang + ".json");
             }

cast/README.md

@@ -25,7 +25,7 @@ Home Assistant Cast is made up of two separate applications:
 
 ### Setting dev variables
 
-Open `src/cast/const.ts` and change `CAST_DEV` to `true` and `CAST_DEV_APP_ID` to the ID of the app you just created.
+Open `src/cast/dev_const.ts` and change `CAST_DEV_APP_ID` to the ID of the app you just created. And set the `CAST_DEV_HASS_URL` to the url of you development machine.
 
 ### Changing configuration
 

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

@@ -57,10 +57,16 @@ class HcLovelace extends LitElement {
       const index = this._viewIndex;
 
       if (index !== undefined) {
-        this.shadowRoot!.querySelector("hui-view")!.style.background =
+        const configBackground =
           this.lovelaceConfig.views[index].background ||
-          this.lovelaceConfig.background ||
-          "";
+          this.lovelaceConfig.background;
+
+        if (configBackground) {
+          this.shadowRoot!.querySelector("hui-view")!.style.setProperty(
+            "--lovelace-background",
+            configBackground
+          );
+        }
       }
     }
   }

setup.py

@@ -2,7 +2,7 @@
 
 setup(
     name="home-assistant-frontend",
-    version="20190901.0",
+    version="20190904.0",
     description="The Home Assistant frontend",
     url="https://github.com/home-assistant/home-assistant-polymer",
     author="The Home Assistant Authors",

src/cards/ha-weather-card.js

@@ -281,6 +281,7 @@ class HaWeatherCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
     this.weatherIcons = {
       "clear-night": "hass:weather-night",
       cloudy: "hass:weather-cloudy",
+      exceptional: "hass:alert-circle-outline",
       fog: "hass:weather-fog",
       hail: "hass:weather-hail",
       lightning: "hass:weather-lightning",

src/cast/cast_manager.ts

@@ -1,5 +1,6 @@
 import { castApiAvailable } from "./cast_framework";
-import { CAST_APP_ID, CAST_NS, CAST_DEV_HASS_URL, CAST_DEV } from "./const";
+import { CAST_APP_ID, CAST_NS, CAST_DEV } from "./const";
+import { CAST_DEV_HASS_URL } from "./dev_const";
 import {
   castSendAuth,
   HassMessage as ReceiverMessage,

src/cast/const.ts

@@ -1,11 +1,7 @@
+import { CAST_DEV_APP_ID } from "./dev_const";
+
 // Guard dev mode with `__dev__` so it can only ever be enabled in dev mode.
 export const CAST_DEV = __DEV__ && true;
-// Replace this with your own unpublished cast app that points at your local dev
-const CAST_DEV_APP_ID = "5FE44367";
+
 export const CAST_APP_ID = CAST_DEV ? CAST_DEV_APP_ID : "B12CE3CA";
 export const CAST_NS = "urn:x-cast:com.nabucasa.hast";
-
-// Chromecast SDK will only load on localhost and HTTPS
-// So during local development we have to send our dev IP address,
-// but then run the UI on localhost.
-export const CAST_DEV_HASS_URL = "http://192.168.1.234:8123";

src/cast/dev_const.ts

@@ -0,0 +1,7 @@
+// Replace this with your own unpublished cast app that points at your local dev
+export const CAST_DEV_APP_ID = "5FE44367";
+
+// Chromecast SDK will only load on localhost and HTTPS
+// So during local development we have to send our dev IP address,
+// but then run the UI on localhost.
+export const CAST_DEV_HASS_URL = "http://192.168.1.234:8123";

src/cast/receiver_messages.ts

@@ -4,7 +4,8 @@ import { Auth } from "home-assistant-js-websocket";
 import { CastManager } from "./cast_manager";
 
 import { BaseCastMessage } from "./types";
-import { CAST_DEV_HASS_URL, CAST_DEV } from "./const";
+import { CAST_DEV } from "./const";
+import { CAST_DEV_HASS_URL } from "./dev_const";
 
 export interface GetStatusMessage extends BaseCastMessage {
   type: "get_status";

src/common/dom/setup-leaflet-map.ts

@@ -20,18 +20,25 @@ export const setupLeafletMap = async (
   style.setAttribute("rel", "stylesheet");
   mapElement.parentNode.appendChild(style);
   map.setView([52.3731339, 4.8903147], 13);
-  Leaflet.tileLayer(
+  createTileLayer(Leaflet, darkMode).addTo(map);
+
+  return [map, Leaflet];
+};
+
+export const createTileLayer = (
+  leaflet: LeafletModuleType,
+  darkMode: boolean
+) => {
+  return leaflet.tileLayer(
     `https://{s}.basemaps.cartocdn.com/${
       darkMode ? "dark_all" : "light_all"
-    }/{z}/{x}/{y}${Leaflet.Browser.retina ? "@2x.png" : ".png"}`,
+    }/{z}/{x}/{y}${leaflet.Browser.retina ? "@2x.png" : ".png"}`,
     {
       attribution:
         '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>, &copy; <a href="https://carto.com/attributions">CARTO</a>',
       subdomains: "abcd",
       minZoom: 0,
       maxZoom: 20,
     }
-  ).addTo(map);
-
-  return [map, Leaflet];
+  );
 };

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

@@ -37,7 +37,10 @@ class HaDeviceTriggerPicker extends LitElement {
   @property() private _renderEmpty = false;
 
   private get _key() {
-    if (!this.value) {
+    if (
+      !this.value ||
+      deviceAutomationTriggersEqual(this._noTrigger, this.value)
+    ) {
       return NO_TRIGGER_KEY;
     }
 

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

@@ -29,6 +29,12 @@ export class HaStateLabelBadge extends LitElement {
 
   @property() public state?: HassEntity;
 
+  @property() public name?: string;
+
+  @property() public icon?: string;
+
+  @property() public image?: string;
+
   @property() private _timerTimeRemaining?: number;
 
   private _connected?: boolean;
@@ -72,10 +78,14 @@ export class HaStateLabelBadge extends LitElement {
           "has-unit_of_measurement": "unit_of_measurement" in state.attributes,
         })}"
         .value="${this._computeValue(domain, state)}"
-        .icon="${this._computeIcon(domain, state)}"
-        .image="${state.attributes.entity_picture}"
+        .icon="${this.icon ? this.icon : this._computeIcon(domain, state)}"
+        .image="${this.icon
+          ? ""
+          : this.image
+          ? this.image
+          : state.attributes.entity_picture}"
         .label="${this._computeLabel(domain, state, this._timerTimeRemaining)}"
-        .description="${computeStateName(state)}"
+        .description="${this.name ? this.name : computeStateName(state)}"
       ></ha-label-badge>
     `;
   }

src/components/ha-attributes.js

@@ -11,6 +11,7 @@ class HaAttributes extends PolymerElement {
       <style>
         .data-entry .value {
           max-width: 200px;
+          overflow-wrap: break-word;
         }
         .attribution {
           color: var(--secondary-text-color);

src/data/entity.ts

@@ -3,9 +3,11 @@ export const UNAVAILABLE = "unavailable";
 export const ENTITY_COMPONENT_DOMAINS = [
   "air_quality",
   "alarm_control_panel",
+  "alert",
   "automation",
   "binary_sensor",
   "calendar",
+  "camera",
   "counter",
   "cover",
   "dominos",

src/data/history.ts

@@ -11,6 +11,7 @@ const LINE_ATTRIBUTES_TO_KEEP = [
   "current_temperature",
   "target_temp_low",
   "target_temp_high",
+  "hvac_action",
 ];
 
 export interface LineChartState {

src/data/mqtt.ts

@@ -0,0 +1,19 @@
+import { HomeAssistant } from "../types";
+
+export interface MQTTMessage {
+  topic: string;
+  payload: string;
+  qos: number;
+  retain: number;
+}
+
+export const subscribeMQTTTopic = (
+  hass: HomeAssistant,
+  topic: string,
+  callback: (message: MQTTMessage) => void
+) => {
+  return hass.connection.subscribeMessage<MQTTMessage>(callback, {
+    type: "mqtt/subscribe",
+    topic,
+  });
+};

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

@@ -158,6 +158,7 @@ class MoreInfoWeather extends LocalizeMixin(PolymerElement) {
     this.weatherIcons = {
       "clear-night": "hass:weather-night",
       cloudy: "hass:weather-cloudy",
+      exceptional: "hass:alert-circle-outline",
       fog: "hass:weather-fog",
       hail: "hass:weather-hail",
       lightning: "hass:weather-lightning",

src/dialogs/notifications/notification-drawer.js

@@ -49,7 +49,7 @@ export class HuiNotificationDrawer extends EventsMixin(
         text-align: center;
       }
     </style>
-    <app-drawer id='drawer' opened="{{open}}" disable-swipe>
+    <app-drawer id='drawer' opened="{{open}}" disable-swipe align="start">
       <app-toolbar>
         <div main-title>[[localize('ui.notification_drawer.title')]]</div>
         <ha-paper-icon-button-prev on-click="_closeDrawer"></paper-icon-button>

src/external_app/external_auth.ts

@@ -63,6 +63,15 @@ class ExternalAuth extends Auth {
   public async refreshAccessToken() {
     const callbackPayload = { callback: CALLBACK_SET_TOKEN };
 
+    const callbackPromise = new Promise<RefreshTokenResponse>(
+      (resolve, reject) => {
+        window[CALLBACK_SET_TOKEN] = (success, data) =>
+          success ? resolve(data) : reject(data);
+      }
+    );
+
+    await 0;
+
     if (window.externalApp) {
       window.externalApp.getExternalAuth(JSON.stringify(callbackPayload));
     } else {
@@ -71,12 +80,7 @@ class ExternalAuth extends Auth {
       );
     }
 
-    const tokens = await new Promise<RefreshTokenResponse>(
-      (resolve, reject) => {
-        window[CALLBACK_SET_TOKEN] = (success, data) =>
-          success ? resolve(data) : reject(data);
-      }
-    );
+    const tokens = await callbackPromise;
 
     this.data.access_token = tokens.access_token;
     this.data.expires = tokens.expires_in * 1000 + Date.now();
@@ -85,6 +89,13 @@ class ExternalAuth extends Auth {
   public async revoke() {
     const callbackPayload = { callback: CALLBACK_REVOKE_TOKEN };
 
+    const callbackPromise = new Promise((resolve, reject) => {
+      window[CALLBACK_REVOKE_TOKEN] = (success, data) =>
+        success ? resolve(data) : reject(data);
+    });
+
+    await 0;
+
     if (window.externalApp) {
       window.externalApp.revokeExternalAuth(JSON.stringify(callbackPayload));
     } else {
@@ -93,10 +104,7 @@ class ExternalAuth extends Auth {
       );
     }
 
-    await new Promise((resolve, reject) => {
-      window[CALLBACK_REVOKE_TOKEN] = (success, data) =>
-        success ? resolve(data) : reject(data);
-    });
+    await callbackPromise;
   }
 }
 

src/panels/config/js/trigger/device.js

@@ -49,4 +49,6 @@ export default class DeviceTrigger extends Component {
 
 DeviceTrigger.defaultConfig = {
   device_id: "",
+  domain: "",
+  entity_id: "",
 };

src/panels/config/users/ha-user-editor.ts

@@ -23,6 +23,7 @@ import {
   SYSTEM_GROUP_ID_USER,
   SYSTEM_GROUP_ID_ADMIN,
 } from "../../../data/user";
+import { showSaveSuccessToast } from "../../../util/toast-saved-success";
 
 declare global {
   interface HASSDomEvents {
@@ -150,6 +151,7 @@ class HaUserEditor extends LitElement {
       await updateUser(this.hass!, this.user!.id, {
         group_ids: [newGroup],
       });
+      showSaveSuccessToast(this, this.hass!);
       fireEvent(this, "reload-users");
     } catch (err) {
       alert(`Group update failed: ${err.message}`);

src/panels/developer-tools/event/event-subscribe-card.ts

@@ -18,9 +18,13 @@ import format_time from "../../../common/datetime/format_time";
 @customElement("event-subscribe-card")
 class EventSubscribeCard extends LitElement {
   @property() public hass?: HomeAssistant;
+
   @property() private _eventType = "";
+
   @property() private _subscribed?: () => void;
+
   @property() private _events: Array<{ id: number; event: HassEvent }> = [];
+
   private _eventCount = 0;
 
   public disconnectedCallback() {
@@ -33,7 +37,7 @@ class EventSubscribeCard extends LitElement {
 
   protected render(): TemplateResult {
     return html`
-      <ha-card heading="Listen to events">
+      <ha-card header="Listen to events">
         <form>
           <paper-input
             .label=${this._subscribed

src/panels/developer-tools/ha-panel-developer-tools.ts

@@ -15,7 +15,6 @@ import "@polymer/paper-tabs/paper-tab";
 import "@polymer/paper-tabs/paper-tabs";
 
 import "../../components/ha-menu-button";
-import "../../resources/ha-style";
 import "./developer-tools-router";
 
 import scrollToTarget from "../../common/dom/scroll-to-target";