Use subscribe to fetch repair issues (#13285)

src/data/repairs.ts

@@ -26,8 +26,8 @@ export const severitySort = {
   warning: 3,
 };
 
-export const fetchRepairsIssues = async (hass: HomeAssistant) =>
+export const fetchRepairsIssues = (conn: Connection) =>
-  hass.callWS<{ issues: RepairsIssue[] }>({
+  conn.sendMessagePromise<{ issues: RepairsIssue[] }>({
     type: "repairs/list_issues",
   });
 
@@ -66,11 +66,6 @@ export const handleRepairsFlowStep = (
 export const deleteRepairsFlow = (hass: HomeAssistant, flowId: string) =>
   hass.callApi("DELETE", `repairs/issues/fix/${flowId}`);
 
-export const fetchRepairsIssueRegistry = (conn: Connection) =>
-  conn.sendMessagePromise<{ issues: RepairsIssue[] }>({
-    type: "repairs/list_issues",
-  });
-
 const subscribeRepairsIssueUpdates = (
   conn: Connection,
   store: Store<{ issues: RepairsIssue[] }>
@@ -78,7 +73,7 @@ const subscribeRepairsIssueUpdates = (
   conn.subscribeEvents(
     debounce(
       () =>
-        fetchRepairsIssueRegistry(conn).then((repairs) =>
+        fetchRepairsIssues(conn).then((repairs) =>
           store.setState(repairs, true)
         ),
       500,
@@ -93,7 +88,7 @@ export const subscribeRepairsIssueRegistry = (
 ) =>
   createCollection<{ issues: RepairsIssue[] }>(
     "_repairsIssueRegistry",
-    fetchRepairsIssueRegistry,
+    fetchRepairsIssues,
     subscribeRepairsIssueUpdates,
     conn,
     onChange

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

@@ -3,7 +3,7 @@ import "@material/mwc-list/mwc-list-item";
 import { mdiCloudLock, mdiDotsVertical, mdiMagnify } from "@mdi/js";
 import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
-import { HassEntities } from "home-assistant-js-websocket";
+import { HassEntities, UnsubscribeFunc } from "home-assistant-js-websocket";
 import {
   css,
   CSSResultGroup,
@@ -24,9 +24,9 @@ import "../../../components/ha-svg-icon";
 import "../../../components/ha-tip";
 import { CloudStatus } from "../../../data/cloud";
 import {
-  fetchRepairsIssues,
   RepairsIssue,
   severitySort,
+  subscribeRepairsIssueRegistry,
 } from "../../../data/repairs";
 import {
   checkForEntityUpdates,
@@ -36,6 +36,7 @@ import {
 import { showQuickBar } from "../../../dialogs/quick-bar/show-dialog-quick-bar";
 import "../../../layouts/ha-app-layout";
 import { PageNavigation } from "../../../layouts/hass-tabs-subpage";
+import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
 import { haStyle } from "../../../resources/styles";
 import { HomeAssistant } from "../../../types";
 import { documentationUrl } from "../../../util/documentation-url";
@@ -110,7 +111,7 @@ const randomTip = (hass: HomeAssistant, narrow: boolean) => {
 };
 
 @customElement("ha-config-dashboard")
-class HaConfigDashboard extends LitElement {
+class HaConfigDashboard extends SubscribeMixin(LitElement) {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property({ type: Boolean, reflect: true })
@@ -144,6 +145,27 @@ class HaConfigDashboard extends LitElement {
     return [...pages, ...configSections.dashboard];
   });
 
+  public hassSubscribe(): UnsubscribeFunc[] {
+    return [
+      subscribeRepairsIssueRegistry(this.hass.connection!, (repairs) => {
+        const repairsIssues = repairs.issues.filter((issue) => !issue.ignored);
+
+        this._repairsIssues = {
+          issues: repairsIssues
+            .sort((a, b) => severitySort[a.severity] - severitySort[b.severity])
+            .slice(0, repairsIssues.length === 3 ? repairsIssues.length : 2),
+          total: repairsIssues.length,
+        };
+
+        const integrations: Set<string> = new Set();
+        for (const issue of this._repairsIssues.issues) {
+          integrations.add(issue.domain);
+        }
+        this.hass.loadBackendTranslation("issues", [...integrations]);
+      }),
+    ];
+  }
+
   protected render(): TemplateResult {
     const { updates: canInstallUpdates, total: totalUpdates } =
       this._filterUpdateEntitiesWithInstall(this.hass.states);
@@ -197,7 +219,6 @@ class HaConfigDashboard extends LitElement {
                         .narrow=${this.narrow}
                         .total=${totalRepairIssues}
                         .repairsIssues=${repairsIssues}
-                        @update-issues=${this._fetchIssues}
                       ></ha-config-repairs>
                       ${totalRepairIssues > repairsIssues.length
                         ? html`
@@ -260,11 +281,6 @@ class HaConfigDashboard extends LitElement {
     `;
   }
 
-  protected firstUpdated(changedProps: PropertyValues): void {
-    super.firstUpdated(changedProps);
-    this._fetchIssues();
-  }
-
   protected override updated(changedProps: PropertyValues): void {
     super.updated(changedProps);
 
@@ -284,25 +300,6 @@ class HaConfigDashboard extends LitElement {
     }
   );
 
-  private async _fetchIssues(): Promise<void> {
-    const repairsIssues = (await fetchRepairsIssues(this.hass)).issues.filter(
-      (issue) => !issue.ignored
-    );
-
-    this._repairsIssues = {
-      issues: repairsIssues
-        .sort((a, b) => severitySort[a.severity] - severitySort[b.severity])
-        .slice(0, repairsIssues.length === 3 ? repairsIssues.length : 2),
-      total: repairsIssues.length,
-    };
-
-    const integrations: Set<string> = new Set();
-    for (const issue of this._repairsIssues.issues) {
-      integrations.add(issue.domain);
-    }
-    this.hass.loadBackendTranslation("issues", [...integrations]);
-  }
-
   private _showQuickBar(): void {
     showQuickBar(this, {
       commandMode: true,

src/panels/config/repairs/ha-config-repairs-dashboard.ts

@@ -1,15 +1,16 @@
 import { RequestSelectedDetail } from "@material/mwc-list/mwc-list-item-base";
 import { mdiDotsVertical } from "@mdi/js";
-import { css, html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { UnsubscribeFunc } from "home-assistant-js-websocket";
+import { css, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import { shouldHandleRequestSelectedEvent } from "../../../common/mwc/handle-request-selected-event";
 import "../../../components/ha-card";
 import {
-  fetchRepairsIssues,
   RepairsIssue,
   severitySort,
+  subscribeRepairsIssueRegistry,
 } from "../../../data/repairs";
 import "../../../layouts/hass-subpage";
 import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
@@ -35,9 +36,19 @@ class HaConfigRepairsDashboard extends SubscribeMixin(LitElement) {
         : repairsIssues.filter((issue) => !issue.ignored)
   );
 
-  protected firstUpdated(changedProps: PropertyValues): void {
+  public hassSubscribe(): UnsubscribeFunc[] {
-    super.firstUpdated(changedProps);
+    return [
-    this._fetchIssues();
+      subscribeRepairsIssueRegistry(this.hass.connection!, (repairs) => {
+        this._repairsIssues = repairs.issues.sort(
+          (a, b) => severitySort[a.severity] - severitySort[b.severity]
+        );
+        const integrations: Set<string> = new Set();
+        for (const issue of this._repairsIssues) {
+          integrations.add(issue.domain);
+        }
+        this.hass.loadBackendTranslation("issues", [...integrations]);
+      }),
+    ];
   }
 
   protected render(): TemplateResult {
@@ -95,7 +106,6 @@ class HaConfigRepairsDashboard extends SubscribeMixin(LitElement) {
                       .hass=${this.hass}
                       .narrow=${this.narrow}
                       .repairsIssues=${issues}
-                      @update-issues=${this._fetchIssues}
                     ></ha-config-repairs>
                   `
                 : html`
@@ -112,17 +122,6 @@ class HaConfigRepairsDashboard extends SubscribeMixin(LitElement) {
     `;
   }
 
-  private async _fetchIssues(): Promise<void> {
-    this._repairsIssues = (await fetchRepairsIssues(this.hass)).issues.sort(
-      (a, b) => severitySort[a.severity] - severitySort[b.severity]
-    );
-    const integrations: Set<string> = new Set();
-    for (const issue of this._repairsIssues) {
-      integrations.add(issue.domain);
-    }
-    this.hass.loadBackendTranslation("issues", [...integrations]);
-  }
-
   private _showSystemInformationDialog(
     ev: CustomEvent<RequestSelectedDetail>
   ): void {

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

@@ -2,7 +2,6 @@ import "@material/mwc-list/mwc-list";
 import { css, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { relativeTime } from "../../../common/datetime/relative_time";
-import { fireEvent } from "../../../common/dom/fire_event";
 import "../../../components/ha-alert";
 import "../../../components/ha-card";
 import "../../../components/ha-list-item";
@@ -94,17 +93,10 @@ class HaConfigRepairs extends LitElement {
   private _openShowMoreDialog(ev): void {
     const issue = ev.currentTarget.issue as RepairsIssue;
     if (issue.is_fixable) {
-      showRepairsFlowDialog(this, issue, () => {
+      showRepairsFlowDialog(this, issue);
-        // @ts-ignore
-        fireEvent(this, "update-issues");
-      });
     } else {
       showRepairsIssueDialog(this, {
         issue,
-        dialogClosedCallback: () => {
-          // @ts-ignore
-          fireEvent(this, "update-issues");
-        },
       });
     }
   }

src/panels/config/repairs/show-repair-issue-dialog.ts

@@ -3,7 +3,7 @@ import type { RepairsIssue } from "../../../data/repairs";
 
 export interface RepairsIssueDialogParams {
   issue: RepairsIssue;
-  dialogClosedCallback: () => void;
+  dialogClosedCallback?: () => void;
 }
 
 export const loadRepairsIssueDialog = () => import("./dialog-repairs-issue");