Add copy to clipboard button in ShowJSON

Signed-off-by: Egor Savkin <es@m-labs.hk>

static/js/shop/ShowJSON.jsx

@@ -1,10 +1,28 @@
-import React from "react";
+import React, {useState} from "react";
 import {Modal} from "react-bootstrap";
 import {useShopStore} from "./shop_store";
 import {useClickAway} from "./options/useClickAway";
 
 // #!render_count
 import {useRenderCount} from "@uidotdev/usehooks";
+import {Validation} from "./validate";
+
+
+const copyButtonStates = {
+    [Validation.OK]: {
+        style: "btn-outline-success",
+        content: "✓ copied"
+    },
+    [Validation.Empty]: {
+        style: "btn-outline-primary",
+        content: "Copy"
+    },
+    [Validation.Invalid]: {
+        style: "btn-outline-danger",
+        content: "Error"
+    },
+};
+
 
 export function ShowJSON() {
     // #!render_count
@@ -15,6 +33,8 @@ export function ShowJSON() {
     const closeDescription = useShopStore((state) => state.closeDescription);
     const showDescription = useShopStore((state) => state.showDescription);
 
+    const [copiedState, setCopiedState] = useState(Validation.Empty);
+
     // #!render_count
     console.log("ShowJSON renders: ", renderCount)
 
@@ -24,6 +44,24 @@ export function ShowJSON() {
         }
     );
 
+    const copyToClipboard = (text) => {
+        try {
+            navigator.clipboard.writeText(text)
+                .then((_value) => { // success
+                    setCopiedState(Validation.OK);
+                    setTimeout(() => {setCopiedState(Validation.Empty)}, 1500);
+                }, (reason) => { // error
+                    setCopiedState(Validation.Invalid);
+                    setTimeout(() => {setCopiedState(Validation.Empty)}, 3000);
+                    console.warn("Copy to clipboard rejected: ", reason)
+                });
+        } catch (e) {
+            setCopiedState(Validation.Invalid);
+            setTimeout(() => {setCopiedState(Validation.Empty)}, 3000);
+            console.warn("Copy to clipboard error: ", e)
+        }
+    };
+
     return (<>
         <input
             className="btn btn-outline-primary w-100 m-0 mb-2 mb-sm-0 me-sm-2"
@@ -41,6 +79,12 @@ export function ShowJSON() {
                         placeholder="There should be description of the crate"/>
 
                 <div className="d-flex flex-column flex-sm-row justify-content-end">
+                    <a type="button"
+                       onClick={() => {copyToClipboard(description)}}
+                       className={"btn btn-sm m-0 mb-1 mt-2 mb-sm-0 me-sm-2 " + copyButtonStates[copiedState].style}
+                    >
+                        { copyButtonStates[copiedState].content }
+                    </a>
                     <a type="button" onClick={closeDescription}
                        className="btn btn-sm btn-outline-primary m-0 mb-1 mt-2 mb-sm-0 me-sm-2">Close</a>
                 </div>