feat: integration preview page

web/app/(commonLayout)/try/app/[appId]/page.tsx

@@ -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

web/app/(commonLayout)/try/preview/[appId]/page.tsx

@@ -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

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>

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)}

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)
     },