From 04c8bece6badb98f412b9d2978fa9bd4830ccda0 Mon Sep 17 00:00:00 2001
From: Weixuan Fu <weixuanf@outlook.com>
Date: Wed, 6 Mar 2024 15:51:14 +0800
Subject: [PATCH] ui improv

---
 ui/src/App.tsx                                 |  7 +++++++
 .../AddTagToWorkflowPopover.tsx                |  2 +-
 ui/src/RecentFilesDrawer/MoreActionMenu.tsx    |  6 +++++-
 ui/src/RecentFilesDrawer/RecentFilesDrawer.tsx |  4 ++--
 ui/src/RecentFilesDrawer/WorkflowListItem.tsx  | 18 ++++++++++++++----
 5 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/ui/src/App.tsx b/ui/src/App.tsx
index 3fcafe8..1c4d038 100644
--- a/ui/src/App.tsx
+++ b/ui/src/App.tsx
@@ -97,6 +97,13 @@ export default function App() {
         }),
       ]);
       setIsDirty(false);
+      userSettingsTable?.autoSave &&
+        toast({
+          title: "Saved",
+          status: "success",
+          duration: 1000,
+          isClosable: true,
+        });
     }
   }, []);
   const deleteCurWorkflow = async () => {
diff --git a/ui/src/RecentFilesDrawer/AddTagToWorkflowPopover.tsx b/ui/src/RecentFilesDrawer/AddTagToWorkflowPopover.tsx
index 69649f7..11f2635 100644
--- a/ui/src/RecentFilesDrawer/AddTagToWorkflowPopover.tsx
+++ b/ui/src/RecentFilesDrawer/AddTagToWorkflowPopover.tsx
@@ -62,7 +62,7 @@ export default function AddTagToWorkflowPopover({ workflow }: Props) {
   return (
     <Popover isLazy={true} onOpen={onOpen} closeOnBlur={false} placement="auto">
       <PopoverTrigger>
-        <MenuItem icon={<IconTag />}>Tag</MenuItem>
+        <MenuItem icon={<IconTag />}>Add Tag</MenuItem>
       </PopoverTrigger>
       <PopoverContent>
         <PopoverArrow />
diff --git a/ui/src/RecentFilesDrawer/MoreActionMenu.tsx b/ui/src/RecentFilesDrawer/MoreActionMenu.tsx
index 751e938..1b94930 100644
--- a/ui/src/RecentFilesDrawer/MoreActionMenu.tsx
+++ b/ui/src/RecentFilesDrawer/MoreActionMenu.tsx
@@ -48,7 +48,11 @@ export default function MoreActionMenu({ workflow }: Props) {
           <AddTagToWorkflowPopover workflow={workflow} />
           <Tooltip
             hasArrow
-            label={isLocked ? "Click to unlock" : "Click to lock"}
+            label={
+              isLocked
+                ? "Unlock workflow, allow modifying"
+                : "Lock workflow, prevent modifying"
+            }
             placement="bottom"
           >
             <MenuItem
diff --git a/ui/src/RecentFilesDrawer/RecentFilesDrawer.tsx b/ui/src/RecentFilesDrawer/RecentFilesDrawer.tsx
index d8b1ab9..ae7ffdc 100644
--- a/ui/src/RecentFilesDrawer/RecentFilesDrawer.tsx
+++ b/ui/src/RecentFilesDrawer/RecentFilesDrawer.tsx
@@ -208,8 +208,8 @@ export default function RecentFilesDrawer({ onClose, onClickNewFlow }: Props) {
         <Card
           width={DRAWER_WIDTH}
           height={"100vh"}
-          pl={4}
-          pr={5}
+          pl={2}
+          pr={2}
           pt={4}
           gap={4}
           position={"absolute"}
diff --git a/ui/src/RecentFilesDrawer/WorkflowListItem.tsx b/ui/src/RecentFilesDrawer/WorkflowListItem.tsx
index ee4b72f..118a3f5 100644
--- a/ui/src/RecentFilesDrawer/WorkflowListItem.tsx
+++ b/ui/src/RecentFilesDrawer/WorkflowListItem.tsx
@@ -9,7 +9,7 @@ import {
   IconButton,
   Tooltip,
 } from "@chakra-ui/react";
-import { IconExternalLink } from "@tabler/icons-react";
+import { IconExternalLink, IconLock } from "@tabler/icons-react";
 import { formatTimestamp, openWorkflowInNewTab } from "../utils";
 import { MouseEvent, useState, memo, ChangeEvent, useContext } from "react";
 import WorkflowListItemRightClickMenu from "./WorkflowListItemRightClickMenu";
@@ -80,9 +80,19 @@ export default memo(function WorkflowListItem({ workflow }: Props) {
         )}
 
         <Stack textAlign={"left"} gap={0}>
-          <Text fontWeight={"500"} noOfLines={2}>
-            {workflow.name ?? "untitled"}
-          </Text>
+          <Flex alignItems={"center"}>
+            <Text
+              fontWeight={"500"}
+              noOfLines={2}
+              style={{ display: "inline-block" }}
+            >
+              {workflow.name ?? "untitled"}
+            </Text>
+            {workflow.saveLock && (
+              <IconLock size={18} style={{ display: "inline-block" }} />
+            )}
+          </Flex>
+
           <Text color={"GrayText"} ml={2} fontSize={"sm"}>
             Updated: {formatTimestamp(workflow.updateTime)}
           </Text>