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

.github/preview.mjs

@@ -68,6 +68,7 @@
   fs.copyFile(paths.join(__node_modules, "prismjs/prism.js"), paths.join(__preview_js, "prism.min.js"))
   fs.copyFile(paths.join(__node_modules, "prismjs/components/prism-yaml.min.js"), paths.join(__preview_js, "prism.yaml.min.js"))
   fs.copyFile(paths.join(__node_modules, "prismjs/components/prism-markdown.min.js"), paths.join(__preview_js, "prism.markdown.min.js"))
+  fs.copyFile(paths.join(__node_modules, "clipboard/dist/clipboard.min.js"), paths.join(__preview_js, "clipboard.min.js"))
 //Meta
   fs.writeFile(paths.join(__preview, ".version"), JSON.stringify(`${conf.package.version}-preview`))
   fs.writeFile(paths.join(__preview, ".hosted"), JSON.stringify({by:"metrics", link:"https://github.com/lowlighter/metrics"}))

package-lock.json

@@ -16,6 +16,7 @@
         "@octokit/rest": "^18.5.3",
         "@primer/css": "^17.0.1",
         "axios": "^0.21.1",
+        "clipboard": "^2.0.8",
         "compression": "^1.7.4",
         "ejs": "^3.1.6",
         "express": "^4.17.1",
@@ -3251,10 +3252,9 @@
       }
     },
     "node_modules/clipboard": {
-      "version": "2.0.6",
+      "version": "2.0.8",
-      "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.6.tgz",
+      "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.8.tgz",
-      "integrity": "sha512-g5zbiixBRk/wyKakSwCKd7vQXDjFnAMGHoEyBogG/bw9kTD9GvdAvaoRR1ALcEzt3pVKxZR0pViekPMIS0QyGg==",
+      "integrity": "sha512-Y6WO0unAIQp5bLmk1zdThRhgJt/x3ks6f30s3oE3H1mgIEU33XyQjEf8gsf6DxC7NPX8Y1SsNWjUjL/ywLnnbQ==",
-      "optional": true,
       "dependencies": {
         "good-listener": "^1.2.2",
         "select": "^1.1.2",
@@ -3752,8 +3752,7 @@
     "node_modules/delegate": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
-      "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==",
+      "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw=="
-      "optional": true
     },
     "node_modules/delegates": {
       "version": "1.0.0",
@@ -5328,7 +5327,6 @@
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
       "integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=",
-      "optional": true,
       "dependencies": {
         "delegate": "^3.1.2"
       }
@@ -10304,8 +10302,7 @@
     "node_modules/select": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
-      "integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=",
+      "integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0="
-      "optional": true
     },
     "node_modules/semver": {
       "version": "7.3.4",
@@ -11421,8 +11418,7 @@
     "node_modules/tiny-emitter": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
-      "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==",
+      "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="
-      "optional": true
     },
     "node_modules/tinycolor2": {
       "version": "1.4.2",
@@ -15170,10 +15166,9 @@
       "dev": true
     },
     "clipboard": {
-      "version": "2.0.6",
+      "version": "2.0.8",
-      "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.6.tgz",
+      "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.8.tgz",
-      "integrity": "sha512-g5zbiixBRk/wyKakSwCKd7vQXDjFnAMGHoEyBogG/bw9kTD9GvdAvaoRR1ALcEzt3pVKxZR0pViekPMIS0QyGg==",
+      "integrity": "sha512-Y6WO0unAIQp5bLmk1zdThRhgJt/x3ks6f30s3oE3H1mgIEU33XyQjEf8gsf6DxC7NPX8Y1SsNWjUjL/ywLnnbQ==",
-      "optional": true,
       "requires": {
         "good-listener": "^1.2.2",
         "select": "^1.1.2",
@@ -15577,8 +15572,7 @@
     "delegate": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
-      "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==",
+      "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw=="
-      "optional": true
     },
     "delegates": {
       "version": "1.0.0",
@@ -16830,7 +16824,6 @@
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
       "integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=",
-      "optional": true,
       "requires": {
         "delegate": "^3.1.2"
       }
@@ -20887,8 +20880,7 @@
     "select": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
-      "integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=",
+      "integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0="
-      "optional": true
     },
     "semver": {
       "version": "7.3.4",
@@ -21796,8 +21788,7 @@
     "tiny-emitter": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
-      "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==",
+      "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="
-      "optional": true
     },
     "tinycolor2": {
       "version": "1.4.2",

package.json

@@ -31,6 +31,7 @@
     "@octokit/rest": "^18.5.3",
     "@primer/css": "^17.0.1",
     "axios": "^0.21.1",
+    "clipboard": "^2.0.8",
     "compression": "^1.7.4",
     "ejs": "^3.1.6",
     "express": "^4.17.1",

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>