Add an empty state card (#2637)

* Add an empty state card

* Remove dev code

* Fix import

src/panels/lovelace/cards/hui-empty-state-card.ts

@@ -0,0 +1,89 @@
+import {
+  html,
+  LitElement,
+  PropertyDeclarations,
+  TemplateResult,
+  CSSResult,
+  css,
+} from "lit-element";
+
+import "@polymer/paper-card/paper-card";
+
+import { LovelaceCard } from "../types";
+import { LovelaceCardConfig } from "../../../data/lovelace";
+import { HomeAssistant } from "../../../types";
+
+export interface Config extends LovelaceCardConfig {
+  content: string;
+  title?: string;
+}
+
+export class HuiEmptyStateCard extends LitElement implements LovelaceCard {
+  public hass?: HomeAssistant;
+
+  public getCardSize(): number {
+    return 2;
+  }
+
+  public setConfig(_config: Config): void {
+    // tslint:disable-next-line
+  }
+
+  static get properties(): PropertyDeclarations {
+    return {
+      hass: {},
+    };
+  }
+
+  protected render(): TemplateResult | void {
+    if (!this.hass) {
+      return html``;
+    }
+
+    return html`
+      <paper-card
+        .heading="${this.hass.localize(
+          "ui.panel.lovelace.cards.empty_state.title"
+        )}"
+      >
+        <div class="card-content">
+          ${this.hass.localize(
+            "ui.panel.lovelace.cards.empty_state.no_devices"
+          )}
+        </div>
+        <div class="card-actions">
+          <a href="/config/integrations">
+            <paper-button>
+              ${this.hass.localize(
+                "ui.panel.lovelace.cards.empty_state.go_to_integrations_page"
+              )}
+            </paper-button>
+          </a>
+        </div>
+      </paper-card>
+    `;
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      .content {
+        margin-top: -1em;
+        padding: 16px;
+      }
+
+      paper-button {
+        margin-left: -8px;
+        font-weight: 500;
+        color: var(--primary-color);
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-empty-state-card": HuiEmptyStateCard;
+  }
+}
+
+customElements.define("hui-empty-state-card", HuiEmptyStateCard);

src/panels/lovelace/common/generate-lovelace-config.ts

@@ -282,6 +282,14 @@ export const generateLovelaceConfig = (
     });
   }
 
+  // User has no entities
+  if (views.length === 1 && views[0].cards!.length === 0) {
+    import("../cards/hui-empty-state-card");
+    views[0].cards!.push({
+      type: "custom:hui-empty-state-card",
+    });
+  }
+
   return {
     title,
     views,

src/translations/en.json

@@ -807,6 +807,11 @@
       },
       "lovelace": {
         "cards": {
+          "empty_state": {
+            "title": "Welcome Home",
+            "no_devices": "This page allows you to control your devices, however it looks like you have no devices set up yet. Head to the integrations page to get started.",
+            "go_to_integrations_page": "Go to the integrations page."
+          },
           "shopping-list": {
             "checked_items": "Checked items",
             "clear_items": "Clear checked items",