diff --git a/libs/remix-ui/plugin-manager/src/lib/components/permissionsSettings.tsx b/libs/remix-ui/plugin-manager/src/lib/components/permissionsSettings.tsx index cf6b99cd97..897d07e521 100644 --- a/libs/remix-ui/plugin-manager/src/lib/components/permissionsSettings.tsx +++ b/libs/remix-ui/plugin-manager/src/lib/components/permissionsSettings.tsx @@ -16,6 +16,7 @@ function PermisssionsSettings ({ pluginSettings }: PermissionSettingsProps) { */ const [modalVisibility, setModalVisibility] = useState(true) const [permissions, setPermissions] = useLocalStorage('plugins/permissions', {} as PluginPermissions) + const [checkBoxState, setCheckBoxState] = useState([]) const closeModal = () => setModalVisibility(true) const openModal = () => { const currentValue = JSON.parse(window.localStorage.getItem('plugins/permissions')) @@ -23,6 +24,13 @@ function PermisssionsSettings ({ pluginSettings }: PermissionSettingsProps) { setModalVisibility(!modalVisibility) } + const handleCheckboxClick = (position: number) => { + const updatedCheckedState = checkBoxState.map((item, index) => + index === position ? !item : item + ) + setCheckBoxState(updatedCheckedState) + } + function ShowPluginHeading ({ headingName }) { return (
@@ -39,60 +47,22 @@ function PermisssionsSettings ({ pluginSettings }: PermissionSettingsProps) { ) } - function ShowCheckBox ({ allow, pluginName, functionName, topLevelPluginName }: { - allow: boolean, - pluginName: string, - functionName: string, - topLevelPluginName: string - }) { - const [checkBoxState, setCheckBoxState] = useState(allow) - const [showPermissions, setShowPermissions] = useLocalStorage('plugins/permissions', {} as PluginPermissions) - - // useEffect(() => { - // console.log({ permissions }) - // }, [checkBoxState, permissions]) - - const handleCheckboxClick = () => { - const copyPermissions = showPermissions - copyPermissions[pluginName][functionName][topLevelPluginName].allow = !checkBoxState - setCheckBoxState(!checkBoxState) - setShowPermissions(copyPermissions) + useEffect(() => { + let newStates = [] + if (Object.keys(permissions).length > 0) { + Object.keys(permissions).map(topName => { + Object.keys(permissions[topName]).map(methodName => { + Object.keys(permissions[topName][methodName]).map(pluginName => { + newStates = checkBoxState.map(current => { + current = permissions[topName][methodName][pluginName].allow + }) + }) + }) + }) } - return ( -
- { showPermissions && Object.keys(showPermissions).length > 0 - ? ( - <>
- - - - -
{ - clearAllPersmissions(pluginName, topLevelPluginName, functionName) - } } - className="fa fa-trash-alt" - data-id={`pluginManagerSettingsRemovePermission-${topLevelPluginName}-${functionName}-${topLevelPluginName}`} /> - ) : null - } -
- ) - } + setCheckBoxState(newStates) + }, []) - useEffect(() => { - console.log({ permissions }) - }, [Object.keys(permissions).length]) function clearAllPersmissions (pluginName: string, topLevelPluginName: string, funcName: string) { const permissionsCopy = permissions // don't mutate state if (permissionsCopy[topLevelPluginName] && permissionsCopy[topLevelPluginName][funcName]) { @@ -138,14 +108,35 @@ function PermisssionsSettings ({ pluginSettings }: PermissionSettingsProps) { { permissions && Object.keys(permissions).length > 0 ? Object.keys(permissions).map(topName => { return Object.keys(permissions[topName]).map(funcName => { - return Object.keys(permissions[topName][funcName]).map(pluginName => ( - + return Object.keys(permissions[topName][funcName]).map((pluginName, index) => ( +
+ { permissions && Object.keys(permissions).length > 0 + ? ( + <>
+ + handleCheckboxClick(index)} + checked={permissions[topName][funcName][pluginName].allow} + id={`permission-checkbox-${topName}-${funcName}-${pluginName}`} + aria-describedby={`module ${pluginName} asks permission for ${funcName}`} /> + + +
{ + clearAllPersmissions(pluginName, topName, funcName) + } } + className="fa fa-trash-alt" + data-id={`pluginManagerSettingsRemovePermission-${topName}-${funcName}-${topName}`} /> + ) : null + } +
)) }) }) : null