From 2ec01afd8b52a75f943a4fab1dddd17924e6be07 Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Tue, 27 Jun 2023 15:39:31 -0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20style(nodeToolbarComponent):=20u?=
 =?UTF-8?q?pdate=20button=20colors=20and=20icons=20for=20better=20visibili?=
 =?UTF-8?q?ty=20and=20consistency=20=F0=9F=90=9B=20fix(nodeToolbarComponen?=
 =?UTF-8?q?t):=20fix=20documentation=20link=20not=20working=20when=20no=20?=
 =?UTF-8?q?documentation=20is=20provided=20The=20button=20colors=20and=20i?=
 =?UTF-8?q?cons=20have=20been=20updated=20to=20improve=20visibility=20and?=
 =?UTF-8?q?=20consistency.=20The=20delete=20and=20copy=20buttons=20now=20h?=
 =?UTF-8?q?ave=20a=20darker=20background=20color=20when=20hovered=20over.?=
 =?UTF-8?q?=20The=20edit=20button=20now=20has=20a=20rounded=20right=20corn?=
 =?UTF-8?q?er=20and=20a=20lighter=20background=20color=20when=20there=20ar?=
 =?UTF-8?q?e=20no=20nodes=20present.=20The=20documentation=20button=20now?=
 =?UTF-8?q?=20shows=20a=20"Coming=20Soon"=20tooltip=20when=20no=20document?=
 =?UTF-8?q?ation=20is=20provided=20and=20has=20a=20muted=20color.=20The=20?=
 =?UTF-8?q?documentation=20link=20now=20works=20correctly=20even=20when=20?=
 =?UTF-8?q?no=20documentation=20is=20provided.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/nodeToolbarComponent/index.tsx | 81 +++++++++++++------
 1 file changed, 56 insertions(+), 25 deletions(-)

diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
index 70d1268f0..7bc392e14 100644
--- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
@@ -1,5 +1,5 @@
 import { useContext, useState } from "react";
-import { Settings2, Copy, Trash2 } from "lucide-react";
+import { Settings2, Copy, Trash2, FileText } from "lucide-react";
 import { classNames } from "../../../../utils";
 import { TabsContext } from "../../../../contexts/tabsContext";
 import { useReactFlow } from "reactflow";
@@ -29,23 +29,21 @@ const NodeToolbarComponent = (props) => {
     <>
       <div className="h-10 w-26">
         <span className="isolate inline-flex rounded-md shadow-sm">
-          <ShadTooltip delayDuration={1000} content="Delete" side="top">
+          <ShadTooltip content="Delete" side="top">
             <button
-              className="hover:dark:hover:bg-[#242f47] text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative inline-flex items-center rounded-l-md bg-white px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10"
+              className="hover:dark:hover:bg-[#242f47] text-foreground transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-muted-foreground shadow-md relative inline-flex items-center rounded-l-md bg-white px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10"
               onClick={() => {
                 props.deleteNode(props.data.id);
               }}
             >
-              <Trash2 className="w-4 h-4 dark:text-gray-300"></Trash2>
+              <Trash2 className="w-4 h-4 dark:text-muted-foreground"></Trash2>
             </button>
           </ShadTooltip>
 
-          <ShadTooltip delayDuration={1000} content="Duplicate" side="top">
+          <ShadTooltip content="Duplicate" side="top">
             <button
               className={classNames(
-                nodeLength > 0
-                  ? "hover:dark:hover:bg-[#242f47] text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10"
-                  : "hover:dark:hover:bg-[#242f47] text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10 rounded-r-md"
+                "hover:dark:hover:bg-[#242f47] text-foreground transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-muted-foreground shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10"
               )}
               onClick={(event) => {
                 event.preventDefault();
@@ -64,31 +62,64 @@ const NodeToolbarComponent = (props) => {
                 );
               }}
             >
-              <Copy className="w-4 h-4 dark:text-gray-300"></Copy>
+              <Copy className="w-4 h-4 dark:text-muted-foreground"></Copy>
             </button>
           </ShadTooltip>
 
-          {nodeLength > 0 && (
-            <ShadTooltip delayDuration={1000} content="Edit" side="top">
-              <button
-                className="hover:dark:hover:bg-[#242f47] text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10 rounded-r-md"
-                onClick={(event) => {
+          <ShadTooltip
+            content={
+              props.data.node.documentation === ""
+                ? "Coming Soon"
+                : "Documentation"
+            }
+            side="top"
+          >
+            <a
+              className={classNames(
+                "hover:dark:hover:bg-[#242f47]  transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-muted-foreground shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10" +
+                  (props.data.node.documentation === ""
+                    ? " text-muted-foreground"
+                    : " text-foreground")
+              )}
+              href={props.data.node.documentation}
+              // deactivate link if no documentation is provided
+              onClick={(event) => {
+                if (props.data.node.documentation === "") {
                   event.preventDefault();
-                  props.openPopUp(<EditNodeModal data={props.data} />);
-                }}
-              >
-                <Settings2 className="w-4 h-4 dark:text-gray-300"></Settings2>
-              </button>
-            </ShadTooltip>
-          )}
+                }
+              }}
+            >
+              <FileText className="w-4 h-4 dark:text-muted-foreground"></FileText>
+            </a>
+          </ShadTooltip>
+
+          <ShadTooltip content="Edit" side="top">
+            <button
+              className={classNames(
+                "hover:dark:hover:bg-[#242f47]  transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-muted-foreground shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10 rounded-r-md" +
+                  (nodeLength == 0
+                    ? " text-muted-foreground"
+                    : " text-foreground")
+              )}
+              onClick={(event) => {
+                if (nodeLength == 0) {
+                  event.preventDefault();
+                }
+                event.preventDefault();
+                props.openPopUp(<EditNodeModal data={props.data} />);
+              }}
+            >
+              <Settings2 className="w-4 h-4 dark:text-muted-foreground"></Settings2>
+            </button>
+          </ShadTooltip>
 
           {/*
           <Menu as="div" className="relative inline-block text-left z-100">
-            <button className="hover:dark:hover:bg-[#242f47] text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10 rounded-r-md">
+            <button className="hover:dark:hover:bg-[#242f47] text-foreground transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-muted-foreground shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10 rounded-r-md">
               <div>
                 <Menu.Button className="flex items-center">
                   <EllipsisVerticalIcon
-                    className="w-5 h-5 dark:text-gray-300"
+                    className="w-5 h-5 dark:text-muted-foreground"
                     aria-hidden="true"
                   />
                 </Menu.Button>
@@ -117,7 +148,7 @@ const NodeToolbarComponent = (props) => {
                           className={classNames(
                             active
                               ? "bg-muted text-gray-900"
-                              : "text-gray-700",
+                              : "text-foreground",
                             "w-full group flex items-center px-4 py-2 text-sm"
                           )}
                         >
@@ -157,7 +188,7 @@ const NodeToolbarComponent = (props) => {
                           className={classNames(
                             active
                               ? "bg-muted text-gray-900"
-                              : "text-gray-700",
+                              : "text-foreground",
                             "w-full group flex items-center px-4 py-2 text-sm"
                           )}
                         >