chore: disabled logic

web/app/components/base/tab-header/index.tsx

@@ -9,6 +9,7 @@ type Item = {
   isRight?: boolean
   icon?: React.ReactNode
   extra?: React.ReactNode
+  disabled?: boolean
 }
 
 export type ITabHeaderProps = {
@@ -24,14 +25,15 @@ const TabHeader: FC<ITabHeaderProps> = ({
   itemClassName,
   onChange,
 }) => {
-  const renderItem = ({ id, name, icon, extra }: Item) => (
+  const renderItem = ({ id, name, icon, extra, disabled }: Item) => (
     <div
       key={id}
       className={cn(
         'system-md-semibold relative flex cursor-pointer items-center border-b-2 border-transparent pb-2 pt-2.5',
         id === value ? 'border-components-tab-active text-text-primary' : 'text-text-tertiary',
+        disabled && 'cursor-not-allowed opacity-30',
       )}
-      onClick={() => onChange(id)}
+      onClick={() => !disabled && onChange(id)}
     >
       {icon || ''}
       <div className={cn('ml-2', itemClassName)}>{name}</div>

web/app/components/workflow/nodes/_base/components/workflow-panel/index.tsx

@@ -48,6 +48,7 @@ import type { Node } from '@/app/components/workflow/types'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import { useStore } from '@/app/components/workflow/store'
 import Tab, { TabType } from './tab'
+import LastRun from './last-run'
 
 type BasePanelProps = {
   children: ReactNode
@@ -105,6 +106,7 @@ const BasePanel: FC<BasePanelProps> = ({
   }, [handleNodeDataUpdateWithSyncDraft, id, saveStateToHistory])
 
   const [tabType, setTabType] = useState<TabType>(TabType.settings)
+
   return (
     <div className={cn(
       'relative mr-2 h-full',
@@ -218,7 +220,7 @@ const BasePanel: FC<BasePanelProps> = ({
         )}
 
         {tabType === TabType.lastRun && (
-          <div>last run content</div>
+          <LastRun appId={id} />
         )}
       </div>
     </div>

web/app/components/workflow/nodes/_base/components/workflow-panel/last-run.tsx

@@ -0,0 +1,18 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+
+type Props = {
+  appId: string
+}
+
+const LastRun: FC<Props> = ({
+  appId,
+}) => {
+  return (
+    <div>
+      last run: {appId}
+    </div>
+  )
+}
+export default React.memo(LastRun)

web/app/components/workflow/nodes/_base/components/workflow-panel/tab.tsx

@@ -23,7 +23,7 @@ const Tab: FC<Props> = ({
     <TabHeader
       items={[
         { id: TabType.settings, name: t('workflow.debug.settingsTab').toLocaleUpperCase() },
-        { id: TabType.lastRun, name: t('workflow.debug.lastRunTab').toLocaleUpperCase() },
+        { id: TabType.lastRun, name: t('workflow.debug.lastRunTab').toLocaleUpperCase(), disabled: true }, // TODO: add disabled logic
       ]}
       itemClassName='ml-0'
       value={value}