From 4da3c13976b7b511a39117b3677eb24a7be0f261 Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <fabio@manganiello.tech>
Date: Sat, 23 Sep 2023 23:28:32 +0200
Subject: [PATCH] First WIP commit for the new Integrations panel.

---
 .../src/components/panels/Settings/Index.vue  |  4 +-
 .../panels/Settings/Integrations.vue          | 62 +++++++++++++++++++
 .../components/panels/Settings/sections.json  |  7 +++
 3 files changed, 72 insertions(+), 1 deletion(-)
 create mode 100644 platypush/backend/http/webapp/src/components/panels/Settings/Integrations.vue

diff --git a/platypush/backend/http/webapp/src/components/panels/Settings/Index.vue b/platypush/backend/http/webapp/src/components/panels/Settings/Index.vue
index baabc173a..521689ad6 100644
--- a/platypush/backend/http/webapp/src/components/panels/Settings/Index.vue
+++ b/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: {
diff --git a/platypush/backend/http/webapp/src/components/panels/Settings/Integrations.vue b/platypush/backend/http/webapp/src/components/panels/Settings/Integrations.vue
new file mode 100644
index 000000000..52676e038
--- /dev/null
+++ b/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>
diff --git a/platypush/backend/http/webapp/src/components/panels/Settings/sections.json b/platypush/backend/http/webapp/src/components/panels/Settings/sections.json
index fc6adc452..7f8dfe768 100644
--- a/platypush/backend/http/webapp/src/components/panels/Settings/sections.json
+++ b/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"
+    }
   }
 }