Add support for Home Assistant domain in manifest (#101)

README.md

@@ -14,6 +14,7 @@ Manifest definition:
 {
   "name": "ESPHome",
   "version": "2021.10.3",
+  "home_assistant_domain": "esphome",
   "builds": [
     {
       "chipFamily": "ESP32",

index.html

@@ -266,6 +266,7 @@
 {
   "name": "ESPHome",
   "version": "2021.11.0",
+  "home_assistant_domain": "esphome",
   "builds": [
     {
       "chipFamily": "ESP32",
@@ -291,6 +292,11 @@
         where it should be installed. Part paths are resolved relative to the
         path of the manifest, but can also be URLs to other hosts.
       </p>
+      <p>
+        If your firmware is supported by Home Assistant, you can add the
+        optional key <code>home_assistant_domain</code>. If present, ESP Web
+        Tools will link the user to add this device to Home Assistant.
+      </p>
       <h3 id="improv">Wi-Fi provisioning</h3>
       <p>
         ESP Web Tools has support for the

src/const.ts

@@ -15,6 +15,7 @@ export interface Build {
 export interface Manifest {
   name: string;
   version: string;
+  home_assistant_domain?: string;
   builds: Build[];
 }
 

src/install-dialog.ts

@@ -61,11 +61,6 @@ class EwtInstallDialog extends LitElement {
 
   @state() private _busy = false;
 
-  private _progressFeedback?: {
-    resolve: (_: unknown) => void;
-    reject: () => void;
-  };
-
   protected render() {
     if (!this.port) {
       return html``;
@@ -180,7 +175,21 @@ class EwtInstallDialog extends LitElement {
                   class="has-button"
                   target="_blank"
                 >
-                  <ewt-button label="Set up Device"></ewt-button>
+                  <ewt-button label="Visit Device"></ewt-button>
+                </a>
+              </div>
+            `}
+        ${!this._manifest.home_assistant_domain ||
+        this._client!.state !== ImprovSerialCurrentState.PROVISIONED
+          ? ""
+          : html`
+              <div>
+                <a
+                  href=${`https://my.home-assistant.io/redirect/config_flow_start/?domain=${this._manifest.home_assistant_domain}`}
+                  class="has-button"
+                  target="_blank"
+                >
+                  <ewt-button label="Add to Home Assistant"></ewt-button>
                 </a>
               </div>
             `}
@@ -245,29 +254,53 @@ class EwtInstallDialog extends LitElement {
       this._client!.state === ImprovSerialCurrentState.PROVISIONED
     ) {
       heading = undefined;
+      const showSetupLinks =
+        !this._wasProvisioned &&
+        (this._client!.nextUrl !== undefined ||
+          "home_assistant_domain" in this._manifest);
+      hideActions = showSetupLinks;
       content = html`
         ${messageTemplate(OK_ICON, "Device connected to the network!")}
-        ${!this._wasProvisioned && this._client!.nextUrl !== undefined
+        ${showSetupLinks
           ? html`
-              <a
+              <div class="dashboard-buttons">
-                slot="primaryAction"
+                <div>
-                href=${this._client!.nextUrl}
+                  <a
-                class="has-button"
+                    href=${this._client!.nextUrl}
-                target="_blank"
+                    class="has-button"
-                @click=${() => {
+                    target="_blank"
-                  this._state = "DASHBOARD";
+                    @click=${() => {
-                }}
+                      this._state = "DASHBOARD";
-              >
+                    }}
-                <ewt-button label="Set up Device"></ewt-button>
+                  >
-              </a>
+                    <ewt-button label="Visit Device"></ewt-button>
-              <ewt-button
+                  </a>
-                slot="secondaryAction"
+                </div>
-                label="Skip"
+                ${!this._manifest.home_assistant_domain
-                @click=${() => {
+                  ? ""
-                  this._state = "DASHBOARD";
+                  : html`
-                  this._installState = undefined;
+                      <div>
-                }}
+                        <a
-              ></ewt-button>
+                          href=${`https://my.home-assistant.io/redirect/config_flow_start/?domain=${this._manifest.home_assistant_domain}`}
+                          class="has-button"
+                          target="_blank"
+                        >
+                          <ewt-button
+                            label="Add to Home Assistant"
+                          ></ewt-button>
+                        </a>
+                      </div>
+                    `}
+                <div>
+                  <ewt-button
+                    label="Skip"
+                    @click=${() => {
+                      this._state = "DASHBOARD";
+                      this._installState = undefined;
+                    }}
+                  ></ewt-button>
+                </div>
+              </div>
             `
           : html`
               <ewt-button
@@ -617,9 +650,6 @@ class EwtInstallDialog extends LitElement {
   };
 
   private async _handleClose() {
-    if (this._progressFeedback) {
-      this._progressFeedback.reject();
-    }
     if (this._client) {
       await this._closeClientWithoutEvents(this._client);
     }

static/firmware_build/manifest.json

@@ -1,6 +1,7 @@
 {
   "name": "ESPHome",
   "version": "2021.11.0-dev",
+  "home_assistant_domain": "esphome",
   "builds": [
     {
       "chipFamily": "ESP32",