Skip to content

Commit 4a10d82

Browse files
ytkimirtiytkimirti
authored
Merge pull request #1 from upstash/rollback
rollback to #a1f465a
2 parents 46abc38 + 9003530 commit 4a10d82

15 files changed

+164
-223
lines changed

Diff for: ‎.env.example

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
1-
UPSTASH_REDIS_REST_URL=
2-
UPSTASH_REDIS_REST_TOKEN=
1+
NEXT_PUBLIC_UPSTASH_REDIS_REST_URL=
2+
NEXT_PUBLIC_UPSTASH_REDIS_REST_TOKEN=

Diff for: ‎src/components/databrowser/components/add-key-modal.tsx

-4
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { useState } from "react"
22
import { useDatabrowserStore } from "@/store"
33
import { DATA_TYPES, type DataType } from "@/types"
4-
import { DialogDescription } from "@radix-ui/react-dialog"
54
import { PlusIcon } from "@radix-ui/react-icons"
65
import { Controller, useForm } from "react-hook-form"
76

@@ -80,9 +79,6 @@ export function AddKeyModal() {
8079
<DialogHeader>
8180
<DialogTitle>Create new key</DialogTitle>
8281
</DialogHeader>
83-
<div className="sr-only">
84-
<DialogDescription>Create new key</DialogDescription>
85-
</div>
8682

8783
<form className="mt-4" onSubmit={onSubmit}>
8884
<div className="flex gap-1">

Diff for: ‎src/components/databrowser/components/display/delete-alert-dialog.tsx

+8-9
Original file line numberDiff line numberDiff line change
@@ -17,35 +17,34 @@ export function DeleteAlertDialog({
1717
onDeleteConfirm,
1818
open,
1919
onOpenChange,
20-
deletionType,
2120
}: {
2221
children?: React.ReactNode
2322
onDeleteConfirm: MouseEventHandler
2423
open?: boolean
2524
onOpenChange?: (open: boolean) => void
26-
deletionType: "item" | "key"
2725
}) {
2826
return (
2927
<AlertDialog open={open} onOpenChange={onOpenChange}>
3028
{children && <AlertDialogTrigger asChild>{children}</AlertDialogTrigger>}
3129

3230
<AlertDialogContent>
3331
<AlertDialogHeader>
34-
<AlertDialogTitle>
35-
{deletionType === "item" ? "Delete Item" : "Delete Key"}
36-
</AlertDialogTitle>
32+
<AlertDialogTitle>Irreversible Action!</AlertDialogTitle>
3733
<AlertDialogDescription className="mt-5">
38-
Are you sure you want to delete this {deletionType}?<br />
39-
This action cannot be undone.
34+
<span className="font-bold">This action CANNOT BE UNDONE.</span>
35+
<br />
36+
<br />
37+
By proceeding, you will <span className="font-bold">PERMANENTLY REMOVE</span> your data
38+
from our servers, resulting in complete and irreversible loss of your information.
4039
</AlertDialogDescription>
4140
</AlertDialogHeader>
4241
<AlertDialogFooter>
43-
<AlertDialogCancel type="button">Cancel</AlertDialogCancel>
42+
<AlertDialogCancel>Cancel</AlertDialogCancel>
4443
<AlertDialogAction
4544
className="bg-red-500 text-gray-50 hover:bg-red-600"
4645
onClick={onDeleteConfirm}
4746
>
48-
Yes, Delete
47+
Delete
4948
</AlertDialogAction>
5049
</AlertDialogFooter>
5150
</AlertDialogContent>

Diff for: ‎src/components/databrowser/components/display/display-list-edit.tsx

+4-18
Original file line numberDiff line numberDiff line change
@@ -64,22 +64,17 @@ const ListEditForm = ({
6464
<FormProvider {...form}>
6565
<form onSubmit={onSubmit} className="flex flex-col gap-2">
6666
<div className="flex grow flex-col gap-2">
67-
{type !== "list" && (
68-
<FormItem name="key" height={type === "set" ? 250 : 100} label={keyLabel} />
69-
)}
67+
{type !== "list" && <FormItem name="key" label={keyLabel} />}
7068

7169
{type === "zset" ? (
7270
<NumberFormItem name="value" label={valueLabel} />
7371
) : (
74-
type !== "set" && (
75-
<FormItem name="value" height={type === "list" ? 250 : 100} label={valueLabel} />
76-
)
72+
type !== "set" && <FormItem name="value" label={valueLabel} />
7773
)}
7874
</div>
7975

8076
<div className="flex justify-end gap-2">
8177
<Button
82-
type="button"
8378
onClick={() => {
8479
setSelectedListItem(undefined)
8580
}}
@@ -127,21 +122,12 @@ const NumberFormItem = ({ name, label }: { name: string; label: string }) => {
127122
)
128123
}
129124

130-
const FormItem = ({
131-
name,
132-
label,
133-
height,
134-
}: {
135-
name: string
136-
label: string
137-
isNumber?: boolean
138-
height?: number
139-
}) => {
125+
const FormItem = ({ name, label }: { name: string; label: string; isNumber?: boolean }) => {
140126
const form = useFormContext()
141127
const { editor, selector } = useField({
142128
name,
143129
form,
144-
height: height,
130+
isEditorDynamic: true,
145131
showCopyButton: true,
146132
})
147133

Diff for: ‎src/components/databrowser/components/display/display-list.tsx

+47-51
Original file line numberDiff line numberDiff line change
@@ -39,11 +39,9 @@ export const ListDisplay = ({ dataKey, type }: { dataKey: string; type: ListData
3939
<InfiniteScroll query={query}>
4040
<div className="pr-3">
4141
<table className="w-full">
42-
<ItemContextMenu dataKey={dataKey} type={type}>
43-
<tbody>
44-
<ListItems dataKey={dataKey} type={type} query={query} />
45-
</tbody>
46-
</ItemContextMenu>
42+
<tbody>
43+
<ListItems dataKey={dataKey} type={type} query={query} />
44+
</tbody>
4745
</table>
4846
</div>
4947
</InfiniteScroll>
@@ -52,7 +50,7 @@ export const ListDisplay = ({ dataKey, type }: { dataKey: string; type: ListData
5250
)
5351
}
5452

55-
export type ItemData = {
53+
type ItemData = {
5654
key: string
5755
value?: string
5856
}
@@ -77,58 +75,56 @@ export const ListItems = ({
7775
return (
7876
<>
7977
{keys.map(({ key, value }, i) => (
80-
<tr
78+
<ItemContextMenu
8179
key={`${dataKey}-${key}-${i}`}
82-
data-item-key={key}
83-
data-item-value={value}
84-
onClick={() => {
85-
setSelectedListItem({ key, value })
86-
}}
87-
className="h-10 border-b border-b-zinc-100 hover:bg-zinc-50"
80+
dataKey={dataKey}
81+
type={type}
82+
itemKey={key}
83+
itemValue={value}
8884
>
89-
<td
90-
className={cn(
91-
"cursor-pointer truncate px-3",
92-
type === "list" || type === "stream" ? "w-32 min-w-24" : "max-w-0"
93-
)}
85+
<tr
86+
onClick={() => {
87+
setSelectedListItem({ key, value })
88+
}}
89+
className="h-10 border-b border-b-zinc-100 hover:bg-zinc-50"
9490
>
95-
{key}
96-
</td>
97-
{value !== undefined && (
9891
<td
99-
className={cn("cursor-pointer truncate px-3", type === "zset" ? "w-24" : "max-w-0")}
92+
className={cn(
93+
"cursor-pointer truncate px-3",
94+
type === "list" || type === "stream" ? "w-32 min-w-24" : "max-w-0"
95+
)}
10096
>
101-
{value}
97+
{key}
10298
</td>
103-
)}
104-
{type !== "stream" && (
105-
<td
106-
width={20}
107-
className="px-3"
108-
onClick={(e) => {
109-
e.stopPropagation()
110-
}}
111-
>
112-
<DeleteAlertDialog
113-
deletionType="item"
114-
onDeleteConfirm={(e) => {
115-
e.stopPropagation()
116-
editItem({
117-
type,
118-
dataKey,
119-
itemKey: key,
120-
// For deletion
121-
newKey: undefined,
122-
})
123-
}}
99+
{value !== undefined && (
100+
<td
101+
className={cn("cursor-pointer truncate px-3", type === "zset" ? "w-24" : "max-w-0")}
124102
>
125-
<Button size="icon-sm" variant="secondary" onClick={(e) => e.stopPropagation()}>
126-
<IconTrash className="size-4 text-zinc-500" />
127-
</Button>
128-
</DeleteAlertDialog>
129-
</td>
130-
)}
131-
</tr>
103+
{value}
104+
</td>
105+
)}
106+
{type !== "stream" && (
107+
<td width={20} className="px-3">
108+
<DeleteAlertDialog
109+
onDeleteConfirm={(e) => {
110+
e.stopPropagation()
111+
editItem({
112+
type,
113+
dataKey,
114+
itemKey: key,
115+
// For deletion
116+
newKey: undefined,
117+
})
118+
}}
119+
>
120+
<Button size="icon-sm" variant="secondary" onClick={(e) => e.stopPropagation()}>
121+
<IconTrash className="size-4 text-zinc-500" />
122+
</Button>
123+
</DeleteAlertDialog>
124+
</td>
125+
)}
126+
</tr>
127+
</ItemContextMenu>
132128
))}
133129
</>
134130
)

Diff for: ‎src/components/databrowser/components/display/input/custom-editor.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,13 @@ export const CustomEditor = ({
88
language,
99
value,
1010
onChange,
11-
height,
11+
maxDynamicHeight,
1212
showCopyButton,
1313
}: {
1414
language: string
1515
value: string
1616
onChange: (value: string) => void
17-
height?: number
17+
maxDynamicHeight?: number
1818
showCopyButton?: boolean
1919
}) => {
2020
const monaco = useMonaco()
@@ -31,9 +31,9 @@ export const CustomEditor = ({
3131

3232
return (
3333
<div
34-
className={cn("group/editor relative", height === undefined && "h-full p-2")}
34+
className={cn("group/editor relative", maxDynamicHeight === undefined && "h-full p-2")}
3535
style={{
36-
height: height,
36+
height: maxDynamicHeight,
3737
}}
3838
>
3939
<Editor

Diff for: ‎src/components/databrowser/components/display/input/use-field.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,12 @@ import { CustomEditor } from "./custom-editor"
77
export const useField = ({
88
name,
99
form,
10-
height,
10+
isEditorDynamic = false,
1111
showCopyButton,
1212
}: {
1313
name: string
1414
form: UseFormReturn<any>
15-
height?: number
15+
isEditorDynamic?: boolean
1616
showCopyButton?: boolean
1717
}) => {
1818
const { field, fieldState } = useController<Record<string, string>>({
@@ -58,7 +58,7 @@ export const useField = ({
5858
language={contentType === "JSON" ? "json" : "plaintext"}
5959
value={field.value}
6060
onChange={field.onChange}
61-
height={height}
61+
maxDynamicHeight={isEditorDynamic ? 100 : undefined}
6262
showCopyButton={showCopyButton}
6363
/>
6464
</>

Diff for: ‎src/components/databrowser/components/display/key-actions.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ export function KeyActions({ dataKey, content }: { dataKey: string; content?: st
3636
Copy content
3737
</DropdownMenuItem>
3838
)}
39-
<DeleteAlertDialog deletionType="key" onDeleteConfirm={async () => await deleteKey(dataKey)}>
39+
<DeleteAlertDialog onDeleteConfirm={async () => await deleteKey(dataKey)}>
4040
<DropdownMenuItem onSelect={(e) => e.preventDefault()}>Delete key</DropdownMenuItem>
4141
</DeleteAlertDialog>
4242
</DropdownMenuContent>

Diff for: ‎src/components/databrowser/components/item-context-menu.tsx

+15-35
Original file line numberDiff line numberDiff line change
@@ -12,76 +12,56 @@ import { toast } from "@/components/ui/use-toast"
1212

1313
import { useEditListItem } from "../hooks"
1414
import { DeleteAlertDialog } from "./display/delete-alert-dialog"
15-
import type { ItemData } from "./display/display-list"
1615

1716
export const ItemContextMenu = ({
1817
children,
1918
dataKey,
19+
itemKey,
20+
itemValue,
2021
type,
2122
}: PropsWithChildren<{
2223
dataKey: string
2324
type: ListDataType
25+
itemKey: string
26+
itemValue?: string
2427
}>) => {
2528
const { mutate: editItem } = useEditListItem()
2629
const [isAlertOpen, setAlertOpen] = useState(false)
27-
const [data, setData] = useState<ItemData | undefined>()
2830

2931
return (
3032
<>
3133
<DeleteAlertDialog
32-
deletionType="item"
3334
open={isAlertOpen}
3435
onOpenChange={setAlertOpen}
3536
onDeleteConfirm={(e) => {
3637
e.stopPropagation()
37-
if (data) {
38-
editItem({
39-
type,
40-
dataKey,
41-
itemKey: data?.key,
42-
// For deletion
43-
newKey: undefined,
44-
})
45-
}
38+
editItem({
39+
type,
40+
dataKey,
41+
itemKey,
42+
// For deletion
43+
newKey: undefined,
44+
})
4645
setAlertOpen(false)
4746
}}
4847
/>
4948
<ContextMenu>
50-
<ContextMenuTrigger
51-
asChild
52-
// NOTE: We did not put the ContextMenu on every key because of performance reasons
53-
onContextMenu={(e) => {
54-
const el = e.target as HTMLElement
55-
const item = el.closest("[data-item-key]")
56-
57-
if (item && item instanceof HTMLElement && item.dataset.itemKey !== undefined) {
58-
setData({
59-
key: item.dataset.itemKey,
60-
value: item.dataset.itemValue,
61-
})
62-
} else {
63-
throw new Error("Key not found")
64-
}
65-
}}
66-
>
67-
{children}
68-
</ContextMenuTrigger>
49+
<ContextMenuTrigger asChild>{children}</ContextMenuTrigger>
6950
<ContextMenuContent>
7051
<ContextMenuItem
7152
onClick={() => {
72-
if (!data) return
73-
navigator.clipboard.writeText(data?.key)
53+
navigator.clipboard.writeText(itemKey)
7454
toast({
7555
description: "Key copied to clipboard",
7656
})
7757
}}
7858
>
7959
Copy key
8060
</ContextMenuItem>
81-
{data?.value && (
61+
{itemValue !== undefined && (
8262
<ContextMenuItem
8363
onClick={() => {
84-
navigator.clipboard.writeText(data?.value ?? "")
64+
navigator.clipboard.writeText(itemValue)
8565
toast({
8666
description: "Value copied to clipboard",
8767
})

0 commit comments

Comments
 (0)