From 0360a0416b08fc8dffce9875a4d293f94fa64d59 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Thu, 23 Oct 2025 15:23:50 +0800
Subject: [PATCH] feat: integration preview page

---
 web/app/(commonLayout)/try/app/[appId]/page.tsx | 17 -----------------
 .../(commonLayout)/try/preview/[appId]/page.tsx | 17 -----------------
 web/app/components/explore/try-app/index.tsx    |  4 ++--
 .../try-app}/preview/basic-app-preview.tsx      |  0
 .../try-app}/preview/flow-app-preview.tsx       |  4 ++--
 .../try-app}/preview/index.tsx                  |  0
 web/service/use-try-app.ts                      |  6 +++---
 7 files changed, 7 insertions(+), 41 deletions(-)
 delete mode 100644 web/app/(commonLayout)/try/app/[appId]/page.tsx
 delete mode 100644 web/app/(commonLayout)/try/preview/[appId]/page.tsx
 rename web/app/components/{app/configuration => explore/try-app}/preview/basic-app-preview.tsx (100%)
 rename web/app/components/{app/configuration => explore/try-app}/preview/flow-app-preview.tsx (95%)
 rename web/app/components/{app/configuration => explore/try-app}/preview/index.tsx (100%)

diff --git a/web/app/(commonLayout)/try/app/[appId]/page.tsx b/web/app/(commonLayout)/try/app/[appId]/page.tsx
deleted file mode 100644
index 26084a39ab..0000000000
--- a/web/app/(commonLayout)/try/app/[appId]/page.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react'
-import Main from '@/app/components/explore/try-app/app/index'
-
-export type IInstalledAppProps = {
-  params: {
-    appId: string
-  }
-}
-
-async function InstalledApp({ params }: IInstalledAppProps) {
-  const appId = (await params).appId
-  return (
-    <Main appId={appId} />
-  )
-}
-
-export default InstalledApp
diff --git a/web/app/(commonLayout)/try/preview/[appId]/page.tsx b/web/app/(commonLayout)/try/preview/[appId]/page.tsx
deleted file mode 100644
index bba616c3c0..0000000000
--- a/web/app/(commonLayout)/try/preview/[appId]/page.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react'
-import Main from '@/app/components/app/configuration/preview'
-
-export type IPreviewProps = {
-  params: {
-    appId: string
-  }
-}
-
-async function Preview({ params }: IPreviewProps) {
-  const appId = (await params).appId
-  return (
-    <Main appId={appId} />
-  )
-}
-
-export default Preview
diff --git a/web/app/components/explore/try-app/index.tsx b/web/app/components/explore/try-app/index.tsx
index 4fa29354cd..6d19f5ce9b 100644
--- a/web/app/components/explore/try-app/index.tsx
+++ b/web/app/components/explore/try-app/index.tsx
@@ -7,6 +7,7 @@ import Button from '../../base/button'
 import { RiCloseLine } from '@remixicon/react'
 import AppInfo from './app-info'
 import App from './app'
+import Preview from './preview'
 
 type Props = {
   appId: string
@@ -18,7 +19,6 @@ const TryApp: FC<Props> = ({
   onClose,
 }) => {
   const [type, setType] = useState<TypeEnum>(TypeEnum.TRY)
-
   return (
     <Modal
       isShow
@@ -42,7 +42,7 @@ const TryApp: FC<Props> = ({
         </div>
         {/* Main content */}
         <div className='mt-2 flex grow justify-between space-x-2'>
-          <App appId={appId} />
+          {type === TypeEnum.TRY ? <App appId={appId} /> : <Preview appId={appId} />}
           <AppInfo className='w-[360px]' />
         </div>
       </div>
diff --git a/web/app/components/app/configuration/preview/basic-app-preview.tsx b/web/app/components/explore/try-app/preview/basic-app-preview.tsx
similarity index 100%
rename from web/app/components/app/configuration/preview/basic-app-preview.tsx
rename to web/app/components/explore/try-app/preview/basic-app-preview.tsx
diff --git a/web/app/components/app/configuration/preview/flow-app-preview.tsx b/web/app/components/explore/try-app/preview/flow-app-preview.tsx
similarity index 95%
rename from web/app/components/app/configuration/preview/flow-app-preview.tsx
rename to web/app/components/explore/try-app/preview/flow-app-preview.tsx
index 44686dcc04..c6cc4b33ad 100644
--- a/web/app/components/app/configuration/preview/flow-app-preview.tsx
+++ b/web/app/components/explore/try-app/preview/flow-app-preview.tsx
@@ -22,10 +22,10 @@ const FlowAppPreview: FC<Props> = ({
       <Loading type='area' />
     </div>
   }
-  if(!data)
+  if (!data)
     return null
   return (
-    <div>
+    <div className='w-full'>
       <WorkflowPreview
         {...data.graph}
         className={cn(className)}
diff --git a/web/app/components/app/configuration/preview/index.tsx b/web/app/components/explore/try-app/preview/index.tsx
similarity index 100%
rename from web/app/components/app/configuration/preview/index.tsx
rename to web/app/components/explore/try-app/preview/index.tsx
diff --git a/web/service/use-try-app.ts b/web/service/use-try-app.ts
index d4c4fbcb5f..e69ee8457f 100644
--- a/web/service/use-try-app.ts
+++ b/web/service/use-try-app.ts
@@ -7,7 +7,7 @@ const NAME_SPACE = 'try-app'
 
 export const useGetTryAppInfo = (appId: string) => {
   return useQuery({
-    queryKey: [NAME_SPACE, 'appInfo'],
+    queryKey: [NAME_SPACE, 'appInfo', appId],
     queryFn: () => {
       return fetchTryAppInfo(appId)
     },
@@ -16,7 +16,7 @@ export const useGetTryAppInfo = (appId: string) => {
 
 export const useGetTryAppParams = (appId: string) => {
   return useQuery({
-    queryKey: [NAME_SPACE, 'appParams'],
+    queryKey: [NAME_SPACE, 'appParams', appId],
     queryFn: () => {
       return fetchAppParams(AppSourceType.tryApp, appId)
     },
@@ -25,7 +25,7 @@ export const useGetTryAppParams = (appId: string) => {
 
 export const useGetTryAppDataSets = (appId: string, ids: string[]) => {
   return useQuery<DataSetListResponse>({
-    queryKey: [NAME_SPACE, 'dataSets', ids],
+    queryKey: [NAME_SPACE, 'dataSets', appId, ids],
     queryFn: () => {
       return fetchTryAppDatasets(appId, ids)
     },