From fbc853af9239e589eaf6525ef20949a3e5a48df2 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Wed, 16 Oct 2024 15:13:19 +0800
Subject: [PATCH] feat: remove config

---
 .../components/plugins/plugin-item/action.tsx | 64 ++++++++++++++++---
 .../components/plugins/plugin-item/index.tsx  |  2 +
 web/i18n/en-US/plugin.ts                      |  8 +++
 web/i18n/zh-Hans/plugin.ts                    |  8 +++
 4 files changed, 73 insertions(+), 9 deletions(-)

diff --git a/web/app/components/plugins/plugin-item/action.tsx b/web/app/components/plugins/plugin-item/action.tsx
index 59ab0e3e0f..5aae4649bb 100644
--- a/web/app/components/plugins/plugin-item/action.tsx
+++ b/web/app/components/plugins/plugin-item/action.tsx
@@ -4,11 +4,18 @@ import React from 'react'
 import { useRouter } from 'next/navigation'
 import { RiDeleteBinLine, RiInformation2Line, RiLoopLeftLine } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
+import { useTranslation } from 'react-i18next'
 import PluginInfo from '../plugin-page/plugin-info'
 import ActionButton from '../../base/action-button'
+import Tooltip from '../../base/tooltip'
+import Confirm from '../../base/confirm'
+
+const i18nPrefix = 'plugin.action'
 
 type Props = {
   pluginId: string
+  pluginName: string
+  usedInApps: number
   isShowFetchNewVersion: boolean
   isShowInfo: boolean
   isShowDelete: boolean
@@ -16,11 +23,14 @@ type Props = {
 }
 
 const Action: FC<Props> = ({
+  pluginName,
+  usedInApps,
   isShowFetchNewVersion,
   isShowInfo,
   isShowDelete,
   onDelete,
 }) => {
+  const { t } = useTranslation()
   const router = useRouter()
   const [isShowPluginInfo, {
     setTrue: showPluginInfo,
@@ -29,25 +39,45 @@ const Action: FC<Props> = ({
 
   const handleFetchNewVersion = () => { }
 
+  const [isShowDeleteConfirm, {
+    setTrue: showDeleteConfirm,
+    setFalse: hideDeleteConfirm,
+  }] = useBoolean(false)
+
   // const handleDelete = () => { }
   return (
     <div className='flex space-x-1'>
       {isShowFetchNewVersion
-        && <ActionButton onClick={handleFetchNewVersion}>
-          <RiLoopLeftLine className='w-4 h-4 text-text-tertiary' />
-        </ActionButton>
+        && (
+          <Tooltip popupContent={t(`${i18nPrefix}.checkForUpdates`)}>
+            <ActionButton onClick={handleFetchNewVersion}>
+              <RiLoopLeftLine className='w-4 h-4 text-text-tertiary' />
+            </ActionButton>
+          </Tooltip>
+        )
       }
       {
         isShowInfo
-        && <ActionButton onClick={showPluginInfo}>
-          <RiInformation2Line className='w-4 h-4 text-text-tertiary' />
-        </ActionButton>
+        && (
+          <Tooltip popupContent={t(`${i18nPrefix}.pluginInfo`)}>
+            <ActionButton onClick={showPluginInfo}>
+              <RiInformation2Line className='w-4 h-4 text-text-tertiary' />
+            </ActionButton>
+          </Tooltip>
+        )
       }
       {
         isShowDelete
-        && <ActionButton className='hover:bg-state-destructive-hover text-text-tertiary hover:text-text-destructive' onClick={onDelete}>
-          <RiDeleteBinLine className='w-4 h-4' />
-        </ActionButton>
+        && (
+          <Tooltip popupContent={t(`${i18nPrefix}.delete`)}>
+            <ActionButton
+              className='hover:bg-state-destructive-hover text-text-tertiary hover:text-text-destructive'
+              onClick={showDeleteConfirm}
+            >
+              <RiDeleteBinLine className='w-4 h-4' />
+            </ActionButton>
+          </Tooltip>
+        )
       }
 
       {isShowPluginInfo && (
@@ -58,6 +88,22 @@ const Action: FC<Props> = ({
           onHide={hidePluginInfo}
         />
       )}
+      {
+        isShowDeleteConfirm && (
+          <Confirm
+            isShow
+            title={t(`${i18nPrefix}.delete`)}
+            content={
+              <div>
+                {t(`${i18nPrefix}.deleteContentLeft`)}<span className='system-md-semibold'>{pluginName}</span>{t(`${i18nPrefix}.deleteContentRight`)}<br />
+                {usedInApps > 0 && t(`${i18nPrefix}.usedInApps`, { num: usedInApps })}
+              </div>
+            }
+            onCancel={hideDeleteConfirm}
+            onConfirm={onDelete}
+          />
+        )
+      }
     </div>
   )
 }
diff --git a/web/app/components/plugins/plugin-item/index.tsx b/web/app/components/plugins/plugin-item/index.tsx
index d4f4159af5..452796c27b 100644
--- a/web/app/components/plugins/plugin-item/index.tsx
+++ b/web/app/components/plugins/plugin-item/index.tsx
@@ -52,6 +52,8 @@ const PluginItem: FC<Props> = ({
               <Description text={payload.brief[locale]} descriptionLineRows={1}></Description>
               <Action
                 pluginId='xxx'
+                pluginName={label[locale]}
+                usedInApps={5}
                 isShowFetchNewVersion={hasNewVersion}
                 isShowInfo
                 isShowDelete
diff --git a/web/i18n/en-US/plugin.ts b/web/i18n/en-US/plugin.ts
index 3d09474264..73361f9fe1 100644
--- a/web/i18n/en-US/plugin.ts
+++ b/web/i18n/en-US/plugin.ts
@@ -39,6 +39,14 @@ const translation = {
     release: 'Release',
     packageName: 'Package',
   },
+  action: {
+    checkForUpdates: 'Check for updates',
+    pluginInfo: 'Plugin info',
+    delete: 'Remove plugin',
+    deleteContentLeft: 'Would you like to remove ',
+    deleteContentRight: ' plugin?',
+    usedInApps: 'This plugin is being used in {{num}} apps.',
+  },
 }
 
 export default translation
diff --git a/web/i18n/zh-Hans/plugin.ts b/web/i18n/zh-Hans/plugin.ts
index 7f88bda567..2549533865 100644
--- a/web/i18n/zh-Hans/plugin.ts
+++ b/web/i18n/zh-Hans/plugin.ts
@@ -39,6 +39,14 @@ const translation = {
     release: '发布版本',
     packageName: '包',
   },
+  action: {
+    checkForUpdates: '检查更新',
+    pluginInfo: '插件信息',
+    delete: '移除插件',
+    deleteContentLeft: '是否要移除 ',
+    deleteContentRight: ' 插件?',
+    usedInApps: '此插件正在 {{num}} 个应用中使用。',
+  },
 }
 
 export default translation