finishing plugin settings logic

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

@@ -1,14 +1,22 @@
-import React, { Fragment, useState } from 'react'
-import { PluginManagerSettings } from '../../../types'
+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
-  toPlugin?: string
-  funcObj?: {}
-  methodName?: string
-  fromPlugins?: {}
+}
 
+type DisplayPermissions = {
+  controlPluginName: {
+    controlPluginAction: {
+      pluginName: {
+        allow: boolean
+      }
+    }
+  }
 }
 
 function PermisssionsSettings ({ pluginSettings }: PermissionSettingsProps) {
@@ -16,11 +24,84 @@ function PermisssionsSettings ({ pluginSettings }: PermissionSettingsProps) {
    * Declare component local state
    */
   const [modalVisibility, setModalVisibility] = useState<boolean>(true)
-  const toPluginP = ''
-  const fromName = ''
-  const methodName = ''
+  const [permissions, setPermissions] = useState<PluginPermissions | null>(
+    JSON.parse(localStorage.getItem('plugins/permissions') || '{}'))
+  const [showPermissions, setShowPermissions] = useState<PluginPermissions[]>([])
+  const [akwaiPermission, setAkwaiPermission] = useState(false)
   const closeModal = () => setModalVisibility(true)
 
+  const displayPermissions = useCallback(() => {
+    if (permissions && Object.length > 0) {
+      setAkwaiPermission(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)
+
+  function ShowPluginHeading ({ headingName }) {
+    return (
+      <div className="pb-2 remixui_permissionKey">
+        <h3>{headingName} permissions:</h3>
+        <i
+          onClick={() => pluginSettings.clearAllPersmission('topLevelPluginNameP')}
+          className="far fa-trash-alt"
+          data-id={`pluginManagerSettingsClearAllPermission-${headingName}`}>
+
+        </i>
+      </div>
+    )
+  }
+
+  function ShowCheckBox ({ allow, pluginName, functionName, topLevelPluginName }: {
+    allow: boolean,
+    pluginName: string,
+    functionName: string,
+    topLevelPluginName: string
+  }) {
+    return (
+      <div className="form-group remixui_permissionKey">
+        <div className="remixui_checkbox">
+          <span className="mr-2">
+            <RemixUiCheckbox
+              onChange={() => {}}
+              checked={allow}
+              id={`permission-checkbox-${topLevelPluginName}-${functionName}-${pluginName}`}
+              aria-describedby={`module ${pluginName} asks permission for ${functionName}`}
+            />
+            <label
+              className="ml-4"
+              htmlFor={`permission-checkbox-${topLevelPluginName}-${functionName}-${topLevelPluginName}`}
+              data-id={`permission-label-${topLevelPluginName}-${functionName}-${topLevelPluginName}`}
+            >
+                Allow <u>{pluginName}</u> to call <u>{functionName}</u>
+            </label>
+          </span>
+        </div>
+      </div>
+    )
+  }
+
   return (
     <Fragment>
       <ModalDialog
@@ -28,24 +109,31 @@ function PermisssionsSettings ({ pluginSettings }: PermissionSettingsProps) {
         hide={modalVisibility}
         title="Plugin Manager Permissions"
       >
-        <div className="border p-2">
-          <div className="pb-2 remixui_permissionKey">
-            <h3>toPlugin permissions:</h3>
-            <i onClick={() => pluginSettings.clearAllPersmission(toPluginP)} className="far fa-trash-alt" data-id={`pluginManagerSettingsClearAllPermission-${toPluginP}`}></i>
+        {akwaiPermission ? (<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">
+            {
+              Object.keys(permissions).map(toplevelName => (
+                <ShowPluginHeading key={toplevelName} headingName={toplevelName} />
+              ))
+            }
+            {
+              Object.keys(permissions).forEach(topName => {
+                Object.keys(permissions[topName]).map(funcName => {
+                  return Object.keys(permissions[topName][funcName]).map(pluginName => (
+                    <ShowCheckBox
+                      allow={permissions.fileManager.writeFile[pluginName].allow}
+                      functionName={funcName}
+                      pluginName={pluginName}
+                      topLevelPluginName={topName}
+                      key={pluginName}
+                    />
+                  ))
+                })
+              })
+            }
           </div>
-          <form className="remixui_permissionForm" data-id="pluginManagerSettingsPermissionForm">
-            <h4>No Permission requested yet.</h4>
-            <div className="form-group remixui_permissionKey">
-              <div className="remixui_checkbox">
-                {/* { ShowPermissionsByMethod(pluginSettings.permissions).map(fromPluginPermissions => {
-
-                }) } */}
-                <label htmlFor="permission-checkbox-{toPlugin}-{methodName}-{toPlugin}" data-id="permission-label-{toPlugin}-{methodName}-{toPlugin}">Allow <u>{fromName}</u> to call <u>{methodName}</u></label>
-              </div>
-              <i onClick={() => pluginSettings.clearPersmission(fromName, toPluginP, methodName)} className="fa fa-trash-alt" data-id={`pluginManagerSettingsRemovePermission-${toPluginP}-${methodName}-${toPluginP}`}></i>
-            </div>
-          </form>
-        </div>
+        </form>
       </ModalDialog>
       <footer className="bg-light remixui_permissions remix-bg-opacity">
         <button

libs/remix-ui/plugin-manager/src/lib/useLocalStorage.ts

@@ -34,9 +34,14 @@ export const useWindowEvent: WindowEventHook = (eventName, handler) => {
 
 export const useLocalStorage = (key: string) => {
   // initialize the value from localStorage
-  const [currentValue, setCurrentValue] = useState<string | null>(() =>
-    localStorage.getItem(key)
-  )
+  const [currentValue, setCurrentValue] = useState<any | null>(() => {
+    const readFromStore = localStorage.getItem(key)
+    if (readFromStore) {
+      return JSON.parse(readFromStore)
+    } else {
+      localStorage.setItem('plugins/permissions', '{}')
+    }
+  })
 
   const handler = (e: StorageEvent) => {
     if (
@@ -53,7 +58,7 @@ export const useLocalStorage = (key: string) => {
 
   // update localStorage when the currentValue changes via setCurrentValue
   useEffect(() => {
-    localStorage.setItem(key, currentValue)
+    localStorage.setItem(key, JSON.stringify(currentValue))
   }, [key, currentValue])
 
   // use as const to tell TypeScript this is a tuple

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

@@ -66,13 +66,23 @@ export class PluginManagerSettings {
   currentSetting: any;
   onValidation(): void;
   /** Clear one permission from a plugin */
-  clearPersmission(from: any, to: any, method: any): void;
+  clearPersmission(from: string, to: string, method: string): void;
   /** Clear all persmissions from a plugin */
-  clearAllPersmission(to: any): void;
+  clearAllPersmission(to: string): void;
   settings(): any;
   render(): any;
 }
 
+export type PluginPermissions = {
+  fileManager : {
+    writeFile: {
+      pluginName: {
+        allow: boolean
+      }
+    }
+  }
+}
+
 export class PluginManagerComponent extends ViewPlugin extends Plugin implements PluginBase {
   constructor(appManager: RemixAppManager, engine: Engine)
   appManager: RemixAppManager