From 6ca00b35d1f5aa29a679f722b8b14b3f9625a221 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Mon, 11 Dec 2023 18:45:20 -0300
Subject: [PATCH] Fixed Share icon and disposition

---
 src/frontend/src/icons/Share/Share.jsx        |  9 +++
 src/frontend/src/icons/Share/index.tsx        |  8 ++
 src/frontend/src/icons/Share/share.svg        |  3 +
 src/frontend/src/icons/Share2/Share2.jsx      | 17 ++++
 src/frontend/src/icons/Share2/index.tsx       |  9 +++
 src/frontend/src/icons/Share2/share2.svg      |  3 +
 src/frontend/src/modals/shareModal/index.tsx  |  4 +-
 .../extraSidebarComponent/index.tsx           |  7 +-
 .../components/nodeToolbarComponent/index.tsx | 80 +++++++++----------
 src/frontend/src/utils/styleUtils.ts          |  4 +
 10 files changed, 94 insertions(+), 50 deletions(-)
 create mode 100644 src/frontend/src/icons/Share/Share.jsx
 create mode 100644 src/frontend/src/icons/Share/index.tsx
 create mode 100644 src/frontend/src/icons/Share/share.svg
 create mode 100644 src/frontend/src/icons/Share2/Share2.jsx
 create mode 100644 src/frontend/src/icons/Share2/index.tsx
 create mode 100644 src/frontend/src/icons/Share2/share2.svg

diff --git a/src/frontend/src/icons/Share/Share.jsx b/src/frontend/src/icons/Share/Share.jsx
new file mode 100644
index 000000000..612d67a2a
--- /dev/null
+++ b/src/frontend/src/icons/Share/Share.jsx
@@ -0,0 +1,9 @@
+const SvgShare = (props) => (
+  <svg width="1em" height="1em" {...props} xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M11.995 19.5a7.232 7.232 0 0 0 2.898-.585 7.582 7.582 0 0 0 2.392-1.627 7.748 7.748 0 0 0 1.625-2.398c.393-.904.59-1.868.59-2.89a7.172 7.172 0 0 0-.59-2.89 7.708 7.708 0 0 0-4.026-4.024 7.231 7.231 0 0 0-2.898-.586 7.209 7.209 0 0 0-2.888.586c-.905.39-1.7.932-2.387 1.626A7.788 7.788 0 0 0 5.09 9.11 7.172 7.172 0 0 0 4.5 12c0 1.022.197 1.986.59 2.89a7.748 7.748 0 0 0 1.625 2.398 7.582 7.582 0 0 0 2.392 1.627c.904.39 1.867.585 2.888.585Zm-3.687-4.238a.423.423 0 0 1-.316-.149c-.093-.099-.14-.247-.14-.446 0-.966.14-1.812.419-2.537.279-.725.721-1.29 1.328-1.696.607-.406 1.406-.609 2.396-.609h.093V8.366c0-.142.051-.266.154-.372a.514.514 0 0 1 .385-.158c.105 0 .198.024.279.07.08.047.182.129.306.246l3.167 2.956c.068.068.118.14.149.214.03.074.046.148.046.223a.578.578 0 0 1-.046.223.668.668 0 0 1-.149.213l-3.167 2.984c-.21.198-.409.297-.594.297a.52.52 0 0 1-.53-.511v-1.487h-.093c-.736 0-1.354.115-1.853.344-.498.229-.93.675-1.295 1.338-.075.136-.16.223-.256.26a.78.78 0 0 1-.283.056Z"
+      fill="currentColor"
+    ></path>
+  </svg>
+);
+export default SvgShare;
diff --git a/src/frontend/src/icons/Share/index.tsx b/src/frontend/src/icons/Share/index.tsx
new file mode 100644
index 000000000..00beb1c4b
--- /dev/null
+++ b/src/frontend/src/icons/Share/index.tsx
@@ -0,0 +1,8 @@
+import React, { forwardRef } from "react";
+import SvgShare from "./Share";
+
+export const ShareIcon = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>(
+  (props, ref) => {
+    return <SvgShare ref={ref} {...props} />;
+  }
+);
diff --git a/src/frontend/src/icons/Share/share.svg b/src/frontend/src/icons/Share/share.svg
new file mode 100644
index 000000000..d99a7c5cf
--- /dev/null
+++ b/src/frontend/src/icons/Share/share.svg
@@ -0,0 +1,3 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.995 19.5a7.232 7.232 0 0 0 2.898-.585 7.582 7.582 0 0 0 2.392-1.627 7.748 7.748 0 0 0 1.625-2.398c.393-.904.59-1.868.59-2.89a7.172 7.172 0 0 0-.59-2.89 7.708 7.708 0 0 0-4.026-4.024 7.231 7.231 0 0 0-2.898-.586 7.209 7.209 0 0 0-2.888.586c-.905.39-1.7.932-2.387 1.626A7.788 7.788 0 0 0 5.09 9.11 7.172 7.172 0 0 0 4.5 12c0 1.022.197 1.986.59 2.89a7.748 7.748 0 0 0 1.625 2.398 7.582 7.582 0 0 0 2.392 1.627c.904.39 1.867.585 2.888.585Zm-3.687-4.238a.423.423 0 0 1-.316-.149c-.093-.099-.14-.247-.14-.446 0-.966.14-1.812.419-2.537.279-.725.721-1.29 1.328-1.696.607-.406 1.406-.609 2.396-.609h.093V8.366c0-.142.051-.266.154-.372a.514.514 0 0 1 .385-.158c.105 0 .198.024.279.07.08.047.182.129.306.246l3.167 2.956c.068.068.118.14.149.214.03.074.046.148.046.223a.578.578 0 0 1-.046.223.668.668 0 0 1-.149.213l-3.167 2.984c-.21.198-.409.297-.594.297a.52.52 0 0 1-.53-.511v-1.487h-.093c-.736 0-1.354.115-1.853.344-.498.229-.93.675-1.295 1.338-.075.136-.16.223-.256.26a.78.78 0 0 1-.283.056Z" fill="#000"></path></svg>
\ No newline at end of file
diff --git a/src/frontend/src/icons/Share2/Share2.jsx b/src/frontend/src/icons/Share2/Share2.jsx
new file mode 100644
index 000000000..b803de1a9
--- /dev/null
+++ b/src/frontend/src/icons/Share2/Share2.jsx
@@ -0,0 +1,17 @@
+const SvgShare2 = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    x="0px"
+    y="0px"
+    width="1em"
+    height="1em"
+    viewBox="0 0 485.213 485.212"
+    fill="currentColor"
+    {...props}
+  >
+    <g>
+      <path d="M394.236,212.282L272.934,333.584V272.93c0,0-121.304-30.324-181.955,60.654c0-100.483,81.469-181.956,181.955-181.956   V90.978L394.236,212.282z M485.212,242.606c0,133.976-108.627,242.606-242.604,242.606c-133.994,0-242.606-108.631-242.606-242.606   C0.001,108.628,108.613,0,242.607,0C376.585,0,485.212,108.628,485.212,242.606z M454.89,242.606   c0-117.038-95.241-212.279-212.282-212.279c-117.055,0-212.28,95.241-212.28,212.279c0,117.039,95.225,212.28,212.28,212.28   C359.648,454.886,454.89,359.645,454.89,242.606z" />
+    </g>
+  </svg>
+);
+export default SvgShare2;
diff --git a/src/frontend/src/icons/Share2/index.tsx b/src/frontend/src/icons/Share2/index.tsx
new file mode 100644
index 000000000..c0384e295
--- /dev/null
+++ b/src/frontend/src/icons/Share2/index.tsx
@@ -0,0 +1,9 @@
+import React, { forwardRef } from "react";
+import SvgShare2 from "./Share2";
+
+export const Share2Icon = forwardRef<
+  SVGSVGElement,
+  React.PropsWithChildren<{}>
+>((props, ref) => {
+  return <SvgShare2 ref={ref} {...props} />;
+});
diff --git a/src/frontend/src/icons/Share2/share2.svg b/src/frontend/src/icons/Share2/share2.svg
new file mode 100644
index 000000000..d99a7c5cf
--- /dev/null
+++ b/src/frontend/src/icons/Share2/share2.svg
@@ -0,0 +1,3 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.995 19.5a7.232 7.232 0 0 0 2.898-.585 7.582 7.582 0 0 0 2.392-1.627 7.748 7.748 0 0 0 1.625-2.398c.393-.904.59-1.868.59-2.89a7.172 7.172 0 0 0-.59-2.89 7.708 7.708 0 0 0-4.026-4.024 7.231 7.231 0 0 0-2.898-.586 7.209 7.209 0 0 0-2.888.586c-.905.39-1.7.932-2.387 1.626A7.788 7.788 0 0 0 5.09 9.11 7.172 7.172 0 0 0 4.5 12c0 1.022.197 1.986.59 2.89a7.748 7.748 0 0 0 1.625 2.398 7.582 7.582 0 0 0 2.392 1.627c.904.39 1.867.585 2.888.585Zm-3.687-4.238a.423.423 0 0 1-.316-.149c-.093-.099-.14-.247-.14-.446 0-.966.14-1.812.419-2.537.279-.725.721-1.29 1.328-1.696.607-.406 1.406-.609 2.396-.609h.093V8.366c0-.142.051-.266.154-.372a.514.514 0 0 1 .385-.158c.105 0 .198.024.279.07.08.047.182.129.306.246l3.167 2.956c.068.068.118.14.149.214.03.074.046.148.046.223a.578.578 0 0 1-.046.223.668.668 0 0 1-.149.213l-3.167 2.984c-.21.198-.409.297-.594.297a.52.52 0 0 1-.53-.511v-1.487h-.093c-.736 0-1.354.115-1.853.344-.498.229-.93.675-1.295 1.338-.075.136-.16.223-.256.26a.78.78 0 0 1-.283.056Z" fill="#000"></path></svg>
\ No newline at end of file
diff --git a/src/frontend/src/modals/shareModal/index.tsx b/src/frontend/src/modals/shareModal/index.tsx
index be4414354..37bab549f 100644
--- a/src/frontend/src/modals/shareModal/index.tsx
+++ b/src/frontend/src/modals/shareModal/index.tsx
@@ -209,8 +209,8 @@ export default function ShareModal({
         >
           <span className="pr-2">Share</span>
           <IconComponent
-            name="Forward"
-            className="h-6 w-6 pl-1 text-foreground"
+            name="Share3"
+            className="-m-0.5 h-6 w-6 text-foreground"
             aria-hidden="true"
           />
         </BaseModal.Header>
diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
index 3a5a18bc9..f1618318e 100644
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
@@ -193,17 +193,16 @@ export default function ExtraSidebar(): JSX.Element {
         <button
           disabled={!hasApiKey || !validApiKey || !hasStore}
           className={classNames(
-            "extra-side-bar-buttons gap-1.5 text-sm font-semibold",
+            "extra-side-bar-buttons gap-[4px] text-sm font-semibold",
             !hasApiKey || !validApiKey || !hasStore
               ? "button-disable  cursor-default text-muted-foreground"
               : ""
           )}
         >
           <IconComponent
-            name="Forward"
-            strokeWidth={2.5}
+            name="Share3"
             className={classNames(
-              "side-bar-button-size",
+              "-m-0.5 -ml-1 h-6 w-6",
               !hasApiKey || !validApiKey || !hasStore
                 ? "extra-side-bar-save-disable"
                 : ""
diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
index 7b9aed562..c560a3486 100644
--- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
@@ -75,6 +75,10 @@ export default function NodeToolbarComponent({
 
   const [flowComponent, setFlowComponent] = useState<FlowType>();
 
+  const openInNewTab = (url) => {
+    window.open(url, "_blank", "noreferrer");
+  };
+
   useEffect(() => {
     setFlowComponent(createFlowComponent(cloneDeep(data), version));
   }, [
@@ -100,12 +104,12 @@ export default function NodeToolbarComponent({
       case "Download":
         downloadNode(createFlowComponent(cloneDeep(data), version));
         break;
-      case "Share":
-        if (hasApiKey || hasStore) setShowconfirmShare(true);
-        break;
       case "SaveAll":
         saveComponent(cloneDeep(data), false);
         break;
+      case "documentation":
+        if (data.node?.documentation) openInNewTab(data.node?.documentation);
+        break;
       case "disabled":
         break;
       case "ungroup":
@@ -162,33 +166,22 @@ export default function NodeToolbarComponent({
               <IconComponent name="Copy" className="h-4 w-4" />
             </button>
           </ShadTooltip>
-
-          <ShadTooltip
-            content={
-              data.node?.documentation === "" ? "Coming Soon" : "Documentation"
-            }
-            side="top"
-          >
-            <a
-              className={classNames(
-                "relative -ml-px inline-flex items-center bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset ring-ring  transition-all duration-500 ease-in-out hover:bg-muted focus:z-10" +
-                  (data.node?.documentation === ""
-                    ? " text-muted-foreground"
-                    : " text-foreground")
-              )}
-              target="_blank"
-              rel="noopener noreferrer"
-              href={data.node?.documentation}
-              // deactivate link if no documentation is provided
-              onClick={(event) => {
-                if (data.node?.documentation === "") {
+          {hasStore && (
+            <ShadTooltip content="Share" side="top">
+              <button
+                className={classNames(
+                  "relative -ml-px inline-flex items-center bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset ring-ring  transition-all duration-500 ease-in-out hover:bg-muted focus:z-10",
+                  !hasApiKey || !validApiKey ? " text-muted-foreground" : ""
+                )}
+                onClick={(event) => {
                   event.preventDefault();
-                }
-              }}
-            >
-              <IconComponent name="FileText" className="h-4 w-4 " />
-            </a>
-          </ShadTooltip>
+                  if (hasApiKey || hasStore) setShowconfirmShare(true);
+                }}
+              >
+                <IconComponent name="Share4" className="h-4 w-4" />
+              </button>
+            </ShadTooltip>
+          )}
 
           <Select onValueChange={handleSelectChange} value={selectedValue}>
             <ShadTooltip content="More" side="top">
@@ -242,21 +235,6 @@ export default function NodeToolbarComponent({
                   </div>{" "}
                 </SelectItem>
               )}
-
-              {hasStore && (
-                <SelectItem
-                  disabled={!hasApiKey || !validApiKey}
-                  value={"Share"}
-                >
-                  <div className="flex">
-                    <IconComponent
-                      name="Forward"
-                      className="relative top-0.5 mr-2 h-4 w-4"
-                    />{" "}
-                    Share{" "}
-                  </div>{" "}
-                </SelectItem>
-              )}
               {!hasStore && (
                 <SelectItem value={"Download"}>
                   <div className="flex">
@@ -268,6 +246,20 @@ export default function NodeToolbarComponent({
                   </div>{" "}
                 </SelectItem>
               )}
+              <SelectItem
+                value={"documentation"}
+                disabled={data.node?.documentation === ""}
+              >
+                <div className="flex">
+                  <IconComponent
+                    name="FileText"
+                    className="relative top-0.5 mr-2 h-4 w-4"
+                  />{" "}
+                  {data.node?.documentation === ""
+                    ? "Coming Soon"
+                    : "Documentation"}
+                </div>{" "}
+              </SelectItem>
               {isMinimal && (
                 <SelectItem value={"show"}>
                   <div className="flex">
diff --git a/src/frontend/src/utils/styleUtils.ts b/src/frontend/src/utils/styleUtils.ts
index 12855ae6c..d8e96207d 100644
--- a/src/frontend/src/utils/styleUtils.ts
+++ b/src/frontend/src/utils/styleUtils.ts
@@ -130,6 +130,8 @@ import { OpenAiIcon } from "../icons/OpenAi";
 import { PineconeIcon } from "../icons/Pinecone";
 import { QDrantIcon } from "../icons/QDrant";
 import { SearxIcon } from "../icons/Searx";
+import { ShareIcon } from "../icons/Share";
+import { Share2Icon } from "../icons/Share2";
 import SvgSlackIcon from "../icons/Slack/SlackIcon";
 import { VertexAIIcon } from "../icons/VertexAI";
 import SvgWikipedia from "../icons/Wikipedia/Wikipedia";
@@ -258,6 +260,8 @@ export const nodeIconsLucide: iconsType = {
   VertexAI: VertexAIIcon,
   ChatVertexAI: VertexAIIcon,
   VertexAIEmbeddings: VertexAIIcon,
+  Share3: ShareIcon,
+  Share4: Share2Icon,
   agents: Rocket,
   Workflow,
   User,