From d73d0f0d2f7519b92bca752b5abfadeea63c297b Mon Sep 17 00:00:00 2001
From: Weixuan Fu <weixuanf@outlook.com>
Date: Sat, 17 Feb 2024 02:05:37 +0800
Subject: [PATCH 1/5] pass privacy settings to share api

---
 ui/src/components/CustomSelector.tsx | 44 +++++++++++++----
 ui/src/components/DropdownTitle.tsx  |  3 +-
 ui/src/components/HoverMenu.tsx      | 49 ++++++++++++++++++
 ui/src/share/ShareDialog.tsx         | 74 ++++++----------------------
 ui/src/share/SharedTopbarButton.tsx  | 69 ++++++++++++++++++++------
 ui/src/share/shareUtils.tsx          | 45 +++++++++++++++++
 ui/src/types/dbTypes.ts              |  3 +-
 7 files changed, 202 insertions(+), 85 deletions(-)
 create mode 100644 ui/src/components/HoverMenu.tsx
 create mode 100644 ui/src/share/shareUtils.tsx

diff --git a/ui/src/components/CustomSelector.tsx b/ui/src/components/CustomSelector.tsx
index 1261c2c..38d15c1 100644
--- a/ui/src/components/CustomSelector.tsx
+++ b/ui/src/components/CustomSelector.tsx
@@ -2,21 +2,25 @@ import React, { useState, useRef, useEffect } from "react";
 import { Box, Button, Card } from "@chakra-ui/react";
 import { IconChevronDown } from "@tabler/icons-react";
 
-export interface CustomSelectorOption {
+export interface CustomSelectorOption<T> {
   label: string;
-  value: string;
+  value: T;
   icon?: React.ReactElement;
 }
 
-type Props = {
-  options: CustomSelectorOption[];
+type Props<T> = {
+  options: CustomSelectorOption<T>[];
+  value: T;
+  onChange: (value: T) => void;
 };
-export default function CustomSelector({ options }: Props) {
+export default function CustomSelector<T>({
+  options,
+  value,
+  onChange,
+}: Props<T>) {
   const [isOpen, setIsOpen] = useState(false);
   const ref = useRef<HTMLDivElement>(null);
-  const [selectedOption, setSelectedOption] = useState<
-    CustomSelectorOption | undefined
-  >(options[0]);
+  const selectedOption = options.find((option) => option.value === value);
 
   useEffect(() => {
     const handleClickOutside = (event: any) => {
@@ -41,6 +45,25 @@ export default function CustomSelector({ options }: Props) {
       >
         {selectedOption?.label}
       </Button>
+      {/* {isOpen && (
+        <Menu isOpen={true}>
+          <MenuList
+            minWidth={150}
+            zIndex={1000}
+            onMouseEnter={onOpen}
+            onMouseLeave={delayedClose}
+          >
+            <MenuItem
+              onClick={saveCurWorkflow}
+              icon={<IconDeviceFloppy size={20} />}
+              iconSpacing={1}
+              command={saveShortcut}
+            >
+              Save
+            </MenuItem>
+          </MenuList>
+        </Menu>
+      )} */}
       {isOpen && (
         <Card
           gap={4}
@@ -50,13 +73,14 @@ export default function CustomSelector({ options }: Props) {
           borderWidth="1px"
           p="2"
           position="absolute"
+          zIndex={100}
         >
           {options.map((option) => (
             <Button
-              key={option.value}
+              key={option.label}
               onClick={() => {
-                setSelectedOption(option);
                 setIsOpen(false);
+                onChange(option.value);
               }}
               leftIcon={option.icon}
               justifyContent="flex-start"
diff --git a/ui/src/components/DropdownTitle.tsx b/ui/src/components/DropdownTitle.tsx
index cf31c23..fa9cf38 100644
--- a/ui/src/components/DropdownTitle.tsx
+++ b/ui/src/components/DropdownTitle.tsx
@@ -1,5 +1,6 @@
 import {
   ChangeEvent,
+  lazy,
   useCallback,
   useContext,
   useEffect,
@@ -37,9 +38,9 @@ import { workflowsTable, userSettingsTable } from "../db-tables/WorkspaceDB";
 import { WorkspaceContext } from "../WorkspaceContext";
 import { VersionHistoryDrawer } from "./VersionHistoryDrawer";
 import { Workflow } from "../types/dbTypes";
-import ShareDialog from "../share/ShareDialog";
 import CustomMenu from "./CustomMenu";
 import CreateVersionDialog from "./CreateVersionDialog";
+const ShareDialog = lazy(() => import("../share/ShareDialog"));
 
 export default function DropdownTitle() {
   const {
diff --git a/ui/src/components/HoverMenu.tsx b/ui/src/components/HoverMenu.tsx
new file mode 100644
index 0000000..b142cbf
--- /dev/null
+++ b/ui/src/components/HoverMenu.tsx
@@ -0,0 +1,49 @@
+import { useRef, useState } from "react";
+import CustomMenu from "./CustomMenu";
+import { Box, Menu, MenuList } from "@chakra-ui/react";
+type Props = {
+  menuButton: React.ReactElement;
+  menuContent: React.ReactElement;
+  onClose?: () => void;
+};
+export default function HoverMenu({ menuButton, menuContent, onClose }: Props) {
+  const closeTimeoutId = useRef<number>();
+  const [isOpen, setIsOpen] = useState(false);
+  const delayedClose = () => {
+    closeTimeoutId.current = setTimeout(() => setIsOpen(false), 400); // delay of 300ms
+  };
+
+  const onOpen = () => {
+    setIsOpen(true);
+    clearTimeout(closeTimeoutId.current);
+    closeTimeoutId.current = undefined;
+  };
+  return (
+    <CustomMenu
+      isOpen={isOpen}
+      onClose={delayedClose}
+      menuButton={
+        <Box
+          aria-label="menu"
+          onClick={onOpen}
+          onMouseEnter={onOpen}
+          onMouseLeave={delayedClose}
+        >
+          {menuButton}
+        </Box>
+      }
+      options={
+        <Menu isOpen={true}>
+          <MenuList
+            minWidth={150}
+            zIndex={1000}
+            onMouseEnter={onOpen}
+            onMouseLeave={delayedClose}
+          >
+            {menuContent}
+          </MenuList>
+        </Menu>
+      }
+    />
+  );
+}
diff --git a/ui/src/share/ShareDialog.tsx b/ui/src/share/ShareDialog.tsx
index ac61e6c..e9be3df 100644
--- a/ui/src/share/ShareDialog.tsx
+++ b/ui/src/share/ShareDialog.tsx
@@ -13,19 +13,10 @@ import {
   Text,
   useToast,
 } from "@chakra-ui/react";
-import { Workflow, WorkflowVersion } from "../types/dbTypes";
+import { Workflow, WorkflowPrivacy, WorkflowVersion } from "../types/dbTypes";
 import { useEffect, useRef, useState } from "react";
-import CustomDropdown, {
-  CustomSelectorOption,
-} from "../components/CustomSelector";
-import {
-  IconCloud,
-  IconCopy,
-  IconExternalLink,
-  IconLink,
-  IconLock,
-  IconWorld,
-} from "@tabler/icons-react";
+import CustomSelector from "../components/CustomSelector";
+import { IconCloud, IconCopy, IconExternalLink } from "@tabler/icons-react";
 import {
   userSettingsTable,
   workflowVersionsTable,
@@ -35,36 +26,12 @@ import {
 import { api } from "/scripts/api.js";
 // @ts-ignore
 import { app } from "/scripts/app.js";
+import { generateRandomKey, getNodeDefs, privacyOptions } from "./shareUtils";
 
 interface Props {
   onClose: () => void;
 }
-type CreatedCloudflowVersionEvent = {
-  createdVer: WorkflowVersion;
-  localWorkflowID: string;
-  localVersionID: string;
-};
 
-function generateRandomKey(length: number) {
-  // Generate a random array of bytes
-  const array = new Uint8Array(length);
-  window.crypto.getRandomValues(array);
-
-  // Convert the bytes to a hex string
-  return Array.from(array, (byte) => byte.toString(16).padStart(2, "0")).join(
-    "",
-  );
-}
-
-const privacyOptions: CustomSelectorOption[] = [
-  { label: "Private", value: "PRIVATE", icon: <IconLock /> },
-  {
-    label: "Anyone with the link can access",
-    value: "UNLISTED",
-    icon: <IconLink />,
-  },
-  { label: "Public", value: "PUBLIC", icon: <IconWorld /> },
-];
 export default function ShareDialog({ onClose }: Props) {
   const [versionName, setVersionName] = useState(
     "version " + getCurDateString(),
@@ -72,6 +39,7 @@ export default function ShareDialog({ onClose }: Props) {
   const [localVersions, setLocalVersions] = useState<WorkflowVersion[]>([]);
   const [loading, setLoading] = useState(false);
   const [cloudHost, setCloudHost] = useState("");
+  const [privacy, setPrivacy] = useState<WorkflowPrivacy>("PRIVATE");
   const cloudHostRef = useRef("");
   const [workflow, setWorkflow] = useState<Workflow>();
   const toast = useToast();
@@ -81,11 +49,9 @@ export default function ShareDialog({ onClose }: Props) {
       event.origin !== cloudHostRef.current ||
       detail.type !== "share_workflow_success"
     ) {
-      console.log("event.origin !== cloudHost", event.origin !== cloudHost);
       return;
     }
 
-    console.log("share_workflow_success", detail);
     const localID = detail.localWorkflowID;
     const localVerID = detail.localVersionID;
     const cloudVersionID = detail.version.id;
@@ -111,18 +77,7 @@ export default function ShareDialog({ onClose }: Props) {
       window.removeEventListener("message", handleShareWorkflowSuccess);
     };
   }, []);
-  const getNodeDefs = () => {
-    const allNodes = app.graph._nodes;
-    const nodeDefs = {};
-    for (let n of allNodes) {
-      // @ts-ignore
-      if (n.type in LiteGraph.registered_node_types) {
-        // @ts-ignore
-        nodeDefs[n.type] = LiteGraph.registered_node_types[n.type].nodeData;
-      }
-    }
-    return nodeDefs;
-  };
+
   const loadData = async () => {
     const host =
       import.meta.env.MODE === "production"
@@ -165,7 +120,7 @@ export default function ShareDialog({ onClose }: Props) {
       workflowID: workflow!.id,
       name: versionName,
       createTime: Date.now(),
-      json: workflow!.json,
+      json: JSON.stringify(app.graph.serialize()),
     });
     if (!newVer) {
       alert("Failed to create new version, please try again.");
@@ -186,17 +141,14 @@ export default function ShareDialog({ onClose }: Props) {
     const handleChildReady = (event: MessageEvent) => {
       if (event.origin === host && event.data === "child_ready") {
         const curWorkflow = workflowsTable?.curWorkflow;
-        console.log("Child window is ready.inputdata", {
-          workflow: curWorkflow,
-          version: newVer,
-          nodeDefs: nodeDefs,
-        });
         // Send data to the new window after it loads
+        console.log("sending privacy", privacy);
         sharePopup!.postMessage(
           {
             workflow: curWorkflow,
             version: newVer,
             nodeDefs: nodeDefs,
+            privacy: privacy,
           },
           host,
         );
@@ -214,7 +166,13 @@ export default function ShareDialog({ onClose }: Props) {
         <ModalHeader>Share "{workflow?.name}"</ModalHeader>
         <ModalBody pb={10}>
           <Stack gap={6}>
-            <CustomDropdown options={privacyOptions} />
+            <CustomSelector<WorkflowPrivacy>
+              options={privacyOptions}
+              value={privacy}
+              onChange={(val) => {
+                setPrivacy(val);
+              }}
+            />
 
             {cloudWorkflowID && (
               <HStack spacing={2} color="teal.400">
diff --git a/ui/src/share/SharedTopbarButton.tsx b/ui/src/share/SharedTopbarButton.tsx
index c915401..30c6560 100644
--- a/ui/src/share/SharedTopbarButton.tsx
+++ b/ui/src/share/SharedTopbarButton.tsx
@@ -1,22 +1,63 @@
-import { Button } from "@chakra-ui/react";
-import { IconCloud } from "@tabler/icons-react";
+import {
+  Button,
+  Text,
+  Stack,
+  Link,
+  HStack,
+  IconButton,
+} from "@chakra-ui/react";
+import { IconCloud, IconCopy } from "@tabler/icons-react";
 import { workflowsTable } from "../db-tables/WorkspaceDB";
+import { useContext, useEffect, useState } from "react";
+import { WorkspaceContext } from "../WorkspaceContext";
+import HoverMenu from "../components/HoverMenu";
 
 export function SharedTopbarButton({}) {
-  const isCloudflow = workflowsTable?.curWorkflow?.cloudID;
-  if (!isCloudflow) return null;
+  const [cloudURL, setCloudURL] = useState<string>();
+  const { curFlowID } = useContext(WorkspaceContext);
+
+  useEffect(() => {
+    if (curFlowID) {
+      workflowsTable?.get(curFlowID).then((flow) => {
+        if (flow?.cloudID) {
+          setCloudURL(flow.cloudURL);
+        }
+      });
+    }
+  }, [curFlowID]);
+  if (!cloudURL) return null;
   return (
     <>
-      <Button
-        onClick={() => {
-          window.open(workflowsTable?.curWorkflow?.cloudURL);
-        }}
-        aria-label={"Shared"}
-        size={"sm"}
-        leftIcon={<IconCloud />}
-      >
-        Public
-      </Button>
+      <HoverMenu
+        menuButton={
+          <Button
+            onClick={() => {
+              window.open(workflowsTable?.curWorkflow?.cloudURL);
+            }}
+            aria-label={"Shared"}
+            size={"xs"}
+            iconSpacing={"2px"}
+            leftIcon={<IconCloud />}
+            height={"26px"}
+            px={1}
+          >
+            Public
+          </Button>
+        }
+        menuContent={
+          <HStack width={"200px"} p={1} color={"blue.400"}>
+            <Link href={cloudURL} noOfLines={1} isExternal>
+              {cloudURL}
+            </Link>
+            <IconButton
+              size={"xs"}
+              variant={"ghost"}
+              icon={<IconCopy size={19} />}
+              aria-label="copy link"
+            ></IconButton>
+          </HStack>
+        }
+      />
     </>
   );
 }
diff --git a/ui/src/share/shareUtils.tsx b/ui/src/share/shareUtils.tsx
new file mode 100644
index 0000000..4841dfc
--- /dev/null
+++ b/ui/src/share/shareUtils.tsx
@@ -0,0 +1,45 @@
+import { IconLink, IconLock, IconWorld } from "@tabler/icons-react";
+import { CustomSelectorOption } from "../components/CustomSelector";
+import { WorkflowPrivacy } from "../types/dbTypes";
+// @ts-expect-error
+import { app } from "/scripts/app.js";
+
+export function generateRandomKey(length: number) {
+  // Generate a random array of bytes
+  const array = new Uint8Array(length);
+  window.crypto.getRandomValues(array);
+
+  // Convert the bytes to a hex string
+  return Array.from(array, (byte) => byte.toString(16).padStart(2, "0")).join(
+    "",
+  );
+}
+
+export const privacyOptions: CustomSelectorOption<WorkflowPrivacy>[] = [
+  { label: "Private", value: "PRIVATE", icon: <IconLock /> },
+  {
+    label: "Anyone with the link can access",
+    value: "UNLISTED",
+    icon: <IconLink />,
+  },
+  { label: "Public", value: "PUBLIC", icon: <IconWorld /> },
+];
+
+export const getNodeDefs = () => {
+  const allNodes = app.graph._nodes;
+  // console.log("allNodes", allNodes);
+  // console.log(
+  //   "LiteGraph.registered_node_types",
+  //   LiteGraph.registered_node_types,
+  // );
+  const nodeDefs = {};
+  for (let n of allNodes) {
+    // @ts-ignore
+    if (n.type in LiteGraph.registered_node_types) {
+      // TODO: js only nodes has no nodeData field, need to handle this....
+      // @ts-ignore
+      nodeDefs[n.type] = LiteGraph.registered_node_types[n.type].nodeData;
+    }
+  }
+  return nodeDefs;
+};
diff --git a/ui/src/types/dbTypes.ts b/ui/src/types/dbTypes.ts
index 6406f7e..7543c11 100644
--- a/ui/src/types/dbTypes.ts
+++ b/ui/src/types/dbTypes.ts
@@ -16,7 +16,6 @@ export interface Workflow extends SortableItem {
   coverMediaPath?: string;
   cloudID?: string;
   cloudURL?: string;
-  privacy?: WorkflowPrivacy;
 }
 
 export interface TableBaseModel {
@@ -121,6 +120,6 @@ export enum EFlowOperationType {
   DELETE = "delete",
 }
 
-type WorkflowPrivacy = "PUBLIC" | "PRIVATE" | "UNLISTED";
+export type WorkflowPrivacy = "PUBLIC" | "PRIVATE" | "UNLISTED";
 
 export const WORKSPACE_INDEXDB_NAME = "comfyui_workspace_db";

From 16a53b7064d5b7b2a5b85934013ed582053d5ee8 Mon Sep 17 00:00:00 2001
From: Weixuan Fu <weixuanf@outlook.com>
Date: Sat, 17 Feb 2024 15:42:59 +0800
Subject: [PATCH 2/5] radio button select versions

---
 ui/src/components/DropdownTitle.tsx |   3 +-
 ui/src/share/ShareDialog.tsx        | 129 ++++++++++++++++++----------
 ui/src/share/SharedTopbarButton.tsx |   9 +-
 3 files changed, 87 insertions(+), 54 deletions(-)

diff --git a/ui/src/components/DropdownTitle.tsx b/ui/src/components/DropdownTitle.tsx
index fa9cf38..3067aa1 100644
--- a/ui/src/components/DropdownTitle.tsx
+++ b/ui/src/components/DropdownTitle.tsx
@@ -135,7 +135,8 @@ export default function DropdownTitle() {
               height={"29px"}
               aria-label="menu"
               size={"sm"}
-              colorScheme="teal"
+              colorScheme="gray"
+              backgroundColor={"gray.700"}
               onClick={onOpen}
               onMouseEnter={onOpen}
               onMouseLeave={delayedClose}
diff --git a/ui/src/share/ShareDialog.tsx b/ui/src/share/ShareDialog.tsx
index e9be3df..fc68cdd 100644
--- a/ui/src/share/ShareDialog.tsx
+++ b/ui/src/share/ShareDialog.tsx
@@ -1,14 +1,20 @@
 import {
+  Box,
   Button,
   Flex,
   HStack,
   Input,
+  InputGroup,
+  InputLeftAddon,
+  InputRightAddon,
   Link,
   Modal,
   ModalBody,
   ModalContent,
   ModalHeader,
   ModalOverlay,
+  Radio,
+  RadioGroup,
   Stack,
   Text,
   useToast,
@@ -16,7 +22,13 @@ import {
 import { Workflow, WorkflowPrivacy, WorkflowVersion } from "../types/dbTypes";
 import { useEffect, useRef, useState } from "react";
 import CustomSelector from "../components/CustomSelector";
-import { IconCloud, IconCopy, IconExternalLink } from "@tabler/icons-react";
+import {
+  IconCheck,
+  IconCloud,
+  IconCopy,
+  IconExternalLink,
+  IconPlus,
+} from "@tabler/icons-react";
 import {
   userSettingsTable,
   workflowVersionsTable,
@@ -27,6 +39,7 @@ import { api } from "/scripts/api.js";
 // @ts-ignore
 import { app } from "/scripts/app.js";
 import { generateRandomKey, getNodeDefs, privacyOptions } from "./shareUtils";
+import { formatTimestamp } from "../utils";
 
 interface Props {
   onClose: () => void;
@@ -40,6 +53,9 @@ export default function ShareDialog({ onClose }: Props) {
   const [loading, setLoading] = useState(false);
   const [cloudHost, setCloudHost] = useState("");
   const [privacy, setPrivacy] = useState<WorkflowPrivacy>("PRIVATE");
+  const [selectedVersion, setSelectedVersion] = useState<
+    string | "new_version"
+  >("new_version");
   const cloudHostRef = useRef("");
   const [workflow, setWorkflow] = useState<Workflow>();
   const toast = useToast();
@@ -69,6 +85,8 @@ export default function ShareDialog({ onClose }: Props) {
         cloudID: cloudVersionID,
       }));
     loadData();
+    window.open(cloudHost + "/workflow/" + cloudID, "_blank");
+    setLoading(false);
   };
   useEffect(() => {
     loadData();
@@ -116,14 +134,19 @@ export default function ShareDialog({ onClose }: Props) {
         ? ((await userSettingsTable?.getSetting("cloudHost")) as string)
         : "http://localhost:3000";
     const nodeDefs = getNodeDefs();
-    const newVer = await workflowVersionsTable?.add({
-      workflowID: workflow!.id,
-      name: versionName,
-      createTime: Date.now(),
-      json: JSON.stringify(app.graph.serialize()),
-    });
-    if (!newVer) {
-      alert("Failed to create new version, please try again.");
+    let version: WorkflowVersion | undefined;
+    if (selectedVersion === "new_version") {
+      version = await workflowVersionsTable?.add({
+        workflowID: workflow!.id,
+        name: versionName,
+        createTime: Date.now(),
+        json: JSON.stringify(app.graph.serialize()),
+      });
+    } else {
+      version = await workflowVersionsTable?.get(selectedVersion);
+    }
+    if (!version) {
+      alert(`Failed to find version: ${selectedVersion}, please try again.`);
       setLoading(false);
       return;
     }
@@ -137,16 +160,14 @@ export default function ShareDialog({ onClose }: Props) {
       "Share Workflow",
       "width=800,height=800",
     );
-    setLoading(false);
     const handleChildReady = (event: MessageEvent) => {
       if (event.origin === host && event.data === "child_ready") {
         const curWorkflow = workflowsTable?.curWorkflow;
         // Send data to the new window after it loads
-        console.log("sending privacy", privacy);
         sharePopup!.postMessage(
           {
             workflow: curWorkflow,
-            version: newVer,
+            version: version,
             nodeDefs: nodeDefs,
             privacy: privacy,
           },
@@ -203,40 +224,58 @@ export default function ShareDialog({ onClose }: Props) {
                 </Button>
               </HStack>
             )}
-            <HStack>
-              <Text>New Version</Text>
-              <Input
-                value={versionName}
-                maxWidth={440}
-                onChange={(e) => {
-                  setVersionName(e.target.value);
-                }}
-              />
-            </HStack>
-            {localVersions.slice(0, 4).map((ver) => {
-              return (
-                <HStack key={ver.id} spacing={4} alignItems={"center"} mb={3}>
-                  <Text>{ver.name}</Text>
-                  {ver.cloudID && (
-                    <a
-                      href={cloudHost + "/workflow_ver/" + ver.cloudID}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      style={{ textDecoration: "none" }}
-                    >
-                      <Button
-                        size={"xs"}
-                        colorScheme="teal"
-                        leftIcon={<IconCloud />}
-                        rightIcon={<IconExternalLink size={18} />}
-                      >
-                        Shared
-                      </Button>
-                    </a>
-                  )}
+            <Text>Choose a version to share:</Text>
+            <RadioGroup
+              defaultValue={selectedVersion}
+              gap={4}
+              onChange={(val) => {
+                setSelectedVersion(val);
+              }}
+            >
+              <Radio key={"new_version"} value="new_version" mb={5}>
+                <HStack>
+                  <Input
+                    value={versionName}
+                    width={220}
+                    flex={1}
+                    onChange={(e) => {
+                      setVersionName(e.target.value);
+                    }}
+                  />
+
+                  <Flex width={"auto"} color="green">
+                    <Text>New version</Text>
+                  </Flex>
                 </HStack>
-              );
-            })}
+              </Radio>
+              {localVersions.slice(0, 4).map((ver) => {
+                return (
+                  <Radio key={ver.id} value={ver.id} mb={5}>
+                    <HStack spacing={4} alignItems={"center"}>
+                      <Text>{ver.name}</Text>
+                      <Text>{formatTimestamp(ver.createTime)}</Text>
+                      {ver.cloudID && (
+                        <a
+                          href={cloudHost + "/workflow_ver/" + ver.cloudID}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          style={{ textDecoration: "none" }}
+                        >
+                          <Button
+                            size={"xs"}
+                            colorScheme="teal"
+                            leftIcon={<IconCloud />}
+                            rightIcon={<IconExternalLink size={18} />}
+                          >
+                            Shared
+                          </Button>
+                        </a>
+                      )}
+                    </HStack>
+                  </Radio>
+                );
+              })}
+            </RadioGroup>
           </Stack>
           <HStack justifyContent={"flex-end"} mt={16}>
             <Button colorScheme="teal" onClick={onShare} isDisabled={loading}>
diff --git a/ui/src/share/SharedTopbarButton.tsx b/ui/src/share/SharedTopbarButton.tsx
index 30c6560..8d789a4 100644
--- a/ui/src/share/SharedTopbarButton.tsx
+++ b/ui/src/share/SharedTopbarButton.tsx
@@ -1,11 +1,4 @@
-import {
-  Button,
-  Text,
-  Stack,
-  Link,
-  HStack,
-  IconButton,
-} from "@chakra-ui/react";
+import { Button, Link, HStack, IconButton } from "@chakra-ui/react";
 import { IconCloud, IconCopy } from "@tabler/icons-react";
 import { workflowsTable } from "../db-tables/WorkspaceDB";
 import { useContext, useEffect, useState } from "react";

From 886e83c8b4943c06c906a716035982e3776ff13c Mon Sep 17 00:00:00 2001
From: Weixuan Fu <weixuanf@outlook.com>
Date: Sat, 17 Feb 2024 16:00:48 +0800
Subject: [PATCH 3/5] share versions ui

---
 ui/src/share/ShareDialog.tsx | 73 +++++++++++++++++++-----------------
 ui/src/utils.tsx             |  6 ++-
 2 files changed, 44 insertions(+), 35 deletions(-)

diff --git a/ui/src/share/ShareDialog.tsx b/ui/src/share/ShareDialog.tsx
index fc68cdd..1887d67 100644
--- a/ui/src/share/ShareDialog.tsx
+++ b/ui/src/share/ShareDialog.tsx
@@ -226,55 +226,60 @@ export default function ShareDialog({ onClose }: Props) {
             )}
             <Text>Choose a version to share:</Text>
             <RadioGroup
-              defaultValue={selectedVersion}
               gap={4}
               onChange={(val) => {
                 setSelectedVersion(val);
               }}
+              value={selectedVersion}
             >
-              <Radio key={"new_version"} value="new_version" mb={5}>
-                <HStack>
+              <Stack>
+                <HStack mb={5} alignItems={"center"}>
+                  <Radio key={"new_version"} value="new_version" />
                   <Input
                     value={versionName}
-                    width={220}
-                    flex={1}
+                    width={"60%"}
+                    onFocus={() => {
+                      setSelectedVersion("new_version");
+                    }}
                     onChange={(e) => {
                       setVersionName(e.target.value);
                     }}
                   />
-
-                  <Flex width={"auto"} color="green">
+                  <Flex color="green">
                     <Text>New version</Text>
                   </Flex>
                 </HStack>
-              </Radio>
-              {localVersions.slice(0, 4).map((ver) => {
-                return (
-                  <Radio key={ver.id} value={ver.id} mb={5}>
-                    <HStack spacing={4} alignItems={"center"}>
-                      <Text>{ver.name}</Text>
-                      <Text>{formatTimestamp(ver.createTime)}</Text>
-                      {ver.cloudID && (
-                        <a
-                          href={cloudHost + "/workflow_ver/" + ver.cloudID}
-                          target="_blank"
-                          rel="noopener noreferrer"
-                          style={{ textDecoration: "none" }}
-                        >
-                          <Button
-                            size={"xs"}
-                            colorScheme="teal"
-                            leftIcon={<IconCloud />}
-                            rightIcon={<IconExternalLink size={18} />}
+
+                {localVersions.slice(0, 4).map((ver) => {
+                  return (
+                    <Radio key={ver.id} value={ver.id} mb={5}>
+                      <HStack spacing={4} alignItems={"center"}>
+                        <Text>{ver.name}</Text>
+                        <Text color={"GrayText"}>
+                          {formatTimestamp(ver.createTime, false)}
+                        </Text>
+                        {ver.cloudID && (
+                          <a
+                            href={cloudHost + "/workflow_ver/" + ver.cloudID}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            style={{ textDecoration: "none" }}
                           >
-                            Shared
-                          </Button>
-                        </a>
-                      )}
-                    </HStack>
-                  </Radio>
-                );
-              })}
+                            <Button
+                              size={"xs"}
+                              colorScheme="teal"
+                              leftIcon={<IconCloud />}
+                              rightIcon={<IconExternalLink size={18} />}
+                            >
+                              Shared
+                            </Button>
+                          </a>
+                        )}
+                      </HStack>
+                    </Radio>
+                  );
+                })}
+              </Stack>
             </RadioGroup>
           </Stack>
           <HStack justifyContent={"flex-end"} mt={16}>
diff --git a/ui/src/utils.tsx b/ui/src/utils.tsx
index 85a948d..ff7c8f7 100644
--- a/ui/src/utils.tsx
+++ b/ui/src/utils.tsx
@@ -106,6 +106,7 @@ function isValidFileName(fileName: string) {
 
 export function formatTimestamp(
   unixTimestamp: number,
+  showHourMinue: boolean = true,
   showSec: boolean = false,
 ) {
   // Create a new Date object from the UNIX timestamp
@@ -119,7 +120,10 @@ export function formatTimestamp(
   const minutes = String(date.getMinutes()).padStart(2, "0");
   const seconds = String(date.getSeconds()).padStart(2, "0");
   // Format the date and time string
-  const res = `${month}-${day}-${year} ${hours}:${minutes}`;
+  const res = `${month}-${day}-${year}`;
+  if (showHourMinue) {
+    return res + ` ${hours}:${minutes}`;
+  }
   if (showSec) {
     return res + `:${seconds}`;
   }

From ee00b34f9b2ce16cab9c2f5893a8266bf70140e5 Mon Sep 17 00:00:00 2001
From: Weixuan Fu <weixuanf@outlook.com>
Date: Sat, 17 Feb 2024 17:46:48 +0800
Subject: [PATCH 4/5] fix redirect to url

---
 ui/src/share/ShareDialog.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/src/share/ShareDialog.tsx b/ui/src/share/ShareDialog.tsx
index 1887d67..e2d9ef1 100644
--- a/ui/src/share/ShareDialog.tsx
+++ b/ui/src/share/ShareDialog.tsx
@@ -85,7 +85,7 @@ export default function ShareDialog({ onClose }: Props) {
         cloudID: cloudVersionID,
       }));
     loadData();
-    window.open(cloudHost + "/workflow/" + cloudID, "_blank");
+    window.open(cloudHostRef.current + "/workflow/" + cloudID, "_blank");
     setLoading(false);
   };
   useEffect(() => {

From 96473555b79a726070dc2e9548a46a75ee335649 Mon Sep 17 00:00:00 2001
From: Weixuan Fu <weixuanf@outlook.com>
Date: Tue, 20 Feb 2024 00:23:17 +0800
Subject: [PATCH 5/5] fix sharedialog radio picker

---
 ui/src/share/ShareDialog.tsx                  | 47 +++++--------------
 .../share/ShareDialogWorkflowVersionRadio.tsx | 46 ++++++++++++++++++
 ui/src/share/SharedTopbarButton.tsx           |  2 +
 ui/src/types/dbTypes.ts                       |  1 +
 4 files changed, 62 insertions(+), 34 deletions(-)
 create mode 100644 ui/src/share/ShareDialogWorkflowVersionRadio.tsx

diff --git a/ui/src/share/ShareDialog.tsx b/ui/src/share/ShareDialog.tsx
index e2d9ef1..134a7e5 100644
--- a/ui/src/share/ShareDialog.tsx
+++ b/ui/src/share/ShareDialog.tsx
@@ -22,13 +22,7 @@ import {
 import { Workflow, WorkflowPrivacy, WorkflowVersion } from "../types/dbTypes";
 import { useEffect, useRef, useState } from "react";
 import CustomSelector from "../components/CustomSelector";
-import {
-  IconCheck,
-  IconCloud,
-  IconCopy,
-  IconExternalLink,
-  IconPlus,
-} from "@tabler/icons-react";
+import { IconCloud, IconCopy, IconExternalLink } from "@tabler/icons-react";
 import {
   userSettingsTable,
   workflowVersionsTable,
@@ -40,6 +34,7 @@ import { api } from "/scripts/api.js";
 import { app } from "/scripts/app.js";
 import { generateRandomKey, getNodeDefs, privacyOptions } from "./shareUtils";
 import { formatTimestamp } from "../utils";
+import ShareDialogWorkflowVersionRadio from "./ShareDialogWorkflowVersionRadio";
 
 interface Props {
   onClose: () => void;
@@ -77,15 +72,19 @@ export default function ShareDialog({ onClose }: Props) {
       localID &&
       (await workflowsTable?.updateFlow(localID, {
         cloudID: cloudID,
-        cloudURL: cloudHost + "/workflow/" + cloudID,
+        cloudURL: cloudHostRef.current + "/workflow/" + cloudID,
       }));
     localVerID &&
       cloudVersionID &&
       (await workflowVersionsTable?.update(localVerID, {
         cloudID: cloudVersionID,
+        cloudURL: cloudHostRef.current + "/workflow_ver/" + cloudVersionID,
       }));
     loadData();
-    window.open(cloudHostRef.current + "/workflow/" + cloudID, "_blank");
+    window.open(
+      cloudHostRef.current + "/workflow_ver/" + cloudVersionID,
+      "_blank",
+    );
     setLoading(false);
   };
   useEffect(() => {
@@ -252,31 +251,11 @@ export default function ShareDialog({ onClose }: Props) {
 
                 {localVersions.slice(0, 4).map((ver) => {
                   return (
-                    <Radio key={ver.id} value={ver.id} mb={5}>
-                      <HStack spacing={4} alignItems={"center"}>
-                        <Text>{ver.name}</Text>
-                        <Text color={"GrayText"}>
-                          {formatTimestamp(ver.createTime, false)}
-                        </Text>
-                        {ver.cloudID && (
-                          <a
-                            href={cloudHost + "/workflow_ver/" + ver.cloudID}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            style={{ textDecoration: "none" }}
-                          >
-                            <Button
-                              size={"xs"}
-                              colorScheme="teal"
-                              leftIcon={<IconCloud />}
-                              rightIcon={<IconExternalLink size={18} />}
-                            >
-                              Shared
-                            </Button>
-                          </a>
-                        )}
-                      </HStack>
-                    </Radio>
+                    <ShareDialogWorkflowVersionRadio
+                      key={ver.id}
+                      version={ver}
+                      cloudHost={cloudHost}
+                    />
                   );
                 })}
               </Stack>
diff --git a/ui/src/share/ShareDialogWorkflowVersionRadio.tsx b/ui/src/share/ShareDialogWorkflowVersionRadio.tsx
new file mode 100644
index 0000000..0760124
--- /dev/null
+++ b/ui/src/share/ShareDialogWorkflowVersionRadio.tsx
@@ -0,0 +1,46 @@
+import { Button, HStack, Radio, Text } from "@chakra-ui/react";
+import { WorkflowVersion } from "../types/dbTypes";
+import { formatTimestamp } from "../utils";
+import { IconCloud, IconExternalLink } from "@tabler/icons-react";
+
+export default function ShareDialogWorkflowVersionRadio({
+  version,
+  cloudHost,
+}: {
+  version: WorkflowVersion;
+  cloudHost: string;
+}) {
+  const ver = version;
+  const content = (
+    <HStack spacing={4} alignItems={"center"}>
+      <Text>{ver.name}</Text>
+      <Text color={"GrayText"}>{formatTimestamp(ver.createTime, false)}</Text>
+      {ver.cloudID && (
+        <a
+          href={cloudHost + "/workflow_ver/" + ver.cloudID}
+          target="_blank"
+          rel="noopener noreferrer"
+          style={{ textDecoration: "none" }}
+        >
+          <Button
+            size={"xs"}
+            colorScheme="teal"
+            leftIcon={<IconCloud />}
+            rightIcon={<IconExternalLink size={18} />}
+          >
+            Shared
+          </Button>
+        </a>
+      )}
+    </HStack>
+  );
+  if (!version.cloudID) {
+    return (
+      <Radio key={ver.id} value={ver.id} mb={5}>
+        {content}
+      </Radio>
+    );
+  }
+
+  return <>{content}</>;
+}
diff --git a/ui/src/share/SharedTopbarButton.tsx b/ui/src/share/SharedTopbarButton.tsx
index 8d789a4..5bc9be9 100644
--- a/ui/src/share/SharedTopbarButton.tsx
+++ b/ui/src/share/SharedTopbarButton.tsx
@@ -14,6 +14,8 @@ export function SharedTopbarButton({}) {
       workflowsTable?.get(curFlowID).then((flow) => {
         if (flow?.cloudID) {
           setCloudURL(flow.cloudURL);
+        } else {
+          setCloudURL(undefined);
         }
       });
     }
diff --git a/ui/src/types/dbTypes.ts b/ui/src/types/dbTypes.ts
index 7543c11..968b1a9 100644
--- a/ui/src/types/dbTypes.ts
+++ b/ui/src/types/dbTypes.ts
@@ -59,6 +59,7 @@ export type WorkflowVersion = {
   json: string;
   createTime: number;
   cloudID?: string;
+  cloudURL?: string;
   nodeDefs?: string; //for cloud workflow version
 };