fix: airtable UX (#2865)

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

@@ -5,6 +5,7 @@ import {
   AddIntegrationModal,
   IntegrationModalInputs,
 } from "@/app/(app)/environments/[environmentId]/integrations/airtable/components/AddIntegrationModal";
+import { Trash2Icon } from "lucide-react";
 import { useState } from "react";
 import { toast } from "react-hot-toast";
 import { timeSince } from "@formbricks/lib/time";
@@ -74,11 +75,7 @@ export const ManageIntegration = (props: ManageIntegrationProps) => {
       <div className="flex w-full justify-end gap-x-6">
         <div className="flex items-center">
           <span className="mr-4 h-4 w-4 rounded-full bg-green-600"></span>
-          <span
-            className="cursor-pointer text-slate-500"
-            onClick={() => {
-              setIsDeleteIntegrationModalOpen(true);
-            }}>
+          <span className="cursor-pointer text-slate-500">
             Connected with {airtableIntegration.config.email}
           </span>
         </div>
@@ -136,6 +133,15 @@ export const ManageIntegration = (props: ManageIntegrationProps) => {
         </div>
       )}
 
+      <Button
+        variant="minimal"
+        onClick={() => setIsDeleteIntegrationModalOpen(true)}
+        className="mt-4"
+        StartIcon={Trash2Icon}
+        startIconClassName="h-5 w-5 mr-2">
+        Delete Integration
+      </Button>
+
       <DeleteDialog
         open={isDeleteIntegrationModalOpen}
         setOpen={setIsDeleteIntegrationModalOpen}

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

@@ -2,10 +2,11 @@ import { responses } from "@/app/lib/api/response";
 import { getServerSession } from "next-auth";
 import { NextRequest } from "next/server";
 import * as z from "zod";
-import { connectAirtable, fetchAirtableAuthToken } from "@formbricks/lib/airtable/service";
+import { fetchAirtableAuthToken } from "@formbricks/lib/airtable/service";
 import { authOptions } from "@formbricks/lib/authOptions";
 import { AIRTABLE_CLIENT_ID, WEBAPP_URL } from "@formbricks/lib/constants";
 import { hasUserEnvironmentAccess } from "@formbricks/lib/environment/auth";
+import { createOrUpdateIntegration } from "@formbricks/lib/integration/service";
 
 const getEmail = async (token: string) => {
   const req_ = await fetch("https://api.airtable.com/v0/meta/whoami", {
@@ -64,11 +65,16 @@ export const GET = async (req: NextRequest) => {
     }
     const email = await getEmail(key.access_token);
 
-    await connectAirtable({
-      environmentId,
-      email,
-      key,
-    });
+    const airtableIntegrationInput = {
+      type: "airtable" as "airtable",
+      environment: environmentId,
+      config: {
+        key,
+        data: [],
+        email,
+      },
+    };
+    await createOrUpdateIntegration(environmentId, airtableIntegrationInput);
     return Response.redirect(`${WEBAPP_URL}/environments/${environmentId}/integrations/airtable`);
   } catch (error) {
     console.error(error);

packages/lib/airtable/service.ts

@@ -1,12 +1,10 @@
 import { Prisma } from "@prisma/client";
-import { prisma } from "@formbricks/database";
 import { DatabaseError } from "@formbricks/types/errors";
 import { TIntegrationItem } from "@formbricks/types/integration";
 import {
   TIntegrationAirtable,
   TIntegrationAirtableConfigData,
   TIntegrationAirtableCredential,
-  TIntegrationAirtableInput,
   ZIntegrationAirtableBases,
   ZIntegrationAirtableCredential,
   ZIntegrationAirtableTables,
@@ -16,38 +14,6 @@ import {
 import { AIRTABLE_CLIENT_ID } from "../constants";
 import { createOrUpdateIntegration, deleteIntegration, getIntegrationByType } from "../integration/service";
 
-interface ConnectAirtableOptions {
-  environmentId: string;
-  key: TIntegrationAirtableCredential;
-  email: string;
-}
-
-export const connectAirtable = async ({ email, environmentId, key }: ConnectAirtableOptions) => {
-  const type: TIntegrationAirtableInput["type"] = "airtable";
-
-  const baseData: TIntegrationAirtableInput = {
-    type,
-    config: { data: [], key, email },
-  };
-
-  await prisma.integration.upsert({
-    where: {
-      type_environmentId: {
-        environmentId,
-        type,
-      },
-    },
-    update: {
-      ...baseData,
-      environment: { connect: { id: environmentId } },
-    },
-    create: {
-      ...baseData,
-      environment: { connect: { id: environmentId } },
-    },
-  });
-};
-
 export const getBases = async (key: string) => {
   const req = await fetch("https://api.airtable.com/v0/meta/bases", {
     headers: {