From d4c9c76454f5b32b0e7a06e5634c691877983cd6 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Tue, 12 Nov 2024 14:31:04 +0800
Subject: [PATCH] chore: mask the debug key

---
 web/app/components/plugins/base/key-value-item.tsx    | 4 +++-
 web/app/components/plugins/plugin-page/debug-info.tsx | 4 ++++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/web/app/components/plugins/base/key-value-item.tsx b/web/app/components/plugins/base/key-value-item.tsx
index c249284bb9..9d6cda18d3 100644
--- a/web/app/components/plugins/base/key-value-item.tsx
+++ b/web/app/components/plugins/base/key-value-item.tsx
@@ -15,6 +15,7 @@ type Props = {
   label: string
   labelWidthClassName?: string
   value: string
+  maskedValue?: string
   valueMaxWidthClassName?: string
 }
 
@@ -22,6 +23,7 @@ const KeyValueItem: FC<Props> = ({
   label,
   labelWidthClassName = 'w-10',
   value,
+  maskedValue,
   valueMaxWidthClassName = 'max-w-[162px]',
 }) => {
   const { t } = useTranslation()
@@ -49,7 +51,7 @@ const KeyValueItem: FC<Props> = ({
       <span className={cn('flex flex-col justify-center items-start text-text-tertiary system-xs-medium', labelWidthClassName)}>{label}</span>
       <div className='flex justify-center items-center gap-0.5'>
         <span className={cn(valueMaxWidthClassName, ' truncate system-xs-medium text-text-secondary')}>
-          {value}
+          {maskedValue || value}
         </span>
         <Tooltip popupContent={t(`common.operation.${isCopied ? 'copied' : 'copy'}`)} position='top'>
           <ActionButton onClick={handleCopy}>
diff --git a/web/app/components/plugins/plugin-page/debug-info.tsx b/web/app/components/plugins/plugin-page/debug-info.tsx
index 9c777c5dd9..e4d249f3e2 100644
--- a/web/app/components/plugins/plugin-page/debug-info.tsx
+++ b/web/app/components/plugins/plugin-page/debug-info.tsx
@@ -17,6 +17,9 @@ const DebugInfo: FC = () => {
   const { t } = useTranslation()
   const { data: info, isLoading } = useDebugKey()
 
+  // info.key likes 4580bdb7-b878-471c-a8a4-bfd760263a53 mask the middle part using *.
+  const maskedKey = info?.key?.replace(/(.{8})(.*)(.{8})/, '$1********$3')
+
   if (isLoading) return null
 
   return (
@@ -40,6 +43,7 @@ const DebugInfo: FC = () => {
             <KeyValueItem
               label={'Key'}
               value={info?.key || ''}
+              maskedValue={maskedKey}
             />
           </div>
         </>