publish button

web/app/(commonLayout)/workflow/page.tsx

@@ -52,13 +52,13 @@ const initialEdges = [
     sourceHandle: 'condition1',
     target: '3',
   },
-  // {
-  //   id: '2',
-  //   type: 'custom',
-  //   source: '2',
-  //   sourceHandle: 'condition2',
-  //   target: '4',
-  // },
+  {
+    id: '2',
+    type: 'custom',
+    source: '2',
+    sourceHandle: 'condition2',
+    target: '4',
+  },
 ]
 
 const Page: FC = () => {

web/app/components/workflow/header/index.tsx

@@ -2,6 +2,7 @@ import type { FC } from 'react'
 import { memo } from 'react'
 import { useStore } from '../store'
 import RunAndHistory from './run-and-history'
+import Publish from './publish'
 import { Edit03 } from '@/app/components/base/icons/src/vender/solid/general'
 import { Grid01 } from '@/app/components/base/icons/src/vender/line/layout'
 import Button from '@/app/components/base/button'
@@ -47,12 +48,7 @@ const Header: FC = () => {
             </Button>
           )
         }
-        <Button
-          type='primary'
-          className='px-3 py-0 h-8 text-[13px] font-medium'
-        >
-          publish
-        </Button>
+        <Publish />
       </div>
     </div>
   )

web/app/components/workflow/header/publish.tsx

+import { useState } from 'react'
+import Button from '@/app/components/base/button'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+
+const Publish = () => {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <PortalToFollowElem
+      open={open}
+      onOpenChange={setOpen}
+      placement='bottom-end'
+      offset={{
+        mainAxis: 4,
+        crossAxis: -5,
+      }}
+    >
+      <PortalToFollowElemTrigger onClick={() => setOpen(v => !v)}>
+        <Button
+          type='primary'
+          className='px-3 py-0 h-8 text-[13px] font-medium'
+        >
+          publish
+        </Button>
+      </PortalToFollowElemTrigger>
+      <PortalToFollowElemContent className='z-[11]'>
+        <div className='w-[320px] bg-white rounded-2xl border-[0.5px] border-gray-200 shadow-xl'>
+          <div className='p-4 pt-3'>
+            <div className='flex items-center h-6 text-xs font-medium text-gray-500'>
+              Current Draft
+            </div>
+            <div className='flex items-center h-[18px] text-[13px] font-medium text-gray-700'>
+              Auto-Saved 3 min ago · Evan
+            </div>
+            <Button
+              type='primary'
+              className='mt-3 px-3 py-0 w-full h-8 border-[0.5px] border-primary-700 rounded-lg text-[13px] font-medium'
+            >
+              Publish
+            </Button>
+          </div>
+          <div className='p-4 pt-3 border-t-[0.5px] border-t-black/5'>
+            <div className='flex items-center h-6 text-xs font-medium text-gray-500'>
+              Latest Published
+            </div>
+            <div className='flex justify-between'>
+              <div className='flex items-center mt-[3px] mb-[3px] leading-[18px] text-[13px] font-medium text-gray-700'>
+                Auto-Saved 3 min ago · Evan
+              </div>
+              <Button className='ml-2 px-2 py-0 h-6 shadow-xs rounded-md text-xs font-medium text-gray-700 border-[0.5px] border-gray-200'>
+                Restore
+              </Button>
+            </div>
+          </div>
+        </div>
+      </PortalToFollowElemContent>
+    </PortalToFollowElem>
+  )
+}
+
+export default Publish

web/app/components/workflow/nodes/_base/components/next-step.tsx

@@ -133,8 +133,11 @@ const NextStep = () => {
           !!outgoers.length && outgoers.map(outgoer => (
             <div
               key={outgoer.id}
-              className='group flex items-center mb-3 last-of-type:mb-0 px-2 h-9 rounded-lg border-[0.5px] border-gray-200 bg-white hover:bg-gray-50 shadow-xs text-xs text-gray-700 cursor-pointer'
+              className='relative group flex items-center mb-3 last-of-type:mb-0 px-2 h-9 rounded-lg border-[0.5px] border-gray-200 bg-white hover:bg-gray-50 shadow-xs text-xs text-gray-700 cursor-pointer'
             >
+              <div className='absolute left-1 -top-[7.5px] flex items-center px-0.5 h-3 bg-white text-[10px] text-gray-500 font-semibold rounded-[5px]'>
+                IS TRUE
+              </div>
               <BlockIcon
                 type={outgoer.data.type}
                 className='shrink-0 mr-1.5'

web/app/components/workflow/nodes/_base/components/node-handle.tsx

@@ -14,10 +14,19 @@ import { BlockEnum } from '../../../types'
 import type { Node } from '../../../types'
 import BlockSelector from '../../../block-selector'
 
+type NodeHandleProps = {
+  handleId?: string
+  handleClassName?: string
+  nodeSelectorClassName?: string
+} & Pick<NodeProps, 'id' | 'data'>
+
 export const NodeTargetHandle = ({
   id,
   data,
-}: NodeProps) => {
+  handleId,
+  handleClassName,
+  nodeSelectorClassName,
+}: NodeHandleProps) => {
   const [open, setOpen] = useState(false)
   const store = useStoreApi()
   const incomers = getIncomers({ id } as Node, store.getState().getNodes(), store.getState().edges)
@@ -32,13 +41,15 @@ export const NodeTargetHandle = ({
   return (
     <>
       <Handle
+        id={handleId}
         type='target'
         position={Position.Left}
         className={`
-          !top-[17px] !-left-2 !w-4 !h-4 !bg-transparent !rounded-none !outline-none !border-none !translate-y-0 z-[1]
+          !w-4 !h-4 !bg-transparent !rounded-none !outline-none !border-none !translate-y-0 z-[1]
           after:absolute after:w-0.5 after:h-2 after:left-1.5 after:top-1 after:bg-primary-500
           ${!incomers.length && 'after:opacity-0'}
           ${data.type === BlockEnum.Start && 'opacity-0'}
+          ${handleClassName}
         `}
         isConnectable={data.type !== BlockEnum.Start}
         onClick={handleHandleClick}
@@ -53,6 +64,7 @@ export const NodeTargetHandle = ({
               placement='left'
               triggerClassName={open => `
                 hidden absolute left-0 top-0 pointer-events-none
+                ${nodeSelectorClassName}
                 ${data.hovering && '!flex'}
                 ${open && '!flex'}
               `}
@@ -64,18 +76,13 @@ export const NodeTargetHandle = ({
   )
 }
 
-type NodeSourceHandleProps = {
-  handleId?: string
-  handleClassName?: string
-  nodeSelectorClassName?: string
-} & Pick<NodeProps, 'id' | 'data'>
 export const NodeSourceHandle = ({
   id,
   data,
   handleId,
   handleClassName,
   nodeSelectorClassName,
-}: NodeSourceHandleProps) => {
+}: NodeHandleProps) => {
   const [open, setOpen] = useState(false)
   const store = useStoreApi()
   const connectedEdges = getConnectedEdges([{ id } as Node], store.getState().edges)

web/app/components/workflow/nodes/_base/components/title-description-input.tsx

@@ -21,7 +21,7 @@ export const TitleInput = memo(({
       className={`
         grow mr-2 px-1 h-6 text-base text-gray-900 font-semibold rounded-lg border border-transparent appearance-none outline-none
         hover:bg-gray-50 
-        focus:border-gray-300 focus:shadow-xs focus:bg-white
+        focus:border-gray-300 focus:shadow-xs focus:bg-white caret-[#295EFF]
       `}
       placeholder='Add title...'
     />
@@ -58,7 +58,7 @@ export const DescriptionInput = memo(({
         className={`
           w-full text-xs text-gray-900 leading-[18px] bg-transparent
           appearance-none outline-none resize-none
-          placeholder:text-gray-400
+          placeholder:text-gray-400 caret-[#295EFF]
         `}
         placeholder='Add description...'
         autoSize

web/app/components/workflow/nodes/_base/node.tsx

@@ -46,8 +46,14 @@ const BaseNode: FC<BaseNodeProps> = ({
           {data.title}
         </div>
       </div>
-      {cloneElement(children, { id: nodeId, data })}
-      <div className='mt-1 pb-1'>
+      {
+        children && (
+          <div className='mb-1'>
+            {cloneElement(children, { id: nodeId, data })}
+          </div>
+        )
+      }
+      <div className='pb-1'>
         {
           data.desc && (
             <div className='px-3 pt-1 pb-2 text-xs leading-[18px] text-gray-500 whitespace-pre-line break-words'>

web/app/components/workflow/nodes/index.tsx

@@ -18,7 +18,15 @@ const CustomNode = memo((props: NodeProps) => {
 
   return (
     <>
-      <NodeTargetHandle { ...props } />
+      {
+        nodeData.type !== BlockEnum.VariableAssigner && (
+          <NodeTargetHandle
+            { ...props }
+            handleClassName='!top-[17px] !-left-2'
+            handleId='target'
+          />
+        )
+      }
       <BaseNode { ...props }>
         <NodeComponent />
       </BaseNode>

web/app/components/workflow/nodes/start/node.tsx

@@ -8,6 +8,7 @@ const i18nPrefix = 'workflow.nodes.start'
 const Node: FC = () => {
   const { t } = useTranslation()
   const { variables } = mockData
+
   return (
     <div className='px-3'>
       <div className='space-y-0.5'>

web/app/components/workflow/panel/run-history.tsx

@@ -4,6 +4,7 @@ import { CheckCircle } from '@/app/components/base/icons/src/vender/solid/genera
 import { AlertCircle } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'
 
 const RunHistory = () => {
+  const mode = useStore(state => state.mode)
   const setShowRunHistory = useStore(state => state.setShowRunHistory)
 
   return (
@@ -18,15 +19,19 @@ const RunHistory = () => {
         </div>
       </div>
       <div className='p-2'>
-        <div className='flex mb-0.5 px-2 py-[7px] rounded-lg hover:bg-primary-50 cursor-pointer'>
-          <CheckCircle className='mt-0.5 mr-1.5 w-3.5 h-3.5 text-[#12B76A]' />
-          <div>
-            <div className='flex items-center text-[13px] font-medium text-primary-600 leading-[18px]'>Test Run#7</div>
-            <div className='flex items-center text-xs text-gray-500 leading-[18px]'>
-              Evan · 2 min ago
+        {
+          mode === 'workflow' && (
+            <div className='flex mb-0.5 px-2 py-[7px] rounded-lg hover:bg-primary-50 cursor-pointer'>
+              <CheckCircle className='mt-0.5 mr-1.5 w-3.5 h-3.5 text-[#12B76A]' />
+              <div>
+                <div className='flex items-center text-[13px] font-medium text-primary-600 leading-[18px]'>Test Run#7</div>
+                <div className='flex items-center text-xs text-gray-500 leading-[18px]'>
+                  Evan · 2 min ago
+                </div>
+              </div>
             </div>
-          </div>
-        </div>
+          )
+        }
         <div className='flex px-2 py-[7px] rounded-lg hover:bg-primary-50 cursor-pointer'>
           <AlertCircle className='mt-0.5 mr-1.5 w-3.5 h-3.5 text-[#F79009]' />
           <div>