[Integrations UI] Added configuration tab.

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>

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}`
 

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"
+        <Tab :selected="selectedTab === 'config'" icon-class="fas fa-square-check"
-             @input="selectedTab = 'conf'">
+             @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) {

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() {

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;

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