From 1ee9b07a2ce6a29687ca7d87f92b398bb394a10c Mon Sep 17 00:00:00 2001
From: Reinier van der Leer <pwuts@agpt.co>
Date: Fri, 11 Oct 2024 21:53:47 +0200
Subject: [PATCH] fix profile layout

---
 .../frontend/src/app/profile/page.tsx         | 108 ++++++++++--------
 .../integrations/credentials-input.tsx        |   4 +-
 2 files changed, 61 insertions(+), 51 deletions(-)

diff --git a/autogpt_platform/frontend/src/app/profile/page.tsx b/autogpt_platform/frontend/src/app/profile/page.tsx
index 54a9c985aa00..1284fd252849 100644
--- a/autogpt_platform/frontend/src/app/profile/page.tsx
+++ b/autogpt_platform/frontend/src/app/profile/page.tsx
@@ -10,6 +10,16 @@ import { CredentialsProvidersContext } from "@/components/integrations/credentia
 import { Separator } from "@/components/ui/separator";
 import AutoGPTServerAPI from "@/lib/autogpt-server-api";
 import { useToast } from "@/components/ui/use-toast";
+import { IconKey, IconUser } from "@/components/ui/icons";
+import { providerIcons } from "@/components/integrations/credentials-input";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
 
 export default function PrivatePage() {
   const { user, isLoading, error } = useUser();
@@ -61,60 +71,62 @@ export default function PrivatePage() {
     return null;
   }
 
+  const allCredentials = Object.values(providers).flatMap((provider) =>
+    [...provider.savedApiKeys, ...provider.savedOAuthCredentials].map(
+      (credentials) => ({
+        ...credentials,
+        provider: provider.provider,
+        providerName: provider.providerName,
+        ProviderIcon: providerIcons[provider.provider],
+        TypeIcon: { "oauth2": IconUser, "api_key": IconKey }[credentials.type],
+      }),
+    ),
+  );
+
   return (
     <div>
       <p>Hello {user.email}</p>
       <Button onClick={() => supabase.auth.signOut()}>Log out</Button>
-      <div>
-        {Object.entries(providers).map(([providerName, provider]) => {
-          return (
-            <div key={provider.provider} className="mh-2">
-              <Separator />
-              <div className="text-xl">{provider.providerName}</div>
-              {provider.savedApiKeys.length > 0 && (
-                <div>
-                  <div className="text-md">API Keys</div>
-                  {provider.savedApiKeys.map((apiKey) => (
-                    <div key={apiKey.id} className="flex flex-row">
-                      <p className="p-2">
-                        {apiKey.id} - {apiKey.title}
-                      </p>
-                      <Button
-                        variant="destructive"
-                        onClick={() =>
-                          removeCredentials(providerName, apiKey.id)
-                        }
-                      >
-                        Delete
-                      </Button>
-                    </div>
-                  ))}
+      <Separator className="my-4" />
+      <h2 className="mb-4">Connections & Credentials</h2>
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>Provider</TableHead>
+            <TableHead>Name</TableHead>
+            <TableHead>Actions</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {allCredentials.map((cred) => (
+            <TableRow key={cred.id}>
+              <TableCell>
+                <div className="flex items-center space-x-1.5">
+                  <cred.ProviderIcon className="h-4 w-4" />
+                  <strong>{cred.providerName}</strong>
                 </div>
-              )}
-              {provider.savedOAuthCredentials.length > 0 && (
-                <div>
-                  <div className="text-md">OAuth Credentials</div>
-                  {provider.savedOAuthCredentials.map((oauth) => (
-                    <div key={oauth.id} className="flex flex-row">
-                      <p className="p-2">
-                        {oauth.id} - {oauth.title}
-                      </p>
-                      <Button
-                        variant="destructive"
-                        onClick={() =>
-                          removeCredentials(providerName, oauth.id)
-                        }
-                      >
-                        Delete
-                      </Button>
-                    </div>
-                  ))}
+              </TableCell>
+              <TableCell>
+                <div className="flex h-full items-center space-x-1.5">
+                  <cred.TypeIcon />
+                  <span>{cred.title || cred.username}</span>
                 </div>
-              )}
-            </div>
-          );
-        })}
-      </div>
+                <small className="text-muted-foreground">
+                  {{oauth2: "OAuth2 credentials", api_key: "API key"}[cred.type]} - <code>{cred.id}</code>
+                </small>
+              </TableCell>
+              <TableCell>
+                <Button
+                  variant="destructive"
+                  onClick={() => removeCredentials(cred.provider, cred.id)}
+                >
+                  Delete
+                </Button>
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
     </div>
   );
 }
diff --git a/autogpt_platform/frontend/src/components/integrations/credentials-input.tsx b/autogpt_platform/frontend/src/components/integrations/credentials-input.tsx
index dca42cb1bcdc..9fe4d1dd574b 100644
--- a/autogpt_platform/frontend/src/components/integrations/credentials-input.tsx
+++ b/autogpt_platform/frontend/src/components/integrations/credentials-input.tsx
@@ -10,13 +10,11 @@ import { NotionLogoIcon } from "@radix-ui/react-icons";
 import { FaGithub, FaGoogle } from "react-icons/fa";
 import { FC, useMemo, useState } from "react";
 import {
-  APIKeyCredentials,
   CredentialsMetaInput,
 } from "@/lib/autogpt-server-api/types";
 import {
   IconKey,
   IconKeyPlus,
-  IconUser,
   IconUserPlus,
 } from "@/components/ui/icons";
 import {
@@ -45,7 +43,7 @@ import {
 } from "@/components/ui/select";
 
 // --8<-- [start:ProviderIconsEmbed]
-const providerIcons: Record<string, React.FC<{ className?: string }>> = {
+export const providerIcons: Record<string, React.FC<{ className?: string }>> = {
   github: FaGithub,
   google: FaGoogle,
   notion: NotionLogoIcon,