finish refactor for inactive plugins, active plugins and plugin permissions

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

 import React, { Fragment, useCallback, useEffect, useState } from 'react'
 import { PluginManagerSettings, PluginPermissions } from '../../../types'
 import { ModalDialog } from '@remix-ui/modal-dialog'
-import { RemixUiCheckbox } from '@remix-ui/checkbox'
-import { useLocalStorage } from '../../useLocalStorage'
-import { type } from 'os'
 
 interface PermissionSettingsProps {
   pluginSettings: PluginManagerSettings
 }
 
-type DisplayPermissions = {
-  controlPluginName: {
-    controlPluginAction: {
-      pluginName: {
-        allow: boolean
-      }
-    }
-  }
-}
-
 function PermisssionsSettings ({ pluginSettings }: PermissionSettingsProps) {
   /**
    * Declare component local state
    */
   const [modalVisibility, setModalVisibility] = useState<boolean>(true)
-  const [permissions, setPermissions] = useState<PluginPermissions | null>(
+  const [permissions] = useState<PluginPermissions | null>(
     JSON.parse(localStorage.getItem('plugins/permissions') || '{}'))
-  const [showPermissions, setShowPermissions] = useState<PluginPermissions[]>([])
-  const [akwaiPermission, setAkwaiPermission] = useState(false)
+  const [verifyPermission, setVerifyPermission] = useState(false)
   const closeModal = () => setModalVisibility(true)
 
   const displayPermissions = useCallback(() => {
     if (permissions && Object.length > 0) {
-      setAkwaiPermission(true)
+      setVerifyPermission(true)
     }
   }, [permissions])
-  const getTopLevelPluginNames = useCallback(() => {
-    return Object.keys(permissions).map(pluginName => {
-      return pluginName
-    })
-  }, [permissions])
-
-  const getInnerPluginPermissionDetails = useCallback(() => {
-    const showPermissionsCopy = showPermissions
-    getTopLevelPluginNames().forEach(topLevelName => {
-      Object.keys(permissions[topLevelName]).forEach(functionName => {
-        Object.keys(permissions[topLevelName][functionName]).forEach(pluginName => {
-          showPermissionsCopy.push(permissions[topLevelName][functionName][pluginName])
-          setShowPermissions(showPermissionsCopy)
-        })
-      })
-    })
-  }, [getTopLevelPluginNames, permissions, showPermissions])
 
   useEffect(() => {
-    getInnerPluginPermissionDetails()
     displayPermissions()
-  }, [displayPermissions, getInnerPluginPermissionDetails, permissions, showPermissions])
-  console.log('fetched permissions', permissions)
+  }, [displayPermissions, permissions])
+  // console.log('fetched permissions', permissions)
 
   function ShowPluginHeading ({ headingName }) {
     return (
@@ -79,13 +47,23 @@ function PermisssionsSettings ({ pluginSettings }: PermissionSettingsProps) {
     functionName: string,
     topLevelPluginName: string
   }) {
+    const [checkBoxState, setCheckBoxState] = useState(allow)
+
+    useEffect(() => {
+
+    }, [checkBoxState])
+
+    const handleCheckboxClick = () => {
+      setCheckBoxState(!checkBoxState)
+    }
     return (
       <div className="form-group remixui_permissionKey">
         <div className="remixui_checkbox">
           <span className="mr-2">
-            <RemixUiCheckbox
-              onChange={() => {}}
-              checked={allow}
+            <input
+              type="checkbox"
+              onChange={handleCheckboxClick}
+              checked={checkBoxState}
               id={`permission-checkbox-${topLevelPluginName}-${functionName}-${pluginName}`}
               aria-describedby={`module ${pluginName} asks permission for ${functionName}`}
             />
@@ -98,6 +76,11 @@ function PermisssionsSettings ({ pluginSettings }: PermissionSettingsProps) {
             </label>
           </span>
         </div>
+        <i
+          onClick={() => pluginSettings.clearPersmission(pluginName, topLevelPluginName, functionName)}
+          className="fa fa-trash-alt"
+          data-id={`pluginManagerSettingsRemovePermission-${topLevelPluginName}-${functionName}-${topLevelPluginName}`}
+        />
       </div>
     )
   }
@@ -109,7 +92,7 @@ function PermisssionsSettings ({ pluginSettings }: PermissionSettingsProps) {
         hide={modalVisibility}
         title="Plugin Manager Permissions"
       >
-        {akwaiPermission ? (<h4 className="text-center">Current Permission Settings</h4>) : (<h4 className="text-center">No Permission requested yet.</h4>)}
+        {verifyPermission ? (<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="border p-2">
             {
@@ -118,11 +101,11 @@ function PermisssionsSettings ({ pluginSettings }: PermissionSettingsProps) {
               ))
             }
             {
-              Object.keys(permissions).forEach(topName => {
-                Object.keys(permissions[topName]).map(funcName => {
+              Object.keys(permissions).map(topName => {
+                return Object.keys(permissions[topName]).map(funcName => {
                   return Object.keys(permissions[topName][funcName]).map(pluginName => (
                     <ShowCheckBox
-                      allow={permissions.fileManager.writeFile[pluginName].allow}
+                      allow={permissions[topName][funcName][pluginName].allow}
                       functionName={funcName}
                       pluginName={pluginName}
                       topLevelPluginName={topName}

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

 /* eslint-disable no-debugger */
-import React, { Fragment, useEffect, useState } from 'react'
+import React, { Fragment, useCallback, useEffect, useState } from 'react'
 import ModuleHeading from './moduleHeading'
 import { ModalDialog } from '@remix-ui/modal-dialog'
 import { FormStateProps, PluginManagerComponent } from '../../types'
@@ -8,7 +8,7 @@ import PermisssionsSettings from './permissions/permissionsSettings'
 import { Profile } from '@remixproject/plugin-utils'
 import ActivePluginCard from './ActivePluginCard'
 import InactivePluginCard from './InactivePluginCard'
-import { GetNewlyActivatedPlugins, PersistNewInactivesState } from '../../pluginManagerStateMachine'
+import { PersistNewInactivesState, RemoveActivatedPlugin } from '../../pluginManagerStateMachine'
 
 const initialState: FormStateProps = {
   pname: 'test',
@@ -33,7 +33,10 @@ function RootView ({ pluginComponent }: RootViewProps) {
   const [filterPlugins, setFilterPlugin] = useState('')
   const [activeP, setActiveP] = useState<Profile[]>([])
   const [inactiveP, setInactiveP] = useState<Profile[]>([])
-  const [triggerRefresh, setTriggerRefresh] = useState(false)
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [_, setTriggerRefresh] = useState(false)
+  const [validInactiveProfiles] = useState<Profile[]>(JSON.parse(window.localStorage.getItem('updatedInactives')))
+  const [validActiveProfiles] = useState<Profile[]>(JSON.parse(window.localStorage.getItem('newActivePlugins')))
   function pluginChangeHandler<P extends keyof FormStateProps> (formProps: P, value: FormStateProps[P]) {
     setPlugin({ ...plugin, [formProps]: value })
   }
@@ -52,52 +55,90 @@ function RootView ({ pluginComponent }: RootViewProps) {
     setTriggerRefresh(true)
   }
 
-  useEffect(() => {
-    pluginComponent.getAndFilterPlugins(filterPlugins)
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [filterPlugins])
-
-  useEffect(() => {
-    if (pluginComponent.activePlugins && pluginComponent.activePlugins.length) {
-      setActiveP(pluginComponent.activePlugins)
-    }
-    // if (pluginComponent.inactivePlugins && pluginComponent.inactivePlugins.length) {
-    //   setInactiveP(pluginComponent.inactivePlugins)
-    // }
-    const validInactiveProfiles: Profile[] = JSON.parse(window.localStorage.getItem('updatedInactives'))
-    if (validInactiveProfiles && validInactiveProfiles.length) {
-      if (inactiveP.length > validInactiveProfiles.length) {
-        setInactiveP(validInactiveProfiles)
-      }
-    }
-    if (pluginComponent.inactivePlugins && pluginComponent.inactivePlugins.length) {
-      setInactiveP(pluginComponent.inactivePlugins)
+  const GetNewlyActivatedPlugins = useCallback((pluginComponent: PluginManagerComponent) => {
+    // const profiles: Profile[] = JSON.parse(window.localStorage.getItem('newActivePlugins'))
+    let isValid: boolean = false
+    // eslint-disable-next-line no-debugger
+    debugger
+    pluginComponent.activeProfiles.forEach(profileName => {
+      isValid = validActiveProfiles.some(profile => profile.name === profileName)
+    })
+    if (isValid) {
+      return validActiveProfiles
+    } else {
+      const profiles = validActiveProfiles // make a copy of state and don't mutate state directly
+      profiles.forEach(profile => {
+        if (!pluginComponent.activeProfiles.includes(profile.name)) {
+          RemoveActivatedPlugin(profile.name)
+        }
+      })
+      const newProfiles = JSON.parse(window.localStorage.getItem('newActivePlugins'))
+      return newProfiles
     }
-  }, [pluginComponent.activePlugins, pluginComponent.inactivePlugins, activeP, inactiveP, pluginComponent.activeProfiles, pluginComponent])
+  }, [validActiveProfiles])
 
   useEffect(() => {
     if (activeP.length === 0) {
-      const activeProfiles = GetNewlyActivatedPlugins()
+      const activeProfiles = GetNewlyActivatedPlugins(pluginComponent)
       if (activeProfiles !== null && activeProfiles.length) {
         setActiveP(activeProfiles)
       } else {
         setActiveP(pluginComponent.activePlugins)
       }
     }
-  }, [activeP, pluginComponent.activePlugins, syncInactiveProfiles])
+  }, [GetNewlyActivatedPlugins, activeP, pluginComponent, pluginComponent.activePlugins, syncInactiveProfiles])
 
   useEffect(() => {
-    syncInactiveProfiles()
+    pluginComponent.getAndFilterPlugins(filterPlugins)
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [inactiveP, triggerRefresh])
+  }, [filterPlugins])
 
   useEffect(() => {
-    const validInactiveProfiles: Profile[] = JSON.parse(window.localStorage.getItem('updatedInactives'))
-    if (validInactiveProfiles && validInactiveProfiles.length &&
-      inactiveP.length > validInactiveProfiles.length) {
-      setInactiveP(validInactiveProfiles)
+    if (pluginComponent.activePlugins && pluginComponent.activePlugins.length) {
+      setActiveP(pluginComponent.activePlugins)
+    }
+
+    if (pluginComponent.inactivePlugins && pluginComponent.inactivePlugins.length) {
+      setInactiveP(pluginComponent.inactivePlugins)
+    }
+    let inactivesCopy = []
+    if (validInactiveProfiles && validInactiveProfiles.length) {
+      if (validActiveProfiles && validActiveProfiles.length) {
+        validActiveProfiles.forEach(active => {
+          inactivesCopy = validInactiveProfiles.filter(inactive => inactive.name !== active.name)
+            .filter(inactive => inactive.displayName !== active.displayName)
+        })
+      }
+      console.log('inactivescopy length', validInactiveProfiles.length)
+      if (inactivesCopy.length) setInactiveP(validInactiveProfiles)
     }
-  }, [inactiveP, triggerRefresh])
+  }, [pluginComponent.activePlugins, pluginComponent.inactivePlugins, pluginComponent.activeProfiles, pluginComponent, validInactiveProfiles, inactiveP.length, validActiveProfiles])
+
+  // useEffect(() => {
+  //   if (validInactiveProfiles && validInactiveProfiles.length &&
+  //     inactiveP.length > validInactiveProfiles.length) {
+  //     setInactiveP(validInactiveProfiles)
+  //   }
+
+  //   let inactivesCopy = []
+  //   if (validInactiveProfiles && validInactiveProfiles.length) {
+  //     if (inactiveP.length > validInactiveProfiles.length) {
+  //       if (validActiveProfiles && validActiveProfiles.length) {
+  //         validActiveProfiles.forEach(active => {
+  //           inactivesCopy = validInactiveProfiles.filter(inactive => inactive !== active)
+  //             .filter(inactive => inactive.displayName !== active.displayName)
+  //         })
+  //       }
+  //       console.log('inactivescopy length', validInactiveProfiles.length)
+  //       if (inactivesCopy.length) setInactiveP(validInactiveProfiles)
+  //     }
+  //   }
+  // }, [inactiveP, triggerRefresh, validActiveProfiles, validInactiveProfiles])
+
+  // useEffect(() => {
+  //   syncInactiveProfiles()
+  // // eslint-disable-next-line react-hooks/exhaustive-deps
+  // }, [inactiveP, triggerRefresh])
 
   return (
     <Fragment>

libs/remix-ui/plugin-manager/src/pluginManagerStateMachine.ts

@@ -39,8 +39,9 @@ export async function PersistActivatedPlugin (pluginComponent: PluginManagerComp
   const activatedPlugins: Profile[] = JSON.parse(persisted)
 
   const newlyActivatedPlugins: Array<Profile> = []
+  const defaultActivated = defaultActivatedPlugins.includes(newPlugin.name) === false
   if (newPlugin) {
-    if (defaultActivatedPlugins.includes(newPlugin.name) === false) {
+    if (defaultActivated) {
       // if this is true then we are sure that the profile name is in localStorage/workspace
       if (activatedPlugins && activatedPlugins.length && !activatedPlugins.includes(newPlugin)) {
         await FetchAndPersistPlugin(pluginComponent, newPlugin, activatedPlugins)
@@ -83,12 +84,25 @@ export async function UpdateInactivePluginList (deactivatedPlugin: Profile, plug
   return tempArray
 }
 
-export function GetNewlyActivatedPlugins () {
-  const profiles = JSON.parse(window.localStorage.getItem('newActivePlugins'))
-  if (profiles && profiles.length > 0) {
+export function GetNewlyActivatedPlugins (pluginComponent: PluginManagerComponent) {
+  const profiles: Profile[] = JSON.parse(window.localStorage.getItem('newActivePlugins'))
+  let isValid: boolean = false
+  // eslint-disable-next-line no-debugger
+  debugger
+  pluginComponent.activeProfiles.forEach(profileName => {
+    isValid = profiles.some(profile => profile.name === profileName)
+  })
+  if (isValid) {
     return profiles
+  } else {
+    profiles.forEach(profile => {
+      if (!pluginComponent.activeProfiles.includes(profile.name)) {
+        RemoveActivatedPlugin(profile.name)
+      }
+    })
+    const newProfiles = JSON.parse(window.localStorage.getItem('newActivePlugins'))
+    return newProfiles
   }
-  return profiles
 }
 
 async function FetchAndPersistPlugin (pluginComponent: PluginManagerComponent, newPlugin: Profile<any>, newlyActivatedPlugins: Profile<any>[]) {
@@ -111,9 +125,10 @@ export function RemoveActivatedPlugin (pluginName: string) {
 }
 
 /**
- * gets the latest list of inactive plugin profiles and persist them
+ * Gets the latest list of inactive plugin profiles and persist them
  * in local storage
  * @param inactivesList Array of inactive plugin profiles
+ * @returns {void}
  */
 export function PersistNewInactivesState (inactivesList: Profile[]) {
   if (inactivesList && inactivesList.length) {