Add no devices available hint to person editor (#3906)

* Add no devices available hint to person editor (#3731)

* Fix device_tracker check and adjust messages

* fix lint

* Add location, fix memoize usage, hide entity picker and update text

* Move links to a list

src/panels/config/person/dialog-person-detail.ts

@@ -9,9 +9,9 @@ import {
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
 import "@polymer/paper-input/paper-input";
 import "@material/mwc-button";
+import memoizeOne from "memoize-one";
 
 import "../../../components/dialog/ha-paper-dialog";
-
 import "../../../components/entity/ha-entities-picker";
 import "../../../components/user/ha-user-picker";
 import { PersonDetailDialogParams } from "./show-dialog-person-detail";
@@ -29,6 +29,13 @@ class DialogPersonDetail extends LitElement {
   @property() private _params?: PersonDetailDialogParams;
   @property() private _submitting: boolean = false;
 
+  private _deviceTrackersAvailable = memoizeOne((hass) => {
+    return Object.keys(hass.states).some(
+      (entityId) =>
+        entityId.substr(0, entityId.indexOf(".")) === "device_tracker"
+    );
+  });
+
   public async showDialog(params: PersonDetailDialogParams): Promise<void> {
     this._params = params;
     this._error = undefined;
@@ -87,23 +94,55 @@ class DialogPersonDetail extends LitElement {
               .users=${this._params.users}
               @value-changed=${this._userChanged}
             ></ha-user-picker>
-            <p>
+            ${this._deviceTrackersAvailable(this.hass)
-              ${this.hass.localize(
+              ? html`
-                "ui.panel.config.person.detail.device_tracker_intro"
+                  <p>
-              )}
+                    ${this.hass.localize(
-            </p>
+                      "ui.panel.config.person.detail.device_tracker_intro"
-            <ha-entities-picker
+                    )}
-              .hass=${this.hass}
+                  </p>
-              .value=${this._deviceTrackers}
+                  <ha-entities-picker
-              domain-filter="device_tracker"
+                    .hass=${this.hass}
-              .pickedEntityLabel=${this.hass.localize(
+                    .value=${this._deviceTrackers}
-                "ui.panel.config.person.detail.device_tracker_picked"
+                    domain-filter="device_tracker"
-              )}
+                    .pickedEntityLabel=${this.hass.localize(
-              .pickEntityLabel=${this.hass.localize(
+                      "ui.panel.config.person.detail.device_tracker_picked"
-                "ui.panel.config.person.detail.device_tracker_pick"
+                    )}
-              )}
+                    .pickEntityLabel=${this.hass.localize(
-              @value-changed=${this._deviceTrackersChanged}
+                      "ui.panel.config.person.detail.device_tracker_pick"
-            ></ha-entities-picker>
+                    )}
+                    @value-changed=${this._deviceTrackersChanged}
+                  >
+                  </ha-entities-picker>
+                `
+              : html`
+                  <p>
+                    ${this.hass!.localize(
+                      "ui.panel.config.person.detail.no_device_tracker_available_intro"
+                    )}
+                  </p>
+                  <ul>
+                    <li>
+                      <a
+                        href="https://www.home-assistant.io/integrations/#presence-detection"
+                        target="_blank"
+                        >${this.hass!.localize(
+                          "ui.panel.config.person.detail.link_presence_detection_integrations"
+                        )}</a
+                      >
+                    </li>
+                    <li>
+                      <a
+                        @click="${this._closeDialog}"
+                        href="/config/integrations"
+                      >
+                        ${this.hass!.localize(
+                          "ui.panel.config.person.detail.link_integrations_page"
+                        )}</a
+                      >
+                    </li>
+                  </ul>
+                `}
           </div>
         </paper-dialog-scrollable>
         <div class="paper-dialog-buttons">
@@ -131,6 +170,10 @@ class DialogPersonDetail extends LitElement {
     `;
   }
 
+  private _closeDialog() {
+    this._params = undefined;
+  }
+
   private _nameChanged(ev: PolymerChangedEvent<string>) {
     this._error = undefined;
     this._name = ev.detail.value;

src/translations/en.json

@@ -1148,6 +1148,9 @@
             "name_error_msg": "Name is required",
             "linked_user": "Linked User",
             "device_tracker_intro": "Select the devices that belong to this person.",
+            "no_device_tracker_available_intro": "When you have devices that indicate the presence of a person, you will be able to assign them to a person here. You can add your first device by adding a presence-detection integration from the integrations page.",
+            "link_presence_detection_integrations": "Presence Detection Integrations",
+            "link_integrations_page": "Integrations page",
             "device_tracker_picked": "Track Device",
             "device_tracker_pick": "Pick device to track",
             "delete": "Delete",