Skip to content

Commit 056524c

Browse files
syntrydysyntrydy
committed
feat(admin-ui): design the layout for api role management #327 
1 parent a421a70 commit 056524c

File tree

6 files changed

+162
-3
lines changed

6 files changed

+162
-3
lines changed

‎plugins/admin/components/Permissions/UiPermDetailPage.js

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import React from 'react'
2+
import { Container, Row, Col } from '../../../../app/components'
3+
import GluuFormDetailRow from '../../../../app/routes/Apps/Gluu/GluuFormDetailRow'
4+
5+
function UiPermDetailPage({ row }) {
6+
return (
7+
<React.Fragment>
8+
<Container style={{ backgroundColor: '#F5F5F5' }}>
9+
<Row>
10+
<Col sm={3}>
11+
<GluuFormDetailRow
12+
label="fields.name"
13+
value={row.name}
14+
isBadge={true}
15+
/>
16+
</Col>
17+
<Col sm={9}>
18+
<GluuFormDetailRow
19+
label="fields.description"
20+
value={row.description}
21+
lsize={3}
22+
rsize={9}
23+
/>
24+
</Col>
25+
</Row>
26+
</Container>
27+
</React.Fragment>
28+
)
29+
}
30+
31+
export default UiPermDetailPage

‎plugins/admin/components/Permissions/UiPermListPage.js

+124
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
import React, { useEffect } from 'react'
2+
import MaterialTable from 'material-table'
3+
import { Paper } from '@material-ui/core'
4+
import UiPermDetailPage from './UiPermDetailPage'
5+
import { Badge } from 'reactstrap'
6+
import { connect } from 'react-redux'
7+
import { Card, CardBody, FormGroup } from '../../../../app/components'
8+
import { useTranslation } from 'react-i18next'
9+
import GluuViewWrapper from '../../../../app/routes/Apps/Gluu/GluuViewWrapper'
10+
import GluuRibbon from '../../../../app/routes/Apps/Gluu/GluuRibbon'
11+
import applicationStyle from '../../../../app/routes/Apps/Gluu/styles/applicationstyle'
12+
import {
13+
deletePermission,
14+
getPermissions,
15+
setCurrentItem,
16+
} from '../../redux/actions/ApiPermissionActions'
17+
import {
18+
hasPermission,
19+
buildPayload,
20+
SCRIPT_READ,
21+
SCRIPT_WRITE,
22+
} from '../../../../app/utils/PermChecker'
23+
24+
function UiPermListPage({ apiPerms, permissions, loading, dispatch }) {
25+
console.log('==========' + JSON.stringify(apiPerms))
26+
const { t } = useTranslation()
27+
const myActions = []
28+
const options = []
29+
const userAction = {}
30+
const pageSize = localStorage.getItem('paggingSize') || 10
31+
useEffect(() => {
32+
buildPayload(userAction, 'PERMISSIONS', options)
33+
dispatch(getPermissions(userAction))
34+
}, [])
35+
36+
if (hasPermission(permissions, SCRIPT_READ)) {
37+
myActions.push((rowData) => ({
38+
icon: 'visibility',
39+
iconProps: {
40+
color: 'primary',
41+
id: 'viewRole' + rowData.inum,
42+
},
43+
tooltip: `${t('messages.view_role_details')}`,
44+
onClick: (e, rowData) => handleGoToRoleEditPage(rowData, true),
45+
disabled: false,
46+
}))
47+
}
48+
49+
if (hasPermission(permissions, SCRIPT_WRITE)) {
50+
myActions.push((rowData) => ({
51+
icon: 'edit',
52+
iconProps: {
53+
color: 'primary',
54+
id: 'editRole' + rowData.inum,
55+
},
56+
tooltip: `${t('messages.edit_role')}`,
57+
onClick: (e, entry) => handleGoToRoleEditPage(entry, false),
58+
disabled: false,
59+
}))
60+
}
61+
if (hasPermission(permissions, SCRIPT_WRITE)) {
62+
myActions.push({
63+
icon: 'add',
64+
tooltip: `${t('messages.add_role')}`,
65+
iconProps: { color: 'primary' },
66+
isFreeAction: true,
67+
onClick: () => handleGoToRoleAddPage(),
68+
})
69+
}
70+
71+
return (
72+
<Card>
73+
<GluuRibbon title={t('titles.roles')} fromLeft />
74+
<CardBody>
75+
<FormGroup row />
76+
<FormGroup row />
77+
<GluuViewWrapper canShow={hasPermission(permissions, SCRIPT_READ)}>
78+
<MaterialTable
79+
components={{
80+
Container: (props) => <Paper {...props} elevation={0} />,
81+
}}
82+
columns={[
83+
{
84+
title: `${t('fields.name')}`,
85+
field: 'permission',
86+
width: '20%',
87+
render: (rowData) => <Badge color="info">{rowData.permission}</Badge>,
88+
},
89+
//{ title: `${t('fields.description')}`, field: 'description' },
90+
]}
91+
data={apiPerms}
92+
isLoading={loading || false}
93+
title=""
94+
actions={myActions}
95+
options={{
96+
search: true,
97+
searchFieldAlignment: 'left',
98+
selection: false,
99+
pageSize: pageSize,
100+
rowStyle: (rowData) => ({
101+
backgroundColor: rowData.enabled ? '#33AE9A' : '#FFF',
102+
}),
103+
headerStyle: applicationStyle.tableHeaderStyle,
104+
actionsColumnIndex: -1,
105+
}}
106+
detailPanel={(rowData) => {
107+
return <UiPermDetailPage row={rowData} />
108+
}}
109+
/>
110+
</GluuViewWrapper>
111+
</CardBody>
112+
</Card>
113+
)
114+
}
115+
116+
const mapStateToProps = (state) => {
117+
return {
118+
apiPerms: state.apiPermissionReducer.items,
119+
loading: state.apiPermissionReducer.loading,
120+
permissions: state.authReducer.permissions,
121+
}
122+
}
123+
124+
export default connect(mapStateToProps)(UiPermListPage)

‎plugins/admin/plugin-metadata.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import HealthPage from './components/Health/HealthPage'
22
import ReportPage from './components/Reports/ReportPage'
33
import LicenseDetailsPage from './components/Configuration/LicenseDetailsPage'
44
import UiRoleListPage from './components/Roles/UiRoleListPage'
5+
import UiPermListPage from './components/Permissions/UiPermListPage'
56
import MonthlyActiveUsersPage from './components/MonthlyActiveUsersPage'
67
import ScriptListPage from './components/CustomScripts/ScriptListPage'
78
import CustomScriptAddPage from './components/CustomScripts/CustomScriptAddPage'
@@ -93,7 +94,7 @@ const pluginMetadata = {
9394
permission: '/config/acrs.readonly',
9495
},
9596
{
96-
component: UiRoleListPage,
97+
component: UiPermListPage,
9798
path: PLUGIN_BASE_APTH + '/permissions',
9899
permission: '/config/acrs.readonly',
99100
},

‎plugins/admin/redux/actions/ApiPermissionActions.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import {
1212
SET_PERMISSION_ITEM,
1313
} from './types'
1414

15-
export const getPermisions = (action) => ({
15+
export const getPermissions = (action) => ({
1616
type: GET_PERMISSIONS,
1717
payload: { action },
1818
})

‎plugins/admin/redux/api/PermissionApi.js

+3
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,9 @@ export default class PermissionApi {
55
getPermissions = () => {
66
return new Promise((resolve, reject) => {
77
console.log('=============get permissions')
8+
this.api.getAdminuiPermissions((error, data) => {
9+
this.handleResponse(error, reject, resolve, data)
10+
})
811
})
912
}
1013
getPermission = (options) => {

‎plugins/admin/redux/sagas/ApiPermissionSaga.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ import { initAudit } from '../../../../app/redux/sagas/SagaUtils'
3434
function* newFunction() {
3535
const token = yield select((state) => state.authReducer.token.access_token)
3636
const issuer = yield select((state) => state.authReducer.issuer)
37-
const api = new JansConfigApi.CustomScriptsApi(
37+
const api = new JansConfigApi.AdminUIPermissionApi(
3838
getClient(JansConfigApi, token, issuer),
3939
)
4040
return new PermissionApi(api)

0 commit comments

Comments
 (0)