From 6289eb47ab18e1d64927db5f9f83b1be64448158 Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <fabio@manganiello.tech>
Date: Tue, 17 Oct 2023 23:16:10 +0200
Subject: [PATCH] [Extensions UI] Added `Actions` and `Events` sections to
 `Doc`.

---
 .../src/components/panels/Extensions/Doc.vue  | 81 +++++++++++++++++--
 .../panels/Extensions/Extension.vue           |  5 --
 2 files changed, 76 insertions(+), 10 deletions(-)

diff --git a/platypush/backend/http/webapp/src/components/panels/Extensions/Doc.vue b/platypush/backend/http/webapp/src/components/panels/Extensions/Doc.vue
index e01e1567f0..fc86c506eb 100644
--- a/platypush/backend/http/webapp/src/components/panels/Extensions/Doc.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Extensions/Doc.vue
@@ -9,7 +9,39 @@
       </h2>
     </header>
 
-    <article v-html="doc" v-if="doc" @click="onDocClick" />
+    <article v-if="doc" @click="onDocClick">
+      <div class="doc-content" v-html="doc" />
+
+      <div class="actions" v-if="Object.keys(extension.actions || {}).length > 0">
+        <h3>
+          <i class="icon fas fa-play" /> &nbsp;
+          Actions
+        </h3>
+
+        <ul>
+          <li class="action" v-for="actionName in actionNames" :key="actionName">
+            <a :href="extension.actions[actionName].doc_url" target="_blank">
+              <pre>{{ extension.name }}.{{ actionName }}</pre>
+            </a>
+          </li>
+        </ul>
+      </div>
+
+      <div class="events" v-if="Object.keys(extension.events || {}).length > 0">
+        <h3>
+          <i class="icon fas fa-flag" /> &nbsp;
+          Events
+        </h3>
+
+        <ul>
+          <li class="event" v-for="eventName in eventNames" :key="eventName">
+            <a :href="extension.events[eventName].doc_url" target="_blank">
+              <pre>{{ eventName }}</pre>
+            </a>
+          </li>
+        </ul>
+      </div>
+    </article>
   </section>
 </template>
 
@@ -33,6 +65,16 @@ export default {
     }
   },
 
+  computed: {
+    actionNames() {
+      return Object.keys(this.extension.actions).sort()
+    },
+
+    eventNames() {
+      return Object.keys(this.extension.events).sort()
+    },
+  },
+
   methods: {
     async parseDoc() {
       if (!this.extension.doc?.length)
@@ -52,19 +94,19 @@ export default {
     // in-app connections, or opens them in a new tab if they
     // don't point to an internal documentation page.
     onDocClick(event) {
-      if (!event.target.tagName.toLowerCase() === 'a')
-        return
+      if (event.target.tagName.toLowerCase() !== 'a')
+        return true
 
       event.preventDefault()
       const href = event.target.getAttribute('href')
       if (!href)
-        return
+        return true
 
       const match = href.match(/^https:\/\/docs\.platypush\.tech\/platypush\/(plugins|backend)\/([\w.]+)\.html#?.*$/)
       if (!match) {
         event.preventDefault()
         window.open(href, '_blank')
-        return
+        return true
       }
 
       let [type, name] = match.slice(1)
@@ -114,5 +156,34 @@ section {
       }
     }
   }
+
+  .actions, .events {
+    padding: 0.5em;
+    overflow: auto;
+
+    h3 {
+      width: calc(100% - 1em);
+      margin: 0 -0.5em;
+      padding: 0 0.5em;
+      font-size: 1.25em;
+      opacity: 0.85;
+      border-bottom: 1px solid $border-color-1;
+    }
+
+    ul {
+      display: flex;
+      flex-direction: column;
+      margin: 0;
+
+      li {
+        margin: 0.5em 0;
+        list-style: none;
+      }
+    }
+
+    pre {
+      margin: 0;
+    }
+  }
 }
 </style>
diff --git a/platypush/backend/http/webapp/src/components/panels/Extensions/Extension.vue b/platypush/backend/http/webapp/src/components/panels/Extensions/Extension.vue
index 49c960e91a..f27181efa8 100644
--- a/platypush/backend/http/webapp/src/components/panels/Extensions/Extension.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Extensions/Extension.vue
@@ -16,11 +16,6 @@
              @input="selectedTab = 'config'">
           <span class="from tablet">Configuration</span>
         </Tab>
-
-        <Tab :selected="selectedTab === 'actions'" icon-class="fas fa-play"
-             @input="selectedTab = 'actions'">
-          <span class="from tablet">Actions</span>
-        </Tab>
       </Tabs>
     </header>