[Execute UI]

- If an action is passed over the URL, then initialize the UI with it.

- Added link from the actions back to their plugins.

platypush/backend/http/webapp/src/components/panels/Execute/ActionDoc.vue

@@ -5,7 +5,12 @@
         <i class="fas fa-book" /> &nbsp;
         <a :href="action?.doc_url">Action documentation</a>
       </div>
+
       <div class="buttons" v-if="action?.name">
+        <button type="button" title="Go to extension" v-if="pluginName?.length" @click="onExtClick">
+          <i class="fas fa-puzzle-piece" />
+        </button>
+
         <button type="button" title="cURL command" v-if="curlSnippet?.length" @click="$emit('curl-modal')">
           <i class="fas fa-terminal" />
         </button>
@@ -31,10 +36,39 @@ export default {
     doc: String,
     curlSnippet: String,
     loading: Boolean,
-  }
+  },
+
+  computed: {
+    pluginName() {
+      const tokens = (this.action?.name || '').split('.')
+      return tokens.length > 1 ? tokens.slice(0, -1).join('.') : null
+    },
+  },
+
+  methods: {
+    onExtClick() {
+      window.location.href = `/#extensions?extension=${this.pluginName}`
+    },
+  },
 }
 </script>
 
 <style lang="scss" scoped>
 @import "common";
+
+.doc-container {
+  .buttons {
+    margin-right: 1.25em;
+
+    button {
+      i {
+        padding: 0 0.75em;
+      }
+
+      &:hover {
+        background-color: $hover-bg;
+      }
+    }
+  }
+}
 </style>

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

@@ -193,7 +193,7 @@ export default {
           return args
         }, {}),
 
-        ...this.action.extraArgs.reduce((args, arg) => {
+        ...(this.action.extraArgs || []).reduce((args, arg) => {
           let value = arg.value
           try {
             value = JSON.parse(value)
@@ -288,9 +288,19 @@ export default {
           this.actions[action.name] = action
         }
       }
+
+      // If an action has been passed on the URL, set it
+      const args = this.getUrlArgs()
+      const actionName = args?.action
+      if (actionName?.length && actionName in this.actions && actionName !== this.action.name) {
+        this.updateAction(actionName)
+      }
     },
 
     async updateAction(actionName) {
+      if (actionName === this.action.name)
+        return
+
       this.action.name = actionName
       if (!(this.action.name in this.actions)) {
         this.selectedDoc = undefined
@@ -324,9 +334,19 @@ export default {
 
       if (!this.actionDocsCache[this.action.name])
         this.actionDocsCache[this.action.name] = {}
-      this.actionDocsCache[this.action.name].html = this.selectedDoc
 
-      this.$el.querySelector('.action-arg-value')?.focus()
+      this.actionDocsCache[this.action.name].html = this.selectedDoc
+      this.setUrlArgs({action: this.action.name})
+
+      const firstArg = this.$el.querySelector('.action-arg-value')
+      if (firstArg) {
+        firstArg.focus()
+      } else {
+        this.$nextTick(() => {
+          this.actionInput.focus()
+        })
+      }
+
       this.response = undefined
       this.error = undefined
     },