refactor: Fix dropdownComponent rendering issue and improve tableNodeCellRender value handling

src/frontend/src/components/dropdownComponent/index.tsx

@@ -35,10 +35,9 @@ export default function Dropdown({
 
   const PopoverContentDropdown =
     children || editNode ? PopoverContent : PopoverContentWithoutPortal;
-
   return (
     <>
-      {Object.keys(options)?.length > 0 ? (
+      {Object.keys(options ?? [])?.length > 0 ? (
         <>
           <Popover open={open} onOpenChange={children ? () => {} : setOpen}>
             {children ? (

src/frontend/src/components/tableComponent/components/tableNodeCellRender/index.tsx

@@ -131,7 +131,9 @@ export default function TableNodeCellRender({
           <DictComponent
             disabled={disabled}
             editNode={true}
-            value={templateValue.toString() === "{}" ? {} : templateValue}
+            value={
+              (templateValue || "").toString() === "{}" ? {} : templateValue
+            }
             onChange={(newValue) => {
               handleOnNewValue(newValue, templateData.key);
             }}

src/frontend/src/modals/genericModal/index.tsx

@@ -98,8 +98,14 @@ export default function GenericModal({
   useEffect(() => {
     setInputValue(value);
   }, [value, modalOpen]);
-  const coloredContent = (inputValue || "")
-    ?.toString()
+  let coloredContent = inputValue || "";
+  // Check if coloredContent is a string
+  // calling toString on undefined will throw an error
+  // so we need to check if it is a string first
+  if (typeof coloredContent !== "string") {
+    coloredContent = "";
+  }
+  coloredContent
     .replace(/</g, "&lt;")
     .replace(/>/g, "&gt;")
     .replace(regexHighlight, (match, p1, p2) => {