feat: slack integration deletion

frontend/src/hooks/api/slack/index.ts

@@ -1,2 +1,2 @@
-export { useUpdateSlackIntegration } from "./mutation";
+export { useDeleteSlackIntegration, useUpdateSlackIntegration } from "./mutation";
 export { fetchSlackInstallUrl, useGetSlackIntegrationByProject } from "./queries";

frontend/src/hooks/api/slack/mutation.tsx

@@ -3,7 +3,7 @@ import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { apiRequest } from "@app/config/request";
 
 import { slackKeys } from "./queries";
-import { TUpdateSlackIntegrationDTO } from "./types";
+import { TDeleteSlackIntegrationDTO, TUpdateSlackIntegrationDTO } from "./types";
 
 export const useUpdateSlackIntegration = () => {
   const queryClient = useQueryClient();
@@ -19,3 +19,18 @@ export const useUpdateSlackIntegration = () => {
     }
   });
 };
+
+export const useDeleteSlackIntegration = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation<{}, {}, TDeleteSlackIntegrationDTO>({
+    mutationFn: async (dto) => {
+      const { data } = await apiRequest.delete(`/api/v1/slack/${dto.id}`);
+
+      return data;
+    },
+    onSuccess: (_, { workspaceId }) => {
+      queryClient.invalidateQueries(slackKeys.getSlackIntegrationByProject(workspaceId));
+    }
+  });
+};

frontend/src/hooks/api/slack/types.ts

@@ -15,3 +15,8 @@ export type TUpdateSlackIntegrationDTO = {
   isSecretRequestNotificationEnabled?: boolean;
   secretRequestChannels?: string;
 };
+
+export type TDeleteSlackIntegrationDTO = {
+  id: string;
+  workspaceId: string;
+};

frontend/src/views/Settings/ProjectSettingsPage/components/NotificationSection/NotificationTab.tsx

@@ -5,11 +5,19 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 
 import { createNotification } from "@app/components/notifications";
-import { Button, ContentLoader, FormControl, Input, Switch } from "@app/components/v2";
+import {
+  Button,
+  ContentLoader,
+  DeleteActionModal,
+  FormControl,
+  Input,
+  Switch
+} from "@app/components/v2";
 import { useWorkspace } from "@app/context";
-import { useToggle } from "@app/hooks";
+import { usePopUp, useToggle } from "@app/hooks";
 import {
   fetchSlackInstallUrl,
+  useDeleteSlackIntegration,
   useGetSlackIntegrationByProject,
   useUpdateSlackIntegration
 } from "@app/hooks/api";
@@ -28,6 +36,11 @@ export const NotificationTab = () => {
   const { data: slackIntegration, isLoading: isSlackIntegrationLoading } =
     useGetSlackIntegrationByProject(currentWorkspace?.id);
   const { mutateAsync: updateSlackIntegration } = useUpdateSlackIntegration();
+  const { mutateAsync: deleteSlackIntegration } = useDeleteSlackIntegration();
+  const { popUp, handlePopUpToggle, handlePopUpOpen } = usePopUp([
+    "deleteSlackIntegration"
+  ] as const);
+
   const {
     control,
     watch,
@@ -65,6 +78,23 @@ export const NotificationTab = () => {
     });
   };
 
+  const handleIntegrationDelete = async () => {
+    if (!currentWorkspace || !slackIntegration) {
+      return;
+    }
+    await deleteSlackIntegration({
+      workspaceId: currentWorkspace.id,
+      id: slackIntegration.id
+    });
+
+    handlePopUpToggle("deleteSlackIntegration", false);
+
+    createNotification({
+      type: "success",
+      text: "Successfully deleted slack integration"
+    });
+  };
+
   useEffect(() => {
     if (slackIntegration) {
       setValue(
@@ -85,131 +115,147 @@ export const NotificationTab = () => {
   }
 
   return (
-    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-      <div className="flex justify-between">
-        <h2 className="mb-2 flex-1 text-xl font-semibold text-mineshaft-100">Slack Integration</h2>
-      </div>
-      <p className="mb-4 text-gray-400">
-        This integration allows you to send notifications to your Slack workspace in response to
-        events in your project.
-      </p>
-      {!slackIntegration && (
-        <Button
-          isLoading={isConnectToSlackLoading}
-          onClick={async () => {
-            setIsConnectToSlackLoading.on();
-            const slackInstallUrl = await fetchSlackInstallUrl(currentWorkspace?.id);
-            if (slackInstallUrl) {
-              router.push(slackInstallUrl);
-            }
-          }}
-        >
-          Connect to Slack
-        </Button>
-      )}
-      {slackIntegration && (
-        <form onSubmit={handleSubmit(handleIntegrationSave)}>
-          <div>Connected Slack workspace: {slackIntegration.teamName}</div>
-          <div className="mt-2 mb-6">
-            <Button colorSchema="secondary" size="xs">
-              Reinstall integration
-            </Button>
-            <Button colorSchema="secondary" size="xs" className="ml-2">
-              Delete
-            </Button>
-          </div>
-          <Controller
-            control={control}
-            name="isSecretRequestNotificationEnabled"
-            render={({ field, fieldState: { error } }) => {
-              return (
-                <FormControl
-                  isError={Boolean(error)}
-                  errorText={error?.message}
-                  className="mt-3 mb-2"
-                >
-                  <Switch
-                    id="secret-approval-notification"
-                    onCheckedChange={(value) => field.onChange(value)}
-                    isChecked={field.value}
-                  >
-                    <p className="w-full">Secret Approval Requests</p>
-                  </Switch>
-                </FormControl>
-              );
-            }}
-          />
-          {secretRequestNotifState && (
-            <Controller
-              control={control}
-              name="secretRequestChannels"
-              render={({ field, fieldState: { error } }) => (
-                <FormControl
-                  label="Slack channels"
-                  errorText={error?.message}
-                  isError={Boolean(error)}
-                  isRequired={false}
-                >
-                  <Input
-                    autoCorrect="off"
-                    spellCheck={false}
-                    placeholder="general, bot"
-                    {...field}
-                  />
-                </FormControl>
-              )}
-            />
-          )}
-          <Controller
-            control={control}
-            name="isAccessRequestNotificationEnabled"
-            render={({ field, fieldState: { error } }) => {
-              return (
-                <FormControl isError={Boolean(error)} errorText={error?.message} className="mb-2">
-                  <Switch
-                    id="access-request-notification"
-                    onCheckedChange={(value) => field.onChange(value)}
-                    isChecked={field.value}
-                  >
-                    <p className="w-full">Access Requests</p>
-                  </Switch>
-                </FormControl>
-              );
-            }}
-          />
-          {accessRequestNotifState && (
-            <Controller
-              control={control}
-              name="accessRequestChannels"
-              render={({ field, fieldState: { error } }) => (
-                <FormControl
-                  label="Slack channels"
-                  className="mt-0"
-                  errorText={error?.message}
-                  isError={Boolean(error)}
-                  isRequired={false}
-                >
-                  <Input
-                    autoCorrect="off"
-                    spellCheck={false}
-                    placeholder="general, bot"
-                    {...field}
-                  />
-                </FormControl>
-              )}
-            />
-          )}
+    <>
+      <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+        <div className="flex justify-between">
+          <h2 className="mb-2 flex-1 text-xl font-semibold text-mineshaft-100">
+            Slack Integration
+          </h2>
+        </div>
+        <p className="mb-4 text-gray-400">
+          This integration allows you to send notifications to your Slack workspace in response to
+          events in your project.
+        </p>
+        {!slackIntegration && (
           <Button
-            colorSchema="secondary"
-            className="mt-4"
-            type="submit"
-            isDisabled={!isDirty}
-            isLoading={isSubmitting}
+            isLoading={isConnectToSlackLoading}
+            onClick={async () => {
+              setIsConnectToSlackLoading.on();
+              const slackInstallUrl = await fetchSlackInstallUrl(currentWorkspace?.id);
+              if (slackInstallUrl) {
+                router.push(slackInstallUrl);
+              }
+            }}
           >
-            Save
+            Connect to Slack
           </Button>
-        </form>
-      )}
-    </div>
+        )}
+        {slackIntegration && (
+          <form onSubmit={handleSubmit(handleIntegrationSave)}>
+            <div>Connected Slack workspace: {slackIntegration.teamName}</div>
+            <div className="mt-2 mb-6">
+              <Button colorSchema="secondary" size="xs">
+                Reinstall integration
+              </Button>
+              <Button
+                colorSchema="secondary"
+                size="xs"
+                className="ml-2"
+                onClick={() => handlePopUpOpen("deleteSlackIntegration")}
+              >
+                Delete
+              </Button>
+            </div>
+            <Controller
+              control={control}
+              name="isSecretRequestNotificationEnabled"
+              render={({ field, fieldState: { error } }) => {
+                return (
+                  <FormControl
+                    isError={Boolean(error)}
+                    errorText={error?.message}
+                    className="mt-3 mb-2"
+                  >
+                    <Switch
+                      id="secret-approval-notification"
+                      onCheckedChange={(value) => field.onChange(value)}
+                      isChecked={field.value}
+                    >
+                      <p className="w-full">Secret Approval Requests</p>
+                    </Switch>
+                  </FormControl>
+                );
+              }}
+            />
+            {secretRequestNotifState && (
+              <Controller
+                control={control}
+                name="secretRequestChannels"
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    label="Slack channels"
+                    errorText={error?.message}
+                    isError={Boolean(error)}
+                    isRequired={false}
+                  >
+                    <Input
+                      autoCorrect="off"
+                      spellCheck={false}
+                      placeholder="general, bot"
+                      {...field}
+                    />
+                  </FormControl>
+                )}
+              />
+            )}
+            <Controller
+              control={control}
+              name="isAccessRequestNotificationEnabled"
+              render={({ field, fieldState: { error } }) => {
+                return (
+                  <FormControl isError={Boolean(error)} errorText={error?.message} className="mb-2">
+                    <Switch
+                      id="access-request-notification"
+                      onCheckedChange={(value) => field.onChange(value)}
+                      isChecked={field.value}
+                    >
+                      <p className="w-full">Access Requests</p>
+                    </Switch>
+                  </FormControl>
+                );
+              }}
+            />
+            {accessRequestNotifState && (
+              <Controller
+                control={control}
+                name="accessRequestChannels"
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    label="Slack channels"
+                    className="mt-0"
+                    errorText={error?.message}
+                    isError={Boolean(error)}
+                    isRequired={false}
+                  >
+                    <Input
+                      autoCorrect="off"
+                      spellCheck={false}
+                      placeholder="general, bot"
+                      {...field}
+                    />
+                  </FormControl>
+                )}
+              />
+            )}
+            <Button
+              colorSchema="secondary"
+              className="mt-4"
+              type="submit"
+              isDisabled={!isDirty}
+              isLoading={isSubmitting}
+            >
+              Save
+            </Button>
+          </form>
+        )}
+      </div>
+      <DeleteActionModal
+        isOpen={popUp.deleteSlackIntegration.isOpen}
+        title="Are you sure want to delete your Slack integration?"
+        onChange={(isOpen) => handlePopUpToggle("deleteSlackIntegration", isOpen)}
+        deleteKey="confirm"
+        onDeleteApproved={handleIntegrationDelete}
+      />
+    </>
   );
 };