diff --git a/src/data/websocket_api.ts b/src/data/websocket_api.ts new file mode 100644 index 0000000000..b67ab65740 --- /dev/null +++ b/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"; diff --git a/src/panels/config/cloud/cloud-webhooks.ts b/src/panels/config/cloud/cloud-webhooks.ts index bec6948ab3..db0d3a1dad 100644 --- a/src/panels/config/cloud/cloud-webhooks.ts +++ b/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` -
Loading…
+
Loading…
+ `; + } + + if (this._localHooks.length === 0) { + return html` +
+ Looks like you have no webhooks yet. Get started by configuring a + webhook-based integration or by + creating a webhook automation. +
`; } @@ -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); }