From ab355c2bdca84f05d6c5bba3943d8c9db4acb926 Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Tue, 7 May 2019 13:40:04 +0200
Subject: [PATCH 1/3] add events for local plugin

---
 src/app/components/local-plugin.js | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/app/components/local-plugin.js b/src/app/components/local-plugin.js
index 2bac1cde30..d53d0ff048 100644
--- a/src/app/components/local-plugin.js
+++ b/src/app/components/local-plugin.js
@@ -37,9 +37,9 @@ module.exports = class LocalPlugin {
       ...this.profile,
       icon: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB3aWR0aD0iMTc5MiIgaGVpZ2h0PSIxNzkyIiB2aWV3Qm94PSIwIDAgMTc5MiAxNzkyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xMjYyIDEwNzVxLTM3IDEyMS0xMzggMTk1dC0yMjggNzQtMjI4LTc0LTEzOC0xOTVxLTgtMjUgNC00OC41dDM4LTMxLjVxMjUtOCA0OC41IDR0MzEuNSAzOHEyNSA4MCA5Mi41IDEyOS41dDE1MS41IDQ5LjUgMTUxLjUtNDkuNSA5Mi41LTEyOS41cTgtMjYgMzItMzh0NDktNCAzNyAzMS41IDQgNDguNXptLTQ5NC00MzVxMCA1My0zNy41IDkwLjV0LTkwLjUgMzcuNS05MC41LTM3LjUtMzcuNS05MC41IDM3LjUtOTAuNSA5MC41LTM3LjUgOTAuNSAzNy41IDM3LjUgOTAuNXptNTEyIDBxMCA1My0zNy41IDkwLjV0LTkwLjUgMzcuNS05MC41LTM3LjUtMzcuNS05MC41IDM3LjUtOTAuNSA5MC41LTM3LjUgOTAuNSAzNy41IDM3LjUgOTAuNXptMjU2IDI1NnEwLTEzMC01MS0yNDguNXQtMTM2LjUtMjA0LTIwNC0xMzYuNS0yNDguNS01MS0yNDguNSA1MS0yMDQgMTM2LjUtMTM2LjUgMjA0LTUxIDI0OC41IDUxIDI0OC41IDEzNi41IDIwNCAyMDQgMTM2LjUgMjQ4LjUgNTEgMjQ4LjUtNTEgMjA0LTEzNi41IDEzNi41LTIwNCA1MS0yNDguNXptMTI4IDBxMCAyMDktMTAzIDM4NS41dC0yNzkuNSAyNzkuNS0zODUuNSAxMDMtMzg1LjUtMTAzLTI3OS41LTI3OS41LTEwMy0zODUuNSAxMDMtMzg1LjUgMjc5LjUtMjc5LjUgMzg1LjUtMTAzIDM4NS41IDEwMyAyNzkuNSAyNzkuNSAxMDMgMzg1LjV6Ii8+PC9zdmc+',
       methods: [],
-      events: [],
       hash: `local-${this.profile.name}`,
-      location: 'swapPanel'
+      location: 'swapPanel',
+      events: ['compilationFinished']
     }
     if (!profile.name) throw new Error('Plugin should have a name')
     if (!profile.url) throw new Error('Plugin should have an URL')
@@ -76,6 +76,12 @@ module.exports = class LocalPlugin {
     this.profile.displayName = target.value
   }
 
+  updateEvents ({target}) {
+    if (target.value && target.value.indexOf(',') !== -1) {
+      this.profile.events = target.value.split(',')
+    }
+  }
+
   /**
    * The checkbox for a couple module / event
    * @param {string} plugin The name of the plugin
@@ -100,6 +106,7 @@ module.exports = class LocalPlugin {
     const name = this.profile.name || ''
     const url = this.profile.url || ''
     const displayName = this.profile.displayName || ''
+    const events = (this.profile.events || []).join(',')
     const profiles = plugins
       .filter(({profile}) => profile.events && profile.events.length > 0)
       .map(({profile}) => profile)
@@ -117,6 +124,10 @@ module.exports = class LocalPlugin {
         <label for="plugin-url">Url <small>(required)</small></label>
         <input class="form-control" onchange="${e => this.updateUrl(e)}" value="${url}" id="plugin-url" placeholder="ex: https://localhost:8000">
       </div>
+      <div class="form-group">
+        <label>Events <small>(comma separated)</small></label>
+        <input class="form-control" onchange="${e => this.updateEvents(e)}" value="${events}" id="plugin-events" placeholder="ex: compilationFinished,configurationChanged">
+      </div>
       <div class="form-group">
         <label>Notifications</label>
         ${profiles.map(({name, events}) => {

From 3ec823f00628e715ccdcd223cadfe47540d7cafe Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Tue, 7 May 2019 13:40:16 +0200
Subject: [PATCH 2/3] use remix-plugin 0.0.2-alpha.6

---
 package.json                       | 2 +-
 src/app/components/local-plugin.js | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 153e7f6506..0cef7b9b8d 100644
--- a/package.json
+++ b/package.json
@@ -67,7 +67,7 @@
   },
   "dependencies": {
     "http-server-legacy": "latest",
-    "remix-plugin": "0.0.2-alpha.5",
+    "remix-plugin": "0.0.2-alpha.6",
     "remixd": "0.1.8-alpha.6"
   },
   "repository": {
diff --git a/src/app/components/local-plugin.js b/src/app/components/local-plugin.js
index d53d0ff048..e8fe53c5f1 100644
--- a/src/app/components/local-plugin.js
+++ b/src/app/components/local-plugin.js
@@ -37,9 +37,9 @@ module.exports = class LocalPlugin {
       ...this.profile,
       icon: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB3aWR0aD0iMTc5MiIgaGVpZ2h0PSIxNzkyIiB2aWV3Qm94PSIwIDAgMTc5MiAxNzkyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xMjYyIDEwNzVxLTM3IDEyMS0xMzggMTk1dC0yMjggNzQtMjI4LTc0LTEzOC0xOTVxLTgtMjUgNC00OC41dDM4LTMxLjVxMjUtOCA0OC41IDR0MzEuNSAzOHEyNSA4MCA5Mi41IDEyOS41dDE1MS41IDQ5LjUgMTUxLjUtNDkuNSA5Mi41LTEyOS41cTgtMjYgMzItMzh0NDktNCAzNyAzMS41IDQgNDguNXptLTQ5NC00MzVxMCA1My0zNy41IDkwLjV0LTkwLjUgMzcuNS05MC41LTM3LjUtMzcuNS05MC41IDM3LjUtOTAuNSA5MC41LTM3LjUgOTAuNSAzNy41IDM3LjUgOTAuNXptNTEyIDBxMCA1My0zNy41IDkwLjV0LTkwLjUgMzcuNS05MC41LTM3LjUtMzcuNS05MC41IDM3LjUtOTAuNSA5MC41LTM3LjUgOTAuNSAzNy41IDM3LjUgOTAuNXptMjU2IDI1NnEwLTEzMC01MS0yNDguNXQtMTM2LjUtMjA0LTIwNC0xMzYuNS0yNDguNS01MS0yNDguNSA1MS0yMDQgMTM2LjUtMTM2LjUgMjA0LTUxIDI0OC41IDUxIDI0OC41IDEzNi41IDIwNCAyMDQgMTM2LjUgMjQ4LjUgNTEgMjQ4LjUtNTEgMjA0LTEzNi41IDEzNi41LTIwNCA1MS0yNDguNXptMTI4IDBxMCAyMDktMTAzIDM4NS41dC0yNzkuNSAyNzkuNS0zODUuNSAxMDMtMzg1LjUtMTAzLTI3OS41LTI3OS41LTEwMy0zODUuNSAxMDMtMzg1LjUgMjc5LjUtMjc5LjUgMzg1LjUtMTAzIDM4NS41IDEwMyAyNzkuNSAyNzkuNSAxMDMgMzg1LjV6Ii8+PC9zdmc+',
       methods: [],
+      events: [],
       hash: `local-${this.profile.name}`,
-      location: 'swapPanel',
-      events: ['compilationFinished']
+      location: 'swapPanel'
     }
     if (!profile.name) throw new Error('Plugin should have a name')
     if (!profile.url) throw new Error('Plugin should have an URL')

From d42c6fe21a37d476c729cb1703e3368c34d88c08 Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Tue, 7 May 2019 15:38:16 +0200
Subject: [PATCH 3/3] use html input instead of comma separated

---
 src/app/components/local-plugin.js            | 29 ++++++++++++++-----
 .../components/plugin-manager-component.js    |  1 -
 2 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/src/app/components/local-plugin.js b/src/app/components/local-plugin.js
index e8fe53c5f1..aa58884a0b 100644
--- a/src/app/components/local-plugin.js
+++ b/src/app/components/local-plugin.js
@@ -37,10 +37,10 @@ module.exports = class LocalPlugin {
       ...this.profile,
       icon: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB3aWR0aD0iMTc5MiIgaGVpZ2h0PSIxNzkyIiB2aWV3Qm94PSIwIDAgMTc5MiAxNzkyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xMjYyIDEwNzVxLTM3IDEyMS0xMzggMTk1dC0yMjggNzQtMjI4LTc0LTEzOC0xOTVxLTgtMjUgNC00OC41dDM4LTMxLjVxMjUtOCA0OC41IDR0MzEuNSAzOHEyNSA4MCA5Mi41IDEyOS41dDE1MS41IDQ5LjUgMTUxLjUtNDkuNSA5Mi41LTEyOS41cTgtMjYgMzItMzh0NDktNCAzNyAzMS41IDQgNDguNXptLTQ5NC00MzVxMCA1My0zNy41IDkwLjV0LTkwLjUgMzcuNS05MC41LTM3LjUtMzcuNS05MC41IDM3LjUtOTAuNSA5MC41LTM3LjUgOTAuNSAzNy41IDM3LjUgOTAuNXptNTEyIDBxMCA1My0zNy41IDkwLjV0LTkwLjUgMzcuNS05MC41LTM3LjUtMzcuNS05MC41IDM3LjUtOTAuNSA5MC41LTM3LjUgOTAuNSAzNy41IDM3LjUgOTAuNXptMjU2IDI1NnEwLTEzMC01MS0yNDguNXQtMTM2LjUtMjA0LTIwNC0xMzYuNS0yNDguNS01MS0yNDguNSA1MS0yMDQgMTM2LjUtMTM2LjUgMjA0LTUxIDI0OC41IDUxIDI0OC41IDEzNi41IDIwNCAyMDQgMTM2LjUgMjQ4LjUgNTEgMjQ4LjUtNTEgMjA0LTEzNi41IDEzNi41LTIwNCA1MS0yNDguNXptMTI4IDBxMCAyMDktMTAzIDM4NS41dC0yNzkuNSAyNzkuNS0zODUuNSAxMDMtMzg1LjUtMTAzLTI3OS41LTI3OS41LTEwMy0zODUuNSAxMDMtMzg1LjUgMjc5LjUtMjc5LjUgMzg1LjUtMTAzIDM4NS41IDEwMyAyNzkuNSAyNzkuNSAxMDMgMzg1LjV6Ii8+PC9zdmc+',
       methods: [],
-      events: [],
       hash: `local-${this.profile.name}`,
       location: 'swapPanel'
     }
+    profile.events = profile.events.filter((item) => { return item !== '' })
     if (!profile.name) throw new Error('Plugin should have a name')
     if (!profile.url) throw new Error('Plugin should have an URL')
     localStorage.setItem('plugins/local', JSON.stringify(profile))
@@ -76,9 +76,9 @@ module.exports = class LocalPlugin {
     this.profile.displayName = target.value
   }
 
-  updateEvents ({target}) {
-    if (target.value && target.value.indexOf(',') !== -1) {
-      this.profile.events = target.value.split(',')
+  updateEvents ({target}, index) {
+    if (this.profile.events[index] !== undefined) {
+      this.profile.events[index] = target.value
     }
   }
 
@@ -106,12 +106,25 @@ module.exports = class LocalPlugin {
     const name = this.profile.name || ''
     const url = this.profile.url || ''
     const displayName = this.profile.displayName || ''
-    const events = (this.profile.events || []).join(',')
     const profiles = plugins
       .filter(({profile}) => profile.events && profile.events.length > 0)
       .map(({profile}) => profile)
+
+    const eventsForm = (events) => {
+      return yo`<div>${events.map((event, i) => {
+        return yo`<input class="form-control" onchange="${e => this.updateEvents(e, i)}" value="${event}" />`
+      })}</div>`
+    }
+    const eventsEl = eventsForm(this.profile.events || [])
+    const pushEvent = () => {
+      if (!this.profile.events) this.profile.events = []
+      this.profile.events.push('')
+      yo.update(eventsEl, eventsForm(this.profile.events))
+    }
+    const addEvent = yo`<button type="button" class="btn btn-sm btn-light" onclick="${() => pushEvent()}">Add an event</button>`
+
     return yo`
-    <form id="local-plugin-form" onsubmit="${e => this.validate(e)}">
+    <form id="local-plugin-form">
       <div class="form-group">
         <label for="plugin-name">Plugin Name <small>(required)</small></label>
         <input class="form-control" onchange="${e => this.updateName(e)}" value="${name}" id="plugin-name" placeholder="Should be camelCase">
@@ -125,8 +138,8 @@ module.exports = class LocalPlugin {
         <input class="form-control" onchange="${e => this.updateUrl(e)}" value="${url}" id="plugin-url" placeholder="ex: https://localhost:8000">
       </div>
       <div class="form-group">
-        <label>Events <small>(comma separated)</small></label>
-        <input class="form-control" onchange="${e => this.updateEvents(e)}" value="${events}" id="plugin-events" placeholder="ex: compilationFinished,configurationChanged">
+        <label>Events</label>
+        ${eventsEl}${addEvent}
       </div>
       <div class="form-group">
         <label>Notifications</label>
diff --git a/src/app/components/plugin-manager-component.js b/src/app/components/plugin-manager-component.js
index 0d1f884ec0..c49c62b0bf 100644
--- a/src/app/components/plugin-manager-component.js
+++ b/src/app/components/plugin-manager-component.js
@@ -18,7 +18,6 @@ const css = csjs`
   }
   .localPluginBtn {
     margin-top: 15px;
-    margin-bottom: -25px;
   }
   .displayName {
     text-transform: capitalize;