fix: make notes size consistent when editing, add char limit to description, fix design of search bar on templates modal (#8679)

* Fixed template content component search bar

* Fixed size of notenode not applying to some instances

* Fixed generic node description not having char limit

src/frontend/src/CustomNodes/GenericNode/components/NodeDescription/index.tsx

@@ -143,9 +143,9 @@ export default function NodeDescription({
   return (
     <div
       className={cn(
-        !editNameDescription ? "overflow-auto" : "",
+        !editNameDescription ? "overflow-auto" : "overflow-hidden",
         hasScroll ? "nowheel" : "",
-        charLimit ? "px-2 pb-4" : "",
+        charLimit ? "flex flex-col" : "",
         "w-full",
       )}
     >
@@ -155,7 +155,9 @@ export default function NodeDescription({
             maxLength={charLimit}
             className={cn(
               "nowheel w-full text-xs focus:border-primary focus:ring-0",
-              stickyNote ? "p-0 pt-0.5 !text-mmd" : "px-2 py-0.5",
+              stickyNote
+                ? "overflow-auto p-0 px-2 pt-0.5 !text-mmd"
+                : "px-2 py-0.5",
               inputClassName,
             )}
             autoFocus
@@ -168,7 +170,7 @@ export default function NodeDescription({
           {charLimit && (nodeDescription?.length ?? 0) >= charLimit - 100 && (
             <div
               className={cn(
-                "pt-1 text-left text-mmd",
+                "pt-1 text-left !text-mmd",
                 (nodeDescription?.length ?? 0) >= charLimit
                   ? "text-error"
                   : "text-primary",

src/frontend/src/CustomNodes/GenericNode/index.tsx

@@ -554,6 +554,7 @@ function GenericNode({
             <div className="px-4 pb-3">
               <MemoizedNodeDescription
                 description={data.node?.description}
+                charLimit={1000}
                 mdClassName={"dark:prose-invert"}
                 nodeId={data.id}
                 selected={selected}

src/frontend/src/CustomNodes/NoteNode/index.tsx

@@ -32,10 +32,6 @@ function NoteNode({
       (key) => key === data.node?.template.backgroundColor,
     ) ?? Object.keys(COLOR_OPTIONS)[0];
   const nodeDiv = useRef<HTMLDivElement>(null);
-  const [size, setSize] = useState({
-    width: DEFAULT_WIDTH - NOTE_NODE_PADDING,
-    height: DEFAULT_HEIGHT - NOTE_NODE_PADDING,
-  });
   const [resizedNote, setResizedNote] = useState(false);
   const currentFlow = useFlowStore((state) => state.currentFlow);
   const setNode = useFlowStore((state) => state.setNode);
@@ -47,12 +43,12 @@ function NoteNode({
   );
 
   const nodeDataWidth = useMemo(
-    () => nodeData?.width ?? DEFAULT_WIDTH,
+    () => nodeData?.measured?.width ?? DEFAULT_WIDTH,
-    [nodeData?.width],
+    [nodeData?.measured?.width],
   );
   const nodeDataHeight = useMemo(
-    () => nodeData?.height ?? DEFAULT_HEIGHT,
+    () => nodeData?.measured?.height ?? DEFAULT_HEIGHT,
-    [nodeData?.height],
+    [nodeData?.measured?.height],
   );
 
   const dataId = useMemo(() => data.id, [data.id]);
@@ -64,10 +60,6 @@ function NoteNode({
   const debouncedResize = useMemo(
     () =>
       debounce((width: number, height: number) => {
-        setSize({
-          width: width - NOTE_NODE_PADDING,
-          height: height - NOTE_NODE_PADDING,
-        });
         setNode(data.id, (node) => {
           return {
             ...node,
@@ -79,22 +71,6 @@ function NoteNode({
     [],
   );
 
-  useEffect(() => {
-    if (nodeData && !resizedNote && nodeDataWidth > 0 && nodeDataHeight > 0) {
-      setSize({
-        width: nodeDataWidth - NOTE_NODE_PADDING,
-        height: nodeDataHeight - NOTE_NODE_PADDING,
-      });
-    } else if (!nodeData && nodeDiv.current) {
-      const currentWidth = nodeDiv.current.offsetWidth || DEFAULT_WIDTH;
-      const currentHeight = nodeDiv.current.offsetHeight || DEFAULT_HEIGHT;
-      setSize({
-        width: Math.max(currentWidth, DEFAULT_WIDTH) - NOTE_NODE_PADDING,
-        height: Math.max(currentHeight, DEFAULT_HEIGHT) - NOTE_NODE_PADDING,
-      });
-    }
-  }, [nodeData, nodeDataWidth, nodeDataHeight, resizedNote]);
-
   const [editNameDescription, set] = useAlternate(false);
 
   const MemoNoteToolbarComponent = useMemo(
@@ -108,6 +84,8 @@ function NoteNode({
       ),
     [data, bgColor, selected],
   );
+  console.log(nodeData);
+  console.log();
   return (
     <>
       <NodeResizer
@@ -133,8 +111,8 @@ function NoteNode({
       <div
         data-testid="note_node"
         style={{
-          minWidth: Math.max(DEFAULT_WIDTH, NOTE_NODE_MIN_WIDTH),
+          minWidth: nodeDataWidth,
-          minHeight: Math.max(DEFAULT_HEIGHT, NOTE_NODE_MIN_HEIGHT),
+          minHeight: nodeDataHeight,
           backgroundColor: COLOR_OPTIONS[bgColor] ?? "#00000000",
         }}
         ref={nodeDiv}
@@ -161,7 +139,7 @@ function NoteNode({
         >
           <NodeDescription
             inputClassName={cn(
-              "border-0 ring-0 focus:ring-0 resize-none shadow-none rounded-sm h-full w-full",
+              "border-0 ring-0 focus:ring-0 resize-none shadow-none rounded-sm h-full min-w-full",
               COLOR_OPTIONS[bgColor] === null
                 ? ""
                 : "dark:!ring-background dark:text-background",
@@ -178,9 +156,10 @@ function NoteNode({
             selected={selected}
             description={dataDescription}
             emptyPlaceholder="Double-click to start typing or enter Markdown..."
-            placeholderClassName={
+            placeholderClassName={cn(
-              COLOR_OPTIONS[bgColor] === null ? "" : "dark:!text-background"
+              COLOR_OPTIONS[bgColor] === null ? "" : "dark:!text-background",
-            }
+              "px-2",
+            )}
             editNameDescription={editNameDescription}
             setEditNameDescription={set}
             stickyNote

src/frontend/src/modals/templatesModal/components/TemplateContentComponent/index.tsx

@@ -3,6 +3,7 @@ import { track } from "@/customization/utils/analytics";
 import useAddFlow from "@/hooks/flows/use-add-flow";
 import useFlowsManagerStore from "@/stores/flowsManagerStore";
 import Fuse from "fuse.js";
+import { SearchIcon } from "lucide-react";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { useParams } from "react-router-dom";
 import { ForwardedIconComponent } from "../../../../components/common/genericIconComponent";
@@ -83,11 +84,12 @@ export default function TemplateContentComponent({
         <Input
           type="search"
           placeholder="Search..."
+          icon={"SearchIcon"}
           data-testid="search-input-template"
           value={searchQuery}
           onChange={(e) => setSearchQuery(e.target.value)}
           ref={searchInputRef}
-          className="w-3/4 rounded-lg bg-background pl-8 lg:w-2/3"
+          className="w-3/4 rounded-lg bg-background lg:w-2/3"
         />
       </div>
       <div