DX-2455: fix: delete item instead of key when a list item is selected (#49)

* fix: display area badges scroll bug

* feat: bump redis to rc.12

* feat: update readme file to include details about project internals

* refactor: schema parser to support more errors

* fix: update query types and remove $ne

* fix: many minor fixes for redis search

* fix: loading state of query wizard

* fix: minor style fixes for search-empty-state

* fix: delete item instead of key when a list item is selected

- Add ItemActions component with item-level delete that calls useEditListItem with newKey: undefined
- Show ItemActions instead of KeyActions when selectedListItem is set (hash/list/set/zset)
- Hide "+" add button when an item is selected; hide all actions for stream items
- Pass name to DeleteKeyModal so the modal shows exactly what will be deleted
- Improve DeleteKeyModal description: "delete key/item "name"" or "item at index N" for lists

* fix: allow adding new entries to stream keys

- Make stream form inputs editable when adding a new entry (isNew)
- Filter empty strings before passing field array to transformArray to avoid even-length errors

* fix: show "Add Item" button text when adding a new list item

Author: ytkimirti

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

@@ -22,6 +22,8 @@ export function DeleteKeyModal({
   deletionType,
   count = 1,
   showReindex,
+  name,
+  nameLabel,
 }: {
   children?: React.ReactNode
   onDeleteConfirm: (e: MouseEvent, options?: { reindex?: boolean }) => void | Promise<void>
@@ -30,6 +32,8 @@ export function DeleteKeyModal({
   deletionType: "item" | "key"
   count?: number
   showReindex?: boolean
+  name?: string
+  nameLabel?: string
 }) {
   const isPlural = count > 1
   const itemLabel = deletionType === "item" ? "Item" : "Key"
@@ -53,7 +57,19 @@ export function DeleteKeyModal({
           </DialogTitle>
           <DialogDescription className="mt-5">
             Are you sure you want to delete{" "}
-            {isPlural ? `these ${count} ${deletionType}s` : `this ${deletionType}`}?<br />
+            {name ? (
+              <>
+                {`${nameLabel ?? deletionType} `}
+                <span className="font-medium text-zinc-900 dark:text-zinc-100">
+                  {nameLabel ? name : `"${name}"`}
+                </span>
+              </>
+            ) : isPlural ? (
+              `these ${count} ${deletionType}s`
+            ) : (
+              `this ${deletionType}`
+            )}
+            ?<br />
             This action cannot be undone.
           </DialogDescription>
         </DialogHeader>

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

@@ -1,5 +1,5 @@
 import { useTab } from "@/tab-provider"
-import { type DataType } from "@/types"
+import { type DataType, type ListDataType } from "@/types"
 import { IconPlus } from "@tabler/icons-react"
 
 import { Button } from "@/components/ui/button"
@@ -8,6 +8,7 @@ import { SimpleTooltip } from "@/components/ui/tooltip"
 
 import { TypeTag } from "../type-tag"
 import { HeaderTTLBadge, LengthBadge, SizeBadge } from "./header-badges"
+import { ItemActions } from "./item-actions"
 import { KeyActions } from "./key-actions"
 
 export const DisplayHeader = ({
@@ -21,7 +22,10 @@ export const DisplayHeader = ({
   type: DataType
   hideTypeTag?: boolean
 }) => {
-  const { setSelectedListItem } = useTab()
+  const { setSelectedListItem, selectedListItem } = useTab()
+
+  const isListType = type !== "string" && type !== "json" && type !== "search" && type !== "stream"
+  const showItemActions = isListType && Boolean(selectedListItem)
 
   const handleAddItem = () => {
     setSelectedListItem({ key: type === "stream" ? "*" : "", isNew: true })
@@ -40,15 +44,19 @@ export const DisplayHeader = ({
         </h2>
 
         <div className="flex items-center gap-1">
-          {type !== "string" && type !== "json" && type !== "search" && (
+          {type !== "string" && type !== "json" && type !== "search" && !showItemActions && (
             <SimpleTooltip content="Add item">
               <Button onClick={handleAddItem} size="icon-sm" aria-label="Add item">
                 <IconPlus className="size-4 text-zinc-500 dark:text-zinc-600" />
               </Button>
             </SimpleTooltip>
           )}
 
-          <KeyActions dataKey={dataKey} content={content} type={type} />
+          {showItemActions ? (
+            <ItemActions dataKey={dataKey} type={type as ListDataType} />
+          ) : selectedListItem ? undefined : (
+            <KeyActions dataKey={dataKey} content={content} type={type} />
+          )}
         </div>
       </div>
 

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

@@ -85,12 +85,17 @@ const ListEditForm = ({
           {type === "zset" && <NumberFormItem name="value" label={valueLabel} />}
 
           {type !== "list" && (
-            <FormItem readOnly={type === "stream"} name="key" label={keyLabel} data={itemKey} />
+            <FormItem
+              readOnly={type === "stream" && !isNew}
+              name="key"
+              label={keyLabel}
+              data={itemKey}
+            />
           )}
 
           {type !== "set" && type !== "zset" && (
             <FormItem
-              readOnly={type === "stream"}
+              readOnly={type === "stream" && !isNew}
               name="value"
               label={valueLabel}
               data={itemValue ?? ""}
@@ -129,8 +134,8 @@ const ListEditForm = ({
                   (type === "stream" && !isNew)
                 }
               >
-                <Spinner isLoading={isPending} isLoadingText={"Saving"}>
-                  Save
+                <Spinner isLoading={isPending} isLoadingText={isNew ? "Adding" : "Saving"}>
+                  {isNew ? "Add Item" : "Save"}
                 </Spinner>
               </Button>
             </SimpleTooltip>

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

@@ -0,0 +1,58 @@
+import { useTab } from "@/tab-provider"
+import type { ListDataType } from "@/types"
+import { IconDotsVertical } from "@tabler/icons-react"
+
+import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+
+import { useEditListItem } from "../../hooks/use-edit-list-item"
+import { DeleteKeyModal } from "../delete-key-modal"
+
+export function ItemActions({ dataKey, type }: { dataKey: string; type: ListDataType }) {
+  const { selectedListItem, setSelectedListItem } = useTab()
+  const { mutateAsync: editItem } = useEditListItem()
+
+  if (!selectedListItem) return
+
+  return (
+    <DropdownMenu modal={false}>
+      <DropdownMenuTrigger asChild>
+        <Button size="icon-sm" aria-label="Item actions">
+          <IconDotsVertical
+            className="size-4 text-zinc-500 dark:text-zinc-600"
+            fill="rgb(var(--color-zinc-500))"
+          />
+        </Button>
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent align="end">
+        <DeleteKeyModal
+          deletionType="item"
+          name={selectedListItem.key}
+          nameLabel={type === "list" ? "item at index" : undefined}
+          onDeleteConfirm={async () => {
+            await editItem({
+              type,
+              dataKey,
+              itemKey: selectedListItem.key,
+              newKey: undefined,
+            })
+            setSelectedListItem(undefined)
+          }}
+        >
+          <DropdownMenuItem
+            className="text-red-500 focus:bg-red-500 focus:text-white"
+            onSelect={(e) => e.preventDefault()}
+          >
+            Delete item
+          </DropdownMenuItem>
+        </DeleteKeyModal>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}

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

@@ -58,6 +58,7 @@ export function KeyActions({
         </DropdownMenuItem>
         <DeleteKeyModal
           deletionType="key"
+          name={dataKey}
           showReindex={isValuesSearchSelected && type !== "search"}
           onDeleteConfirm={async (_e, options) => {
             await deleteKey({ keys: [dataKey], reindex: options?.reindex })

src/components/databrowser/hooks/use-edit-list-item.tsx

@@ -85,7 +85,7 @@ export const useEditListItem = () => {
         }
         case "stream": {
           if (!isNew || !newKey) throw new Error("Stream data type is not mutable")
-          const opts = transformArray(newValue?.split("\n") ?? []).map(
+          const opts = transformArray((newValue?.split("\n") ?? []).filter(Boolean)).map(
             ({ key, value }) => [key, value] as const
           )