Smart autocompletion logic for actions

src/options/Autocomplete.vue

@@ -0,0 +1,191 @@
+<template>
+  <div class="input autocomplete">
+    <input
+      type="text"
+      name="action"
+      autocomplete="off"
+      ref="input"
+      :value="value"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      @keydown="onKeyDown"
+      @keyup="onKeyUp"
+      @focus="showItems = true"
+      @blur="showItems = false"
+      @change="onInput"
+    />
+
+    <ul class="items" ref="items" v-if="filteredItems.length && showItems">
+      <li class="item" :class="{ selected: selectedItem == i }" v-for="(item, i) in filteredItems" :key="i" v-text="item" @mousedown="onSelect" @touchstart="onSelect" />
+    </ul>
+  </div>
+</template>
+
+<script>
+import mixins from '../utils';
+
+function _filter(item, items) {
+  return items.filter(i => i.startsWith(item));
+}
+
+export default {
+  name: 'Autocomplete',
+  mixins: [mixins],
+  props: {
+    items: Array,
+    value: String,
+    placeholder: String,
+    filter: {
+      type: Function,
+      default: _filter,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  data() {
+    return {
+      showItems: false,
+      selectedItem: -1,
+      lastValue: this.value,
+      filteredItems: [],
+    };
+  },
+
+  methods: {
+    onInput() {
+      const value = this.$refs.input.value;
+      this.lastValue = value;
+      this.filterItems();
+      this.$emit('change', value);
+    },
+
+    onSelect(event) {
+      const value = event.target.innerText;
+      this.$refs.input.value = value;
+      this.showItems = false;
+      this.filterItems();
+      this.$emit('change', value);
+      this.$refs.input.focus();
+    },
+
+    onKeyDown(event) {
+      if (event.key === 'Enter') {
+        this.showItems = false;
+        if (!this.$refs.items) {
+          return;
+        }
+
+        const selected = this.$refs.items.querySelector('.selected');
+        if (!selected) {
+          return;
+        }
+
+        this.$refs.input.value = selected.innerText;
+        this.$emit('change', selected.innerText);
+        event.preventDefault();
+      }
+    },
+
+    onKeyUp(event) {
+      if (event.key === 'Escape') {
+        this.showItems = false;
+        return;
+      }
+
+      this.showItems = true;
+
+      if (['ArrowUp', 'ArrowDown'].indexOf(event.key) >= 0) {
+        switch (event.key) {
+          case 'ArrowUp':
+            if (this.selectedItem > 0) {
+              this.selectedItem--;
+            } else {
+              this.selectedItem = this.filteredItems.length - 1;
+            }
+            break;
+
+          case 'ArrowDown':
+            if (this.selectedItem >= this.filteredItems.length - 1) {
+              this.selectedItem = this.filteredItems.length ? 0 : -1;
+            } else {
+              this.selectedItem++;
+            }
+            break;
+        }
+
+        const self = this;
+        setTimeout(() => {
+          const selected = self.$refs.items.querySelector('.selected');
+          if (selected) {
+            self.$refs.items.scrollTop = selected.offsetTop;
+          }
+        }, 10);
+
+        event.stopPropagation();
+        return;
+      }
+
+      const value = this.$refs.input.value;
+      if (this.lastValue === value) {
+        return;
+      }
+
+      this.selectedItem = -1;
+      this.lastValue = value;
+      this.filterItems();
+      this.$emit('change', value);
+    },
+
+    filterItems() {
+      const value = this.$refs.input.value;
+      if (!value.length) {
+        this.filteredItems = [];
+        return;
+      }
+
+      this.filteredItems = this.filter(value, this.items);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.autocomplete {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+
+.items {
+  width: 100%;
+  max-height: 20em;
+  overflow-x: hidden;
+  overflow-y: auto;
+  position: absolute;
+  top: 1.35em;
+  background: white;
+  z-index: 5;
+  list-style: none;
+  padding: 0;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  border-radius: 0.5em;
+}
+
+.item {
+  cursor: pointer;
+  padding: 0.5em;
+
+  &.selected {
+    background-color: rgba(200, 255, 220, 1);
+  }
+
+  &:hover {
+    background-color: rgba(200, 255, 220, 0.7);
+  }
+}
+</style>
+
+<!-- vim:sw=2:ts=2:et: -->

src/options/Run.vue

@@ -1,23 +1,46 @@
 <template>
   <div class="page run">
     <h2>Run a command on {{ host.name }}</h2>
-    <form @submit.prevent="runAction">
+
-      <div class="row action-name">
+    <div class="help">
-        <input type="text" name="action" v-model="action.name" placeholder="Action" autocomplete="off" :disabled="loading" />
+      &nbsp; <a href="https://platypush.readthedocs.io/en/latest/plugins.html" target="_blank">Plugins reference</a>. Use <tt>$URL$</tt> as argument value to denote the current
-        <span class="help">
+      URL.
-          &nbsp; <a href="https://platypush.readthedocs.io/en/latest/plugins.html" target="_blank">Plugins reference</a>. Use <tt>$URL$</tt> as argument value to denote the current
+    </div>
-          URL.
+
-        </span>
+    <form ref="form" @submit.prevent="runAction">
+      <div class="row action-head">
+        <div class="action-name">
+          <Autocomplete :items="Object.keys(actions)" :value="action.name" :disabled="loading" placeholder="Action" @change="onActionChange" />
+        </div>
+        <div class="action-doc" v-text="actionTemplate.doc" v-if="actionTemplate.doc" />
+      </div>
+
+      <div class="row" v-for="(arg, name) in actionTemplate.args" :key="name">
+        <div class="label">
+          <input type="text" :name="'arg_' + name" :value="name" autocomplete="off" disabled />
+        </div>
+        <div class="value">
+          <input
+            type="text"
+            :name="name"
+            :value="arg.default"
+            data-type="arg"
+            :placeholder="arg.doc && arg.doc.length ? arg.doc.substr(0, 50) : 'Value'"
+            autocomplete="off"
+            :disabled="loading"
+          />
+        </div>
       </div>
 
       <div class="row" v-for="(arg, i) in action.args" :key="i">
         <div class="label">
-          <input type="text" :name="'arg' + i" v-model="arg.name" placeholder="Name" autocomplete="off" :disabled="loading" />
+          <input type="text" :name="'arg_' + i" v-model="arg.name" placeholder="Name" autocomplete="off" :disabled="loading" />
         </div>
-
         <div class="value">
-          <input type="text" :name="arg.name" v-model="arg.value" data-type="argument" placeholder="Value" autocomplete="off" :disabled="loading" />
+          <input type="text" :name="arg.name" v-model="arg.value" data-type="arg" placeholder="Value" autocomplete="off" :disabled="loading" />
-          <button type="button" @click="action.args.splice(i, 1)" :disabled="loading"><i class="fas fa-trash" /></button>
+          <button type="button" @click="action.args.splice(i, 1)" :disabled="loading">
+            <i class="fas fa-trash" />
+          </button>
         </div>
       </div>
 
@@ -35,16 +58,20 @@
 
 <script>
 import mixins from '../utils';
+import Autocomplete from './Autocomplete';
 
 export default {
   name: 'Run',
   mixins: [mixins],
+  components: { Autocomplete },
   props: {
     host: Object,
   },
 
   data() {
     return {
+      plugins: {},
+      pluginsLoading: false,
       actionResponse: null,
       actionError: null,
       action: {
@@ -54,6 +81,36 @@ export default {
     };
   },
 
+  computed: {
+    actions() {
+      return Object.values(this.plugins).reduce((obj, plugin) => {
+        return Object.values(plugin.actions).reduce((obj, action) => {
+          obj[plugin.name + '.' + action.name] = action;
+          return obj;
+        }, obj);
+      }, {});
+    },
+
+    filteredActions() {
+      if (!(this.action.name && this.action.name.length)) return {};
+
+      return Object.entries(this.actions)
+        .filter(([name, action]) => name.startsWith(this.action.name))
+        .reduce((obj, [name, action]) => {
+          obj[name] = action;
+          return obj;
+        }, {});
+    },
+
+    actionTemplate() {
+      if (!(this.action.name in this.actions)) {
+        return { args: [] };
+      }
+
+      return this.actions[this.action.name];
+    },
+  },
+
   methods: {
     clearAction() {
       this.action.name = null;
@@ -65,8 +122,22 @@ export default {
     async runAction() {
       this.loading = true;
 
+      const args = [...this.$refs.form.querySelectorAll('[data-type="arg"]')].map(el => {
+        return {
+          name: el.name,
+          value: el.value,
+        };
+      }, {});
+
       try {
-        this.actionResponse = await this.run(this.action, this.host);
+        this.actionResponse = await this.run(
+          {
+            name: this.action.name,
+            args: [...args, ...this.action.args],
+          },
+          this.host
+        );
+
         this.actionError = null;
       } catch (e) {
         this.actionResponse = null;
@@ -82,15 +153,64 @@ export default {
         value: '',
       });
     },
+
+    async loadPlugins() {
+      this.pluginsLoading = true;
+
+      try {
+        this.plugins = await this.run(
+          {
+            name: 'inspect.get_all_plugins',
+            args: {
+              html_doc: false,
+            },
+          },
+          this.host
+        );
+      } finally {
+        this.pluginsLoading = false;
+      }
+    },
+
+    onActionChange(action) {
+      this.action.name = action;
+      this.action.args = [];
+    },
   },
 
   created() {
     this.clearAction();
+    this.loadPlugins();
   },
 };
 </script>
 
 <style lang="scss" scoped>
+.help {
+  margin-bottom: 1em;
+}
+
+.action-head {
+  display: flex;
+  align-items: center;
+
+  .action-name {
+    width: 20em;
+  }
+
+  .action-doc {
+    width: 40em;
+    margin: 0.5em auto auto 1em;
+    white-space: pre;
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    border-radius: 1em;
+    padding: 1em;
+    max-height: 10em;
+    overflow: auto;
+    background: rgba(250, 255, 240, 0.5);
+  }
+}
+
 form {
   position: relative;
   max-width: 50em;

src/utils.js

@@ -30,6 +30,13 @@ export default {
           }, {});
       }
 
+      Object.keys(args).forEach(name => {
+        if (args[name] === '$URL$') {
+          // URL wildcard
+          args[name] = window.location.href;
+        }
+      });
+
       if (host.token && host.token.length) {
         config.headers = {
           'X-Token': host.token,
@@ -41,7 +48,7 @@ export default {
           url,
           {
             type: 'request',
-            action: this.action.name,
+            action: action.name,
             args: args,
           },
           config