new action: url (#3773)

* new action: url

Takes a `url_path` option.
Closes https://github.com/home-assistant/ui-schema/issues/249
I'm experience the issue described here with my string values in the action-editor: https://github.com/home-assistant/home-assistant-polymer/issues/2645. Have not been able to track down where the issue is.

* Fix losing config on init

* fix action-editor

src/data/lovelace.ts

@@ -45,6 +45,11 @@ export interface NavigateActionConfig {
   navigation_path: string;
 }
 
+export interface UrlActionConfig {
+  action: "url";
+  url_path: string;
+}
+
 export interface MoreInfoActionConfig {
   action: "more-info";
 }
@@ -57,6 +62,7 @@ export type ActionConfig =
   | ToggleActionConfig
   | CallServiceActionConfig
   | NavigateActionConfig
+  | UrlActionConfig
   | MoreInfoActionConfig
   | NoActionConfig;
 

src/panels/lovelace/common/compute-tooltip.ts

@@ -66,6 +66,13 @@ function computeActionTooltip(
         config.navigation_path
       )}`;
       break;
+    case "url":
+      tooltip += `${hass.localize(
+        "ui.panel.lovelace.cards.picture-elements.url",
+        "url_path",
+        config.url_path
+      )}`;
+      break;
     case "toggle":
       tooltip += `${hass.localize(
         "ui.panel.lovelace.cards.picture-elements.toggle",

src/panels/lovelace/common/handle-click.ts

@@ -43,6 +43,11 @@ export const handleClick = (
         navigate(node, actionConfig.navigation_path);
       }
       break;
+    case "url":
+      if (actionConfig.url_path) {
+        window.open(actionConfig.url_path);
+      }
+      break;
     case "toggle":
       if (config.entity) {
         toggleEntity(hass, config.entity!);

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

@@ -19,6 +19,7 @@ import {
   ActionConfig,
   NavigateActionConfig,
   CallServiceActionConfig,
+  UrlActionConfig,
 } from "../../../data/lovelace";
 
 declare global {
@@ -51,6 +52,11 @@ export class HuiActionEditor extends LitElement {
     return config.navigation_path || "";
   }
 
+  get _url_path(): string {
+    const config = this.config! as UrlActionConfig;
+    return config.url_path || "";
+  }
+
   get _service(): string {
     const config = this.config! as CallServiceActionConfig;
     return config.service || "";
@@ -87,6 +93,16 @@ export class HuiActionEditor extends LitElement {
             ></paper-input>
           `
         : ""}
+      ${this._action === "url"
+        ? html`
+            <paper-input
+              label="Url Path"
+              .value="${this._url_path}"
+              .configValue="${"url_path"}"
+              @value-changed="${this._valueChanged}"
+            ></paper-input>
+          `
+        : ""}
       ${this.config && this.config.action === "call-service"
         ? html`
             <ha-service-picker
@@ -106,10 +122,7 @@ export class HuiActionEditor extends LitElement {
       return;
     }
     const target = ev.target! as EditorTarget;
-    if (
-      this.config &&
-      this.config[this[`${target.configValue}`]] === target.value
-    ) {
+    if (this[`_${target.configValue}`] === target.value) {
       return;
     }
     if (target.configValue === "action") {

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

@@ -92,7 +92,14 @@ export class HuiEntityButtonCardEditor extends LitElement
       return html``;
     }
 
-    const actions = ["more-info", "toggle", "navigate", "call-service", "none"];
+    const actions = [
+      "more-info",
+      "toggle",
+      "navigate",
+      "url",
+      "call-service",
+      "none",
+    ];
 
     return html`
       ${configElementStyle}

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

@@ -58,7 +58,7 @@ export class HuiPictureCardEditor extends LitElement
       return html``;
     }
 
-    const actions = ["navigate", "call-service", "none"];
+    const actions = ["navigate", "url", "call-service", "none"];
 
     return html`
       ${configElementStyle}

src/panels/lovelace/editor/types.ts

@@ -52,6 +52,7 @@ export interface CardPickTarget extends EventTarget {
 export const actionConfigStruct = struct({
   action: "string",
   navigation_path: "string?",
+  url_path: "string?",
   service: "string?",
   service_data: "object?",
 });

src/translations/en.json

@@ -1057,6 +1057,7 @@
             "hold": "Hold:",
             "tap": "Tap:",
             "navigate_to": "Navigate to {location}",
+            "url": "Open window to {url_path}",
             "toggle": "Toggle {name}",
             "call_service": "Call service {name}",
             "more_info": "Show more-info: {name}"