Introduce competition for deactivating helm repository from list of active repositories

Co-authored-by: Mikko Aspiala <mikko.aspiala@gmail.com>

Signed-off-by: Janne Savolainen <janne.savolainen@live.fi>

src/behaviours/helm-charts/__snapshots__/activate-helm-repository-from-list-in-preferences.test.ts.snap

@@ -1063,7 +1063,9 @@ exports[`activate helm repository from list in preferences when navigating to pr
                 <div
                   class="repos"
                 >
-                  <div>
+                  <div
+                    class="item flex gaps align-center justify-space-between mt-3"
+                  >
                     <div
                       class="repoName"
                       data-testid="helm-repository-Some already active repository"
@@ -1075,6 +1077,20 @@ exports[`activate helm repository from list in preferences when navigating to pr
                     >
                       some-url
                     </div>
+                    <i
+                      class="Icon material interactive focusable"
+                      data-testid="deactivate-helm-repository-Some already active repository"
+                      id="tooltip_target_25"
+                      tabindex="0"
+                    >
+                      <span
+                        class="icon"
+                        data-icon-name="delete"
+                      >
+                        delete
+                      </span>
+                      <div />
+                    </i>
                   </div>
                 </div>
               </div>
@@ -1626,7 +1642,9 @@ exports[`activate helm repository from list in preferences when navigating to pr
                 <div
                   class="repos"
                 >
-                  <div>
+                  <div
+                    class="item flex gaps align-center justify-space-between mt-3"
+                  >
                     <div
                       class="repoName"
                       data-testid="helm-repository-Some already active repository"
@@ -1638,6 +1656,20 @@ exports[`activate helm repository from list in preferences when navigating to pr
                     >
                       some-url
                     </div>
+                    <i
+                      class="Icon material interactive focusable"
+                      data-testid="deactivate-helm-repository-Some already active repository"
+                      id="tooltip_target_32"
+                      tabindex="0"
+                    >
+                      <span
+                        class="icon"
+                        data-icon-name="delete"
+                      >
+                        delete
+                      </span>
+                      <div />
+                    </i>
                   </div>
                 </div>
               </div>
@@ -2238,7 +2270,9 @@ exports[`activate helm repository from list in preferences when navigating to pr
                 <div
                   class="repos"
                 >
-                  <div>
+                  <div
+                    class="item flex gaps align-center justify-space-between mt-3"
+                  >
                     <div
                       class="repoName"
                       data-testid="helm-repository-Some already active repository"
@@ -2250,6 +2284,20 @@ exports[`activate helm repository from list in preferences when navigating to pr
                     >
                       some-url
                     </div>
+                    <i
+                      class="Icon material interactive focusable"
+                      data-testid="deactivate-helm-repository-Some already active repository"
+                      id="tooltip_target_40"
+                      tabindex="0"
+                    >
+                      <span
+                        class="icon"
+                        data-icon-name="delete"
+                      >
+                        delete
+                      </span>
+                      <div />
+                    </i>
                   </div>
                 </div>
               </div>
@@ -3362,7 +3410,9 @@ exports[`activate helm repository from list in preferences when navigating to pr
                 <div
                   class="repos"
                 >
-                  <div>
+                  <div
+                    class="item flex gaps align-center justify-space-between mt-3"
+                  >
                     <div
                       class="repoName"
                       data-testid="helm-repository-Some already active repository"
@@ -3374,8 +3424,24 @@ exports[`activate helm repository from list in preferences when navigating to pr
                     >
                       some-url
                     </div>
+                    <i
+                      class="Icon material interactive focusable"
+                      data-testid="deactivate-helm-repository-Some already active repository"
+                      id="tooltip_target_88"
+                      tabindex="0"
+                    >
+                      <span
+                        class="icon"
+                        data-icon-name="delete"
+                      >
+                        delete
+                      </span>
+                      <div />
+                    </i>
                   </div>
-                  <div>
+                  <div
+                    class="item flex gaps align-center justify-space-between mt-3"
+                  >
                     <div
                       class="repoName"
                       data-testid="helm-repository-Some to be activated repository"
@@ -3387,6 +3453,20 @@ exports[`activate helm repository from list in preferences when navigating to pr
                     >
                       some-other-url
                     </div>
+                    <i
+                      class="Icon material interactive focusable"
+                      data-testid="deactivate-helm-repository-Some to be activated repository"
+                      id="tooltip_target_89"
+                      tabindex="0"
+                    >
+                      <span
+                        class="icon"
+                        data-icon-name="delete"
+                      >
+                        delete
+                      </span>
+                      <div />
+                    </i>
                   </div>
                 </div>
               </div>
@@ -3938,7 +4018,9 @@ exports[`activate helm repository from list in preferences when navigating to pr
                 <div
                   class="repos"
                 >
-                  <div>
+                  <div
+                    class="item flex gaps align-center justify-space-between mt-3"
+                  >
                     <div
                       class="repoName"
                       data-testid="helm-repository-Some already active repository"
@@ -3950,8 +4032,24 @@ exports[`activate helm repository from list in preferences when navigating to pr
                     >
                       some-url
                     </div>
+                    <i
+                      class="Icon material interactive focusable"
+                      data-testid="deactivate-helm-repository-Some already active repository"
+                      id="tooltip_target_99"
+                      tabindex="0"
+                    >
+                      <span
+                        class="icon"
+                        data-icon-name="delete"
+                      >
+                        delete
+                      </span>
+                      <div />
+                    </i>
                   </div>
-                  <div>
+                  <div
+                    class="item flex gaps align-center justify-space-between mt-3"
+                  >
                     <div
                       class="repoName"
                       data-testid="helm-repository-Some to be activated repository"
@@ -3963,6 +4061,20 @@ exports[`activate helm repository from list in preferences when navigating to pr
                     >
                       some-other-url
                     </div>
+                    <i
+                      class="Icon material interactive focusable"
+                      data-testid="deactivate-helm-repository-Some to be activated repository"
+                      id="tooltip_target_100"
+                      tabindex="0"
+                    >
+                      <span
+                        class="icon"
+                        data-icon-name="delete"
+                      >
+                        delete
+                      </span>
+                      <div />
+                    </i>
                   </div>
                 </div>
               </div>
@@ -4573,7 +4685,9 @@ exports[`activate helm repository from list in preferences when navigating to pr
                 <div
                   class="repos"
                 >
-                  <div>
+                  <div
+                    class="item flex gaps align-center justify-space-between mt-3"
+                  >
                     <div
                       class="repoName"
                       data-testid="helm-repository-Some already active repository"
@@ -4585,8 +4699,24 @@ exports[`activate helm repository from list in preferences when navigating to pr
                     >
                       some-url
                     </div>
+                    <i
+                      class="Icon material interactive focusable"
+                      data-testid="deactivate-helm-repository-Some already active repository"
+                      id="tooltip_target_112"
+                      tabindex="0"
+                    >
+                      <span
+                        class="icon"
+                        data-icon-name="delete"
+                      >
+                        delete
+                      </span>
+                      <div />
+                    </i>
                   </div>
-                  <div>
+                  <div
+                    class="item flex gaps align-center justify-space-between mt-3"
+                  >
                     <div
                       class="repoName"
                       data-testid="helm-repository-Some to be activated repository"
@@ -4598,6 +4728,20 @@ exports[`activate helm repository from list in preferences when navigating to pr
                     >
                       some-other-url
                     </div>
+                    <i
+                      class="Icon material interactive focusable"
+                      data-testid="deactivate-helm-repository-Some to be activated repository"
+                      id="tooltip_target_113"
+                      tabindex="0"
+                    >
+                      <span
+                        class="icon"
+                        data-icon-name="delete"
+                      >
+                        delete
+                      </span>
+                      <div />
+                    </i>
                   </div>
                 </div>
               </div>

src/behaviours/helm-charts/deactivate-helm-repository-from-list-of-active-repository-in-preferences.test.ts

@@ -0,0 +1,117 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import type { RenderResult } from "@testing-library/react";
+import { fireEvent } from "@testing-library/react";
+import type { ApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
+import { getApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
+import type { AsyncFnMock } from "@async-fn/jest";
+import asyncFn from "@async-fn/jest";
+import execFileInjectable from "../../common/fs/exec-file.injectable";
+import helmBinaryPathInjectable from "../../main/helm/helm-binary-path.injectable";
+import getActiveHelmRepositoriesInjectable from "../../main/helm/repositories/get-active-helm-repositories/get-active-helm-repositories.injectable";
+import type { HelmRepo } from "../../common/helm-repo";
+import callForPublicHelmRepositoriesInjectable from "../../renderer/components/+preferences/kubernetes/helm-charts/activation-of-public-helm-repository/public-helm-repositories/call-for-public-helm-repositories.injectable";
+
+describe("deactivate helm repository from list of active repositories in preferences", () => {
+  let applicationBuilder: ApplicationBuilder;
+  let rendered: RenderResult;
+  let getActiveHelmRepositoriesMock: AsyncFnMock<() => Promise<HelmRepo[]>>;
+  let execFileMock: AsyncFnMock<
+    ReturnType<typeof execFileInjectable["instantiate"]>
+  >;
+
+  beforeEach(async () => {
+    applicationBuilder = getApplicationBuilder();
+
+    execFileMock = asyncFn();
+    getActiveHelmRepositoriesMock = asyncFn();
+
+    applicationBuilder.beforeApplicationStart(({ mainDi, rendererDi }) => {
+      rendererDi.override(callForPublicHelmRepositoriesInjectable, () => async () => []);
+
+      mainDi.override(
+        getActiveHelmRepositoriesInjectable,
+        () => getActiveHelmRepositoriesMock,
+      );
+
+      mainDi.override(execFileInjectable, () => execFileMock);
+      mainDi.override(helmBinaryPathInjectable, () => "some-helm-binary-path");
+    });
+
+    rendered = await applicationBuilder.render();
+  });
+
+  describe("when navigating to preferences containing helm repositories", () => {
+    beforeEach(async () => {
+      applicationBuilder.preferences.navigate();
+      applicationBuilder.preferences.navigation.click("kubernetes");
+    });
+
+    it("renders", () => {
+      expect(rendered.baseElement).toMatchSnapshot();
+    });
+
+    describe("when active repositories resolve", () => {
+      beforeEach(async () => {
+        getActiveHelmRepositoriesMock.resolve([
+          { name: "some-active-repository", url: "some-url" },
+        ]);
+      });
+
+      it("renders", () => {
+        expect(rendered.baseElement).toMatchSnapshot();
+      });
+
+      describe("when deactivating repository", () => {
+        beforeEach(() => {
+          execFileMock.mockClear();
+          getActiveHelmRepositoriesMock.mockClear();
+
+          const deactiveButton = rendered.getByTestId(
+            "deactivate-helm-repository-some-active-repository",
+          );
+
+          fireEvent.click(deactiveButton);
+        });
+
+        it("renders", () => {
+          expect(rendered.baseElement).toMatchSnapshot();
+        });
+
+        it("deactivates the repository", () => {
+          expect(execFileMock).toHaveBeenCalledWith(
+            "some-helm-binary-path",
+            ["repo", "remove", "some-active-repository"],
+          );
+        });
+
+        it("does not reload active repositories yet", () => {
+          expect(getActiveHelmRepositoriesMock).not.toHaveBeenCalled();
+        });
+
+        describe("when deactivating resolves", () => {
+          beforeEach(async () => {
+            await execFileMock.resolveSpecific(
+              [
+                "some-helm-binary-path",
+                ["repo", "remove", "some-active-repository"],
+              ],
+
+              "",
+            );
+          });
+
+          it("renders", () => {
+            expect(rendered.baseElement).toMatchSnapshot();
+          });
+
+          it("reloads active repositories", () => {
+            expect(getActiveHelmRepositoriesMock).toHaveBeenCalled();
+          });
+        });
+      });
+    });
+  });
+});

src/renderer/components/+preferences/kubernetes/helm-charts/activation-of-public-helm-repository/select-helm-repository/select-helm-repository.injectable.ts

@@ -7,7 +7,7 @@ import activateHelmRepositoryInjectable from "./activate-helm-repository.injecta
 import type { SelectOption } from "../../../../../select";
 import type { HelmRepo } from "../../../../../../../common/helm-repo";
 import type { SingleValue } from "react-select";
-import deactivateHelmRepositoryInjectable from "./deactivate-helm-repository.injectable";
+import deactivateHelmRepositoryInjectable from "../../deactivate-helm-repository.injectable";
 
 const selectHelmRepositoryInjectable = getInjectable({
   id: "select-helm-repository",

src/renderer/components/+preferences/kubernetes/helm-charts/deactivate-helm-repository.injectable.ts

@@ -3,10 +3,10 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 import { getInjectable } from "@ogre-tools/injectable";
-import type { HelmRepo } from "../../../../../../../common/helm-repo";
+import type { HelmRepo } from "../../../../../common/helm-repo";
-import { requestFromChannelInjectionToken } from "../../../../../../../common/utils/channel/request-from-channel-injection-token";
+import { requestFromChannelInjectionToken } from "../../../../../common/utils/channel/request-from-channel-injection-token";
-import activeHelmRepositoriesInjectable from "../../active-helm-repositories.injectable";
+import activeHelmRepositoriesInjectable from "./active-helm-repositories.injectable";
-import deactivateHelmRepositoryChannelInjectable from "../../../../../../../common/helm/deactivate-helm-repository-channel.injectable";
+import deactivateHelmRepositoryChannelInjectable from "../../../../../common/helm/deactivate-helm-repository-channel.injectable";
 
 const activatePublicHelmRepositoryInjectable = getInjectable({
   id: "deactivate-public-helm-repository",

src/renderer/components/+preferences/kubernetes/helm-charts/helm-repositories.tsx

@@ -15,12 +15,15 @@ import { Spinner } from "../../../spinner";
 import type { HelmRepo } from "../../../../../common/helm-repo";
 import { Notice } from "../../../+extensions/notice";
 import { isEmpty } from "lodash/fp";
+import { RemovableItem } from "../../removable-item";
+import deactivateHelmRepositoryInjectable from "./deactivate-helm-repository.injectable";
 
 interface Dependencies {
   activeHelmRepositories: IAsyncComputed<HelmRepo[]>;
+  deactivateRepository: (repository: HelmRepo) => Promise<void>;
 }
 
-const NonInjectedActiveHelmRepositories = observer(({ activeHelmRepositories }: Dependencies) => {
+const NonInjectedActiveHelmRepositories = observer(({ activeHelmRepositories, deactivateRepository }: Dependencies) => {
   if (activeHelmRepositories.pending.get()) {
     return <Spinner data-testid="helm-repositories-are-loading" />;
   }
@@ -40,13 +43,18 @@ const NonInjectedActiveHelmRepositories = observer(({ activeHelmRepositories }:
   return (
     <div className={styles.repos}>
       {repositories.map((repository) => (
-        <div key={repository.name}>
+        <RemovableItem
+          key={repository.name}
+          onRemove={() => deactivateRepository(repository)}
+          className="mt-3"
+          data-testid={`deactivate-helm-repository-${repository.name}`}
+        >
           <div data-testid={`helm-repository-${repository.name}`} className={styles.repoName}>
             {repository.name}
           </div>
 
           <div className={styles.repoUrl}>{repository.url}</div>
-        </div>
+        </RemovableItem>
       ))}
     </div>
   );
@@ -59,6 +67,7 @@ export const HelmRepositories = withInjectables<Dependencies>(
   {
     getProps: (di) => ({
       activeHelmRepositories: di.inject(activeHelmRepositoriesInjectable),
+      deactivateRepository: di.inject(deactivateHelmRepositoryInjectable),
     }),
   },
 );

src/renderer/components/+preferences/removable-item.tsx

@@ -14,9 +14,10 @@ export interface RemovableItemProps extends DOMAttributes<any>{
   icon?: string;
   onRemove: () => void;
   className?: string;
+  "data-testid"?: string;
 }
 
-export function RemovableItem({ icon, onRemove, children, className, ...rest }: RemovableItemProps) {
+export function RemovableItem({ icon, onRemove, children, className, "data-testid": testId, ...rest }: RemovableItemProps) {
   return (
     <div className={cssNames(styles.item, "flex gaps align-center justify-space-between", className)} {...rest}>
       {icon && (
@@ -27,6 +28,7 @@ export function RemovableItem({ icon, onRemove, children, className, ...rest }:
         material="delete"
         onClick={onRemove}
         tooltip="Remove"
+        data-testid={testId}
       />
     </div>
   );