From dcf74f17171d9d8859fd2e5f3bf916ae0f4a8afd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc=20Gu=CC=88ell=20Segarra?= <marc@ondori.dev>
Date: Tue, 14 Jan 2025 12:16:27 +0100
Subject: [PATCH] fix: improve ShareUrlButton functionality and design

https://github.com/gisce/webclient/issues/1612
- Refactored the copyToClipboard function to use a temporary textarea for better compatibility across browsers and avoid SSL restrictions
- Updated the ShareUrlButton component to include new icons and improved styling.
- Added new translations for "Copy to clipboard" in ca_ES, en_US, and es_ES locale files.
- Adjusted the popover content padding for a cleaner UI.
---
 src/actionbar/ShareUrlButton.tsx | 79 +++++++++++++++++++-------------
 src/locales/ca_ES.ts             |  1 +
 src/locales/en_US.ts             |  1 +
 src/locales/es_ES.ts             |  1 +
 4 files changed, 51 insertions(+), 31 deletions(-)

diff --git a/src/actionbar/ShareUrlButton.tsx b/src/actionbar/ShareUrlButton.tsx
index ef7b35250..2eca16c9c 100644
--- a/src/actionbar/ShareUrlButton.tsx
+++ b/src/actionbar/ShareUrlButton.tsx
@@ -1,15 +1,11 @@
 import { useState, useCallback } from "react";
-import { Button, Input, message, Space, Popover } from "antd";
-import {
-  ShareAltOutlined,
-  CopyOutlined,
-  CheckOutlined,
-  LinkOutlined,
-} from "@ant-design/icons";
+import { Button, Input, message, Space, Popover, theme } from "antd";
+import { CopyOutlined, CheckOutlined } from "@ant-design/icons";
 import { useLocale } from "@gisce/react-formiga-components";
 import { createShareOpenUrl } from "@/helpers/shareUrlHelper";
 import { ViewType } from "@/types";
 import ActionButton from "./ActionButton";
+import { IconExternalLink, IconShare2 } from "@tabler/icons-react";
 
 export type ShareUrlButtonProps = {
   action_id?: number;
@@ -22,6 +18,7 @@ export function ShareUrlButton({
   view_type,
   res_id,
 }: ShareUrlButtonProps) {
+  const { token } = theme.useToken();
   const { t } = useLocale();
   const [isCopied, setIsCopied] = useState(false);
 
@@ -38,12 +35,31 @@ export function ShareUrlButton({
     moreDataNeededForCopying = !action_id || !res_id;
   }
 
-  const copyToClipboard = useCallback(async () => {
+  const copyToClipboard = useCallback(() => {
     try {
-      await navigator.clipboard.writeText(shareUrl);
-      setIsCopied(true);
-      message.success(t("urlCopiedToClipboard"));
-      setTimeout(() => setIsCopied(false), 2000);
+      // Create a temporary textarea element
+      const tempInput = document.createElement("textarea");
+      tempInput.value = shareUrl;
+      document.body.appendChild(tempInput);
+
+      // Select the text in the textarea
+      tempInput.select();
+      tempInput.setSelectionRange(0, 99999); // For mobile devices
+
+      // Copy the text using execCommand
+      const successful = document.execCommand("copy");
+
+      // Clean up the temporary element
+      document.body.removeChild(tempInput);
+
+      // Handle success or failure
+      if (successful) {
+        setIsCopied(true);
+        message.success(t("urlCopiedToClipboard"));
+        setTimeout(() => setIsCopied(false), 2000);
+      } else {
+        throw new Error("Copy command was unsuccessful.");
+      }
     } catch (err) {
       console.error("Error copying to clipboard:", err);
       message.error(t("errorCopyingToClipboard"));
@@ -51,7 +67,7 @@ export function ShareUrlButton({
   }, [shareUrl, setIsCopied, t]);
 
   const popoverContent = (
-    <div style={{ padding: 8 }}>
+    <div style={{ padding: 2 }}>
       <Space.Compact style={{ width: "100%" }}>
         <Input
           value={shareUrl}
@@ -63,25 +79,26 @@ export function ShareUrlButton({
             minWidth: 300,
           }}
         />
-        {isSecureContext && (
-          <Button
-            type="text"
-            style={{
-              marginRight: 8,
-            }}
-            icon={
-              isCopied ? (
-                <CheckOutlined style={{ color: "#52c41a" }} />
-              ) : (
-                <CopyOutlined />
-              )
-            }
-            onClick={copyToClipboard}
-          />
-        )}
         <Button
+          title={t("copyToClipboard")}
+          type="text"
+          style={{
+            marginRight: 8,
+          }}
+          icon={
+            isCopied ? (
+              <CheckOutlined style={{ color: token.colorSuccess }} />
+            ) : (
+              <CopyOutlined style={{ color: token.colorTextSecondary }} />
+            )
+          }
+          onClick={copyToClipboard}
+        />
+        <Button
+          title={t("openInNewTab")}
+          style={{ height: 28 }}
           type="text"
-          icon={<LinkOutlined />}
+          icon={<IconExternalLink size={18} color={token.colorTextSecondary} />}
           onClick={() => window.open(shareUrl, "_blank", "noopener,noreferrer")}
         />
       </Space.Compact>
@@ -91,7 +108,7 @@ export function ShareUrlButton({
   return (
     <Popover content={popoverContent} trigger="click" placement="bottom">
       <ActionButton
-        icon={<ShareAltOutlined />}
+        icon={<IconShare2 size={16} color={token.colorTextSecondary} />}
         disabled={moreDataNeededForCopying}
         tooltip={t("share")}
       />
diff --git a/src/locales/ca_ES.ts b/src/locales/ca_ES.ts
index bdd5fb7ac..e89064c04 100644
--- a/src/locales/ca_ES.ts
+++ b/src/locales/ca_ES.ts
@@ -110,5 +110,6 @@ export default {
   loading: "Carregant...",
   pendingToCalculate: "Pendent de calcular",
   share: "Compartir URL",
+  copyToClipboard: "Copiar al porta-retalls",
   urlCopiedToClipboard: "URL copiada al porta-retalls",
 };
diff --git a/src/locales/en_US.ts b/src/locales/en_US.ts
index fd5e8d545..2525f6c2c 100644
--- a/src/locales/en_US.ts
+++ b/src/locales/en_US.ts
@@ -107,4 +107,5 @@ export default {
   pendingToCalculate: "Pending to calculate",
   share: "Compartir URL",
   urlCopiedToClipboard: "URL copied to clipboard",
+  copyToClipboard: "Copy to clipboard",
 };
diff --git a/src/locales/es_ES.ts b/src/locales/es_ES.ts
index 4f116e490..5e0e903b0 100644
--- a/src/locales/es_ES.ts
+++ b/src/locales/es_ES.ts
@@ -113,4 +113,5 @@ export default {
   pendingToCalculate: "Pendiente de calcular",
   share: "Compartir URL",
   urlCopiedToClipboard: "URL copiada al portapapeles",
+  copyToClipboard: "Copiar al portapapeles",
 };