From 01cdffaa082967e17170d22319644a26b17cc820 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Thu, 19 Jun 2025 18:13:56 +0800
Subject: [PATCH] feat: plugins picker holder

---
 .../auto-update-setting/index.tsx             | 34 +++++++++++++++++++
 .../auto-update-setting/plugins-picker.tsx    | 29 ++++++++++++++++
 2 files changed, 63 insertions(+)
 create mode 100644 web/app/components/plugins/reference-setting-modal/auto-update-setting/plugins-picker.tsx

diff --git a/web/app/components/plugins/reference-setting-modal/auto-update-setting/index.tsx b/web/app/components/plugins/reference-setting-modal/auto-update-setting/index.tsx
index 03f1ec8d2e..48c8a6c8a6 100644
--- a/web/app/components/plugins/reference-setting-modal/auto-update-setting/index.tsx
+++ b/web/app/components/plugins/reference-setting-modal/auto-update-setting/index.tsx
@@ -9,6 +9,7 @@ import TimePicker from '@/app/components/base/date-and-time-picker/time-picker'
 import type { Dayjs } from 'dayjs'
 import dayjs from 'dayjs'
 import OptionCard from '@/app/components/workflow/nodes/_base/components/option-card'
+import PluginsPicker from './plugins-picker'
 
 const i18nPrefix = 'plugin.autoUpdate'
 
@@ -38,6 +39,8 @@ const AutoUpdateSetting: FC<Props> = ({
     strategy_setting,
     upgrade_time_of_day,
     upgrade_mode,
+    exclude_plugins,
+    include_plugins,
   } = payload
   const strategyDescription = useMemo(() => {
     switch (strategy_setting) {
@@ -49,6 +52,32 @@ const AutoUpdateSetting: FC<Props> = ({
         return ''
     }
   }, [strategy_setting, t])
+
+  const plugins = useMemo(() => {
+    switch (upgrade_mode) {
+      case AUTO_UPDATE_MODE.partial:
+        return include_plugins
+      case AUTO_UPDATE_MODE.exclude:
+        return exclude_plugins
+      default:
+        return []
+    }
+  }, [upgrade_mode, exclude_plugins, include_plugins])
+
+  const handlePluginsChange = useCallback((newPlugins: string[]) => {
+    if (upgrade_mode === AUTO_UPDATE_MODE.partial) {
+      onChange({
+        ...payload,
+        include_plugins: newPlugins,
+      })
+    }
+    else if (upgrade_mode === AUTO_UPDATE_MODE.exclude) {
+      onChange({
+        ...payload,
+        exclude_plugins: newPlugins,
+      })
+    }
+  }, [payload, upgrade_mode, onChange])
   const handleChange = useCallback((key: keyof AutoUpdateConfig) => {
     return (value: AutoUpdateConfig[keyof AutoUpdateConfig]) => {
       onChange({
@@ -94,6 +123,11 @@ const AutoUpdateSetting: FC<Props> = ({
                   />
                 ))}
               </div>
+
+              <PluginsPicker
+                value={plugins}
+                onChange={handlePluginsChange}
+              />
             </div>
           </>
         )}
diff --git a/web/app/components/plugins/reference-setting-modal/auto-update-setting/plugins-picker.tsx b/web/app/components/plugins/reference-setting-modal/auto-update-setting/plugins-picker.tsx
new file mode 100644
index 0000000000..148f121fd0
--- /dev/null
+++ b/web/app/components/plugins/reference-setting-modal/auto-update-setting/plugins-picker.tsx
@@ -0,0 +1,29 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+
+type Props = {
+  value: string[] // plugin ids
+  onChange: (value: string[]) => void
+}
+
+const PluginsPicker: FC<Props> = ({
+  value,
+  onChange,
+}) => {
+  const hasSelected = value.length > 0
+  return (
+    <div className='rounded-xl'>
+      {hasSelected ? (
+        <div className='flex justify-between'>
+          <div>Selected plugins will not auto-update</div>
+        </div>
+      ) : (
+        <div className='system-xs-regular text-center text-text-tertiary'>
+          Only selected plugins will auto-update. No plugins are currently selected, so no plugins will auto-update.
+        </div>
+      )}
+    </div>
+  )
+}
+export default React.memo(PluginsPicker)