mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-25 18:26:35 +00:00
Improve error messages in config entries (#20934)
* Improve error messages and test completely * Add css back * Revert ha-alert changes * Update src/panels/config/integrations/ha-config-integration-page.ts --------- Co-authored-by: Paul Bottein <paul.bottein@gmail.com>
This commit is contained in:
Simon Lamon
GitHub
parent
9f6afb162a
commit
250f87cfd8
@ -453,7 +453,7 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
|
|||||||
const attention = ATTENTION_SOURCES.includes(
|
const attention = ATTENTION_SOURCES.includes(
|
||||||
flow.context.source
|
flow.context.source
|
||||||
);
|
);
|
||||||
return html`<ha-list-item-new
|
return html` <ha-list-item-new
|
||||||
class="config_entry ${attention ? "attention" : ""}"
|
class="config_entry ${attention ? "attention" : ""}"
|
||||||
>
|
>
|
||||||
${flow.localized_title}
|
${flow.localized_title}
|
||||||
@ -477,8 +477,15 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
|
|||||||
></ha-button>
|
></ha-button>
|
||||||
</ha-list-item-new>`;
|
</ha-list-item-new>`;
|
||||||
})}
|
})}
|
||||||
${attentionEntries.map((item) =>
|
${attentionEntries.map(
|
||||||
this._renderConfigEntry(item)
|
(item, index) =>
|
||||||
|
html`${this._renderConfigEntry(item)}
|
||||||
|
${index < attentionEntries.length - 1
|
||||||
|
? html` <md-divider
|
||||||
|
role="separator"
|
||||||
|
tabindex="-1"
|
||||||
|
></md-divider>`
|
||||||
|
: ""} `
|
||||||
)}
|
)}
|
||||||
</ha-list-new>
|
</ha-list-new>
|
||||||
</ha-card>`
|
</ha-card>`
|
||||||
@ -502,7 +509,16 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
|
|||||||
</div>`
|
</div>`
|
||||||
: nothing}
|
: nothing}
|
||||||
<ha-list-new>
|
<ha-list-new>
|
||||||
${normalEntries.map((item) => this._renderConfigEntry(item))}
|
${normalEntries.map(
|
||||||
|
(item, index) =>
|
||||||
|
html`${this._renderConfigEntry(item)}
|
||||||
|
${index < normalEntries.length - 1
|
||||||
|
? html` <md-divider
|
||||||
|
role="separator"
|
||||||
|
tabindex="-1"
|
||||||
|
></md-divider>`
|
||||||
|
: ""} `
|
||||||
|
)}
|
||||||
</ha-list-new>
|
</ha-list-new>
|
||||||
<div class="card-actions">
|
<div class="card-actions">
|
||||||
<ha-button @click=${this._addIntegration}>
|
<ha-button @click=${this._addIntegration}>
|
||||||
@ -667,19 +683,21 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
|
|||||||
|
|
||||||
const configPanel = this._configPanel(item.domain, this.hass.panels);
|
const configPanel = this._configPanel(item.domain, this.hass.panels);
|
||||||
|
|
||||||
return html`<ha-list-item-new
|
return html` <ha-list-item-new
|
||||||
class=${classMap({
|
class=${classMap({
|
||||||
config_entry: true,
|
config_entry: true,
|
||||||
"state-not-loaded": item!.state === "not_loaded",
|
"state-not-loaded": item!.state === "not_loaded",
|
||||||
"state-failed-unload": item!.state === "failed_unload",
|
"state-failed-unload": item!.state === "failed_unload",
|
||||||
"state-setup": item!.state === "setup_in_progress",
|
"state-setup": item!.state === "setup_in_progress",
|
||||||
"state-error": ERROR_STATES.includes(item!.state),
|
"state-error": ERROR_STATES.includes(item!.state),
|
||||||
|
"state-disabled": item.disabled_by !== null,
|
||||||
})}
|
})}
|
||||||
data-entry-id=${item.entry_id}
|
data-entry-id=${item.entry_id}
|
||||||
.disabled=${item.disabled_by}
|
|
||||||
.configEntry=${item}
|
.configEntry=${item}
|
||||||
>
|
>
|
||||||
${item.title || domainToName(this.hass.localize, item.domain)}
|
<div slot="headline">
|
||||||
|
${item.title || domainToName(this.hass.localize, item.domain)}
|
||||||
|
</div>
|
||||||
<div slot="supporting-text">
|
<div slot="supporting-text">
|
||||||
<div>${devicesLine}</div>
|
<div>${devicesLine}</div>
|
||||||
${stateText
|
${stateText
|
||||||
@ -726,67 +744,62 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
|
|||||||
.path=${mdiDotsVertical}
|
.path=${mdiDotsVertical}
|
||||||
></ha-icon-button>
|
></ha-icon-button>
|
||||||
${item.supports_options && stateText
|
${item.supports_options && stateText
|
||||||
? html`<ha-list-item
|
? html`<ha-menu-item @click=${this._showOptions}>
|
||||||
@request-selected=${this._showOptions}
|
<ha-svg-icon slot="start" .path=${mdiCog}></ha-svg-icon>
|
||||||
graphic="icon"
|
|
||||||
>
|
|
||||||
<ha-svg-icon slot="graphic" .path=${mdiCog}></ha-svg-icon>
|
|
||||||
${this.hass.localize(
|
${this.hass.localize(
|
||||||
"ui.panel.config.integrations.config_entry.configure"
|
"ui.panel.config.integrations.config_entry.configure"
|
||||||
)}
|
)}
|
||||||
</ha-list-item>`
|
</ha-menu-item>`
|
||||||
: ""}
|
: ""}
|
||||||
${item.disabled_by && devices.length
|
${item.disabled_by && devices.length
|
||||||
? html`<a
|
? html`
|
||||||
href=${devices.length === 1
|
<ha-menu-item
|
||||||
? `/config/devices/device/${devices[0].id}`
|
.href=${devices.length === 1
|
||||||
: `/config/devices/dashboard?historyBack=1&config_entry=${item.entry_id}`}
|
? `/config/devices/device/${devices[0].id}`
|
||||||
>
|
: `/config/devices/dashboard?historyBack=1&config_entry=${item.entry_id}`}
|
||||||
<ha-list-item hasMeta graphic="icon">
|
>
|
||||||
<ha-svg-icon .path=${mdiDevices} slot="graphic"></ha-svg-icon>
|
<ha-svg-icon .path=${mdiDevices} slot="start"></ha-svg-icon>
|
||||||
${this.hass.localize(
|
${this.hass.localize(
|
||||||
`ui.panel.config.integrations.config_entry.devices`,
|
`ui.panel.config.integrations.config_entry.devices`,
|
||||||
{ count: devices.length }
|
{ count: devices.length }
|
||||||
)}
|
)}
|
||||||
<ha-icon-next slot="meta"></ha-icon-next>
|
<ha-icon-next slot="end"></ha-icon-next>
|
||||||
</ha-list-item>
|
</ha-menu-item>
|
||||||
</a>`
|
`
|
||||||
: ""}
|
: ""}
|
||||||
${item.disabled_by && services.length
|
${item.disabled_by && services.length
|
||||||
? html`<a
|
? html`<ha-menu-item
|
||||||
href=${services.length === 1
|
.href=${services.length === 1
|
||||||
? `/config/devices/device/${services[0].id}`
|
? `/config/devices/device/${services[0].id}`
|
||||||
: `/config/devices/dashboard?historyBack=1&config_entry=${item.entry_id}`}
|
: `/config/devices/dashboard?historyBack=1&config_entry=${item.entry_id}`}
|
||||||
>
|
>
|
||||||
<ha-list-item hasMeta graphic="icon">
|
<ha-svg-icon
|
||||||
<ha-svg-icon
|
.path=${mdiHandExtendedOutline}
|
||||||
.path=${mdiHandExtendedOutline}
|
slot="start"
|
||||||
slot="graphic"
|
></ha-svg-icon>
|
||||||
></ha-svg-icon>
|
${this.hass.localize(
|
||||||
${this.hass.localize(
|
`ui.panel.config.integrations.config_entry.services`,
|
||||||
`ui.panel.config.integrations.config_entry.services`,
|
{ count: services.length }
|
||||||
{ count: services.length }
|
)}
|
||||||
)}
|
<ha-icon-next slot="end"></ha-icon-next>
|
||||||
<ha-icon-next slot="meta"></ha-icon-next>
|
</ha-menu-item> `
|
||||||
</ha-list-item>
|
|
||||||
</a>`
|
|
||||||
: ""}
|
: ""}
|
||||||
${item.disabled_by && entities.length
|
${item.disabled_by && entities.length
|
||||||
? html`<a
|
? html`
|
||||||
href=${`/config/entities?historyBack=1&config_entry=${item.entry_id}`}
|
<ha-menu-item
|
||||||
>
|
.href=${`/config/entities?historyBack=1&config_entry=${item.entry_id}`}
|
||||||
<ha-list-item hasMeta graphic="icon">
|
>
|
||||||
<ha-svg-icon
|
<ha-svg-icon
|
||||||
.path=${mdiShapeOutline}
|
.path=${mdiShapeOutline}
|
||||||
slot="graphic"
|
slot="start"
|
||||||
></ha-svg-icon>
|
></ha-svg-icon>
|
||||||
${this.hass.localize(
|
${this.hass.localize(
|
||||||
`ui.panel.config.integrations.config_entry.entities`,
|
`ui.panel.config.integrations.config_entry.entities`,
|
||||||
{ count: entities.length }
|
{ count: entities.length }
|
||||||
)}
|
)}
|
||||||
<ha-icon-next slot="meta"></ha-icon-next>
|
<ha-icon-next slot="end"></ha-icon-next>
|
||||||
</ha-list-item>
|
</ha-menu-item>
|
||||||
</a>`
|
`
|
||||||
: ""}
|
: ""}
|
||||||
${!item.disabled_by &&
|
${!item.disabled_by &&
|
||||||
RECOVERABLE_STATES.includes(item.state) &&
|
RECOVERABLE_STATES.includes(item.state) &&
|
||||||
@ -814,7 +827,7 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
|
|||||||
${this._diagnosticHandler && item.state === "loaded"
|
${this._diagnosticHandler && item.state === "loaded"
|
||||||
? html`
|
? html`
|
||||||
<ha-menu-item
|
<ha-menu-item
|
||||||
href=${getConfigEntryDiagnosticsDownloadUrl(item.entry_id)}
|
.href=${getConfigEntryDiagnosticsDownloadUrl(item.entry_id)}
|
||||||
target="_blank"
|
target="_blank"
|
||||||
@click=${this._signUrl}
|
@click=${this._signUrl}
|
||||||
>
|
>
|
||||||
@ -1402,18 +1415,8 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
|
|||||||
margin-top: 16px;
|
margin-top: 16px;
|
||||||
}
|
}
|
||||||
ha-list-item-new.discovered {
|
ha-list-item-new.discovered {
|
||||||
--mdc-list-item-meta-size: auto;
|
|
||||||
--mdc-list-item-meta-display: flex;
|
|
||||||
height: 72px;
|
height: 72px;
|
||||||
}
|
}
|
||||||
ha-list-item-new.config_entry {
|
|
||||||
overflow: visible;
|
|
||||||
--mdc-list-item-meta-size: auto;
|
|
||||||
--mdc-list-item-meta-display: flex;
|
|
||||||
}
|
|
||||||
ha-button-menu-new ha-menu-item {
|
|
||||||
--mdc-icon-size: 24px;
|
|
||||||
}
|
|
||||||
ha-list-item-new.config_entry::after {
|
ha-list-item-new.config_entry::after {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 8px;
|
top: 8px;
|
||||||
@ -1424,9 +1427,6 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
|
|||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
content: "";
|
content: "";
|
||||||
}
|
}
|
||||||
ha-button-menu-new {
|
|
||||||
flex: 0;
|
|
||||||
}
|
|
||||||
a {
|
a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
@ -1483,6 +1483,10 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
|
.state-disabled [slot="headline"],
|
||||||
|
.state-disabled [slot="supporting-text"] {
|
||||||
|
opacity: var(--md-list-item-disabled-opacity, 0.3);
|
||||||
|
}
|
||||||
ha-list-new {
|
ha-list-new {
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user