Add config entry selector (#13432)

* Add config entry selector

* Let backend filter by integration

* Add to gallery

* Adjust translation

* Fix imports

* Rename in gallery as well

* Fix typo in localize key

* Prettier

gallery/src/pages/components/ha-form.ts

@@ -3,6 +3,7 @@ import "@material/mwc-button";
 import { html, LitElement, TemplateResult } from "lit";
 import { customElement, state } from "lit/decorators";
 import { mockAreaRegistry } from "../../../../demo/src/stubs/area_registry";
+import { mockConfigEntries } from "../../../../demo/src/stubs/config_entries";
 import { mockDeviceRegistry } from "../../../../demo/src/stubs/device_registry";
 import { mockEntityRegistry } from "../../../../demo/src/stubs/entity_registry";
 import { mockHassioSupervisor } from "../../../../demo/src/stubs/hassio_supervisor";
@@ -153,6 +154,7 @@ const SCHEMAS: {
         context: { filter_entity: "entity", filter_attribute: "Attribute" },
       },
       { name: "Device", selector: { device: {} } },
+      { name: "Config entry", selector: { config_entry: {} } },
       { name: "Duration", selector: { duration: {} } },
       { name: "area", selector: { area: {} } },
       { name: "target", selector: { target: {} } },
@@ -434,6 +436,7 @@ class DemoHaForm extends LitElement {
     hass.addEntities(ENTITIES);
     mockEntityRegistry(hass);
     mockDeviceRegistry(hass, DEVICES);
+    mockConfigEntries(hass);
     mockAreaRegistry(hass, AREAS);
     mockHassioSupervisor(hass);
   }

gallery/src/pages/components/ha-selector.ts

@@ -3,6 +3,7 @@ import "@material/mwc-button";
 import { css, html, LitElement, TemplateResult } from "lit";
 import { customElement, state } from "lit/decorators";
 import { mockAreaRegistry } from "../../../../demo/src/stubs/area_registry";
+import { mockConfigEntries } from "../../../../demo/src/stubs/config_entries";
 import { mockDeviceRegistry } from "../../../../demo/src/stubs/device_registry";
 import { mockEntityRegistry } from "../../../../demo/src/stubs/entity_registry";
 import { mockHassioSupervisor } from "../../../../demo/src/stubs/hassio_supervisor";
@@ -124,6 +125,10 @@ const SCHEMAS: {
         selector: { attribute: { entity_id: "" } },
       },
       device: { name: "Device", selector: { device: {} } },
+      config_entry: {
+        name: "Integration",
+        selector: { config_entry: {} },
+      },
       duration: { name: "Duration", selector: { duration: {} } },
       addon: { name: "Addon", selector: { addon: {} } },
       area: { name: "Area", selector: { area: {} } },
@@ -280,6 +285,7 @@ class DemoHaSelector extends LitElement implements ProvideHassElement {
     hass.addEntities(ENTITIES);
     mockEntityRegistry(hass);
     mockDeviceRegistry(hass, DEVICES);
+    mockConfigEntries(hass);
     mockAreaRegistry(hass, AREAS);
     mockHassioSupervisor(hass);
     hass.mockWS("auth/sign_path", (params) => params);

src/components/ha-config-entry-picker.ts

@@ -0,0 +1,156 @@
+import "@material/mwc-list/mwc-list-item";
+import { html, LitElement, TemplateResult } from "lit";
+import { ComboBoxLitRenderer } from "lit-vaadin-helpers";
+import { customElement, property, query, state } from "lit/decorators";
+import { fireEvent } from "../common/dom/fire_event";
+import { PolymerChangedEvent } from "../polymer-types";
+import { HomeAssistant } from "../types";
+import type { HaComboBox } from "./ha-combo-box";
+import { ConfigEntry, getConfigEntries } from "../data/config_entries";
+import { domainToName } from "../data/integration";
+import { caseInsensitiveStringCompare } from "../common/string/compare";
+import { brandsUrl } from "../util/brands-url";
+import "./ha-combo-box";
+
+export interface ConfigEntryExtended extends ConfigEntry {
+  localized_domain_name?: string;
+}
+
+@customElement("ha-config-entry-picker")
+class HaConfigEntryPicker extends LitElement {
+  public hass!: HomeAssistant;
+
+  @property() public integration?: string;
+
+  @property() public label?: string;
+
+  @property() public value = "";
+
+  @property() public helper?: string;
+
+  @state() private _configEntries?: ConfigEntryExtended[];
+
+  @property({ type: Boolean }) public disabled = false;
+
+  @property({ type: Boolean }) public required = false;
+
+  @query("ha-combo-box") private _comboBox!: HaComboBox;
+
+  public open() {
+    this._comboBox?.open();
+  }
+
+  public focus() {
+    this._comboBox?.focus();
+  }
+
+  protected firstUpdated() {
+    this._getConfigEntries();
+  }
+
+  private _rowRenderer: ComboBoxLitRenderer<ConfigEntryExtended> = (
+    item
+  ) => html`<mwc-list-item twoline graphic="icon">
+    <span
+      >${item.title ||
+      this.hass.localize(
+        "ui.panel.config.integrations.config_entry.unnamed_entry"
+      )}</span
+    >
+    <span slot="secondary">${item.localized_domain_name}</span>
+    <img
+      slot="graphic"
+      src=${brandsUrl({
+        domain: item.domain,
+        type: "icon",
+        darkOptimized: this.hass.themes?.darkMode,
+      })}
+      referrerpolicy="no-referrer"
+      @error=${this._onImageError}
+      @load=${this._onImageLoad}
+    />
+  </mwc-list-item>`;
+
+  protected render(): TemplateResult {
+    if (!this._configEntries) {
+      return html``;
+    }
+    return html`
+      <ha-combo-box
+        .hass=${this.hass}
+        .label=${this.label === undefined && this.hass
+          ? this.hass.localize("ui.components.config-entry-picker.config_entry")
+          : this.label}
+        .value=${this._value}
+        .required=${this.required}
+        .disabled=${this.disabled}
+        .helper=${this.helper}
+        .renderer=${this._rowRenderer}
+        .items=${this._configEntries}
+        item-value-path="entry_id"
+        item-id-path="entry_id"
+        item-label-path="title"
+        @value-changed=${this._valueChanged}
+      ></ha-combo-box>
+    `;
+  }
+
+  private _onImageLoad(ev) {
+    ev.target.style.visibility = "initial";
+  }
+
+  private _onImageError(ev) {
+    ev.target.style.visibility = "hidden";
+  }
+
+  private async _getConfigEntries() {
+    getConfigEntries(this.hass, {
+      type: "integration",
+      domain: this.integration,
+    }).then((configEntries) => {
+      this._configEntries = configEntries
+        .map(
+          (entry: ConfigEntry): ConfigEntryExtended => ({
+            ...entry,
+            localized_domain_name: domainToName(
+              this.hass.localize,
+              entry.domain
+            ),
+          })
+        )
+        .sort((conf1, conf2) =>
+          caseInsensitiveStringCompare(
+            conf1.localized_domain_name + conf1.title,
+            conf2.localized_domain_name + conf2.title
+          )
+        );
+    });
+  }
+
+  private get _value() {
+    return this.value || "";
+  }
+
+  private _valueChanged(ev: PolymerChangedEvent<string>) {
+    ev.stopPropagation();
+    const newValue = ev.detail.value;
+
+    if (newValue !== this._value) {
+      this._setValue(newValue);
+    }
+  }
+
+  private _setValue(value: string) {
+    this.value = value;
+    setTimeout(() => {
+      fireEvent(this, "value-changed", { value });
+      fireEvent(this, "change");
+    }, 0);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-config-entry-picker": HaConfigEntryPicker;
+  }
+}

src/components/ha-selector/ha-selector-config-entry.ts

@@ -0,0 +1,47 @@
+import { css, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
+import { ConfigEntrySelector } from "../../data/selector";
+import { HomeAssistant } from "../../types";
+import "../ha-config-entry-picker";
+
+@customElement("ha-selector-config_entry")
+export class HaConfigEntrySelector extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public selector!: ConfigEntrySelector;
+
+  @property() public value?: any;
+
+  @property() public label?: string;
+
+  @property() public helper?: string;
+
+  @property({ type: Boolean }) public disabled = false;
+
+  @property({ type: Boolean }) public required = true;
+
+  protected render() {
+    return html`<ha-config-entry-picker
+      .hass=${this.hass}
+      .value=${this.value}
+      .label=${this.label}
+      .helper=${this.helper}
+      .disabled=${this.disabled}
+      .required=${this.required}
+      .integration=${this.selector.config_entry.integration}
+      allow-custom-entity
+    ></ha-config-entry-picker>`;
+  }
+
+  static styles = css`
+    ha-config-entry-picker {
+      width: 100%;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-selector-config_entry": HaConfigEntrySelector;
+  }
+}

src/components/ha-selector/ha-selector.ts

@@ -9,6 +9,7 @@ import "./ha-selector-area";
 import "./ha-selector-attribute";
 import "./ha-selector-boolean";
 import "./ha-selector-color-rgb";
+import "./ha-selector-config-entry";
 import "./ha-selector-date";
 import "./ha-selector-datetime";
 import "./ha-selector-device";

src/data/selector.ts

@@ -11,6 +11,7 @@ export type Selector =
   | BooleanSelector
   | ColorRGBSelector
   | ColorTempSelector
+  | ConfigEntrySelector
   | DateSelector
   | DateTimeSelector
   | DeviceSelector
@@ -86,6 +87,12 @@ export interface ColorTempSelector {
   };
 }
 
+export interface ConfigEntrySelector {
+  config_entry: {
+    integration?: string;
+  };
+}
+
 export interface DateSelector {
   // eslint-disable-next-line @typescript-eslint/ban-types
   date: {};

src/translations/en.json

@@ -417,6 +417,9 @@
         "add_device_id": "Choose device",
         "add_entity_id": "Choose entity"
       },
+      "config-entry-picker": {
+        "config_entry": "Integration"
+      },
       "theme-picker": {
         "theme": "Theme",
         "no_theme": "No theme"