First WIP commit for the new Integrations panel.

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

@@ -5,6 +5,7 @@
              v-if="selectedPanel === 'users' && currentUser" />
       <Token :session-token="sessionToken" :current-user="currentUser"
              v-else-if="selectedPanel === 'tokens' && currentUser" />
+      <Integrations v-else-if="selectedPanel === 'integrations'" />
     </main>
   </div>
 </template>
@@ -12,11 +13,12 @@
 <script>
 import Token from "@/components/panels/Settings/Token";
 import Users from "@/components/panels/Settings/Users";
+import Integrations from "@/components/panels/Settings/Integrations";
 import Utils from "@/Utils";
 
 export default {
   name: "Settings",
-  components: {Users, Token},
+  components: {Users, Token, Integrations},
   mixins: [Utils],
 
   props: {

platypush/backend/http/webapp/src/components/panels/Settings/Integrations.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="integrations-container">
+    <Loading v-if="loading" />
+
+    <div class="body">
+      <!-- TODO -->
+    </div>
+  </div>
+</template>
+
+<script>
+import Loading from "@/components/Loading";
+import Utils from "@/Utils";
+
+export default {
+  name: "Integrations",
+  components: {Loading},
+  mixins: [Utils],
+
+  data() {
+    return {
+      loading: false,
+      plugins: {},
+      backends: {},
+    }
+  },
+
+  methods: {
+    async loadIntegrations() {
+      this.loading = true
+
+      try {
+          [this.plugins, this.backends] =
+            await Promise.all([
+              this.request('inspect.get_all_plugins'),
+              this.request('inspect.get_all_backends'),
+            ])
+      } finally {
+        this.loading = false
+      }
+    },
+  },
+
+  mounted() {
+    this.loadIntegrations()
+  }
+}
+</script>
+
+<style lang="scss">
+.integrations-container {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  margin-top: .15em;
+
+  .body {
+    background: $background-color;
+    display: flex;
+  }
+}
+</style>

platypush/backend/http/webapp/src/components/panels/Settings/sections.json

@@ -11,5 +11,12 @@
     "icon": {
       "class": "fas fa-key"
     }
+  },
+
+  "integrations": {
+    "name": "Integrations",
+    "icon": {
+      "class": "fas fa-puzzle-piece"
+    }
   }
 }