Disable cloud expose controls when yaml filter (#6990)

src/components/ha-button-menu.ts

@@ -1,17 +1,16 @@
-import {
-  customElement,
-  html,
-  TemplateResult,
-  LitElement,
-  CSSResult,
-  css,
-  query,
-  property,
-} from "lit-element";
 import "@material/mwc-button";
 import "@material/mwc-menu";
-import type { Menu, Corner } from "@material/mwc-menu";
+import type { Corner, Menu } from "@material/mwc-menu";
-
+import {
+  css,
+  CSSResult,
+  customElement,
+  html,
+  LitElement,
+  property,
+  query,
+  TemplateResult,
+} from "lit-element";
 import "./ha-icon-button";
 
 @customElement("ha-button-menu")
@@ -22,6 +21,8 @@ export class HaButtonMenu extends LitElement {
 
   @property({ type: Boolean }) public activatable = false;
 
+  @property({ type: Boolean }) public disabled = false;
+
   @query("mwc-menu") private _menu?: Menu;
 
   public get items() {
@@ -48,6 +49,9 @@ export class HaButtonMenu extends LitElement {
   }
 
   private _handleClick(): void {
+    if (this.disabled) {
+      return;
+    }
     this._menu!.anchor = this;
     this._menu!.show();
   }

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

@@ -124,6 +124,26 @@ class CloudAlexa extends LitElement {
         ? exposedCards
         : notExposedCards;
 
+      const iconButton = html`<mwc-icon-button
+        slot="trigger"
+        class=${classMap({
+          exposed: isExposed!,
+          "not-exposed": !isExposed,
+        })}
+        .disabled=${!emptyFilter}
+        .title=${this.hass!.localize("ui.panel.config.cloud.google.expose")}
+      >
+        <ha-svg-icon
+          .path=${config.should_expose !== null
+            ? isExposed
+              ? mdiCheckboxMarked
+              : mdiCloseBox
+            : isDomainExposed
+            ? mdiCheckboxMultipleMarked
+            : mdiCloseBoxMultiple}
+        ></ha-svg-icon>
+      </mwc-icon-button>`;
+
       target.push(html`
         <ha-card>
           <div class="card-content">
@@ -139,67 +159,50 @@ class CloudAlexa extends LitElement {
                   .map((ifc) => ifc.replace(/(Alexa.|Controller)/g, ""))
                   .join(", ")}
               </state-info>
-              <ha-button-menu
+              ${!emptyFilter
-                corner="BOTTOM_START"
+                ? html`${iconButton}`
-                .entityId=${stateObj.entity_id}
+                : html`<ha-button-menu
-                @action=${this._exposeChanged}
+                    corner="BOTTOM_START"
-              >
+                    .entityId=${stateObj.entity_id}
-                <mwc-icon-button
+                    @action=${this._exposeChanged}
-                  slot="trigger"
+                  >
-                  class=${classMap({
+                    ${iconButton}
-                    exposed: isExposed!,
+                    <mwc-list-item hasMeta>
-                    "not-exposed": !isExposed,
+                      ${this.hass!.localize(
-                  })}
+                        "ui.panel.config.cloud.google.expose_entity"
-                  .title=${this.hass!.localize(
+                      )}
-                    "ui.panel.config.cloud.alexa.expose"
+                      <ha-svg-icon
-                  )}
+                        class="exposed"
-                >
+                        slot="meta"
-                  <ha-svg-icon
+                        .path=${mdiCheckboxMarked}
-                    .path=${config.should_expose !== null
+                      ></ha-svg-icon>
-                      ? isExposed
+                    </mwc-list-item>
-                        ? mdiCheckboxMarked
+                    <mwc-list-item hasMeta>
-                        : mdiCloseBox
+                      ${this.hass!.localize(
-                      : isDomainExposed
+                        "ui.panel.config.cloud.google.dont_expose_entity"
-                      ? mdiCheckboxMultipleMarked
+                      )}
-                      : mdiCloseBoxMultiple}
+                      <ha-svg-icon
-                  ></ha-svg-icon>
+                        class="not-exposed"
-                </mwc-icon-button>
+                        slot="meta"
-                <mwc-list-item hasMeta>
+                        .path=${mdiCloseBox}
-                  ${this.hass!.localize(
+                      ></ha-svg-icon>
-                    "ui.panel.config.cloud.alexa.expose_entity"
+                    </mwc-list-item>
-                  )}
+                    <mwc-list-item hasMeta>
-                  <ha-svg-icon
+                      ${this.hass!.localize(
-                    class="exposed"
+                        "ui.panel.config.cloud.google.follow_domain"
-                    slot="meta"
+                      )}
-                    .path=${mdiCheckboxMarked}
+                      <ha-svg-icon
-                  ></ha-svg-icon>
+                        class=${classMap({
-                </mwc-list-item>
+                          exposed: isDomainExposed,
-                <mwc-list-item hasMeta>
+                          "not-exposed": !isDomainExposed,
-                  ${this.hass!.localize(
+                        })}
-                    "ui.panel.config.cloud.alexa.dont_expose_entity"
+                        slot="meta"
-                  )}
+                        .path=${isDomainExposed
-                  <ha-svg-icon
+                          ? mdiCheckboxMultipleMarked
-                    class="not-exposed"
+                          : mdiCloseBoxMultiple}
-                    slot="meta"
+                      ></ha-svg-icon>
-                    .path=${mdiCloseBox}
+                    </mwc-list-item>
-                  ></ha-svg-icon>
+                  </ha-button-menu>`}
-                </mwc-list-item>
-                <mwc-list-item hasMeta>
-                  ${this.hass!.localize(
-                    "ui.panel.config.cloud.alexa.follow_domain"
-                  )}
-                  <ha-svg-icon
-                    class=${classMap({
-                      exposed: isDomainExposed,
-                      "not-exposed": !isDomainExposed,
-                    })}
-                    slot="meta"
-                    .path=${isDomainExposed
-                      ? mdiCheckboxMultipleMarked
-                      : mdiCloseBoxMultiple}
-                  ></ha-svg-icon>
-                </mwc-list-item>
-              </ha-button-menu>
             </div>
           </div>
         </ha-card>

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

@@ -130,6 +130,26 @@ class CloudGoogleAssistant extends LitElement {
         ? exposedCards
         : notExposedCards;
 
+      const iconButton = html`<mwc-icon-button
+        slot="trigger"
+        class=${classMap({
+          exposed: isExposed!,
+          "not-exposed": !isExposed,
+        })}
+        .disabled=${!emptyFilter}
+        .title=${this.hass!.localize("ui.panel.config.cloud.google.expose")}
+      >
+        <ha-svg-icon
+          .path=${config.should_expose !== null
+            ? isExposed
+              ? mdiCheckboxMarked
+              : mdiCloseBox
+            : isDomainExposed
+            ? mdiCheckboxMultipleMarked
+            : mdiCloseBoxMultiple}
+        ></ha-svg-icon>
+      </mwc-icon-button>`;
+
       target.push(html`
         <ha-card>
           <div class="card-content">
@@ -144,67 +164,50 @@ class CloudGoogleAssistant extends LitElement {
                   .map((trait) => trait.substr(trait.lastIndexOf(".") + 1))
                   .join(", ")}
               </state-info>
-              <ha-button-menu
+              ${!emptyFilter
-                corner="BOTTOM_START"
+                ? html`${iconButton}`
-                .entityId=${stateObj.entity_id}
+                : html`<ha-button-menu
-                @action=${this._exposeChanged}
+                    corner="BOTTOM_START"
-              >
+                    .entityId=${stateObj.entity_id}
-                <mwc-icon-button
+                    @action=${this._exposeChanged}
-                  slot="trigger"
+                  >
-                  class=${classMap({
+                    ${iconButton}
-                    exposed: isExposed!,
+                    <mwc-list-item hasMeta>
-                    "not-exposed": !isExposed,
+                      ${this.hass!.localize(
-                  })}
+                        "ui.panel.config.cloud.google.expose_entity"
-                  .title=${this.hass!.localize(
+                      )}
-                    "ui.panel.config.cloud.google.expose"
+                      <ha-svg-icon
-                  )}
+                        class="exposed"
-                >
+                        slot="meta"
-                  <ha-svg-icon
+                        .path=${mdiCheckboxMarked}
-                    .path=${config.should_expose !== null
+                      ></ha-svg-icon>
-                      ? isExposed
+                    </mwc-list-item>
-                        ? mdiCheckboxMarked
+                    <mwc-list-item hasMeta>
-                        : mdiCloseBox
+                      ${this.hass!.localize(
-                      : isDomainExposed
+                        "ui.panel.config.cloud.google.dont_expose_entity"
-                      ? mdiCheckboxMultipleMarked
+                      )}
-                      : mdiCloseBoxMultiple}
+                      <ha-svg-icon
-                  ></ha-svg-icon>
+                        class="not-exposed"
-                </mwc-icon-button>
+                        slot="meta"
-                <mwc-list-item hasMeta>
+                        .path=${mdiCloseBox}
-                  ${this.hass!.localize(
+                      ></ha-svg-icon>
-                    "ui.panel.config.cloud.google.expose_entity"
+                    </mwc-list-item>
-                  )}
+                    <mwc-list-item hasMeta>
-                  <ha-svg-icon
+                      ${this.hass!.localize(
-                    class="exposed"
+                        "ui.panel.config.cloud.google.follow_domain"
-                    slot="meta"
+                      )}
-                    .path=${mdiCheckboxMarked}
+                      <ha-svg-icon
-                  ></ha-svg-icon>
+                        class=${classMap({
-                </mwc-list-item>
+                          exposed: isDomainExposed,
-                <mwc-list-item hasMeta>
+                          "not-exposed": !isDomainExposed,
-                  ${this.hass!.localize(
+                        })}
-                    "ui.panel.config.cloud.google.dont_expose_entity"
+                        slot="meta"
-                  )}
+                        .path=${isDomainExposed
-                  <ha-svg-icon
+                          ? mdiCheckboxMultipleMarked
-                    class="not-exposed"
+                          : mdiCloseBoxMultiple}
-                    slot="meta"
+                      ></ha-svg-icon>
-                    .path=${mdiCloseBox}
+                    </mwc-list-item>
-                  ></ha-svg-icon>
+                  </ha-button-menu>`}
-                </mwc-list-item>
-                <mwc-list-item hasMeta>
-                  ${this.hass!.localize(
-                    "ui.panel.config.cloud.google.follow_domain"
-                  )}
-                  <ha-svg-icon
-                    class=${classMap({
-                      exposed: isDomainExposed,
-                      "not-exposed": !isDomainExposed,
-                    })}
-                    slot="meta"
-                    .path=${isDomainExposed
-                      ? mdiCheckboxMultipleMarked
-                      : mdiCloseBoxMultiple}
-                  ></ha-svg-icon>
-                </mwc-list-item>
-              </ha-button-menu>
             </div>
             ${entity.might_2fa
               ? html`