Fix onboarding (#3503)

* Fix onboarding

* Lint

src/data/config_flow.ts

@@ -1,7 +1,7 @@
 import { HomeAssistant } from "../types";
 import { DataEntryFlowStep, DataEntryFlowProgress } from "./data_entry_flow";
 import { debounce } from "../common/util/debounce";
-import { createCollection } from "home-assistant-js-websocket";
+import { getCollection, Connection } from "home-assistant-js-websocket";
 import { LocalizeFunc } from "../common/translations/localize";
 
 export const createConfigFlow = (hass: HomeAssistant, handler: string) =>
@@ -29,9 +29,6 @@ export const handleConfigFlowStep = (
 export const deleteConfigFlow = (hass: HomeAssistant, flowId: string) =>
   hass.callApi("DELETE", `config/config_entries/flow/${flowId}`);
 
-export const getConfigFlowsInProgress = (hass: HomeAssistant) =>
-  hass.callApi<DataEntryFlowProgress[]>("GET", "config/config_entries/flow");
-
 export const getConfigFlowHandlers = (hass: HomeAssistant) =>
   hass.callApi<string[]>("GET", "config/config_entries/flow_handlers");
 
@@ -53,17 +50,18 @@ const subscribeConfigFlowInProgressUpdates = (conn, store) =>
     "config_entry_discovered"
   );
 
+export const getConfigFlowInProgressCollection = (conn: Connection) =>
+  getCollection<DataEntryFlowProgress[]>(
+    conn,
+    "_configFlowProgress",
+    fetchConfigFlowInProgress,
+    subscribeConfigFlowInProgressUpdates
+  );
+
 export const subscribeConfigFlowInProgress = (
   hass: HomeAssistant,
   onChange: (flows: DataEntryFlowProgress[]) => void
-) =>
-  createCollection<DataEntryFlowProgress[]>(
-    "_configFlowProgress",
-    fetchConfigFlowInProgress,
-    subscribeConfigFlowInProgressUpdates,
-    hass.connection,
-    onChange
-  );
+) => getConfigFlowInProgressCollection(hass.connection).subscribe(onChange);
 
 export const localizeConfigFlowTitle = (
   localize: LocalizeFunc,

src/onboarding/onboarding-integrations.ts

@@ -18,14 +18,14 @@ import { getConfigEntries, ConfigEntry } from "../data/config_entries";
 import { compare } from "../common/string/compare";
 import "./integration-badge";
 import { LocalizeFunc } from "../common/translations/localize";
-import { debounce } from "../common/util/debounce";
 import { fireEvent } from "../common/dom/fire_event";
 import { onboardIntegrationStep } from "../data/onboarding";
 import { genClientId } from "home-assistant-js-websocket";
 import { DataEntryFlowProgress } from "../data/data_entry_flow";
 import {
   localizeConfigFlowTitle,
-  getConfigFlowsInProgress,
+  subscribeConfigFlowInProgress,
+  getConfigFlowInProgressCollection,
 } from "../data/config_flow";
 
 @customElement("onboarding-integrations")
@@ -38,20 +38,16 @@ class OnboardingIntegrations extends LitElement {
 
   public connectedCallback() {
     super.connectedCallback();
-    this.hass.connection
-      .subscribeEvents(
-        debounce(() => this._loadData(), 500),
-        "config_entry_discovered"
-      )
-      .then((unsub) => {
-        this._unsubEvents = unsub;
-      });
+    this._unsubEvents = subscribeConfigFlowInProgress(this.hass, (flows) => {
+      this._discovered = flows;
+    });
   }
 
   public disconnectedCallback() {
     super.disconnectedCallback();
     if (this._unsubEvents) {
       this._unsubEvents();
+      this._unsubEvents = undefined;
     }
   }
 
@@ -126,30 +122,32 @@ class OnboardingIntegrations extends LitElement {
   protected firstUpdated(changedProps: PropertyValues) {
     super.firstUpdated(changedProps);
     loadConfigFlowDialog();
-    this._loadData();
+    this._loadConfigEntries();
     /* polyfill for paper-dropdown */
     import(/* webpackChunkName: "polyfill-web-animations-next" */ "web-animations-js/web-animations-next-lite.min");
   }
 
   private _createFlow() {
     showConfigFlowDialog(this, {
-      dialogClosedCallback: () => this._loadData(),
+      dialogClosedCallback: () => {
+        this._loadConfigEntries();
+        getConfigFlowInProgressCollection(this.hass!.connection).refresh();
+      },
     });
   }
 
   private _continueFlow(ev) {
     showConfigFlowDialog(this, {
       continueFlowId: ev.currentTarget.flowId,
-      dialogClosedCallback: () => this._loadData(),
+      dialogClosedCallback: () => {
+        this._loadConfigEntries();
+        getConfigFlowInProgressCollection(this.hass!.connection).refresh();
+      },
     });
   }
 
-  private async _loadData() {
-    const [discovered, entries] = await Promise.all([
-      getConfigFlowsInProgress(this.hass!),
-      getConfigEntries(this.hass!),
-    ]);
-    this._discovered = discovered;
+  private async _loadConfigEntries() {
+    const entries = await getConfigEntries(this.hass!);
     // We filter out the config entry for the local weather.
     // It is one that we create automatically and it will confuse the user
     // if it starts showing up during onboarding.

src/panels/config/integrations/ha-config-integrations.ts

@@ -24,7 +24,10 @@ import {
 } from "../../../data/device_registry";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { DataEntryFlowProgress } from "../../../data/data_entry_flow";
-import { subscribeConfigFlowInProgress } from "../../../data/config_flow";
+import {
+  subscribeConfigFlowInProgress,
+  getConfigFlowInProgressCollection,
+} from "../../../data/config_flow";
 
 declare global {
   interface HASSDomEvents {
@@ -79,7 +82,10 @@ class HaConfigIntegrations extends HassRouterPage {
 
   protected firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
-    this.addEventListener("hass-reload-entries", () => this._loadData());
+    this.addEventListener("hass-reload-entries", () => {
+      this._loadData();
+      getConfigFlowInProgressCollection(this.hass.connection).refresh();
+    });
   }
 
   protected updated(changedProps: PropertyValues) {