Add search to add-ons page (#16459)

hassio/src/addon-store/hassio-addon-store.ts

@@ -70,7 +70,7 @@ export class HassioAddonStore extends LitElement {
         text: extractApiErrorMessage(err),
       });
     } finally {
-      await this._loadData();
+      this._loadData();
     }
   }
 
@@ -99,10 +99,10 @@ export class HassioAddonStore extends LitElement {
             slot="trigger"
           ></ha-icon-button>
           <mwc-list-item>
-            ${this.supervisor.localize("store.repositories")}
+            ${this.supervisor.localize("store.check_updates")}
           </mwc-list-item>
           <mwc-list-item>
-            ${this.supervisor.localize("store.check_updates")}
+            ${this.supervisor.localize("store.repositories")}
           </mwc-list-item>
           ${this.hass.userData?.showAdvanced &&
           atLeastVersion(this.hass.config.version, 0, 117)
@@ -177,10 +177,10 @@ export class HassioAddonStore extends LitElement {
   private _handleAction(ev: CustomEvent<ActionDetail>) {
     switch (ev.detail.index) {
       case 0:
-        this._manageRepositoriesClicked();
+        this.refreshData();
         break;
       case 1:
-        this.refreshData();
+        this._manageRepositoriesClicked();
         break;
       case 2:
         this._manageRegistries();
@@ -198,18 +198,18 @@ export class HassioAddonStore extends LitElement {
     this._manageRepositories();
   }
 
-  private async _manageRepositories(url?: string) {
+  private _manageRepositories(url?: string) {
     showRepositoriesDialog(this, {
       supervisor: this.supervisor,
       url,
     });
   }
 
-  private async _manageRegistries() {
+  private _manageRegistries() {
     showRegistriesDialog(this, { supervisor: this.supervisor });
   }
 
-  private async _loadData() {
+  private _loadData() {
     fireEvent(this, "supervisor-collection-refresh", { collection: "addon" });
     fireEvent(this, "supervisor-collection-refresh", {
       collection: "supervisor",

hassio/src/dashboard/hassio-addons.ts

@@ -1,10 +1,13 @@
 import { mdiArrowUpBoldCircle, mdiPuzzle } from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
+import memoizeOne from "memoize-one";
 import { atLeastVersion } from "../../../src/common/config/version";
 import { navigate } from "../../../src/common/navigate";
 import { caseInsensitiveStringCompare } from "../../../src/common/string/compare";
 import "../../../src/components/ha-card";
+import "../../../src/components/search-input";
+import { HassioAddonInfo } from "../../../src/data/hassio/addon";
 import { Supervisor } from "../../../src/data/supervisor/supervisor";
 import { haStyle } from "../../../src/resources/styles";
 import { HomeAssistant } from "../../../src/types";
@@ -17,11 +20,25 @@ class HassioAddons extends LitElement {
 
   @property({ attribute: false }) public supervisor!: Supervisor;
 
+  @property({ type: Boolean }) public narrow!: boolean;
+
+  @state() private _filter?: string;
+
   protected render(): TemplateResult {
     return html`
+      <div class="search">
+        <search-input
+          .hass=${this.hass}
+          suffix
+          .filter=${this._filter}
+          @value-changed=${this._handleSearchChange}
+          .label=${this.supervisor.localize("dashboard.search_addons")}
+        >
+        </search-input>
+      </div>
       <div class="content">
         ${!atLeastVersion(this.hass.config.version, 2021, 12)
-          ? html` <h1>${this.supervisor.localize("dashboard.addons")}</h1> `
+          ? html`<h1>${this.supervisor.localize("dashboard.addons")}</h1>`
           : ""}
         <div class="card-group">
           ${!this.supervisor.addon.addons.length
@@ -34,67 +51,73 @@ class HassioAddons extends LitElement {
                   </div>
                 </ha-card>
               `
-            : this.supervisor.addon.addons
-                .sort((a, b) =>
-                  caseInsensitiveStringCompare(
-                    a.name,
-                    b.name,
-                    this.hass.locale.language
-                  )
-                )
-                .map(
-                  (addon) => html`
-                    <ha-card
-                      outlined
-                      .addon=${addon}
-                      @click=${this._addonTapped}
-                    >
-                      <div class="card-content">
-                        <hassio-card-content
-                          .hass=${this.hass}
-                          .title=${addon.name}
-                          .description=${addon.description}
-                          available
-                          .showTopbar=${addon.update_available}
-                          topbarClass="update"
-                          .icon=${addon.update_available!
-                            ? mdiArrowUpBoldCircle
-                            : mdiPuzzle}
-                          .iconTitle=${addon.state !== "started"
-                            ? this.supervisor.localize(
-                                "dashboard.addon_stopped"
-                              )
-                            : addon.update_available!
-                            ? this.supervisor.localize(
-                                "dashboard.addon_new_version"
-                              )
-                            : this.supervisor.localize(
-                                "dashboard.addon_running"
-                              )}
-                          .iconClass=${addon.update_available
-                            ? addon.state === "started"
-                              ? "update"
-                              : "update stopped"
-                            : addon.state === "started"
-                            ? "running"
-                            : "stopped"}
-                          .iconImage=${atLeastVersion(
-                            this.hass.config.version,
-                            0,
-                            105
-                          ) && addon.icon
-                            ? `/api/hassio/addons/${addon.slug}/icon`
-                            : undefined}
-                        ></hassio-card-content>
-                      </div>
-                    </ha-card>
-                  `
-                )}
+            : this._getAddons(this.supervisor.addon.addons, this._filter).map(
+                (addon) => html`
+                  <ha-card outlined .addon=${addon} @click=${this._addonTapped}>
+                    <div class="card-content">
+                      <hassio-card-content
+                        .hass=${this.hass}
+                        .title=${addon.name}
+                        .description=${addon.description}
+                        available
+                        .showTopbar=${addon.update_available}
+                        topbarClass="update"
+                        .icon=${addon.update_available!
+                          ? mdiArrowUpBoldCircle
+                          : mdiPuzzle}
+                        .iconTitle=${addon.state !== "started"
+                          ? this.supervisor.localize("dashboard.addon_stopped")
+                          : addon.update_available!
+                          ? this.supervisor.localize(
+                              "dashboard.addon_new_version"
+                            )
+                          : this.supervisor.localize("dashboard.addon_running")}
+                        .iconClass=${addon.update_available
+                          ? addon.state === "started"
+                            ? "update"
+                            : "update stopped"
+                          : addon.state === "started"
+                          ? "running"
+                          : "stopped"}
+                        .iconImage=${atLeastVersion(
+                          this.hass.config.version,
+                          0,
+                          105
+                        ) && addon.icon
+                          ? `/api/hassio/addons/${addon.slug}/icon`
+                          : undefined}
+                      ></hassio-card-content>
+                    </div>
+                  </ha-card>
+                `
+              )}
         </div>
       </div>
     `;
   }
 
+  private _getAddons = memoizeOne(
+    (addons: HassioAddonInfo[], filter?: string) => {
+      if (filter) {
+        addons = addons.filter((addon) => {
+          const lowerCaseFilter = filter.toLowerCase();
+          return (
+            addon.name.toLowerCase().includes(lowerCaseFilter) ||
+            addon.description.toLowerCase().includes(lowerCaseFilter) ||
+            addon.slug.toLowerCase().includes(lowerCaseFilter)
+          );
+        });
+      }
+      return addons.sort((a, b) =>
+        caseInsensitiveStringCompare(a.name, b.name, this.hass.locale.language)
+      );
+    }
+  );
+
+  private _handleSearchChange(ev: CustomEvent) {
+    this._filter = ev.detail.value;
+  }
+
   static get styles(): CSSResultGroup {
     return [
       haStyle,
@@ -103,6 +126,16 @@ class HassioAddons extends LitElement {
         ha-card {
           cursor: pointer;
         }
+        .search {
+          position: sticky;
+          top: 0;
+          z-index: 2;
+        }
+        search-input {
+          display: block;
+          --mdc-text-field-fill-color: var(--sidebar-background-color);
+          --mdc-text-field-idle-line-color: var(--divider-color);
+        }
       `,
     ];
   }

hassio/src/dashboard/hassio-dashboard.ts

@@ -1,4 +1,4 @@
-import { mdiStorePlus } from "@mdi/js";
+import { mdiStorePlus, mdiUpdate } from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { atLeastVersion } from "../../../src/common/config/version";
@@ -10,6 +10,10 @@ import { HomeAssistant, Route } from "../../../src/types";
 import { supervisorTabs } from "../hassio-tabs";
 import "./hassio-addons";
 import "../../../src/layouts/hass-subpage";
+import { reloadHassioAddons } from "../../../src/data/hassio/addon";
+import { extractApiErrorMessage } from "../../../src/data/hassio/common";
+import { showAlertDialog } from "../../../src/dialogs/generic/show-dialog-box";
+import { fireEvent } from "../../../src/common/dom/fire_event";
 
 @customElement("hassio-dashboard")
 class HassioDashboard extends LitElement {
@@ -36,9 +40,16 @@ class HassioDashboard extends LitElement {
         back-path="/config"
         .header=${this.supervisor.localize("panel.addons")}
       >
+        <ha-icon-button
+          slot="toolbar-icon"
+          @click=${this._handleCheckUpdates}
+          .path=${mdiUpdate}
+          .label=${this.supervisor.localize("store.check_updates")}
+        ></ha-icon-button>
         <hassio-addons
           .hass=${this.hass}
           .supervisor=${this.supervisor}
+          .narrow=${this.narrow}
         ></hassio-addons>
         <a href="/hassio/store">
           <ha-fab
@@ -99,6 +110,18 @@ class HassioDashboard extends LitElement {
     `;
   }
 
+  private async _handleCheckUpdates() {
+    try {
+      await reloadHassioAddons(this.hass);
+    } catch (err) {
+      showAlertDialog(this, {
+        text: extractApiErrorMessage(err),
+      });
+    } finally {
+      fireEvent(this, "supervisor-collection-refresh", { collection: "addon" });
+    }
+  }
+
   static get styles(): CSSResultGroup {
     return [
       haStyle,

src/layouts/hass-subpage.ts

@@ -70,7 +70,7 @@ class HassSubpage extends LitElement {
               ></ha-icon-button-arrow-prev>
             `}
 
-        <div class="main-title">${this.header}</div>
+        <div class="main-title"><slot name="header">${this.header}</slot></div>
         <slot name="toolbar-icon"></slot>
       </div>
       <div class="content" @scroll=${this._saveScrollPos}><slot></slot></div>

src/translations/en.json

@@ -5597,7 +5597,8 @@
       "addon_running": "Add-on is running",
       "addon_stopped": "Add-on is stopped",
       "addons": "Installed add-ons",
-      "no_addons": "You don't have any add-ons installed yet. Head over to the add-on store to get started!"
+      "no_addons": "You don't have any add-ons installed yet. Head over to the add-on store to get started!",
+      "search_addons": "Search add-ons"
     },
     "store": {
       "missing_addons": "Missing add-ons? Enable advanced mode in your user profile page",