DX-2261: handle unknown key gracefully

src/components/databrowser/components/display/index.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable unicorn/no-negated-condition */
 
+import { DATA_TYPES, SIMPLE_DATA_TYPES, type SimpleDataType } from "@/types"
 import { useKeys, useKeyType } from "../../hooks/use-keys"
 import { ListDisplay } from "./display-list"
 import { EditorDisplay } from "./display-simple"
@@ -23,12 +24,16 @@ export const DataDisplay = () => {
         ) : (
           <div />
         )
+      ) : !DATA_TYPES.includes(type as any) ? (
+        <div className="flex h-full items-center justify-center">
+          <span className="text-zinc-500">Unrecognized key type: {type}</span>
+        </div>
       ) : (
         <>
-          {type === "string" || type === "json" ? (
-            <EditorDisplay dataKey={selectedKey} type={type} />
+          {SIMPLE_DATA_TYPES.includes(type as SimpleDataType) ? (
+            <EditorDisplay dataKey={selectedKey} type={type as SimpleDataType} />
           ) : (
-            <ListDisplay dataKey={selectedKey} type={type} />
+            <ListDisplay dataKey={selectedKey} type={type as Exclude<typeof type, SimpleDataType>} />
           )}
         </>
       )}

src/components/databrowser/components/sidebar/keys-list.tsx

@@ -1,6 +1,6 @@
 import { Fragment, useRef } from "react"
 import { useTab } from "@/tab-provider"
-import type { DataType, RedisKey } from "@/types"
+import type { RedisKey } from "@/types"
 
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
@@ -36,15 +36,17 @@ export const KeysList = () => {
   )
 }
 
-const keyStyles = {
+const keyStyles: Record<string, string> = {
   string: "border-sky-400 !bg-sky-50 text-sky-900",
   hash: "border-amber-400 !bg-amber-50 text-amber-900",
   set: "border-indigo-400 !bg-indigo-50 text-indigo-900",
   zset: "border-pink-400  !bg-pink-50 text-pink-900",
   json: "border-purple-400 !bg-purple-50 text-purple-900",
   list: "border-orange-400 !bg-orange-50 text-orange-900",
   stream: "border-green-400 !bg-green-50 text-green-900",
-} as Record<DataType, string>
+}
+
+const defaultKeyStyle = "border-gray-400 !bg-gray-50 text-gray-900"
 
 const KeyItem = ({
   data,
@@ -92,7 +94,7 @@ const KeyItem = ({
         "relative flex h-10 w-full items-center justify-start gap-2 px-3 py-0 !ring-0 focus-visible:bg-zinc-50",
         "-my-px select-none border border-transparent text-left",
         isKeySelected && "shadow-sm",
-        isKeySelected && keyStyles[dataType]
+        isKeySelected && (keyStyles[dataType] ?? defaultKeyStyle)
       )}
       onClick={handleClick}
     >

src/components/databrowser/components/type-tag.tsx

@@ -7,20 +7,21 @@ import {
   IconLayersIntersect,
   IconList,
   IconQuote,
+  IconQuestionMark,
 } from "@tabler/icons-react"
 import { cva, type VariantProps } from "class-variance-authority"
 
 import { cn } from "@/lib/utils"
 
-const iconsMap = {
+const iconsMap: Record<string, React.ReactNode> = {
   string: <IconQuote size={15} stroke={1.2} />,
   set: <IconLayersIntersect size={15} stroke={1.2} />,
   hash: <IconHash size={15} stroke={1.2} />,
   json: <IconCodeDots size={15} stroke={1.2} />,
   zset: <IconArrowsSort size={15} stroke={1.2} />,
   list: <IconList size={15} stroke={1.2} />,
   stream: <IconList size={15} stroke={1.2} />,
-} as const
+}
 
 const tagVariants = cva("inline-flex shrink-0 items-center rounded-md justify-center", {
   variants: {
@@ -32,14 +33,15 @@ const tagVariants = cva("inline-flex shrink-0 items-center rounded-md justify-ce
       json: "bg-purple-200 text-purple-800",
       list: "bg-orange-200 text-orange-800",
       stream: "bg-green-200 text-green-800",
+      default: "bg-gray-200 text-gray-800",
     },
     type: {
       icon: "size-5",
       badge: "h-6 px-2 uppercase whitespace-nowrap text-xs font-medium leading-none tracking-wide",
     },
   },
   defaultVariants: {
-    variant: "string",
+    variant: "default",
     type: "icon",
   },
 })
@@ -49,9 +51,14 @@ export interface TypeTagProps
     VariantProps<typeof tagVariants> {}
 
 export function TypeTag({ className, variant, type }: TypeTagProps) {
+  const defaultIcon = <IconQuestionMark size={15} stroke={1.2} />
+  const variantKey = variant && variant in iconsMap ? variant : "default"
+
   return (
-    <span className={cn(tagVariants({ variant, type, className }))}>
-      {type === "icon" ? iconsMap[variant as DataType] : DATA_TYPE_NAMES[variant as DataType]}
+    <span className={cn(tagVariants({ variant: variantKey, type, className }))}>
+      {type === "icon" 
+        ? (iconsMap[variant as string] ?? defaultIcon)
+        : (DATA_TYPE_NAMES[variant as DataType] ?? variant ?? "Unknown")}
     </span>
   )
 }