Action tooltips (#2193)

* Fix tooltips for tap actions and add hold actions

* Cleanup logic

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

@@ -1,6 +1,7 @@
 import computeStateName from "../../../common/entity/compute_state_name";
 import { HomeAssistant } from "../../../types";
 import { LovelaceElementConfig } from "../elements/types";
+import { ActionConfig } from "../../../data/lovelace";
 
 export const computeTooltip = (
   hass: HomeAssistant,
@@ -11,7 +12,7 @@ export const computeTooltip = (
   }
 
   let stateName = "";
-  let tooltip: string;
+  let tooltip = "";
 
   if (config.entity) {
     stateName =
@@ -20,19 +21,45 @@ export const computeTooltip = (
         : config.entity;
   }
 
-  switch (config.tap_action && config.tap_action.action) {
+  const tapTooltip = config.tap_action
-    case "navigate":
+    ? computeActionTooltip(stateName, config.tap_action, false)
-      tooltip = `Navigate to ${config.navigation_path}`;
+    : "";
-      break;
+  const holdTooltip = config.hold_action
-    case "toggle":
+    ? computeActionTooltip(stateName, config.hold_action, true)
-      tooltip = `Toggle ${stateName}`;
+    : "";
-      break;
+
-    case "call-service":
+  const newline = tapTooltip && holdTooltip ? "\n" : "";
-      tooltip = `Call service ${config.service}`;
+
-      break;
+  tooltip = tapTooltip + newline + holdTooltip;
-    default:
-      tooltip = `Show more-info: ${stateName}`;
-  }
 
   return tooltip;
 };
+
+function computeActionTooltip(
+  state: string,
+  config: ActionConfig,
+  isHold: boolean
+) {
+  if (!config || !config.action || config.action === "none") {
+    return "";
+  }
+
+  let tooltip = isHold ? "Hold: " : "Tap: ";
+
+  switch (config.action) {
+    case "navigate":
+      tooltip += `Navigate to ${config.navigation_path}`;
+      break;
+    case "toggle":
+      tooltip += `Toggle ${state}`;
+      break;
+    case "call-service":
+      tooltip += `Call service ${config.service}`;
+      break;
+    case "more-info":
+      tooltip += `Show more-info: ${state}`;
+      break;
+  }
+
+  return tooltip;
+}

src/panels/lovelace/elements/types.ts

@@ -8,7 +8,6 @@ export interface LovelaceElementConfig {
   hold_action?: ActionConfig;
   service?: string;
   service_data?: object;
-  navigation_path?: string;
   tap_action?: ActionConfig;
   title?: string;
 }