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>
2025-07-28 11:46:42 +00:00 · 2021-08-27 16:45:05 +02:00 · 2021-08-27 16:45:05 +02:00 · 67ab63f00e
commit 67ab63f00e
parent 719f9c28af
13 changed files with 71 additions and 64 deletions
--- a/hassio/src/addon-view/config/hassio-addon-audio.ts
+++ b/hassio/src/addon-view/config/hassio-addon-audio.ts
@ -13,6 +13,7 @@ import {
 import { customElement, property, state } from "lit/decorators";
 import "web-animations-js/web-animations-next-lite.min";
 import "../../../../src/components/buttons/ha-progress-button";
+import "../../../../src/components/ha-alert";
 import "../../../../src/components/ha-card";
 import {
  HassioAddonDetails,
@ -53,7 +54,9 @@ class HassioAddonAudio extends LitElement {
        .header=${this.supervisor.localize("addon.configuration.audio.header")}
      >
        <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
            .label=${this.supervisor.localize(
@ -117,10 +120,6 @@ class HassioAddonAudio extends LitElement {
        paper-dropdown-menu {
          display: block;
        }
-        .errors {
-          color: var(--error-color);
-          margin-bottom: 16px;
-        }
        paper-item {
          width: 450px;
        }
--- a/hassio/src/addon-view/config/hassio-addon-config.ts
+++ b/hassio/src/addon-view/config/hassio-addon-config.ts
@ -17,6 +17,7 @@ import { fireEvent } from "../../../../src/common/dom/fire_event";
 import "../../../../src/components/buttons/ha-progress-button";
 import "../../../../src/components/ha-button-menu";
 import "../../../../src/components/ha-card";
+import "../../../../src/components/ha-alert";
 import "../../../../src/components/ha-form/ha-form";
 import type { HaFormSchema } from "../../../../src/components/ha-form/ha-form";
 import "../../../../src/components/ha-formfield";
@ -135,17 +136,19 @@ class HassioAddonConfig extends LitElement {
                @value-changed=${this._configChanged}
                .yamlSchema=${ADDON_YAML_SCHEMA}
              ></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._canShowSchema && this.addon.schema) ||
          this._valid
            ? ""
            : html`
-                <div class="errors">
+                <ha-alert alert-type="error">
                  ${this.supervisor.localize(
                    "addon.configuration.options.invalid_yaml"
                  )}
-                </div>
+                </ha-alert>
              `}
        </div>
        ${hasHiddenOptions
@ -324,13 +327,7 @@ class HassioAddonConfig extends LitElement {
          display: flex;
          justify-content: space-between;
        }
-        .errors {
-          color: var(--error-color);
-          margin-top: 16px;
-        }
-        .syntaxerror {
-          color: var(--error-color);
-        }
+
        .card-menu {
          float: right;
          z-index: 3;
--- a/hassio/src/addon-view/config/hassio-addon-network.ts
+++ b/hassio/src/addon-view/config/hassio-addon-network.ts
@ -10,6 +10,7 @@ import {
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
 import "../../../../src/components/buttons/ha-progress-button";
+import "../../../../src/components/ha-alert";
 import "../../../../src/components/ha-card";
 import {
  HassioAddonDetails,
@ -62,7 +63,9 @@ class HassioAddonNetwork extends LitElement {
        )}
      >
        <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>
            <tbody>
@ -225,10 +228,6 @@ class HassioAddonNetwork extends LitElement {
        ha-card {
          display: block;
        }
-        .errors {
-          color: var(--error-color);
-          margin-bottom: 16px;
-        }
        .card-actions {
          display: flex;
          justify-content: space-between;
--- a/hassio/src/addon-view/documentation/hassio-addon-documentation-tab.ts
+++ b/hassio/src/addon-view/documentation/hassio-addon-documentation-tab.ts
@ -1,5 +1,6 @@
 import "../../../../src/components/ha-card";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import "../../../../src/components/ha-alert";
 import "../../../../src/components/ha-circular-progress";
 import "../../../../src/components/ha-markdown";
 import { customElement, property, state } from "lit/decorators";
@ -38,7 +39,9 @@ class HassioAddonDocumentationDashboard extends LitElement {
    return html`
      <div class="content">
        <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">
            ${this._content
              ? html`<ha-markdown .content=${this._content}></ha-markdown>`
--- a/hassio/src/addon-view/info/hassio-addon-info.ts
+++ b/hassio/src/addon-view/info/hassio-addon-info.ts
@ -23,6 +23,7 @@ import { fireEvent } from "../../../../src/common/dom/fire_event";
 import { navigate } from "../../../../src/common/navigate";
 import "../../../../src/components/buttons/ha-call-api-button";
 import "../../../../src/components/buttons/ha-progress-button";
+import "../../../../src/components/ha-alert";
 import "../../../../src/components/ha-card";
 import "../../../../src/components/ha-label-badge";
 import "../../../../src/components/ha-markdown";
@ -143,14 +144,14 @@ class HassioAddonInfo extends LitElement {
                      this.addon.arch
                    )
                    ? html`
-                        <p class="warning">
+                        <ha-alert alert-type="warning">
                          ${this.supervisor.localize(
                            "addon.dashboard.not_available_arch"
                          )}
-                        </p>
+                        </ha-alert>
                      `
                    : html`
-                        <p class="warning">
+                        <ha-alert alert-type="warning">
                          ${this.supervisor.localize(
                            "addon.dashboard.not_available_arch",
                            "core_version_installed",
@ -158,7 +159,7 @@ class HassioAddonInfo extends LitElement {
                            "core_version_needed",
                            addonStoreInfo.homeassistant
                          )}
-                        </p>
+                        </ha-alert>
                      `
                  : ""}
              </div>
@ -569,21 +570,23 @@ class HassioAddonInfo extends LitElement {
                : ""}
            </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
            ? !addonArchIsSupported(
                this.supervisor.info.supported_arch,
                this.addon.arch
              )
              ? html`
-                  <p class="warning">
+                  <ha-alert alert-type="warning">
                    ${this.supervisor.localize(
                      "addon.dashboard.not_available_arch"
                    )}
-                  </p>
+                  </ha-alert>
                `
              : html`
-                  <p class="warning">
+                  <ha-alert alert-type="warning">
                    ${this.supervisor.localize(
                      "addon.dashboard.not_available_version",
                      "core_version_installed",
@ -591,7 +594,7 @@ class HassioAddonInfo extends LitElement {
                      "core_version_needed",
                      addonStoreInfo!.homeassistant
                    )}
-                  </p>
+                  </ha-alert>
                `
            : ""}
        </div>
--- a/hassio/src/addon-view/log/hassio-addon-logs.ts
+++ b/hassio/src/addon-view/log/hassio-addon-logs.ts
@ -1,6 +1,7 @@
 import "@material/mwc-button";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import "../../../../src/components/ha-alert";
 import "../../../../src/components/ha-card";
 import {
  fetchHassioAddonLogs,
@ -34,7 +35,9 @@ class HassioAddonLogs extends LitElement {
    return html`
      <h1>${this.addon.name}</h1>
      <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">
          ${this._content
            ? html`<hassio-ansi-to-html
@ -60,10 +63,6 @@ class HassioAddonLogs extends LitElement {
        ha-card {
          display: block;
        }
-        .errors {
-          color: var(--error-color);
-          margin-bottom: 16px;
-        }
      `,
    ];
  }
--- a/hassio/src/dialogs/backup/dialog-hassio-backup.ts
+++ b/hassio/src/dialogs/backup/dialog-hassio-backup.ts
@ -6,6 +6,7 @@ import { customElement, property, query, state } from "lit/decorators";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
 import { slugify } from "../../../../src/common/string/slugify";
 import "../../../../src/components/buttons/ha-progress-button";
+import "../../../../src/components/ha-alert";
 import "../../../../src/components/ha-button-menu";
 import "../../../../src/components/ha-header-bar";
 import "../../../../src/components/ha-svg-icon";
@ -89,7 +90,9 @@ class HassioBackupDialog
              .localize=${this._dialogParams.localize}
            >
            </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
          .disabled=${this._restoringBackup}
--- a/hassio/src/dialogs/backup/dialog-hassio-create-backup.ts
+++ b/hassio/src/dialogs/backup/dialog-hassio-create-backup.ts
@ -2,6 +2,7 @@ import "@material/mwc-button";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
+import "../../../../src/components/ha-alert";
 import "../../../../src/components/buttons/ha-progress-button";
 import { createCloseHeading } from "../../../../src/components/ha-dialog";
 import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
@ -62,7 +63,9 @@ class HassioCreateBackupDialog extends LitElement {
              .supervisor=${this._dialogParams.supervisor}
            >
            </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}>
          ${this._dialogParams.supervisor.localize("common.close")}
        </mwc-button>
--- a/hassio/src/dialogs/network/dialog-hassio-network.ts
+++ b/hassio/src/dialogs/network/dialog-hassio-network.ts
@ -10,6 +10,7 @@ import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { cache } from "lit/directives/cache";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
+import "../../../../src/components/ha-alert";
 import "../../../../src/components/ha-circular-progress";
 import "../../../../src/components/ha-dialog";
 import "../../../../src/components/ha-expansion-panel";
@ -251,9 +252,9 @@ export class DialogHassioNetwork
            `
          : ""}
        ${this._dirty
-          ? html`<div class="warning">
+          ? html`<ha-alert alert-type="warning">
              ${this.supervisor.localize("dialog.network.warning")}
-            </div>`
+            </ha-alert>`
          : ""}
      </div>
      <div class="buttons">
--- a/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts
+++ b/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts
@ -9,6 +9,7 @@ import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
+import "../../../../src/components/ha-alert";
 import "../../../../src/components/ha-circular-progress";
 import { createCloseHeading } from "../../../../src/components/ha-dialog";
 import "../../../../src/components/ha-svg-icon";
@ -75,7 +76,9 @@ class HassioRepositoriesDialog extends LitElement {
          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">
          ${repositories.length
            ? repositories.map(
--- a/hassio/src/dialogs/update/dialog-supervisor-update.ts
+++ b/hassio/src/dialogs/update/dialog-supervisor-update.ts
@ -2,6 +2,7 @@ import "@material/mwc-button/mwc-button";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, state } from "lit/decorators";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
+import "../../../../src/components/ha-alert";
 import "../../../../src/components/ha-circular-progress";
 import "../../../../src/components/ha-dialog";
 import "../../../../src/components/ha-settings-row";
@ -128,7 +129,9 @@ class DialogSupervisorUpdate extends LitElement {
                      this._dialogParams.name
                    )}
              </p>`}
-        ${this._error ? html`<p class="error">${this._error}</p>` : ""}
+        ${this._error
+          ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
+          : ""}
      </ha-dialog>
    `;
  }
--- a/hassio/src/system/hassio-supervisor-info.ts
+++ b/hassio/src/system/hassio-supervisor-info.ts
@ -3,6 +3,7 @@ import { customElement, property, state } from "lit/decorators";
 import { atLeastVersion } from "../../../src/common/config/version";
 import { fireEvent } from "../../../src/common/dom/fire_event";
 import "../../../src/components/buttons/ha-progress-button";
+import "../../../src/components/ha-alert";
 import "../../../src/components/ha-card";
 import "../../../src/components/ha-settings-row";
 import "../../../src/components/ha-switch";
@ -170,31 +171,25 @@ class HassioSupervisorInfo extends LitElement {
                    ></ha-switch>
                  </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(
                    "system.supervisor.unsupported_title"
                  )}
-                  <button
-                    class="link"
-                    .title=${this.supervisor.localize("common.learn_more")}
-                    @click=${this._unsupportedDialog}
-                  >
-                    Learn more
-                  </button>
-                </div>`}
+                </ha-alert>`}
            ${!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(
                    "system.supervisor.unhealthy_title"
                  )}
-                  <button
-                    class="link"
-                    .title=${this.supervisor.localize("common.learn_more")}
-                    @click=${this._unhealthyDialog}
-                  >
-                    Learn more
-                  </button>
-                </div>`
+                </ha-alert>`
              : ""}
          </div>
          <div class="metrics-block">
--- a/hassio/src/system/hassio-supervisor-log.ts
+++ b/hassio/src/system/hassio-supervisor-log.ts
@ -5,6 +5,7 @@ import "@polymer/paper-listbox/paper-listbox";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import "../../../src/components/buttons/ha-progress-button";
+import "../../../src/components/ha-alert";
 import "../../../src/components/ha-card";
 import { extractApiErrorMessage } from "../../../src/data/hassio/common";
 import { fetchHassioLogs } from "../../../src/data/hassio/supervisor";
@ -67,7 +68,9 @@ class HassioSupervisorLog extends LitElement {
  protected render(): TemplateResult | void {
    return html`
      <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
          ? html`
              <paper-dropdown-menu
@ -154,10 +157,6 @@ class HassioSupervisorLog extends LitElement {
          padding: 0 2%;
          width: 96%;
        }
-        .errors {
-          color: var(--error-color);
-          margin-bottom: 16px;
-        }
      `,
    ];
  }