ui: copy original content instead of formatted content for CopyLink (#…

…802) * ui: copy original content instead of formatted content for CopyLink component * Revert "ui: copy original content instead of formatted content for CopyLink component" This reverts commit fa2a709. * ui: support copy original sql and formatted sql * refine * remove tooltip
pingcap · Nov 26, 2020 · b2a389e · b2a389e
1 parent c844020
commit b2a389e
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 10 deletions.
diff --git a/ui/lib/apps/SlowQuery/pages/Detail/index.tsx b/ui/lib/apps/SlowQuery/pages/Detail/index.tsx
@@ -91,7 +91,14 @@ function DetailPage() {
                         expanded={detailExpand.query}
                         onClick={toggleQuery}
                       />
-                      <CopyLink data={formatSql(data.query!)} />
+                      <CopyLink
+                        displayVariant="formatted_sql"
+                        data={formatSql(data.query!)}
+                      />
+                      <CopyLink
+                        displayVariant="original_sql"
+                        data={data.query!}
+                      />
                     </Space>
                   }
                 >
@@ -117,7 +124,14 @@ function DetailPage() {
                               expanded={detailExpand.prev_query}
                               onClick={togglePrevQuery}
                             />
-                            <CopyLink data={formatSql(data.prev_stmt!)} />
+                            <CopyLink
+                              displayVariant="formatted_sql"
+                              data={formatSql(data.prev_stmt!)}
+                            />
+                            <CopyLink
+                              displayVariant="original_sql"
+                              data={data.prev_stmt!}
+                            />
                           </Space>
                         }
                       >

diff --git a/ui/lib/apps/Statement/pages/Detail/PlanDetail.tsx b/ui/lib/apps/Statement/pages/Detail/PlanDetail.tsx
@@ -96,7 +96,14 @@ function PlanDetail({ query }: IPlanDetailProps) {
                       expanded={detailExpand.query}
                       onClick={toggleQuery}
                     />
-                    <CopyLink data={formatSql(data.query_sample_text)} />
+                    <CopyLink
+                      displayVariant="formatted_sql"
+                      data={formatSql(data.query_sample_text)}
+                    />
+                    <CopyLink
+                      displayVariant="original_sql"
+                      data={data.query_sample_text}
+                    />
                   </Space>
                 }
               >
@@ -120,7 +127,14 @@ function PlanDetail({ query }: IPlanDetailProps) {
                         expanded={detailExpand.prev_query}
                         onClick={togglePrevQuery}
                       />
-                      <CopyLink data={formatSql(data.prev_sample_text)} />
+                      <CopyLink
+                        displayVariant="formatted_sql"
+                        data={formatSql(data.prev_sample_text)}
+                      />
+                      <CopyLink
+                        displayVariant="original_sql"
+                        data={data.prev_sample_text}
+                      />
                     </Space>
                   }
                 >

diff --git a/ui/lib/apps/Statement/pages/Detail/index.tsx b/ui/lib/apps/Statement/pages/Detail/index.tsx
@@ -99,7 +99,14 @@ function DetailPage() {
                         expanded={sqlExpanded}
                         onClick={toggleSqlExpanded}
                       />
-                      <CopyLink data={formatSql(plans[0].digest_text!)} />
+                      <CopyLink
+                        displayVariant="formatted_sql"
+                        data={formatSql(plans[0].digest_text!)}
+                      />
+                      <CopyLink
+                        displayVariant="original_sql"
+                        data={plans[0].digest_text!}
+                      />
                     </Space>
                   }
                 >

diff --git a/ui/lib/components/CopyLink/index.tsx b/ui/lib/components/CopyLink/index.tsx
@@ -1,23 +1,35 @@
 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 { CheckOutlined, CopyOutlined } from '@ant-design/icons'
+import { addTranslationResource } from '@lib/utils/i18n'
 
 import styles from './index.module.less'
 
+type DisplayVariant = 'default' | 'original_sql' | 'formatted_sql'
+const transKeys: { [K in DisplayVariant]: string } = {
+  default: 'copy',
+  original_sql: 'copyOriginal',
+  formatted_sql: 'copyFormatted',
+}
+
 export interface ICopyLinkProps {
   data?: string
+  displayVariant?: DisplayVariant
 }
 
 const translations = {
   en: {
-    text: 'Copy',
+    copy: 'Copy',
+    copyOriginal: 'Copy Original',
+    copyFormatted: 'Copy Formatted',
     success: 'Copied',
   },
   zh: {
-    text: '复制',
+    copy: '复制',
+    copyOriginal: '复制原始 SQL',
+    copyFormatted: '复制格式化 SQL',
     success: '已复制',
   },
 }
@@ -30,7 +42,7 @@ for (const key in translations) {
   })
 }
 
-function CopyLink({ data }: ICopyLinkProps) {
+function CopyLink({ data, displayVariant = 'default' }: ICopyLinkProps) {
   const { t } = useTranslation()
   const [showCopied, setShowCopied] = useState(false)
 
@@ -48,7 +60,8 @@ function CopyLink({ data }: ICopyLinkProps) {
       {!showCopied && (
         <CopyToClipboard text={data} onCopy={handleCopy}>
           <a>
-            {t('component.copyLink.text')} <CopyOutlined />
+            {t(`component.copyLink.${transKeys[displayVariant]}`)}{' '}
+            <CopyOutlined />
           </a>
         </CopyToClipboard>
       )}