From dcf51917eb1f7cb5c766290874a737fdee188686 Mon Sep 17 00:00:00 2001 From: Timmo Date: Thu, 23 Apr 2020 01:54:54 +0100 Subject: [PATCH 01/20] Add search to integrations --- .../integrations/ha-config-integrations.ts | 124 ++++++++++++++++-- src/translations/en.json | 2 + 2 files changed, 118 insertions(+), 8 deletions(-) diff --git a/src/panels/config/integrations/ha-config-integrations.ts b/src/panels/config/integrations/ha-config-integrations.ts index 806e2e74c6a7..61f573befd28 100644 --- a/src/panels/config/integrations/ha-config-integrations.ts +++ b/src/panels/config/integrations/ha-config-integrations.ts @@ -10,6 +10,8 @@ import { PropertyValues, TemplateResult, } from "lit-element"; +import memoizeOne from "memoize-one"; +import * as Fuse from "fuse.js"; import { compare } from "../../../common/string/compare"; import { computeRTL } from "../../../common/util/compute_rtl"; import { afterNextRender } from "../../../common/util/render-status"; @@ -52,6 +54,18 @@ import { SubscribeMixin } from "../../../mixins/subscribe-mixin"; import { haStyle } from "../../../resources/styles"; import { HomeAssistant, Route } from "../../../types"; import { configSections } from "../ha-panel-config"; +import { domainToName } from "../../../data/integration"; +import { haStyle } from "../../../resources/styles"; +import { afterNextRender } from "../../../common/util/render-status"; +import "../../../common/search/search-input"; + +function mergeArrays(a: string[], b: string[]) { + const jointArray = a.concat(b); + const uniqueArray = jointArray.filter( + (item, index) => jointArray.indexOf(item) === index + ); + return uniqueArray; +} @customElement("ha-config-integrations") class HaConfigIntegrations extends SubscribeMixin(LitElement) { @@ -79,6 +93,8 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) { window.location.hash.substring(1) ); + @property() private _filter?: string; + public hassSubscribe(): UnsubscribeFunc[] { return [ subscribeEntityRegistry(this.hass.connection, (entries) => { @@ -99,6 +115,51 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) { ]; } + private _filterConfigEntries = memoizeOne( + (configEntries: ConfigEntry[], filter?: string): ConfigEntry[] => { + if (filter) { + const options: Fuse.FuseOptions = { + keys: ["entry_id", "domain", "title", "source"], + caseSensitive: false, + minMatchCharLength: 2, + threshold: 0.2, + }; + const fuse = new Fuse(configEntries, options); + configEntries = fuse.search(filter); + } + return configEntries; + } + ); + + private _filterConfigEntriesInProgress = memoizeOne( + ( + configEntriesInProgress: DataEntryFlowProgress[], + filter?: string + ): DataEntryFlowProgress[] => { + if (filter) { + let keys: any[] = ["handler"]; + configEntriesInProgress.map( + (entry: DataEntryFlowProgress): DataEntryFlowProgress => { + keys = mergeArrays( + keys, + Object.keys(entry.context).map((key: string) => `context.${key}`) + ); + return entry; + } + ); + const options: Fuse.FuseOptions = { + keys, + caseSensitive: false, + minMatchCharLength: 2, + threshold: 0.2, + }; + const fuse = new Fuse(configEntriesInProgress, options); + configEntriesInProgress = fuse.search(filter); + } + return configEntriesInProgress; + } + ); + protected firstUpdated(changed: PropertyValues) { super.firstUpdated(changed); this._loadConfigEntries(); @@ -126,6 +187,15 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) { } protected render(): TemplateResult { + const configEntries = this._filterConfigEntries( + this._configEntries, + this._filter + ); + const configEntriesInProgress = this._filterConfigEntriesInProgress( + this._configEntriesInProgress, + this._filter + ); + return html` +
+ +
+
${this._showIgnored - ? this._configEntries + ? configEntries .filter((item) => item.source === "ignore") .map( (item: ConfigEntry) => html` @@ -200,8 +278,8 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) { ` ) : ""} - ${this._configEntriesInProgress.length - ? this._configEntriesInProgress.map( + ${configEntriesInProgress.length + ? configEntriesInProgress.map( (flow) => html`
@@ -248,8 +326,8 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) { ` ) : ""} - ${this._configEntries.length - ? this._configEntries.map((item: any) => { + ${configEntries.length + ? configEntries.map((item: any) => { const devices = this._getDevices(item); const entities = this._getEntities(item); const integrationName = domainToName( @@ -365,7 +443,8 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) { `; }) - : html` + : !this._configEntries + ? html`

@@ -383,7 +462,28 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) { >

- `} + ` + : ""} + ${this._filter && + !configEntriesInProgress.length && + !configEntries.length + ? html` + +
+

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

+

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

+
+ + ` + : ""}
Date: Thu, 23 Apr 2020 02:00:59 +0100 Subject: [PATCH 02/20] Not required --- src/panels/config/integrations/ha-config-integrations.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/panels/config/integrations/ha-config-integrations.ts b/src/panels/config/integrations/ha-config-integrations.ts index 61f573befd28..acbadbf401d5 100644 --- a/src/panels/config/integrations/ha-config-integrations.ts +++ b/src/panels/config/integrations/ha-config-integrations.ts @@ -667,7 +667,6 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) { private _handleSearchChange(ev: CustomEvent) { this._filter = ev.detail.value; - this.requestUpdate(); } static get styles(): CSSResult[] { From 060a967b9bf5e1ac76bc0526a820c3b705282ebe Mon Sep 17 00:00:00 2001 From: Timmo Date: Thu, 23 Apr 2020 02:02:59 +0100 Subject: [PATCH 03/20] Cleanup --- src/panels/config/integrations/ha-config-integrations.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/panels/config/integrations/ha-config-integrations.ts b/src/panels/config/integrations/ha-config-integrations.ts index acbadbf401d5..ad15e07a20be 100644 --- a/src/panels/config/integrations/ha-config-integrations.ts +++ b/src/panels/config/integrations/ha-config-integrations.ts @@ -677,7 +677,7 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); grid-gap: 16px 16px; - padding: 8px 16px 16px 16px; + padding: 8px 16px 8px; margin-bottom: 64px; } ha-card { From e40a34e6c4bb20dedd20d549cbf463de9a585a23 Mon Sep 17 00:00:00 2001 From: Timmo Date: Thu, 23 Apr 2020 02:05:56 +0100 Subject: [PATCH 04/20] Cleanup --- src/panels/config/integrations/ha-config-integrations.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/panels/config/integrations/ha-config-integrations.ts b/src/panels/config/integrations/ha-config-integrations.ts index ad15e07a20be..a902046b8b40 100644 --- a/src/panels/config/integrations/ha-config-integrations.ts +++ b/src/panels/config/integrations/ha-config-integrations.ts @@ -677,7 +677,7 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); grid-gap: 16px 16px; - padding: 8px 16px 8px; + padding: 8px 16px 16px; margin-bottom: 64px; } ha-card { From c77729faf668f6ee94b45b7869cf4a1e5038b18a Mon Sep 17 00:00:00 2001 From: Aidan Timson Date: Thu, 23 Apr 2020 13:21:16 +0100 Subject: [PATCH 05/20] Apply suggestions from code review Co-Authored-By: Bram Kragten --- src/panels/config/integrations/ha-config-integrations.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/panels/config/integrations/ha-config-integrations.ts b/src/panels/config/integrations/ha-config-integrations.ts index a902046b8b40..760120ff1484 100644 --- a/src/panels/config/integrations/ha-config-integrations.ts +++ b/src/panels/config/integrations/ha-config-integrations.ts @@ -443,7 +443,7 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) { `; }) - : !this._configEntries + : !this._configEntries.length ? html`
From da08479681e8a213dcba4f74641da29198d6e77f Mon Sep 17 00:00:00 2001 From: Timmo Date: Thu, 23 Apr 2020 13:22:43 +0100 Subject: [PATCH 06/20] Add suggestion --- src/panels/config/integrations/ha-config-integrations.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/panels/config/integrations/ha-config-integrations.ts b/src/panels/config/integrations/ha-config-integrations.ts index 760120ff1484..e1d6851a9401 100644 --- a/src/panels/config/integrations/ha-config-integrations.ts +++ b/src/panels/config/integrations/ha-config-integrations.ts @@ -466,7 +466,8 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) { : ""} ${this._filter && !configEntriesInProgress.length && - !configEntries.length + !configEntries.length && + this._configEntries.length ? html`
From 86d906d228406004c6dc4a1954d98605f1b36137 Mon Sep 17 00:00:00 2001 From: Timmo Date: Thu, 23 Apr 2020 13:29:47 +0100 Subject: [PATCH 07/20] Just search domain and title --- src/panels/config/integrations/ha-config-integrations.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/panels/config/integrations/ha-config-integrations.ts b/src/panels/config/integrations/ha-config-integrations.ts index e1d6851a9401..e775eece6633 100644 --- a/src/panels/config/integrations/ha-config-integrations.ts +++ b/src/panels/config/integrations/ha-config-integrations.ts @@ -119,7 +119,7 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) { (configEntries: ConfigEntry[], filter?: string): ConfigEntry[] => { if (filter) { const options: Fuse.FuseOptions = { - keys: ["entry_id", "domain", "title", "source"], + keys: ["domain", "title"], caseSensitive: false, minMatchCharLength: 2, threshold: 0.2, From 9e26d68b8575579fa5165082ee2b340c5b56f1fb Mon Sep 17 00:00:00 2001 From: Timmo Date: Thu, 23 Apr 2020 13:35:16 +0100 Subject: [PATCH 08/20] Translate domain before search --- src/panels/config/integrations/ha-config-integrations.ts | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/panels/config/integrations/ha-config-integrations.ts b/src/panels/config/integrations/ha-config-integrations.ts index e775eece6633..9e4006e0ce67 100644 --- a/src/panels/config/integrations/ha-config-integrations.ts +++ b/src/panels/config/integrations/ha-config-integrations.ts @@ -117,6 +117,13 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) { private _filterConfigEntries = memoizeOne( (configEntries: ConfigEntry[], filter?: string): ConfigEntry[] => { + configEntries = configEntries.map((configEntry: ConfigEntry) => { + configEntry.domain = domainToName( + this.hass.localize, + configEntry.domain + ); + return configEntry; + }); if (filter) { const options: Fuse.FuseOptions = { keys: ["domain", "title"], @@ -261,7 +268,7 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) { />

- ${domainToName(this.hass.localize, item.domain)} + ${item.domain}

Date: Thu, 23 Apr 2020 13:58:26 +0100 Subject: [PATCH 09/20] Use new type to search in progress flows --- .../integrations/ha-config-integrations.ts | 39 ++++++++++++------- 1 file changed, 25 insertions(+), 14 deletions(-) diff --git a/src/panels/config/integrations/ha-config-integrations.ts b/src/panels/config/integrations/ha-config-integrations.ts index 9e4006e0ce67..8b88a07e8f26 100644 --- a/src/panels/config/integrations/ha-config-integrations.ts +++ b/src/panels/config/integrations/ha-config-integrations.ts @@ -59,6 +59,13 @@ import { haStyle } from "../../../resources/styles"; import { afterNextRender } from "../../../common/util/render-status"; import "../../../common/search/search-input"; +interface DataEntryFlowProgressSearch { + flow_id: string; + handler: string; + domain: string; + title: string; +} + function mergeArrays(a: string[], b: string[]) { const jointArray = a.concat(b); const uniqueArray = jointArray.filter( @@ -144,24 +151,28 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) { filter?: string ): DataEntryFlowProgress[] => { if (filter) { - let keys: any[] = ["handler"]; - configEntriesInProgress.map( - (entry: DataEntryFlowProgress): DataEntryFlowProgress => { - keys = mergeArrays( - keys, - Object.keys(entry.context).map((key: string) => `context.${key}`) - ); - return entry; - } + let configEntriedInProgressSearch: DataEntryFlowProgressSearch[] = configEntriesInProgress.map( + (entry: DataEntryFlowProgress) => ({ + flow_id: entry.flow_id, + handler: entry.handler, + domain: domainToName(this.hass.localize, entry.handler), + title: localizeConfigFlowTitle(this.hass.localize, entry), + }) ); - const options: Fuse.FuseOptions = { - keys, + const options: Fuse.FuseOptions = { + keys: ["handler", "domain", "title"], caseSensitive: false, minMatchCharLength: 2, threshold: 0.2, }; - const fuse = new Fuse(configEntriesInProgress, options); - configEntriesInProgress = fuse.search(filter); + const fuse = new Fuse(configEntriedInProgressSearch, options); + configEntriedInProgressSearch = fuse.search(filter); + configEntriesInProgress = configEntriesInProgress.filter( + (entry: DataEntryFlowProgress) => + configEntriedInProgressSearch.findIndex( + (e: DataEntryFlowProgressSearch) => e.flow_id === entry.flow_id + ) !== -1 + ); } return configEntriesInProgress; } @@ -287,7 +298,7 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) { : ""} ${configEntriesInProgress.length ? configEntriesInProgress.map( - (flow) => html` + (flow: DataEntryFlowProgress) => html`
${this.hass.localize( From 02fcdd520bf6b6a83ece40cadf636e0825586a74 Mon Sep 17 00:00:00 2001 From: Timmo Date: Thu, 23 Apr 2020 14:14:11 +0100 Subject: [PATCH 10/20] Fix domains --- .../integrations/ha-config-integrations.ts | 25 ++++++++++++------- 1 file changed, 16 insertions(+), 9 deletions(-) diff --git a/src/panels/config/integrations/ha-config-integrations.ts b/src/panels/config/integrations/ha-config-integrations.ts index 8b88a07e8f26..f018ab36b42a 100644 --- a/src/panels/config/integrations/ha-config-integrations.ts +++ b/src/panels/config/integrations/ha-config-integrations.ts @@ -124,22 +124,29 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) { private _filterConfigEntries = memoizeOne( (configEntries: ConfigEntry[], filter?: string): ConfigEntry[] => { - configEntries = configEntries.map((configEntry: ConfigEntry) => { - configEntry.domain = domainToName( - this.hass.localize, - configEntry.domain - ); - return configEntry; - }); if (filter) { + let configEntriesSearch: ConfigEntry[] = configEntries.map( + (configEntry: ConfigEntry) => { + return { + ...configEntry, + domain: domainToName(this.hass.localize, configEntry.domain), + }; + } + ); const options: Fuse.FuseOptions = { keys: ["domain", "title"], caseSensitive: false, minMatchCharLength: 2, threshold: 0.2, }; - const fuse = new Fuse(configEntries, options); - configEntries = fuse.search(filter); + const fuse = new Fuse(configEntriesSearch, options); + configEntriesSearch = fuse.search(filter); + configEntries = configEntries.filter( + (configEntry: ConfigEntry) => + configEntriesSearch.findIndex( + (ce: ConfigEntry) => ce.entry_id === configEntry.entry_id + ) !== -1 + ); } return configEntries; } From a6030e2fa31390a865d363872bc9d3aa9c602d5e Mon Sep 17 00:00:00 2001 From: Timmo Date: Thu, 23 Apr 2020 21:55:50 +0100 Subject: [PATCH 11/20] Move search to header when narrow --- .../integrations/ha-config-integrations.ts | 45 ++++++++++++++++--- 1 file changed, 38 insertions(+), 7 deletions(-) diff --git a/src/panels/config/integrations/ha-config-integrations.ts b/src/panels/config/integrations/ha-config-integrations.ts index f018ab36b42a..5bb8dfd2c751 100644 --- a/src/panels/config/integrations/ha-config-integrations.ts +++ b/src/panels/config/integrations/ha-config-integrations.ts @@ -229,6 +229,23 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) { .route=${this.route} .tabs=${configSections.integrations} > + ${this.narrow + ? html` +
+ +
+ +
+ +
+ ` + : ""} -
- -
+ ${!this.narrow + ? html` +
+ +
+ ` + : ""}
${this._showIgnored @@ -760,6 +782,15 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) { margin-bottom: 16px; vertical-align: middle; } + .search-toolbar { + position: relative; + left: -8px; + top: -7px; + display: flex; + align-items: center; + color: var(--secondary-text-color); + padding: 0 16px; + } .search { padding: 2px 16px; } From 4c4dade9e9dc3e0261fd6e944d0020dd897e8a3d Mon Sep 17 00:00:00 2001 From: Timmo Date: Thu, 23 Apr 2020 22:02:56 +0100 Subject: [PATCH 12/20] Cleanup --- src/panels/config/integrations/ha-config-integrations.ts | 8 -------- 1 file changed, 8 deletions(-) diff --git a/src/panels/config/integrations/ha-config-integrations.ts b/src/panels/config/integrations/ha-config-integrations.ts index 5bb8dfd2c751..e73b327a4c7f 100644 --- a/src/panels/config/integrations/ha-config-integrations.ts +++ b/src/panels/config/integrations/ha-config-integrations.ts @@ -66,14 +66,6 @@ interface DataEntryFlowProgressSearch { title: string; } -function mergeArrays(a: string[], b: string[]) { - const jointArray = a.concat(b); - const uniqueArray = jointArray.filter( - (item, index) => jointArray.indexOf(item) === index - ); - return uniqueArray; -} - @customElement("ha-config-integrations") class HaConfigIntegrations extends SubscribeMixin(LitElement) { @property() public hass!: HomeAssistant; From 2bbecd45b099c7ecbb9f7b1953897bb9529f347f Mon Sep 17 00:00:00 2001 From: Timmo Date: Sat, 25 Apr 2020 14:27:14 +0100 Subject: [PATCH 13/20] Add domain_name to ConfigEntry --- src/data/config_entries.ts | 1 + .../integrations/ha-config-integrations.ts | 37 ++++++++----------- 2 files changed, 16 insertions(+), 22 deletions(-) diff --git a/src/data/config_entries.ts b/src/data/config_entries.ts index 527838ff3b3c..f11f288f7dec 100644 --- a/src/data/config_entries.ts +++ b/src/data/config_entries.ts @@ -3,6 +3,7 @@ import { HomeAssistant } from "../types"; export interface ConfigEntry { entry_id: string; domain: string; + domain_name?: string; title: string; source: string; state: string; diff --git a/src/panels/config/integrations/ha-config-integrations.ts b/src/panels/config/integrations/ha-config-integrations.ts index e73b327a4c7f..9b924cfe039e 100644 --- a/src/panels/config/integrations/ha-config-integrations.ts +++ b/src/panels/config/integrations/ha-config-integrations.ts @@ -117,28 +117,14 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) { private _filterConfigEntries = memoizeOne( (configEntries: ConfigEntry[], filter?: string): ConfigEntry[] => { if (filter) { - let configEntriesSearch: ConfigEntry[] = configEntries.map( - (configEntry: ConfigEntry) => { - return { - ...configEntry, - domain: domainToName(this.hass.localize, configEntry.domain), - }; - } - ); const options: Fuse.FuseOptions = { - keys: ["domain", "title"], + keys: ["domain_name", "title"], caseSensitive: false, minMatchCharLength: 2, threshold: 0.2, }; - const fuse = new Fuse(configEntriesSearch, options); - configEntriesSearch = fuse.search(filter); - configEntries = configEntries.filter( - (configEntry: ConfigEntry) => - configEntriesSearch.findIndex( - (ce: ConfigEntry) => ce.entry_id === configEntry.entry_id - ) !== -1 - ); + const fuse = new Fuse(configEntries, options); + configEntries = fuse.search(filter); } return configEntries; } @@ -300,7 +286,7 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) { />

- ${item.domain} + ${item.domain_name}

{ + ? configEntries.map((item: ConfigEntry) => { const devices = this._getDevices(item); const entities = this._getEntities(item); const integrationName = domainToName( @@ -540,9 +526,16 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) { private _loadConfigEntries() { getConfigEntries(this.hass).then((configEntries) => { - this._configEntries = configEntries.sort((conf1, conf2) => - compare(conf1.domain + conf1.title, conf2.domain + conf2.title) - ); + this._configEntries = configEntries + .sort((conf1, conf2) => + compare(conf1.domain + conf1.title, conf2.domain + conf2.title) + ) + .map( + (entry: ConfigEntry): ConfigEntry => ({ + ...entry, + domain_name: domainToName(this.hass.localize, entry.domain), + }) + ); }); } From 76e3c7767d2d8a87c3da1e71bb5b29a5799b4ac4 Mon Sep 17 00:00:00 2001 From: Timmo Date: Sat, 25 Apr 2020 15:15:44 +0100 Subject: [PATCH 14/20] Change in progress to same --- src/data/config_flow.ts | 10 ++++ .../integrations/ha-config-integrations.ts | 58 +++++++++---------- 2 files changed, 39 insertions(+), 29 deletions(-) diff --git a/src/data/config_flow.ts b/src/data/config_flow.ts index fb256ec0fa34..0481c0196663 100644 --- a/src/data/config_flow.ts +++ b/src/data/config_flow.ts @@ -83,5 +83,15 @@ export const localizeConfigFlowTitle = ( args.push(key); args.push(placeholders[key]); }); + console.log( + `localize('component.${flow.handler}.config.flow_title', `, + ...args, + `):`, + localize(`component.${flow.handler}.config.flow_title`, ...args) + ); + console.log( + "localize:", + localize(`component.${flow.handler}.config.flow_title`, ...args) + ); return localize(`component.${flow.handler}.config.flow_title`, ...args); }; diff --git a/src/panels/config/integrations/ha-config-integrations.ts b/src/panels/config/integrations/ha-config-integrations.ts index 9b924cfe039e..96997310f0d8 100644 --- a/src/panels/config/integrations/ha-config-integrations.ts +++ b/src/panels/config/integrations/ha-config-integrations.ts @@ -31,7 +31,7 @@ import { localizeConfigFlowTitle, subscribeConfigFlowInProgress, } from "../../../data/config_flow"; -import { DataEntryFlowProgress } from "../../../data/data_entry_flow"; +import type { DataEntryFlowProgress } from "../../../data/data_entry_flow"; import { DeviceRegistryEntry, subscribeDeviceRegistry, @@ -59,11 +59,8 @@ import { haStyle } from "../../../resources/styles"; import { afterNextRender } from "../../../common/util/render-status"; import "../../../common/search/search-input"; -interface DataEntryFlowProgressSearch { - flow_id: string; - handler: string; - domain: string; - title: string; +interface DataEntryFlowProgressExtended extends DataEntryFlowProgress { + title?: string; } @customElement("ha-config-integrations") @@ -80,7 +77,8 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) { @property() private _configEntries: ConfigEntry[] = []; - @property() private _configEntriesInProgress: DataEntryFlowProgress[] = []; + @property() + private _configEntriesInProgress: DataEntryFlowProgressExtended[] = []; @property() private _entityRegistryEntries: EntityRegistryEntry[] = []; @@ -110,6 +108,16 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) { this.hass.loadBackendTranslation("config", flow.handler); } } + this._configEntriesInProgress = flowsInProgress.map( + (flow: DataEntryFlowProgress): DataEntryFlowProgressExtended => ({ + ...flow, + title: localizeConfigFlowTitle(this.hass.localize, flow), + }) + ); + console.log( + "this._configEntriesInProgress:", + this._configEntriesInProgress + ); }), ]; } @@ -132,32 +140,18 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) { private _filterConfigEntriesInProgress = memoizeOne( ( - configEntriesInProgress: DataEntryFlowProgress[], + configEntriesInProgress: DataEntryFlowProgressExtended[], filter?: string - ): DataEntryFlowProgress[] => { + ): DataEntryFlowProgressExtended[] => { if (filter) { - let configEntriedInProgressSearch: DataEntryFlowProgressSearch[] = configEntriesInProgress.map( - (entry: DataEntryFlowProgress) => ({ - flow_id: entry.flow_id, - handler: entry.handler, - domain: domainToName(this.hass.localize, entry.handler), - title: localizeConfigFlowTitle(this.hass.localize, entry), - }) - ); - const options: Fuse.FuseOptions = { - keys: ["handler", "domain", "title"], + const options: Fuse.FuseOptions = { + keys: ["handler", "title"], caseSensitive: false, minMatchCharLength: 2, threshold: 0.2, }; - const fuse = new Fuse(configEntriedInProgressSearch, options); - configEntriedInProgressSearch = fuse.search(filter); - configEntriesInProgress = configEntriesInProgress.filter( - (entry: DataEntryFlowProgress) => - configEntriedInProgressSearch.findIndex( - (e: DataEntryFlowProgressSearch) => e.flow_id === entry.flow_id - ) !== -1 - ); + const fuse = new Fuse(configEntriesInProgress, options); + configEntriesInProgress = fuse.search(filter); } return configEntriesInProgress; } @@ -199,6 +193,12 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) { this._filter ); + // if (configEntriesInProgress.length) + // console.log( + // "localizeConfigFlowTitle:", + // localizeConfigFlowTitle(this.hass.localize, configEntriesInProgress[0]) + // ); + return html` html` + (flow: DataEntryFlowProgressExtended) => html`
${this.hass.localize( @@ -322,7 +322,7 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) { />

- ${localizeConfigFlowTitle(this.hass.localize, flow)} + ${flow.title}

Date: Sat, 25 Apr 2020 15:19:30 +0100 Subject: [PATCH 15/20] Rebase --- src/panels/config/integrations/ha-config-integrations.ts | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/panels/config/integrations/ha-config-integrations.ts b/src/panels/config/integrations/ha-config-integrations.ts index 96997310f0d8..8ad7f6790b8f 100644 --- a/src/panels/config/integrations/ha-config-integrations.ts +++ b/src/panels/config/integrations/ha-config-integrations.ts @@ -54,9 +54,6 @@ import { SubscribeMixin } from "../../../mixins/subscribe-mixin"; import { haStyle } from "../../../resources/styles"; import { HomeAssistant, Route } from "../../../types"; import { configSections } from "../ha-panel-config"; -import { domainToName } from "../../../data/integration"; -import { haStyle } from "../../../resources/styles"; -import { afterNextRender } from "../../../common/util/render-status"; import "../../../common/search/search-input"; interface DataEntryFlowProgressExtended extends DataEntryFlowProgress { From 956e1a5dce076469be7387391c8db4679e9f85b8 Mon Sep 17 00:00:00 2001 From: Timmo Date: Sat, 25 Apr 2020 16:33:38 +0100 Subject: [PATCH 16/20] Working state --- src/data/config_flow.ts | 10 -------- .../integrations/ha-config-integrations.ts | 24 ++++++------------- 2 files changed, 7 insertions(+), 27 deletions(-) diff --git a/src/data/config_flow.ts b/src/data/config_flow.ts index 0481c0196663..fb256ec0fa34 100644 --- a/src/data/config_flow.ts +++ b/src/data/config_flow.ts @@ -83,15 +83,5 @@ export const localizeConfigFlowTitle = ( args.push(key); args.push(placeholders[key]); }); - console.log( - `localize('component.${flow.handler}.config.flow_title', `, - ...args, - `):`, - localize(`component.${flow.handler}.config.flow_title`, ...args) - ); - console.log( - "localize:", - localize(`component.${flow.handler}.config.flow_title`, ...args) - ); return localize(`component.${flow.handler}.config.flow_title`, ...args); }; diff --git a/src/panels/config/integrations/ha-config-integrations.ts b/src/panels/config/integrations/ha-config-integrations.ts index 8ad7f6790b8f..25d6733cb4cc 100644 --- a/src/panels/config/integrations/ha-config-integrations.ts +++ b/src/panels/config/integrations/ha-config-integrations.ts @@ -105,16 +105,6 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) { this.hass.loadBackendTranslation("config", flow.handler); } } - this._configEntriesInProgress = flowsInProgress.map( - (flow: DataEntryFlowProgress): DataEntryFlowProgressExtended => ({ - ...flow, - title: localizeConfigFlowTitle(this.hass.localize, flow), - }) - ); - console.log( - "this._configEntriesInProgress:", - this._configEntriesInProgress - ); }), ]; } @@ -140,6 +130,12 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) { configEntriesInProgress: DataEntryFlowProgressExtended[], filter?: string ): DataEntryFlowProgressExtended[] => { + configEntriesInProgress = configEntriesInProgress.map( + (flow: DataEntryFlowProgressExtended) => ({ + ...flow, + title: localizeConfigFlowTitle(this.hass.localize, flow), + }) + ); if (filter) { const options: Fuse.FuseOptions = { keys: ["handler", "title"], @@ -190,12 +186,6 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) { this._filter ); - // if (configEntriesInProgress.length) - // console.log( - // "localizeConfigFlowTitle:", - // localizeConfigFlowTitle(this.hass.localize, configEntriesInProgress[0]) - // ); - return html`

- ${flow.title} + ${localizeConfigFlowTitle(this.hass.localize, flow)}

Date: Sat, 25 Apr 2020 16:41:17 +0100 Subject: [PATCH 17/20] Add css --- src/panels/config/integrations/ha-config-integrations.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/panels/config/integrations/ha-config-integrations.ts b/src/panels/config/integrations/ha-config-integrations.ts index 25d6733cb4cc..c719df566dcd 100644 --- a/src/panels/config/integrations/ha-config-integrations.ts +++ b/src/panels/config/integrations/ha-config-integrations.ts @@ -764,7 +764,9 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) { padding: 0 16px; } .search { - padding: 2px 16px; + padding: 0 16px; + background: var(--sidebar-background-color); + border-bottom: 1px solid var(--divider-color); } img { max-height: 60px; From 80c493c72cc18f8686a3b830d36154ada5750e3c Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Mon, 27 Apr 2020 14:24:54 +0200 Subject: [PATCH 18/20] Fix translations loading for configEntriesInProgress --- src/data/config_entries.ts | 1 - .../config/entities/ha-config-entities.ts | 4 + .../integrations/ha-config-integrations.ts | 136 ++++++++++-------- 3 files changed, 81 insertions(+), 60 deletions(-) diff --git a/src/data/config_entries.ts b/src/data/config_entries.ts index f11f288f7dec..527838ff3b3c 100644 --- a/src/data/config_entries.ts +++ b/src/data/config_entries.ts @@ -3,7 +3,6 @@ import { HomeAssistant } from "../types"; export interface ConfigEntry { entry_id: string; domain: string; - domain_name?: string; title: string; source: string; state: string; diff --git a/src/panels/config/entities/ha-config-entities.ts b/src/panels/config/entities/ha-config-entities.ts index 2da4fb17d417..21585f8001fb 100644 --- a/src/panels/config/entities/ha-config-entities.ts +++ b/src/panels/config/entities/ha-config-entities.ts @@ -745,6 +745,10 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) { position: relative; top: 2px; } + .search-toolbar search-input { + margin-left: 8px; + top: 1px; + } .search-toolbar { display: flex; justify-content: space-between; diff --git a/src/panels/config/integrations/ha-config-integrations.ts b/src/panels/config/integrations/ha-config-integrations.ts index c719df566dcd..3178f7562d5b 100644 --- a/src/panels/config/integrations/ha-config-integrations.ts +++ b/src/panels/config/integrations/ha-config-integrations.ts @@ -14,7 +14,10 @@ import memoizeOne from "memoize-one"; import * as Fuse from "fuse.js"; import { compare } from "../../../common/string/compare"; import { computeRTL } from "../../../common/util/compute_rtl"; -import { afterNextRender } from "../../../common/util/render-status"; +import { + afterNextRender, + nextRender, +} from "../../../common/util/render-status"; import "../../../components/entity/ha-state-icon"; import "../../../components/ha-card"; import "../../../components/ha-fab"; @@ -57,7 +60,11 @@ import { configSections } from "../ha-panel-config"; import "../../../common/search/search-input"; interface DataEntryFlowProgressExtended extends DataEntryFlowProgress { - title?: string; + localized_title?: string; +} + +interface ConfigEntryExtended extends ConfigEntry { + localized_domain_name?: string; } @customElement("ha-config-integrations") @@ -72,7 +79,7 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) { @property() public route!: Route; - @property() private _configEntries: ConfigEntry[] = []; + @property() private _configEntries: ConfigEntryExtended[] = []; @property() private _configEntriesInProgress: DataEntryFlowProgressExtended[] = []; @@ -97,31 +104,45 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) { subscribeDeviceRegistry(this.hass.connection, (entries) => { this._deviceRegistryEntries = entries; }), - subscribeConfigFlowInProgress(this.hass, (flowsInProgress) => { - this._configEntriesInProgress = flowsInProgress; - for (const flow of flowsInProgress) { + subscribeConfigFlowInProgress(this.hass, async (flowsInProgress) => { + const translationsPromisses: Promise[] = []; + flowsInProgress.forEach((flow) => { // To render title placeholders if (flow.context.title_placeholders) { - this.hass.loadBackendTranslation("config", flow.handler); + translationsPromisses.push( + this.hass.loadBackendTranslation("config", flow.handler) + ); } - } + }); + await Promise.all(translationsPromisses); + await nextRender(); + this._configEntriesInProgress = flowsInProgress.map((flow) => { + return { + ...flow, + localized_title: localizeConfigFlowTitle(this.hass.localize, flow), + }; + }); }), ]; } private _filterConfigEntries = memoizeOne( - (configEntries: ConfigEntry[], filter?: string): ConfigEntry[] => { - if (filter) { - const options: Fuse.FuseOptions = { - keys: ["domain_name", "title"], - caseSensitive: false, - minMatchCharLength: 2, - threshold: 0.2, - }; - const fuse = new Fuse(configEntries, options); - configEntries = fuse.search(filter); + ( + configEntries: ConfigEntryExtended[], + filter?: string + ): ConfigEntryExtended[] => { + if (!filter) { + return configEntries; } - return configEntries; + const options: Fuse.FuseOptions = { + keys: ["localized_domain_name", "title"], + caseSensitive: false, + minMatchCharLength: 2, + threshold: 0.2, + }; + const fuse = new Fuse(configEntries, options); + const filteredConfigEntries = fuse.search(filter); + return filteredConfigEntries; } ); @@ -136,17 +157,18 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) { title: localizeConfigFlowTitle(this.hass.localize, flow), }) ); - if (filter) { - const options: Fuse.FuseOptions = { - keys: ["handler", "title"], - caseSensitive: false, - minMatchCharLength: 2, - threshold: 0.2, - }; - const fuse = new Fuse(configEntriesInProgress, options); - configEntriesInProgress = fuse.search(filter); + if (!filter) { + return configEntriesInProgress; } - return configEntriesInProgress; + const options: Fuse.FuseOptions = { + keys: ["handler", "localized_title"], + caseSensitive: false, + minMatchCharLength: 2, + threshold: 0.2, + }; + const fuse = new Fuse(configEntriesInProgress, options); + const filteredConfigEntriesInProgress = fuse.search(filter); + return filteredConfigEntriesInProgress; } ); @@ -198,15 +220,13 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) { ? html`
-
- -
+
` @@ -223,11 +243,7 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) { slot="dropdown-trigger" alt="menu" > - + ${this.hass.localize( this._showIgnored @@ -256,7 +272,7 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) { ? configEntries .filter((item) => item.source === "ignore") .map( - (item: ConfigEntry) => html` + (item: ConfigEntryExtended) => html`
${this.hass.localize( @@ -273,7 +289,7 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) { />

- ${item.domain_name} + ${item.localized_domain_name}

- ${localizeConfigFlowTitle(this.hass.localize, flow)} + ${flow.localized_title}

{ + ? configEntries.map((item: ConfigEntryExtended) => { const devices = this._getDevices(item); const entities = this._getEntities(item); - const integrationName = domainToName( - this.hass.localize, - item.domain - ); return item.source === "ignore" ? "" : html` @@ -364,10 +376,10 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) { />

- ${integrationName} + ${item.localized_domain_name}

- ${integrationName === item.title + ${item.localized_domain_name === item.title ? html` ` : item.title}

@@ -518,9 +530,12 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) { compare(conf1.domain + conf1.title, conf2.domain + conf2.title) ) .map( - (entry: ConfigEntry): ConfigEntry => ({ + (entry: ConfigEntry): ConfigEntryExtended => ({ ...entry, - domain_name: domainToName(this.hass.localize, entry.domain), + localized_domain_name: domainToName( + this.hass.localize, + entry.domain + ), }) ); }); @@ -754,20 +769,23 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) { margin-bottom: 16px; vertical-align: middle; } - .search-toolbar { + search-input.header { + display: block; position: relative; left: -8px; top: -7px; - display: flex; - align-items: center; color: var(--secondary-text-color); - padding: 0 16px; + margin-left: 16px; } .search { padding: 0 16px; background: var(--sidebar-background-color); border-bottom: 1px solid var(--divider-color); } + .search search-input { + position: relative; + top: 2px; + } img { max-height: 60px; max-width: 90%; From d55a7915ccc041ee91d4b76936bb2ec0e033265c Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Mon, 27 Apr 2020 14:28:49 +0200 Subject: [PATCH 19/20] Simplify --- src/panels/config/integrations/ha-config-integrations.ts | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/src/panels/config/integrations/ha-config-integrations.ts b/src/panels/config/integrations/ha-config-integrations.ts index 3178f7562d5b..9a47b5c75132 100644 --- a/src/panels/config/integrations/ha-config-integrations.ts +++ b/src/panels/config/integrations/ha-config-integrations.ts @@ -135,14 +135,13 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) { return configEntries; } const options: Fuse.FuseOptions = { - keys: ["localized_domain_name", "title"], + keys: ["domain", "localized_domain_name", "title"], caseSensitive: false, minMatchCharLength: 2, threshold: 0.2, }; const fuse = new Fuse(configEntries, options); - const filteredConfigEntries = fuse.search(filter); - return filteredConfigEntries; + return fuse.search(filter); } ); @@ -167,8 +166,7 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) { threshold: 0.2, }; const fuse = new Fuse(configEntriesInProgress, options); - const filteredConfigEntriesInProgress = fuse.search(filter); - return filteredConfigEntriesInProgress; + return fuse.search(filter); } ); From a4da1954dd97f5f16e66520cb92d3ddb6654d907 Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Mon, 27 Apr 2020 14:37:31 +0200 Subject: [PATCH 20/20] Styling --- .../integrations/ha-config-integrations.ts | 30 ++++++++++--------- 1 file changed, 16 insertions(+), 14 deletions(-) diff --git a/src/panels/config/integrations/ha-config-integrations.ts b/src/panels/config/integrations/ha-config-integrations.ts index 9a47b5c75132..f347ce34da4f 100644 --- a/src/panels/config/integrations/ha-config-integrations.ts +++ b/src/panels/config/integrations/ha-config-integrations.ts @@ -491,20 +491,18 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) { !configEntries.length && this._configEntries.length ? html` - -
-

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

-

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

-
- +
+

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

+

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

+
` : ""} @@ -767,6 +765,10 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) { margin-bottom: 16px; vertical-align: middle; } + .none-found { + margin: auto; + text-align: center; + } search-input.header { display: block; position: relative;