Migrate addon-picker to generic-picker (#28567)

src/components/entity/ha-entity-picker.ts

@@ -278,6 +278,7 @@ export class HaEntityPicker extends LitElement {
         .autofocus=${this.autofocus}
         .allowCustomValue=${this.allowCustomEntity}
         .label=${this.label}
+        .required=${this.required}
         .helper=${this.helper}
         .searchLabel=${this.searchLabel}
         .notFoundLabel=${this._notFoundLabel}

src/components/ha-addon-picker.ts

@@ -1,29 +1,29 @@
-import type { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
+import type { RenderItemFunction } from "@lit-labs/virtualizer/virtualize";
 import { html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { isComponentLoaded } from "../common/config/is_component_loaded";
 import { fireEvent } from "../common/dom/fire_event";
-import { stringCompare } from "../common/string/compare";
-import type { HassioAddonInfo } from "../data/hassio/addon";
 import { fetchHassioAddonsInfo } from "../data/hassio/addon";
 import type { HomeAssistant, ValueChangedEvent } from "../types";
 import "./ha-alert";
-import "./ha-combo-box";
-import type { HaComboBox } from "./ha-combo-box";
 import "./ha-combo-box-item";
+import "./ha-generic-picker";
+import type { HaGenericPicker } from "./ha-generic-picker";
+import type { PickerComboBoxItem } from "./ha-picker-combo-box";
 
-const rowRenderer: ComboBoxLitRenderer<HassioAddonInfo> = (item) => html`
+const SEARCH_KEYS = [
+  { name: "primary", weight: 10 },
+  { name: "secondary", weight: 8 },
+  { name: "search_labels.description", weight: 6 },
+  { name: "search_labels.repository", weight: 5 },
+];
+
+const rowRenderer: RenderItemFunction<PickerComboBoxItem> = (item) => html`
   <ha-combo-box-item type="button">
-    <span slot="headline">${item.name}</span>
+    <span slot="headline">${item.primary}</span>
-    <span slot="supporting-text">${item.slug}</span>
+    <span slot="supporting-text">${item.secondary}</span>
     ${item.icon
-      ? html`
+      ? html` <img alt="" slot="start" .src=${item.icon} /> `
-          <img
-            alt=""
-            slot="start"
-            .src="/api/hassio/addons/${item.slug}/icon"
-          />
-        `
       : nothing}
   </ha-combo-box-item>
 `;
@@ -38,22 +38,22 @@ class HaAddonPicker extends LitElement {
 
   @property() public helper?: string;
 
-  @state() private _addons?: HassioAddonInfo[];
+  @state() private _addons?: PickerComboBoxItem[];
 
   @property({ type: Boolean }) public disabled = false;
 
   @property({ type: Boolean }) public required = false;
 
-  @query("ha-combo-box") private _comboBox!: HaComboBox;
+  @query("ha-generic-picker") private _genericPicker!: HaGenericPicker;
 
   @state() private _error?: string;
 
   public open() {
-    this._comboBox?.open();
+    this._genericPicker?.open();
   }
 
   public focus() {
-    this._comboBox?.focus();
+    this._genericPicker?.focus();
   }
 
   protected firstUpdated() {
@@ -67,23 +67,26 @@ class HaAddonPicker extends LitElement {
     if (!this._addons) {
       return nothing;
     }
+
     return html`
-      <ha-combo-box
+      <ha-generic-picker
         .hass=${this.hass}
-        .label=${this.label === undefined && this.hass
+        .autofocus=${this.autofocus}
+        .placeholder=${this.label === undefined && this.hass
           ? this.hass.localize("ui.components.addon-picker.addon")
           : this.label}
-        .value=${this._value}
+        .valueRenderer=${this._valueRenderer}
-        .required=${this.required}
-        .disabled=${this.disabled}
         .helper=${this.helper}
-        .renderer=${rowRenderer}
+        .disabled=${this.disabled}
-        .items=${this._addons}
+        .required=${this.required}
-        item-value-path="slug"
+        show-label
-        item-id-path="slug"
+        .value=${this.value}
-        item-label-path="name"
+        .getItems=${this._getItems}
+        .searchKeys=${SEARCH_KEYS}
+        .rowRenderer=${rowRenderer}
         @value-changed=${this._addonChanged}
-      ></ha-combo-box>
+      >
+      </ha-generic-picker>
     `;
   }
 
@@ -93,9 +96,19 @@ class HaAddonPicker extends LitElement {
         const addonsInfo = await fetchHassioAddonsInfo(this.hass);
         this._addons = addonsInfo.addons
           .filter((addon) => addon.version)
-          .sort((a, b) =>
+          .map((addon) => ({
-            stringCompare(a.name, b.name, this.hass.locale.language)
+            id: addon.slug,
-          );
+            primary: addon.name,
+            secondary: addon.slug,
+            icon: addon.icon
+              ? `/api/hassio/addons/${addon.slug}/icon`
+              : undefined,
+            search_labels: {
+              description: addon.description || null,
+              repository: addon.repository || null,
+            },
+            sorting_label: [addon.name, addon.slug].filter(Boolean).join("_"),
+          }));
       } else {
         this._error = this.hass.localize(
           "ui.components.addon-picker.error.no_supervisor"
@@ -108,6 +121,8 @@ class HaAddonPicker extends LitElement {
     }
   }
 
+  private _getItems = () => this._addons!;
+
   private get _value() {
     return this.value || "";
   }
@@ -128,6 +143,17 @@ class HaAddonPicker extends LitElement {
       fireEvent(this, "change");
     }, 0);
   }
+
+  private _valueRenderer = (itemId: string) => {
+    const item = this._addons!.find((addon) => addon.id === itemId);
+    return html`${item?.icon
+        ? html`<img
+            slot="start"
+            alt=${item.primary ?? "Unknown"}
+            .src=${item.icon}
+          />`
+        : nothing}<span slot="headline">${item?.primary || "Unknown"}</span>`;
+  };
 }
 
 declare global {

src/components/ha-picker-field.ts

@@ -73,7 +73,9 @@ export class HaPickerField extends LitElement {
 
     const overlineLabel =
       this.showLabel && hasValue && this.placeholder
-        ? html`<span slot="overline">${this.placeholder}</span>`
+        ? html`<span slot="overline"
+            >${this.placeholder}${this.required ? " *" : ""}</span
+          >`
         : nothing;
 
     const headlineContent = hasValue
@@ -82,7 +84,7 @@ export class HaPickerField extends LitElement {
         : html`<span slot="headline">${this.value}</span>`
       : this.placeholder
         ? html`<span slot="headline" class="placeholder">
-            ${this.placeholder}
+            ${this.placeholder}${this.required ? " *" : ""}
           </span>`
         : nothing;