Confirm repository uninstall (#478)

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

@@ -12,6 +12,7 @@ const DIALOG = {
  removed: () => import("./hacs-removed-dialog"),
  update: () => import("./hacs-update-dialog"),
  "repository-info": () => import("./hacs-repository-info-dialog"),
+ progress: () => import("./hacs-progress-dialog")
 };
 
 @customElement("hacs-event-dialog")

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

@@ -0,0 +1,61 @@
+import { html, TemplateResult, PropertyValues } from "lit";
+import { customElement, property } from "lit/decorators";
+import "./hacs-dialog";
+import { HacsDialogBase } from "./hacs-dialog-base";
+
+@customElement("hacs-progress-dialog")
+export class HacsProgressDialog extends HacsDialogBase {
+ @property() public title?: string;
+ @property() public content?: string;
+ @property() public confirmText?: string;
+ @property() public confirm: () => Promise<void>;
+ @property({ type: Boolean }) private _inProgress: boolean = false;
+
+ shouldUpdate(changedProperties: PropertyValues) {
+ return (
+ changedProperties.has("active") ||
+ changedProperties.has("title") ||
+ changedProperties.has("content") ||
+ changedProperties.has("confirmText") ||
+ changedProperties.has("confirm") ||
+ changedProperties.has("_inProgress")
+ );
+ }
+
+ protected render(): TemplateResult | void {
+ if (!this.active) return html``;
+ return html`
+ <hacs-dialog .active=${this.active} .hass=${this.hass} title=${this.title || ""}>
+ <div class="content">
+ ${this.content || ""}
+ </div>
+ <mwc-button slot="secondaryaction" ?disabled=${this._inProgress} @click=${this._close}>
+ ${this.hacs.localize("common.cancel")}
+ </mwc-button>
+ <mwc-button slot="primaryaction" @click=${this._confirmed}>
+ ${this._inProgress
+ ? html`<ha-circular-progress active size="small"></ha-circular-progress>`
+ : this.confirmText || this.hacs.localize("confirm.yes")}</mwc-button
+ >
+ </mwc-button>
+ </hacs-dialog>
+ `;
+ }
+
+ private async _confirmed() {
+ this._inProgress = true;
+ await this.confirm()
+ this._inProgress = false;
+ this._close()
+ }
+
+ private _close() {
+ this.active = false;
+ this.dispatchEvent(
+ new Event("hacs-dialog-closed", {
+ bubbles: true,
+ composed: true,
+ })
+ );
+ }
+}

src/components/hacs-repository-card.ts

@@ -188,7 +188,7 @@ export class HacsRepositoryCard extends LitElement {
  >${this.hacs.localize("repository_card.report")}</paper-item
  ></hacs-link
  >
- <paper-item class="pointer uninstall" @tap=${this._uninstallRepository}
+ <paper-item class="pointer uninstall" @tap=${this._uninstallRepositoryDialog}
  >${this.hacs.localize("common.uninstall")}</paper-item
  >`
  : ""}
@@ -247,6 +247,21 @@ export class HacsRepositoryCard extends LitElement {
  );
  }
 
+ private async _uninstallRepositoryDialog() {
+ this.dispatchEvent(
+ new CustomEvent("hacs-dialog", {
+ detail: {
+ type: "progress",
+ title: this.hacs.localize("dialog.uninstall.title"),
+ confirmText: this.hacs.localize("dialog.uninstall.title"),
+ content: this.hacs.localize("dialog.uninstall.message").replace("{name}", this.repository.name),
+ confirm: async () => { await this._uninstallRepository() }
+ },
+ bubbles: true,
+ composed: true,
+ })
+ );
+ }
  private async _uninstallRepository() {
  if (this.repository.category === "plugin" && this.hacs.status?.lovelace_mode !== "yaml") {
  const resources = await fetchResources(this.hass);

src/localize/languages/en.json

@@ -266,6 +266,10 @@
  "reload": {
  "description": "You need to reload your browser for the updated resources to be used.",
  "confirm": "Do you want to do that now?"
+ },
+ "uninstall": {
+ "title": "Uninstall",
+ "message": "Do you really want to uninstall {name}?"
  }
  },
  "entry": {