Add clear permissions in plugin manager settings

src/app/components/plugin-manager-settings.js

@@ -25,6 +25,14 @@ const css = csjs`
 .permissionForm hr {
   width: 80%;
 }
+.permissionKey {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.permissionKey i {
+  cursor: pointer;
+}
 .checkbox {
   display: flex;
   align-items: center;
@@ -39,7 +47,8 @@ export class PluginManagerSettings {
   openDialog () {
     const fromLocal = window.localStorage.getItem('plugins/permissions')
     this.permissions = JSON.parse(fromLocal || '{}')
-    modalDialog('Plugin Manager Settings', this.settings(),
+    this.currentSetting = this.settings(),
+    modalDialog('Plugin Manager Settings', this.currentSetting,
       { fn: () => this.onValidation() },
     )
   }
@@ -49,6 +58,23 @@ export class PluginManagerSettings {
     window.localStorage.setItem('plugins/permissions', permissions)
   }
 
+  /** Clear one permission from a plugin */
+  clearPersmission (from, to) {
+    if (!this.permissions[from]) return
+    delete this.permissions[from][to]
+    if (Object.keys(this.permissions[from]).length === 0) {
+      delete this.permissions[from]
+    }
+    yo.update(this.currentSetting, this.settings())
+  }
+
+  /** Clear all persmissions from a plugin */
+  clearAllPersmission (from) {
+    if (!this.permissions[from]) return
+    delete this.permissions[from]
+    yo.update(this.currentSetting, this.settings())
+  }
+
   settings () {
     const permissionByModule = (key, permission) => {
       const permissionByPlugin = (name, plugin) => {
@@ -60,9 +86,12 @@ export class PluginManagerSettings {
           : yo`<input onchange="${updatePermission}" type="checkbox" id="permission-${name}" aria-describedby="module ${key} ask permission for ${name}" />`
 
         return yo`
-        <div class="form-group ${css.checkbox}">
-          ${checkbox}
-          <label for="permission-${name}">Allow plugin ${name} to write on ${key}</label>
+        <div class="form-group ${css.permissionKey}">
+          <div class="${css.checkbox}">
+            ${checkbox}
+            <label for="permission-${name}">Allow plugin ${name} to write on ${key}</label>
+          </div>
+          <i onclick="${() => this.clearPersmission(key, name)}" class="fa fa-trash-alt"></i>
         </div>`
       }
 
@@ -72,7 +101,10 @@ export class PluginManagerSettings {
 
       return yo`
       <div>
-        <h6>${key} :</h6>
+        <div class="${css.permissionKey}">
+          <h6>${key} :</h6>
+          <i onclick="${() => this.clearAllPersmission(key)}" class="far fa-trash-alt"></i>
+        </div>
         ${byModule}
       </div>`
     }

src/persmission-handler.js

@@ -42,7 +42,7 @@ export class PermissionHandler {
     this.permissions = this._getFromLocal()
   }
 
-  _getFromLocal() {
+  _getFromLocal () {
     const permission = localStorage.getItem('plugins/permissions')
     return permission ? JSON.parse(permission) : {}
   }