🔧 fix(codeTabsComponent): remove unused onChange function parameter in CodeTabsComponent to improve code readability and maintainability

🔧 fix(dictComponent): change onChange behavior in DictComponent to set an empty object when disabled instead of an empty array
🔧 fix(ApiModal): add a check to convert changes to an object only if it is an array in ApiModal
🔧 fix(dictAreaModal): change dictObj state to a ref in DictAreaModal to avoid unnecessary re-renders
🔧 fix(dictAreaModal): update dictObj ref value instead of using setDictObj in DictAreaModal to improve performance
🔧 fix(types): remove unnecessary line breaks in TooltipComponentType to improve code readability

src/frontend/src/components/codeTabsComponent/index.tsx

@@ -842,25 +842,7 @@ export default function CodeTabsComponent({
                                                             templateField
                                                           ].value
                                                     }
-                                                    onChange={(target) => {
+                                                    onChange={(target) => {}}
-                                                      setData((old) => {
-                                                        let newInputList =
-                                                          cloneDeep(old);
-                                                        newInputList![
-                                                          i
-                                                        ].data.node.template[
-                                                          templateField
-                                                        ].value = target;
-                                                        return newInputList;
-                                                      });
-                                                      tweaks.buildTweakObject!(
-                                                        node["data"]["id"],
-                                                        target,
-                                                        node.data.node.template[
-                                                          templateField
-                                                        ]
-                                                      );
-                                                    }}
                                                   />
                                                 </div>
                                               </ShadTooltip>

src/frontend/src/components/dictComponent/index.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import { useEffect, useRef } from "react";
 import { DictComponentType } from "../../types/components";
 
 import DictAreaModal from "../../modals/dictAreaModal";
@@ -13,13 +13,15 @@ export default function DictComponent({
 }: DictComponentType): JSX.Element {
   useEffect(() => {
     if (disabled) {
-      onChange([""]);
+      onChange({});
     }
   }, [disabled]);
 
   useEffect(() => {
     if (value) onChange(value);
-  }, [onChange]);
+  }, [value]);
+
+  const ref = useRef(value);
 
   return (
     <div
@@ -31,7 +33,7 @@ export default function DictComponent({
       {
         <div className="flex w-full gap-3">
           <DictAreaModal
-            value={value}
+            value={ref.current}
             onChange={(obj) => {
               onChange(obj);
             }}

src/frontend/src/modals/ApiModal/index.tsx

@@ -133,7 +133,7 @@ const ApiModal = forwardRef(
         changes = changes?.filter((x) => x !== "");
       }
 
-      if (template.type === "dict") {
+      if (template.type === "dict" && Array.isArray(changes)) {
         changes = convertArrayToObj(changes);
       }
 

src/frontend/src/modals/dictAreaModal/index.tsx

@@ -4,7 +4,7 @@ import "ace-builds/src-noconflict/mode-python";
 import "ace-builds/src-noconflict/theme-github";
 import "ace-builds/src-noconflict/theme-twilight";
 // import "ace-builds/webpack-resolver";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import JsonView from "react18-json-view";
 import "react18-json-view/src/dark.css";
 import "react18-json-view/src/style.css";
@@ -19,11 +19,12 @@ export default function DictAreaModal({
   value,
 }): JSX.Element {
   const [open, setOpen] = useState(false);
-  const [dictObj, setDictObj] = useState(value);
+
+  const ref = useRef(value);
 
   useEffect(() => {
-    if (value) setDictObj(value);
+    if (value) ref.current = value;
-  }, [dictObj]);
+  }, [ref]);
 
   return (
     <BaseModal size="medium-h-full" open={open} setOpen={setOpen}>
@@ -44,19 +45,19 @@ export default function DictAreaModal({
             editable
             enableClipboard
             onEdit={(edit) => {
-              setDictObj(edit["src"]);
+              ref.current = edit["src"];
             }}
             onChange={(edit) => {
-              setDictObj(edit["src"]);
+              ref.current = edit["src"];
             }}
-            src={dictObj}
+            src={ref.current}
           />
           <div className="flex h-fit w-full justify-end">
             <Button
               className="mt-3"
               type="submit"
               onClick={() => {
-                onChange(dictObj);
+                onChange(ref.current);
                 setOpen(false);
               }}
             >

src/frontend/src/types/components/index.ts

@@ -134,18 +134,18 @@ export type TooltipComponentType = {
   children: ReactElement;
   title: string | ReactElement;
   placement?:
-    | "bottom-end"
+  | "bottom-end"
-    | "bottom-start"
+  | "bottom-start"
-    | "bottom"
+  | "bottom"
-    | "left-end"
+  | "left-end"
-    | "left-start"
+  | "left-start"
-    | "left"
+  | "left"
-    | "right-end"
+  | "right-end"
-    | "right-start"
+  | "right-start"
-    | "right"
+  | "right"
-    | "top-end"
+  | "top-end"
-    | "top-start"
+  | "top-start"
-    | "top";
+  | "top";
 };
 
 export type ProgressBarType = {