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.

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>
+          )}
+        </>
       }
     />
   );