feat(admin-ui): provide roles and permissions management screens in Admin UI #339

syntrydy · syntrydy · commit a6a41722541c · 2022-01-03T18:37:05.000+01:00
diff --git a/plugins/admin/components/Permissions/UiPermListPage.js b/plugins/admin/components/Permissions/UiPermListPage.js
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react'
+import React, { useEffect, useState } from 'react'
 import MaterialTable from 'material-table'
 import { Paper } from '@material-ui/core'
 import UiPermDetailPage from './UiPermDetailPage'
@@ -9,7 +9,12 @@ import { useTranslation } from 'react-i18next'
 import GluuViewWrapper from '../../../../app/routes/Apps/Gluu/GluuViewWrapper'
 import GluuRibbon from '../../../../app/routes/Apps/Gluu/GluuRibbon'
 import applicationStyle from '../../../../app/routes/Apps/Gluu/styles/applicationstyle'
-import { getPermissions } from '../../redux/actions/ApiPermissionActions'
+import {
+  getPermissions,
+  deletePermission,
+  editPermission,
+  addPermission,
+} from '../../redux/actions/ApiPermissionActions'
 import {
   hasPermission,
   buildPayload,
@@ -19,50 +24,39 @@ import {
 
 function UiPermListPage({ apiPerms, permissions, loading, dispatch }) {
   const { t } = useTranslation()
+  const [modal, setModal] = useState(false)
+  const toggle = () => setModal(!modal)
   const myActions = []
   const options = []
   const userAction = {}
   const pageSize = localStorage.getItem('paggingSize') || 10
   useEffect(() => {
-    buildPayload(userAction, 'PERMISSIONS', options)
-    dispatch(getPermissions(userAction))
+    doFetchList()
   }, [])
 
-  if (hasPermission(permissions, PERMISSION_READ)) {
-    myActions.push((aRow) => ({
-      icon: 'visibility',
-      iconProps: {
-        color: 'primary',
-        id: 'viewRole' + aRow.inum,
-      },
-      tooltip: `${t('messages.view_role_details')}`,
-      onClick: (e, v) => handleGoToPermissionEditPage(v, true),
-      disabled: false,
-    }))
-  }
-
-  if (hasPermission(permissions, PERMISSION_WRITE)) {
-    myActions.push((rowD) => ({
-      icon: 'edit',
-      iconProps: {
-        color: 'primary',
-        id: 'editRole' + rowD.inum,
-      },
-      tooltip: `${t('messages.edit_role')}`,
-      onClick: (e, entry) => handleGoToPermissionEditPage(entry, false),
-      disabled: false,
-    }))
-  }
   if (hasPermission(permissions, PERMISSION_WRITE)) {
     myActions.push({
       icon: 'add',
-      tooltip: `${t('messages.add_role')}`,
+      tooltip: `${t('messages.add_permission')}`,
       iconProps: { color: 'primary' },
       isFreeAction: true,
-      onClick: () => handleGoToPermissionAddPage(),
+      onClick: () => handleAddNewPermission(),
     })
   }
 
+  function handleAddNewPermission() {
+    toggle()
+  }
+  function doFetchList() {
+    buildPayload(userAction, 'PERMISSIONS', options)
+    dispatch(getPermissions(userAction))
+  }
+  function onAddConfirmed(roleData) {
+    buildPayload(userAction, 'message', roleData)
+    dispatch(addPermission(userAction))
+    toggle()
+    doFetchList()
+  }
   return (
     <Card>
       <GluuRibbon title={t('titles.roles')} fromLeft />
@@ -78,12 +72,13 @@ function UiPermListPage({ apiPerms, permissions, loading, dispatch }) {
               {
                 title: `${t('fields.name')}`,
                 field: 'permission',
+                editable: false,
                 width: '50%',
                 render: (rowData) => (
                   <Badge color="info">{rowData.permission}</Badge>
                 ),
               },
-              //{ title: `${t('fields.description')}`, field: 'description' },
+              { title: `${t('fields.description')}`, field: 'description' },
             ]}
             data={apiPerms}
             isLoading={loading || false}
@@ -103,6 +98,22 @@ function UiPermListPage({ apiPerms, permissions, loading, dispatch }) {
             detailPanel={(rowD) => {
               return <UiPermDetailPage row={rowD} />
             }}
+            editable={{
+              onRowUpdate: (newData, oldData) =>
+                new Promise((resolve, reject) => {
+                  buildPayload(userAction, 'Edit permision', newData)
+                  dispatch(editPermission(userAction))
+                  resolve()
+                  doFetchList()
+                }),
+              onRowDelete: (oldData) =>
+                new Promise((resolve, reject) => {
+                  buildPayload(userAction, 'Remove permission', oldData)
+                  dispatch(deletePermission(userAction))
+                  resolve()
+                  doFetchList()
+                }),
+            }}
           />
         </GluuViewWrapper>
       </CardBody>
diff --git a/plugins/admin/components/Roles/UiRoleListPage.js b/plugins/admin/components/Roles/UiRoleListPage.js
@@ -29,7 +29,6 @@ function UiRoleListPage({ apiRoles, permissions, loading, dispatch }) {
   const toggle = () => setModal(!modal)
   const myActions = []
   const options = []
-  const item = {}
   const userAction = {}
   const pageSize = localStorage.getItem('paggingSize') || 10
   useEffect(() => {
@@ -103,15 +102,15 @@ function UiRoleListPage({ apiRoles, permissions, loading, dispatch }) {
                 new Promise((resolve, reject) => {
                   buildPayload(userAction, 'Edit role', newData)
                   dispatch(editRole(userAction))
-                  doFetchList()
                   resolve()
+                  doFetchList()
                 }),
               onRowDelete: (oldData) =>
                 new Promise((resolve, reject) => {
                   buildPayload(userAction, 'remove role', oldData)
                   dispatch(deleteRole(userAction))
-                  doFetchList()
                   resolve()
+                  doFetchList()
                 }),
             }}
           />
diff --git a/plugins/admin/components/Roles/roles.js b/plugins/admin/components/Roles/roles.js
@@ -1,40 +1,40 @@
 export const roles = [
-  {
-    role: 'api-admin',
-    description:
-      'This role allows a user to access all list and search features available. Not possible for this role to perform edition nor deletion',
-    scopes: [
-      'https://jans.io/oauth/config/attributes.readonly',
-      'https://jans.io/oauth/config/acrs.readonly',
-    ],
-  },
-  {
-    role: 'api-viewer',
-    description:
-      'This role allows a user to perform all possible actions on api objects',
-    scopes: [
-      'https://jans.io/oauth/config/attributes.readonly',
-      'https://jans.io/oauth/config/acrs.readonly',
-    ],
-  },
-  {
-    role: 'api-editor',
-    description:
-      'This role allow a user to list, search, add and edit on all available objects excepts the configuration object which is critical for a running server',
-    scopes: [
-      'https://jans.io/oauth/config/attributes.readonly',
-      'https://jans.io/oauth/config/acrs.readonly',
-    ],
-  },
-  {
-    role: 'api-manager',
-    description:
-      'This role allows a user to list, search, add, edit and delete all available objects include the configuration object(only in view mode). The user cannot edit nor delete the configuration object.',
-    scopes: [
-      'https://jans.io/oauth/config/attributes.readonly',
-      'https://jans.io/oauth/config/acrs.readonly',
-    ],
-  },
-]
-
-export default roles
+    {
+      role: 'api-admin',
+      description:
+        'This role allows a user to access all list and search features available. Not possible for this role to perform edition nor deletion',
+      scopes: [
+        'https://jans.io/oauth/config/attributes.readonly',
+        'https://jans.io/oauth/config/acrs.readonly',
+      ],
+    },
+    {
+      role: 'api-viewer',
+      description:
+        'This role allows a user to perform all possible actions on api objects',
+      scopes: [
+        'https://jans.io/oauth/config/attributes.readonly',
+        'https://jans.io/oauth/config/acrs.readonly',
+      ],
+    },
+    {
+      role: 'api-editor',
+      description:
+        'This role allow a user to list, search, add and edit on all available objects excepts the configuration object which is critical for a running server',
+      scopes: [
+        'https://jans.io/oauth/config/attributes.readonly',
+        'https://jans.io/oauth/config/acrs.readonly',
+      ],
+    },
+    {
+      role: 'api-manager',
+      description:
+        'This role allows a user to list, search, add, edit and delete all available objects include the configuration object(only in view mode). The user cannot edit nor delete the configuration object.',
+      scopes: [
+        'https://jans.io/oauth/config/attributes.readonly',
+        'https://jans.io/oauth/config/acrs.readonly',
+      ],
+    },
+  ]
+  
+  export default roles
diff --git a/plugins/admin/redux/api/PermissionApi.js b/plugins/admin/redux/api/PermissionApi.js
@@ -10,27 +10,35 @@ export default class PermissionApi {
       })
     })
   }
-  getPermission = (options) => {
-    return new Promise((resolve, reject) => {
-      console.log('============= get single permission')
-    })
-  }
 
   addPermission = (data) => {
+    const options = {}
+    options['adminPermission'] = data
     return new Promise((resolve, reject) => {
       console.log('============= add permission')
+      this.api.addAdminuiPermission(options, (error, data) => {
+        this.handleResponse(error, reject, resolve, data)
+      })
     })
   }
 
   editPermission = (data) => {
+    const options = {}
+    options['adminPermission'] = data
     return new Promise((resolve, reject) => {
       console.log('=============edit permission')
+      this.api.editAdminuiPermission(options, (error, data) => {
+        this.handleResponse(error, reject, resolve, data)
+      })
     })
   }
-
-  deletePermission = async (inum) => {
+  permission
+  deletePermission = async (data) => {
     return new Promise((resolve, reject) => {
       console.log('=============delete permission')
+      this.api.deleteAdminuiPermission(data.role, (error, data) => {
+        this.handleResponse(error, reject, resolve, data)
+      })
     })
   }
 
