add run-history

web/app/components/workflow/header/run-and-history.tsx

@@ -1,10 +1,14 @@
 import type { FC } from 'react'
 import { memo } from 'react'
+import { useStore } from '../store'
 import { Play } from '@/app/components/base/icons/src/vender/line/mediaAndDevices'
 import { ClockPlay } from '@/app/components/base/icons/src/vender/line/time'
 import TooltipPlus from '@/app/components/base/tooltip-plus'
 
 const RunAndHistory: FC = () => {
+  const showRunHistory = useStore(state => state.showRunHistory)
+  const setShowRunHistory = useStore(state => state.setShowRunHistory)
+
   return (
     <div className='flex items-center px-0.5 h-8 rounded-lg border-[0.5px] border-gray-200 bg-white shadow-xs'>
       <div className={`
@@ -18,7 +22,13 @@ const RunAndHistory: FC = () => {
       <TooltipPlus
         popupContent='View run history'
       >
-        <div className='flex items-center justify-center w-7 h-7 rounded-md hover:bg-black/5 cursor-pointer'>
+        <div
+          className={`
+            flex items-center justify-center w-7 h-7 rounded-md hover:bg-black/5 cursor-pointer
+            ${showRunHistory && 'bg-black/5'}
+          `}
+          onClick={() => setShowRunHistory(true)}
+        >
           <ClockPlay className='w-4 h-4 text-gray-500' />
         </div>
       </TooltipPlus>

web/app/components/workflow/nodes/if-else/node.tsx

@@ -25,7 +25,7 @@ const Node = (props: Pick<NodeProps, 'id' | 'data'>) => {
         <NodeSourceHandle
           {...props}
           handleId='condition1'
-          handleClassName='!top-1 !-right-5'
+          handleClassName='!top-1 !-right-[21px]'
         />
       </div>
       <div className='mb-0.5 leading-4 text-[10px] font-medium text-gray-500 uppercase'>{t(`${i18nPrefix}.conditions`)}</div>
@@ -49,7 +49,7 @@ const Node = (props: Pick<NodeProps, 'id' | 'data'>) => {
         <NodeSourceHandle
           {...props}
           handleId='condition2'
-          handleClassName='!top-1 !-right-5'
+          handleClassName='!top-1 !-right-[21px]'
         />
       </div>
     </div>

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

@@ -7,10 +7,12 @@ import { Panel as NodePanel } from '../nodes'
 import { useStore } from '../store'
 import WorkflowInfo from './workflow-info'
 import DebugAndPreview from './debug-and-preview'
+import RunHistory from './run-history'
 
 const Panel: FC = () => {
   const mode = useStore(state => state.mode)
   const selectedNode = useStore(state => state.selectedNode)
+  const showRunHistory = useStore(state => state.showRunHistory)
   const {
     showWorkflowInfoPanel,
     showNodePanel,
@@ -40,6 +42,11 @@ const Panel: FC = () => {
           <DebugAndPreview />
         )
       }
+      {
+        showRunHistory && (
+          <RunHistory />
+        )
+      }
     </div>
   )
 }

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

@@ -0,0 +1,44 @@
+import { useStore } from '../store'
+import { XClose } from '@/app/components/base/icons/src/vender/line/general'
+import { CheckCircle } from '@/app/components/base/icons/src/vender/solid/general'
+import { AlertCircle } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'
+
+const RunHistory = () => {
+  const setShowRunHistory = useStore(state => state.setShowRunHistory)
+
+  return (
+    <div className='w-[200px] h-full bg-white border-[0.5px] border-gray-200 shadow-xl rounded-l-2xl z-10'>
+      <div className='flex items-center justify-between px-4 pt-3 text-base font-semibold text-gray-900'>
+        Run History
+        <div
+          className='flex items-center justify-center w-6 h-6 cursor-pointer'
+          onClick={() => setShowRunHistory(false)}
+        >
+          <XClose className='w-4 h-4 text-gray-500' />
+        </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
+            </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>
+            <div className='flex items-center text-[13px] font-medium text-primary-600 leading-[18px]'>Test Run#6</div>
+            <div className='flex items-center text-xs text-gray-500 leading-[18px]'>
+              Evan · 30 min ago
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default RunHistory

web/app/components/workflow/store.ts

@@ -4,14 +4,18 @@ import type { SelectedNode } from './types'
 type State = {
   mode: string
   selectedNode: SelectedNode | null
+  showRunHistory: boolean
 }
 
 type Action = {
   setSelectedNode: (node: SelectedNode | null) => void
+  setShowRunHistory: (showRunHistory: boolean) => void
 }
 
 export const useStore = create<State & Action>(set => ({
   mode: 'workflow',
   selectedNode: null,
   setSelectedNode: node => set(() => ({ selectedNode: node })),
+  showRunHistory: false,
+  setShowRunHistory: showRunHistory => set(() => ({ showRunHistory })),
 }))