Handle webhook component not loaded (#2255)

* Handle webhook component not loaded

* Fix text

src/data/websocket_api.ts

@@ -0,0 +1,6 @@
+export const ERR_ID_REUSE = "id_reuse";
+export const ERR_INVALID_FORMAT = "invalid_format";
+export const ERR_NOT_FOUND = "not_found";
+export const ERR_UNKNOWN_COMMAND = "unknown_command";
+export const ERR_UNKNOWN_ERROR = "unknown_error";
+export const ERR_UNAUTHORIZED = "unauthorized";

src/panels/config/cloud/cloud-webhooks.ts

@@ -20,6 +20,7 @@ import {
   deleteCloudhook,
   CloudWebhook,
 } from "../../../data/cloud";
+import { ERR_UNKNOWN_COMMAND } from "../../../data/websocket_api";
 
 declare global {
   // for fire event
@@ -86,7 +87,17 @@ export class CloudWebhooks extends LitElement {
   private _renderBody() {
     if (!this.cloudStatus || !this._localHooks || !this._cloudHooks) {
       return html`
-        <div class="loading">Loading…</div>
+        <div class="body-text">Loading…</div>
+      `;
+    }
+
+    if (this._localHooks.length === 0) {
+      return html`
+        <div class="body-text">
+          Looks like you have no webhooks yet. Get started by configuring a
+          <a href="/config/integrations">webhook-based integration</a> or by
+          creating a <a href="/config/automation/new">webhook automation</a>.
+        </div>
       `;
     }
 
@@ -188,7 +199,15 @@ export class CloudWebhooks extends LitElement {
   }
 
   private async _fetchData() {
-    this._localHooks = await fetchWebhooks(this.hass!);
+    try {
+      this._localHooks = await fetchWebhooks(this.hass!);
+    } catch (err) {
+      if (err.code === ERR_UNKNOWN_COMMAND) {
+        this._localHooks = [];
+      } else {
+        throw err;
+      }
+    }
   }
 
   private renderStyle() {
@@ -197,7 +216,7 @@ export class CloudWebhooks extends LitElement {
         .body {
           padding: 0 16px 8px;
         }
-        .loading {
+        .body-text {
           padding: 0 16px;
         }
         .webhook {
@@ -217,6 +236,7 @@ export class CloudWebhooks extends LitElement {
         .footer {
           padding: 16px;
         }
+        .body-text a,
         .footer a {
           color: var(--primary-color);
         }