From eb036a12d999c73e962822afc0a735e16e033940 Mon Sep 17 00:00:00 2001
From: Villhellm <wlatourelle@gmail.com>
Date: Sat, 17 Oct 2020 13:21:03 -0700
Subject: [PATCH] add help button to tags config panel (#7278)

* add help button to tags config panel

* Update src/panels/config/tags/ha-config-tags.ts

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

Co-authored-by: Bram Kragten <mail@bramkragten.nl>
---
 src/panels/config/tags/ha-config-tags.ts | 40 ++++++++++++++++++++++--
 src/translations/en.json                 |  1 +
 2 files changed, 39 insertions(+), 2 deletions(-)

diff --git a/src/panels/config/tags/ha-config-tags.ts b/src/panels/config/tags/ha-config-tags.ts
index a3566f83f8..a2b2d52d07 100644
--- a/src/panels/config/tags/ha-config-tags.ts
+++ b/src/panels/config/tags/ha-config-tags.ts
@@ -1,5 +1,6 @@
 import "@material/mwc-fab";
-import { mdiCog, mdiContentDuplicate, mdiPlus, mdiRobot } from "@mdi/js";
+import "@material/mwc-icon-button";
+import { mdiCog, mdiContentDuplicate, mdiPlus, mdiRobot, mdiHelpCircle } from "@mdi/js";
 import {
   customElement,
   html,
@@ -23,7 +24,7 @@ import {
   updateTag,
   UpdateTagParams,
 } from "../../../data/tag";
-import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box";
+import { showConfirmationDialog, showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
 import { getExternalConfig } from "../../../external_app/external_config";
 import "../../../layouts/hass-tabs-subpage-data-table";
 import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
@@ -31,6 +32,7 @@ import { HomeAssistant, Route } from "../../../types";
 import { configSections } from "../ha-panel-config";
 import { showTagDetailDialog } from "./show-dialog-tag-detail";
 import "./tag-image";
+import { documentationUrl } from "../../../util/documentation-url";
 
 export interface TagRowData extends Tag {
   last_scanned_datetime: Date | null;
@@ -193,6 +195,9 @@ export class HaConfigTags extends SubscribeMixin(LitElement) {
         .noDataText=${this.hass.localize("ui.panel.config.tags.no_tags")}
         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("ui.panel.config.tags.add_tag")}
@@ -204,6 +209,37 @@ export class HaConfigTags extends SubscribeMixin(LitElement) {
     `;
   }
 
+  private _showHelp() {
+    showAlertDialog(this, {
+      title: this.hass.localize("ui.panel.config.tags.caption"),
+      text: html`
+        <p>
+        ${this.hass.localize(
+          "ui.panel.config.tags.detail.usage",
+          "companion_link",
+          html`<a
+            href="https://companion.home-assistant.io/"
+            target="_blank"
+            rel="noreferrer"
+            >${this.hass!.localize(
+              "ui.panel.config.tags.detail.companion_apps"
+            )}</a
+          >`
+        )}
+        </p>
+        <p>
+          <a
+            href="${documentationUrl(this.hass, "/integrations/tag/")}"
+            target="_blank"
+            rel="noreferrer"
+          >
+            ${this.hass.localize("ui.panel.config.tags.learn_more")}
+          </a>
+        </p>
+      `,
+    });
+  }
+
   private async _fetchTags() {
     this._tags = await fetchTags(this.hass);
   }
diff --git a/src/translations/en.json b/src/translations/en.json
index 1491539715..dd8cbd7bbc 100755
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -758,6 +758,7 @@
         "tags": {
           "caption": "Tags",
           "description": "Manage tags",
+          "learn_more": "Learn more about tags",
           "no_tags": "No tags",
           "add_tag": "Add tag",
           "write": "Write",