fix regressions commented upon by @ryestew.

apps/remix-ide/src/app/components/plugin-manager-component.js

@@ -90,6 +90,7 @@ class PluginManagerComponent extends ViewPlugin {
     ReactDOM.render(
       <RemixUiPluginManager
         pluginComponent={this}
+        pluginManagerSettings={this.pluginManagerSettings}
       />,
       this.htmlElement)
   }

apps/remix-ide/src/app/components/plugin-manager-settings.js

@@ -44,9 +44,12 @@ const css = csjs`
 `
 
 export class PluginManagerSettings {
-  openDialog () {
+  constructor () {
     const fromLocal = window.localStorage.getItem('plugins/permissions')
     this.permissions = JSON.parse(fromLocal || '{}')
+  }
+
+  openDialog () {
     this.currentSetting = this.settings()
     modalDialog('Plugin Manager Permissions', this.currentSetting,
       { fn: () => this.onValidation() }
@@ -60,6 +63,8 @@ export class PluginManagerSettings {
 
   /** Clear one permission from a plugin */
   clearPersmission (from, to, method) {
+    // eslint-disable-next-line no-debugger
+    debugger
     if (this.permissions[to] && this.permissions[to][method]) {
       delete this.permissions[to][method][from]
       if (Object.keys(this.permissions[to][method]).length === 0) {
@@ -74,6 +79,8 @@ export class PluginManagerSettings {
 
   /** Clear all persmissions from a plugin */
   clearAllPersmission (to) {
+    // eslint-disable-next-line no-debugger
+    debugger
     if (!this.permissions[to]) return
     delete this.permissions[to]
     yo.update(this.currentSetting, this.settings())

libs/remix-ui/plugin-manager/src/lib/components/ActivePluginCardContainer.tsx

 /* eslint-disable @typescript-eslint/no-unused-vars */
 import { Profile } from '@remixproject/plugin-utils'
 import React from 'react'
-import { PluginManagerComponent } from '../../types/types'
+import { PluginManagerComponent } from '../../types'
 import ActivePluginCard from './ActivePluginCard'
 import ModuleHeading from './moduleHeading'
 

libs/remix-ui/plugin-manager/src/lib/components/InactivePluginCardContainer.tsx

 /* eslint-disable @typescript-eslint/no-unused-vars */
 import { Profile } from '@remixproject/plugin-utils'
 import React from 'react'
-import { PluginManagerComponent, PluginManagerProfile } from '../../types/types'
+import { PluginManagerComponent, PluginManagerProfile } from '../../types'
 import InactivePluginCard from './InactivePluginCard'
 import ModuleHeading from './moduleHeading'
 

libs/remix-ui/plugin-manager/src/lib/components/LocalPluginForm.tsx

@@ -5,7 +5,7 @@ import { Toaster } from '@remix-ui/toaster'
 import { IframePlugin, WebsocketPlugin } from '@remixproject/engine-web'
 
 import { localPluginReducerActionType, localPluginToastReducer } from '../reducers/pluginManagerReducer'
-import { FormStateProps, PluginManagerComponent } from '../../types/types'
+import { FormStateProps, PluginManagerComponent } from '../../types'
 
 interface LocalPluginFormProps {
   closeModal: () => void

libs/remix-ui/plugin-manager/src/lib/components/permissions/permissionsSettings.tsx → libs/remix-ui/plugin-manager/src/lib/components/permissionsSettings.tsx

 /* eslint-disable @typescript-eslint/no-unused-vars */
 import React, { Fragment, useCallback, useEffect, useState } from 'react'
-import { PluginManagerSettings, PluginPermissions } from '../../../types/types'
+/* eslint-disable-line */
 import { ModalDialog } from '@remix-ui/modal-dialog'
+import { useLocalStorage } from '../custom-hooks/useLocalStorage'
+// import { PluginManagerSettings, PluginPermissions } from '../../types'
 
 interface PermissionSettingsProps {
-  pluginSettings: PluginManagerSettings
+  pluginSettings: any
 }
 
 function PermisssionsSettings ({ pluginSettings }: PermissionSettingsProps) {
@@ -12,28 +14,20 @@ function PermisssionsSettings ({ pluginSettings }: PermissionSettingsProps) {
    * Declare component local state
    */
   const [modalVisibility, setModalVisibility] = useState<boolean>(true)
-  const [permissions] = useState<PluginPermissions | null>(
-    JSON.parse(localStorage.getItem('plugins/permissions') || '{}'))
-  const [verifyPermission, setVerifyPermission] = useState(false)
+  // const [permissions] = useState<any | null>(
+  //   JSON.parse(localStorage.getItem('plugins/permissions') || '{}'))
+  const [permissions, setPermissions] = useLocalStorage('plugins/permissions', '{}')
   const closeModal = () => setModalVisibility(true)
 
-  const displayPermissions = useCallback(() => {
-    if (permissions && Object.keys(permissions).length > 0) {
-      setVerifyPermission(true)
-    }
-  }, [permissions])
-
-  useEffect(() => {
-    displayPermissions()
-  }, [displayPermissions, permissions])
-  // console.log('fetched permissions', permissions)
-
   function ShowPluginHeading ({ headingName }) {
     return (
       <div className="pb-2 remixui_permissionKey">
         <h3>{headingName} permissions:</h3>
         <i
-          onClick={() => pluginSettings.clearAllPersmission('topLevelPluginNameP')}
+          onClick={() => {
+            console.log(`${headingName}`)
+            clearPersmission(headingName)
+          }}
           className="far fa-trash-alt"
           data-id={`pluginManagerSettingsClearAllPermission-${headingName}`}>
 
@@ -55,7 +49,10 @@ function PermisssionsSettings ({ pluginSettings }: PermissionSettingsProps) {
     }, [checkBoxState])
 
     const handleCheckboxClick = () => {
+      const copyPermissions = permissions
+      copyPermissions[pluginName][functionName][topLevelPluginName].allow = !checkBoxState
       setCheckBoxState(!checkBoxState)
+      setPermissions(copyPermissions)
     }
     return (
       <div className="form-group remixui_permissionKey">
@@ -78,7 +75,10 @@ function PermisssionsSettings ({ pluginSettings }: PermissionSettingsProps) {
           </span>
         </div>
         <i
-          onClick={() => pluginSettings.clearPersmission(pluginName, topLevelPluginName, functionName)}
+          onClick={() => {
+            console.log(`${pluginName}'s trash icon was clicked!`)
+            clearAllPersmissions(pluginName, topLevelPluginName, functionName)
+          }}
           className="fa fa-trash-alt"
           data-id={`pluginManagerSettingsRemovePermission-${topLevelPluginName}-${functionName}-${topLevelPluginName}`}
         />
@@ -86,6 +86,30 @@ function PermisssionsSettings ({ pluginSettings }: PermissionSettingsProps) {
     )
   }
 
+  function clearAllPersmissions (pluginName: string, topLevelPluginName: string, funcName: string) {
+    const permissionsCopy = permissions // don't mutate state
+    if (permissionsCopy[topLevelPluginName] && permissionsCopy[topLevelPluginName][funcName]) {
+      delete permissionsCopy[topLevelPluginName][funcName][pluginName]
+      if (Object.keys(permissionsCopy[topLevelPluginName][funcName]).length === 0) {
+        delete permissionsCopy[topLevelPluginName][funcName]
+      }
+      if (Object.keys(permissionsCopy[topLevelPluginName]).length === 0) {
+        delete permissionsCopy[topLevelPluginName]
+      }
+    }
+    // eslint-disable-next-line no-debugger
+    debugger
+    setPermissions({ ...permissionsCopy })
+  }
+
+  function clearPersmission (topLevelPluginName: string) {
+    const permissionsCopy = permissions
+    if (permissionsCopy[topLevelPluginName]) {
+      delete permissionsCopy[topLevelPluginName]
+    }
+    setPermissions({})
+  }
+
   return (
     <Fragment>
       <ModalDialog
@@ -95,20 +119,23 @@ function PermisssionsSettings ({ pluginSettings }: PermissionSettingsProps) {
         okLabel="OK"
         cancelLabel="Cancel"
       >
-        {verifyPermission ? (<h4 className="text-center">Current Permission Settings</h4>) : (<h4 className="text-center">No Permission requested yet.</h4>)}
+        {JSON.parse(localStorage.getItem('plugins/permissions')) && Object.keys(JSON.parse(localStorage.getItem('plugins/permissions'))).length > 0
+          ? (<h4 className="text-center">Current Permission Settings</h4>)
+          : (<h4 className="text-center">No Permission requested yet.</h4>)
+        }
         <form className="remixui_permissionForm" data-id="pluginManagerSettingsPermissionForm">
           <div className="p-2">
             {
-              Object.keys(permissions).map(toplevelName => (
+              Object.keys(JSON.parse(localStorage.getItem('plugins/permissions'))).map(toplevelName => (
                 <ShowPluginHeading key={toplevelName} headingName={toplevelName} />
               ))
             }
             {
-              Object.keys(permissions).map(topName => {
-                return Object.keys(permissions[topName]).map(funcName => {
-                  return Object.keys(permissions[topName][funcName]).map(pluginName => (
+              Object.keys(JSON.parse(localStorage.getItem('plugins/permissions'))).map(topName => {
+                return Object.keys(JSON.parse(localStorage.getItem('plugins/permissions'))[topName]).map(funcName => {
+                  return Object.keys(JSON.parse(localStorage.getItem('plugins/permissions'))[topName][funcName]).map(pluginName => (
                     <ShowCheckBox
-                      allow={permissions[topName][funcName][pluginName].allow}
+                      allow={JSON.parse(localStorage.getItem('plugins/permissions'))[topName][funcName][pluginName].allow}
                       functionName={funcName}
                       pluginName={pluginName}
                       topLevelPluginName={topName}

libs/remix-ui/plugin-manager/src/lib/components/rootView.tsx

 /* eslint-disable @typescript-eslint/no-unused-vars */
 import React, { Fragment, ReactNode, useEffect, useState } from 'react'
-import { FormStateProps, PluginManagerComponent } from '../../types/types'
-import PermisssionsSettings from './permissions/permissionsSettings'
+import { PluginManagerComponent, PluginManagerSettings } from '../../types'
+import PermisssionsSettings from './permissionsSettings'
 import { Profile } from '@remixproject/plugin-utils'
 import LocalPluginForm from './LocalPluginForm'
 
 interface RootViewProps {
   pluginComponent: PluginManagerComponent
+  pluginManagerSettings: PluginManagerSettings
   children: ReactNode
 }
 
@@ -20,7 +21,7 @@ export interface pluginActivated {
   profile: Profile
 }
 
-function RootView ({ pluginComponent, children }: RootViewProps) {
+function RootView ({ pluginComponent, pluginManagerSettings, children }: RootViewProps) {
   const [visible, setVisible] = useState<boolean>(true)
   const [filterPlugins, setFilterPlugin] = useState<string>('')
 
@@ -32,7 +33,7 @@ function RootView ({ pluginComponent, children }: RootViewProps) {
   useEffect(() => {
     pluginComponent.getAndFilterPlugins(filterPlugins)
   }, [filterPlugins])
-
+  // console.log('This is the state of pluginSettings instance passed from pluginmanager', pluginComponent.pluginSettings)
   return (
     <Fragment>
       <div id="pluginManager" data-id="pluginManagerComponentPluginManager">
@@ -52,7 +53,7 @@ function RootView ({ pluginComponent, children }: RootViewProps) {
           </button>
         </header>
         {children}
-        <PermisssionsSettings pluginSettings={pluginComponent.pluginSettings}/>
+        <PermisssionsSettings pluginSettings={pluginManagerSettings}/>
       </div>
       <LocalPluginForm
         closeModal={closeModal}

libs/remix-ui/plugin-manager/src/lib/remix-ui-plugin-manager.tsx

 /* eslint-disable @typescript-eslint/no-unused-vars */
 import { Profile } from '@remixproject/plugin-utils'
 import React, { useState } from 'react'
-import { RemixUiPluginManagerProps } from '../types/types'
+import { RemixUiPluginManagerProps } from '../types'
 import ActivePluginCardContainer from './components/ActivePluginCardContainer'
 import InactivePluginCardContainer from './components/InactivePluginCardContainer'
 import RootView from './components/rootView'
 import './remix-ui-plugin-manager.css'
 
-export const RemixUiPluginManager = ({ pluginComponent }: RemixUiPluginManagerProps) => {
+export const RemixUiPluginManager = ({ pluginComponent, pluginManagerSettings }: RemixUiPluginManagerProps) => {
   const [activeProfiles, setActiveProfiles] = useState<Profile[]>(pluginComponent.activePlugins)
   const [inactiveProfiles, setinactiveProfiles] = useState<Profile[]>(pluginComponent.inactivePlugins)
-
+  // console.log('This is the state of pluginSettings at the root of the components', pluginComponent.pluginSettings)
   return (
-    <RootView pluginComponent={pluginComponent}>
+    <RootView pluginComponent={pluginComponent} pluginManagerSettings={pluginManagerSettings}>
       <section data-id="pluginManagerComponentPluginManagerSection">
         <ActivePluginCardContainer
           pluginComponent={pluginComponent}

libs/remix-ui/plugin-manager/src/types/types.d.ts → libs/remix-ui/plugin-manager/src/types.d.ts

@@ -139,6 +139,7 @@ export interface PluginManagerContextProviderProps {
 
 export interface RemixUiPluginManagerProps {
   pluginComponent: PluginManagerComponent
+  pluginManagerSettings: PluginManagerSettings
 }
 /** @class Reference loaders.
  *  A loader is a get,set based object which load a workspace from a defined sources.

libs/remix-ui/plugin-manager/src/types/query-params.d.ts

-export = QueryParams;
-// declare function QueryParams(_window: any): void;
-declare class QueryParams {
-  constructor(_window: any);
-    get: () => {};
-    update: (params: any) => void;
-}

libs/remix-ui/plugin-manager/src/types/registry.d.ts

-declare class registry {
-  state: {};
-  put({ api, name }: {
-    api: any;
-    name: any;
-  }): any
-
-  get(name: any): any;
-}
-export = registry;

libs/remix-ui/plugin-manager/tsconfig.lib.json

@@ -2,7 +2,6 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "../../../dist/out-tsc",
-    "composite": true,
     "types": ["node"]
   },
   "files": [