resolved merge conflict in permissionsSettings.tsx

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

@@ -67,7 +67,7 @@ class PluginManagerComponent extends ViewPlugin {
       this.engine.register(localPlugin)
       this.appManager.activatePlugin(localPlugin.profile.name)
       this.getAndFilterPlugins()
-      localStorage.setItem('plugins/local', JSON.stringify(localPlugin))
+      localStorage.setItem('plugins/local', JSON.stringify(localPlugin.profile))
     }
   }
 

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

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import React, { useReducer, useState } from 'react'
+import React, { useEffect, useReducer, useState } from 'react'
 import { ModalDialog } from '@remix-ui/modal-dialog'
 import { Toaster } from '@remix-ui/toaster'
 import { IframePlugin, WebsocketPlugin } from '@remixproject/engine-web'
@@ -35,7 +35,6 @@ const defaultProfile = {
 
 function LocalPluginForm ({ closeModal, visible, pluginManager }: LocalPluginFormProps) {
   const [errorMsg, dispatchToastMsg] = useReducer(localPluginToastReducer, '')
-  const [defaultPlugin] = useState<FormStateProps>(JSON.parse(localStorage.getItem('plugins/local')) || defaultProfile)
   const [name, setName] = useState<string>('')
   const [displayName, setDisplayName] = useState<string>('')
   const [url, setUrl] = useState<string>('')
@@ -43,6 +42,16 @@ function LocalPluginForm ({ closeModal, visible, pluginManager }: LocalPluginFor
   const [location, setLocation] = useState<'sidePanel' | 'mainPanel' | 'none'>('sidePanel')
   const [methods, setMethods] = useState<string>('')
 
+  useEffect(() => {
+    const storagePlugin:FormStateProps = localStorage.getItem('plugins/local') ? JSON.parse(localStorage.getItem('plugins/local')) : defaultProfile
+    setName(storagePlugin.name)
+    setUrl(storagePlugin.url)
+    setLocation(storagePlugin.location as 'sidePanel' | 'mainPanel' | 'none')
+    setMethods(storagePlugin.methods)
+    setType(storagePlugin.type)
+    setDisplayName(storagePlugin.displayName)
+  }, [])
+
   const handleModalOkClick = async () => {
     try {
       if (!name) throw new Error('Plugin should have a name')
@@ -97,7 +106,7 @@ function LocalPluginForm ({ closeModal, visible, pluginManager }: LocalPluginFor
           <input
             className="form-control"
             onChange={e => setName(e.target.value)}
-            value={ name || defaultPlugin.name }
+            value={ name}
             id="plugin-name"
             data-id="localPluginName"
             placeholder="Should be camelCase" />
@@ -107,7 +116,7 @@ function LocalPluginForm ({ closeModal, visible, pluginManager }: LocalPluginFor
           <input
             className="form-control"
             onChange={e => setDisplayName(e.target.value)}
-            value={ displayName || defaultPlugin.displayName }
+            value={ displayName }
             id="plugin-displayname"
             data-id="localPluginDisplayName"
             placeholder="Name in the header" />
@@ -117,7 +126,7 @@ function LocalPluginForm ({ closeModal, visible, pluginManager }: LocalPluginFor
           <input
             className="form-control"
             onChange={e => setMethods(e.target.value)}
-            value={ methods || defaultPlugin.methods }
+            value={ methods }
             id="plugin-methods"
             data-id="localPluginMethods"
             placeholder="Name in the header" />
@@ -128,7 +137,7 @@ function LocalPluginForm ({ closeModal, visible, pluginManager }: LocalPluginFor
           <input
             className="form-control"
             onChange={e => setUrl(e.target.value)}
-            value={ url || defaultPlugin.url }
+            value={ url }
             id="plugin-url"
             data-id="localPluginUrl"
             placeholder="ex: https://localhost:8000" />

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

@@ -19,7 +19,7 @@ function PermisssionsSettings ({ pluginSettings }: PermissionSettingsProps) {
   const [checkBoxState, setCheckBoxState] = useState<boolean[]>([])
   const closeModal = () => setModalVisibility(true)
   const openModal = () => {
-    const currentValue = JSON.parse(window.localStorage.getItem('plugins/permissions'))
+    const currentValue = JSON.parse(window.localStorage.getItem('plugins/permissions') || '{}')
     setPermissions(currentValue)
     setModalVisibility(!modalVisibility)
   }
@@ -63,6 +63,8 @@ function PermisssionsSettings ({ pluginSettings }: PermissionSettingsProps) {
     setCheckBoxState(newStates)
   }, [])
 
+  useEffect(() => {
+  }, [Object.keys(permissions).length])
   function clearAllPersmissions (pluginName: string, topLevelPluginName: string, funcName: string) {
     const permissionsCopy = permissions // don't mutate state
     if (permissionsCopy[topLevelPluginName] && permissionsCopy[topLevelPluginName][funcName]) {

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

@@ -33,7 +33,6 @@ function RootView ({ pluginComponent, pluginManagerSettings, children }: RootVie
   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">

libs/remix-ui/plugin-manager/src/lib/custom-hooks/useLocalStorage.ts

@@ -1,40 +1,3 @@
-// import { useState } from 'react'
-
-// // Hook
-// export const useLocalStorage = (key: string, initialValue: any) => {
-//   // State to store our value
-//   // Pass initial state function to useState so logic is only executed once
-//   const [storedValue, setStoredValue] = useState<any>(() => {
-//     try {
-//       // Get from local storage by key
-//       const item = window.localStorage.getItem(key)
-//       // Parse stored json or if none return initialValue
-//       return item ? JSON.parse(item) : initialValue
-//     } catch (error) {
-//       // If error also return initialValue
-//       console.log(error)
-//       return initialValue
-//     }
-//   })
-//   // Return a wrapped version of useState's setter function that ...
-//   // ... persists the new value to localStorage.
-//   const setValue = (value: any | ((val: any) => any)) => {
-//     try {
-//       // Allow value to be a function so we have same API as useState
-//       const valueToStore =
-//         value instanceof Function ? value(storedValue) : value
-//       // Save state
-//       setStoredValue(valueToStore)
-//       // Save to local storage
-//       window.localStorage.setItem(key, JSON.stringify(valueToStore))
-//     } catch (error) {
-//       // A more advanced implementation would handle the error case
-//       console.log(error)
-//     }
-//   }
-//   return [storedValue, setValue] as const
-// }
-
 import { Dispatch, SetStateAction, useEffect, useState } from 'react'
 
 type SetValue<T> = Dispatch<SetStateAction<T>>

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

@@ -10,7 +10,6 @@ import './remix-ui-plugin-manager.css'
 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} pluginManagerSettings={pluginManagerSettings}>
       <section data-id="pluginManagerComponentPluginManagerSection">