From d1c833f1f749bad119d16a076c4f937d90f1a77f Mon Sep 17 00:00:00 2001 From: joseph izang Date: Wed, 28 Jul 2021 12:22:41 +0100 Subject: [PATCH] finish refactor for inactive plugins, active plugins and plugin permissions --- .../permissions/permissionsSettings.tsx | 71 +++++------- .../src/lib/components/rootView.tsx | 107 ++++++++++++------ .../src/pluginManagerStateMachine.ts | 27 ++++- 3 files changed, 122 insertions(+), 83 deletions(-) diff --git a/libs/remix-ui/plugin-manager/src/lib/components/permissions/permissionsSettings.tsx b/libs/remix-ui/plugin-manager/src/lib/components/permissions/permissionsSettings.tsx index c5e6fde419..b1605c0073 100644 --- a/libs/remix-ui/plugin-manager/src/lib/components/permissions/permissionsSettings.tsx +++ b/libs/remix-ui/plugin-manager/src/lib/components/permissions/permissionsSettings.tsx @@ -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(true) - const [permissions, setPermissions] = useState( + const [permissions] = useState( JSON.parse(localStorage.getItem('plugins/permissions') || '{}')) - const [showPermissions, setShowPermissions] = useState([]) - 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 (
- {}} - checked={allow} + @@ -98,6 +76,11 @@ function PermisssionsSettings ({ pluginSettings }: PermissionSettingsProps) {
+ pluginSettings.clearPersmission(pluginName, topLevelPluginName, functionName)} + className="fa fa-trash-alt" + data-id={`pluginManagerSettingsRemovePermission-${topLevelPluginName}-${functionName}-${topLevelPluginName}`} + />
) } @@ -109,7 +92,7 @@ function PermisssionsSettings ({ pluginSettings }: PermissionSettingsProps) { hide={modalVisibility} title="Plugin Manager Permissions" > - {akwaiPermission ? (

Current Permission Settings

) : (

No Permission requested yet.

)} + {verifyPermission ? (

Current Permission Settings

) : (

No Permission requested yet.

)}
{ @@ -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 => ( ([]) const [inactiveP, setInactiveP] = useState([]) - const [triggerRefresh, setTriggerRefresh] = useState(false) + // eslint-disable-next-line @typescript-eslint/no-unused-vars + const [_, setTriggerRefresh] = useState(false) + const [validInactiveProfiles] = useState(JSON.parse(window.localStorage.getItem('updatedInactives'))) + const [validActiveProfiles] = useState(JSON.parse(window.localStorage.getItem('newActivePlugins'))) function pluginChangeHandler

(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 ( diff --git a/libs/remix-ui/plugin-manager/src/pluginManagerStateMachine.ts b/libs/remix-ui/plugin-manager/src/pluginManagerStateMachine.ts index 65a1acddd3..3ab6760821 100644 --- a/libs/remix-ui/plugin-manager/src/pluginManagerStateMachine.ts +++ b/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 = [] + 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, newlyActivatedPlugins: Profile[]) { @@ -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) {