Start using ha-alert

src/components/dialogs/hacs-custom-repositories-dialog.ts

@@ -1,18 +1,20 @@
 import "@material/mwc-button/mwc-button";
-import "@polymer/paper-item/paper-item";
 import { mdiDelete, mdiGithub } from "@mdi/js";
 import "@polymer/paper-item/paper-icon-item";
+import "@polymer/paper-item/paper-item";
 import "@polymer/paper-item/paper-item-body";
 import "@polymer/paper-listbox/paper-listbox";
 import { css, html, PropertyValues, TemplateResult } from "lit";
 import { customElement, property, query } from "lit/decorators";
-import "../../../homeassistant-frontend/src/components/ha-svg-icon";
+import { computeRTL } from "../../../homeassistant-frontend/src/common/util/compute_rtl";
+import "../../../homeassistant-frontend/src/components/ha-alert";
 import "../../../homeassistant-frontend/src/components/ha-paper-dropdown-menu";
+import "../../../homeassistant-frontend/src/components/ha-svg-icon";
+import { brandsUrl } from "../../../homeassistant-frontend/src/util/brands-url";
 import { getRepositories, repositoryAdd, repositoryDelete } from "../../data/websocket";
 import { hacsIconStyle, scrollBarStyle } from "../../styles/element-styles";
 import "./hacs-dialog";
 import { HacsDialogBase } from "./hacs-dialog-base";
-import { brandsUrl } from "../../../homeassistant-frontend/src/util/brands-url";
 
 @customElement("hacs-custom-repositories-dialog")
 export class HacsCustomRepositoriesDialog extends HacsDialogBase {
@@ -45,7 +47,11 @@ export class HacsCustomRepositoriesDialog extends HacsDialogBase {
       >
         <div class="content">
           <div class="list">
-            ${this._error ? html`<div class="error">${this._error.message}</div>` : ""}
+            ${this._error?.message
+              ? html`<ha-alert alert-type="error" .rtl=${computeRTL(this.hass)}>
+                  ${this._error.message}
+                </ha-alert>`
+              : ""}
             ${repositories
               ?.filter((repo) => this.hacs.configuration.categories.includes(repo.category))
               .map(
@@ -208,11 +214,6 @@ export class HacsCustomRepositoriesDialog extends HacsDialogBase {
         paper-item-body {
           cursor: pointer;
         }
-        .error {
-          line-height: 0px;
-          margin: 12px;
-          color: var(--hacs-error-color, var(--google-red-500, red));
-        }
 
         paper-item-body {
           width: 100%;

src/components/dialogs/hacs-install-dialog.ts

@@ -5,6 +5,8 @@ import { css, CSSResultGroup, html, PropertyValues, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { mainWindow } from "../../../homeassistant-frontend/src/common/dom/get_main_window";
+import { computeRTL } from "../../../homeassistant-frontend/src/common/util/compute_rtl";
+import "../../../homeassistant-frontend/src/components/ha-alert";
 import "../../../homeassistant-frontend/src/components/ha-circular-progress";
 import "../../../homeassistant-frontend/src/components/ha-formfield";
 import "../../../homeassistant-frontend/src/components/ha-paper-dropdown-menu";
@@ -138,12 +140,12 @@ export class HacsInstallDialog extends HacsDialogBase {
                 </div>`
             : ""}
           ${!this._repository.can_install
-            ? html`<p class="error">
+            ? html`<ha-alert alert-type="error" .rtl=${computeRTL(this.hass)}>
                 ${this.hacs.localize("confirm.home_assistant_version_not_correct", {
                   haversion: this.hass.config.version,
                   minversion: this._repository.homeassistant,
                 })}
-              </p>`
+              </ha-alert>`
             : ""}
           <div class="note">
             ${this.hacs.localize(`repository.note_installed`)}
@@ -162,7 +164,11 @@ export class HacsInstallDialog extends HacsDialogBase {
               ? html`<p>${this.hacs.localize("dialog_install.restart")}</p>`
               : ""}
           </div>
-          ${this._error ? html`<div class="error">${this._error.message}</div>` : ""}
+          ${this._error?.message
+            ? html`<ha-alert alert-type="error" .rtl=${computeRTL(this.hass)}>
+                ${this._error.message}
+              </ha-alert>`
+            : ""}
         </div>
         <mwc-button
           slot="primaryaction"
@@ -257,9 +263,6 @@ export class HacsInstallDialog extends HacsDialogBase {
         .lovelace {
           margin-top: 8px;
         }
-        .error {
-          color: var(--hacs-error-color, var(--google-red-500));
-        }
         paper-menu-button {
           color: var(--secondary-text-color);
           padding: 0;

src/components/dialogs/hacs-removed-dialog.ts

@@ -17,7 +17,9 @@ export class HacsRemovedDialog extends HacsDialogBase {
       <hacs-dialog
         .active=${this.active}
         .hass=${this.hass}
-        .title=${this.hacs.localize("entry.messages.removed", { repository: "" })}
+        .title=${this.hacs.localize("entry.messages.removed_repository", {
+          repository: this.repository.full_name,
+        })}
       >
         <div class="content">
           <div><b>${this.hacs.localize("dialog_removed.name")}:</b> ${this.repository.name}</div>

src/components/dialogs/hacs-update-dialog.ts

@@ -1,12 +1,16 @@
 import "@material/mwc-button/mwc-button";
-import "../../../homeassistant-frontend/src/components/ha-expansion-panel";
 import { mdiArrowRight } from "@mdi/js";
 import { css, CSSResultGroup, html, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import memoizeOne from "memoize-one";
+import { mainWindow } from "../../../homeassistant-frontend/src/common/dom/get_main_window";
+import { computeRTL } from "../../../homeassistant-frontend/src/common/util/compute_rtl";
+import "../../../homeassistant-frontend/src/components/ha-alert";
 import "../../../homeassistant-frontend/src/components/ha-circular-progress";
+import "../../../homeassistant-frontend/src/components/ha-expansion-panel";
 import "../../../homeassistant-frontend/src/components/ha-svg-icon";
+import { showConfirmationDialog } from "../../../homeassistant-frontend/src/dialogs/generic/show-dialog-box";
 import { Repository } from "../../data/common";
 import {
   repositoryInstall,
@@ -19,8 +23,6 @@ import { updateLovelaceResources } from "../../tools/update-lovelace-resources";
 import "../hacs-link";
 import "./hacs-dialog";
 import { HacsDialogBase } from "./hacs-dialog-base";
-import { showConfirmationDialog } from "../../../homeassistant-frontend/src/dialogs/generic/show-dialog-box";
-import { mainWindow } from "../../../homeassistant-frontend/src/common/dom/get_main_window";
 
 @customElement("hacs-update-dialog")
 export class HacsUpdateDialog extends HacsDialogBase {
@@ -117,20 +119,26 @@ export class HacsUpdateDialog extends HacsDialogBase {
           }
           ${
             !repository.can_install
-              ? html`<p class="error">
+              ? html`<ha-alert alert-type="error" .rtl=${computeRTL(this.hass)}>
                   ${this.hacs.localize("confirm.home_assistant_version_not_correct", {
                     haversion: this.hass.config.version,
                     minversion: repository.homeassistant,
                   })}
-                </p>`
+                </ha-alert>`
               : ""
           }
           ${
             repository.category === "integration"
               ? html`<p>${this.hacs.localize("dialog_install.restart")}</p>`
               : ""
           }
-          ${this._error ? html`<div class="error">${this._error.message}</div>` : ""}
+          ${
+            this._error?.message
+              ? html`<ha-alert alert-type="error" .rtl=${computeRTL(this.hass)}>
+                  ${this._error.message}
+                </ha-alert>`
+              : ""
+          }
         </div>
         <mwc-button
           slot="primaryaction"
@@ -208,9 +216,6 @@ export class HacsUpdateDialog extends HacsDialogBase {
           width: 360px;
           display: contents;
         }
-        .error {
-          color: var(--hacs-error-color, var(--google-red-500));
-        }
         ha-expansion-panel {
           margin: 8px 0;
         }

src/data/common.ts

@@ -62,9 +62,8 @@ export interface LovelaceResourcesMutableParams {
 export interface Message {
   name: string;
   info: string;
-  class?: string;
   secondary?: string;
-  severity?: "information" | "warning" | "error" | "critical";
+  severity?: "info" | "warning" | "error" | "success";
   path?: string;
   iconPath?: string;
   dialog?: string;

src/data/hacs.ts

@@ -1,8 +1,8 @@
-import { Repository, Configuration, Status } from "./common";
+import { Repository, Configuration, Status, Message } from "./common";
 
 export interface Hacs {
   language: string;
-  messages: { class: string; iconPath: string; info: string; name: string; path: string }[];
+  messages: Message[];
   updates: any[];
   resources: any[];
   repositories: Repository[];

src/localize/languages/en.json

@@ -33,6 +33,7 @@
     "python_script": "Python Script",
     "python_scripts": "Python Scripts",
     "reload": "Reload",
+    "remove": "Remove",
     "repositories": "Repositories",
     "repository": "Repository",
     "settings": "settings",
@@ -339,7 +340,7 @@
         "title": "Pending restart",
         "content": "You have {number} {pluralWording} for which a restart of Home Assistant is required. You can do that from the 'Server management' section under the configuration part of Home Assistant UI."
       },
-      "removed": "Removed repository '{repository}'"
+      "removed_repository": "Removed repository ''{repository}''"
     },
     "intro": "Updates and important messages will show here if there are any",
     "information": "Information",

src/panels/hacs-entry-panel.ts

@@ -7,6 +7,8 @@ import "@polymer/paper-item/paper-item-body";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { isComponentLoaded } from "../../homeassistant-frontend/src/common/config/is_component_loaded";
+import { computeRTL } from "../../homeassistant-frontend/src/common/util/compute_rtl";
+import "../../homeassistant-frontend/src/components/ha-alert";
 import "../../homeassistant-frontend/src/components/ha-card";
 import "../../homeassistant-frontend/src/components/ha-menu-button";
 import "../../homeassistant-frontend/src/components/ha-svg-icon";
@@ -68,7 +70,7 @@ export class HacsEntryPanel extends LitElement {
         info: message.info,
         secondary: message.secondary,
         path: message.path || "",
-        class: message.severity,
+        severity: message.severity,
         dialog: message.dialog,
         repository: message.repository,
       });
@@ -93,43 +95,46 @@ export class HacsEntryPanel extends LitElement {
           <div slot="header">${this.narrow ? "HACS" : "Home Assistant Community Store"}</div>
 
           <div slot="introduction">
-            ${this.isWide || (this.hacs.updates.length === 0 && this.hacs.messages?.length === 0)
+            ${this.hacs.messages?.length !== 0
+              ? this.hacs.messages.map(
+                  (message) =>
+                    html`
+                      <ha-alert
+                        .alertType=${message.severity!}
+                        .title=${message.secondary
+                          ? `${message.name} - ${message.secondary}`
+                          : message.name}
+                        .rtl=${computeRTL(this.hass)}
+                        .actionText=${message.dialog
+                          ? this.hacs.localize(`common.${message.dialog}`)
+                          : ""}
+                        @alert-action-clicked=${() => this._openDialog(message)}
+                      >
+                        ${message.info}
+                      </ha-alert>
+                    `
+                )
+              : !this.narrow
               ? this.hacs.localize("entry.intro")
               : ""}
           </div>
 
-          ${this.hacs.messages?.length !== 0
-            ? html`
-                <hacs-section-navigation
-                  .hass=${this.hass}
-                  .header=${this.hacs.localize("entry.information")}
-                  .pages=${this.hacs.messages}
-                  no-next
-                ></hacs-section-navigation>
-              `
-            : ""}
           ${this.hacs.updates?.length !== 0
             ? html` <ha-card>
-                <div class="header">${this.hacs.localize("entry.pending_updates")}</div>
                 ${sortRepositoriesByName(this.hacs.updates).map(
                   (repository) =>
                     html`
-                      <paper-icon-item @click="${() => this._openUpdateDialog(repository)}">
-                        <ha-svg-icon
-                          class="pending_update"
-                          .path=${mdiAlertCircle}
-                          slot="item-icon"
-                        ></ha-svg-icon>
-                        <paper-item-body two-line>
-                          ${repository.name}
-                          <div secondary>
-                            ${this.hacs.localize("sections.pending_repository_upgrade", {
-                              installed: repository.installed_version,
-                              available: repository.available_version,
-                            })}
-                          </div>
-                        </paper-item-body>
-                      </paper-icon-item>
+                      <ha-alert
+                        .title=${repository.name}
+                        .rtl=${computeRTL(this.hass)}
+                        .actionText=${this.hacs.localize("common.update")}
+                        @alert-action-clicked=${() => this._openUpdateDialog(repository)}
+                      >
+                        ${this.hacs.localize("sections.pending_repository_upgrade", {
+                          installed: repository.installed_version,
+                          available: repository.available_version,
+                        })}
+                      </ha-alert>
                     `
                 )}
               </ha-card>`
@@ -165,6 +170,25 @@ export class HacsEntryPanel extends LitElement {
     `;
   }
 
+  private _openDialog(message: Message) {
+    if (!message.dialog) {
+      return;
+    }
+    if (message.dialog == "remove") {
+      message.dialog = "removed";
+    }
+    this.dispatchEvent(
+      new CustomEvent("hacs-dialog", {
+        detail: {
+          type: message.dialog,
+          repository: message.repository,
+        },
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+
   private _openUpdateDialog(repository: Repository) {
     this.dispatchEvent(
       new CustomEvent("hacs-dialog", {