Google Entities updates (#3237)

* Match Google Expose default with backend for when no config value set

* Allow toggling domains

src/dialogs/domain-toggler/dialog-domain-toggler.ts

@@ -0,0 +1,97 @@
+import {
+  customElement,
+  LitElement,
+  property,
+  CSSResultArray,
+  css,
+  TemplateResult,
+  html,
+} from "lit-element";
+import "../../components/dialog/ha-paper-dialog";
+import { HomeAssistant } from "../../types";
+import { HaDomainTogglerDialogParams } from "./show-dialog-domain-toggler";
+import { PolymerChangedEvent } from "../../polymer-types";
+import { haStyleDialog } from "../../resources/styles";
+
+@customElement("dialog-domain-toggler")
+class DomainTogglerDialog extends LitElement {
+  public hass!: HomeAssistant;
+  @property() private _params?: HaDomainTogglerDialogParams;
+
+  public async showDialog(params: HaDomainTogglerDialogParams): Promise<void> {
+    this._params = params;
+  }
+
+  protected render(): TemplateResult | void {
+    if (!this._params) {
+      return html``;
+    }
+
+    const domains = this._params.domains
+      .map((domain) => [this.hass.localize(`domain.${domain}`), domain])
+      .sort();
+
+    return html`
+      <ha-paper-dialog
+        with-backdrop
+        opened
+        @opened-changed=${this._openedChanged}
+      >
+        <h2>Toggle Domains</h2>
+        <div>
+          ${domains.map(
+            (domain) =>
+              html`
+                <div>${domain[0]}</div>
+                <mwc-button .domain=${domain[1]} @click=${this._handleOff}>
+                  ${this.hass.localize("state.default.off")}
+                </mwc-button>
+                <mwc-button .domain=${domain[1]} @click=${this._handleOn}>
+                  ${this.hass.localize("state.default.on")}
+                </mwc-button>
+              `
+          )}
+        </div>
+      </ha-paper-dialog>
+    `;
+  }
+
+  private _openedChanged(ev: PolymerChangedEvent<boolean>): void {
+    // Closed dialog by clicking on the overlay
+    if (!ev.detail.value) {
+      this._params = undefined;
+    }
+  }
+
+  private _handleOff(ev) {
+    this._params!.toggleDomain(ev.currentTarget.domain, false);
+    ev.currentTarget.blur();
+  }
+
+  private _handleOn(ev) {
+    this._params!.toggleDomain(ev.currentTarget.domain, true);
+    ev.currentTarget.blur();
+  }
+
+  static get styles(): CSSResultArray {
+    return [
+      haStyleDialog,
+      css`
+        ha-paper-dialog {
+          max-width: 500px;
+        }
+        div {
+          display: grid;
+          grid-template-columns: auto auto auto;
+          align-items: center;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "dialog-domain-toggler": DomainTogglerDialog;
+  }
+}

src/dialogs/domain-toggler/show-dialog-domain-toggler.ts

@@ -0,0 +1,20 @@
+import { fireEvent } from "../../common/dom/fire_event";
+
+export interface HaDomainTogglerDialogParams {
+  domains: string[];
+  toggleDomain: (domain: string, turnOn: boolean) => void;
+}
+
+export const loadDomainTogglerDialog = () =>
+  import(/* webpackChunkName: "dialog-domain-toggler" */ "./dialog-domain-toggler");
+
+export const showDomainTogglerDialog = (
+  element: HTMLElement,
+  dialogParams: HaDomainTogglerDialogParams
+): void => {
+  fireEvent(element, "show-dialog", {
+    dialogTag: "dialog-domain-toggler",
+    dialogImport: loadDomainTogglerDialog,
+    dialogParams,
+  });
+};

src/panels/config/cloud/ha-config-cloud-google-assistant.ts

@@ -8,6 +8,7 @@ import {
   property,
 } from "lit-element";
 import "@polymer/paper-toggle-button";
+import "@polymer/paper-icon-button";
 import "../../../layouts/hass-subpage";
 import "../../../layouts/hass-loading-screen";
 import "../../../components/ha-card";
@@ -33,12 +34,21 @@ import computeStateName from "../../../common/entity/compute_state_name";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { showToast } from "../../../util/toast";
 import { PolymerChangedEvent } from "../../../polymer-types";
+import { showDomainTogglerDialog } from "../../../dialogs/domain-toggler/show-dialog-domain-toggler";
+import computeDomain from "../../../common/entity/compute_domain";
+
+const DEFAULT_CONFIG_EXPOSE = true;
+
+const configIsExposed = (config: GoogleEntityConfig) =>
+  config.should_expose === undefined
+    ? DEFAULT_CONFIG_EXPOSE
+    : config.should_expose;
 
 @customElement("ha-config-cloud-google-assistant")
 class CloudGoogleAssistant extends LitElement {
   @property() public hass!: HomeAssistant;
   @property() public cloudStatus!: CloudStatusLoggedIn;
-  @property() public isWide!: boolean;
+  @property() public narrow!: boolean;
   @property() private _entities?: GoogleEntity[];
   @property()
   private _entityConfigs: CloudPreferences["google_entity_configs"] = {};
@@ -69,7 +79,7 @@ class CloudGoogleAssistant extends LitElement {
       const stateObj = this.hass.states[entity.entity_id];
       const config = this._entityConfigs[entity.entity_id] || {};
       const isExposed = emptyFilter
-        ? Boolean(config.should_expose)
+        ? configIsExposed(config)
         : filterFunc(entity.entity_id);
       if (isExposed) {
         selected++;
@@ -114,7 +124,18 @@ class CloudGoogleAssistant extends LitElement {
 
     return html`
       <hass-subpage header="Google Assistant">
-        <span slot="toolbar-icon">${selected} selected</span>
+        <span slot="toolbar-icon">
+          ${selected}${!this.narrow
+            ? html`
+                selected
+              `
+            : ""}
+        </span>
+        <paper-icon-button
+          slot="toolbar-icon"
+          icon="hass:tune"
+          @click=${this._openDomainToggler}
+        ></paper-icon-button>
         ${!emptyFilter
           ? html`
               <div class="banner">
@@ -164,9 +185,11 @@ class CloudGoogleAssistant extends LitElement {
   private async _exposeChanged(ev: PolymerChangedEvent<boolean>) {
     const entityId = (ev.currentTarget as any).entityId;
     const newExposed = ev.detail.value;
-    const curExposed = Boolean(
-      (this._entityConfigs[entityId] || {}).should_expose
-    );
+    await this._updateExposed(entityId, newExposed);
+  }
+
+  private async _updateExposed(entityId: string, newExposed: boolean) {
+    const curExposed = configIsExposed(this._entityConfigs[entityId] || {});
     if (newExposed === curExposed) {
       return;
     }
@@ -203,6 +226,21 @@ class CloudGoogleAssistant extends LitElement {
     this._ensureStatusReload();
   }
 
+  private _openDomainToggler() {
+    showDomainTogglerDialog(this, {
+      domains: this._entities!.map((entity) =>
+        computeDomain(entity.entity_id)
+      ).filter((value, idx, self) => self.indexOf(value) === idx),
+      toggleDomain: (domain, turnOn) => {
+        this._entities!.forEach((entity) => {
+          if (computeDomain(entity.entity_id) === domain) {
+            this._updateExposed(entity.entity_id, turnOn);
+          }
+        });
+      },
+    });
+  }
+
   private _ensureStatusReload() {
     if (this._popstateReloadStatusAttached) {
       return;

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

@@ -18,6 +18,7 @@ const NOT_LOGGED_IN_URLS = ["login", "register", "forgot-password"];
 class HaConfigCloud extends HassRouterPage {
   @property() public hass!: HomeAssistant;
   @property() public isWide!: boolean;
+  @property() public narrow!: boolean;
   @property() public route!: Route;
   @property() public cloudStatus!: CloudStatus;
 
@@ -125,6 +126,7 @@ class HaConfigCloud extends HassRouterPage {
       el.hass = this.hass;
       el.email = this._loginEmail;
       el.isWide = this.isWide;
+      el.narrow = this.narrow;
       el.cloudStatus = this.cloudStatus;
       el.flashMessage = this._flashMessage;
     }

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

@@ -9,6 +9,7 @@ import { HassRouterPage, RouterOptions } from "../../layouts/hass-router-page";
 @customElement("ha-panel-config")
 class HaPanelConfig extends HassRouterPage {
   @property() public hass!: HomeAssistant;
+  @property() public narrow!: boolean;
   @property() public _wideSidebar: boolean = false;
   @property() public _wide: boolean = false;
 
@@ -124,6 +125,7 @@ class HaPanelConfig extends HassRouterPage {
     el.route = this.routeTail;
     el.hass = this.hass;
     el.isWide = this.hass.dockedSidebar ? this._wideSidebar : this._wide;
+    el.narrow = this.narrow;
     el.cloudStatus = this._cloudStatus;
   }