Support for editing actions and scripts

src/options/App.vue

@@ -5,8 +5,8 @@
     <div class="body">
       <NewHost @add="addHost" v-if="selectedTab === 'add'" />
       <Config v-else-if="selectedTab === 'config'" @reload="reload" />
-      <LocalCommands :host="selectedHost" v-else-if="selectedHost && selectedHostOption === 'localProc'" />
+      <LocalCommands :host="selectedHost" v-else-if="selectedHost && selectedHostOption === 'localProc'" :bus="bus" />
-      <Run :host="hosts[selectedHost]" v-else-if="selectedHost && selectedHostOption === 'run'" />
+      <Run :host="hosts[selectedHost]" v-else-if="selectedHost && selectedHostOption === 'run'" :selectedAction="selectedAction" :selectedScript="selectedScript" />
       <EditHost :host="hosts[selectedHost]" @save="editHost" @remove="removeHost" v-else-if="selectedHost" />
       <div class="none" v-else>Select an option from the menu</div>
     </div>
@@ -14,6 +14,7 @@
 </template>
 
 <script>
+import Vue from 'vue';
 import mixins from '../utils';
 import Menu from './Menu';
 import NewHost from './NewHost';
@@ -36,18 +37,23 @@ export default {
 
   data() {
     return {
+      bus: new Vue({}),
       hosts: {},
       selectedTab: null,
       selectedHost: null,
       selectedHostOption: null,
+      selectedAction: null,
+      selectedScript: null,
     };
   },
 
   methods: {
-    select(tab, host, hostOption) {
+    select(tab, host, hostOption, action, script) {
       this.selectedTab = tab;
       this.selectedHost = host;
       this.selectedHostOption = hostOption;
+      this.selectedAction = action;
+      this.selectedScript = script;
     },
 
     async reload() {
@@ -119,10 +125,23 @@ export default {
         this.loading = false;
       }
     },
+
+    initListeners() {
+      const self = this;
+
+      this.bus.$on('edit-action', action => {
+        self.select('host', this.selectedHost, 'run', action, null);
+      });
+
+      this.bus.$on('edit-script', script => {
+        self.select('host', this.selectedHost, 'run', null, script);
+      });
+    },
   },
 
   created() {
     this.reload();
+    this.initListeners();
   },
 };
 </script>

src/options/LocalCommands.vue

@@ -33,6 +33,9 @@
                   <button type="button" class="run" :disabled="loading" @click.stop="action.type === 'request' ? runAction() : _runScript()" v-if="selectedAction === name">
                     <i class="fas fa-play" />
                   </button>
+                  <button type="button" class="edit" :disabled="loading" @click.stop="action.type === 'request' ? editAction() : editScript()" v-if="selectedAction === name">
+                    <i class="fas fa-pen" />
+                  </button>
                   <button type="button" class="remove" :disabled="loading" @click.stop="action.type === 'request' ? removeAction() : removeScript()" v-if="selectedAction === name">
                     <i class="fas fa-trash" />
                   </button>
@@ -88,6 +91,7 @@ export default {
   components: { PrismEditor },
   props: {
     host: String,
+    bus: Object,
   },
 
   data() {
@@ -162,6 +166,14 @@ export default {
       this.hosts = await this.getHosts();
     },
 
+    editAction() {
+      this.bus.$emit('edit-action', this.actions_[this.selectedAction]);
+    },
+
+    editScript() {
+      this.bus.$emit('edit-script', this.scripts[this.selectedAction]);
+    },
+
     async removeAction() {
       if (!this.selectedAction || !(this.selectedAction in this.actions_) || !confirm('Are you sure that you want to remove this action from this device?')) {
         return;
@@ -285,6 +297,7 @@ form {
     }
 
     .icon {
+      width: 1em;
       font-size: 1.2em;
       margin-right: 1.5em;
     }

src/options/Run.vue

@@ -22,7 +22,15 @@
       <form ref="runForm" @submit.prevent="runAction">
         <div class="row action-head">
           <div class="action-name">
-            <Autocomplete :source="actionsAutocomplete" :disableInput="loading" :name="action.name || ''" placeholder="Action" @input="onActionChange" />
+            <Autocomplete
+              placeholder="Action"
+              :source="actionsAutocomplete"
+              :disableInput="loading"
+              :name="action.name || ''"
+              :initialValue="selectedAction ? selectedAction.name : null"
+              :initialDisplay="selectedAction ? selectedAction.name : null"
+              @input="onActionChange"
+            />
           </div>
           <div class="action-doc" v-text="actionTemplate.doc" v-if="actionTemplate.doc" />
         </div>
@@ -100,6 +108,7 @@
           :autocomplete-items="categoriesAutocomplete"
           :disabled="loading"
           :separators="[',', ';']"
+          :tags="selectedCategories.map(cat => (typeof cat === 'object' ? cat : { text: cat }))"
           @tags-changed="tags => (selectedCategories = tags)"
           placeholder="Categories"
         />
@@ -114,7 +123,7 @@
           Install script on these devices
         </div>
 
-        <MultipleHostSelector :hosts="hosts" :selected="[host.name]" />
+        <MultipleHostSelector :hosts="hosts" :selected="selectedHosts && selectedHosts.length ? selectedHosts : [host.name]" />
       </div>
 
       <div class="row buttons">
@@ -143,6 +152,8 @@ export default {
   mixins: [mixins],
   props: {
     host: Object,
+    selectedAction: Object,
+    selectedScript: Object,
     scriptTemplate: {
       type: String,
       default: `async (app, host, browser, tab, target, ...args) => {
@@ -178,6 +189,7 @@ export default {
       storedActions: {},
       selectedCategory: '',
       selectedCategories: [],
+      selectedHosts: null,
       actionMode: 'request',
       action: {
         name: null,
@@ -429,6 +441,32 @@ export default {
         this.action.defaultArgs = {};
       }
     },
+
+    initAction() {
+      const action = this.selectedAction || this.selectedScript;
+      if (!action) {
+        return;
+      }
+
+      this.saveMode = true;
+      this.saveParams.name = action.displayName;
+      this.saveParams.color = action.color;
+      this.saveParams.iconClass = action.iconClass;
+      this.selectedCategories = action.categories;
+      this.selectedHosts = action.hosts;
+
+      if (this.selectedAction) {
+        this.actionMode = 'request';
+        this.action.name = action.name;
+        this.action.defaultArgs = Object.entries(action.args).reduce((obj, [name, value]) => {
+          obj[name] = { value: value };
+          return obj;
+        }, {});
+      } else {
+        this.actionMode = 'script';
+        this.script = action.script.toString();
+      }
+    },
   },
 
   created() {
@@ -436,6 +474,7 @@ export default {
     this.loadHosts();
     this.loadPlugins();
     this.loadActions();
+    this.initAction();
   },
 };
 </script>

src/popup/App.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="container">
-    <div class="no-hosts" v-if="!hosts">
+    <div class="no-hosts" v-if="!(hosts && Object.keys(hosts).length)">
       No devices found. Click
       <a href="/options/options.html" target="_blank">here</a> to configure the extension.
     </div>
@@ -13,7 +13,7 @@
             <option v-for="(host, name) in hosts" :selected="selectedHost === name" :key="name" :value="name">{{ name }}</option>
           </select>
 
-          <span class="host" v-text="Object.entries(hosts)[0][0]" v-else />
+          <span class="host" v-text="Object.keys(hosts)[0]" v-else />
         </div>
 
         <div class="settings">
@@ -74,6 +74,10 @@ export default {
     },
 
     actionsByHost() {
+      if (!this.actions_ || !this.scripts_) {
+        return {};
+      }
+
       return Object.entries({ ...(this.actions_ || {}), ...(this.scripts_ || {}) }).reduce((obj, [name, action]) => {
         const hosts = action.hosts || [];
         for (const host of hosts) {
@@ -122,8 +126,8 @@ export default {
   methods: {
     async loadHosts() {
       this.hosts = await this.getHosts();
-      if (!this.selectedHost) {
+      if (!this.selectedHost && this.hosts && Object.keys(this.hosts).length) {
-        this.selectedHost = Object.entries(this.hosts)[0][0];
+        this.selectedHost = Object.keys(this.hosts)[0];
       }
     },
 

src/utils.js

@@ -1,5 +1,6 @@
 import axios from 'axios';
 import Mercury from '@postlight/mercury-parser';
+import Vue from 'vue';
 
 export default {
   data() {
@@ -322,4 +323,6 @@ export default {
   },
 };
 
+export const bus = new Vue();
+
 // vim:sw=2:ts=2:et: