Refactor prop requirements for pluginmanager

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

@@ -153,12 +153,6 @@ class PluginManagerComponent extends ViewPlugin {
     ReactDOM.render(
       <RemixUiPluginManager
         pluginComponent={this}
-        appManager={this.appManager}
-        engine={this.engine}
-        localPlugin={this.localPlugin}
-        activePluginNames={this.pluginNames}
-        _paq={_paq}
-        filter={this.filter}
       />,
       document.getElementById('pluginManager'))
   }

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

-import React from 'react'
+import React, { useState } from 'react'
 import { PluginManagerComponent } from '../../types'
 
 interface ActivateButtonProps {
@@ -12,7 +12,7 @@ function ActivateButton ({
   pluginName,
   pluginComponent
 }: ActivateButtonProps) {
-  const dataId = `pluginManagerComponent${buttonText}Button${pluginName}`
+  const [dataId] = useState(`pluginManagerComponent${buttonText}Button${pluginName}`)
 
   return (
     <button

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

-import React from 'react'
+import React, { useState } from 'react'
 import { PluginManagerComponent } from '../../types'
 
 interface DeactivateButtonProps {
@@ -12,7 +12,7 @@ function DeactivateButton ({
   pluginName,
   pluginComponent
 }: DeactivateButtonProps) {
-  const dataId = `pluginManagerComponent${buttonText}Button${pluginName}`
+  const [dataId] = useState(`pluginManagerComponent${buttonText}Button${pluginName}`)
   return (
     <button
       onClick={() => {

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

@@ -57,7 +57,7 @@ function RootView ({ pluginComponent }: RootViewProps) {
     if (pluginComponent.inactivePlugins && pluginComponent.inactivePlugins.length) {
       setInactiveP(pluginComponent.inactivePlugins)
     }
-  }, [pluginComponent.activePlugins, pluginComponent.inactivePlugins])
+  }, [pluginComponent.activePlugins, pluginComponent.inactivePlugins, activeP, inactiveP])
 
   return (
     <Fragment>

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

@@ -3,48 +3,6 @@ import { RemixUiPluginManagerProps } from '../types'
 import RootView from './components/rootView'
 import './remix-ui-plugin-manager.css'
 
-// const test = () => {
-//   const appManager = new RemixAppManager()
-//   const activePlugins: Profile<any>[] = new Array<Profile<any>>()
-//   const inactivePlugins: Profile<any>[] = new Array<Profile<any>>()
-//   const isFiltered = (profile) => (profile.displayName ? profile.displayName : profile.name).toLowerCase().includes(this.filter)
-//   const isNotRequired = (profile) => !appManager.isRequired(profile.name)
-//   const isNotDependent = (profile) => !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 { finalActives, finalInactives } =
-//   const tempArray = appManager.getAll()
-//     .filter(isFiltered)
-//     .filter(isNotRequired)
-//     .filter(isNotDependent)
-//     .filter(isNotHome)
-//     .sort(sortByName)
-
-//   tempArray.forEach(profile => {
-//     if (appManager.actives.includes(profile.name)) {
-//       activePlugins.push(profile)
-//     } else {
-//       inactivePlugins.push(profile)
-//     }
-//   })
-
-//   return { activePlugins, inactivePlugins }
-//   // .reduce(({ actives, inactives }, profile) => {
-//   //   return isActive(profile.name)
-//   //     ? { actives: [...actives, profile], inactives }
-//   //     : { inactives: [...inactives, profile], actives }
-//   // }, { actives: [], inactives: [] })
-
-//   // // eslint-disable-next-line no-debugger
-//   // // debugger
-//   // activePlugins = finalActives
-//   // inactivePlugins = finalInactives
-// }
-
 export const RemixUiPluginManager = (props: RemixUiPluginManagerProps) => {
   return (
     <RootView pluginComponent={props.pluginComponent}/>

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

@@ -150,12 +150,6 @@ export interface PluginManagerContextProviderProps {
 export interface RemixUiPluginManagerProps {
   appManager: RemixAppManager
   pluginComponent: PluginManagerComponent
-  pluginSettings: PluginManagerSettings // Window & typeof globalThis | []
-  activePluginNames: string[]
-  isActive?: (name: string) => boolean
-  filterPlugins: () => void
-  profile: Partial<PluginManagerProfile>
-  headingLabel: string
 }
 /** @class Reference loaders.
  *  A loader is a get,set based object which load a workspace from a defined sources.