From d1dcd391917bc7b8ffff635604aa275bf87b5e76 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Wed, 16 Oct 2024 10:52:16 +0800
Subject: [PATCH] feat: add debug info i18n and extract common to components

---
 .../plugins/base/key-value-item.tsx           | 42 +++++++++++++++
 web/app/components/plugins/card/index.tsx     |  2 +-
 .../plugins/plugin-page/debug-info.tsx        | 53 +++++++++++++++++++
 .../components/plugins/plugin-page/index.tsx  | 43 +--------------
 web/i18n/en-US/plugin.ts                      |  4 ++
 web/i18n/zh-Hans/plugin.ts                    |  4 ++
 6 files changed, 106 insertions(+), 42 deletions(-)
 create mode 100644 web/app/components/plugins/base/key-value-item.tsx
 create mode 100644 web/app/components/plugins/plugin-page/debug-info.tsx

diff --git a/web/app/components/plugins/base/key-value-item.tsx b/web/app/components/plugins/base/key-value-item.tsx
new file mode 100644
index 0000000000..001bff2c60
--- /dev/null
+++ b/web/app/components/plugins/base/key-value-item.tsx
@@ -0,0 +1,42 @@
+'use client'
+import type { FC } from 'react'
+import React, { useCallback } from 'react'
+import copy from 'copy-to-clipboard'
+
+import {
+  RiClipboardLine,
+} from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
+import Toast from '../../base/toast'
+import ActionButton from '@/app/components/base/action-button'
+type Props = {
+  label: string
+  value: string
+}
+
+const KeyValueItem: FC<Props> = ({
+  label,
+  value,
+}) => {
+  const { t } = useTranslation()
+  const handleCopy = useCallback(() => {
+    copy(value)
+    Toast.notify({ type: 'success', message: t('common.actionMsg.copySuccessfully') })
+  }, [value])
+
+  return (
+    <div className='flex items-center gap-1 self-stretch'>
+      <span className='flex w-10 flex-col justify-center items-start text-text-tertiary system-xs-medium'>{label}</span>
+      <div className='flex justify-center items-center gap-0.5'>
+        <span className='system-xs-medium text-text-secondary'>
+          {value}
+        </span>
+        <ActionButton onClick={handleCopy}>
+          <RiClipboardLine className='w-3.5 h-3.5 text-text-tertiary' />
+        </ActionButton>
+      </div>
+    </div>
+  )
+}
+
+export default React.memo(KeyValueItem)
diff --git a/web/app/components/plugins/card/index.tsx b/web/app/components/plugins/card/index.tsx
index 6b9432633a..d68c410a49 100644
--- a/web/app/components/plugins/card/index.tsx
+++ b/web/app/components/plugins/card/index.tsx
@@ -52,7 +52,7 @@ const Card = ({
   }
 
   return (
-    <div className={cn('relative p-4 pb-3 border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg hover-bg-components-panel-on-panel-item-bg rounded-xl shadow-xs', className)}>
+    <div className={wrapClassName}>
       {!hideCornerMark && <CornerMark text={type} />}
       {/* Header */}
       <div className="flex">
diff --git a/web/app/components/plugins/plugin-page/debug-info.tsx b/web/app/components/plugins/plugin-page/debug-info.tsx
new file mode 100644
index 0000000000..e789f906ec
--- /dev/null
+++ b/web/app/components/plugins/plugin-page/debug-info.tsx
@@ -0,0 +1,53 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import {
+  RiArrowRightUpLine,
+  RiBugLine,
+} from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
+import KeyValueItem from '../base/key-value-item'
+import Tooltip from '@/app/components/base/tooltip'
+import Button from '@/app/components/base/button'
+
+const i18nPrefix = 'plugin.debugInfo'
+
+const DebugInfo: FC = () => {
+  const { t } = useTranslation()
+  return (
+    <Tooltip
+      triggerMethod='click'
+      popupContent={
+        <>
+          <div className='flex items-center gap-1 self-stretch'>
+            <span className='flex flex-col justify-center items-start flex-grow flex-shrink-0 basis-0 text-text-secondary system-sm-semibold'>{t(`${i18nPrefix}.title`)}</span>
+            <a href='' target='_blank' className='flex items-center gap-0.5 text-text-accent-light-mode-only cursor-pointer'>
+              <span className='system-xs-medium'>{t(`${i18nPrefix}.viewDocs`)}</span>
+              <RiArrowRightUpLine className='w-3 h-3' />
+            </a>
+          </div>
+          <div className='flex flex-col items-start gap-0.5 self-stretch'>
+            <KeyValueItem
+              label={'Port'}
+              value={'cloud.dify,ai:2048'}
+            />
+            <KeyValueItem
+              label={'Key'}
+              value={'A1B2C3D4E5F6G7H8'}
+            />
+          </div>
+        </>
+      }
+      popupClassName='flex flex-col items-start w-[256px] px-4 py-3.5 gap-1 border border-components-panel-border
+        rounded-xl bg-components-tooltip-bg shadows-shadow-lg z-50'
+      asChild={false}
+      position='bottom'
+    >
+      <Button className='w-full h-full p-2 text-components-button-secondary-text'>
+        <RiBugLine className='w-4 h-4' />
+      </Button>
+    </Tooltip>
+  )
+}
+
+export default React.memo(DebugInfo)
diff --git a/web/app/components/plugins/plugin-page/index.tsx b/web/app/components/plugins/plugin-page/index.tsx
index d51a0270f8..bed200e9f0 100644
--- a/web/app/components/plugins/plugin-page/index.tsx
+++ b/web/app/components/plugins/plugin-page/index.tsx
@@ -3,9 +3,6 @@
 import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import {
-  RiArrowRightUpLine,
-  RiBugLine,
-  RiClipboardLine,
   RiDragDropLine,
   RiEqualizer2Line,
 } from '@remixicon/react'
@@ -18,10 +15,10 @@ import {
 import InstallPluginDropdown from './install-plugin-dropdown'
 import { useUploader } from './use-uploader'
 import usePermission from './use-permission'
+import DebugInfo from './debug-info'
 import { useTabSearchParams } from '@/hooks/use-tab-searchparams'
 import Button from '@/app/components/base/button'
 import TabSlider from '@/app/components/base/tab-slider'
-import ActionButton from '@/app/components/base/action-button'
 import Tooltip from '@/app/components/base/tooltip'
 import cn from '@/utils/classnames'
 import PermissionSetModal from '@/app/components/plugins/permission-setting-modal/modal'
@@ -93,43 +90,7 @@ const PluginPage = ({
             )}
             {
               canDebugger && (
-                <Tooltip
-                  triggerMethod='click'
-                  popupContent={
-                    <>
-                      <div className='flex items-center gap-1 self-stretch'>
-                        <span className='flex flex-col justify-center items-start flex-grow flex-shrink-0 basis-0 text-text-secondary system-sm-semibold'>Debugging</span>
-                        <div className='flex items-center gap-0.5 text-text-accent-light-mode-only cursor-pointer'>
-                          <span className='system-xs-medium'>View docs</span>
-                          <RiArrowRightUpLine className='w-3 h-3' />
-                        </div>
-                      </div>
-                      <div className='flex flex-col items-start gap-0.5 self-stretch'>
-                        {['Port', 'Key'].map((label, index) => (
-                          <div key={label} className='flex items-center gap-1 self-stretch'>
-                            <span className='flex w-10 flex-col justify-center items-start text-text-tertiary system-xs-medium'>{label}</span>
-                            <div className='flex justify-center items-center gap-0.5'>
-                              <span className='system-xs-medium text-text-secondary'>
-                                {index === 0 ? 'cloud.dify,ai:2048' : 'A1B2C3D4E5F6G7H8'}
-                              </span>
-                              <ActionButton>
-                                <RiClipboardLine className='w-3.5 h-3.5 text-text-tertiary' />
-                              </ActionButton>
-                            </div>
-                          </div>
-                        ))}
-                      </div>
-                    </>
-                  }
-                  popupClassName='flex flex-col items-start w-[256px] px-4 py-3.5 gap-1 border border-components-panel-border
-                    rounded-xl bg-components-tooltip-bg shadows-shadow-lg z-50'
-                  asChild={false}
-                  position='bottom'
-                >
-                  <Button className='w-full h-full p-2 text-components-button-secondary-text'>
-                    <RiBugLine className='w-4 h-4' />
-                  </Button>
-                </Tooltip>
+                <DebugInfo />
               )
             }
             {
diff --git a/web/i18n/en-US/plugin.ts b/web/i18n/en-US/plugin.ts
index 348939de94..817c9e0296 100644
--- a/web/i18n/en-US/plugin.ts
+++ b/web/i18n/en-US/plugin.ts
@@ -21,6 +21,10 @@ const translation = {
   },
   install: '{{num}} installs',
   installAction: 'Install',
+  debugInfo: {
+    title: 'Debugging',
+    viewDocs: 'View Docs',
+  },
   privilege: {
     title: 'Plugin Preferences',
     whoCanInstall: 'Who can install and manage plugins?',
diff --git a/web/i18n/zh-Hans/plugin.ts b/web/i18n/zh-Hans/plugin.ts
index 3543e6b526..d40920e0aa 100644
--- a/web/i18n/zh-Hans/plugin.ts
+++ b/web/i18n/zh-Hans/plugin.ts
@@ -21,6 +21,10 @@ const translation = {
   },
   install: '{{num}} 次安装',
   installAction: '安装',
+  debugInfo: {
+    title: '调试',
+    viewDocs: '查看文档',
+  },
   privilege: {
     title: '插件偏好',
     whoCanInstall: '谁可以安装和管理插件？',