Add default to action editor (#7006)

* Add default to action editor

* only select default when action undefined

* Update action to actuall default when selecting default

* import type

* Tooltip and lokalize

* comments

* wording

* Comments

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

src/components/ha-help-tooltip.ts

@@ -0,0 +1,45 @@
+import { mdiHelpCircle } from "@mdi/js";
+import "@polymer/paper-tooltip/paper-tooltip";
+import {
+  css,
+  customElement,
+  html,
+  LitElement,
+  property,
+  TemplateResult,
+} from "lit-element";
+import "./ha-svg-icon";
+
+@customElement("ha-help-tooltip")
+export class HaHelpTooltip extends LitElement {
+  @property() public label!: string;
+
+  @property() public position = "top";
+
+  protected render(): TemplateResult {
+    return html`
+      <ha-svg-icon .path=${mdiHelpCircle}></ha-svg-icon>
+      <paper-tooltip
+        offset="4"
+        .position=${this.position}
+        .fitToVisibleBounds=${true}
+        >${this.label}</paper-tooltip
+      >
+    `;
+  }
+
+  static get styles() {
+    return css`
+      ha-svg-icon {
+        --mdc-icon-size: var(--ha-help-tooltip-size, 14px);
+        color: var(--ha-help-tooltip-color, var(--disabled-text-color));
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-help-tooltip": HaHelpTooltip;
+  }
+}

src/panels/lovelace/components/hui-action-editor.ts

@@ -3,7 +3,10 @@ import "@polymer/paper-input/paper-input";
 import "@polymer/paper-input/paper-textarea";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
+import type { PaperListboxElement } from "@polymer/paper-listbox/paper-listbox";
 import {
+  css,
+  CSSResult,
   customElement,
   html,
   LitElement,
@@ -11,6 +14,7 @@ import {
   TemplateResult,
 } from "lit-element";
 import { fireEvent } from "../../../common/dom/fire_event";
+import "../../../components/ha-help-tooltip";
 import "../../../components/ha-service-picker";
 import {
   ActionConfig,
@@ -29,11 +33,9 @@ export class HuiActionEditor extends LitElement {
 
   @property() public actions?: string[];
 
-  @property() protected hass?: HomeAssistant;
+  @property() public tooltipText?: string;
 
-  get _action(): string {
+  @property() protected hass?: HomeAssistant;
-    return this.config?.action || "";
-  }
 
   get _navigation_path(): string {
     const config = this.config as NavigateActionConfig;
@@ -54,72 +56,131 @@ export class HuiActionEditor extends LitElement {
     if (!this.hass || !this.actions) {
       return html``;
     }
+
     return html`
-      <paper-dropdown-menu
+      <div class="dropdown">
-        .label="${this.label}"
+        <paper-dropdown-menu
-        .configValue="${"action"}"
+          .label=${this.label}
-        @value-changed="${this._valueChanged}"
+          .configValue=${"action"}
-      >
+          @iron-select=${this._actionPicked}
-        <paper-listbox
-          slot="dropdown-content"
-          .selected="${this.actions.indexOf(this._action)}"
         >
-          ${this.actions.map((action) => {
+          <paper-listbox
-            return html` <paper-item>${action}</paper-item> `;
+            slot="dropdown-content"
-          })}
+            attr-for-selected="value"
-        </paper-listbox>
+            .selected=${this.config?.action ?? "default"}
-      </paper-dropdown-menu>
+          >
-      ${this._action === "navigate"
+            <paper-item .value=${"default"}
+              >${this.hass!.localize(
+                "ui.panel.lovelace.editor.action-editor.actions.default_action"
+              )}</paper-item
+            >
+            ${this.actions.map((action) => {
+              return html`
+                <paper-item .value=${action}
+                  >${this.hass!.localize(
+                    `ui.panel.lovelace.editor.action-editor.actions.${action}`
+                  )}</paper-item
+                >
+              `;
+            })}
+          </paper-listbox>
+        </paper-dropdown-menu>
+        ${this.tooltipText
+          ? html`
+              <ha-help-tooltip .label=${this.tooltipText}></ha-help-tooltip>
+            `
+          : ""}
+      </div>
+      ${this.config?.action === "navigate"
         ? html`
             <paper-input
-              label="Navigation Path"
+              label=${this.hass!.localize(
-              .value="${this._navigation_path}"
+                "ui.panel.lovelace.editor.action-editor.navigation_path"
-              .configValue="${"navigation_path"}"
+              )}
-              @value-changed="${this._valueChanged}"
+              .value=${this._navigation_path}
+              .configValue=${"navigation_path"}
+              @value-changed=${this._valueChanged}
             ></paper-input>
           `
         : ""}
-      ${this._action === "url"
+      ${this.config?.action === "url"
         ? html`
             <paper-input
-              label="Url Path"
+              label=${this.hass!.localize(
-              .value="${this._url_path}"
+                "ui.panel.lovelace.editor.action-editor.url_path"
-              .configValue="${"url_path"}"
+              )}
-              @value-changed="${this._valueChanged}"
+              .value=${this._url_path}
+              .configValue=${"url_path"}
+              @value-changed=${this._valueChanged}
             ></paper-input>
           `
         : ""}
-      ${this.config && this.config.action === "call-service"
+      ${this.config?.action === "call-service"
         ? html`
             <ha-service-picker
               .hass=${this.hass}
-              .value="${this._service}"
+              .value=${this._service}
-              .configValue="${"service"}"
+              .configValue=${"service"}
-              @value-changed="${this._valueChanged}"
+              @value-changed=${this._valueChanged}
             ></ha-service-picker>
-            <b>Service data can only be entered in the code editor</b>
+            <b>
+              ${this.hass!.localize(
+                "ui.panel.lovelace.editor.action-editor.editor_service_data"
+              )}
+            </b>
           `
         : ""}
     `;
   }
 
-  private _valueChanged(ev: Event): void {
+  private _actionPicked(ev: CustomEvent): void {
+    ev.stopPropagation();
+    if (!this.hass) {
+      return;
+    }
+    const item = ev.detail.item;
+    const value = item.value;
+    if (this.config?.action === value) {
+      return;
+    }
+    if (value === "default") {
+      fireEvent(this, "value-changed", { value: undefined });
+      if (this.config?.action) {
+        (this.shadowRoot!.querySelector(
+          "paper-listbox"
+        ) as PaperListboxElement).select(this.config.action);
+      }
+      return;
+    }
+    fireEvent(this, "value-changed", {
+      value: { action: value },
+    });
+  }
+
+  private _valueChanged(ev: CustomEvent): void {
     ev.stopPropagation();
     if (!this.hass) {
       return;
     }
     const target = ev.target! as EditorTarget;
-    if (this[`_${target.configValue}`] === target.value) {
+    const value = ev.detail.value;
+    if (this[`_${target.configValue}`] === value) {
       return;
     }
     if (target.configValue) {
-      const newConfig =
+      fireEvent(this, "value-changed", {
-        target.configValue === "action"
+        value: { ...this.config!, [target.configValue!]: value },
-          ? { action: target.value }
+      });
-          : { ...this.config!, [target.configValue!]: target.value };
-      fireEvent(this, "value-changed", { value: newConfig });
     }
   }
+
+  static get styles(): CSSResult {
+    return css`
+      .dropdown {
+        display: flex;
+      }
+    `;
+  }
 }
 
 declare global {

src/panels/lovelace/editor/config-elements/hui-button-card-editor.ts

@@ -38,6 +38,15 @@ const cardConfigStruct = object({
   show_state: optional(boolean()),
 });
 
+const actions = [
+  "more-info",
+  "toggle",
+  "navigate",
+  "url",
+  "call-service",
+  "none",
+];
+
 @customElement("hui-button-card-editor")
 export class HuiButtonCardEditor extends LitElement
   implements LovelaceCardEditor {
@@ -80,8 +89,8 @@ export class HuiButtonCardEditor extends LitElement
       : "";
   }
 
-  get _tap_action(): ActionConfig {
+  get _tap_action(): ActionConfig | undefined {
-    return this._config!.tap_action || { action: "toggle" };
+    return this._config!.tap_action;
   }
 
   get _hold_action(): ActionConfig {
@@ -97,14 +106,6 @@ export class HuiButtonCardEditor extends LitElement
       return html``;
     }
 
-    const actions = [
-      "more-info",
-      "toggle",
-      "navigate",
-      "url",
-      "call-service",
-      "none",
-    ];
     const dir = computeRTLDirection(this.hass!);
 
     return html`
@@ -117,9 +118,9 @@ export class HuiButtonCardEditor extends LitElement
             "ui.panel.lovelace.editor.card.config.optional"
           )})"
           .hass=${this.hass}
-          .value="${this._entity}"
+          .value=${this._entity}
           .configValue=${"entity"}
-          @value-changed="${this._valueChanged}"
+          @value-changed=${this._valueChanged}
           allow-custom-entity
         ></ha-entity-picker>
         <div class="side-by-side">
@@ -129,9 +130,9 @@ export class HuiButtonCardEditor extends LitElement
             )} (${this.hass.localize(
               "ui.panel.lovelace.editor.card.config.optional"
             )})"
-            .value="${this._name}"
+            .value=${this._name}
-            .configValue="${"name"}"
+            .configValue=${"name"}
-            @value-changed="${this._valueChanged}"
+            @value-changed=${this._valueChanged}
           ></paper-input>
           <ha-icon-input
             .label="${this.hass.localize(
@@ -155,9 +156,9 @@ export class HuiButtonCardEditor extends LitElement
               .dir=${dir}
             >
               <ha-switch
-                .checked="${this._show_name !== false}"
+                .checked=${this._show_name !== false}
-                .configValue="${"show_name"}"
+                .configValue=${"show_name"}
-                @change="${this._change}"
+                @change=${this._change}
               ></ha-switch>
             </ha-formfield>
           </div>
@@ -183,9 +184,9 @@ export class HuiButtonCardEditor extends LitElement
               .dir=${dir}
             >
               <ha-switch
-                .checked="${this._show_icon !== false}"
+                .checked=${this._show_icon !== false}
-                .configValue="${"show_icon"}"
+                .configValue=${"show_icon"}
-                @change="${this._change}"
+                @change=${this._change}
               ></ha-switch>
             </ha-formfield>
           </div>
@@ -197,17 +198,17 @@ export class HuiButtonCardEditor extends LitElement
             )} (${this.hass.localize(
               "ui.panel.lovelace.editor.card.config.optional"
             )})"
-            .value="${this._icon_height}"
+            .value=${this._icon_height}
-            .configValue="${"icon_height"}"
+            .configValue=${"icon_height"}
-            @value-changed="${this._valueChanged}"
+            @value-changed=${this._valueChanged}
             type="number"
             ><div class="suffix" slot="suffix">px</div>
           </paper-input>
           <hui-theme-select-editor
             .hass=${this.hass}
-            .value="${this._theme}"
+            .value=${this._theme}
-            .configValue="${"theme"}"
+            .configValue=${"theme"}
-            @value-changed="${this._valueChanged}"
+            @value-changed=${this._valueChanged}
           ></hui-theme-select-editor>
         </div>
         <div class="side-by-side">
@@ -218,10 +219,13 @@ export class HuiButtonCardEditor extends LitElement
               "ui.panel.lovelace.editor.card.config.optional"
             )})"
             .hass=${this.hass}
-            .config="${this._tap_action}"
+            .config=${this._tap_action}
-            .actions="${actions}"
+            .actions=${actions}
-            .configValue="${"tap_action"}"
+            .configValue=${"tap_action"}
-            @value-changed="${this._valueChanged}"
+            .tooltipText=${this.hass.localize(
+              "ui.panel.lovelace.editor.card.button.default_action_help"
+            )}
+            @value-changed=${this._valueChanged}
           ></hui-action-editor>
           <hui-action-editor
             .label="${this.hass.localize(
@@ -230,10 +234,13 @@ export class HuiButtonCardEditor extends LitElement
               "ui.panel.lovelace.editor.card.config.optional"
             )})"
             .hass=${this.hass}
-            .config="${this._hold_action}"
+            .config=${this._hold_action}
-            .actions="${actions}"
+            .actions=${actions}
-            .configValue="${"hold_action"}"
+            .configValue=${"hold_action"}
-            @value-changed="${this._valueChanged}"
+            .tooltipText=${this.hass.localize(
+              "ui.panel.lovelace.editor.card.button.default_action_help"
+            )}
+            @value-changed=${this._valueChanged}
           ></hui-action-editor>
         </div>
       </div>
@@ -251,11 +258,12 @@ export class HuiButtonCardEditor extends LitElement
       return;
     }
 
-    this._config = {
+    fireEvent(this, "config-changed", {
-      ...this._config,
+      config: {
-      [target.configValue!]: value,
+        ...this._config,
-    };
+        [target.configValue!]: value,
-    fireEvent(this, "config-changed", { config: this._config });
+      },
+    });
   }
 
   private _valueChanged(ev: CustomEvent): void {
@@ -268,25 +276,22 @@ export class HuiButtonCardEditor extends LitElement
     if (this[`_${target.configValue}`] === value) {
       return;
     }
+    let newConfig;
     if (target.configValue) {
       if (value !== false && !value) {
-        this._config = { ...this._config };
+        newConfig = { ...this._config };
-        delete this._config[target.configValue!];
+        delete newConfig[target.configValue!];
       } else {
-        let newValue: string | undefined;
+        newConfig = {
-        if (
-          target.configValue === "icon_height" &&
-          !isNaN(Number(target.value))
-        ) {
-          newValue = `${String(value)}px`;
-        }
-        this._config = {
           ...this._config,
-          [target.configValue!]: newValue !== undefined ? newValue : value,
+          [target.configValue!]:
+            target.configValue === "icon_height" && !isNaN(Number(target.value))
+              ? `${String(value)}px`
+              : value,
         };
       }
     }
-    fireEvent(this, "config-changed", { config: this._config });
+    fireEvent(this, "config-changed", { config: newConfig });
   }
 }
 

src/translations/en.json

@@ -2247,6 +2247,20 @@
             "para_migrate": "Home Assistant can add ID's to all your cards and views automatically for you by pressing the 'Migrate configuration' button.",
             "migrate": "Migrate configuration"
           },
+          "action-editor": {
+            "navigation_path": "Navigation Path",
+            "url_path": "Url Path",
+            "editor_service_data": "Service data can only be entered in the code editor",
+            "actions": {
+              "default_action": "Default Action",
+              "call-service": "Call Service",
+              "more-info": "More Info",
+              "toggle": "Toggle",
+              "navigate": "Navigate",
+              "url": "Url",
+              "none": "No Action"
+            }
+          },
           "card": {
             "alarm-panel": {
               "name": "Alarm Panel",
@@ -2304,7 +2318,8 @@
             },
             "button": {
               "name": "Button",
-              "description": "The Button card allows you to add buttons to perform tasks."
+              "description": "The Button card allows you to add buttons to perform tasks.",
+              "default_action_help": "The default action depends on the entity's capabilities, it will either be toggled or the more info will be shown."
             },
             "entity-filter": {
               "name": "Entity Filter",