From c83e3f905dbf984a687b8577c85908194eff0b1a Mon Sep 17 00:00:00 2001
From: joseph izang <joeizang@hotmail.com>
Date: Tue, 24 Aug 2021 00:38:39 +0100
Subject: [PATCH] fix regressions commented upon by @ryestew.

---
 .../components/plugin-manager-component.js    |  1 +
 .../app/components/plugin-manager-settings.js |  9 ++-
 .../components/ActivePluginCardContainer.tsx  |  2 +-
 .../InactivePluginCardContainer.tsx           |  2 +-
 .../src/lib/components/LocalPluginForm.tsx    |  2 +-
 .../{permissions => }/permissionsSettings.tsx | 75 +++++++++++++------
 .../src/lib/components/rootView.tsx           | 11 +--
 .../src/lib/remix-ui-plugin-manager.tsx       |  8 +-
 .../plugin-manager/src/{types => }/types.d.ts |  1 +
 .../src/types/query-params.d.ts               |  7 --
 .../plugin-manager/src/types/registry.d.ts    | 10 ---
 .../remix-ui/plugin-manager/tsconfig.lib.json |  1 -
 12 files changed, 74 insertions(+), 55 deletions(-)
 rename libs/remix-ui/plugin-manager/src/lib/components/{permissions => }/permissionsSettings.tsx (56%)
 rename libs/remix-ui/plugin-manager/src/{types => }/types.d.ts (99%)
 delete mode 100644 libs/remix-ui/plugin-manager/src/types/query-params.d.ts
 delete mode 100644 libs/remix-ui/plugin-manager/src/types/registry.d.ts

diff --git a/apps/remix-ide/src/app/components/plugin-manager-component.js b/apps/remix-ide/src/app/components/plugin-manager-component.js
index bca33b24a0..fe0d2df02a 100644
--- a/apps/remix-ide/src/app/components/plugin-manager-component.js
+++ b/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)
   }
diff --git a/apps/remix-ide/src/app/components/plugin-manager-settings.js b/apps/remix-ide/src/app/components/plugin-manager-settings.js
index ed9ef3bbad..bdd233ff15 100644
--- a/apps/remix-ide/src/app/components/plugin-manager-settings.js
+++ b/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())
diff --git a/libs/remix-ui/plugin-manager/src/lib/components/ActivePluginCardContainer.tsx b/libs/remix-ui/plugin-manager/src/lib/components/ActivePluginCardContainer.tsx
index d011dfda46..f3fab13d10 100644
--- a/libs/remix-ui/plugin-manager/src/lib/components/ActivePluginCardContainer.tsx
+++ b/libs/remix-ui/plugin-manager/src/lib/components/ActivePluginCardContainer.tsx
@@ -1,7 +1,7 @@
 /* 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'
 
diff --git a/libs/remix-ui/plugin-manager/src/lib/components/InactivePluginCardContainer.tsx b/libs/remix-ui/plugin-manager/src/lib/components/InactivePluginCardContainer.tsx
index a785fed63e..c076f5b2b0 100644
--- a/libs/remix-ui/plugin-manager/src/lib/components/InactivePluginCardContainer.tsx
+++ b/libs/remix-ui/plugin-manager/src/lib/components/InactivePluginCardContainer.tsx
@@ -1,7 +1,7 @@
 /* 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'
 
diff --git a/libs/remix-ui/plugin-manager/src/lib/components/LocalPluginForm.tsx b/libs/remix-ui/plugin-manager/src/lib/components/LocalPluginForm.tsx
index 15e8546ac5..38ee483563 100644
--- a/libs/remix-ui/plugin-manager/src/lib/components/LocalPluginForm.tsx
+++ b/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
diff --git a/libs/remix-ui/plugin-manager/src/lib/components/permissions/permissionsSettings.tsx b/libs/remix-ui/plugin-manager/src/lib/components/permissionsSettings.tsx
similarity index 56%
rename from libs/remix-ui/plugin-manager/src/lib/components/permissions/permissionsSettings.tsx
rename to libs/remix-ui/plugin-manager/src/lib/components/permissionsSettings.tsx
index 13cb0cdc64..9cc5a99359 100644
--- a/libs/remix-ui/plugin-manager/src/lib/components/permissions/permissionsSettings.tsx
+++ b/libs/remix-ui/plugin-manager/src/lib/components/permissionsSettings.tsx
@@ -1,10 +1,12 @@
 /* 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}
diff --git a/libs/remix-ui/plugin-manager/src/lib/components/rootView.tsx b/libs/remix-ui/plugin-manager/src/lib/components/rootView.tsx
index b7b156ddc7..567ea64f8c 100644
--- a/libs/remix-ui/plugin-manager/src/lib/components/rootView.tsx
+++ b/libs/remix-ui/plugin-manager/src/lib/components/rootView.tsx
@@ -1,12 +1,13 @@
 /* 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}
diff --git a/libs/remix-ui/plugin-manager/src/lib/remix-ui-plugin-manager.tsx b/libs/remix-ui/plugin-manager/src/lib/remix-ui-plugin-manager.tsx
index 0a304a9759..1af73faf85 100644
--- a/libs/remix-ui/plugin-manager/src/lib/remix-ui-plugin-manager.tsx
+++ b/libs/remix-ui/plugin-manager/src/lib/remix-ui-plugin-manager.tsx
@@ -1,18 +1,18 @@
 /* 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}
diff --git a/libs/remix-ui/plugin-manager/src/types/types.d.ts b/libs/remix-ui/plugin-manager/src/types.d.ts
similarity index 99%
rename from libs/remix-ui/plugin-manager/src/types/types.d.ts
rename to libs/remix-ui/plugin-manager/src/types.d.ts
index 0ed16c4030..4e8326832e 100644
--- a/libs/remix-ui/plugin-manager/src/types/types.d.ts
+++ b/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.
diff --git a/libs/remix-ui/plugin-manager/src/types/query-params.d.ts b/libs/remix-ui/plugin-manager/src/types/query-params.d.ts
deleted file mode 100644
index 30ccbac126..0000000000
--- a/libs/remix-ui/plugin-manager/src/types/query-params.d.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export = QueryParams;
-// declare function QueryParams(_window: any): void;
-declare class QueryParams {
-  constructor(_window: any);
-    get: () => {};
-    update: (params: any) => void;
-}
diff --git a/libs/remix-ui/plugin-manager/src/types/registry.d.ts b/libs/remix-ui/plugin-manager/src/types/registry.d.ts
deleted file mode 100644
index 7257a4b711..0000000000
--- a/libs/remix-ui/plugin-manager/src/types/registry.d.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-declare class registry {
-  state: {};
-  put({ api, name }: {
-    api: any;
-    name: any;
-  }): any
-
-  get(name: any): any;
-}
-export = registry;
diff --git a/libs/remix-ui/plugin-manager/tsconfig.lib.json b/libs/remix-ui/plugin-manager/tsconfig.lib.json
index dcab4cfefc..4362d2c0cb 100644
--- a/libs/remix-ui/plugin-manager/tsconfig.lib.json
+++ b/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": [