Use ha-alert for error and warning messages in the supervisor panel (#9892)

* Use ha-alert for error and warning messages in the supervisor panel

* use actionText

* Update hassio/src/dialogs/network/dialog-hassio-network.ts

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

Co-authored-by: Bram Kragten <mail@bramkragten.nl>
This commit is contained in:
Joakim Sørensen 2021-08-27 16:45:05 +02:00 committed by GitHub
parent 719f9c28af
commit 67ab63f00e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 71 additions and 64 deletions

View File

@ -13,6 +13,7 @@ import {
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import "web-animations-js/web-animations-next-lite.min"; import "web-animations-js/web-animations-next-lite.min";
import "../../../../src/components/buttons/ha-progress-button"; import "../../../../src/components/buttons/ha-progress-button";
import "../../../../src/components/ha-alert";
import "../../../../src/components/ha-card"; import "../../../../src/components/ha-card";
import { import {
HassioAddonDetails, HassioAddonDetails,
@ -53,7 +54,9 @@ class HassioAddonAudio extends LitElement {
.header=${this.supervisor.localize("addon.configuration.audio.header")} .header=${this.supervisor.localize("addon.configuration.audio.header")}
> >
<div class="card-content"> <div class="card-content">
${this._error ? html` <div class="errors">${this._error}</div> ` : ""} ${this._error
? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
: ""}
<paper-dropdown-menu <paper-dropdown-menu
.label=${this.supervisor.localize( .label=${this.supervisor.localize(
@ -117,10 +120,6 @@ class HassioAddonAudio extends LitElement {
paper-dropdown-menu { paper-dropdown-menu {
display: block; display: block;
} }
.errors {
color: var(--error-color);
margin-bottom: 16px;
}
paper-item { paper-item {
width: 450px; width: 450px;
} }

View File

@ -17,6 +17,7 @@ import { fireEvent } from "../../../../src/common/dom/fire_event";
import "../../../../src/components/buttons/ha-progress-button"; import "../../../../src/components/buttons/ha-progress-button";
import "../../../../src/components/ha-button-menu"; import "../../../../src/components/ha-button-menu";
import "../../../../src/components/ha-card"; import "../../../../src/components/ha-card";
import "../../../../src/components/ha-alert";
import "../../../../src/components/ha-form/ha-form"; import "../../../../src/components/ha-form/ha-form";
import type { HaFormSchema } from "../../../../src/components/ha-form/ha-form"; import type { HaFormSchema } from "../../../../src/components/ha-form/ha-form";
import "../../../../src/components/ha-formfield"; import "../../../../src/components/ha-formfield";
@ -135,17 +136,19 @@ class HassioAddonConfig extends LitElement {
@value-changed=${this._configChanged} @value-changed=${this._configChanged}
.yamlSchema=${ADDON_YAML_SCHEMA} .yamlSchema=${ADDON_YAML_SCHEMA}
></ha-yaml-editor>`} ></ha-yaml-editor>`}
${this._error ? html` <div class="errors">${this._error}</div> ` : ""} ${this._error
? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
: ""}
${!this._yamlMode || ${!this._yamlMode ||
(this._canShowSchema && this.addon.schema) || (this._canShowSchema && this.addon.schema) ||
this._valid this._valid
? "" ? ""
: html` : html`
<div class="errors"> <ha-alert alert-type="error">
${this.supervisor.localize( ${this.supervisor.localize(
"addon.configuration.options.invalid_yaml" "addon.configuration.options.invalid_yaml"
)} )}
</div> </ha-alert>
`} `}
</div> </div>
${hasHiddenOptions ${hasHiddenOptions
@ -324,13 +327,7 @@ class HassioAddonConfig extends LitElement {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }
.errors {
color: var(--error-color);
margin-top: 16px;
}
.syntaxerror {
color: var(--error-color);
}
.card-menu { .card-menu {
float: right; float: right;
z-index: 3; z-index: 3;

View File

@ -10,6 +10,7 @@ import {
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../../../src/common/dom/fire_event"; import { fireEvent } from "../../../../src/common/dom/fire_event";
import "../../../../src/components/buttons/ha-progress-button"; import "../../../../src/components/buttons/ha-progress-button";
import "../../../../src/components/ha-alert";
import "../../../../src/components/ha-card"; import "../../../../src/components/ha-card";
import { import {
HassioAddonDetails, HassioAddonDetails,
@ -62,7 +63,9 @@ class HassioAddonNetwork extends LitElement {
)} )}
> >
<div class="card-content"> <div class="card-content">
${this._error ? html` <div class="errors">${this._error}</div> ` : ""} ${this._error
? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
: ""}
<table> <table>
<tbody> <tbody>
@ -225,10 +228,6 @@ class HassioAddonNetwork extends LitElement {
ha-card { ha-card {
display: block; display: block;
} }
.errors {
color: var(--error-color);
margin-bottom: 16px;
}
.card-actions { .card-actions {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;

View File

@ -1,5 +1,6 @@
import "../../../../src/components/ha-card"; import "../../../../src/components/ha-card";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import "../../../../src/components/ha-alert";
import "../../../../src/components/ha-circular-progress"; import "../../../../src/components/ha-circular-progress";
import "../../../../src/components/ha-markdown"; import "../../../../src/components/ha-markdown";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
@ -38,7 +39,9 @@ class HassioAddonDocumentationDashboard extends LitElement {
return html` return html`
<div class="content"> <div class="content">
<ha-card> <ha-card>
${this._error ? html` <div class="errors">${this._error}</div> ` : ""} ${this._error
? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
: ""}
<div class="card-content"> <div class="card-content">
${this._content ${this._content
? html`<ha-markdown .content=${this._content}></ha-markdown>` ? html`<ha-markdown .content=${this._content}></ha-markdown>`

View File

@ -23,6 +23,7 @@ import { fireEvent } from "../../../../src/common/dom/fire_event";
import { navigate } from "../../../../src/common/navigate"; import { navigate } from "../../../../src/common/navigate";
import "../../../../src/components/buttons/ha-call-api-button"; import "../../../../src/components/buttons/ha-call-api-button";
import "../../../../src/components/buttons/ha-progress-button"; import "../../../../src/components/buttons/ha-progress-button";
import "../../../../src/components/ha-alert";
import "../../../../src/components/ha-card"; import "../../../../src/components/ha-card";
import "../../../../src/components/ha-label-badge"; import "../../../../src/components/ha-label-badge";
import "../../../../src/components/ha-markdown"; import "../../../../src/components/ha-markdown";
@ -143,14 +144,14 @@ class HassioAddonInfo extends LitElement {
this.addon.arch this.addon.arch
) )
? html` ? html`
<p class="warning"> <ha-alert alert-type="warning">
${this.supervisor.localize( ${this.supervisor.localize(
"addon.dashboard.not_available_arch" "addon.dashboard.not_available_arch"
)} )}
</p> </ha-alert>
` `
: html` : html`
<p class="warning"> <ha-alert alert-type="warning">
${this.supervisor.localize( ${this.supervisor.localize(
"addon.dashboard.not_available_arch", "addon.dashboard.not_available_arch",
"core_version_installed", "core_version_installed",
@ -158,7 +159,7 @@ class HassioAddonInfo extends LitElement {
"core_version_needed", "core_version_needed",
addonStoreInfo.homeassistant addonStoreInfo.homeassistant
)} )}
</p> </ha-alert>
` `
: ""} : ""}
</div> </div>
@ -569,21 +570,23 @@ class HassioAddonInfo extends LitElement {
: ""} : ""}
</div> </div>
</div> </div>
${this._error ? html` <div class="errors">${this._error}</div> ` : ""} ${this._error
? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
: ""}
${!this.addon.version && addonStoreInfo && !this.addon.available ${!this.addon.version && addonStoreInfo && !this.addon.available
? !addonArchIsSupported( ? !addonArchIsSupported(
this.supervisor.info.supported_arch, this.supervisor.info.supported_arch,
this.addon.arch this.addon.arch
) )
? html` ? html`
<p class="warning"> <ha-alert alert-type="warning">
${this.supervisor.localize( ${this.supervisor.localize(
"addon.dashboard.not_available_arch" "addon.dashboard.not_available_arch"
)} )}
</p> </ha-alert>
` `
: html` : html`
<p class="warning"> <ha-alert alert-type="warning">
${this.supervisor.localize( ${this.supervisor.localize(
"addon.dashboard.not_available_version", "addon.dashboard.not_available_version",
"core_version_installed", "core_version_installed",
@ -591,7 +594,7 @@ class HassioAddonInfo extends LitElement {
"core_version_needed", "core_version_needed",
addonStoreInfo!.homeassistant addonStoreInfo!.homeassistant
)} )}
</p> </ha-alert>
` `
: ""} : ""}
</div> </div>

View File

@ -1,6 +1,7 @@
import "@material/mwc-button"; import "@material/mwc-button";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import "../../../../src/components/ha-alert";
import "../../../../src/components/ha-card"; import "../../../../src/components/ha-card";
import { import {
fetchHassioAddonLogs, fetchHassioAddonLogs,
@ -34,7 +35,9 @@ class HassioAddonLogs extends LitElement {
return html` return html`
<h1>${this.addon.name}</h1> <h1>${this.addon.name}</h1>
<ha-card> <ha-card>
${this._error ? html` <div class="errors">${this._error}</div> ` : ""} ${this._error
? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
: ""}
<div class="card-content"> <div class="card-content">
${this._content ${this._content
? html`<hassio-ansi-to-html ? html`<hassio-ansi-to-html
@ -60,10 +63,6 @@ class HassioAddonLogs extends LitElement {
ha-card { ha-card {
display: block; display: block;
} }
.errors {
color: var(--error-color);
margin-bottom: 16px;
}
`, `,
]; ];
} }

View File

@ -6,6 +6,7 @@ import { customElement, property, query, state } from "lit/decorators";
import { fireEvent } from "../../../../src/common/dom/fire_event"; import { fireEvent } from "../../../../src/common/dom/fire_event";
import { slugify } from "../../../../src/common/string/slugify"; import { slugify } from "../../../../src/common/string/slugify";
import "../../../../src/components/buttons/ha-progress-button"; import "../../../../src/components/buttons/ha-progress-button";
import "../../../../src/components/ha-alert";
import "../../../../src/components/ha-button-menu"; import "../../../../src/components/ha-button-menu";
import "../../../../src/components/ha-header-bar"; import "../../../../src/components/ha-header-bar";
import "../../../../src/components/ha-svg-icon"; import "../../../../src/components/ha-svg-icon";
@ -89,7 +90,9 @@ class HassioBackupDialog
.localize=${this._dialogParams.localize} .localize=${this._dialogParams.localize}
> >
</supervisor-backup-content>`} </supervisor-backup-content>`}
${this._error ? html`<p class="error">Error: ${this._error}</p>` : ""} ${this._error
? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
: ""}
<mwc-button <mwc-button
.disabled=${this._restoringBackup} .disabled=${this._restoringBackup}

View File

@ -2,6 +2,7 @@ import "@material/mwc-button";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, query, state } from "lit/decorators"; import { customElement, property, query, state } from "lit/decorators";
import { fireEvent } from "../../../../src/common/dom/fire_event"; import { fireEvent } from "../../../../src/common/dom/fire_event";
import "../../../../src/components/ha-alert";
import "../../../../src/components/buttons/ha-progress-button"; import "../../../../src/components/buttons/ha-progress-button";
import { createCloseHeading } from "../../../../src/components/ha-dialog"; import { createCloseHeading } from "../../../../src/components/ha-dialog";
import { extractApiErrorMessage } from "../../../../src/data/hassio/common"; import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
@ -62,7 +63,9 @@ class HassioCreateBackupDialog extends LitElement {
.supervisor=${this._dialogParams.supervisor} .supervisor=${this._dialogParams.supervisor}
> >
</supervisor-backup-content>`} </supervisor-backup-content>`}
${this._error ? html`<p class="error">Error: ${this._error}</p>` : ""} ${this._error
? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
: ""}
<mwc-button slot="secondaryAction" @click=${this.closeDialog}> <mwc-button slot="secondaryAction" @click=${this.closeDialog}>
${this._dialogParams.supervisor.localize("common.close")} ${this._dialogParams.supervisor.localize("common.close")}
</mwc-button> </mwc-button>

View File

@ -10,6 +10,7 @@ import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import { cache } from "lit/directives/cache"; import { cache } from "lit/directives/cache";
import { fireEvent } from "../../../../src/common/dom/fire_event"; import { fireEvent } from "../../../../src/common/dom/fire_event";
import "../../../../src/components/ha-alert";
import "../../../../src/components/ha-circular-progress"; import "../../../../src/components/ha-circular-progress";
import "../../../../src/components/ha-dialog"; import "../../../../src/components/ha-dialog";
import "../../../../src/components/ha-expansion-panel"; import "../../../../src/components/ha-expansion-panel";
@ -251,9 +252,9 @@ export class DialogHassioNetwork
` `
: ""} : ""}
${this._dirty ${this._dirty
? html`<div class="warning"> ? html`<ha-alert alert-type="warning">
${this.supervisor.localize("dialog.network.warning")} ${this.supervisor.localize("dialog.network.warning")}
</div>` </ha-alert>`
: ""} : ""}
</div> </div>
<div class="buttons"> <div class="buttons">

View File

@ -9,6 +9,7 @@ import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, query, state } from "lit/decorators"; import { customElement, property, query, state } from "lit/decorators";
import memoizeOne from "memoize-one"; import memoizeOne from "memoize-one";
import { fireEvent } from "../../../../src/common/dom/fire_event"; import { fireEvent } from "../../../../src/common/dom/fire_event";
import "../../../../src/components/ha-alert";
import "../../../../src/components/ha-circular-progress"; import "../../../../src/components/ha-circular-progress";
import { createCloseHeading } from "../../../../src/components/ha-dialog"; import { createCloseHeading } from "../../../../src/components/ha-dialog";
import "../../../../src/components/ha-svg-icon"; import "../../../../src/components/ha-svg-icon";
@ -75,7 +76,9 @@ class HassioRepositoriesDialog extends LitElement {
this._dialogParams!.supervisor.localize("dialog.repositories.title") this._dialogParams!.supervisor.localize("dialog.repositories.title")
)} )}
> >
${this._error ? html`<div class="error">${this._error}</div>` : ""} ${this._error
? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
: ""}
<div class="form"> <div class="form">
${repositories.length ${repositories.length
? repositories.map( ? repositories.map(

View File

@ -2,6 +2,7 @@ import "@material/mwc-button/mwc-button";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, state } from "lit/decorators"; import { customElement, state } from "lit/decorators";
import { fireEvent } from "../../../../src/common/dom/fire_event"; import { fireEvent } from "../../../../src/common/dom/fire_event";
import "../../../../src/components/ha-alert";
import "../../../../src/components/ha-circular-progress"; import "../../../../src/components/ha-circular-progress";
import "../../../../src/components/ha-dialog"; import "../../../../src/components/ha-dialog";
import "../../../../src/components/ha-settings-row"; import "../../../../src/components/ha-settings-row";
@ -128,7 +129,9 @@ class DialogSupervisorUpdate extends LitElement {
this._dialogParams.name this._dialogParams.name
)} )}
</p>`} </p>`}
${this._error ? html`<p class="error">${this._error}</p>` : ""} ${this._error
? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
: ""}
</ha-dialog> </ha-dialog>
`; `;
} }

View File

@ -3,6 +3,7 @@ import { customElement, property, state } from "lit/decorators";
import { atLeastVersion } from "../../../src/common/config/version"; import { atLeastVersion } from "../../../src/common/config/version";
import { fireEvent } from "../../../src/common/dom/fire_event"; import { fireEvent } from "../../../src/common/dom/fire_event";
import "../../../src/components/buttons/ha-progress-button"; import "../../../src/components/buttons/ha-progress-button";
import "../../../src/components/ha-alert";
import "../../../src/components/ha-card"; import "../../../src/components/ha-card";
import "../../../src/components/ha-settings-row"; import "../../../src/components/ha-settings-row";
import "../../../src/components/ha-switch"; import "../../../src/components/ha-switch";
@ -170,31 +171,25 @@ class HassioSupervisorInfo extends LitElement {
></ha-switch> ></ha-switch>
</ha-settings-row>` </ha-settings-row>`
: "" : ""
: html`<div class="error"> : html`<ha-alert
alert-type="warning"
.actionText=${this.supervisor.localize("common.learn_more")}
@alert-action-clicked=${this._unsupportedDialog}
>
${this.supervisor.localize( ${this.supervisor.localize(
"system.supervisor.unsupported_title" "system.supervisor.unsupported_title"
)} )}
<button </ha-alert>`}
class="link"
.title=${this.supervisor.localize("common.learn_more")}
@click=${this._unsupportedDialog}
>
Learn more
</button>
</div>`}
${!this.supervisor.supervisor.healthy ${!this.supervisor.supervisor.healthy
? html`<div class="error"> ? html`<ha-alert
alert-type="error"
.actionText=${this.supervisor.localize("common.learn_more")}
@alert-action-clicked=${this._unhealthyDialog}
>
${this.supervisor.localize( ${this.supervisor.localize(
"system.supervisor.unhealthy_title" "system.supervisor.unhealthy_title"
)} )}
<button </ha-alert>`
class="link"
.title=${this.supervisor.localize("common.learn_more")}
@click=${this._unhealthyDialog}
>
Learn more
</button>
</div>`
: ""} : ""}
</div> </div>
<div class="metrics-block"> <div class="metrics-block">

View File

@ -5,6 +5,7 @@ import "@polymer/paper-listbox/paper-listbox";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import "../../../src/components/buttons/ha-progress-button"; import "../../../src/components/buttons/ha-progress-button";
import "../../../src/components/ha-alert";
import "../../../src/components/ha-card"; import "../../../src/components/ha-card";
import { extractApiErrorMessage } from "../../../src/data/hassio/common"; import { extractApiErrorMessage } from "../../../src/data/hassio/common";
import { fetchHassioLogs } from "../../../src/data/hassio/supervisor"; import { fetchHassioLogs } from "../../../src/data/hassio/supervisor";
@ -67,7 +68,9 @@ class HassioSupervisorLog extends LitElement {
protected render(): TemplateResult | void { protected render(): TemplateResult | void {
return html` return html`
<ha-card> <ha-card>
${this._error ? html` <div class="errors">${this._error}</div> ` : ""} ${this._error
? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
: ""}
${this.hass.userData?.showAdvanced ${this.hass.userData?.showAdvanced
? html` ? html`
<paper-dropdown-menu <paper-dropdown-menu
@ -154,10 +157,6 @@ class HassioSupervisorLog extends LitElement {
padding: 0 2%; padding: 0 2%;
width: 96%; width: 96%;
} }
.errors {
color: var(--error-color);
margin-bottom: 16px;
}
`, `,
]; ];
} }