ui: copy original content instead of formatted content for CopyLink

ui/lib/apps/SlowQuery/pages/Detail/index.tsx

@@ -8,6 +8,7 @@ import { useLocalStorageState } from '@umijs/hooks'
 import client from '@lib/client'
 import { useClientRequest } from '@lib/utils/useClientRequest'
 import { buildQueryFn, parseQueryFn } from '@lib/utils/query'
+import formatSql from '@lib/utils/formatSql'
 import {
   AnimatedSkeleton,
   CardTabs,
@@ -90,7 +91,14 @@ function DetailPage() {
                         expanded={detailExpand.query}
                         onClick={toggleQuery}
                       />
-                      <CopyLink data={data.query!} />
+                      <CopyLink
+                        textTransKey="copyFormatted"
+                        data={formatSql(data.query!)}
+                      />
+                      <CopyLink
+                        textTransKey="copyOriginal"
+                        data={data.query!}
+                      />
                     </Space>
                   }
                 >
@@ -116,7 +124,14 @@ function DetailPage() {
                               expanded={detailExpand.prev_query}
                               onClick={togglePrevQuery}
                             />
-                            <CopyLink data={data.prev_stmt!} />
+                            <CopyLink
+                              textTransKey="copyFormatted"
+                              data={formatSql(data.prev_stmt!)}
+                            />
+                            <CopyLink
+                              textTransKey="copyOriginal"
+                              data={data.prev_stmt!}
+                            />
                           </Space>
                         }
                       >

ui/lib/apps/Statement/pages/Detail/PlanDetail.tsx

@@ -16,6 +16,7 @@ import {
 } from '@lib/components'
 import { useClientRequest } from '@lib/utils/useClientRequest'
 import client from '@lib/client'
+import formatSql from '@lib/utils/formatSql'
 
 import { IPageQuery } from '.'
 import TabBasic from './PlanDetailTabBasic'
@@ -95,7 +96,14 @@ function PlanDetail({ query }: IPlanDetailProps) {
                       expanded={detailExpand.query}
                       onClick={toggleQuery}
                     />
-                    <CopyLink data={data.query_sample_text} />
+                    <CopyLink
+                      textTransKey="copyFormatted"
+                      data={formatSql(data.query_sample_text)}
+                    />
+                    <CopyLink
+                      textTransKey="copyOriginal"
+                      data={data.query_sample_text}
+                    />
                   </Space>
                 }
               >
@@ -119,7 +127,14 @@ function PlanDetail({ query }: IPlanDetailProps) {
                         expanded={detailExpand.prev_query}
                         onClick={togglePrevQuery}
                       />
-                      <CopyLink data={data.prev_sample_text} />
+                      <CopyLink
+                        textTransKey="copyFormatted"
+                        data={formatSql(data.prev_sample_text)}
+                      />
+                      <CopyLink
+                        textTransKey="copyOriginal"
+                        data={data.prev_sample_text}
+                      />
                     </Space>
                   }
                 >

ui/lib/apps/Statement/pages/Detail/index.tsx

@@ -20,6 +20,7 @@ import {
   TextWithInfo,
 } from '@lib/components'
 import CopyLink from '@lib/components/CopyLink'
+import formatSql from '@lib/utils/formatSql'
 import { buildQueryFn, parseQueryFn } from '@lib/utils/query'
 import { useClientRequest } from '@lib/utils/useClientRequest'
 
@@ -98,7 +99,14 @@ function DetailPage() {
                         expanded={sqlExpanded}
                         onClick={toggleSqlExpanded}
                       />
-                      <CopyLink data={plans[0].digest_text!} />
+                      <CopyLink
+                        textTransKey="copyFormatted"
+                        data={formatSql(plans[0].digest_text!)}
+                      />
+                      <CopyLink
+                        textTransKey="copyOriginal"
+                        data={plans[0].digest_text!}
+                      />
                     </Space>
                   }
                 >

ui/lib/components/CopyLink/index.tsx

@@ -1,24 +1,32 @@
 import React, { useState } from 'react'
 import { CopyToClipboard } from 'react-copy-to-clipboard'
-import { addTranslationResource } from '@lib/utils/i18n'
 import { useTranslation } from 'react-i18next'
 import { useTimeoutFn } from 'react-use'
+import { Tooltip } from 'antd'
 import { CheckOutlined, CopyOutlined } from '@ant-design/icons'
+import { addTranslationResource } from '@lib/utils/i18n'
 
 import styles from './index.module.less'
 
 export interface ICopyLinkProps {
   data?: string
+  textTransKey?: 'copy' | 'copyOriginal' | 'copyFormatted'
 }
 
 const translations = {
   en: {
-    text: 'Copy',
+    copy: 'Copy',
+    copyOriginal: 'Copy Original',
+    copyFormatted: 'Copy Formatted',
     success: 'Copied',
+    tooltip: 'Copy by this button if you need to run it in SQL client',
   },
   zh: {
-    text: '复制',
+    copy: '复制',
+    copyOriginal: '复制原始 SQL',
+    copyFormatted: '复制格式化 SQL',
     success: '已复制',
+    tooltip: '如果你需要在 SQL 客户端执行此 SQL 语句，请使用这个按钮进行复制',
   },
 }
 
@@ -30,7 +38,7 @@ for (const key in translations) {
   })
 }
 
-function CopyLink({ data }: ICopyLinkProps) {
+function CopyLink({ data, textTransKey = 'copy' }: ICopyLinkProps) {
   const { t } = useTranslation()
   const [showCopied, setShowCopied] = useState(false)
 
@@ -43,15 +51,20 @@ function CopyLink({ data }: ICopyLinkProps) {
     reset()
   }
 
+  const copyBtn = (
+    <CopyToClipboard text={data} onCopy={handleCopy}>
+      <a>
+        {t(`component.copyLink.${textTransKey}`)} <CopyOutlined />
+      </a>
+    </CopyToClipboard>
+  )
+
   return (
     <span>
-      {!showCopied && (
-        <CopyToClipboard text={data} onCopy={handleCopy}>
-          <a>
-            {t('component.copyLink.text')} <CopyOutlined />
-          </a>
-        </CopyToClipboard>
+      {!showCopied && textTransKey === 'copyOriginal' && (
+        <Tooltip title={t('component.copyLink.tooltip')}>{copyBtn}</Tooltip>
       )}
+      {!showCopied && textTransKey !== 'copyOriginal' && copyBtn}
       {showCopied && (
         <span className={styles.copiedText}>
           <CheckOutlined /> {t('component.copyLink.success')}