From f871387fa6860018467a00da0d1c0a03c73b2df7 Mon Sep 17 00:00:00 2001
From: Ian Richardson <iantrich@gmail.com>
Date: Sun, 22 Sep 2019 14:56:29 -0500
Subject: [PATCH] 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                          |  6 ++++++
 src/panels/lovelace/common/compute-tooltip.ts |  7 +++++++
 src/panels/lovelace/common/handle-click.ts    |  5 +++++
 .../lovelace/components/hui-action-editor.ts  | 21 +++++++++++++++----
 .../hui-entity-button-card-editor.ts          |  9 +++++++-
 .../hui-picture-card-editor.ts                |  2 +-
 src/panels/lovelace/editor/types.ts           |  1 +
 src/translations/en.json                      |  1 +
 8 files changed, 46 insertions(+), 6 deletions(-)

diff --git a/src/data/lovelace.ts b/src/data/lovelace.ts
index 8b30d83ad1..103b1d147f 100644
--- a/src/data/lovelace.ts
+++ b/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;
 
diff --git a/src/panels/lovelace/common/compute-tooltip.ts b/src/panels/lovelace/common/compute-tooltip.ts
index f3e77143f2..f2140227c3 100644
--- a/src/panels/lovelace/common/compute-tooltip.ts
+++ b/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",
diff --git a/src/panels/lovelace/common/handle-click.ts b/src/panels/lovelace/common/handle-click.ts
index 001ceb6d50..d4ee03899a 100644
--- a/src/panels/lovelace/common/handle-click.ts
+++ b/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!);
diff --git a/src/panels/lovelace/components/hui-action-editor.ts b/src/panels/lovelace/components/hui-action-editor.ts
index 472de0d87d..65d0ce16ea 100644
--- a/src/panels/lovelace/components/hui-action-editor.ts
+++ b/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") {
diff --git a/src/panels/lovelace/editor/config-elements/hui-entity-button-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-entity-button-card-editor.ts
index 456a0824bb..d09b6512f7 100644
--- a/src/panels/lovelace/editor/config-elements/hui-entity-button-card-editor.ts
+++ b/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}
diff --git a/src/panels/lovelace/editor/config-elements/hui-picture-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-picture-card-editor.ts
index cfde20c852..caac8ac610 100644
--- a/src/panels/lovelace/editor/config-elements/hui-picture-card-editor.ts
+++ b/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}
diff --git a/src/panels/lovelace/editor/types.ts b/src/panels/lovelace/editor/types.ts
index aea4a4e65c..3507ddc314 100644
--- a/src/panels/lovelace/editor/types.ts
+++ b/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?",
 });
diff --git a/src/translations/en.json b/src/translations/en.json
index b0d08df894..547ce38011 100644
--- a/src/translations/en.json
+++ b/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}"