Disable repository removal if used for installed add-ons (#10922)

hassio/src/dialogs/repositories/dialog-hassio-repositories.ts

@@ -1,5 +1,6 @@
+import "@polymer/paper-tooltip/paper-tooltip";
 import "@material/mwc-button/mwc-button";
-import { mdiDelete } from "@mdi/js";
+import { mdiDelete, mdiDeleteOff } from "@mdi/js";
 import "@polymer/paper-input/paper-input";
 import type { PaperInputElement } from "@polymer/paper-input/paper-input";
 import "@polymer/paper-item/paper-item";
@@ -15,6 +16,7 @@ import { createCloseHeading } from "../../../../src/components/ha-dialog";
 import "../../../../src/components/ha-icon-button";
 import {
   fetchHassioAddonsInfo,
+  HassioAddonInfo,
   HassioAddonRepository,
 } from "../../../../src/data/hassio/addon";
 import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
@@ -60,11 +62,24 @@ class HassioRepositoriesDialog extends LitElement {
       .sort((a, b) => caseInsensitiveStringCompare(a.name, b.name))
   );
 
+  private _filteredUsedRepositories = memoizeOne(
+    (repos: HassioAddonRepository[], addons: HassioAddonInfo[]) =>
+      repos
+        .filter((repo) =>
+          addons.some((addon) => addon.repository === repo.slug)
+        )
+        .map((repo) => repo.slug)
+  );
+
   protected render(): TemplateResult {
     if (!this._dialogParams?.supervisor || this._repositories === undefined) {
       return html``;
     }
     const repositories = this._filteredRepositories(this._repositories);
+    const usedRepositories = this._filteredUsedRepositories(
+      repositories,
+      this._dialogParams.supervisor.supervisor.addons
+    );
     return html`
       <ha-dialog
         .open=${this._opened}
@@ -89,18 +104,32 @@ class HassioRepositoriesDialog extends LitElement {
                       <div secondary>${repo.maintainer}</div>
                       <div secondary>${repo.url}</div>
                     </paper-item-body>
-                    <ha-icon-button
-                      .slug=${repo.slug}
-                      .label=${this._dialogParams!.supervisor.localize(
-                        "dialog.repositories.remove"
-                      )}
-                      .path=${mdiDelete}
-                      @click=${this._removeRepository}
-                    ></ha-icon-button>
+                    <div class="delete">
+                      <ha-icon-button
+                        .disabled=${usedRepositories.includes(repo.slug)}
+                        .slug=${repo.slug}
+                        .path=${usedRepositories.includes(repo.slug)
+                          ? mdiDeleteOff
+                          : mdiDelete}
+                        @click=${this._removeRepository}
+                      >
+                      </ha-icon-button>
+                      <paper-tooltip
+                        animation-delay="0"
+                        position="bottom"
+                        offset="1"
+                      >
+                        ${this._dialogParams!.supervisor.localize(
+                          usedRepositories.includes(repo.slug)
+                            ? "dialog.repositories.used"
+                            : "dialog.repositories.remove"
+                        )}
+                      </paper-tooltip>
+                    </div>
                   </paper-item>
                 `
               )
-            : html` <paper-item> No repositories </paper-item> `}
+            : html`<paper-item> No repositories </paper-item>`}
           <div class="layout horizontal bottom">
             <paper-input
               class="flex-auto"
@@ -157,6 +186,9 @@ class HassioRepositoriesDialog extends LitElement {
           margin: 32px;
           text-align: center;
         }
+        div.delete ha-icon-button {
+          color: var(--error-color);
+        }
       `,
     ];
   }

src/translations/en.json

@@ -4466,7 +4466,8 @@
       "repositories": {
         "title": "Manage add-on repositories",
         "add": "Add",
-        "remove": "Remove"
+        "remove": "Remove",
+        "used": "Repository is in use for installed add-ons and can't be removed."
       },
       "restart_addon": {
         "confirm_text": "Restart add-on",