From a3643c285e06781bd5f32f6e1a71dede2c4ce707 Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <fabio@manganiello.tech>
Date: Sat, 14 Oct 2023 14:01:51 +0200
Subject: [PATCH] [UI] A friendlier representation of an integration's name.

---
 platypush/backend/http/webapp/src/Utils.vue    |  2 ++
 .../backend/http/webapp/src/components/Nav.vue | 17 +++++++++++++----
 .../src/components/panels/Entities/Index.vue   |  2 +-
 .../http/webapp/src/utils/Integrations.vue     | 18 ++++++++++++++++++
 4 files changed, 34 insertions(+), 5 deletions(-)
 create mode 100644 platypush/backend/http/webapp/src/utils/Integrations.vue

diff --git a/platypush/backend/http/webapp/src/Utils.vue b/platypush/backend/http/webapp/src/Utils.vue
index 95d637c25..bafc3aa87 100644
--- a/platypush/backend/http/webapp/src/Utils.vue
+++ b/platypush/backend/http/webapp/src/Utils.vue
@@ -4,6 +4,7 @@ import Clipboard from "@/utils/Clipboard";
 import Cookies from "@/utils/Cookies";
 import DateTime from "@/utils/DateTime";
 import Events from "@/utils/Events";
+import Integrations from "@/utils/Integrations";
 import Notification from "@/utils/Notification";
 import Screen from "@/utils/Screen";
 import Text from "@/utils/Text";
@@ -18,6 +19,7 @@ export default {
     DateTime,
     Events,
     Notification,
+    Integrations,
     Screen,
     Text,
     Types,
diff --git a/platypush/backend/http/webapp/src/components/Nav.vue b/platypush/backend/http/webapp/src/components/Nav.vue
index 41e76adfe..b41871434 100644
--- a/platypush/backend/http/webapp/src/components/Nav.vue
+++ b/platypush/backend/http/webapp/src/components/Nav.vue
@@ -36,7 +36,7 @@
           <img :src="icons[name].imgUrl" v-else-if="icons[name]?.imgUrl"  alt="name"/>
           <i class="fas fa-puzzle-piece" v-else />
         </span>
-        <span class="name" v-if="!collapsed" v-text="name == 'entities' ? 'Home' : name" />
+        <span class="name" v-if="!collapsed" v-text="displayName(name)" />
         </a>
       </li>
     </ul>
@@ -112,6 +112,15 @@ export default {
       this.$emit('select', name)
       this.collapsed = this.isMobile() ? true : this.collapsedDefault
     },
+
+    displayName(name) {
+      if (name === 'entities')
+        return 'Home'
+      if (name === 'execute')
+        return 'Execute'
+
+      return name
+    },
   },
 
   data() {
@@ -256,9 +265,9 @@ nav {
       .icon {
         margin-right: 0;
 
-        & img {
-          width: 1.25em;
-          height: 1.25em;
+        & img, i {
+          width: 1.5em;
+          height: 1.5em;
         }
       }
     }
diff --git a/platypush/backend/http/webapp/src/components/panels/Entities/Index.vue b/platypush/backend/http/webapp/src/components/panels/Entities/Index.vue
index 048f0c975..0f7648b9a 100644
--- a/platypush/backend/http/webapp/src/components/panels/Entities/Index.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Entities/Index.vue
@@ -39,7 +39,7 @@
               </span>
 
               <span class="section center">
-                <div class="title" v-text="group.name" />
+                <div class="title" v-text="pluginDisplayName(group.name)" />
               </span>
 
               <span class="section right">
diff --git a/platypush/backend/http/webapp/src/utils/Integrations.vue b/platypush/backend/http/webapp/src/utils/Integrations.vue
new file mode 100644
index 000000000..0a55f9361
--- /dev/null
+++ b/platypush/backend/http/webapp/src/utils/Integrations.vue
@@ -0,0 +1,18 @@
+<script>
+export default {
+  name: "Integrations",
+  methods: {
+    pluginDisplayName(name) {
+      const words = name.split('.')
+      words.forEach((word, idx) => {
+        words[idx] = word.charAt(0).toUpperCase() + word.slice(1)
+      })
+
+      if (words.length > 1)
+        words[0] = `[${words[0]}]`
+
+      return words.join(' ')
+    },
+  }
+}
+</script>