fixed a bunch of plumbing with external persisted state of plugin manager

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

@@ -53,7 +53,7 @@ class PluginManagerComponent extends ViewPlugin {
   }
 
   triggerEngineEventListener () {
-    this.engine.event.on('onRegistration', () => this.getAndFilterPlugins())
+    this.engine.event.on('onRegistration', () => this.renderComponent())
   }
 
   /**
@@ -90,7 +90,7 @@ class PluginManagerComponent extends ViewPlugin {
     debugger
     this.call('manager', 'deactivatePlugin', name)
     _paq.push(['trackEvent', 'manager', 'deactivate', name])
-    this.getAndFilterPlugins()
+    this.renderComponent()
   }
 
   onActivation () {

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

@@ -1,7 +1,6 @@
 import { Profile } from '@remixproject/plugin-utils'
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { RemoveActivatedPlugin } from '../../pluginManagerStateMachine'
-// import { RemoveActivatedPlugin } from '../../pluginManagerStateMachine'
 import { PluginManagerComponent } from '../../types'
 import '../remix-ui-plugin-manager.css'
 interface PluginCardProps {
@@ -10,7 +9,7 @@ interface PluginCardProps {
   }
   pluginComponent: PluginManagerComponent
   buttonText: string
-  reRender: () => void
+  syncInactiveProfiles: () => void
 }
 
 // eslint-disable-next-line no-empty-pattern
@@ -18,7 +17,7 @@ function ActivePluginCard ({
   profile,
   pluginComponent,
   buttonText,
-  reRender
+  syncInactiveProfiles
 }: PluginCardProps) {
   const [displayName] = useState<string>((profile.displayName) ? profile.displayName : profile.name)
   const [docLink] = useState<JSX.Element>((profile.documentation) ? (
@@ -26,13 +25,16 @@ function ActivePluginCard ({
       <i aria-hidden="true" className="fas fa-book"/>
     </a>
   ) : null)
-
   const [versionWarning] = useState<JSX.Element>((profile.version && profile.version.match(/\b(\w*alpha\w*)\b/g)) ? (
     <small title="Version Alpha" className="remixui_versionWarning plugin-version">alpha</small>
   ) : (profile.version && profile.version.match(/\b(\w*beta\w*)\b/g)) ? (
     <small title="Version Beta" className="remixui_versionWarning plugin-version">beta</small>
   ) : null)
-  // const [stateManager] = useState<PluginManagerStateMachine>(new PluginManagerStateMachine(pluginComponent))
+  const [triggerRefresh, setTriggerRefresh] = useState(false)
+
+  useEffect(() => {
+
+  }, [triggerRefresh])
 
   return (
     <div className="list-group list-group-flush plugins-list-group" data-id="pluginManagerComponentActiveTile">
@@ -48,13 +50,10 @@ function ActivePluginCard ({
               <button
                 onClick={() => {
                   // pluginComponent.deactivateP(profile.name)
-                  console.log('calling pluginComponent.call directly...')
                   pluginComponent.call('manager', 'deactivatePlugin', profile.name)
-                  console.log('called pluginComponent.call successfully')
                   pluginComponent._paq.push(['trackEvent', 'manager', 'deactivate', profile.name])
-                  console.log('matomo tracking captured for deactivation successfully')
                   RemoveActivatedPlugin(profile.name)
-                  reRender()
+                  syncInactiveProfiles()
                 }}
                 className="btn btn-secondary btn-sm"
                 data-id={`pluginManagerComponentDeactivateButton${profile.name}`}

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

@@ -8,6 +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'
 
 const initialState: FormStateProps = {
   pname: 'test',
@@ -32,8 +33,7 @@ function RootView ({ pluginComponent }: RootViewProps) {
   const [filterPlugins, setFilterPlugin] = useState('')
   const [activeP, setActiveP] = useState<Profile[]>([])
   const [inactiveP, setInactiveP] = useState<Profile[]>([])
-  // const [storagePlugins, setStoragePlugins] = useLocalStorage('newActivePlugins')
+  const [triggerRefresh, setTriggerRefresh] = useState(false)
-
   function pluginChangeHandler<P extends keyof FormStateProps> (formProps: P, value: FormStateProps[P]) {
     setPlugin({ ...plugin, [formProps]: value })
   }
@@ -46,10 +46,10 @@ function RootView ({ pluginComponent }: RootViewProps) {
   }
   const closeModal = () => setVisible(true)
   // <-- End Modal Visibility States -->
-
+  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const reRender = () => {
+  const syncInactiveProfiles = () => {
-    pluginComponent.getAndFilterPlugins()
+    PersistNewInactivesState(inactiveP)
-    console.log('Called rerender after deactivating a plugin')
+    setTriggerRefresh(true)
   }
 
   useEffect(() => {
@@ -61,12 +61,44 @@ function RootView ({ pluginComponent }: RootViewProps) {
     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)
     }
-    console.log('contents of appManager', pluginComponent.appManager)
   }, [pluginComponent.activePlugins, pluginComponent.inactivePlugins, activeP, inactiveP, pluginComponent.activeProfiles, pluginComponent])
 
+  useEffect(() => {
+    if (activeP.length === 0) {
+      const activeProfiles = GetNewlyActivatedPlugins()
+      if (activeProfiles !== null && activeProfiles.length) {
+        setActiveP(activeProfiles)
+      } else {
+        setActiveP(pluginComponent.activePlugins)
+      }
+    }
+  }, [activeP, pluginComponent.activePlugins, syncInactiveProfiles])
+
+  useEffect(() => {
+    syncInactiveProfiles()
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [inactiveP, triggerRefresh])
+
+  useEffect(() => {
+    const validInactiveProfiles: Profile[] = JSON.parse(window.localStorage.getItem('updatedInactives'))
+    if (validInactiveProfiles && validInactiveProfiles.length &&
+      inactiveP.length > validInactiveProfiles.length) {
+      setInactiveP(validInactiveProfiles)
+    }
+  }, [inactiveP, triggerRefresh])
+
   return (
     <Fragment>
       <form id="local-plugin-form">
@@ -224,14 +256,14 @@ function RootView ({ pluginComponent }: RootViewProps) {
           </button>
         </header>
         <section data-id="pluginManagerComponentPluginManagerSection">
-          {activeP && <Fragment>
+          {(activeP && activeP.length > 0) && <Fragment>
             <ModuleHeading headingLabel="Active Modules" count={activeP.length} />
             {activeP.map((profile) => (
               <ActivePluginCard
                 buttonText="Deactivate"
                 key={profile.name}
                 profile={profile}
-                reRender={reRender}
+                syncInactiveProfiles={syncInactiveProfiles}
                 pluginComponent={pluginComponent}
               />
             ))}

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

@@ -42,7 +42,7 @@ export async function PersistActivatedPlugin (pluginComponent: PluginManagerComp
   if (newPlugin) {
     if (defaultActivatedPlugins.includes(newPlugin.name) === false) {
       // if this is true then we are sure that the profile name is in localStorage/workspace
-      if (activatedPlugins.length > 0 && !activatedPlugins.includes(newPlugin)) {
+      if (activatedPlugins && activatedPlugins.length && !activatedPlugins.includes(newPlugin)) {
         await FetchAndPersistPlugin(pluginComponent, newPlugin, activatedPlugins)
         localStorage.setItem('newActivePlugins', JSON.stringify(activatedPlugins))
       } else {
@@ -53,6 +53,44 @@ export async function PersistActivatedPlugin (pluginComponent: PluginManagerComp
   }
 }
 
+/**
+ * Update the list of inactive plugin profiles filtering based on a predetermined
+ * filter pipeline
+ * @param deactivatedPlugin plugin profile to be deactivated
+ * @param pluginComponent Plugin manager class which is the context for all operations
+ * @returns {Array} array of inactives
+ */
+export async function UpdateInactivePluginList (deactivatedPlugin: Profile, pluginComponent: PluginManagerComponent) {
+  const activated: Profile[] = JSON.parse(window.localStorage.getItem('newActivePlugins'))
+  const isFiltered = (profile) => (profile.displayName ? profile.displayName : profile.name)
+    .toLowerCase().includes(deactivatedPlugin.name)
+  const isNotActivated = (profile) => activated.includes(profile)
+  const isNotRequired = (profile) => !pluginComponent.appManager.isRequired(profile.name)
+  const isNotDependent = (profile) => !pluginComponent.appManager.isDependent(profile.name)
+  const isNotHome = (profile) => profile.name !== 'home'
+  const sortByName = (profileA, profileB) => {
+    const nameA = ((profileA.displayName) ? profileA.displayName : profileA.name).toUpperCase()
+    const nameB = ((profileB.displayName) ? profileB.displayName : profileB.name).toUpperCase()
+    return (nameA < nameB) ? -1 : (nameA > nameB) ? 1 : 0
+  }
+  const tempArray = pluginComponent.appManager.getAll()
+    .filter(isFiltered)
+    .filter(isNotActivated)
+    .filter(isNotRequired)
+    .filter(isNotDependent)
+    .filter(isNotHome)
+    .sort(sortByName)
+  return tempArray
+}
+
+export function GetNewlyActivatedPlugins () {
+  const profiles = JSON.parse(window.localStorage.getItem('newActivePlugins'))
+  if (profiles && profiles.length > 0) {
+    return profiles
+  }
+  return profiles
+}
+
 async function FetchAndPersistPlugin (pluginComponent: PluginManagerComponent, newPlugin: Profile<any>, newlyActivatedPlugins: Profile<any>[]) {
   try {
     const targetProfile = await pluginComponent.appManager.getProfile(newPlugin.name)
@@ -67,9 +105,18 @@ async function FetchAndPersistPlugin (pluginComponent: PluginManagerComponent, n
  * @param pluginName Name of plugin profile to be removed
  */
 export function RemoveActivatedPlugin (pluginName: string) {
-  // eslint-disable-next-line no-debugger
-  debugger
   const getWorkspacePlugins = JSON.parse(localStorage.getItem('newActivePlugins'))
-  const removeExisting = getWorkspacePlugins.filter(target => target.name === pluginName)
+  const removeExisting = getWorkspacePlugins.filter(target => target.name !== pluginName)
   localStorage.setItem('newActivePlugins', JSON.stringify(removeExisting))
 }
+
+/**
+ * gets the latest list of inactive plugin profiles and persist them
+ * in local storage
+ * @param inactivesList Array of inactive plugin profiles
+ */
+export function PersistNewInactivesState (inactivesList: Profile[]) {
+  if (inactivesList && inactivesList.length) {
+    localStorage.setItem('updatedInactives', JSON.stringify(inactivesList))
+  }
+}