Simplify onboarding integrations page (#17671)

src/onboarding/action-badge.ts

@@ -1,85 +0,0 @@
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property } from "lit/decorators";
-import "../components/ha-svg-icon";
-
-@customElement("action-badge")
-class ActionBadge extends LitElement {
-  @property() public icon!: string;
-
-  @property() public title!: string;
-
-  @property() public badgeIcon?: string;
-
-  @property({ type: Boolean, reflect: true }) public clickable = false;
-
-  protected render(): TemplateResult {
-    return html`
-      <div class="icon">
-        <ha-svg-icon .path=${this.icon}></ha-svg-icon>
-        ${this.badgeIcon
-          ? html`<ha-svg-icon
-              class="badge"
-              .path=${this.badgeIcon}
-            ></ha-svg-icon>`
-          : ""}
-      </div>
-      <div class="title">${this.title}</div>
-    `;
-  }
-
-  static get styles(): CSSResultGroup {
-    return css`
-      :host {
-        display: inline-flex;
-        flex-direction: column;
-        text-align: center;
-        color: var(--primary-text-color);
-      }
-
-      :host([clickable]) {
-        color: var(--primary-text-color);
-      }
-
-      .icon {
-        position: relative;
-        box-sizing: border-box;
-        margin: 0 auto 8px;
-        height: 40px;
-        width: 40px;
-        border-radius: 50%;
-        border: 1px solid var(--secondary-text-color);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
-
-      :host([clickable]) .icon {
-        border-color: var(--primary-color);
-        border-width: 2px;
-      }
-
-      .badge {
-        position: absolute;
-        color: var(--primary-color);
-        bottom: -5px;
-        right: -5px;
-        background-color: white;
-        border-radius: 50%;
-        width: 18px;
-        display: block;
-        height: 18px;
-      }
-
-      .title {
-        min-height: 2.3em;
-        word-break: break-word;
-      }
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "action-badge": ActionBadge;
-  }
-}

src/onboarding/integration-badge.ts

@@ -9,8 +9,6 @@ class IntegrationBadge extends LitElement {
 
   @property() public title!: string;
 
-  @property() public badgeIcon?: string;
-
   @property({ type: Boolean }) public darkOptimizedIcon?: boolean;
 
   @property({ type: Boolean, reflect: true }) public clickable = false;
@@ -27,12 +25,6 @@ class IntegrationBadge extends LitElement {
           })}
           referrerpolicy="no-referrer"
         />
-        ${this.badgeIcon
-          ? html`<ha-svg-icon
-              class="badge"
-              .path=${this.badgeIcon}
-            ></ha-svg-icon>`
-          : ""}
       </div>
       <div class="title">${this.title}</div>
     `;
@@ -47,10 +39,6 @@ class IntegrationBadge extends LitElement {
         color: var(--primary-text-color);
       }
 
-      :host([clickable]) {
-        color: var(--primary-text-color);
-      }
-
       img {
         max-width: 100%;
         max-height: 100%;
@@ -66,18 +54,6 @@ class IntegrationBadge extends LitElement {
         justify-content: center;
       }
 
-      .badge {
-        position: absolute;
-        color: white;
-        bottom: -7px;
-        right: -10px;
-        background-color: var(--label-badge-green);
-        border-radius: 50%;
-        display: block;
-        --mdc-icon-size: 18px;
-        border: 2px solid white;
-      }
-
       .title {
         min-height: 2.3em;
         word-break: break-word;

src/onboarding/onboarding-integrations.ts

@@ -1,14 +1,12 @@
 import "@material/mwc-button/mwc-button";
-import { mdiCheck, mdiDotsHorizontal } from "@mdi/js";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import {
-  css,
   CSSResultGroup,
-  html,
   LitElement,
-  nothing,
   PropertyValues,
-  TemplateResult,
+  css,
+  html,
+  nothing,
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { isComponentLoaded } from "../common/config/is_component_loaded";
@@ -16,22 +14,12 @@ import { fireEvent } from "../common/dom/fire_event";
 import { stringCompare } from "../common/string/compare";
 import { LocalizeFunc } from "../common/translations/localize";
 import { ConfigEntry, subscribeConfigEntries } from "../data/config_entries";
-import {
+import { subscribeConfigFlowInProgress } from "../data/config_flow";
-  getConfigFlowInProgressCollection,
-  localizeConfigFlowTitle,
-  subscribeConfigFlowInProgress,
-} from "../data/config_flow";
 import { DataEntryFlowProgress } from "../data/data_entry_flow";
 import { domainToName } from "../data/integration";
 import { scanUSBDevices } from "../data/usb";
-import {
-  loadConfigFlowDialog,
-  showConfigFlowDialog,
-} from "../dialogs/config-flow/show-dialog-config-flow";
 import { SubscribeMixin } from "../mixins/subscribe-mixin";
-import { showAddIntegrationDialog } from "../panels/config/integrations/show-add-integration-dialog";
 import { HomeAssistant } from "../types";
-import "./action-badge";
 import "./integration-badge";
 
 const HIDDEN_DOMAINS = new Set([
@@ -63,7 +51,7 @@ class OnboardingIntegrations extends SubscribeMixin(LitElement) {
             integrations.add(flow.handler);
           }
         }
-        this.hass.loadBackendTranslation("config", Array.from(integrations));
+        this.hass.loadBackendTranslation("title", Array.from(integrations));
       }),
       subscribeConfigEntries(
         this.hass,
@@ -109,62 +97,65 @@ class OnboardingIntegrations extends SubscribeMixin(LitElement) {
       return nothing;
     }
     // Render discovered and existing entries together sorted by localized title.
-    const entries: Array<[string, TemplateResult]> = this._entries.map(
+    const entries: Array<[string, string]> = this._entries.map((entry) => [
-      (entry) => {
+      entry.domain,
-        const title =
+      domainToName(this.hass.localize, entry.domain),
-          entry.title ||
+    ]);
-          domainToName(this.hass.localize, entry.domain) ||
+    const discovered: Array<[string, string]> = this._discovered.map((flow) => [
-          entry.domain;
+      flow.handler,
-        return [
+      domainToName(this.hass.localize, flow.handler),
-          title,
+    ]);
-          html`
+    let domains = [...entries, ...discovered].sort((a, b) =>
-            <integration-badge
+      stringCompare(a[0], b[0], this.hass.locale.language)
-              .domain=${entry.domain}
-              .title=${title}
-              .badgeIcon=${mdiCheck}
-              .darkOptimizedIcon=${this.hass.themes?.darkMode}
-            ></integration-badge>
-          `,
-        ];
-      }
     );
-    const discovered: Array<[string, TemplateResult]> = this._discovered.map(
+
-      (flow) => {
+    const foundDevices = domains.length;
-        const title = localizeConfigFlowTitle(this.hass.localize, flow);
+
-        return [
+    if (domains.length > 12) {
-          title,
+      const uniqueDomains: Set<string> = new Set();
-          html`
+      domains.forEach(([domain]) => {
-            <button .flowId=${flow.flow_id} @click=${this._continueFlow}>
+        uniqueDomains.add(domain);
-              <integration-badge
+      });
-                clickable
+      if (uniqueDomains.size < domains.length) {
-                .domain=${flow.handler}
+        domains = domains.filter(([domain]) => {
-                .title=${title}
+          if (uniqueDomains.has(domain)) {
-                .darkOptimizedIcon=${this.hass.themes?.darkMode}
+            uniqueDomains.delete(domain);
-              ></integration-badge>
+            return true;
-            </button>
+          }
-          `,
+          return false;
-        ];
+        });
       }
-    );
+      if (domains.length > 12) {
-    const content = [...entries, ...discovered]
+        domains = domains.slice(0, 11);
-      .sort((a, b) => stringCompare(a[0], b[0], this.hass.locale.language))
+      }
-      .map((item) => item[1]);
+    }
 
     return html`
+      <h2>
+        ${this.onboardingLocalize(
+          "ui.panel.page-onboarding.integration.header"
+        )}
+      </h2>
       <p>
         ${this.onboardingLocalize("ui.panel.page-onboarding.integration.intro")}
       </p>
       <div class="badges">
-        ${content}
+        ${domains.map(
-        <button @click=${this._createFlow}>
+          ([domain, title]) =>
-          <action-badge
+            html`<integration-badge
-            clickable
+              .domain=${domain}
-            title=${this.onboardingLocalize(
+              .title=${title}
-              "ui.panel.page-onboarding.integration.more_integrations"
+              .darkOptimizedIcon=${this.hass.themes?.darkMode}
-            )}
+            ></integration-badge>`
-            .icon=${mdiDotsHorizontal}
+        )}
-          ></action-badge>
+        ${foundDevices > domains.length
-        </button>
+          ? html`<div class="more">
+              ${this.onboardingLocalize(
+                "ui.panel.page-onboarding.integration.more_integrations",
+                { count: foundDevices - domains.length }
+              )}
+            </div>`
+          : nothing}
       </div>
       <div class="footer">
         <mwc-button @click=${this._finish}>
@@ -178,22 +169,8 @@ class OnboardingIntegrations extends SubscribeMixin(LitElement) {
 
   protected firstUpdated(changedProps: PropertyValues) {
     super.firstUpdated(changedProps);
-    this.hass.loadBackendTranslation("title", undefined, true);
+    this.hass.loadBackendTranslation("title");
     this._scanUSBDevices();
-    loadConfigFlowDialog();
-  }
-
-  private _createFlow() {
-    showAddIntegrationDialog(this);
-  }
-
-  private _continueFlow(ev) {
-    showConfigFlowDialog(this, {
-      continueFlowId: ev.currentTarget.flowId,
-      dialogClosedCallback: () => {
-        getConfigFlowInProgressCollection(this.hass!.connection).refresh();
-      },
-    });
   }
 
   private async _scanUSBDevices() {
@@ -211,28 +188,24 @@ class OnboardingIntegrations extends SubscribeMixin(LitElement) {
 
   static get styles(): CSSResultGroup {
     return css`
+      h2 {
+        text-align: center;
+      }
       p {
         font-size: 14px;
         line-height: 20px;
       }
       .badges {
         margin-top: 24px;
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
+        row-gap: 24px;
+      }
+      .more {
         display: flex;
-        flex-direction: row;
+        justify-content: center;
-        flex-wrap: wrap;
+        align-items: center;
-        justify-content: flex-start;
+        height: 100%;
-        align-items: flex-start;
-      }
-      .badges > * {
-        width: 96px;
-        margin-bottom: 24px;
-      }
-      button {
-        cursor: pointer;
-        padding: 0;
-        border: 0;
-        background: 0;
-        font: inherit;
       }
       .footer {
         text-align: right;

src/translations/en.json

@@ -5707,8 +5707,9 @@
           "finish": "Next"
         },
         "integration": {
-          "intro": "Devices and services are represented in Home Assistant as integrations. You can set them up now, or do it later from the settings.",
+          "header": "We already found compatible devices on your network!",
-          "more_integrations": "More",
+          "intro": "We have set some of them up for you. Some might need more configuration.",
+          "more_integrations": "+{count} more",
           "finish": "Finish"
         },
         "analytics": {