fix: Notion integration breaking when notion account is deleted (#4732)

apps/web/app/(app)/environments/[environmentId]/integrations/notion/components/ManageIntegration.tsx

@@ -5,8 +5,9 @@ import { getFormattedErrorMessage } from "@/lib/utils/helper";
 import { Button } from "@/modules/ui/components/button";
 import { DeleteDialog } from "@/modules/ui/components/delete-dialog";
 import { EmptySpaceFiller } from "@/modules/ui/components/empty-space-filler";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/modules/ui/components/tooltip";
 import { useTranslate } from "@tolgee/react";
-import { Trash2Icon } from "lucide-react";
+import { RefreshCcwIcon, Trash2Icon } from "lucide-react";
 import React, { useState } from "react";
 import toast from "react-hot-toast";
 import { timeSince } from "@formbricks/lib/time";
@@ -23,6 +24,7 @@ interface ManageIntegrationProps {
     React.SetStateAction<(TIntegrationNotionConfigData & { index: number }) | null>
   >;
   locale: TUserLocale;
+  handleNotionAuthorization: () => void;
 }
 
 export const ManageIntegration = ({
@@ -32,6 +34,7 @@ export const ManageIntegration = ({
   setIsConnected,
   setSelectedIntegration,
   locale,
+  handleNotionAuthorization,
 }: ManageIntegrationProps) => {
   const { t } = useTranslate();
   const [isDeleteIntegrationModalOpen, setIsDeleteIntegrationModalOpen] = useState(false);
@@ -68,7 +71,7 @@ export const ManageIntegration = ({
 
   return (
     <div className="mt-6 flex w-full flex-col items-center justify-center p-6">
-      <div className="flex w-full justify-end">
+      <div className="flex w-full justify-end space-x-2">
         <div className="mr-6 flex items-center">
           <span className="mr-4 h-4 w-4 rounded-full bg-green-600"></span>
           <span className="text-slate-500">
@@ -77,6 +80,17 @@ export const ManageIntegration = ({
             })}
           </span>
         </div>
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button variant="outline" onClick={handleNotionAuthorization}>
+                <RefreshCcwIcon className="mr-2 h-4 w-4" />
+                {t("environments.integrations.notion.update_connection")}
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>{t("environments.integrations.notion.update_connection_tooltip")}</TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
         <Button
           onClick={() => {
             setSelectedIntegration(null);

apps/web/app/(app)/environments/[environmentId]/integrations/notion/components/NotionWrapper.tsx

@@ -70,6 +70,7 @@ export const NotionWrapper = ({
             setIsConnected={setIsConnected}
             setSelectedIntegration={setSelectedIntegration}
             locale={locale}
+            handleNotionAuthorization={handleNotionAuthorization}
           />
         </>
       ) : (

apps/web/app/(app)/environments/[environmentId]/integrations/notion/page.tsx

@@ -56,7 +56,7 @@ const Page = async (props) => {
 
   let databasesArray: TIntegrationNotionDatabase[] = [];
   if (notionIntegration && (notionIntegration as TIntegrationNotion).config.key?.bot_id) {
-    databasesArray = await getNotionDatabases(environment.id);
+    databasesArray = (await getNotionDatabases(environment.id)) ?? [];
   }
   const locale = await findMatchingLocale();
 

apps/web/app/api/v1/integrations/notion/callback/route.ts

@@ -8,7 +8,8 @@ import {
   WEBAPP_URL,
 } from "@formbricks/lib/constants";
 import { symmetricEncrypt } from "@formbricks/lib/crypto";
-import { createOrUpdateIntegration } from "@formbricks/lib/integration/service";
+import { createOrUpdateIntegration, getIntegrationByType } from "@formbricks/lib/integration/service";
+import { TIntegrationNotionConfigData, TIntegrationNotionInput } from "@formbricks/types/integration/notion";
 
 export const GET = async (req: NextRequest) => {
   const url = req.url;
@@ -53,15 +54,19 @@ export const GET = async (req: NextRequest) => {
     const encryptedAccessToken = symmetricEncrypt(tokenData.access_token, ENCRYPTION_KEY!);
     tokenData.access_token = encryptedAccessToken;
 
-    const notionIntegration = {
+    const notionIntegration: TIntegrationNotionInput = {
       type: "notion" as "notion",
-      environment: environmentId,
       config: {
         key: tokenData,
         data: [],
       },
     };
 
+    const existingIntegration = await getIntegrationByType(environmentId, "notion");
+    if (existingIntegration) {
+      notionIntegration.config.data = existingIntegration.config.data as TIntegrationNotionConfigData[];
+    }
+
     const result = await createOrUpdateIntegration(environmentId, notionIntegration);
 
     if (result) {