From cc0515c217d563da1063e65198396320e5227846 Mon Sep 17 00:00:00 2001
From: Villhellm <wlatourelle@gmail.com>
Date: Sat, 10 Oct 2020 23:14:22 -0700
Subject: [PATCH] Add help link on automations picker and updated links for
 scripts and scenes (#7129)

Co-authored-by: Zack Barett <zackbarett@hey.com>
---
 .../config/automation/ha-automation-picker.ts | 29 +++++++++++++++++--
 src/panels/config/scene/ha-scene-dashboard.ts | 11 ++++---
 src/panels/config/script/ha-script-picker.ts  | 11 ++++---
 3 files changed, 37 insertions(+), 14 deletions(-)

diff --git a/src/panels/config/automation/ha-automation-picker.ts b/src/panels/config/automation/ha-automation-picker.ts
index 6f617ad2b9..02cdf95a45 100644
--- a/src/panels/config/automation/ha-automation-picker.ts
+++ b/src/panels/config/automation/ha-automation-picker.ts
@@ -1,5 +1,6 @@
 import "@material/mwc-fab";
-import { mdiPlus } from "@mdi/js";
+import "@material/mwc-icon-button";
+import { mdiPlus, mdiHelpCircle } from "@mdi/js";
 import "@polymer/paper-tooltip/paper-tooltip";
 import {
   CSSResult,
@@ -16,8 +17,8 @@ import { formatDateTime } from "../../../common/datetime/format_date_time";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { computeStateName } from "../../../common/entity/compute_state_name";
 import { DataTableColumnContainer } from "../../../components/data-table/ha-data-table";
+import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
 import "../../../components/entity/ha-entity-toggle";
-import "../../../components/ha-icon-button";
 import "../../../components/ha-svg-icon";
 import {
   AutomationConfig,
@@ -31,6 +32,7 @@ import { haStyle } from "../../../resources/styles";
 import { HomeAssistant, Route } from "../../../types";
 import { configSections } from "../ha-panel-config";
 import { showThingtalkDialog } from "./show-dialog-thingtalk";
+import { documentationUrl } from "../../../util/documentation-url";
 
 @customElement("ha-automation-picker")
 class HaAutomationPicker extends LitElement {
@@ -169,6 +171,9 @@ class HaAutomationPicker extends LitElement {
         )}
         hasFab
       >
+        <mwc-icon-button slot="toolbar-icon" @click=${this._showHelp}>
+          <ha-svg-icon .path=${mdiHelpCircle}></ha-svg-icon>
+        </mwc-icon-button>
         <mwc-fab
           slot="fab"
           title=${this.hass.localize(
@@ -188,6 +193,26 @@ class HaAutomationPicker extends LitElement {
     fireEvent(this, "hass-more-info", { entityId });
   }
 
+  private _showHelp() {
+    showAlertDialog(this, {
+      title: this.hass.localize("ui.panel.config.automation.caption"),
+      text: html`
+        ${this.hass.localize("ui.panel.config.automation.picker.introduction")}
+        <p>
+          <a
+            href="${documentationUrl(this.hass, "/docs/automation/editor/")}"
+            target="_blank"
+            rel="noreferrer"
+          >
+            ${this.hass.localize(
+              "ui.panel.config.automation.picker.learn_more"
+            )}
+          </a>
+        </p>
+      `,
+    });
+  }
+
   private _execute(ev) {
     const entityId = ev.currentTarget.automation.entity_id;
     triggerAutomation(this.hass, entityId);
diff --git a/src/panels/config/scene/ha-scene-dashboard.ts b/src/panels/config/scene/ha-scene-dashboard.ts
index d9b81bb317..18666ee10c 100644
--- a/src/panels/config/scene/ha-scene-dashboard.ts
+++ b/src/panels/config/scene/ha-scene-dashboard.ts
@@ -1,5 +1,6 @@
 import "@material/mwc-fab";
-import { mdiPlus } from "@mdi/js";
+import "@material/mwc-icon-button";
+import { mdiPlus, mdiHelpCircle } from "@mdi/js";
 import "@polymer/paper-tooltip/paper-tooltip";
 import {
   css,
@@ -147,11 +148,9 @@ class HaSceneDashboard extends LitElement {
         )}
         hasFab
       >
-        <ha-icon-button
-          slot="toolbar-icon"
-          icon="hass:help-circle"
-          @click=${this._showHelp}
-        ></ha-icon-button>
+        <mwc-icon-button slot="toolbar-icon" @click=${this._showHelp}>
+          <ha-svg-icon .path=${mdiHelpCircle}></ha-svg-icon>
+        </mwc-icon-button>
         <a href="/config/scene/edit/new" slot="fab">
           <mwc-fab
             title=${this.hass.localize(
diff --git a/src/panels/config/script/ha-script-picker.ts b/src/panels/config/script/ha-script-picker.ts
index 199620f442..3dc94b280c 100644
--- a/src/panels/config/script/ha-script-picker.ts
+++ b/src/panels/config/script/ha-script-picker.ts
@@ -1,3 +1,4 @@
+import "@material/mwc-icon-button";
 import "../../../components/ha-icon-button";
 import { HassEntity } from "home-assistant-js-websocket";
 import {
@@ -23,7 +24,7 @@ import { HomeAssistant, Route } from "../../../types";
 import { showToast } from "../../../util/toast";
 import { configSections } from "../ha-panel-config";
 import "../../../components/ha-svg-icon";
-import { mdiPlus } from "@mdi/js";
+import { mdiPlus, mdiHelpCircle } from "@mdi/js";
 import { stateIcon } from "../../../common/entity/state_icon";
 import { documentationUrl } from "../../../util/documentation-url";
 
@@ -141,11 +142,9 @@ class HaScriptPicker extends LitElement {
         )}
         hasFab
       >
-        <ha-icon-button
-          slot="toolbar-icon"
-          icon="hass:help-circle"
-          @click=${this._showHelp}
-        ></ha-icon-button>
+        <mwc-icon-button slot="toolbar-icon" @click=${this._showHelp}>
+          <ha-svg-icon .path=${mdiHelpCircle}></ha-svg-icon>
+        </mwc-icon-button>
         <a href="/config/script/edit/new" slot="fab">
           <mwc-fab
             ?is-wide=${this.isWide}