[Extensions UI] Added current config to extension panel.

If an extension is configured and enabled, then the UI will now include
a tick next to its name and the currently loaded configuration in the
`Configuration` tab.

platypush/backend/http/webapp/src/components/panels/Extensions/Config.vue

@@ -1,5 +1,11 @@
 <template>
-  <div class="config-container" ref="root">
+  <div class="config-container current"
+       v-if="highlightedCurrentConfig">
+    <CopyButton :text="curYamlConfig" />
+    <pre><code class="config-snippet" v-html="highlightedCurrentConfig" /></pre>
+  </div>
+
+  <div class="config-container snippet" :class="{'fullscreen': !highlightedCurrentConfig}">
     <CopyButton :text="extension.config_snippet" />
     <pre><code class="config-snippet" v-html="highlightedConfigSnippet" /></pre>
   </div>
@@ -25,19 +31,63 @@ export default {
       required: true,
     },
 
+    config: {
+      type: Object,
+    },
+
     configFile: {
       type: String,
     },
   },
 
+  data() {
+    return {
+      curYamlConfig: null,
+    }
+  },
+
   computed: {
     highlightedConfigSnippet() {
       return hljs.highlight(
         'yaml',
-        `# Add this configuration template to ${this.configFile}\n` +
+        `# Configuration template. You can add it to ${this.configFile}\n` +
         this.extension.config_snippet,
       ).value.trim()
     },
+
+    highlightedCurrentConfig() {
+      if (!this.curYamlConfig) {
+        return null
+      }
+
+      return hljs.highlight(
+        'yaml',
+        '# Currently loaded configuration\n' +
+        this.curYamlConfig
+      ).value.trim()
+    },
+  },
+
+  methods: {
+    async loadCurrentConfig() {
+      if (!this.config) {
+        this.curYamlConfig = null
+        return
+      }
+
+      this.curYamlConfig = await this.request(
+        'utils.to_yaml', {
+          obj: {
+            [this.extension.name]: this.config,
+          }
+        }
+      )
+    },
+  },
+
+  mounted() {
+    this.loadCurrentConfig()
+    this.$watch('config', this.loadCurrentConfig)
   },
 }
 </script>
@@ -47,8 +97,31 @@ export default {
 
 .config-container {
   width: 100%;
-  height: 100%;
+  max-height: 100%;
   position: relative;
   display: flex;
+  flex-grow: 1;
+  overflow: auto;
+
+  pre {
+    border-radius: 1em;
+  }
+
+  &.current {
+    height: 34%;
+    margin-bottom: 1.5em;
+  }
+
+  &.snippet {
+    height: 66%;
+  }
+
+  &.fullscreen {
+    height: 100%;
+
+    pre {
+      border-radius: 0;
+    }
+  }
 }
 </style>

platypush/backend/http/webapp/src/components/panels/Extensions/Extension.vue

@@ -23,6 +23,7 @@
       <Doc v-if="selectedTab === 'doc'" :extension="extension" />
       <Config v-else-if="selectedTab === 'config'"
               :extension="extension"
+              :config="config"
               :config-file="configFile" />
       <Install v-else-if="selectedTab === 'install'" :extension="extension" />
     </div>
@@ -52,6 +53,10 @@ export default {
       required: true,
     },
 
+    config: {
+      type: Object,
+    },
+
     configFile: {
       type: String,
     },

platypush/backend/http/webapp/src/components/panels/Extensions/Index.vue

@@ -16,15 +16,20 @@
       <div class="items">
         <div class="extension-container" v-for="name in extensionNames" :key="name">
           <div class="extension" v-if="matchesFilter(name)">
-            <div class="item name"
+            <div class="item"
                  :class="{selected: name === selectedExtension}"
                  :data-name="name"
-                 @click="onInput(name, false)"
-                 v-text="extensions[name].name" />
+                 @click="onClick(name, false)">
+              <span class="name">{{ extensions[name].name }}</span>
+              <span class="enabled icon" title="Enabled" v-if="enabledExtensions[name]">
+                <i class="enabled icon fas fa-circle-check" v-if="enabledExtensions[name]" />
+              </span>
+            </div>
 
             <div class="extension-body-container until tablet"
                  v-if="selectedExtension && name === selectedExtension">
               <Extension :extension="extensions[selectedExtension]"
+                         :config="enabledExtensions[selectedExtension]"
                          :config-file="configFile" />
             </div>
           </div>
@@ -34,6 +39,7 @@
       <div class="extension-body-container from desktop"
            v-if="selectedExtension">
         <Extension :extension="extensions[selectedExtension]"
+                   :config="enabledExtensions[selectedExtension]"
                    :config-file="configFile" />
       </div>
     </main>
@@ -59,9 +65,12 @@ export default {
       loading: false,
       plugins: {},
       backends: {},
+      enabledPlugins: {},
+      enabledBackends: {},
       filter: '',
       selectedExtension: null,
       configFile: null,
+      config: {},
     }
   },
 
@@ -87,12 +96,30 @@ export default {
       return extensions
     },
 
+    enabledExtensions() {
+      return [this.enabledPlugins, this.enabledBackends].reduce((acc, extensions) => {
+        Object.entries(extensions).forEach(([name, config]) => {
+          acc[name] = config
+        })
+
+        return acc
+      }, {})
+    },
+
     extensionNames() {
       return Object.keys(this.extensions).sort()
     },
   },
 
   methods: {
+    onClick(input, setFilter = true, setUrlArgs = true) {
+      if (this.selectedExtension === input) {
+        this.selectedExtension = null
+      } else {
+        this.onInput(input, setFilter, setUrlArgs)
+      }
+    },
+
     onInput(input, setFilter = true, setUrlArgs = true) {
       if (setFilter) {
         this.filter = input
@@ -124,17 +151,38 @@ export default {
 
     async loadExtensions() {
       this.loading = true
+      let [enabledPlugins, enabledBackends] = [[], []]
 
       try {
-          [this.plugins, this.backends] =
+          [
+            this.plugins,
+            this.backends,
+            enabledPlugins,
+            enabledBackends,
+            this.config,
+          ] =
             await Promise.all([
               this.request('inspect.get_all_plugins'),
               this.request('inspect.get_all_backends'),
+              this.request('inspect.get_enabled_plugins'),
+              this.request('inspect.get_enabled_backends'),
+              this.request('inspect.get_config'),
             ])
       } finally {
         this.loading = false
       }
 
+      this.enabledPlugins = enabledPlugins.reduce((acc, name) => {
+        acc[name] = this.config[name] || {}
+        return acc
+      }, {})
+
+      this.enabledBackends = enabledBackends.reduce((acc, name) => {
+        name = `backend.${name}`
+        acc[name] = this.config[name] || {}
+        return acc
+      }, {})
+
       this.loadExtensionFromUrl()
       this.$watch('$route.hash', () => this.loadExtensionFromUrl())
     },
@@ -206,8 +254,18 @@ $header-height: 3.25em;
       display: flex;
       flex-direction: column;
 
-      .name {
+      .item {
+        width: 100%;
+        display: flex;
         padding: 1em;
+        position: relative;
+
+        .icon {
+          width: 2.5em;
+          position: absolute;
+          right: -1em;
+          top: 0.65em;
+        }
 
         &.selected {
           font-weight: bold;