From bb2b691f4a1e8b92d8ac8d075c126b086cef04b9 Mon Sep 17 00:00:00 2001
From: Feroze Mohideen <feroze@porter.run>
Date: Fri, 17 May 2024 16:38:17 -0400
Subject: [PATCH] fix bug with addon deletion (#4657)

---
 dashboard/src/lib/hooks/useAddon.ts           |  6 ++++-
 .../add-on-dashboard/AddonContextProvider.tsx | 22 ++-----------------
 .../home/add-on-dashboard/common/Settings.tsx | 10 +++++++--
 3 files changed, 15 insertions(+), 23 deletions(-)

diff --git a/dashboard/src/lib/hooks/useAddon.ts b/dashboard/src/lib/hooks/useAddon.ts
index 7d32b34f60..be173a5fa2 100644
--- a/dashboard/src/lib/hooks/useAddon.ts
+++ b/dashboard/src/lib/hooks/useAddon.ts
@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from "react";
 import { Addon, AddonWithEnvVars } from "@porter-dev/api-contracts";
-import { useQuery } from "@tanstack/react-query";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import Anser, { type AnserJsonEntry } from "anser";
 import { match } from "ts-pattern";
 import { z } from "zod";
@@ -194,6 +194,8 @@ export const useAddon = (): {
     isError: boolean;
   };
 } => {
+  const queryClient = useQueryClient();
+
   const updateAddon = async ({
     projectId,
     deploymentTargetId,
@@ -235,6 +237,8 @@ export const useAddon = (): {
         addonName: addon.name.value,
       }
     );
+
+    await queryClient.invalidateQueries(["listAddons"]);
   };
 
   const getAddon = ({
diff --git a/dashboard/src/main/home/add-on-dashboard/AddonContextProvider.tsx b/dashboard/src/main/home/add-on-dashboard/AddonContextProvider.tsx
index b484f49f19..8d769bdde7 100644
--- a/dashboard/src/main/home/add-on-dashboard/AddonContextProvider.tsx
+++ b/dashboard/src/main/home/add-on-dashboard/AddonContextProvider.tsx
@@ -1,5 +1,4 @@
-import React, { createContext, useCallback, useContext } from "react";
-import { useQueryClient } from "@tanstack/react-query";
+import React, { createContext, useContext } from "react";
 import styled from "styled-components";
 
 import Loading from "components/Loading";
@@ -26,7 +25,6 @@ type AddonContextType = {
   projectId: number;
   deploymentTarget: DeploymentTarget;
   status: ClientAddonStatus;
-  deleteAddon: () => Promise<void>;
 };
 
 const AddonContext = createContext<AddonContextType | null>(null);
@@ -53,7 +51,7 @@ export const AddonContextProvider: React.FC<AddonContextProviderProps> = ({
   const { currentProject } = useContext(Context);
   const { defaultDeploymentTarget, isDefaultDeploymentTargetLoading } =
     useDefaultDeploymentTarget();
-  const { getAddon, deleteAddon } = useAddon();
+  const { getAddon } = useAddon();
   const {
     addon,
     isLoading: isAddonLoading,
@@ -64,7 +62,6 @@ export const AddonContextProvider: React.FC<AddonContextProviderProps> = ({
     addonName,
     refreshIntervalSeconds: 5,
   });
-  const queryClient = useQueryClient();
 
   const status = useAddonStatus({
     projectId: currentProject?.id,
@@ -78,20 +75,6 @@ export const AddonContextProvider: React.FC<AddonContextProviderProps> = ({
     !!currentProject &&
     currentProject.id !== -1;
 
-  const deleteContextAddon = useCallback(async () => {
-    if (!paramsExist || !addon) {
-      return;
-    }
-
-    await deleteAddon({
-      projectId: currentProject.id,
-      deploymentTargetId: defaultDeploymentTarget.id,
-      addon,
-    });
-
-    await queryClient.invalidateQueries(["listAddons"]);
-  }, [paramsExist]);
-
   if (isDefaultDeploymentTargetLoading || isAddonLoading || !paramsExist) {
     return <Loading />;
   }
@@ -118,7 +101,6 @@ export const AddonContextProvider: React.FC<AddonContextProviderProps> = ({
         projectId: currentProject.id,
         deploymentTarget: defaultDeploymentTarget,
         status,
-        deleteAddon: deleteContextAddon,
       }}
     >
       {children}
diff --git a/dashboard/src/main/home/add-on-dashboard/common/Settings.tsx b/dashboard/src/main/home/add-on-dashboard/common/Settings.tsx
index b4cf1c8d6c..6396f266ea 100644
--- a/dashboard/src/main/home/add-on-dashboard/common/Settings.tsx
+++ b/dashboard/src/main/home/add-on-dashboard/common/Settings.tsx
@@ -8,6 +8,7 @@ import Icon from "components/porter/Icon";
 import Spacer from "components/porter/Spacer";
 import Text from "components/porter/Text";
 import { Code } from "main/home/managed-addons/tabs/shared";
+import { useAddon } from "lib/hooks/useAddon";
 import { getErrorMessageFromNetworkCall } from "lib/hooks/useCluster";
 import { useIntercom } from "lib/hooks/useIntercom";
 
@@ -18,7 +19,8 @@ import { useAddonContext } from "../AddonContextProvider";
 import { useAddonFormContext } from "../AddonFormContextProvider";
 
 const Settings: React.FC = () => {
-  const { addon, deleteAddon } = useAddonContext();
+  const { deleteAddon } = useAddon();
+  const { addon, projectId, deploymentTarget } = useAddonContext();
   const { updateAddonButtonProps } = useAddonFormContext();
   const history = useHistory();
   const { setCurrentOverlay = () => ({}) } = useContext(Context);
@@ -30,7 +32,11 @@ const Settings: React.FC = () => {
     try {
       setCurrentOverlay(null);
       setIsDeleting(true);
-      await deleteAddon();
+      await deleteAddon({
+        projectId,
+        deploymentTargetId: deploymentTarget.id,
+        addon,
+      });
       history.push("/addons");
     } catch (err) {
       showIntercomWithMessage({