Add actions: copy to clipboard, download response file

src/components/common/AbstractCard.tsx

@@ -4,6 +4,8 @@ import { useBoolean } from "usehooks-ts";
 import {
   LinkIcon,
   CodeBracketIcon,
+  DocumentArrowDownIcon,
+  ClipboardDocumentIcon,
 } from "@heroicons/react/24/outline";
 
 type AbstractCardProps = {
@@ -28,12 +30,6 @@ const AbstractCard: FunctionComponent<AbstractCardProps> = ({
       {header != undefined || data != undefined ? (
         <div className="flex bg-zinc-700 p-2 pl-3 md:pl-5">
           <div className="grow space-x-2">{header}</div>
-          {data != undefined ? (
-            <div className="pr-1">
-              <CodeBracketIcon
-                onClick={toggleRaw}
-                className="h-6 w-6 cursor-pointer"
-              />
           {url != undefined ? (
             <div className="pr-2">
               <a href={url} target="_blank" rel="noreferrer">
@@ -41,6 +37,47 @@ const AbstractCard: FunctionComponent<AbstractCardProps> = ({
               </a>
             </div>
           ) : null}
+          {data != undefined ? (
+            <>
+              <div className="pr-2">
+                <ClipboardDocumentIcon
+                  onClick={() => {
+                    // stringify the JSON object, then begin the async clipboard write
+                    navigator.clipboard.writeText(JSON.stringify(data, null, 4)).then(() => {
+                      console.log('Copied to clipboard.');
+                    }, (err) => {
+                      if (err instanceof Error)
+                        console.error(`Failed to copy to clipboard (${err.toString()}).`);
+                      else
+                        console.error("Failed to copy to clipboard.");
+                    });
+                  }}
+                  className="h-6 w-6 cursor-pointer"
+                />
+              </div>
+              <div className="pr-2">
+                <DocumentArrowDownIcon
+                  onClick={() => {
+                    const file = new Blob([JSON.stringify(data, null, 4)], {
+                      type: "application/json",
+                    });
+
+                    const anchor = document.createElement("a");
+                    anchor.href = URL.createObjectURL(file);
+                    anchor.download = "response.json";
+                    anchor.click();
+                  }}
+                  className="h-6 w-6 cursor-pointer"
+                />
+              </div>
+              <div className="pr-1">
+                <CodeBracketIcon
+                  onClick={toggleRaw}
+                  className="h-6 w-6 cursor-pointer"
+                />
+              </div>
+            </>
+          ) : null}
         </div>
       ) : null}
       <div className="max-w-full p-2 px-4 overflow-x-auto">