Use new subscribe mixin for the sidebar to show counts of repairs (#13282)

* Use new subscribe mixin for the sidebar

* spelling

src/components/ha-sidebar.ts

@@ -21,6 +21,7 @@ import "@polymer/paper-item/paper-icon-item";
 import type { PaperIconItemElement } from "@polymer/paper-item/paper-icon-item";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
+import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import {
   css,
   CSSResult,
@@ -44,7 +45,9 @@ import {
   PersistentNotification,
   subscribeNotifications,
 } from "../data/persistent_notification";
+import { subscribeRepairsIssueRegistry } from "../data/repairs";
 import { updateCanInstall, UpdateEntity } from "../data/update";
+import { SubscribeMixin } from "../mixins/subscribe-mixin";
 import { actionHandler } from "../panels/lovelace/common/directives/action-handler-directive";
 import { haStyleScrollbar } from "../resources/styles";
 import type { HomeAssistant, PanelInfo, Route } from "../types";
@@ -177,7 +180,7 @@ const computePanels = memoizeOne(
 let Sortable;
 
 @customElement("ha-sidebar")
-class HaSidebar extends LitElement {
+class HaSidebar extends SubscribeMixin(LitElement) {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property({ type: Boolean, reflect: true }) public narrow!: boolean;
@@ -192,6 +195,8 @@ class HaSidebar extends LitElement {
 
   @state() private _updatesCount = 0;
 
+  @state() private _issuesCount = 0;
+
   @state() private _renderEmptySortable = false;
 
   private _mouseLeaveTimeout?: number;
@@ -214,6 +219,16 @@ class HaSidebar extends LitElement {
 
   private _sortable?;
 
+  public hassSubscribe(): UnsubscribeFunc[] {
+    return [
+      subscribeRepairsIssueRegistry(this.hass.connection!, (repairs) => {
+        this._issuesCount = repairs.issues.filter(
+          (issue) => !issue.ignored
+        ).length;
+      }),
+    ];
+  }
+
   protected render() {
     if (!this.hass) {
       return html``;
@@ -238,6 +253,7 @@ class HaSidebar extends LitElement {
       changedProps.has("alwaysExpand") ||
       changedProps.has("_externalConfig") ||
       changedProps.has("_updatesCount") ||
+      changedProps.has("_issuesCount") ||
       changedProps.has("_notifications") ||
       changedProps.has("editMode") ||
       changedProps.has("_renderEmptySortable") ||
@@ -511,17 +527,20 @@ class HaSidebar extends LitElement {
     >
       <paper-icon-item class="configuration" role="option">
         <ha-svg-icon slot="item-icon" .path=${mdiCog}></ha-svg-icon>
-        ${!this.alwaysExpand && this._updatesCount > 0
+        ${!this.alwaysExpand &&
+        (this._updatesCount > 0 || this._issuesCount > 0)
           ? html`
               <span class="configuration-badge" slot="item-icon">
-                ${this._updatesCount}
+                ${this._updatesCount + this._issuesCount}
               </span>
             `
           : ""}
         <span class="item-text">${title}</span>
-        ${this.alwaysExpand && this._updatesCount > 0
+        ${this.alwaysExpand && (this._updatesCount > 0 || this._issuesCount > 0)
           ? html`
-              <span class="configuration-badge">${this._updatesCount}</span>
+              <span class="configuration-badge"
+                >${this._updatesCount + this._issuesCount}</span
+              >
             `
           : ""}
       </paper-icon-item>

src/data/repairs.ts

@@ -1,5 +1,9 @@
+import type { Connection } from "home-assistant-js-websocket";
+import { createCollection } from "home-assistant-js-websocket";
+import type { Store } from "home-assistant-js-websocket/dist/store";
+import { debounce } from "../common/util/debounce";
 import type { HomeAssistant } from "../types";
-import { DataEntryFlowStep } from "./data_entry_flow";
+import type { DataEntryFlowStep } from "./data_entry_flow";
 
 export interface RepairsIssue {
   domain: string;
@@ -61,3 +65,36 @@ 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[] }>
+) =>
+  conn.subscribeEvents(
+    debounce(
+      () =>
+        fetchRepairsIssueRegistry(conn).then((repairs) =>
+          store.setState(repairs, true)
+        ),
+      500,
+      true
+    ),
+    "repairs_issue_registry_updated"
+  );
+
+export const subscribeRepairsIssueRegistry = (
+  conn: Connection,
+  onChange: (repairs: { issues: RepairsIssue[] }) => void
+) =>
+  createCollection<{ issues: RepairsIssue[] }>(
+    "_repairsIssueRegistry",
+    fetchRepairsIssueRegistry,
+    subscribeRepairsIssueUpdates,
+    conn,
+    onChange
+  );