feat(plugins): add Stop All button to plugin installation tasks

Added a Stop All button to the active/installing plugins list and mapped it to the delete_all endpoint to terminate stuck install tasks. Also added task.stopAll localization strings.

web/app/components/plugins/plugin-page/plugin-tasks/components/plugin-task-list.tsx

@@ -15,6 +15,7 @@ type PluginTaskListProps = {
   onClearAll: () => void
   onClearErrors: () => void
   onClearSingle: (taskId: string, pluginId: string) => void
+  onStopAll: () => void
 }
 
 const PluginTaskList: FC<PluginTaskListProps> = ({
@@ -25,6 +26,7 @@ const PluginTaskList: FC<PluginTaskListProps> = ({
   onClearAll,
   onClearErrors,
   onClearSingle,
+  onStopAll,
 }) => {
   const { t } = useTranslation()
   const language = useGetLanguage()
@@ -43,6 +45,16 @@ const PluginTaskList: FC<PluginTaskListProps> = ({
             <span className="i-ri-loader-2-line h-3.5 w-3.5 animate-spin text-text-accent" />
           }
           defaultStatusText={t('task.installingHint', { ns: 'plugin' })}
+          headerAction={(
+            <Button
+              className="shrink-0"
+              size="small"
+              variant="ghost"
+              onClick={onStopAll}
+            >
+              {t('task.stopAll', { ns: 'plugin' })}
+            </Button>
+          )}
         />
       )}
 

web/app/components/plugins/plugin-page/plugin-tasks/hooks.ts

@@ -5,6 +5,7 @@ import {
 import { TaskStatus } from '@/app/components/plugins/types'
 import {
   useMutationClearTaskPlugin,
+  useMutationStopAllTaskPlugins,
   usePluginTaskList,
 } from '@/service/use-plugins'
 
@@ -14,6 +15,7 @@ export const usePluginTaskStatus = () => {
     handleRefetch,
   } = usePluginTaskList()
   const { mutateAsync } = useMutationClearTaskPlugin()
+  const { mutateAsync: mutateStopAllAsync } = useMutationStopAllTaskPlugins()
   const allPlugins = pluginTasks.map(task => task.plugins.map((plugin) => {
     return {
       ...plugin,
@@ -40,6 +42,11 @@ export const usePluginTaskStatus = () => {
     })
     handleRefetch()
   }, [mutateAsync, handleRefetch])
+  
+  const handleStopAllPlugins = useCallback(async () => {
+    await mutateStopAllAsync()
+    handleRefetch()
+  }, [mutateStopAllAsync, handleRefetch])
   const totalPluginsLength = allPlugins.length
   const runningPluginsLength = runningPlugins.length
   const errorPluginsLength = errorPlugins.length
@@ -65,5 +72,6 @@ export const usePluginTaskStatus = () => {
     isSuccess,
     isFailed,
     handleClearErrorPlugin,
+    handleStopAllPlugins,
   }
 }

web/app/components/plugins/plugin-page/plugin-tasks/index.tsx

@@ -31,6 +31,7 @@ const PluginTasks = () => {
     isSuccess,
     isFailed,
     handleClearErrorPlugin,
+    handleStopAllPlugins,
   } = usePluginTaskStatus()
   const { getIconUrl } = useGetIcon()
   const canOpenMenu = isFailed || isInstalling || isInstallingWithSuccess || isInstallingWithError || isSuccess
@@ -81,6 +82,12 @@ const PluginTasks = () => {
     [clearPluginsAndClose, errorPlugins],
   )
 
+  
+  const handleStopAll = useCallback(async () => {
+    await handleStopAllPlugins()
+    setOpen(false)
+  }, [handleStopAllPlugins])
+
   const handleClearSingle = useCallback(
     (taskId: string, pluginId: string) => clearPluginsAndClose([{ taskId, plugin_unique_identifier: pluginId }]),
     [clearPluginsAndClose],
@@ -127,6 +134,7 @@ const PluginTasks = () => {
             onClearAll={handleClearAll}
             onClearErrors={handleClearErrors}
             onClearSingle={handleClearSingle}
+            onStopAll={handleStopAll}
           />
         </DropdownMenuContent>
       </DropdownMenu>

web/i18n/en-US/plugin.json

@@ -248,6 +248,7 @@
   "task.installingWithError": "Installing {{installingLength}} plugins, {{successLength}} success, {{errorLength}} failed",
   "task.installingWithSuccess": "Installing {{installingLength}} plugins, {{successLength}} success.",
   "task.runningPlugins": "Installing Plugins",
+  "task.stopAll": "Stop all",
   "task.successPlugins": "Successfully Installed Plugins",
   "upgrade.close": "Close",
   "upgrade.description": "About to install the following plugin",
@@ -256,4 +257,4 @@
   "upgrade.upgrade": "Install",
   "upgrade.upgrading": "Installing...",
   "upgrade.usedInApps": "Used in {{num}} apps"
-}
+}

web/i18n/zh-Hans/plugin.json

@@ -248,6 +248,7 @@
   "task.installingWithError": "{{installingLength}} 个插件安装中，{{successLength}} 安装成功，{{errorLength}} 安装失败",
   "task.installingWithSuccess": "{{installingLength}} 个插件安装中，{{successLength}} 安装成功",
   "task.runningPlugins": "正在安装的插件",
+  "task.stopAll": "停止所有",
   "task.successPlugins": "安装成功的插件",
   "upgrade.close": "关闭",
   "upgrade.description": "即将安装以下插件",

web/i18n/zh-Hant/plugin.json

@@ -248,6 +248,7 @@
   "task.installingWithError": "安裝 {{installingLength}} 個插件，{{successLength}} 成功，{{errorLength}} 失敗",
   "task.installingWithSuccess": "安裝 {{installingLength}} 個插件，{{successLength}} 成功。",
   "task.runningPlugins": "Installing Plugins",
+  "task.stopAll": "停止所有",
   "task.successPlugins": "Successfully Installed Plugins",
   "upgrade.close": "關閉",
   "upgrade.description": "即將安裝以下插件",

web/service/use-plugins.ts

@@ -560,6 +560,14 @@ export const useMutationClearTaskPlugin = () => {
   })
 }
 
+export const useMutationStopAllTaskPlugins = () => {
+  return useMutation({
+    mutationFn: () => {
+      return post<{ success: boolean }>('/workspaces/current/plugin/tasks/delete_all')
+    },
+  })
+}
+
 export const usePluginManifestInfo = (pluginUID: string) => {
   return useQuery({
     enabled: !!pluginUID,