feat: handle upgrade confirm and icon

web/app/components/workflow-app/components/sandbox-migration-modal.tsx

@@ -0,0 +1,54 @@
+'use client'
+
+import type { FC } from 'react'
+import { forwardRef, useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
+import Button from '@/app/components/base/button'
+import { Thinking as ThinkingIcon } from '@/app/components/base/icons/src/vender/workflow'
+import UpgradeModalBase from '@/app/components/base/upgrade-modal'
+
+const Thinking = forwardRef<SVGSVGElement, React.SVGProps<SVGSVGElement>>((props, ref) => (
+  // eslint-disable-next-line ts/no-explicit-any
+  <ThinkingIcon {...props} ref={ref as any} />
+))
+
+type Props = {
+  show: boolean
+  onClose: () => void
+  onUpgrade?: () => void
+}
+
+const SandboxMigrationModal: FC<Props> = ({
+  show,
+  onClose,
+  onUpgrade,
+}) => {
+  const { t } = useTranslation()
+
+  const handleUpgrade = useCallback(() => {
+    onClose()
+    onUpgrade?.()
+  }, [onClose, onUpgrade])
+
+  return (
+    <UpgradeModalBase
+      show={show}
+      onClose={onClose}
+      Icon={Thinking}
+      title={t('sandboxMigrationModal.title', { ns: 'workflow' })}
+      description={t('sandboxMigrationModal.description', { ns: 'workflow' })}
+      footer={(
+        <>
+          <Button onClick={onClose}>
+            {t('sandboxMigrationModal.dismiss', { ns: 'workflow' })}
+          </Button>
+          <Button variant="primary" onClick={handleUpgrade}>
+            {t('sandboxMigrationModal.upgrade', { ns: 'workflow' })}
+          </Button>
+        </>
+      )}
+    />
+  )
+}
+
+export default SandboxMigrationModal

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

@@ -13,12 +13,10 @@ import {
   useRef,
   useState,
 } from 'react'
-import { useTranslation } from 'react-i18next'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import { FeaturesProvider } from '@/app/components/base/features'
 import Loading from '@/app/components/base/loading'
 import { FILE_EXTS } from '@/app/components/base/prompt-editor/constants'
-import PlanUpgradeModal from '@/app/components/billing/plan-upgrade-modal'
 import WorkflowWithDefaultContext from '@/app/components/workflow'
 import { useCollaboration } from '@/app/components/workflow/collaboration'
 import { collaborationManager } from '@/app/components/workflow/collaboration/core/collaboration-manager'
@@ -42,6 +40,7 @@ import { useAppTriggers } from '@/service/use-tools'
 import { AppModeEnum } from '@/types/app'
 import { useFeatures } from '../base/features/hooks'
 import ViewPicker from '../workflow/view-picker'
+import SandboxMigrationModal from './components/sandbox-migration-modal'
 import WorkflowAppMain from './components/workflow-main'
 import { useGetRunAndTraceUrl } from './hooks/use-get-run-and-trace-url'
 import { useNodesSyncDraft } from './hooks/use-nodes-sync-draft'
@@ -173,7 +172,6 @@ const WorkflowAppWithAdditionalContext = () => {
   } = useWorkflowInit()
   const workflowStore = useWorkflowStore()
   const { isLoadingCurrentWorkspace, currentWorkspace } = useAppContext()
-  const { t } = useTranslation()
   const [showMigrationModal, setShowMigrationModal] = useState(false)
   const lastCheckedAppIdRef = useRef<string | null>(null)
 
@@ -366,11 +364,9 @@ const WorkflowAppWithAdditionalContext = () => {
   return (
     <>
       <CollaborationSession />
-      <PlanUpgradeModal
+      <SandboxMigrationModal
         show={showMigrationModal}
         onClose={handleCloseMigrationModal}
-        title={t('sandboxMigrationModal.title', { ns: 'workflow' })}
-        description={t('sandboxMigrationModal.description', { ns: 'workflow' })}
       />
       <WorkflowWithDefaultContext
         edges={edgesData}