remove endpoint

web/app/components/plugins/plugin-detail-panel/endpoint-card.tsx

@@ -1,12 +1,16 @@
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { useBoolean } from 'ahooks'
 import { RiDeleteBinLine, RiEditLine, RiLoginCircleLine } from '@remixicon/react'
 import type { EndpointListItem } from '../types'
+import EndpointModal from './endpoint-modal'
 import ActionButton from '@/app/components/base/action-button'
 import CopyBtn from '@/app/components/base/copy-btn'
+import Confirm from '@/app/components/base/confirm'
 import Indicator from '@/app/components/header/indicator'
 import Switch from '@/app/components/base/switch'
 import {
+  deleteEndpoint,
   disableEndpoint,
   enableEndpoint,
 } from '@/service/plugins'
@@ -22,6 +26,10 @@ const EndpointCard = ({
   const [active, setActive] = useState(data.enabled)
   const endpointID = data.id
 
+  const [isShowDisableConfirm, {
+    setTrue: showDisableConfirm,
+    setFalse: hideDisableConfirm,
+  }] = useBoolean(false)
   const activeEndpoint = async () => {
     try {
       await enableEndpoint({
@@ -31,7 +39,7 @@ const EndpointCard = ({
     }
     catch (error) {
       console.error(error)
-      setActive(true)
+      setActive(false)
     }
   }
   const inactiveEndpoint = async () => {
@@ -43,16 +51,41 @@ const EndpointCard = ({
     }
     catch (error) {
       console.error(error)
-      setActive(false)
+      setActive(true)
     }
   }
   const handleSwitch = (state: boolean) => {
-    if (state)
+    if (state) {
+      setActive(true)
       activeEndpoint()
-    else
+    }
-      inactiveEndpoint()
+    else {
+      setActive(false)
+      showDisableConfirm()
+    }
   }
 
+  const [isShowDeleteConfirm, {
+    setTrue: showDeleteConfirm,
+    setFalse: hideDeleteConfirm,
+  }] = useBoolean(false)
+  const handleDelete = async () => {
+    try {
+      await deleteEndpoint({
+        url: '/workspaces/current/endpoints/delete',
+        endpointID,
+      })
+    }
+    catch (error) {
+      console.error(error)
+    }
+  }
+
+  const [isShowEndpointModal, {
+    setTrue: showEndpointModalConfirm,
+    setFalse: hideEndpointModalConfirm,
+  }] = useBoolean(false)
+
   return (
     <div className='p-0.5 bg-background-section-burn rounded-xl'>
       <div className='group p-2.5 pl-3 bg-components-panel-on-panel-item-bg rounded-[10px] border-[0.5px] border-components-panel-border'>
@@ -62,10 +95,10 @@ const EndpointCard = ({
             <div>{data.name}</div>
           </div>
           <div className='hidden group-hover:flex items-center'>
-            <ActionButton>
+            <ActionButton onClick={showEndpointModalConfirm}>
               <RiEditLine className='w-4 h-4' />
             </ActionButton>
-            <ActionButton className='hover:bg-state-destructive-hover text-text-tertiary hover:text-text-destructive'>
+            <ActionButton onClick={showDeleteConfirm} className='hover:bg-state-destructive-hover text-text-tertiary hover:text-text-destructive'>
               <RiDeleteBinLine className='w-4 h-4' />
             </ActionButton>
           </div>
@@ -74,7 +107,7 @@ const EndpointCard = ({
           <div key={index} className='h-6 flex items-center'>
             <div className='shrink-0 w-12 text-text-tertiary system-xs-regular'>{endpoint.method}</div>
             <div className='group/item grow flex items-center text-text-secondary system-xs-regular truncate'>
-              <div className='truncate'>{`${data.url}${endpoint.path}`}</div>
+              <div title={`${data.url}${endpoint.path}`} className='truncate'>{`${data.url}${endpoint.path}`}</div>
               <CopyBtn
                 className='hidden shrink-0 ml-2 group-hover/item:block'
                 value={`${data.url}${endpoint.path}`}
@@ -104,6 +137,32 @@ const EndpointCard = ({
           size='sm'
         />
       </div>
+      {isShowDisableConfirm && (
+        <Confirm
+          isShow
+          title={t('plugin.detailPanel.endpointDisableTip')}
+          content={<div>{t('plugin.detailPanel.endpointDisableContent', { name: data.name })}</div>}
+          onCancel={() => {
+            hideDisableConfirm()
+            setActive(true)
+          }}
+          onConfirm={inactiveEndpoint}
+        />
+      )}
+      {isShowDeleteConfirm && (
+        <Confirm
+          isShow
+          title={t('plugin.detailPanel.endpointDeleteTip')}
+          content={<div>{t('plugin.detailPanel.endpointDeleteContent', { name: data.name })}</div>}
+          onCancel={hideDeleteConfirm}
+          onConfirm={handleDelete}
+        />
+      )}
+      {isShowEndpointModal && (
+        <EndpointModal
+          onCancel={hideEndpointModalConfirm}
+        />
+      )}
     </div>
   )
 }

web/app/components/plugins/plugin-detail-panel/endpoint-modal.tsx

@@ -0,0 +1,79 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import Drawer from '@/app/components/base/drawer'
+import Button from '@/app/components/base/button'
+// import Toast from '@/app/components/base/toast'
+// import Form from '@/app/components/header/account-setting/model-provider-page/model-modal/Form'
+// import { LinkExternal02 } from '@/app/components/base/icons/src/vender/line/general'
+import { useLanguage } from '@/app/components/header/account-setting/model-provider-page/hooks'
+import cn from '@/utils/classnames'
+
+type Props = {
+  onCancel: () => void
+  // onSaved: (value: Record<string, any>) => void
+  onRemove?: () => void
+}
+
+const EndpointModal: FC<Props> = ({
+  onCancel,
+  // onSaved,
+  onRemove = () => { },
+}) => {
+  const { t } = useTranslation()
+  const language = useLanguage()
+
+  const handleSave = () => {
+    // for (const field of credentialSchema) {
+    //   if (field.required && !tempCredential[field.name]) {
+    //     Toast.notify({ type: 'error', message: t('common.errorMsg.fieldRequired', { field: field.label[language] || field.label.en_US }) })
+    //     return
+    //   }
+    // }
+    // onSaved(tempCredential)
+  }
+
+  return (
+    <Drawer
+      isOpen
+      clickOutsideNotOpen={false}
+      onClose={onCancel}
+      footer={null}
+      mask
+      positionCenter={false}
+      panelClassname={cn('justify-start mt-[64px] mr-2 mb-2 !w-[420px] !max-w-[420px] !p-0 !bg-components-panel-bg rounded-2xl border-[0.5px] border-components-panel-border shadow-xl')}
+    >
+      <>
+        {/* <Form
+          value={tempCredential}
+          onChange={(v) => {
+            setTempCredential(v)
+          }}
+          formSchemas={credentialSchema}
+          isEditMode={true}
+          showOnVariableMap={{}}
+          validating={false}
+          inputClassName='!bg-gray-50'
+          fieldMoreInfo={item => item.url
+            ? (<a
+              href={item.url}
+              target='_blank' rel='noopener noreferrer'
+              className='inline-flex items-center text-xs text-primary-600'
+            >
+              {t('tools.howToGet')}
+              <LinkExternal02 className='ml-1 w-3 h-3' />
+            </a>)
+            : null}
+        /> */}
+        <div className={cn('mt-2 flex justify-end')} >
+          < div className='flex space-x-2'>
+            <Button onClick={onCancel}>{t('common.operation.cancel')}</Button>
+            <Button variant='primary' onClick={handleSave}>{t('common.operation.save')}</Button>
+          </div>
+        </div>
+      </>
+    </Drawer>
+  )
+}
+export default React.memo(EndpointModal)

web/i18n/en-US/plugin.ts

@@ -21,6 +21,10 @@ const translation = {
     actionNum: '{{num}} ACTIONS INCLUDED',
     endpoints: 'Endpoints',
     endpointsEmpty: 'Click the \'+\' button to add an endpoint',
+    endpointDisableTip: 'Disable Endpoint',
+    endpointDisableContent: 'Would you like to disable {{name}}? ',
+    endpointDeleteTip: 'Remove Endpoint',
+    endpointDeleteContent: 'Would you like to remove {{name}}? ',
     serviceOk: 'Service OK',
     disabled: 'Disabled',
     modelNum: '{{num}} MODELS INCLUDED',

web/i18n/zh-Hans/plugin.ts

@@ -20,7 +20,11 @@ const translation = {
     },
     actionNum: '{{num}} ACTIONS 已包含',
     endpoints: 'Endpoints',
-    endpointsEmpty: '点击 \'+\' 按钮添加端点',
+    endpointsEmpty: '点击 \'+\' 按钮添加 Endpoint',
+    endpointDisableTip: '停用 Endpoint',
+    endpointDisableContent: '是否要停用 {{name}} 的 Endpoint ？',
+    endpointDeleteTip: '移除 Endpoint',
+    endpointDeleteContent: '是否要移除 {{name}} ？',
     serviceOk: '服务正常',
     disabled: '停用',
     modelNum: '{{num}} 模型已包含',