From 2806e943c334ec1aff4ea18bf919281b0fba598a Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <fabio@manganiello.tech>
Date: Tue, 17 Oct 2023 02:12:12 +0200
Subject: [PATCH] [Extensions UI] Added `Install` tab.

---
 .../src/components/elements/CopyButton.vue    | 49 ++++++++++++
 .../components/panels/Extensions/Config.vue   | 33 ++------
 .../panels/Extensions/Extension.vue           |  3 +
 .../components/panels/Extensions/Install.vue  | 75 +++++++++++++++++++
 .../components/panels/Extensions/common.scss  |  8 ++
 5 files changed, 142 insertions(+), 26 deletions(-)
 create mode 100644 platypush/backend/http/webapp/src/components/elements/CopyButton.vue
 create mode 100644 platypush/backend/http/webapp/src/components/panels/Extensions/Install.vue
 create mode 100644 platypush/backend/http/webapp/src/components/panels/Extensions/common.scss

diff --git a/platypush/backend/http/webapp/src/components/elements/CopyButton.vue b/platypush/backend/http/webapp/src/components/elements/CopyButton.vue
new file mode 100644
index 0000000000..f8f2609241
--- /dev/null
+++ b/platypush/backend/http/webapp/src/components/elements/CopyButton.vue
@@ -0,0 +1,49 @@
+<template>
+  <button class="copy-button"
+          ref="copyButton"
+          title="Copy to clipboard"
+          @click="copy"
+          @input="copy">
+    <i class="fas fa-clipboard" />
+  </button>
+</template>
+
+<script>
+import Utils from "@/Utils"
+
+export default {
+  name: "CopyButton",
+  emits: ['input', 'click'],
+  mixins: [Utils],
+  props: {
+    text: {
+      type: String,
+    },
+  },
+
+  methods: {
+    async copy(event) {
+      if (this.text?.length)
+        await this.copyToClipboard(this.text)
+
+      this.$emit(event.type, event)
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.copy-button {
+  position: absolute;
+  top: 0;
+  right: 0.5em;
+  margin: 0;
+  padding: 0 !important;
+  background: none;
+  color: $code-dark-fg;
+  border: none;
+  padding: 0.5em;
+  font-size: 1.5em;
+  cursor: pointer;
+}
+</style>
diff --git a/platypush/backend/http/webapp/src/components/panels/Extensions/Config.vue b/platypush/backend/http/webapp/src/components/panels/Extensions/Config.vue
index 1d37bc6637..d67b8596fc 100644
--- a/platypush/backend/http/webapp/src/components/panels/Extensions/Config.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Extensions/Config.vue
@@ -1,12 +1,6 @@
 <template>
   <div class="config-container" ref="root">
-    <button class="copy-button"
-            ref="copyButton"
-            title="Copy to clipboard"
-            :data-clipboard-text="extension.config_snippet"
-            @click="copyToClipboard(extension.config_snippet)">
-      <i class="fas fa-clipboard" />
-    </button>
+    <CopyButton :text="extension.config_snippet" />
     <pre><code class="config-snippet" v-html="highlightedConfigSnippet" /></pre>
   </div>
 </template>
@@ -15,11 +9,15 @@
 import 'highlight.js/lib/common'
 import 'highlight.js/styles/stackoverflow-dark.min.css'
 import hljs from "highlight.js"
+import CopyButton from "@/components/elements/CopyButton"
 import Utils from "@/Utils";
 
 export default {
   name: "Extension",
   mixins: [Utils],
+  components: {
+    CopyButton,
+  },
   props: {
     extension: {
       type: Object,
@@ -39,29 +37,12 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import "common.scss";
+
 .config-container {
   width: 100%;
   height: 100%;
   position: relative;
   display: flex;
-
-  .copy-button {
-    position: absolute;
-    top: 0;
-    right: 0;
-    background: none;
-    color: $code-dark-fg;
-    border: none;
-    padding: 0.5em;
-    font-size: 1.5em;
-    cursor: pointer;
-  }
-
-  pre {
-    width: 100%;
-    margin: 0;
-    background: $code-dark-bg;
-    padding: 0.5em;
-  }
 }
 </style>
diff --git a/platypush/backend/http/webapp/src/components/panels/Extensions/Extension.vue b/platypush/backend/http/webapp/src/components/panels/Extensions/Extension.vue
index cb8a85717f..2e7e1e5ac1 100644
--- a/platypush/backend/http/webapp/src/components/panels/Extensions/Extension.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Extensions/Extension.vue
@@ -27,6 +27,7 @@
     <div class="extension-body">
       <Doc v-if="selectedTab === 'doc'" :extension="extension" />
       <Config v-else-if="selectedTab === 'config'" :extension="extension" />
+      <Install v-else-if="selectedTab === 'install'" :extension="extension" />
     </div>
   </div>
 </template>
@@ -36,12 +37,14 @@ import Tab from "@/components/elements/Tab"
 import Tabs from "@/components/elements/Tabs"
 import Config from "./Config"
 import Doc from "./Doc"
+import Install from "./Install"
 
 export default {
   name: "Extension",
   components: {
     Config,
     Doc,
+    Install,
     Tab,
     Tabs,
   },
diff --git a/platypush/backend/http/webapp/src/components/panels/Extensions/Install.vue b/platypush/backend/http/webapp/src/components/panels/Extensions/Install.vue
new file mode 100644
index 0000000000..3d92de3ccb
--- /dev/null
+++ b/platypush/backend/http/webapp/src/components/panels/Extensions/Install.vue
@@ -0,0 +1,75 @@
+<template>
+  <div class="install-container">
+    <div class="install-cmd-container">
+      <CopyButton :text="installCmd" />
+      <pre><code v-html="highlightedInstallCmd" /></pre>
+    </div>
+  </div>
+</template>
+
+<script>
+import 'highlight.js/lib/common'
+import 'highlight.js/styles/stackoverflow-dark.min.css'
+import hljs from "highlight.js"
+import CopyButton from "@/components/elements/CopyButton"
+import Utils from "@/Utils"
+
+export default {
+  name: "Install",
+  mixins: [Utils],
+  components: {
+    CopyButton,
+  },
+  props: {
+    extension: {
+      type: Object,
+      required: true,
+    },
+  },
+
+  computed: {
+    installCmd() {
+      const cmd = this.extension.deps.install_cmd.join('\n').trim()
+      return cmd?.length ? cmd : null
+    },
+
+    highlightedInstallCmd() {
+      return (
+        this.installCmd ?
+        hljs.highlight(
+          'bash',
+          this.extension.deps.install_cmd
+          .map((cmd) => `$ ${cmd}`)
+          .join('\n')
+          .trim()
+        ).value :
+        '# No extra installation steps required'
+      )
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@import "common.scss";
+
+.install-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  .install-cmd-container {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+  }
+
+  pre {
+    height: 50%;
+  }
+}
+</style>
diff --git a/platypush/backend/http/webapp/src/components/panels/Extensions/common.scss b/platypush/backend/http/webapp/src/components/panels/Extensions/common.scss
new file mode 100644
index 0000000000..22073c1572
--- /dev/null
+++ b/platypush/backend/http/webapp/src/components/panels/Extensions/common.scss
@@ -0,0 +1,8 @@
+pre {
+  width: 100%;
+  margin: 0;
+  background: $code-dark-bg;
+  color: $code-dark-fg;
+  padding: 0.5em;
+  overflow: auto;
+}