Merge pull request #1 from upstash/rollback

rollback to #a1f465a

.env.example

@@ -1,2 +1,2 @@
-UPSTASH_REDIS_REST_URL=
-UPSTASH_REDIS_REST_TOKEN=
+NEXT_PUBLIC_UPSTASH_REDIS_REST_URL=
+NEXT_PUBLIC_UPSTASH_REDIS_REST_TOKEN=

src/components/databrowser/components/add-key-modal.tsx

@@ -1,7 +1,6 @@
 import { useState } from "react"
 import { useDatabrowserStore } from "@/store"
 import { DATA_TYPES, type DataType } from "@/types"
-import { DialogDescription } from "@radix-ui/react-dialog"
 import { PlusIcon } from "@radix-ui/react-icons"
 import { Controller, useForm } from "react-hook-form"
 
@@ -80,9 +79,6 @@ export function AddKeyModal() {
         <DialogHeader>
           <DialogTitle>Create new key</DialogTitle>
         </DialogHeader>
-        <div className="sr-only">
-          <DialogDescription>Create new key</DialogDescription>
-        </div>
 
         <form className="mt-4" onSubmit={onSubmit}>
           <div className="flex gap-1">

src/components/databrowser/components/display/delete-alert-dialog.tsx

@@ -17,35 +17,34 @@ export function DeleteAlertDialog({
   onDeleteConfirm,
   open,
   onOpenChange,
-  deletionType,
 }: {
   children?: React.ReactNode
   onDeleteConfirm: MouseEventHandler
   open?: boolean
   onOpenChange?: (open: boolean) => void
-  deletionType: "item" | "key"
 }) {
   return (
     <AlertDialog open={open} onOpenChange={onOpenChange}>
       {children && <AlertDialogTrigger asChild>{children}</AlertDialogTrigger>}
 
       <AlertDialogContent>
         <AlertDialogHeader>
-          <AlertDialogTitle>
-            {deletionType === "item" ? "Delete Item" : "Delete Key"}
-          </AlertDialogTitle>
+          <AlertDialogTitle>Irreversible Action!</AlertDialogTitle>
           <AlertDialogDescription className="mt-5">
-            Are you sure you want to delete this {deletionType}?<br />
-            This action cannot be undone.
+            <span className="font-bold">This action CANNOT BE UNDONE.</span>
+            <br />
+            <br />
+            By proceeding, you will <span className="font-bold">PERMANENTLY REMOVE</span> your data
+            from our servers, resulting in complete and irreversible loss of your information.
           </AlertDialogDescription>
         </AlertDialogHeader>
         <AlertDialogFooter>
-          <AlertDialogCancel type="button">Cancel</AlertDialogCancel>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
           <AlertDialogAction
             className="bg-red-500 text-gray-50 hover:bg-red-600"
             onClick={onDeleteConfirm}
           >
-            Yes, Delete
+            Delete
           </AlertDialogAction>
         </AlertDialogFooter>
       </AlertDialogContent>

src/components/databrowser/components/display/display-list-edit.tsx

@@ -64,22 +64,17 @@ const ListEditForm = ({
     <FormProvider {...form}>
       <form onSubmit={onSubmit} className="flex flex-col gap-2">
         <div className="flex grow flex-col gap-2">
-          {type !== "list" && (
-            <FormItem name="key" height={type === "set" ? 250 : 100} label={keyLabel} />
-          )}
+          {type !== "list" && <FormItem name="key" label={keyLabel} />}
 
           {type === "zset" ? (
             <NumberFormItem name="value" label={valueLabel} />
           ) : (
-            type !== "set" && (
-              <FormItem name="value" height={type === "list" ? 250 : 100} label={valueLabel} />
-            )
+            type !== "set" && <FormItem name="value" label={valueLabel} />
           )}
         </div>
 
         <div className="flex justify-end gap-2">
           <Button
-            type="button"
             onClick={() => {
               setSelectedListItem(undefined)
             }}
@@ -127,21 +122,12 @@ const NumberFormItem = ({ name, label }: { name: string; label: string }) => {
   )
 }
 
-const FormItem = ({
-  name,
-  label,
-  height,
-}: {
-  name: string
-  label: string
-  isNumber?: boolean
-  height?: number
-}) => {
+const FormItem = ({ name, label }: { name: string; label: string; isNumber?: boolean }) => {
   const form = useFormContext()
   const { editor, selector } = useField({
     name,
     form,
-    height: height,
+    isEditorDynamic: true,
     showCopyButton: true,
   })
 

src/components/databrowser/components/display/display-list.tsx

@@ -39,11 +39,9 @@ export const ListDisplay = ({ dataKey, type }: { dataKey: string; type: ListData
         <InfiniteScroll query={query}>
           <div className="pr-3">
             <table className="w-full">
-              <ItemContextMenu dataKey={dataKey} type={type}>
-                <tbody>
-                  <ListItems dataKey={dataKey} type={type} query={query} />
-                </tbody>
-              </ItemContextMenu>
+              <tbody>
+                <ListItems dataKey={dataKey} type={type} query={query} />
+              </tbody>
             </table>
           </div>
         </InfiniteScroll>
@@ -52,7 +50,7 @@ export const ListDisplay = ({ dataKey, type }: { dataKey: string; type: ListData
   )
 }
 
-export type ItemData = {
+type ItemData = {
   key: string
   value?: string
 }
@@ -77,58 +75,56 @@ export const ListItems = ({
   return (
     <>
       {keys.map(({ key, value }, i) => (
-        <tr
+        <ItemContextMenu
           key={`${dataKey}-${key}-${i}`}
-          data-item-key={key}
-          data-item-value={value}
-          onClick={() => {
-            setSelectedListItem({ key, value })
-          }}
-          className="h-10 border-b border-b-zinc-100 hover:bg-zinc-50"
+          dataKey={dataKey}
+          type={type}
+          itemKey={key}
+          itemValue={value}
         >
-          <td
-            className={cn(
-              "cursor-pointer truncate px-3",
-              type === "list" || type === "stream" ? "w-32 min-w-24" : "max-w-0"
-            )}
+          <tr
+            onClick={() => {
+              setSelectedListItem({ key, value })
+            }}
+            className="h-10 border-b border-b-zinc-100 hover:bg-zinc-50"
           >
-            {key}
-          </td>
-          {value !== undefined && (
             <td
-              className={cn("cursor-pointer truncate px-3", type === "zset" ? "w-24" : "max-w-0")}
+              className={cn(
+                "cursor-pointer truncate px-3",
+                type === "list" || type === "stream" ? "w-32 min-w-24" : "max-w-0"
+              )}
             >
-              {value}
+              {key}
             </td>
-          )}
-          {type !== "stream" && (
-            <td
-              width={20}
-              className="px-3"
-              onClick={(e) => {
-                e.stopPropagation()
-              }}
-            >
-              <DeleteAlertDialog
-                deletionType="item"
-                onDeleteConfirm={(e) => {
-                  e.stopPropagation()
-                  editItem({
-                    type,
-                    dataKey,
-                    itemKey: key,
-                    // For deletion
-                    newKey: undefined,
-                  })
-                }}
+            {value !== undefined && (
+              <td
+                className={cn("cursor-pointer truncate px-3", type === "zset" ? "w-24" : "max-w-0")}
               >
-                <Button size="icon-sm" variant="secondary" onClick={(e) => e.stopPropagation()}>
-                  <IconTrash className="size-4 text-zinc-500" />
-                </Button>
-              </DeleteAlertDialog>
-            </td>
-          )}
-        </tr>
+                {value}
+              </td>
+            )}
+            {type !== "stream" && (
+              <td width={20} className="px-3">
+                <DeleteAlertDialog
+                  onDeleteConfirm={(e) => {
+                    e.stopPropagation()
+                    editItem({
+                      type,
+                      dataKey,
+                      itemKey: key,
+                      // For deletion
+                      newKey: undefined,
+                    })
+                  }}
+                >
+                  <Button size="icon-sm" variant="secondary" onClick={(e) => e.stopPropagation()}>
+                    <IconTrash className="size-4 text-zinc-500" />
+                  </Button>
+                </DeleteAlertDialog>
+              </td>
+            )}
+          </tr>
+        </ItemContextMenu>
       ))}
     </>
   )

src/components/databrowser/components/display/input/custom-editor.tsx

@@ -8,13 +8,13 @@ export const CustomEditor = ({
   language,
   value,
   onChange,
-  height,
+  maxDynamicHeight,
   showCopyButton,
 }: {
   language: string
   value: string
   onChange: (value: string) => void
-  height?: number
+  maxDynamicHeight?: number
   showCopyButton?: boolean
 }) => {
   const monaco = useMonaco()
@@ -31,9 +31,9 @@ export const CustomEditor = ({
 
   return (
     <div
-      className={cn("group/editor relative", height === undefined && "h-full p-2")}
+      className={cn("group/editor relative", maxDynamicHeight === undefined && "h-full p-2")}
       style={{
-        height: height,
+        height: maxDynamicHeight,
       }}
     >
       <Editor

src/components/databrowser/components/display/input/use-field.tsx

@@ -7,12 +7,12 @@ import { CustomEditor } from "./custom-editor"
 export const useField = ({
   name,
   form,
-  height,
+  isEditorDynamic = false,
   showCopyButton,
 }: {
   name: string
   form: UseFormReturn<any>
-  height?: number
+  isEditorDynamic?: boolean
   showCopyButton?: boolean
 }) => {
   const { field, fieldState } = useController<Record<string, string>>({
@@ -58,7 +58,7 @@ export const useField = ({
           language={contentType === "JSON" ? "json" : "plaintext"}
           value={field.value}
           onChange={field.onChange}
-          height={height}
+          maxDynamicHeight={isEditorDynamic ? 100 : undefined}
           showCopyButton={showCopyButton}
         />
       </>

src/components/databrowser/components/display/key-actions.tsx

@@ -36,7 +36,7 @@ export function KeyActions({ dataKey, content }: { dataKey: string; content?: st
             Copy content
           </DropdownMenuItem>
         )}
-        <DeleteAlertDialog deletionType="key" onDeleteConfirm={async () => await deleteKey(dataKey)}>
+        <DeleteAlertDialog onDeleteConfirm={async () => await deleteKey(dataKey)}>
           <DropdownMenuItem onSelect={(e) => e.preventDefault()}>Delete key</DropdownMenuItem>
         </DeleteAlertDialog>
       </DropdownMenuContent>

src/components/databrowser/components/item-context-menu.tsx

@@ -12,76 +12,56 @@ import { toast } from "@/components/ui/use-toast"
 
 import { useEditListItem } from "../hooks"
 import { DeleteAlertDialog } from "./display/delete-alert-dialog"
-import type { ItemData } from "./display/display-list"
 
 export const ItemContextMenu = ({
   children,
   dataKey,
+  itemKey,
+  itemValue,
   type,
 }: PropsWithChildren<{
   dataKey: string
   type: ListDataType
+  itemKey: string
+  itemValue?: string
 }>) => {
   const { mutate: editItem } = useEditListItem()
   const [isAlertOpen, setAlertOpen] = useState(false)
-  const [data, setData] = useState<ItemData | undefined>()
 
   return (
     <>
       <DeleteAlertDialog
-        deletionType="item"
         open={isAlertOpen}
         onOpenChange={setAlertOpen}
         onDeleteConfirm={(e) => {
           e.stopPropagation()
-          if (data) {
-            editItem({
-              type,
-              dataKey,
-              itemKey: data?.key,
-              // For deletion
-              newKey: undefined,
-            })
-          }
+          editItem({
+            type,
+            dataKey,
+            itemKey,
+            // For deletion
+            newKey: undefined,
+          })
           setAlertOpen(false)
         }}
       />
       <ContextMenu>
-        <ContextMenuTrigger
-          asChild
-          // NOTE: We did not put the ContextMenu on every key because of performance reasons
-          onContextMenu={(e) => {
-            const el = e.target as HTMLElement
-            const item = el.closest("[data-item-key]")
-
-            if (item && item instanceof HTMLElement && item.dataset.itemKey !== undefined) {
-              setData({
-                key: item.dataset.itemKey,
-                value: item.dataset.itemValue,
-              })
-            } else {
-              throw new Error("Key not found")
-            }
-          }}
-        >
-          {children}
-        </ContextMenuTrigger>
+        <ContextMenuTrigger asChild>{children}</ContextMenuTrigger>
         <ContextMenuContent>
           <ContextMenuItem
             onClick={() => {
-              if (!data) return
-              navigator.clipboard.writeText(data?.key)
+              navigator.clipboard.writeText(itemKey)
               toast({
                 description: "Key copied to clipboard",
               })
             }}
           >
             Copy key
           </ContextMenuItem>
-          {data?.value && (
+          {itemValue !== undefined && (
             <ContextMenuItem
               onClick={() => {
-                navigator.clipboard.writeText(data?.value ?? "")
+                navigator.clipboard.writeText(itemValue)
                 toast({
                   description: "Value copied to clipboard",
                 })