From 99e98f70f4b9d33c0e41cf502672480ff9743805 Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <fabio@manganiello.tech>
Date: Mon, 16 Oct 2023 02:30:03 +0200
Subject: [PATCH] [Integrations UI] Added configuration tab.

---
 .../components/panels/Extensions/Config.vue   | 67 +++++++++++++++++++
 .../src/components/panels/Extensions/Doc.vue  |  2 +-
 .../panels/Extensions/Extension.vue           | 12 +++-
 .../components/panels/Extensions/Index.vue    |  3 +-
 .../http/webapp/src/style/themes/light.scss   |  4 ++
 .../common/reflection/_model/integration.py   |  1 +
 6 files changed, 83 insertions(+), 6 deletions(-)
 create mode 100644 platypush/backend/http/webapp/src/components/panels/Extensions/Config.vue

diff --git a/platypush/backend/http/webapp/src/components/panels/Extensions/Config.vue b/platypush/backend/http/webapp/src/components/panels/Extensions/Config.vue
new file mode 100644
index 0000000000..6275ea15dc
--- /dev/null
+++ b/platypush/backend/http/webapp/src/components/panels/Extensions/Config.vue
@@ -0,0 +1,67 @@
+<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>
+    <pre><code class="config-snippet" v-html="highlightedConfigSnippet" /></pre>
+  </div>
+</template>
+
+<script>
+import 'highlight.js/lib/common'
+import 'highlight.js/styles/stackoverflow-dark.css'
+import hljs from "highlight.js"
+import Utils from "@/Utils";
+
+export default {
+  name: "Extension",
+  mixins: [Utils],
+  props: {
+    extension: {
+      type: Object,
+      required: true,
+    },
+  },
+
+  computed: {
+    highlightedConfigSnippet() {
+      return hljs.highlight(
+        'yaml',
+        this.extension.config_snippet,
+      ).value.trim()
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.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/Doc.vue b/platypush/backend/http/webapp/src/components/panels/Extensions/Doc.vue
index dc85249304..e01e1567f0 100644
--- a/platypush/backend/http/webapp/src/components/panels/Extensions/Doc.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Extensions/Doc.vue
@@ -67,7 +67,7 @@ export default {
         return
       }
 
-      let [_, type, name] = match
+      let [type, name] = match.slice(1)
       if (type === 'backend')
         name = `backend.${name}`
 
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 8a560edb10..cb8a85717f 100644
--- a/platypush/backend/http/webapp/src/components/panels/Extensions/Extension.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Extensions/Extension.vue
@@ -12,8 +12,8 @@
           <span class="from tablet">Install</span>
         </Tab>
 
-        <Tab :selected="selectedTab === 'conf'" icon-class="fas fa-square-check"
-             @input="selectedTab = 'conf'">
+        <Tab :selected="selectedTab === 'config'" icon-class="fas fa-square-check"
+             @input="selectedTab = 'config'">
           <span class="from tablet">Configuration</span>
         </Tab>
 
@@ -26,6 +26,7 @@
 
     <div class="extension-body">
       <Doc v-if="selectedTab === 'doc'" :extension="extension" />
+      <Config v-else-if="selectedTab === 'config'" :extension="extension" />
     </div>
   </div>
 </template>
@@ -33,15 +34,18 @@
 <script>
 import Tab from "@/components/elements/Tab"
 import Tabs from "@/components/elements/Tabs"
+import Config from "./Config"
 import Doc from "./Doc"
 
 export default {
   name: "Extension",
   components: {
+    Config,
     Doc,
     Tab,
     Tabs,
   },
+
   props: {
     extension: {
       type: Object,
@@ -60,7 +64,7 @@ export default {
 <style lang="scss" scoped>
 @import "src/style/items";
 
-$header-height: 4em;
+$header-height: 3.6em;
 
 .extension {
   width: 100%;
@@ -81,6 +85,8 @@ $header-height: 4em;
 
   .extension-body {
     height: calc(100% - #{$header-height});
+    display: flex;
+    flex-direction: column;
     overflow: auto;
 
     :deep(section) {
diff --git a/platypush/backend/http/webapp/src/components/panels/Extensions/Index.vue b/platypush/backend/http/webapp/src/components/panels/Extensions/Index.vue
index 1a45eeaf04..4567601d61 100644
--- a/platypush/backend/http/webapp/src/components/panels/Extensions/Index.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Extensions/Index.vue
@@ -42,7 +42,7 @@
 import Loading from "@/components/Loading"
 import Utils from "@/Utils"
 import Extension from "./Extension"
-import { bus } from "@/bus";
+import { bus } from "@/bus"
 
 export default {
   name: "Extensions",
@@ -50,7 +50,6 @@ export default {
   components: {
     Extension,
     Loading,
-    Utils,
   },
 
   data() {
diff --git a/platypush/backend/http/webapp/src/style/themes/light.scss b/platypush/backend/http/webapp/src/style/themes/light.scss
index b7df8f1f38..4598bdce60 100644
--- a/platypush/backend/http/webapp/src/style/themes/light.scss
+++ b/platypush/backend/http/webapp/src/style/themes/light.scss
@@ -164,3 +164,7 @@ $scrollbar-thumb-bg: #a5a2a2 !default;
 
 //// Rows
 $row-shadow: 0 0 1px 0.5px #cfcfcf !default;
+
+//// Code blocks
+$code-dark-bg: #090909 !default;
+$code-dark-fg: #f0f0f0 !default;
diff --git a/platypush/common/reflection/_model/integration.py b/platypush/common/reflection/_model/integration.py
index ea127f218c..64d011600e 100644
--- a/platypush/common/reflection/_model/integration.py
+++ b/platypush/common/reflection/_model/integration.py
@@ -76,6 +76,7 @@ class Integration(Component, DocstringParser, Serializable):
                 for e in self.events
             },
             "deps": self.deps.to_dict(),
+            "config_snippet": self.config_snippet,
         }
 
     @classmethod