From 5edee41c5bd55afb4945324d3dee52aeb8d33d22 Mon Sep 17 00:00:00 2001 From: Paulus Schoutsen Date: Tue, 20 Aug 2019 00:09:33 -0700 Subject: [PATCH] Add system options UI (#3501) * Add system options UI * Tweak translation --- src/data/config_entries.ts | 24 +++ src/data/config_flow.ts | 2 +- .../dialog-config-entry-system-options.ts | 175 ++++++++++++++++++ ...show-dialog-config-entry-system-options.ts | 24 +++ .../dialog-device-registry-detail.ts | 12 +- .../show-dialog-device-registry-detail.ts | 4 +- .../{ => config-entry}/ha-ce-entities-card.js | 12 +- .../ha-config-entry-page.ts | 39 ++-- .../{ => config-entry}/ha-device-card.js | 23 ++- .../integrations/ha-config-integrations.ts | 2 +- src/translations/en.json | 5 + 11 files changed, 282 insertions(+), 40 deletions(-) create mode 100644 src/dialogs/config-entry-system-options/dialog-config-entry-system-options.ts create mode 100644 src/dialogs/config-entry-system-options/show-dialog-config-entry-system-options.ts rename src/{panels/config/integrations => dialogs/device-registry-detail}/dialog-device-registry-detail.ts (94%) rename src/{panels/config/integrations => dialogs/device-registry-detail}/show-dialog-device-registry-detail.ts (88%) rename src/panels/config/integrations/{ => config-entry}/ha-ce-entities-card.js (84%) rename src/panels/config/integrations/{ => config-entry}/ha-config-entry-page.ts (80%) rename src/panels/config/integrations/{ => config-entry}/ha-device-card.js (92%) diff --git a/src/data/config_entries.ts b/src/data/config_entries.ts index a7d3017a48..9d5388c5bf 100644 --- a/src/data/config_entries.ts +++ b/src/data/config_entries.ts @@ -10,6 +10,10 @@ export interface ConfigEntry { supports_options: boolean; } +export interface ConfigEntrySystemOptions { + disable_new_entities: boolean; +} + export const getConfigEntries = (hass: HomeAssistant) => hass.callApi("GET", "config/config_entries/entry"); @@ -17,3 +21,23 @@ export const deleteConfigEntry = (hass: HomeAssistant, configEntryId: string) => hass.callApi<{ require_restart: boolean; }>("DELETE", `config/config_entries/entry/${configEntryId}`); + +export const getConfigEntrySystemOptions = ( + hass: HomeAssistant, + configEntryId: string +) => + hass.callWS({ + type: "config_entries/system_options/list", + entry_id: configEntryId, + }); + +export const updateConfigEntrySystemOptions = ( + hass: HomeAssistant, + configEntryId: string, + params: Partial +) => + hass.callWS({ + type: "config_entries/system_options/update", + entry_id: configEntryId, + ...params, + }); diff --git a/src/data/config_flow.ts b/src/data/config_flow.ts index 0c92295df5..45f401a91c 100644 --- a/src/data/config_flow.ts +++ b/src/data/config_flow.ts @@ -37,7 +37,7 @@ export const getConfigFlowHandlers = (hass: HomeAssistant) => const fetchConfigFlowInProgress = (conn) => conn.sendMessagePromise({ - type: "config/config_entries/flow", + type: "config_entries/flow/progress", }); const subscribeConfigFlowInProgressUpdates = (conn, store) => diff --git a/src/dialogs/config-entry-system-options/dialog-config-entry-system-options.ts b/src/dialogs/config-entry-system-options/dialog-config-entry-system-options.ts new file mode 100644 index 0000000000..5c5ac07b87 --- /dev/null +++ b/src/dialogs/config-entry-system-options/dialog-config-entry-system-options.ts @@ -0,0 +1,175 @@ +import { + LitElement, + html, + css, + CSSResult, + TemplateResult, + customElement, + property, +} from "lit-element"; +import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable"; +import "@polymer/paper-input/paper-input"; + +import "../../components/dialog/ha-paper-dialog"; +import { HomeAssistant } from "../../types"; +import { ConfigEntrySystemOptionsDialogParams } from "./show-dialog-config-entry-system-options"; +import { + getConfigEntrySystemOptions, + updateConfigEntrySystemOptions, +} from "../../data/config_entries"; +import { PolymerChangedEvent } from "../../polymer-types"; +import { haStyleDialog } from "../../resources/styles"; + +@customElement("dialog-config-entry-system-options") +class DialogConfigEntrySystemOptions extends LitElement { + @property() public hass!: HomeAssistant; + @property() private _disableNewEntities!: boolean; + @property() private _error?: string; + @property() private _params?: ConfigEntrySystemOptionsDialogParams; + @property() private _loading?: boolean; + @property() private _submitting?: boolean; + + public async showDialog( + params: ConfigEntrySystemOptionsDialogParams + ): Promise { + this._params = params; + this._error = undefined; + this._loading = true; + const systemOptions = await getConfigEntrySystemOptions( + this.hass, + params.entry.entry_id + ); + this._loading = false; + this._disableNewEntities = systemOptions.disable_new_entities; + await this.updateComplete; + } + + protected render(): TemplateResult | void { + if (!this._params) { + return html``; + } + + return html` + +

+ ${this.hass.localize("ui.dialogs.config_entry_system_options.title")} +

+ + ${this._loading + ? html` + + ` + : html` + ${this._error + ? html` +
${this._error}
+ ` + : ""} +
+ +
+ ${this.hass.localize( + "ui.dialogs.config_entry_system_options.enable_new_entities_label" + )} +
+
+ ${this.hass.localize( + "ui.dialogs.config_entry_system_options.enable_new_entities_description" + )} +
+ +
+ `} + + ${!this._loading + ? html` +
+ + ${this.hass.localize( + "ui.panel.config.entity_registry.editor.update" + )} + +
+ ` + : ""} + + `; + } + + private _disableNewEntitiesChanged(ev: PolymerChangedEvent): void { + this._error = undefined; + this._disableNewEntities = !ev.detail.value; + } + + private async _updateEntry(): Promise { + this._submitting = true; + try { + await updateConfigEntrySystemOptions( + this.hass, + this._params!.entry.entry_id, + { + disable_new_entities: this._disableNewEntities, + } + ); + this._params = undefined; + } catch (err) { + this._error = err.message || "Unknown error"; + } finally { + this._submitting = false; + } + } + + private _openedChanged(ev: PolymerChangedEvent): void { + if (!(ev.detail as any).value) { + this._params = undefined; + } + } + + static get styles(): CSSResult[] { + return [ + haStyleDialog, + css` + ha-paper-dialog { + min-width: 400px; + max-width: 500px; + } + .init-spinner { + padding: 50px 100px; + text-align: center; + } + + .form { + padding-bottom: 24px; + color: var(--primary-text-color); + } + + .secondary { + color: var(--secondary-text-color); + } + + .error { + color: var(--google-red-500); + } + `, + ]; + } +} + +declare global { + interface HTMLElementTagNameMap { + "dialog-config-entry-system-options": DialogConfigEntrySystemOptions; + } +} diff --git a/src/dialogs/config-entry-system-options/show-dialog-config-entry-system-options.ts b/src/dialogs/config-entry-system-options/show-dialog-config-entry-system-options.ts new file mode 100644 index 0000000000..f21b46644c --- /dev/null +++ b/src/dialogs/config-entry-system-options/show-dialog-config-entry-system-options.ts @@ -0,0 +1,24 @@ +import { fireEvent } from "../../common/dom/fire_event"; +import { ConfigEntry } from "../../data/config_entries"; + +export interface ConfigEntrySystemOptionsDialogParams { + entry: ConfigEntry; + // updateEntry: ( + // updates: Partial + // ) => Promise; + // removeEntry: () => Promise; +} + +export const loadConfigEntrySystemOptionsDialog = () => + import(/* webpackChunkName: "config-entry-system-options" */ "./dialog-config-entry-system-options"); + +export const showConfigEntrySystemOptionsDialog = ( + element: HTMLElement, + systemLogDetailParams: ConfigEntrySystemOptionsDialogParams +): void => { + fireEvent(element, "show-dialog", { + dialogTag: "dialog-config-entry-system-options", + dialogImport: loadConfigEntrySystemOptionsDialog, + dialogParams: systemLogDetailParams, + }); +}; diff --git a/src/panels/config/integrations/dialog-device-registry-detail.ts b/src/dialogs/device-registry-detail/dialog-device-registry-detail.ts similarity index 94% rename from src/panels/config/integrations/dialog-device-registry-detail.ts rename to src/dialogs/device-registry-detail/dialog-device-registry-detail.ts index 06da57b870..64039847c4 100644 --- a/src/panels/config/integrations/dialog-device-registry-detail.ts +++ b/src/dialogs/device-registry-detail/dialog-device-registry-detail.ts @@ -14,16 +14,16 @@ import "@polymer/paper-dropdown-menu/paper-dropdown-menu"; import "@polymer/paper-item/paper-item"; import "@material/mwc-button/mwc-button"; -import "../../../components/dialog/ha-paper-dialog"; +import "../../components/dialog/ha-paper-dialog"; import { DeviceRegistryDetailDialogParams } from "./show-dialog-device-registry-detail"; -import { PolymerChangedEvent } from "../../../polymer-types"; -import { haStyleDialog } from "../../../resources/styles"; -import { HomeAssistant } from "../../../types"; +import { PolymerChangedEvent } from "../../polymer-types"; +import { haStyleDialog } from "../../resources/styles"; +import { HomeAssistant } from "../../types"; import { subscribeAreaRegistry, AreaRegistryEntry, -} from "../../../data/area_registry"; +} from "../../data/area_registry"; @customElement("dialog-device-registry-detail") class DialogDeviceRegistryDetail extends LitElement { @@ -74,7 +74,7 @@ class DialogDeviceRegistryDetail extends LitElement { opened @opened-changed="${this._openedChanged}" > -

${device.name}

+

${device.name || "Unnamed device"}

${this._error ? html` diff --git a/src/panels/config/integrations/show-dialog-device-registry-detail.ts b/src/dialogs/device-registry-detail/show-dialog-device-registry-detail.ts similarity index 88% rename from src/panels/config/integrations/show-dialog-device-registry-detail.ts rename to src/dialogs/device-registry-detail/show-dialog-device-registry-detail.ts index f7291b3d75..564a32aa60 100644 --- a/src/panels/config/integrations/show-dialog-device-registry-detail.ts +++ b/src/dialogs/device-registry-detail/show-dialog-device-registry-detail.ts @@ -1,8 +1,8 @@ -import { fireEvent } from "../../../common/dom/fire_event"; +import { fireEvent } from "../../common/dom/fire_event"; import { DeviceRegistryEntry, DeviceRegistryEntryMutableParams, -} from "../../../data/device_registry"; +} from "../../data/device_registry"; export interface DeviceRegistryDetailDialogParams { device: DeviceRegistryEntry; diff --git a/src/panels/config/integrations/ha-ce-entities-card.js b/src/panels/config/integrations/config-entry/ha-ce-entities-card.js similarity index 84% rename from src/panels/config/integrations/ha-ce-entities-card.js rename to src/panels/config/integrations/config-entry/ha-ce-entities-card.js index 49b9ea3454..10d9e7f2bc 100644 --- a/src/panels/config/integrations/ha-ce-entities-card.js +++ b/src/panels/config/integrations/config-entry/ha-ce-entities-card.js @@ -3,13 +3,13 @@ import "@polymer/paper-item/paper-item-body"; import { html } from "@polymer/polymer/lib/utils/html-tag"; import { PolymerElement } from "@polymer/polymer/polymer-element"; -import "../../../components/ha-card"; -import "../../../layouts/hass-subpage"; +import "../../../../components/ha-card"; +import "../../../../layouts/hass-subpage"; -import { EventsMixin } from "../../../mixins/events-mixin"; -import LocalizeMixIn from "../../../mixins/localize-mixin"; -import "../../../components/entity/state-badge"; -import { computeEntityRegistryName } from "../../../data/entity_registry"; +import { EventsMixin } from "../../../../mixins/events-mixin"; +import LocalizeMixIn from "../../../../mixins/localize-mixin"; +import "../../../../components/entity/state-badge"; +import { computeEntityRegistryName } from "../../../../data/entity_registry"; /* * @appliesMixin LocalizeMixIn diff --git a/src/panels/config/integrations/ha-config-entry-page.ts b/src/panels/config/integrations/config-entry/ha-config-entry-page.ts similarity index 80% rename from src/panels/config/integrations/ha-config-entry-page.ts rename to src/panels/config/integrations/config-entry/ha-config-entry-page.ts index b14e2fe469..979a10887d 100644 --- a/src/panels/config/integrations/ha-config-entry-page.ts +++ b/src/panels/config/integrations/config-entry/ha-config-entry-page.ts @@ -1,21 +1,25 @@ import memoizeOne from "memoize-one"; -import "../../../layouts/hass-subpage"; -import "../../../layouts/hass-error-screen"; +import "../../../../layouts/hass-subpage"; +import "../../../../layouts/hass-error-screen"; -import "../../../components/entity/state-badge"; -import { compare } from "../../../common/string/compare"; +import "../../../../components/entity/state-badge"; +import { compare } from "../../../../common/string/compare"; import "./ha-device-card"; import "./ha-ce-entities-card"; -import { showOptionsFlowDialog } from "../../../dialogs/config-flow/show-dialog-options-flow"; +import { showOptionsFlowDialog } from "../../../../dialogs/config-flow/show-dialog-options-flow"; import { property, LitElement, CSSResult, css, html } from "lit-element"; -import { navigate } from "../../../common/navigate"; -import { HomeAssistant } from "../../../types"; -import { ConfigEntry, deleteConfigEntry } from "../../../data/config_entries"; -import { EntityRegistryEntry } from "../../../data/entity_registry"; -import { DeviceRegistryEntry } from "../../../data/device_registry"; -import { AreaRegistryEntry } from "../../../data/area_registry"; -import { fireEvent } from "../../../common/dom/fire_event"; +import { navigate } from "../../../../common/navigate"; +import { HomeAssistant } from "../../../../types"; +import { + ConfigEntry, + deleteConfigEntry, +} from "../../../../data/config_entries"; +import { EntityRegistryEntry } from "../../../../data/entity_registry"; +import { DeviceRegistryEntry } from "../../../../data/device_registry"; +import { AreaRegistryEntry } from "../../../../data/area_registry"; +import { fireEvent } from "../../../../common/dom/fire_event"; +import { showConfigEntrySystemOptionsDialog } from "../../../../dialogs/config-entry-system-options/show-dialog-config-entry-system-options"; class HaConfigEntryPage extends LitElement { @property() public hass!: HomeAssistant; @@ -92,6 +96,11 @@ class HaConfigEntryPage extends LitElement { > ` : ""} +