mirror
/
remix-project
mirror of https://github.com/ethereum/remix-project.git
2
0
Fork 0
Code Issues Releases Wiki Activity

finish refactor for inactive plugins, active plugins and plugin permissions

Browse Source
pull/5370/head
joseph izang 3 years ago
parent 60341df9c5
commit d1c833f1f7
3 changed files with 122 additions and 83 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 71
      libs/remix-ui/plugin-manager/src/lib/components/permissions/permissionsSettings.tsx
  2. 105
      libs/remix-ui/plugin-manager/src/lib/components/rootView.tsx
  3. 27
      libs/remix-ui/plugin-manager/src/pluginManagerStateMachine.ts

71
libs/remix-ui/plugin-manager/src/lib/components/permissions/permissionsSettings.tsx
Unescape View File

@ -1,63 +1,31 @@
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}

105
libs/remix-ui/plugin-manager/src/lib/components/rootView.tsx
Unescape View File

@ -1,5 +1,5 @@
/* 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)
}
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)
}
if (pluginComponent.inactivePlugins && pluginComponent.inactivePlugins.length) {
setInactiveP(pluginComponent.inactivePlugins)
})
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)
})
}
}, [inactiveP, triggerRefresh])
console.log('inactivescopy length', validInactiveProfiles.length)
if (inactivesCopy.length) setInactiveP(validInactiveProfiles)
}
}, [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>

27
libs/remix-ui/plugin-manager/src/pluginManagerStateMachine.ts
Unescape View File

@ -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) {

Write Preview
Loading…
Cancel
Save