WEB: Add copy button to action tab (#299)

source/app/web/instance.mjs

@@ -130,6 +130,7 @@ export default async function({mock, nosettings} = {}) {
   app.get("/.js/prism.min.js", limiter, (req, res) => res.sendFile(`${conf.paths.node_modules}/prismjs/prism.js`))
   app.get("/.js/prism.yaml.min.js", limiter, (req, res) => res.sendFile(`${conf.paths.node_modules}/prismjs/components/prism-yaml.min.js`))
   app.get("/.js/prism.markdown.min.js", limiter, (req, res) => res.sendFile(`${conf.paths.node_modules}/prismjs/components/prism-markdown.min.js`))
+  app.get("/.js/clipboard.min.js", limiter, (req, res) => res.sendFile(`${conf.paths.node_modules}/clipboard/dist/clipboard.min.js`))
   //Meta
   app.get("/.version", limiter, (req, res) => res.status(200).send(conf.package.version))
   app.get("/.requests", limiter, (req, res) => res.status(200).json(requests))

source/app/web/statics/app.js

@@ -63,6 +63,13 @@
     components: { Prism: PrismComponent },
     //Watchers
     watch: {
+      tab: {
+        immediate: true,
+        handler(current) {
+          if (current === 'action') this.clipboard = new ClipboardJS('.copy-action')
+          else this.clipboard?.destroy()
+        },
+      },
       palette: {
         immediate: true,
         handler(current, previous) {
@@ -78,6 +85,7 @@
       mode: "metrics",
       tab: "overview",
       palette: "light",
+      clipboard: null,
       requests: { limit: 0, used: 0, remaining: 0, reset: 0 },
       cached: new Map(),
       config: Object.fromEntries(Object.entries(metadata.core.web).map(([key, { defaulted }]) => [key, defaulted])),

source/app/web/statics/index.html

@@ -154,6 +154,9 @@
               </div>
             </div>
             <div v-else-if="tab == 'action'">
+              <div>
+                <button class="copy-action" data-clipboard-target=".code">Copy Action Code</button>
+              </div>
               Create a new workflow with the following content at <a :href="repo">{{ user }}/{{ user }}</a>
               <div class="code">
                 <Prism language="yaml" :code="action"></Prism>
@@ -183,6 +186,7 @@
     <script src="/.js/faker.min.js"></script>
     <script src="/.js/vue.min.js"></script>
     <script src="/.js/vue.prism.min.js"></script>
+    <script src="/.js/clipboard.min.js"></script>
     <script src="/.js/app.placeholder.js?v=3.9"></script>
     <script src="/.js/app.js?v=3.9"></script>
   </body>