From 3d4d94fff0a05cf2a69dcc9bb9ee9f404c5dbf8d Mon Sep 17 00:00:00 2001
From: Daryl Lim <5508348+daryllimyt@users.noreply.github.com>
Date: Thu, 11 Apr 2024 18:18:33 -0700
Subject: [PATCH] feat(ui): Update settings credentials page

---
 .../src/app/settings/credentials/page.tsx     | 140 +++++++---
 frontend/src/app/settings/layout.tsx          |   8 +-
 .../src/components/confirmation-dialog.tsx    |   2 +-
 .../src/components/new-credential-dialog.tsx  | 259 +++++++++++++-----
 4 files changed, 309 insertions(+), 100 deletions(-)

diff --git a/frontend/src/app/settings/credentials/page.tsx b/frontend/src/app/settings/credentials/page.tsx
index 46e7336a..9dcdc725 100644
--- a/frontend/src/app/settings/credentials/page.tsx
+++ b/frontend/src/app/settings/credentials/page.tsx
@@ -1,15 +1,32 @@
 "use client"
 
 import { useSession } from "@/providers/session"
+import { Label } from "@radix-ui/react-label"
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
-import { PlusCircle } from "lucide-react"
+import { PlusCircle, Trash2Icon } from "lucide-react"
 
 import { Secret } from "@/types/schemas"
 import { deleteSecret, fetchAllSecrets } from "@/lib/secrets"
 import { Button } from "@/components/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
 import { Input } from "@/components/ui/input"
 import { Separator } from "@/components/ui/separator"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table"
 import { toast } from "@/components/ui/use-toast"
+import { ConfirmationDialog } from "@/components/confirmation-dialog"
 import { CenteredSpinner } from "@/components/loading/spinner"
 import {
   NewCredentialsDialog,
@@ -63,45 +80,106 @@ export default function CredentialsPage() {
   }
 
   return (
-    <div className="space-y-6">
-      <div>
+    <div className="h-full space-y-6">
+      <div className="flex items-end justify-between">
         <h3 className="text-lg font-medium">Credentials</h3>
+        <NewCredentialsDialog>
+          <NewCredentialsDialogTrigger asChild>
+            <Button
+              variant="outline"
+              role="combobox"
+              className="ml-auto space-x-2"
+            >
+              <PlusCircle className="mr-2 h-4 w-4" />
+              Create New Secret
+            </Button>
+          </NewCredentialsDialogTrigger>
+        </NewCredentialsDialog>
       </div>
       <Separator />
-      <NewCredentialsDialog>
-        <NewCredentialsDialogTrigger asChild>
-          <Button
-            variant="outline"
-            role="combobox"
-            className="ml-auto space-x-2"
-          >
-            <PlusCircle className="mr-2 h-4 w-4" />
-            New
-          </Button>
-        </NewCredentialsDialogTrigger>
-      </NewCredentialsDialog>
+
       <div className="space-y-4">
-        {secrets ? (
+        {secrets?.length ? (
           secrets?.map((secret, idx) => (
-            <div
-              key={idx}
-              className="flex items-center justify-center space-x-4"
-            >
-              <Input className="text-sm" value={secret.name} readOnly />
-              <Input
-                className="text-sm"
-                value={`${secret.value.substring(0, 3)}...`}
-                readOnly
-              />
-              <Button variant="destructive" onClick={() => mutate(secret)}>
-                Delete
-              </Button>
-            </div>
+            <SecretsTable key={idx} secret={secret} deleteFn={mutate} />
           ))
         ) : (
-          <NoContent message="No credentials found" />
+          <NoContent
+            className="min-h-[10vh] text-sm"
+            message="No credentials found"
+          />
         )}
       </div>
     </div>
   )
 }
+
+function SecretsTable({
+  secret,
+  deleteFn,
+}: {
+  secret: Secret
+  deleteFn: (secret: Secret) => void
+}) {
+  return (
+    <Card className="w-full border">
+      <CardHeader>
+        <div className="flex items-end justify-between">
+          <div className="space-y-2">
+            <CardTitle>{secret.name}</CardTitle>
+            <CardDescription>
+              {secret.description || "No description."}
+            </CardDescription>
+          </div>
+          <ConfirmationDialog
+            title={`Delete ${secret.name}?`}
+            description="Are you sure you want to delete this secret? This action cannot be undone."
+            onConfirm={() => deleteFn(secret)}
+          >
+            <Button
+              size="sm"
+              variant="ghost"
+              className="border border-red-500/70 bg-red-500/10 text-red-500/80 hover:bg-red-500/20 hover:text-red-500"
+            >
+              <Trash2Icon className="size-3.5" />
+            </Button>
+          </ConfirmationDialog>
+        </div>
+      </CardHeader>
+      <CardContent>
+        <Table>
+          <TableHeader>
+            <TableRow className="grid h-6 grid-cols-2 text-xs">
+              <TableHead className="col-span-1">Key</TableHead>
+              <TableHead className="col-span-1">Value</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {secret.keys.map(({ key }, idx) => (
+              <TableRow key={idx} className="grid grid-cols-2">
+                <TableCell className="col-span-1">
+                  <Label htmlFor="stock-1" className="sr-only">
+                    Key
+                  </Label>
+                  <span className="text-sm">{key}</span>
+                </TableCell>
+                <TableCell className="col-span-1">
+                  <Label htmlFor="price-1" className="sr-only">
+                    Value
+                  </Label>
+                  <Input
+                    className="border-none p-0 text-sm shadow-none"
+                    type="password"
+                    value="DUMMY_VALUE"
+                    readOnly
+                    disabled
+                  />
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/frontend/src/app/settings/layout.tsx b/frontend/src/app/settings/layout.tsx
index 3d3b0084..4853baf0 100644
--- a/frontend/src/app/settings/layout.tsx
+++ b/frontend/src/app/settings/layout.tsx
@@ -30,9 +30,9 @@ export default async function SettingsLayout({
     data: { session },
   } = await supabase.auth.getSession()
   return (
-    <>
+    <div className="no-scrollbar h-screen max-h-screen overflow-auto">
       <Navbar session={session} />
-      <div className="container mt-16 space-y-6 p-10 pb-16 md:block">
+      <div className="container space-y-6 p-10 pb-16 pt-16 md:block">
         <div className="space-y-0.5">
           <h2 className="text-2xl font-bold tracking-tight">Settings</h2>
           <p className="text-muted-foreground">
@@ -44,9 +44,9 @@ export default async function SettingsLayout({
           <aside className="-mx-4 lg:w-1/5">
             <SidebarNav items={sidebarNavItems} />
           </aside>
-          <div className="flex-1 lg:max-w-2xl">{children}</div>
+          <div className="w-full flex-1">{children}</div>
         </div>
       </div>
-    </>
+    </div>
   )
 }
diff --git a/frontend/src/components/confirmation-dialog.tsx b/frontend/src/components/confirmation-dialog.tsx
index 46a57475..b64c712e 100644
--- a/frontend/src/components/confirmation-dialog.tsx
+++ b/frontend/src/components/confirmation-dialog.tsx
@@ -35,7 +35,7 @@ export function ConfirmationDialog({
         </AlertDialogHeader>
         <AlertDialogFooter>
           <AlertDialogCancel>Cancel</AlertDialogCancel>
-          <AlertDialogAction onClick={onConfirm}>Continue</AlertDialogAction>
+          <AlertDialogAction onClick={onConfirm}>Confirm</AlertDialogAction>
         </AlertDialogFooter>
       </AlertDialogContent>
     </AlertDialog>
diff --git a/frontend/src/components/new-credential-dialog.tsx b/frontend/src/components/new-credential-dialog.tsx
index c089cccd..429fd5ee 100644
--- a/frontend/src/components/new-credential-dialog.tsx
+++ b/frontend/src/components/new-credential-dialog.tsx
@@ -5,7 +5,10 @@ import { useSession } from "@/providers/session"
 import { zodResolver } from "@hookform/resolvers/zod"
 import { DialogProps } from "@radix-ui/react-dialog"
 import { useMutation, useQueryClient } from "@tanstack/react-query"
-import { useForm } from "react-hook-form"
+import { KeyRoundIcon, PlusCircle, Trash2Icon } from "lucide-react"
+import { ArrayPath, FieldPath, useFieldArray, useForm } from "react-hook-form"
+import SyntaxHighlighter from "react-syntax-highlighter"
+import { atomOneDark } from "react-syntax-highlighter/dist/esm/styles/hljs"
 
 import { Secret, secretSchema } from "@/types/schemas"
 import { createSecret } from "@/lib/secrets"
@@ -14,7 +17,6 @@ import {
   Dialog,
   DialogClose,
   DialogContent,
-  DialogDescription,
   DialogFooter,
   DialogHeader,
   DialogTitle,
@@ -23,8 +25,10 @@ import {
 import {
   Form,
   FormControl,
+  FormDescription,
   FormField,
   FormItem,
+  FormLabel,
   FormMessage,
 } from "@/components/ui/form"
 import { Input } from "@/components/ui/input"
@@ -44,8 +48,7 @@ export function NewCredentialsDialog({
   const queryClient = useQueryClient()
 
   const { mutate } = useMutation({
-    mutationFn: (secret: Secret) =>
-      createSecret(session, secret.name, secret.value),
+    mutationFn: (secret: Secret) => createSecret(session, secret),
     onSuccess: (data, variables, context) => {
       toast({
         title: "Added new secret",
@@ -62,75 +65,203 @@ export function NewCredentialsDialog({
     },
   })
 
-  const form = useForm<Secret>({
+  const methods = useForm<Secret>({
     resolver: zodResolver(secretSchema),
+    defaultValues: {
+      name: "",
+      type: "custom",
+      keys: [{ key: "", value: "" }],
+    },
   })
+  const { getValues, control, register, watch, trigger } = methods
 
-  const onSubmit = (values: Secret) => {
-    console.log("Submitting new secret", values)
+  const onSubmit = async () => {
+    const validated = await trigger()
+    if (!validated) {
+      console.error("Form validation failed")
+      return
+    }
+    const values = getValues()
     mutate(values)
   }
+  const inputKey = "keys"
+  const typedKey = inputKey as FieldPath<Secret>
+  const { fields, append, remove } = useFieldArray<Secret>({
+    control,
+    name: inputKey as ArrayPath<Secret>,
+  })
 
   return (
     <Dialog open={showDialog} onOpenChange={setShowDialog}>
-      {children}
-      <DialogContent className={className}>
-        <DialogHeader>
-          <DialogTitle>New credential</DialogTitle>
-          <DialogDescription>
-            Create a new secret. You can refer to this as{" "}
-            <code>{"{{ SECRETS.<SECRET_NAME>}}"}</code>
-          </DialogDescription>
-        </DialogHeader>
-        <Form {...form}>
-          <form
-            onSubmit={form.handleSubmit(onSubmit)}
-            className="flex space-x-4"
-          >
-            <FormField
-              control={form.control}
-              name="name"
-              render={({ field }) => (
-                <FormItem>
-                  <FormControl>
-                    <Input
-                      placeholder="Secret Name"
-                      {...field}
-                      value={form.watch("name", "")}
-                    />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-            <FormField
-              control={form.control}
-              name="value"
-              render={({ field }) => (
-                <FormItem>
-                  <FormControl>
-                    <Input
-                      placeholder="Secret Value"
-                      {...field}
-                      value={form.watch("value", "")}
-                      type="password"
-                    />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-            <DialogFooter>
-              <DialogClose asChild>
-                <Button type="submit" onClick={() => console.log("TEST")}>
-                  Add
-                </Button>
-              </DialogClose>
-            </DialogFooter>
-          </form>
-        </Form>
-      </DialogContent>
+      <Form {...methods}>
+        <form>
+          {children}
+          <DialogContent className={className}>
+            <DialogHeader>
+              <DialogTitle>Create New Secret</DialogTitle>
+              <div className="flex text-sm leading-relaxed text-muted-foreground">
+                <span>
+                  Create a secret that can have multiple key-value credential
+                  pairs. You can reference these secrets in your workflows
+                  through{" "}
+                  <InlineHLCode>
+                    {"{{ SECRETS.<my_secret>.<key>}}"}
+                  </InlineHLCode>
+                  {". "}For example, if I have a secret called with key
+                  &apos;GH_ACCESS_TOKEN&apos; I can reference this as{" "}
+                  <InlineHLCode>
+                    {"{{ SECRETS.my_github_secret.GH_ACCESS_TOKEN }}"}
+                  </InlineHLCode>
+                  {". "}
+                </span>
+              </div>
+            </DialogHeader>
+            <div className="space-y-4">
+              <FormField
+                key="name"
+                control={control}
+                name="name"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel className="text-sm">Name</FormLabel>
+                    <FormControl>
+                      <Input
+                        {...field}
+                        className="text-sm"
+                        placeholder="Name"
+                        value={watch("name", "")}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                key="description"
+                control={control}
+                name="description"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel className="text-sm">Description</FormLabel>
+                    <FormDescription className="text-sm">
+                      A description for this secret.
+                    </FormDescription>
+                    <FormControl>
+                      <Input
+                        {...field}
+                        className="text-sm"
+                        placeholder="Description"
+                        value={watch("description") ?? ""}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                key={inputKey}
+                control={control}
+                name={typedKey}
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel className="text-sm">Keys</FormLabel>
+                    <div className="flex flex-col space-y-2">
+                      {fields.map((field, index) => {
+                        return (
+                          <div
+                            key={`${field.id}.${index}`}
+                            className="flex w-full items-center gap-2"
+                          >
+                            <FormControl>
+                              <Input
+                                id={`key-${index}`}
+                                className="text-sm"
+                                {...register(
+                                  `${inputKey}.${index}.key` as const,
+                                  {
+                                    required: true,
+                                  }
+                                )}
+                                placeholder="Key"
+                              />
+                            </FormControl>
+                            <FormControl>
+                              <Input
+                                id={`value-${index}`}
+                                className="text-sm"
+                                {...register(
+                                  `${inputKey}.${index}.value` as const,
+                                  {
+                                    required: true,
+                                  }
+                                )}
+                                placeholder="Value"
+                                type="password"
+                              />
+                            </FormControl>
+
+                            <Button
+                              type="button"
+                              variant="ghost"
+                              className="border border-red-500/70 bg-red-500/10 text-red-500/80 hover:bg-red-500/20 hover:text-red-500"
+                              onClick={() => remove(index)}
+                              disabled={fields.length === 1}
+                            >
+                              <Trash2Icon className="size-3.5" />
+                            </Button>
+                          </div>
+                        )
+                      })}
+                      <Button
+                        type="button"
+                        variant="outline"
+                        onClick={() => append({ key: "", value: "" })}
+                        className="space-x-2 text-xs"
+                      >
+                        <PlusCircle className="mr-2 h-4 w-4" />
+                        Add Item
+                      </Button>
+                    </div>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <DialogFooter>
+                <DialogClose asChild>
+                  <Button
+                    role="combobox"
+                    className="ml-auto space-x-2"
+                    onClick={onSubmit}
+                  >
+                    <KeyRoundIcon className="mr-2 h-4 w-4" />
+                    Create Secret
+                  </Button>
+                </DialogClose>
+              </DialogFooter>
+            </div>
+          </DialogContent>
+        </form>
+      </Form>
     </Dialog>
   )
 }
+
+function InlineHLCode({ children }: { children: string }) {
+  return (
+    <SyntaxHighlighter
+      language="json"
+      style={atomOneDark}
+      codeTagProps={{ className: "text-foreground/60" }}
+      customStyle={{
+        display: "inline",
+        padding: "0.15rem",
+        backgroundColor: "rgba(0,0,0,0.1)",
+      }}
+      className="rounded-sm"
+    >
+      {children}
+    </SyntaxHighlighter>
+  )
+}
+
 export const NewCredentialsDialogTrigger = DialogTrigger