Convert all warning classes to ha-alert (#10289)

hassio/src/addon-view/info/hassio-addon-info.ts

@@ -180,24 +180,21 @@ class HassioAddonInfo extends LitElement {
         : ""}
       ${!this.addon.protected
         ? html`
-        <ha-card class="warning">
-          <h1 class="card-header">${this.supervisor.localize(
-            "addon.dashboard.protection_mode.title"
-          )}
-          </h1>
-          <div class="card-content">
-          ${this.supervisor.localize("addon.dashboard.protection_mode.content")}
-          </div>
-          <div class="card-actions protection-enable">
-              <mwc-button @click=${this._protectionToggled}>
-              ${this.supervisor.localize(
+            <ha-alert
+              alert-type="warning"
+              .title=${this.supervisor.localize(
+                "addon.dashboard.protection_mode.title"
+              )}
+              .actionText=${this.supervisor.localize(
                 "addon.dashboard.protection_mode.enable"
               )}
-              </mwc-button>
-            </div>
-          </div>
-        </ha-card>
-      `
+              @alert-action-clicked=${this._protectionToggled}
+            >
+              ${this.supervisor.localize(
+                "addon.dashboard.protection_mode.content"
+              )}
+            </ha-alert>
+          `
         : ""}
 
       <ha-card>

src/panels/config/automation/action/ha-automation-action-row.ts

@@ -12,6 +12,7 @@ import { fireEvent } from "../../../../common/dom/fire_event";
 import { handleStructError } from "../../../../common/structs/handle-errors";
 import "../../../../components/ha-button-menu";
 import "../../../../components/ha-card";
+import "../../../../components/ha-alert";
 import "../../../../components/ha-icon-button";
 import type { HaYamlEditor } from "../../../../components/ha-yaml-editor";
 import type { Action } from "../../../../data/script";
@@ -42,7 +43,8 @@ const OPTIONS = [
   "device_id",
 ];
 
-const getType = (action: Action) => OPTIONS.find((option) => option in action);
+const getType = (action: Action | undefined) =>
+  action ? OPTIONS.find((option) => option in action) : undefined;
 
 declare global {
   // for fire event
@@ -171,9 +173,12 @@ export default class HaAutomationActionRow extends LitElement {
             </ha-button-menu>
           </div>
           ${this._warnings
-            ? html`<div class="warning">
-                ${this.hass.localize("ui.errors.config.editor_not_supported")}:
-                <br />
+            ? html`<ha-alert
+                alert-type="warning"
+                .title=${this.hass.localize(
+                  "ui.errors.config.editor_not_supported"
+                )}
+              >
                 ${this._warnings!.length > 0 && this._warnings![0] !== undefined
                   ? html` <ul>
                       ${this._warnings!.map(
@@ -182,7 +187,7 @@ export default class HaAutomationActionRow extends LitElement {
                     </ul>`
                   : ""}
                 ${this.hass.localize("ui.errors.config.edit_in_yaml_supported")}
-              </div>`
+              </ha-alert>`
             : ""}
           ${yamlMode
             ? html`

src/panels/config/automation/trigger/ha-automation-trigger-row.ts

@@ -12,6 +12,7 @@ import { fireEvent } from "../../../../common/dom/fire_event";
 import { handleStructError } from "../../../../common/structs/handle-errors";
 import "../../../../components/ha-button-menu";
 import "../../../../components/ha-card";
+import "../../../../components/ha-alert";
 import "../../../../components/ha-icon-button";
 import type { Trigger } from "../../../../data/automation";
 import { showConfirmationDialog } from "../../../../dialogs/generic/show-dialog-box";
@@ -121,9 +122,12 @@ export default class HaAutomationTriggerRow extends LitElement {
             </ha-button-menu>
           </div>
           ${this._warnings
-            ? html`<div class="warning">
-                ${this.hass.localize("ui.errors.config.editor_not_supported")}:
-                <br />
+            ? html`<ha-alert
+                alert-type="warning"
+                .title=${this.hass.localize(
+                  "ui.errors.config.editor_not_supported"
+                )}
+              >
                 ${this._warnings.length && this._warnings[0] !== undefined
                   ? html` <ul>
                       ${this._warnings.map(
@@ -132,7 +136,7 @@ export default class HaAutomationTriggerRow extends LitElement {
                     </ul>`
                   : ""}
                 ${this.hass.localize("ui.errors.config.edit_in_yaml_supported")}
-              </div>`
+              </ha-alert>`
             : ""}
           ${yamlMode
             ? html`

src/panels/config/devices/ha-config-device-page.ts

@@ -13,6 +13,7 @@ import { slugify } from "../../../common/string/slugify";
 import "../../../components/entity/ha-battery-icon";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-icon-next";
+import "../../../components/ha-alert";
 import "../../../components/ha-svg-icon";
 import { AreaRegistryEntry } from "../../../data/area_registry";
 import {
@@ -296,17 +297,15 @@ export class HaConfigDevicePage extends LitElement {
               ${
                 device.disabled_by
                   ? html`
-                      <div>
-                        <p class="warning">
-                          ${this.hass.localize(
-                            "ui.panel.config.devices.enabled_cause",
-                            "cause",
-                            this.hass.localize(
-                              `ui.panel.config.devices.disabled_by.${device.disabled_by}`
-                            )
-                          )}
-                        </p>
-                      </div>
+                      <ha-alert alert-type="warning">
+                        ${this.hass.localize(
+                          "ui.panel.config.devices.enabled_cause",
+                          "cause",
+                          this.hass.localize(
+                            `ui.panel.config.devices.disabled_by.${device.disabled_by}`
+                          )
+                        )}
+                      </ha-alert>
                       ${device.disabled_by === "user"
                         ? html` <div class="card-actions" slot="actions">
                             <mwc-button unelevated @click=${this._enableDevice}>

src/panels/lovelace/editor/hui-element-editor.ts

@@ -15,6 +15,7 @@ import { computeRTL } from "../../../common/util/compute_rtl";
 import { deepEqual } from "../../../common/util/deep-equal";
 import "../../../components/ha-circular-progress";
 import "../../../components/ha-code-editor";
+import "../../../components/ha-alert";
 import type { HaCodeEditor } from "../../../components/ha-code-editor";
 import type {
   LovelaceCardConfig,
@@ -229,9 +230,12 @@ export abstract class HuiElementEditor<T> extends LitElement {
           : ""}
         ${this.hasWarning
           ? html`
-              <div class="warning">
-                ${this.hass.localize("ui.errors.config.editor_not_supported")}:
-                <br />
+              <ha-alert
+                alert-type="warning"
+                .title="${this.hass.localize(
+                  "ui.errors.config.editor_not_supported"
+                )}:"
+              >
                 ${this._warnings!.length > 0 && this._warnings![0] !== undefined
                   ? html` <ul>
                       ${this._warnings!.map(
@@ -240,7 +244,7 @@ export abstract class HuiElementEditor<T> extends LitElement {
                     </ul>`
                   : ""}
                 ${this.hass.localize("ui.errors.config.edit_in_yaml_supported")}
-              </div>
+              </ha-alert>
             `
           : ""}
       </div>

src/translations/en.json

@@ -4026,7 +4026,7 @@
         "protection_mode": {
           "title": "Warning: Protection mode is disabled!",
           "content": "Protection mode on this add-on is disabled! This gives the add-on full access to the entire system, which adds security risks, and could damage your system when used incorrectly. Only disable the protection mode if you know, need AND trust the source of this add-on.",
-          "enable": "Enable Protection mode"
+          "enable": "[%key:ui::common::enable%]"
         },
         "capability": {
           "stage": {