feat: make editors in stream types readonly

Author: ytkimirti

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

@@ -65,14 +65,24 @@ const ListEditForm = ({
       <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} />
+            <FormItem
+              readOnly={type === "stream"}
+              name="key"
+              height={type === "set" ? 250 : 100}
+              label={keyLabel}
+            />
           )}
 
           {type === "zset" ? (
             <NumberFormItem name="value" label={valueLabel} />
           ) : (
             type !== "set" && (
-              <FormItem name="value" height={type === "list" ? 250 : 100} label={valueLabel} />
+              <FormItem
+                readOnly={type === "stream"}
+                name="value"
+                height={type === "list" ? 250 : 100}
+                label={valueLabel}
+              />
             )
           )}
         </div>
@@ -131,18 +141,21 @@ const FormItem = ({
   name,
   label,
   height,
+  readOnly,
 }: {
   name: string
   label: string
   isNumber?: boolean
   height?: number
+  readOnly?: boolean
 }) => {
   const form = useFormContext()
   const { editor, selector } = useField({
     name,
     form,
     height: height,
     showCopyButton: true,
+    readOnly,
   })
 
   return (

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

@@ -10,12 +10,14 @@ export const CustomEditor = ({
   onChange,
   height,
   showCopyButton,
+  readOnly,
 }: {
   language: string
   value: string
   onChange: (value: string) => void
   height?: number
   showCopyButton?: boolean
+  readOnly?: boolean
 }) => {
   const monaco = useMonaco()
   const editorRef = useRef()
@@ -48,6 +50,7 @@ export const CustomEditor = ({
         }}
         defaultLanguage={language}
         options={{
+          readOnly: readOnly,
           wordWrap: "on",
           overviewRulerBorder: false,
           overviewRulerLanes: 0,

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

@@ -9,11 +9,13 @@ export const useField = ({
   form,
   height,
   showCopyButton,
+  readOnly,
 }: {
   name: string
   form: UseFormReturn<any>
   height?: number
   showCopyButton?: boolean
+  readOnly?: boolean
 }) => {
   const { field, fieldState } = useController<Record<string, string>>({
     name,
@@ -60,6 +62,7 @@ export const useField = ({
           onChange={field.onChange}
           height={height}
           showCopyButton={showCopyButton}
+          readOnly={readOnly}
         />
       </>
     ),