Revert "Simplify onboarding integrations page (#17671)" (#17683)

src/onboarding/action-badge.ts

@@ -0,0 +1,85 @@
+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,6 +9,8 @@ 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;
@@ -25,6 +27,12 @@ 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>
     `;
@@ -39,6 +47,10 @@ class IntegrationBadge extends LitElement {
         color: var(--primary-text-color);
       }
 
+      :host([clickable]) {
+        color: var(--primary-text-color);
+      }
+
       img {
         max-width: 100%;
         max-height: 100%;
@@ -54,6 +66,18 @@ 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,12 +1,14 @@
 import "@material/mwc-button/mwc-button";
+import { mdiCheck, mdiDotsHorizontal } from "@mdi/js";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import {
-  CSSResultGroup,
-  LitElement,
-  PropertyValues,
   css,
+  CSSResultGroup,
   html,
+  LitElement,
   nothing,
+  PropertyValues,
+  TemplateResult,
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { isComponentLoaded } from "../common/config/is_component_loaded";
@@ -14,12 +16,22 @@ 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 { subscribeConfigFlowInProgress } from "../data/config_flow";
+import {
+  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([
@@ -51,7 +63,7 @@ class OnboardingIntegrations extends SubscribeMixin(LitElement) {
             integrations.add(flow.handler);
           }
         }
-        this.hass.loadBackendTranslation("title", Array.from(integrations));
+        this.hass.loadBackendTranslation("config", Array.from(integrations));
       }),
       subscribeConfigEntries(
         this.hass,
@@ -97,65 +109,62 @@ class OnboardingIntegrations extends SubscribeMixin(LitElement) {
       return nothing;
     }
     // Render discovered and existing entries together sorted by localized title.
-    const entries: Array<[string, string]> = this._entries.map((entry) => [
+    const entries: Array<[string, TemplateResult]> = this._entries.map(
-      entry.domain,
+      (entry) => {
-      domainToName(this.hass.localize, entry.domain),
+        const title =
-    ]);
+          entry.title ||
-    const discovered: Array<[string, string]> = this._discovered.map((flow) => [
+          domainToName(this.hass.localize, entry.domain) ||
-      flow.handler,
+          entry.domain;
-      domainToName(this.hass.localize, flow.handler),
+        return [
-    ]);
+          title,
-    let domains = [...entries, ...discovered].sort((a, b) =>
+          html`
-      stringCompare(a[0], b[0], this.hass.locale.language)
+            <integration-badge
+              .domain=${entry.domain}
+              .title=${title}
+              .badgeIcon=${mdiCheck}
+              .darkOptimizedIcon=${this.hass.themes?.darkMode}
+            ></integration-badge>
+          `,
+        ];
+      }
     );
-
+    const discovered: Array<[string, TemplateResult]> = this._discovered.map(
-    const foundDevices = domains.length;
+      (flow) => {
-
+        const title = localizeConfigFlowTitle(this.hass.localize, flow);
-    if (domains.length > 12) {
+        return [
-      const uniqueDomains: Set<string> = new Set();
+          title,
-      domains.forEach(([domain]) => {
+          html`
-        uniqueDomains.add(domain);
+            <button .flowId=${flow.flow_id} @click=${this._continueFlow}>
-      });
+              <integration-badge
-      if (uniqueDomains.size < domains.length) {
+                clickable
-        domains = domains.filter(([domain]) => {
+                .domain=${flow.handler}
-          if (uniqueDomains.has(domain)) {
+                .title=${title}
-            uniqueDomains.delete(domain);
+                .darkOptimizedIcon=${this.hass.themes?.darkMode}
-            return true;
+              ></integration-badge>
-          }
+            </button>
-          return false;
+          `,
-        });
+        ];
       }
-      if (domains.length > 12) {
+    );
-        domains = domains.slice(0, 11);
+    const content = [...entries, ...discovered]
-      }
+      .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">
-        ${domains.map(
+        ${content}
-          ([domain, title]) =>
+        <button @click=${this._createFlow}>
-            html`<integration-badge
+          <action-badge
-              .domain=${domain}
+            clickable
-              .title=${title}
+            title=${this.onboardingLocalize(
-              .darkOptimizedIcon=${this.hass.themes?.darkMode}
+              "ui.panel.page-onboarding.integration.more_integrations"
-            ></integration-badge>`
+            )}
-        )}
+            .icon=${mdiDotsHorizontal}
-        ${foundDevices > domains.length
+          ></action-badge>
-          ? html`<div class="more">
+        </button>
-              ${this.onboardingLocalize(
-                "ui.panel.page-onboarding.integration.more_integrations",
-                { count: foundDevices - domains.length }
-              )}
-            </div>`
-          : nothing}
       </div>
       <div class="footer">
         <mwc-button @click=${this._finish}>
@@ -169,8 +178,22 @@ class OnboardingIntegrations extends SubscribeMixin(LitElement) {
 
   protected firstUpdated(changedProps: PropertyValues) {
     super.firstUpdated(changedProps);
-    this.hass.loadBackendTranslation("title");
+    this.hass.loadBackendTranslation("title", undefined, true);
     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() {
@@ -188,24 +211,28 @@ 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;
-        justify-content: center;
+        flex-direction: row;
-        align-items: center;
+        flex-wrap: wrap;
-        height: 100%;
+        justify-content: flex-start;
+        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,9 +5707,8 @@
           "finish": "Next"
         },
         "integration": {
-          "header": "We already found compatible devices on your network!",
+          "intro": "Devices and services are represented in Home Assistant as integrations. You can set them up now, or do it later from the settings.",
-          "intro": "We have set some of them up for you. Some might need more configuration.",
+          "more_integrations": "More",
-          "more_integrations": "+{count} more",
           "finish": "Finish"
         },
         "analytics": {