From d7750086b5b796cfc70d8dc0c7d0ab4bd1996ca0 Mon Sep 17 00:00:00 2001
From: Ivan Li <ivanli2048@gmail.com>
Date: Tue, 9 Jan 2024 22:50:42 +0800
Subject: [PATCH] feat(frontend): add navigateToLink button for CopyTextField.
 close #372. (#376)

* feat(frontend): add navigateToLink button for CopyTextField. close #372.

* chore(frontend): remove unused props for CopyTextField.
---
 .../src/components/upload/CopyTextField.tsx   | 28 +++++++++++++++----
 .../upload/modals/showCreateUploadModal.tsx   | 11 ++++----
 frontend/src/i18n/translations/en-US.ts       |  1 +
 frontend/src/i18n/translations/zh-CN.ts       |  1 +
 4 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/upload/CopyTextField.tsx b/frontend/src/components/upload/CopyTextField.tsx
index 00d9572..134fbd6 100644
--- a/frontend/src/components/upload/CopyTextField.tsx
+++ b/frontend/src/components/upload/CopyTextField.tsx
@@ -1,7 +1,8 @@
-import { ActionIcon, TextInput } from "@mantine/core";
+import { ActionIcon, TextInput, Tooltip } from "@mantine/core";
 import { useClipboard } from "@mantine/hooks";
 import { useRef, useState } from "react";
 import { TbCheck, TbCopy } from "react-icons/tb";
+import { IoOpenOutline } from "react-icons/io5";
 import useTranslate from "../../hooks/useTranslate.hook";
 import toast from "../../utils/toast.util";
 
@@ -37,12 +38,27 @@ function CopyTextField(props: { link: string }) {
           setTextClicked(true);
         }
       }}
+      rightSectionWidth={62}
       rightSection={
-        window.isSecureContext && (
-          <ActionIcon onClick={copyLink}>
-            {checkState ? <TbCheck /> : <TbCopy />}
-          </ActionIcon>
-        )
+        <>
+          <Tooltip
+            label={t("common.text.navigate-to-link")}
+            position="top"
+            offset={-2}
+            openDelay={200}
+          >
+            <a href={props.link}>
+              <ActionIcon>
+                <IoOpenOutline />
+              </ActionIcon>
+            </a>
+          </Tooltip>
+          {window.isSecureContext && (
+            <ActionIcon onClick={copyLink}>
+              {checkState ? <TbCheck /> : <TbCopy />}
+            </ActionIcon>
+          )}
+        </>
       }
     />
   );
diff --git a/frontend/src/components/upload/modals/showCreateUploadModal.tsx b/frontend/src/components/upload/modals/showCreateUploadModal.tsx
index c83790d..249e831 100644
--- a/frontend/src/components/upload/modals/showCreateUploadModal.tsx
+++ b/frontend/src/components/upload/modals/showCreateUploadModal.tsx
@@ -282,11 +282,12 @@ const CreateUploadModalBody = ({
                   />
                 </Col>
               </Grid>
-              { options.maxExpirationInHours == 0 && <Checkbox
-                label={t("upload.modal.expires.never-long")}
-                {...form.getInputProps("never_expires")}
-              />
-              }
+              {options.maxExpirationInHours == 0 && (
+                <Checkbox
+                  label={t("upload.modal.expires.never-long")}
+                  {...form.getInputProps("never_expires")}
+                />
+              )}
               <Text
                 italic
                 size="xs"
diff --git a/frontend/src/i18n/translations/en-US.ts b/frontend/src/i18n/translations/en-US.ts
index 2b010a4..4b2ccf1 100644
--- a/frontend/src/i18n/translations/en-US.ts
+++ b/frontend/src/i18n/translations/en-US.ts
@@ -526,6 +526,7 @@ export default {
   "common.button.generate": "Generate",
   "common.button.done": "Done",
   "common.text.link": "Link",
+  "common.text.navigate-to-link": "Go to the link",
   "common.text.or": "or",
   "common.button.go-back": "Go back",
   "common.notify.copied": "Your link was copied to the clipboard",
diff --git a/frontend/src/i18n/translations/zh-CN.ts b/frontend/src/i18n/translations/zh-CN.ts
index 34ddd84..bdb252b 100644
--- a/frontend/src/i18n/translations/zh-CN.ts
+++ b/frontend/src/i18n/translations/zh-CN.ts
@@ -404,6 +404,7 @@ export default {
   "common.button.generate": "生成",
   "common.button.done": "完成",
   "common.text.link": "链接",
+  "common.text.navigate-to-link": "访问链接",
   "common.text.or": "或",
   "common.button.go-back": "返回",
   "common.notify.copied": "已复制到剪贴板",