Start using ha-alert (#499)

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", {