add initial integrations page scaffold with supabase input

fiberplane · Nov 16, 2024 · e9b3838 · e9b3838
1 parent 4f1b09e
commit e9b3838
Show file tree

Hide file tree

Showing 2 changed files with 131 additions and 10 deletions.
diff --git a/studio/src/pages/SettingsPage/Integrations.tsx b/studio/src/pages/SettingsPage/Integrations.tsx
@@ -0,0 +1,107 @@
+import { Button } from "@/components/ui/button";
+import { cn } from "@/utils";
+import type { Settings } from "@fiberplane/fpx-types";
+import { Icon } from "@iconify/react";
+import { useState } from "react";
+import { Input } from "@/components/ui/input";
+
+export function Integrations({ settings: _settings }: { settings: Settings }) {
+  const [supabaseKey, setSupabaseKey] = useState("");
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const handleSupabaseConnect = () => {
+    // TODO: Implement Supabase connection logic
+    console.log("Connecting with key:", supabaseKey);
+    setSupabaseKey("");
+    setIsExpanded(false);
+  };
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <h3 className="text-lg font-medium">Integrations</h3>
+      </div>
+      <div className="space-y-4">
+        <IntegrationItem
+          label="Supabase"
+          description="Enable auth integration and user impersonation for endpoint testing"
+          button="Add Supabase"
+          onClick={() => setIsExpanded(!isExpanded)}
+          expanded={isExpanded}
+        >
+          <div className="mt-4 space-y-4">
+            <Input
+              type="password"
+              placeholder="Enter your Supabase API key"
+              value={supabaseKey}
+              onChange={(e) => setSupabaseKey(e.target.value)}
+            />
+            <div className="flex justify-end space-x-2">
+              <Button variant="outline" onClick={() => setIsExpanded(false)}>
+                Cancel
+              </Button>
+              <Button onClick={handleSupabaseConnect} disabled={!supabaseKey}>
+                Connect
+              </Button>
+            </div>
+          </div>
+        </IntegrationItem>
+      </div>
+    </div>
+  );
+}
+
+function IntegrationItem({
+  label,
+  description,
+  button,
+  onClick,
+  connected = false,
+  expanded = false,
+  children,
+}: {
+  label: string;
+  description: string;
+  button: string | React.ReactNode;
+  onClick: () => void;
+  connected?: boolean;
+  expanded?: boolean;
+  children?: React.ReactNode;
+}) {
+  return (
+    <div className={cn("rounded-lg border p-4")}>
+      <div className="flex items-center justify-between">
+        <div className="flex items-center space-x-4">
+          <div>
+            <p className="text-sm font-medium">{label}</p>
+            <p className="text-sm text-muted-foreground">{description}</p>
+          </div>
+        </div>
+        <Button
+          onClick={onClick}
+          variant={typeof button === "string" ? "default" : "link"}
+          className={cn({
+            "text-muted-foreground": connected,
+          })}
+        >
+          {typeof button === "string" ? (
+            connected ? (
+              <>
+                <Icon icon="lucide:check" className="w-4 h-4 mr-2" />
+                Connected
+              </>
+            ) : (
+              <>
+                <Icon icon={expanded ? "lucide:minus" : "lucide:plus"} className="w-4 h-4 mr-2" />
+                {button}
+              </>
+            )
+          ) : (
+            button
+          )}
+        </Button>
+      </div>
+      {expanded && children}
+    </div>
+  );
+}
diff --git a/studio/src/pages/SettingsPage/SettingsPage.tsx b/studio/src/pages/SettingsPage/SettingsPage.tsx
@@ -10,6 +10,7 @@ import { AISettingsForm } from "./AISettingsForm";
 import { FpxWorkerProxySettingsForm } from "./FpxWorkerProxySettingsForm";
 import { Profile } from "./Profile";
 import { ProxyRequestsSettingsForm } from "./ProxyRequestsSettingsForm";
+import { Integrations } from "./Integrations";
 
 export function SettingsPage() {
   const user = useUserInfo();
@@ -39,19 +40,22 @@ const PROFILE_TAB = "Profile";
 export const AI_TAB = "AI";
 const PROXY_REQUESTS_TAB = "Proxy Requests";
 const FPX_WORKER_PROXY_TAB = "Production Ingestion";
+const INTEGRATIONS_TAB = "Integrations";
 
 export const isValidSettingsTab = (
   tab: string,
 ): tab is
   | typeof PROFILE_TAB
   | typeof AI_TAB
   | typeof PROXY_REQUESTS_TAB
-  | typeof FPX_WORKER_PROXY_TAB => {
+  | typeof FPX_WORKER_PROXY_TAB
+  | typeof INTEGRATIONS_TAB => {
   return (
     tab === PROFILE_TAB ||
     tab === AI_TAB ||
     tab === PROXY_REQUESTS_TAB ||
-    tab === FPX_WORKER_PROXY_TAB
+    tab === FPX_WORKER_PROXY_TAB ||
+    tab === INTEGRATIONS_TAB
   );
 };
 
@@ -85,15 +89,15 @@ function SettingsLayout({
         )}
       >
         <TabsTrigger
-          className="whitespace-nowrap justify-start text-left pl-0 pr-4"
+          className="justify-start pl-0 pr-4 text-left whitespace-nowrap"
           value={PROFILE_TAB}
         >
           <Icon icon="lucide:user" className={cn("w-3.5 h-3.5 mr-1.5")} />
           You
         </TabsTrigger>
 
         <TabsTrigger
-          className="whitespace-nowrap justify-start text-left pl-0 pr-4"
+          className="justify-start pl-0 pr-4 text-left whitespace-nowrap"
           value={AI_TAB}
         >
           <Icon
@@ -103,14 +107,14 @@ function SettingsLayout({
           Request Autofill
         </TabsTrigger>
         <TabsTrigger
-          className="whitespace-nowrap justify-start text-left pl-0 pr-4"
+          className="justify-start pl-0 pr-4 text-left whitespace-nowrap"
           value={PROXY_REQUESTS_TAB}
         >
           <Icon icon="lucide:waypoints" className={cn("w-3.5 h-3.5 mr-1.5")} />
           Proxy
         </TabsTrigger>
         <TabsTrigger
-          className="whitespace-nowrap justify-start text-left pl-0 pr-4"
+          className="justify-start pl-0 pr-4 text-left whitespace-nowrap"
           value={FPX_WORKER_PROXY_TAB}
         >
           <Icon
@@ -119,6 +123,13 @@ function SettingsLayout({
           />
           Production
         </TabsTrigger>
+        <TabsTrigger
+          className="justify-start pl-0 pr-4 text-left whitespace-nowrap"
+          value={INTEGRATIONS_TAB}
+        >
+          <Icon icon="lucide:blocks" className={cn("w-3.5 h-3.5 mr-1.5")} />
+          Integrations
+        </TabsTrigger>
       </TabsList>
       <div className="w-full max-w-[680px] overflow-y-auto">
         <TabsContent className="m-0" value={PROFILE_TAB}>
@@ -133,6 +144,9 @@ function SettingsLayout({
         <TabsContent className="m-0" value={FPX_WORKER_PROXY_TAB}>
           <FpxWorkerProxySettingsForm settings={settings} />
         </TabsContent>
+        <TabsContent className="m-0" value={INTEGRATIONS_TAB}>
+          <Integrations settings={settings} />
+        </TabsContent>
       </div>
     </Tabs>
   );
@@ -143,10 +157,10 @@ function SettingsSkeleton() {
     <div className="grid gap-4 lg:grid-cols-[auto_1fr] lg:gap-4">
       <div className="w-full max-w-[680px] lg:w-[200px] space-y-2">
         <Skeleton className="w-full h-9" />
-        <Skeleton className="w-full h-9 hidden lg:block" />
-        <Skeleton className="w-full h-9 hidden lg:block" />
-        <Skeleton className="w-full h-9 hidden lg:block" />
-        <Skeleton className="w-full h-9 hidden lg:block" />
+        <Skeleton className="hidden w-full h-9 lg:block" />
+        <Skeleton className="hidden w-full h-9 lg:block" />
+        <Skeleton className="hidden w-full h-9 lg:block" />
+        <Skeleton className="hidden w-full h-9 lg:block" />
       </div>
       <div className="flex flex-col gap-2">
         <Skeleton className="w-full max-w-[680px] h-36" />