From 2438a8c6588683d0b270463e341419a78b7a37dc Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Fri, 24 Nov 2023 12:43:29 -0300
Subject: [PATCH] fix(GenericNode/index.tsx): fix initial state of inputName to
 be false instead of true for better user experience
 refactor(GenericNode/index.tsx): refactor tooltip div structure to improve
 readability and add pencil icon if node has flow
 refactor(GenericNode/index.tsx): refactor color logic to use typesContext
 instead of accessing types directly refactor(GenericNode/index.tsx): refactor
 output type title logic to use ternary operator for better readability
 refactor(GenericNode/index.tsx): refactor validation status params rendering
 to use ternary operator for better readability
 refactor(GenericNode/index.tsx): refactor generic node description rendering
 to use ternary operator for better readability
 refactor(GenericNode/index.tsx): refactor template field rendering to use
 ternary operator for better readability refactor(PageComponent/index.tsx):
 remove unnecessary empty line

---
 .../src/CustomNodes/GenericNode/index.tsx     | 43 ++++++++++---------
 .../components/PageComponent/index.tsx        |  1 -
 2 files changed, 23 insertions(+), 21 deletions(-)

diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index 4df59b634..a86207063 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@@ -38,7 +38,7 @@ export default function GenericNode({
   const { types, deleteNode, reactFlowInstance, setFilterEdge, getFilterEdge } =
     useContext(typesContext);
   const name = nodeIconsLucide[data.type] ? data.type : types[data.type];
-  const [inputName, setInputName] = useState(true);
+  const [inputName, setInputName] = useState(false);
   const [nodeName, setNodeName] = useState(data.node!.display_name);
   const [inputDescription, setInputDescription] = useState(false);
   const [nodeDescription, setNodeDescription] = useState(
@@ -198,11 +198,14 @@ export default function GenericNode({
                     </div>
                   ) : (
                     <ShadTooltip content={data.node?.display_name}>
-                      <div
-                        className="generic-node-tooltip-div text-primary"
-                        onDoubleClick={() => setInputName(true)}
-                      >
-                        {data.node?.display_name}
+                      <div className="flex" onDoubleClick={() => setInputName(true)}>
+                        <div
+                          className="generic-node-tooltip-div text-primary pr-3"
+                          
+                        >
+                          {data.node?.display_name}
+                        </div>
+                        {data.node?.flow&& <IconComponent name="Pencil" className="w-5 h-5 text-primary-content" />}
                       </div>
                     </ShadTooltip>
                   )}
@@ -232,10 +235,10 @@ export default function GenericNode({
                             setData={setData}
                             color={
                               nodeColors[
-                                types[data.node?.template[templateField].type!]
+                              types[data.node?.template[templateField].type!]
                               ] ??
                               nodeColors[
-                                data.node?.template[templateField].type!
+                              data.node?.template[templateField].type!
                               ] ??
                               nodeColors.unknown
                             }
@@ -282,7 +285,7 @@ export default function GenericNode({
                     color={nodeColors[types[data.type]] ?? nodeColors.unknown}
                     title={
                       data.node?.output_types &&
-                      data.node.output_types.length > 0
+                        data.node.output_types.length > 0
                         ? data.node.output_types.join("|")
                         : data.type
                     }
@@ -320,10 +323,10 @@ export default function GenericNode({
                         <div className="max-h-96 overflow-auto">
                           {typeof validationStatus.params === "string"
                             ? validationStatus.params
-                                .split("\n")
-                                .map((line: string, index: number) => (
-                                  <div key={index}>{line}</div>
-                                ))
+                              .split("\n")
+                              .map((line: string, index: number) => (
+                                <div key={index}>{line}</div>
+                              ))
                             : ""}
                         </div>
                       )
@@ -367,14 +370,14 @@ export default function GenericNode({
             className={
               showNode
                 ? "generic-node-desc " +
-                  (data.node?.description !== "" ? "py-5" : "pb-5")
+                (data.node?.description !== "" ? "py-5" : "pb-5")
                 : ""
             }
           >
             {data.node?.description !== "" &&
-            showNode &&
-            data.node?.flow &&
-            inputDescription ? (
+              showNode &&
+              data.node?.flow &&
+              inputDescription ? (
               <Textarea
                 autoFocus
                 onBlur={() => {
@@ -429,7 +432,7 @@ export default function GenericNode({
                 .map((templateField: string, idx) => (
                   <div key={idx}>
                     {data.node!.template[templateField].show &&
-                    !data.node!.template[templateField].advanced ? (
+                      !data.node!.template[templateField].advanced ? (
                       <ParameterComponent
                         index={idx.toString()}
                         key={scapedJSONStringfy({
@@ -444,10 +447,10 @@ export default function GenericNode({
                         setData={setData}
                         color={
                           nodeColors[
-                            types[data.node?.template[templateField].type!]
+                          types[data.node?.template[templateField].type!]
                           ] ??
                           nodeColors[
-                            data.node?.template[templateField].type!
+                          data.node?.template[templateField].type!
                           ] ??
                           nodeColors.unknown
                         }
diff --git a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
index 97a719f07..3fd409628 100644
--- a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
@@ -145,7 +145,6 @@ export default function Page({
       document.removeEventListener("mousemove", handleMouseMove);
     };
   }, [position, lastCopiedSelection, lastSelection]);
-
   const [selectionMenuVisible, setSelectionMenuVisible] = useState(false);
 
   const { setExtraComponent, setExtraNavigation } = useContext(locationContext);