feat: new switch plugin version

web/app/components/workflow/nodes/_base/components/switch-plugin-version.tsx

@@ -3,13 +3,18 @@
 import Badge from '@/app/components/base/badge'
 import Tooltip from '@/app/components/base/tooltip'
 import PluginVersionPicker from '@/app/components/plugins/update-plugin/plugin-version-picker'
-import { RiArrowLeftRightLine } from '@remixicon/react'
+import { RiArrowLeftRightLine, RiExternalLinkLine } from '@remixicon/react'
 import type { ReactNode } from 'react'
 import { type FC, useCallback, useState } from 'react'
-import UpdateFromMarketplace from '@/app/components/plugins/update-plugin/from-market-place'
 import { useBoolean } from 'ahooks'
-import { useCheckInstalled } from '@/service/use-plugins'
+import { useCheckInstalled, useUpdatePackageFromMarketPlace } from '@/service/use-plugins'
 import cn from '@/utils/classnames'
+import PluginMutationModel from '@/app/components/plugins/plugin-mutation-model'
+import useGetIcon from '@/app/components/plugins/install-plugin/base/use-get-icon'
+import { pluginManifestToCardPluginProps } from '@/app/components/plugins/install-plugin/utils'
+import { Badge as Badge2, BadgeState } from '@/app/components/base/badge/index'
+import Link from 'next/link'
+import { useTranslation } from 'react-i18next'
 
 export type SwitchPluginVersionProps = {
   uniqueIdentifier: string
@@ -38,21 +43,49 @@ export const SwitchPluginVersion: FC<SwitchPluginVersionProps> = (props) => {
     pluginDetails.refetch()
     onChange?.(target!.version)
   }, [hideUpdateModal, onChange, pluginDetails, target])
+  const { getIconUrl } = useGetIcon()
+  const icon = pluginDetail?.declaration.icon ? getIconUrl(pluginDetail.declaration.icon) : undefined
+  const mutation = useUpdatePackageFromMarketPlace()
+  const install = () => {
+    mutation.mutate(
+      {
+        new_plugin_unique_identifier: target!.pluginUniqueIden,
+        original_plugin_unique_identifier: uniqueIdentifier,
+      },
+      {
+        onSuccess() {
+          handleUpdatedFromMarketplace()
+        },
+      })
+  }
+  const { t } = useTranslation()
   return <Tooltip popupContent={!isShow && !isShowUpdateModal && tooltip} triggerMethod='hover'>
     <div className={cn('w-fit', className)}>
-      {isShowUpdateModal && pluginDetail && <UpdateFromMarketplace
-        payload={{
-          originalPackageInfo: {
-            id: uniqueIdentifier,
-            payload: pluginDetail.declaration,
-          },
-          targetPackageInfo: {
-            id: target!.pluginUniqueIden,
-            version: target!.version,
-          },
-        }}
+      {isShowUpdateModal && pluginDetail && <PluginMutationModel
         onCancel={hideUpdateModal}
-        onSave={handleUpdatedFromMarketplace}
+        plugin={pluginManifestToCardPluginProps({
+          ...pluginDetail.declaration,
+          icon: icon!,
+        })}
+        mutation={mutation}
+        mutate={install}
+        confirmButtonText={t('workflow.nodes.agent.installPlugin.install')}
+        cancelButtonText={t('workflow.nodes.agent.installPlugin.cancel')}
+        modelTitle={t('workflow.nodes.agent.installPlugin.title')}
+        description={t('workflow.nodes.agent.installPlugin.desc')}
+        cardTitleLeft={<>
+          <Badge2 className='mx-1' size="s" state={BadgeState.Warning}>
+            {`${pluginDetail.version} -> ${target!.version}`}
+          </Badge2>
+        </>}
+        modalBottomLeft={
+          <Link className='flex justify-center items-center gap-1' href={'TODO: add changelog url'} target='_blank'>
+            <span className='text-text-accent system-xs-regular text-xs'>
+              {t('workflow.nodes.agent.installPlugin.changelog')}
+            </span>
+            <RiExternalLinkLine className='text-text-accent size-3' />
+          </Link>
+        }
       />}
       {pluginDetail && <PluginVersionPicker
         isShow={isShow}

web/app/components/workflow/nodes/agent/default.ts

@@ -26,7 +26,7 @@ const nodeDefault: NodeDefault<AgentNodeType> = {
     if (!strategy) {
       return {
         isValid: false,
-        errorMessage: t('workflow.checkList.strategyNotSelected'),
+        errorMessage: t('workflow.nodes.agent.checkList.strategyNotSelected'),
       }
     }
     for (const param of strategy.parameters) {