From 5a4ce8ea4f564f995d9e3c31300661ac4cbb5310 Mon Sep 17 00:00:00 2001 From: Paulus Schoutsen Date: Thu, 10 Feb 2022 13:46:41 -0800 Subject: [PATCH 1/6] Allow adding Zigbee/Zwave device --- .../config-flow/step-flow-pick-handler.ts | 121 ++++++++++++------ src/translations/en.json | 2 + 2 files changed, 84 insertions(+), 39 deletions(-) diff --git a/src/dialogs/config-flow/step-flow-pick-handler.ts b/src/dialogs/config-flow/step-flow-pick-handler.ts index 38257e66aa22..48d5783c7000 100644 --- a/src/dialogs/config-flow/step-flow-pick-handler.ts +++ b/src/dialogs/config-flow/step-flow-pick-handler.ts @@ -12,12 +12,16 @@ import { import { customElement, property, state } from "lit/decorators"; import { styleMap } from "lit/directives/style-map"; import memoizeOne from "memoize-one"; +import { isComponentLoaded } from "../../common/config/is_component_loaded"; import { fireEvent } from "../../common/dom/fire_event"; +import { navigate } from "../../common/navigate"; import "../../common/search/search-input"; import { caseInsensitiveStringCompare } from "../../common/string/compare"; import { LocalizeFunc } from "../../common/translations/localize"; import "../../components/ha-icon-next"; +import { getConfigEntries } from "../../data/config_entries"; import { domainToName } from "../../data/integration"; +import { showZWaveJSAddNodeDialog } from "../../panels/config/integrations/integration-panels/zwave_js/show-dialog-zwave_js-add-node"; import { HomeAssistant } from "../../types"; import { brandsUrl } from "../../util/brands-url"; import { documentationUrl } from "../../util/documentation-url"; @@ -26,6 +30,7 @@ import { configFlowContentStyles } from "./styles"; interface HandlerObj { name: string; slug: string; + show_add?: boolean; } declare global { @@ -77,6 +82,14 @@ class StepFlowPickHandler extends LitElement { protected render(): TemplateResult { const handlers = this._getHandlers(); + const addDeviceRows: HandlerObj[] = ["zha", "zwave_js"] + .filter((domain) => isComponentLoaded(this.hass, domain)) + .map((domain) => ({ + name: domainToName(this.hass.localize, domain), + slug: domain, + show_add: true, + })); + return html`

${this.hass.localize("ui.panel.config.integrations.new")}

+ ${addDeviceRows.length + ? html` + ${addDeviceRows.map((handler) => this._renderRow(handler))} +
+ ` + : ""} ${handlers.length - ? handlers.map( - (handler: HandlerObj) => - html` - - - - ${handler.name} - - - ` - ) + ? handlers.map((handler) => this._renderRow(handler)) : html`

${this.hass.localize( @@ -144,6 +141,32 @@ class StepFlowPickHandler extends LitElement { `; } + private _renderRow(handler: HandlerObj) { + return html` + + + ${handler.show_add + ? this.hass.localize( + `ui.panel.config.integrations.add_${handler.slug}_device` + ) + : handler.name} + + + `; + } + public willUpdate(changedProps: PropertyValues): void { if (this._filter === undefined && this.initialFilter !== undefined) { this._filter = this.initialFilter; @@ -161,20 +184,13 @@ class StepFlowPickHandler extends LitElement { protected updated(changedProps) { super.updated(changedProps); - // Store the width and height so that when we search, box doesn't jump - const div = this.shadowRoot!.querySelector("div")!; - if (!this._width) { - const width = div.clientWidth; - if (width) { - this._width = width; - } - } - if (!this._height) { - const height = div.clientHeight; - if (height) { - this._height = height; - } + if (!changedProps.has("handlers")) { + return; } + // Store the width and height so that when we search, box doesn't jump + const div = this.shadowRoot!.querySelector("div.container")!; + this._width = div.clientWidth; + this._height = div.clientHeight; } private _getHandlers() { @@ -190,8 +206,31 @@ class StepFlowPickHandler extends LitElement { } private async _handlerPicked(ev) { + const handler: HandlerObj = ev.currentTarget.handler; + + if (handler.show_add) { + if (handler.slug === "zwave_js") { + const entries = await getConfigEntries(this.hass); + const entry = entries.find((ent) => ent.domain === "zwave_js"); + + if (!entry) { + return; + } + + showZWaveJSAddNodeDialog(this, { + entry_id: entry.entry_id, + }); + } else if (handler.slug === "zha") { + navigate("/config/zha/add"); + } + + // This closes dialog. + fireEvent(this, "flow-update"); + return; + } + fireEvent(this, "handler-picked", { - handler: ev.currentTarget.handler.slug, + handler: handler.slug, }); } @@ -219,7 +258,11 @@ class StepFlowPickHandler extends LitElement { } search-input { display: block; - margin: -12px 16px 0; + margin: 8px 0; + } + .divider { + margin: 8px 0; + border-top: 1px solid var(--divider-color); } ha-icon-next { margin-right: 8px; diff --git a/src/translations/en.json b/src/translations/en.json index 547d8ff918a0..cafd39ed58b6 100755 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -2478,6 +2478,8 @@ "rename_dialog": "Edit the name of this config entry", "rename_input_label": "Entry name", "search": "Search integrations", + "add_zwave_js_device": "Add Z-Wave device", + "add_zha_device": "Add Zigbee device", "disable": { "show_disabled": "Show disabled integrations", "disabled_integrations": "{number} disabled", From 17bd21a8e608d4bb549c22716f486866dead709f Mon Sep 17 00:00:00 2001 From: Paulus Schoutsen Date: Thu, 10 Feb 2022 14:14:39 -0800 Subject: [PATCH 2/6] Hide arrow on Add device rows --- src/dialogs/config-flow/step-flow-pick-handler.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/dialogs/config-flow/step-flow-pick-handler.ts b/src/dialogs/config-flow/step-flow-pick-handler.ts index 48d5783c7000..7ca694531eb9 100644 --- a/src/dialogs/config-flow/step-flow-pick-handler.ts +++ b/src/dialogs/config-flow/step-flow-pick-handler.ts @@ -162,7 +162,7 @@ class StepFlowPickHandler extends LitElement { ) : handler.name} - + ${handler.show_add ? "" : html``} `; } From 09359357026e096fdafcf6b6957e7b4ae7edcb7e Mon Sep 17 00:00:00 2001 From: Paulus Schoutsen Date: Fri, 11 Feb 2022 08:17:40 -0800 Subject: [PATCH 3/6] Use mwc-list-item --- .../config-flow/step-flow-pick-handler.ts | 40 ++++++++++++------- 1 file changed, 25 insertions(+), 15 deletions(-) diff --git a/src/dialogs/config-flow/step-flow-pick-handler.ts b/src/dialogs/config-flow/step-flow-pick-handler.ts index 7ca694531eb9..a8b5d53a81a9 100644 --- a/src/dialogs/config-flow/step-flow-pick-handler.ts +++ b/src/dialogs/config-flow/step-flow-pick-handler.ts @@ -1,5 +1,4 @@ -import "@polymer/paper-item/paper-icon-item"; -import "@polymer/paper-item/paper-item-body"; +import "@material/mwc-list/mwc-check-list-item"; import Fuse from "fuse.js"; import { css, @@ -143,9 +142,14 @@ class StepFlowPickHandler extends LitElement { private _renderRow(handler: HandlerObj) { return html` - + - ${handler.show_add + + ${handler.show_add ? this.hass.localize( `ui.panel.config.integrations.add_${handler.slug}_device` ) - : handler.name} - ${handler.show_add ? "" : html``} - + : handler.name} + + ${handler.show_add + ? "" + : html``} + `; } @@ -187,10 +193,14 @@ class StepFlowPickHandler extends LitElement { if (!changedProps.has("handlers")) { return; } - // Store the width and height so that when we search, box doesn't jump - const div = this.shadowRoot!.querySelector("div.container")!; - this._width = div.clientWidth; - this._height = div.clientHeight; + // Wait until list item initialized + const firstListItem = this.shadowRoot!.querySelector("mwc-list-item")!; + firstListItem.updateComplete.then(() => { + // Store the width and height so that when we search, box doesn't jump + const div = this.shadowRoot!.querySelector("div.container")!; + this._width = div.clientWidth; + this._height = div.clientHeight; + }); } private _getHandlers() { @@ -258,7 +268,7 @@ class StepFlowPickHandler extends LitElement { } search-input { display: block; - margin: 8px 0; + margin-top: 8px; } .divider { margin: 8px 0; From 6ee548da687552fc7a905052e70006e4dd0e29b3 Mon Sep 17 00:00:00 2001 From: Paulus Schoutsen Date: Fri, 11 Feb 2022 08:19:51 -0800 Subject: [PATCH 4/6] improve name handling --- src/dialogs/config-flow/step-flow-pick-handler.ts | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) diff --git a/src/dialogs/config-flow/step-flow-pick-handler.ts b/src/dialogs/config-flow/step-flow-pick-handler.ts index a8b5d53a81a9..467d41e3fca3 100644 --- a/src/dialogs/config-flow/step-flow-pick-handler.ts +++ b/src/dialogs/config-flow/step-flow-pick-handler.ts @@ -84,10 +84,13 @@ class StepFlowPickHandler extends LitElement { const addDeviceRows: HandlerObj[] = ["zha", "zwave_js"] .filter((domain) => isComponentLoaded(this.hass, domain)) .map((domain) => ({ - name: domainToName(this.hass.localize, domain), + name: this.hass.localize( + `ui.panel.config.integrations.add_${domain}_device` + ), slug: domain, show_add: true, - })); + })) + .sort((a, b) => caseInsensitiveStringCompare(a.name, b.name)); return html`

${this.hass.localize("ui.panel.config.integrations.new")}

@@ -159,13 +162,7 @@ class StepFlowPickHandler extends LitElement { })} referrerpolicy="no-referrer" /> - - ${handler.show_add - ? this.hass.localize( - `ui.panel.config.integrations.add_${handler.slug}_device` - ) - : handler.name} - + ${handler.name} ${handler.show_add ? "" : html``} From a9c474b6b670a33861b0ffe9bb5f0f14899e42d0 Mon Sep 17 00:00:00 2001 From: Paulus Schoutsen Date: Fri, 11 Feb 2022 08:21:14 -0800 Subject: [PATCH 5/6] improve prop name --- src/dialogs/config-flow/step-flow-pick-handler.ts | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/src/dialogs/config-flow/step-flow-pick-handler.ts b/src/dialogs/config-flow/step-flow-pick-handler.ts index 467d41e3fca3..3ecb177bbca4 100644 --- a/src/dialogs/config-flow/step-flow-pick-handler.ts +++ b/src/dialogs/config-flow/step-flow-pick-handler.ts @@ -29,7 +29,7 @@ import { configFlowContentStyles } from "./styles"; interface HandlerObj { name: string; slug: string; - show_add?: boolean; + is_add?: boolean; } declare global { @@ -88,7 +88,7 @@ class StepFlowPickHandler extends LitElement { `ui.panel.config.integrations.add_${domain}_device` ), slug: domain, - show_add: true, + is_add: true, })) .sort((a, b) => caseInsensitiveStringCompare(a.name, b.name)); @@ -147,7 +147,7 @@ class StepFlowPickHandler extends LitElement { return html` @@ -163,9 +163,7 @@ class StepFlowPickHandler extends LitElement { referrerpolicy="no-referrer" /> ${handler.name} - ${handler.show_add - ? "" - : html``} + ${handler.is_add ? "" : html``} `; } @@ -215,7 +213,7 @@ class StepFlowPickHandler extends LitElement { private async _handlerPicked(ev) { const handler: HandlerObj = ev.currentTarget.handler; - if (handler.show_add) { + if (handler.is_add) { if (handler.slug === "zwave_js") { const entries = await getConfigEntries(this.hass); const entry = entries.find((ent) => ent.domain === "zwave_js"); From 50cc7b90dd3a2fb84ac64acc697bdbfbf245fd87 Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Fri, 11 Feb 2022 17:32:15 +0100 Subject: [PATCH 6/6] Update src/dialogs/config-flow/step-flow-pick-handler.ts --- src/dialogs/config-flow/step-flow-pick-handler.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/dialogs/config-flow/step-flow-pick-handler.ts b/src/dialogs/config-flow/step-flow-pick-handler.ts index 3ecb177bbca4..cd0652bcc275 100644 --- a/src/dialogs/config-flow/step-flow-pick-handler.ts +++ b/src/dialogs/config-flow/step-flow-pick-handler.ts @@ -1,4 +1,4 @@ -import "@material/mwc-list/mwc-check-list-item"; +import "@material/mwc-list/mwc-list-item"; import Fuse from "fuse.js"; import { css,