perms dialog

libs/remix-ui/app/src/lib/remix-app/remix-app.tsx

@@ -8,6 +8,7 @@ import DragBar from './components/dragbar/dragbar'
 import { AppProvider } from './context/provider'
 import AppDialogs from './components/modals/dialogs'
 import DialogViewPlugin from './components/modals/dialogViewPlugin'
+import { Permissionhandler } from '@remix-ui/permission-handler'
 
 interface IRemixAppUi {
   app: any
@@ -104,6 +105,7 @@ const RemixApp = (props: IRemixAppUi) => {
       {components.hiddenPanel}
       <AppDialogs></AppDialogs>
       <DialogViewPlugin></DialogViewPlugin>
+      <Permissionhandler></Permissionhandler>
     </AppProvider>
   )
 }

libs/remix-ui/permission-handler/.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["@nrwl/react/babel"],
+  "plugins": []
+}

libs/remix-ui/permission-handler/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+  "extends": ["plugin:@nrwl/nx/react", "../../../.eslintrc"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

libs/remix-ui/permission-handler/src/index.ts

@@ -0,0 +1 @@
+export { default as Permissionhandler } from './lib/permission-handler'

libs/remix-ui/permission-handler/src/interface/index.ts

@@ -0,0 +1,13 @@
+import { IconProfile } from 'libs/remix-ui/vertical-icons-panel/src/lib/components/Icon'
+
+export interface PermissionHandlerValue {
+    from: IconProfile,
+    to: IconProfile,
+    remember: boolean,
+    method: string,
+    message: string
+}
+
+export interface PermissionHandlerProps {
+    value: PermissionHandlerValue
+}

libs/remix-ui/permission-handler/src/lib/permission-dialog.tsx

@@ -0,0 +1,63 @@
+import React, { useContext, useEffect, useRef, useState } from 'react' // eslint-disable-line
+import { PermissionHandlerProps } from '../interface'
+import './permission-dialog.css'
+
+const PermissionHandlerDialog = (props: PermissionHandlerProps) => {
+  const { from, to, remember, method, message } = props.value
+
+  const switchMode = () => {
+
+  }
+
+  const rememberSwitch = () => {
+    return <input type="checkbox" onChange={switchMode} className='form-check-input' id='remember' data-id={remember ? 'permissionHandlerRememberChecked' : 'permissionHandlerRememberUnchecked'}/>
+  }
+  const reset = () => {
+
+  }
+
+  const imgFrom = () => { return <img alt='' id='permissionModalImagesFrom' src={from.icon} /> }
+  const imgTo = () => { return <img alt='' id='permissionModalImagesTo' src={to.icon} /> }
+  const pluginsImages = () => {
+    return (
+      <article className='images'>
+        {imgFrom}
+        <i className="fas fa-arrow-right"></i>
+        {imgTo}
+      </article>
+    )
+  }
+
+  const text = () => {
+    return `"${from.displayName}" ${(remember ? 'has changed and' : '')} would like to access to "${method}" of "${to.displayName}"`
+  }
+
+  const pluginMessage = () => {
+    return message
+      ? <div>
+        <h6>Description</h6>
+        <p>{message}</p>
+      </div> : null
+  }
+
+  return (<section className="permission">
+    {pluginsImages}
+    <article>
+      <h4 data-id="permissionHandlerMessage">{text} :</h4>
+      <h6>{from.displayName}</h6>
+      <p> {from.description} || <i>No description Provided</i></p>
+      <h6>{to.displayName} :</h6>
+      <p> {to.description} || <i>No description Provided</i></p>
+      {pluginMessage}
+    </article>
+    <article className='remember'>
+      <div className='form-check'>
+        {rememberSwitch}
+        <label className="form-check-label" data-id="permissionHandlerRememberChoice">Remember this choice</label>
+      </div>
+      <button className="btn btn-sm" onClick={reset}>Reset all Permissions</button>
+    </article>
+  </section>)
+}
+
+export default PermissionHandlerDialog

libs/remix-ui/permission-handler/src/lib/permission-handler.tsx

@@ -0,0 +1,25 @@
+import { useDialogDispatchers } from 'libs/remix-ui/app/src/lib/remix-app/context/provider'
+import React, { useContext, useEffect, useRef, useState } from 'react' // eslint-disable-line
+import { PermissionHandlerValue } from '../interface'
+import PermissionHandlerDialog from './permission-dialog'
+
+const PermissionHandler = () => {
+  const { alert, toast, modal } = useDialogDispatchers()
+  const [value, setValue] = useState<PermissionHandlerValue>()
+  useEffect(() => {
+    if (value) {
+      modal({
+        id: 'PermissionHandler',
+        title: 'permissions',
+        message: <PermissionHandlerDialog value={value}></PermissionHandlerDialog>,
+        okFn: () => {},
+        cancelFn: () => {},
+        okLabel: 'sure',
+        cancelLabel: 'no'
+      })
+    }
+  }, [value])
+  return (<></>)
+}
+
+export default PermissionHandler

libs/remix-ui/permission-handler/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "allowJs": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    }
+  ]
+}

libs/remix-ui/permission-handler/tsconfig.lib.json

@@ -0,0 +1,13 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "types": ["node"]
+  },
+  "files": [
+    "../../../node_modules/@nrwl/react/typings/cssmodule.d.ts",
+    "../../../node_modules/@nrwl/react/typings/image.d.ts"
+  ],
+  "exclude": ["**/*.spec.ts", "**/*.spec.tsx"],
+  "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
+}

nx.json

@@ -159,6 +159,9 @@
     },
     "remix-ui-run-tab": {
       "tags": []
+    },
+    "remix-ui-permission-handler": {
+      "tags": []
     }
   },
   "targetDependencies": {

tsconfig.base.json

@@ -76,7 +76,8 @@
       "@remix-ui/panel": ["libs/remix-ui/panel/src/index.ts"],
       "@remix-ui/editor-context-view": ["libs/remix-ui/editor-context-view/src/index.ts"],
       "@remix-ui/solidity-unit-testing": ["libs/remix-ui/solidity-unit-testing/src/index.ts"],
-      "@remix-ui/run-tab": ["libs/remix-ui/run-tab/src/index.ts"]
+      "@remix-ui/run-tab": ["libs/remix-ui/run-tab/src/index.ts"],
+      "@remix-ui/permission-handler": ["libs/remix-ui/permission-handler/src/index.ts"]
     }
   },
   "exclude": ["node_modules", "tmp"]

workspace.json

@@ -1170,6 +1170,21 @@
           }
         }
       }
+    },
+    "remix-ui-permission-handler": {
+      "root": "libs/remix-ui/permission-handler",
+      "sourceRoot": "libs/remix-ui/permission-handler/src",
+      "projectType": "library",
+      "architect": {
+        "lint": {
+          "builder": "@nrwl/linter:lint",
+          "options": {
+            "linter": "eslint",
+            "tsConfig": ["libs/remix-ui/permission-handler/tsconfig.lib.json"],
+            "exclude": ["**/node_modules/**", "libs/remix-ui/permission-handler/**/*.d.ts", "!libs/remix-ui/permission-handler/**/*"]
+          }
+        }
+      }
     }
   },
   "cli": {