add version hi`story drawer

ui/src/RecentFilesDrawer/WorkspaceSettingsModal.tsx

@@ -41,6 +41,7 @@ export default function WorkspaceSettingsModal({
                 <SelectMyWorkflowsDir />
                 <ShortcutSettings />
                 <TwoWaySyncSettings />
+                <SharekeySetting />
                 <FolderOnTopSettings />
                 <CommonNumberSetting
                   label={`Maximum number of save change history to store. This does not include
@@ -52,7 +53,7 @@ export default function WorkspaceSettingsModal({
                   settingKey="disableUnsavedWarning"
                   text={`Disable the "Save or Discard" warning when closing a workflow with unsaved changes. ⛔️Be careful, if you disable this reminder and forget to save your workflow, you will lose your changes.`}
                 />
-                <SharekeySetting />
+
                 <CommonCheckboxSettings
                   settingKey="hideCoverImage"
                   text="Hide thumbnail image in workflow list"

ui/src/components/CreateVersionDialog.tsx

@@ -37,7 +37,6 @@ export default function CreateVersionDialog({ onClose }: Props) {
   };
 
   const onSubmit = async () => {
-    console.log("session, sharekey", session?.shareKey);
     const trimName = newVersionName.trim();
     setNewVersionName(trimName);
     if (!workflowsTable?.curWorkflow) {

ui/src/components/VersionHistoryDrawer.tsx

@@ -27,19 +27,22 @@ import {
 } from "../db-tables/WorkspaceDB";
 import { useContext, useEffect, useState } from "react";
 import { WorkspaceContext } from "../WorkspaceContext";
-import { formatTimestamp } from "../utils";
 import { Changelog, WorkflowVersion } from "../types/dbTypes";
 import DeleteConfirm from "./DeleteConfirm";
 import { app } from "../utils/comfyapp";
 
 export function VersionHistoryDrawer({ onClose }: { onClose: () => void }) {
-  const { curFlowID, isDirty, loadWorkflowID, curVersion, session } =
+  const { isDirty, loadWorkflowID, curVersion, session } =
     useContext(WorkspaceContext);
   const [active, setActive] = useState(0); // 0: version、1: changelog
   const [selectedVersion, setSelectedVersion] = useState<string | null>(null);
   const [changelogs, setChangelogs] = useState<Changelog[]>([]);
-  const [versions, setVersions] = useState<WorkflowVersion[]>([]);
-
+  const [versions, setVersions] = useState<
+    (WorkflowVersion & { isCloud?: boolean })[]
+  >([]);
+  const curFlow = workflowsTable?.curWorkflow;
+  const cloudHost = userSettingsTable?.settings?.cloudHost;
+  const [loading, setLoading] = useState(false);
   const loadChangeLogs = async (flowId: string) => {
     const workflow = await workflowsTable?.get(flowId);
     const changelogs = await changelogsTable?.listByWorkflowID(flowId);
@@ -52,12 +55,14 @@ export function VersionHistoryDrawer({ onClose }: { onClose: () => void }) {
   };
 
   const loadVersions = async () => {
-    const vers =
-      (await workflowVersionsTable?.listByWorkflowID(curFlowID!)) ?? [];
-    if (session?.shareKey) {
-      fetch(
+    let vers =
+      (await workflowVersionsTable?.listByWorkflowID(curFlow!.id)) ?? [];
+    if (session?.shareKey && curFlow?.cloudID) {
+      setLoading(true);
+      await fetch(
         userSettingsTable?.settings?.cloudHost! +
-          "/api/listWorkflowVersionsByWorkflowID",
+          "/api/listWorkflowVersionsByWorkflowID?workflowID=" +
+          curFlow?.cloudID,
         {
           headers: {
             authorization: `Bearer ${session?.shareKey}`,
@@ -66,11 +71,20 @@ export function VersionHistoryDrawer({ onClose }: { onClose: () => void }) {
       )
         .then((resp) => resp.json())
         .then((data) => {
-          console.log("cloud versions", data);
-          if (data.data) {
-            setVersions(data.data);
+          if (data.items) {
+            const cloudVers = data.items.map((v: any) => {
+              return {
+                ...v,
+                isCloud: true,
+              };
+            });
+            vers = vers.concat(cloudVers as WorkflowVersion[]);
           }
+        })
+        .catch((e) => {
+          console.error(e);
         });
+      setLoading(false);
     }
 
     setVersions(vers);
@@ -88,7 +102,7 @@ export function VersionHistoryDrawer({ onClose }: { onClose: () => void }) {
         loadVersions();
         break;
       case 1:
-        loadChangeLogs(curFlowID!);
+        loadChangeLogs(curFlow!.id);
         break;
     }
   }, [active]);
@@ -135,7 +149,16 @@ export function VersionHistoryDrawer({ onClose }: { onClose: () => void }) {
           </TabList>
           <TabPanels>
             <TabPanel>
+              {session?.shareKey && (
+                <Text color="GrayText" mb={3}>
+                  Connected to{" "}
+                  <a href={cloudHost} target="_blank">
+                    {cloudHost}
+                  </a>
+                </Text>
+              )}
               <Stack divider={<StackDivider />} spacing={2}>
+                {loading && <Text>Loading...</Text>}
                 {versions?.map((version) => {
                   return (
                     <Flex
@@ -149,11 +172,27 @@ export function VersionHistoryDrawer({ onClose }: { onClose: () => void }) {
                       borderRadius={4}
                     >
                       <Stack textAlign={"left"} gap={0}>
-                        <Text fontWeight={"500"}>
-                          {version.name ?? "untitled"}
-                        </Text>
+                        {version.isCloud ? (
+                          <a
+                            target="_blank"
+                            href={`${cloudHost}/workflow/${version.workflowID}/${version.id}`}
+                          >
+                            {version.name ?? "untitled"}
+                          </a>
+                        ) : (
+                          <Text fontWeight={"500"}>
+                            {version.name ?? "untitled"}
+                          </Text>
+                        )}
+
                         <Text color={"GrayText"} fontSize={"sm"}>
-                          Created: {formatTimestamp(version.createTime)}
+                          Created:{" "}
+                          {new Date(
+                            version.createTime ??
+                              version.createdAt ??
+                              version.created_at ??
+                              "",
+                          ).toLocaleString()}
                         </Text>
                       </Stack>
                       <Flex alignItems="center" gap={2}>
@@ -167,18 +206,20 @@ export function VersionHistoryDrawer({ onClose }: { onClose: () => void }) {
                               return;
                             }
                             app.loadGraphData(JSON.parse(version.json));
-                            loadWorkflowID(curFlowID!, version.id);
+                            loadWorkflowID(curFlow!.id, version.id);
                             onClose();
                           }}
                         >
                           Load
                         </Button>
-                        <DeleteConfirm
-                          promptMessage="Are you sure you want to delete this version?"
-                          onDelete={() => {
-                            onDelete(version.id);
-                          }}
-                        />
+                        {!version.isCloud && (
+                          <DeleteConfirm
+                            promptMessage="Are you sure you want to delete this version?"
+                            onDelete={() => {
+                              onDelete(version.id);
+                            }}
+                          />
+                        )}
                       </Flex>
                     </Flex>
                   );
@@ -203,9 +244,6 @@ export function VersionHistoryDrawer({ onClose }: { onClose: () => void }) {
                             return;
                           }
                           app.loadGraphData(JSON.parse(c.json));
-                          workflowsTable?.updateFlow(curFlowID!, {
-                            json: c.json,
-                          });
                           onClose();
                         }}
                         isActive={c.id === selectedVersion}

ui/src/settings/SharekeySetting.tsx

@@ -8,6 +8,7 @@ export default function SharekeySetting() {
   const toast = useToast();
   const { session, updateSession } = useContext(WorkspaceContext);
   const [text, setText] = useState("");
+  const cloudDomain = new URL(userSettingsTable?.settings?.cloudHost!).hostname;
 
   useEffect(() => {
     setText(session?.shareKey ?? "");
@@ -23,18 +24,26 @@ export default function SharekeySetting() {
   };
 
   return (
-    <Stack>
-      <a
-        href={userSettingsTable?.settings?.cloudHost + "/auth/shareKey"}
-        target="_blank"
-      >
-        Copy your share key here and paste it to below to start sharing
-        workflows
-      </a>
+    <Stack gap={3}>
+      <p style={{ fontWeight: "bold" }}>Cloud Backup [Beta]</p>
+      <p>
+        <a
+          href={userSettingsTable?.settings?.cloudHost + "/auth/shareKey"}
+          target="_blank"
+          style={{ textDecoration: "underline" }}
+        >
+          <Button size={"sm"}>👉Copy your share key from here</Button>
+        </a>{" "}
+        and paste it below to start saving workflow versions to cloud at{" "}
+        <a href={userSettingsTable?.settings?.cloudHost!} target="_blank">
+          {cloudDomain}
+        </a>
+      </p>
 
-      <Flex gap={2} alignItems={"center"}>
+      <Flex alignItems={"center"}>
         <Input
           value={text}
+          placeholder="Paste your share key here"
           onChange={(e) => setText(e.target.value)}
           onBlur={() => submitChange(text)}
           onKeyDown={(e) => {

ui/src/settings/TwoWaySyncSettings.tsx

@@ -49,9 +49,8 @@ export default function TwoWaySyncSettings() {
   return (
     <Stack>
       <Text>
-        Only for legacy two way sync users to get back their data. Do not
-        disable two way sync if you have already enabled it. It may cause some
-        unexpected issues.
+        Only for legacy two way sync users to get back their data. [DO NOT
+        DISABLE]
       </Text>
       <Checkbox isChecked={checked} onChange={onTwoWaySyncChange}>
         Enable two way sync

ui/src/types/dbTypes.ts

@@ -66,9 +66,9 @@ export type WorkflowVersion = {
   name: string;
   workflowID: string;
   json: string;
-  createTime: number;
-  cloudID?: string;
-  cloudOrigin?: string;
+  createTime?: number;
+  createdAt?: string;
+  created_at?: string;
   authorID?: string;
   nodeDefs?: string; //for cloud workflow version
 };

ui/src/versionHistory/CreateVersionLogin.tsx

@@ -2,7 +2,6 @@ import { Button, Flex, Input, Stack } from "@chakra-ui/react";
 import { userSettingsTable } from "../db-tables/WorkspaceDB";
 import { useContext } from "react";
 import { WorkspaceContext } from "../WorkspaceContext";
-import { encodeKey } from "../utils/encryptUtils";
 import { saveShareKey } from "../utils/saveShareKey";
 
 export default function CreateVersionLogin() {
@@ -40,7 +39,13 @@ export default function CreateVersionLogin() {
       <Input
         placeholder="Paste your share key here"
         onChange={(e) => {
-          if (!e.target.value || e.target.value === "") return;
+          if (
+            !e.target.value ||
+            e.target.value === "" ||
+            e.target.value.length < 20
+          )
+            return;
+
           saveShareKey(e.target.value);
           updateSession({
             shareKey: e.target.value,