fix: BROS-378: Fix text copying (#8339)

Author: nick-skriabin

web/apps/labelstudio/src/pages/Settings/StorageSettings/StorageSummary.jsx

@@ -4,14 +4,14 @@ import { DescriptionList } from "../../../components/DescriptionList/Description
 import { modal } from "../../../components/Modal/Modal";
 import { Oneof } from "../../../components/Oneof/Oneof";
 import { getLastTraceback } from "../../../utils/helpers";
-import { useCopyText } from "@humansignal/core/lib/hooks/useCopyText";
+import { useCopyText } from "@humansignal/core";
 
 // Component to handle copy functionality within the modal
 const CopyButton = ({ msg }) => {
-  const [copyText, copied] = useCopyText(msg);
+  const [copyText, copied] = useCopyText({ defaultText: msg });
 
   return (
-    <Button variant="neutral" icon={<IconFileCopy />} onClick={copyText} disabled={copied} className="w-[7rem]">
+    <Button variant="neutral" icon={<IconFileCopy />} onClick={() => copyText()} disabled={copied} className="w-[7rem]">
       {copied ? "Copied!" : "Copy"}
     </Button>
   );

web/libs/app-common/src/pages/AccountSettings/sections/PersonalAccessToken.tsx

@@ -1,4 +1,4 @@
-import { useCopyText } from "@humansignal/core/lib/hooks/useCopyText";
+import { useCopyText } from "@humansignal/core";
 import { Button, IconFileCopy, IconLaunch, Label, Typography } from "@humansignal/ui";
 /**
  * FIXME: This is legacy imports. We're not supposed to use such statements
@@ -44,8 +44,8 @@ export const PersonalAccessToken = () => {
   const token = useAtomValue(currentTokenAtom);
   const reset = useAtomValue(resetTokenAtom);
   const curl = useAtomValue(curlStringAtom);
-  const [copyToken, tokenCopied] = useCopyText(token);
-  const [copyCurl, curlCopied] = useCopyText(curl);
+  const [copyToken, tokenCopied] = useCopyText({ defaultText: token });
+  const [copyCurl, curlCopied] = useCopyText({ defaultText: curl });
 
   return (
     <div id="personal-access-token">
@@ -56,7 +56,7 @@ export const PersonalAccessToken = () => {
             <Input name="token" className={styles.input} readOnly value={token} />
             <Button
               leading={<IconFileCopy />}
-              onClick={copyToken}
+              onClick={() => copyToken()}
               disabled={tokenCopied}
               variant="primary"
               look="outlined"
@@ -81,7 +81,7 @@ export const PersonalAccessToken = () => {
             />
             <Button
               leading={<IconFileCopy />}
-              onClick={copyCurl}
+              onClick={() => copyCurl()}
               disabled={curlCopied}
               variant="primary"
               look="outlined"

web/libs/app-common/src/pages/AccountSettings/sections/PersonalJWTToken.tsx

@@ -5,7 +5,7 @@ import { useAtomValue } from "jotai";
 import clsx from "clsx";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { format } from "date-fns";
-import { useCopyText } from "@humansignal/core/lib/hooks/useCopyText";
+import { useCopyText } from "@humansignal/core";
 import styles from "./PersonalJWTToken.module.scss";
 import { Button } from "@humansignal/ui";
 
@@ -188,7 +188,7 @@ export function PersonalJWTToken() {
 
 function CreateTokenForm() {
   const { data, mutate: createToken } = useAtomValue(refreshTokenAtom);
-  const [copy, copied] = useCopyText(data ?? "");
+  const [copy, copied] = useCopyText({ defaultText: data ?? "" });
 
   useEffect(() => {
     createToken();
@@ -206,7 +206,7 @@ function CreateTokenForm() {
           readOnly
           value={data}
         />
-        <Button onClick={copy} disabled={copied} variant="neutral" look="outlined">
+        <Button onClick={() => copy()} disabled={copied} variant="neutral" look="outlined">
           {copied ? "Copied!" : "Copy"}
         </Button>
       </div>

web/libs/core/src/lib/hooks/useCopyText.tsx

@@ -13,5 +13,5 @@ export const useCopyText = ({ defaultText = "", timeout = 1200 }: { defaultText?
     [defaultText, timeout],
   );
 
-  return [copied, copyTextCallback] as const;
+  return [copyTextCallback, copied] as const;
 };

web/libs/datamanager/src/components/Common/Table/Table.jsx

@@ -6,7 +6,7 @@ import { Icon } from "../Icon/Icon";
 import { modal } from "../Modal/Modal";
 import { IconCode, IconGear, IconGearNewUI, IconCopyOutline } from "@humansignal/icons";
 import { AutoSizerTable, Tooltip, Button } from "@humansignal/ui";
-import { useCopyText } from "@humansignal/core/lib/hooks/useCopyText";
+import { useCopyText } from "@humansignal/core";
 import "./Table.scss";
 import { TableCheckboxCell } from "./TableCheckbox";
 import { tableCN, TableContext } from "./TableContext";
@@ -448,7 +448,7 @@ const TaskSourceView = ({ content, onTaskLoad, sdkType }) => {
     return source ? JSON.stringify(source, null, 2) : "";
   }, [source]);
 
-  const [handleCopy, copied] = useCopyText(jsonString);
+  const [handleCopy, copied] = useCopyText({ defaultText: jsonString });
 
   return (
     <div
@@ -470,7 +470,7 @@ const TaskSourceView = ({ content, onTaskLoad, sdkType }) => {
               zIndex: 10,
               color: "var(--color-neutral-content-subtle)",
             }}
-            onClick={handleCopy}
+            onClick={() => handleCopy()}
             leading={<Icon icon={IconCopyOutline} style={{ color: "var(--color-neutral-content-subtle)" }} />}
           />
         </Tooltip>

web/libs/editor/src/components/AnnotationsCarousel/AnnotationButton.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { inject, observer } from "mobx-react";
-import { useCopyText } from "@humansignal/core/lib/hooks/useCopyText";
+import { useCopyText } from "@humansignal/core";
 import { isDefined, userDisplayName } from "@humansignal/core/lib/utils/helpers";
 import { Block, cn, Elem } from "../../utils/bem";
 import {
@@ -114,7 +114,7 @@ export const AnnotationButton = observer(
           url.searchParams.delete("region");
           return url.toString();
         }, [entity.pk]);
-        const [copyLink] = useCopyText(annotationLink);
+        const [copyLink] = useCopyText({ defaultText: annotationLink });
         const toast = useToast();
         const dropdown = useDropdown();
         const clickHandler = () => {

web/libs/editor/src/components/SidePanels/Components/RegionContextMenu.tsx

@@ -1,4 +1,4 @@
-import { useCopyText } from "@humansignal/core/lib/hooks/useCopyText";
+import { useCopyText } from "@humansignal/core";
 import { IconEllipsis, IconLink } from "@humansignal/icons";
 import { Button, ToastType, useToast } from "@humansignal/ui";
 import { observer } from "mobx-react";
@@ -18,7 +18,7 @@ export const RegionContextMenu: FC<{ item: any }> = observer(({ item }: { item:
     }
     return url.toString();
   }, [item]);
-  const [copyLink] = useCopyText(regionLink);
+  const [copyLink] = useCopyText({ defaultText: regionLink });
   const toast = useToast();
 
   const onCopyLink = useCallback<MenuActionOnClick>(

web/libs/ui/src/lib/code-block/code-block.tsx

@@ -21,7 +21,7 @@ export function CodeBlock({
     negative: "bg-negative-background border-negative-border-subtle",
   };
 
-  const [isCopied, copyCode] = useCopyText();
+  const [copyCode, isCopied] = useCopyText();
 
   return (
     <div