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
This commit is contained in:
Franck Nijhof 2022-08-24 00:26:15 +02:00 committed by GitHub
parent 8bcbeb299b
commit ed82ae9f68
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 223 additions and 0 deletions

View File

@ -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);
}

View File

@ -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);

View File

@ -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;
}
}

View File

@ -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;
}
}

View File

@ -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";

View File

@ -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: {};

View File

@ -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"