chore: add a secondary confirmation dialog when the user delete the tool (#5634)

web/app/components/tools/edit-custom-collection-modal/index.tsx

@@ -302,7 +302,7 @@ const EditCustomCollectionModal: FC<Props> = ({
             <div className={cn(isEdit ? 'justify-between' : 'justify-end', 'mt-2 shrink-0 flex py-4 px-6 rounded-b-[10px] bg-gray-50 border-t border-black/5')} >
               {
                 isEdit && (
-                  <Button onClick={onRemove}>{t('common.operation.remove')}</Button>
+                  <Button onClick={onRemove} className='text-red-500 border-red-50 hover:border-red-500'>{t('common.operation.delete')}</Button>
                 )
               }
               <div className='flex space-x-2 '>

web/app/components/tools/provider/detail.tsx

@@ -8,6 +8,7 @@ import type { Collection, CustomCollectionBackend, Tool, WorkflowToolProviderReq
 import ToolItem from './tool-item'
 import I18n from '@/context/i18n'
 import { getLanguage } from '@/i18n/language'
+import Confirm from '@/app/components/base/confirm'
 import AppIcon from '@/app/components/base/app-icon'
 import Button from '@/app/components/base/button'
 import Indicator from '@/app/components/header/indicator'
@@ -83,6 +84,8 @@ const ProviderDetail = ({
   // custom provider
   const [customCollection, setCustomCollection] = useState<CustomCollectionBackend | WorkflowToolProviderResponse | null>(null)
   const [isShowEditCollectionToolModal, setIsShowEditCustomCollectionModal] = useState(false)
+  const [showConfirmDelete, setShowConfirmDelete] = useState(false)
+  const [deleteAction, setDeleteAction] = useState(null)
   const doUpdateCustomToolCollection = async (data: CustomCollectionBackend) => {
     await updateCustomCollection(data)
     onRefreshData()
@@ -158,6 +161,23 @@ const ProviderDetail = ({
     })
     setIsShowEditWorkflowToolModal(false)
   }
+  const onClickCustomToolDelete = () => {
+    setDeleteAction('customTool')
+    setShowConfirmDelete(true)
+  }
+  const onClickWorkflowToolDelete = () => {
+    setDeleteAction('workflowTool')
+    setShowConfirmDelete(true)
+  }
+  const handleConfirmDelete = () => {
+    if (deleteAction === 'customTool')
+      doRemoveCustomToolCollection()
+
+    else if (deleteAction === 'workflowTool')
+      removeWorkflowToolProvider()
+
+    setShowConfirmDelete(false)
+  }
 
   // ToolList
   const [toolList, setToolList] = useState<Tool[]>([])
@@ -330,17 +350,27 @@ const ProviderDetail = ({
           payload={customCollection}
           onHide={() => setIsShowEditCustomCollectionModal(false)}
           onEdit={doUpdateCustomToolCollection}
-          onRemove={doRemoveCustomToolCollection}
+          onRemove={onClickCustomToolDelete}
         />
       )}
       {isShowEditWorkflowToolModal && (
         <WorkflowToolModal
           payload={customCollection}
           onHide={() => setIsShowEditWorkflowToolModal(false)}
-          onRemove={removeWorkflowToolProvider}
+          onRemove={onClickWorkflowToolDelete}
           onSave={updateWorkflowToolProvider}
         />
       )}
+      {showConfirmDelete && (
+        <Confirm
+          title={t('tools.createTool.deleteToolConfirmTitle')}
+          content={t('tools.createTool.deleteToolConfirmContent')}
+          isShow={showConfirmDelete}
+          onClose={() => setShowConfirmDelete(false)}
+          onConfirm={handleConfirmDelete}
+          onCancel={() => setShowConfirmDelete(false)}
+        />
+      )}
     </div>
   )
 }

web/app/components/tools/workflow-tool/index.tsx

@@ -244,7 +244,7 @@ const WorkflowToolAsModal: FC<Props> = ({
             </div>
             <div className={cn((!isAdd && onRemove) ? 'justify-between' : 'justify-end', 'mt-2 shrink-0 flex py-4 px-6 rounded-b-[10px] bg-gray-50 border-t border-black/5')} >
               {!isAdd && onRemove && (
-                <Button onClick={onRemove}>{t('common.operation.remove')}</Button>
+                <Button onClick={onRemove} className='text-red-500 border-red-50 hover:border-red-500'>{t('common.operation.delete')}</Button>
               )}
               <div className='flex space-x-2 '>
                 <Button onClick={onHide}>{t('common.operation.cancel')}</Button>

web/i18n/de-DE/tools.ts

@@ -73,6 +73,8 @@ const translation = {
     privacyPolicyPlaceholder: 'Bitte Datenschutzrichtlinie eingeben',
     customDisclaimer: 'Benutzer Haftungsausschluss',
     customDisclaimerPlaceholder: 'Bitte benutzerdefinierten Haftungsausschluss eingeben',
+    deleteToolConfirmTitle: 'Löschen Sie dieses Werkzeug?',
+    deleteToolConfirmContent: 'Das Löschen des Werkzeugs ist irreversibel. Benutzer können Ihr Werkzeug nicht mehr verwenden.',
   },
   test: {
     title: 'Test',

web/i18n/en-US/tools.ts

@@ -105,6 +105,8 @@ const translation = {
     customDisclaimerPlaceholder: 'Please enter custom disclaimer',
     confirmTitle: 'Confirm to save ?',
     confirmTip: 'Apps using this tool will be affected',
+    deleteToolConfirmTitle: 'Delete this Tool?',
+    deleteToolConfirmContent: 'Deleting the Tool is irreversible. Users will no longer be able to access your Tool.',
   },
   test: {
     title: 'Test',

web/i18n/fr-FR/tools.ts

@@ -73,6 +73,8 @@ const translation = {
     privacyPolicyPlaceholder: 'Veuillez entrer la politique de confidentialité',
     customDisclaimer: 'Clause de non-responsabilité personnalisée',
     customDisclaimerPlaceholder: 'Entrez le texte de la clause de non-responsabilité personnalisée',
+    deleteToolConfirmTitle: 'Supprimer cet outil ?',
+    deleteToolConfirmContent: 'La suppression de l\'outil est irréversible. Les utilisateurs ne pourront plus accéder à votre outil.',
   },
   test: {
     title: 'Test',

web/i18n/hi-IN/tools.ts

@@ -108,6 +108,8 @@ const translation = {
     customDisclaimerPlaceholder: 'कस्टम अस्वीकरण दर्ज करें',
     confirmTitle: 'सहेजने की पुष्टि करें ?',
     confirmTip: 'इस उपकरण का उपयोग करने वाले ऐप्स प्रभावित होंगे',
+    deleteToolConfirmTitle: 'इस उपकरण को हटाएं?',
+    deleteToolConfirmContent: 'इस उपकरण को हटाने से वापस नहीं आ सकता है। उपयोगकर्ता अब तक आपके उपकरण पर अन्तराल नहीं कर सकेंगे।',
   },
   test: {
     title: 'परीक्षण',

web/i18n/ja-JP/tools.ts

@@ -73,6 +73,8 @@ const translation = {
     privacyPolicyPlaceholder: 'プライバシーポリシーを入力してください',
     customDisclaimer: 'カスタム免責事項',
     customDisclaimerPlaceholder: 'カスタム免責事項を入力してください',
+    deleteToolConfirmTitle: 'このツールを削除しますか？',
+    deleteToolConfirmContent: 'ツールの削除は取り消しできません。ユーザーはもうあなたのツールにアクセスできません。',
   },
   test: {
     title: 'テスト',

web/i18n/ko-KR/tools.ts

@@ -105,6 +105,8 @@ const translation = {
     customDisclaimerPlaceholder: '사용자 정의 권리 포기 문구를 입력해주세요.',
     confirmTitle: '저장하시겠습니까?',
     confirmTip: '이 도구를 사용하는 앱은 영향을 받습니다.',
+    deleteToolConfirmTitle: '이 도구를 삭제하시겠습니까?',
+    deleteToolConfirmContent: '이 도구를 삭제하면 되돌릴 수 없습니다. 사용자는 더 이상 당신의 도구에 액세스할 수 없습니다.',
   },
   test: {
     title: '테스트',

web/i18n/pl-PL/tools.ts

@@ -75,6 +75,8 @@ const translation = {
     privacyPolicyPlaceholder: 'Proszę wprowadzić politykę prywatności',
     customDisclaimer: 'Oświadczenie niestandardowe',
     customDisclaimerPlaceholder: 'Proszę wprowadzić oświadczenie niestandardowe',
+    deleteToolConfirmTitle: 'Skasuj ten przyrząd?',
+    deleteToolConfirmContent: 'Usunięcie narzędzia jest nieodwracalne. Użytkownicy nie będą mieli już dostępu do Twojego narzędzia.',
   },
   test: {
     title: 'Test',

web/i18n/pt-BR/tools.ts

@@ -73,6 +73,8 @@ const translation = {
     privacyPolicyPlaceholder: 'Digite a política de privacidade',
     customDisclaimer: 'Aviso Personalizado',
     customDisclaimerPlaceholder: 'Digite o aviso personalizado',
+    deleteToolConfirmTitle: 'Excluir esta ferramenta?',
+    deleteToolConfirmContent: 'Excluir a ferramenta é irreversível. Os usuários não poderão mais acessar sua ferramenta.',
   },
   test: {
     title: 'Testar',

web/i18n/ro-RO/tools.ts

@@ -71,6 +71,8 @@ const translation = {
     },
     privacyPolicy: 'Politica de Confidențialitate',
     privacyPolicyPlaceholder: 'Vă rugăm să introduceți politica de confidențialitate',
+    deleteToolConfirmTitle: 'Ștergeți această unealtă?',
+    deleteToolConfirmContent: ' Ștergerea uneltă este irreversibilă. Utilizatorii nu vor mai putea accesa uneltă dvs.',
   },
   test: {
     title: 'Testează',

web/i18n/uk-UA/tools.ts

@@ -72,6 +72,8 @@ const translation = {
     privacyPolicyPlaceholder: 'Введіть політику конфіденційності',
     customDisclaimer: 'Власний відомості',
     customDisclaimerPlaceholder: 'Введіть власні відомості',
+    deleteToolConfirmTitle: 'Видалити цей інструмент?',
+    deleteToolConfirmContent: 'Видалення інструменту є незворотнім. Користувачі більше не зможуть отримати доступ до вашого інструменту.',
   },
 
   test: {

web/i18n/vi-VN/tools.ts

@@ -73,6 +73,8 @@ const translation = {
     privacyPolicyPlaceholder: 'Vui lòng nhập chính sách bảo mật',
     customDisclaimer: 'Tuyên bố Tùy chỉnh',
     customDisclaimerPlaceholder: 'Vui lòng nhập tuyên bố tùy chỉnh',
+    deleteToolConfirmTitle: 'Xóa công cụ này?',
+    deleteToolConfirmContent: 'Xóa công cụ là không thể hồi tơi. Người dùng sẽ không thể truy cập lại công cụ của bạn.',
   },
   test: {
     title: 'Kiểm tra',

web/i18n/zh-Hans/tools.ts

@@ -105,6 +105,8 @@ const translation = {
     customDisclaimerPlaceholder: '请输入自定义免责声明',
     confirmTitle: '确认保存？',
     confirmTip: '发布新的工具版本可能会影响该工具已关联的应用',
+    deleteToolConfirmTitle: '删除这个工具？',
+    deleteToolConfirmContent: '删除工具是不可逆的。用户将无法再访问您的工具。',
   },
   test: {
     title: '测试',

web/i18n/zh-Hant/tools.ts

@@ -73,6 +73,8 @@ const translation = {
     privacyPolicyPlaceholder: '請輸入隱私協議',
     customDisclaimer: '自定義免責聲明',
     customDisclaimerPlaceholder: '請輸入自定義免責聲明',
+    deleteToolConfirmTitle: '刪除這個工具？',
+    deleteToolConfirmContent: '刪除工具是不可逆的。用戶將無法再訪問您的工具。',
   },
   test: {
     title: '測試',