improvement(TestRunInfo.svelte): Add popup hints for copy buttons

This commit adds success indicators when user does copy-to-clipboard actions, making it less confusing. Fixes scylladb#431
k0machi · Dec 19, 2024 · b4c3578 · b4c3578
1 parent 00074a8
commit b4c3578
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 0 deletions.
diff --git a/frontend/TestRun/IssueTemplate.svelte b/frontend/TestRun/IssueTemplate.svelte
@@ -9,6 +9,7 @@
         getOperatorPackage, getOperatorHelmPackage, getOperatorHelmRepoPackage,
     } from "../Common/RunUtils";
     import { markdownRendererOptions } from "../markdownOptions";
+    import { sendMessage } from "../Stores/AlertStore";
     let renderedElement;
     let templateElement;
     let issueTemplateText = "";
@@ -21,6 +22,7 @@
 
     const copyTemplateToClipboard = function () {
         navigator.clipboard.writeText(templateElement.innerText);
+        sendMessage("success", "Issue template has been copied to your clipboard");
     };
 
     let scyllaServerPackage = getScyllaPackage(test_run.packages);

diff --git a/frontend/TestRun/ResourcesInfo.svelte b/frontend/TestRun/ResourcesInfo.svelte
@@ -9,6 +9,7 @@
         faCopy,
         faPlay,
     } from "@fortawesome/free-solid-svg-icons";
+    import { sendMessage } from "../Stores/AlertStore";
     let sortHeaders = {
         creationTime: ["instance_info", "creation_time"],
         terminationTime: ["instance_info", "termination_time"],
@@ -88,6 +89,7 @@
                 navigator.clipboard.writeText(
                     `${regions} hydra clean-resources --backend ${backend} --test-id ${run_id}`
                 );
+                sendMessage("success", `\`${regions} hydra clean-resources --backend ${backend} --test-id ${run_id}\` has been copied to your clipboard`);
             }}>
             <Fa icon={faCopy} /> Hydra Clean Resources
         </button>

diff --git a/frontend/TestRun/StructuredEvent.svelte b/frontend/TestRun/StructuredEvent.svelte
@@ -1,6 +1,7 @@
 <script>
     import { faCopy, faDotCircle } from "@fortawesome/free-solid-svg-icons";
     import Fa from "svelte-fa";
+    import { sendMessage } from "../Stores/AlertStore";
 
 
     export let event;
@@ -38,6 +39,7 @@
                 class="btn btn-light"
                 on:click={() => {
                     navigator.clipboard.writeText(event.eventText);
+                    sendMessage("success", "Event text has been copied to your clipboard");
                 }}
             >
                 <Fa icon={faCopy} />

diff --git a/frontend/TestRun/TestRunInfo.svelte b/frontend/TestRun/TestRunInfo.svelte
@@ -15,6 +15,7 @@
     import JenkinsBuildModal from "./Jenkins/JenkinsBuildModal.svelte";
     import JenkinsCloneModal from "./Jenkins/JenkinsCloneModal.svelte";
     import { createEventDispatcher } from "svelte";
+    import { sendMessage } from "../Stores/AlertStore";
     export let test_run = {};
     export let release;
     export let group;
@@ -286,6 +287,7 @@
                                 navigator.clipboard.writeText(
                                     cmd_hydraInvestigateShowMonitor
                                 );
+                                sendMessage("success", `\`${cmd_hydraInvestigateShowMonitor}\` has been copied to your clipboard`);
                             }}><Fa icon={faCopy} /> Hydra Show Monitor</button
                         >
                         <button
@@ -295,6 +297,7 @@
                                 navigator.clipboard.writeText(
                                     cmd_hydraInvestigateShowLogs
                                 );
+                                sendMessage("success", `\`${cmd_hydraInvestigateShowLogs}\` has been copied to your clipboard`);
                             }}><Fa icon={faCopy} /> Hydra Show Logs</button
                         >
                     {/if}