Skip to content

Commit b5d7bf9

Browse files
syntrydysyntrydy
committed
feat(admin-ui): design the layout for api role management #327 
1 parent 1951b9c commit b5d7bf9

File tree

12 files changed

+489
-396
lines changed

12 files changed

+489
-396
lines changed

‎app/locales/en/translation.json

+7-7
Original file line numberDiff line numberDiff line change
@@ -370,26 +370,26 @@
370370
"client_basic": "Basic",
371371
"client_encryption_signing": "Encryption/Signing",
372372
"client_scripts": "Client Scripts",
373-
"config_api_roles": "Config Api Roles",
373+
"config_api_roles": "Config API Roles",
374374
"connectionUri": "Connection URI",
375375
"custom_scripts": "All Custom Scripts",
376376
"database_status_title": "Database status",
377377
"detail_information": "Detailed information",
378378
"detail_contact": "Detail Contact",
379-
"ldap_authentication": "Ldap Authentication",
380-
"sql_authentication": "Sql Authentication",
379+
"ldap_authentication": "LDAP Authentication",
380+
"sql_authentication": "SQL Authentication",
381381
"logging": "LOGGING",
382382
"jwk_keys": "JWK keys",
383383
"jans_json_property": "Jans Server JSON Configuration",
384384
"modules_properties": "Module Properties",
385385
"oauth_server_status_title": "OAuth server status",
386-
"oidc_clients": "OIDC Clients",
386+
"oidc_clients": "OpenID Connect Clients",
387387
"private_keys": "Private Keys",
388388
"public_keys": "Public Keys",
389389
"profile_detail": "Profile Details",
390-
"roles": "AdminUI Roles",
391-
"scopes": "Scopes",
392-
"scripts": "Scripts",
390+
"roles": "Config API Roles",
391+
"scopes": "OpenID/OAuth Scopes",
392+
"scripts": "Custom Interception Scripts",
393393
"schemaName": "Schema Name"
394394
},
395395
"links": {

‎app/routes/Apps/Gluu/GluuFormDetailRow.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ function GluuFormDetailRow({
1616
return (
1717
<GluuTooltip doc_category={doc_category} doc_entry={doc_entry || label}>
1818
<FormGroup row>
19-
<Label for={label} sm={lsize || 6}>
19+
<Label for={label} style={{ fontWeight: 'bold' }} sm={lsize || 6}>
2020
{t(label)}:
2121
</Label>
2222
<Label for={value} sm={rsize || 6}>

‎app/routes/Apps/Gluu/GluuRibbon.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react'
2-
import mystyle from './ribbon'
2+
import mystyle from './styles/ribbon'
33
import { useTranslation } from 'react-i18next'
44

55
function GluuRibbon({ title, fromLeft, doTranslate }) {

‎app/routes/Apps/Gluu/styles/applicationstyle.js

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
export default {
2+
tableHeaderStyle: {
3+
backgroundColor: '#03a96d',
4+
color: '#FFF',
5+
padding: '2px',
6+
textTransform: 'uppercase',
7+
fontSize: '18px',
8+
},
9+
}

‎app/routes/Apps/Gluu/ribbon.js renamed to ‎app/routes/Apps/Gluu/styles/ribbon.js

+4-2
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,10 @@ export default {
44
top: '11px',
55
right: '-5px',
66
padding: '0.5rem',
7+
fontWeight: 'bold',
78
minWidth: '12rem',
8-
background: '#00C49F',
9+
//background: '#00C49F',
10+
background: 'linear-gradient(90deg, #00C9FF 0%, #92FE9D 100%)',
911
zIndex: 3,
1012
color: 'white',
1113
borderRadius: '50px 0px 0px 50px',
@@ -18,7 +20,7 @@ export default {
1820
left: '-5px',
1921
padding: '0.5rem',
2022
minWidth: '12rem',
21-
background: '#00C49F',
23+
background: 'linear-gradient(90deg, #00C9FF 0%, #92FE9D 100%)',
2224
zIndex: 3,
2325
color: 'white',
2426
borderRadius: '0px 50px 50px 0px',

‎plugins/admin/components/CustomScripts/ScriptListPage.js

+59-53
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,16 @@
11
import React, { useState, useEffect } from 'react'
22
import MaterialTable from 'material-table'
33
import { useHistory } from 'react-router-dom'
4+
import { Paper } from '@material-ui/core'
45
import { Badge } from 'reactstrap'
56
import { connect } from 'react-redux'
67
import GluuDialog from '../../../../app/routes/Apps/Gluu/GluuDialog'
8+
import { Card, CardBody, FormGroup } from '../../../../app/components'
9+
import GluuRibbon from '../../../../app/routes/Apps/Gluu/GluuRibbon'
710
import CustomScriptDetailPage from './CustomScriptDetailPage'
811
import GluuCustomScriptSearch from '../../../../app/routes/Apps/Gluu/GluuCustomScriptSearch'
912
import GluuViewWrapper from '../../../../app/routes/Apps/Gluu/GluuViewWrapper'
13+
import applicationStyle from '../../../../app/routes/Apps/Gluu/styles/applicationstyle'
1014
import {
1115
deleteCustomScript,
1216
getCustomScriptByType,
@@ -158,59 +162,61 @@ function ScriptListTable({ scripts, loading, dispatch, permissions }) {
158162
toggle()
159163
}
160164
return (
161-
<React.Fragment>
162-
<GluuViewWrapper canShow={hasPermission(permissions, SCRIPT_READ)}>
163-
<MaterialTable
164-
columns={[
165-
{ title: `${t('fields.inum')}`, field: 'inum' },
166-
{ title: `${t('fields.name')}`, field: 'name' },
167-
{
168-
title: `${t('options.enabled')}`,
169-
field: 'enabled',
170-
type: 'boolean',
171-
render: (rowData) => (
172-
<Badge color={rowData.enabled == 'true' ? 'primary' : 'info'}>
173-
{rowData.enabled ? 'true' : 'false'}
174-
</Badge>
175-
),
176-
},
177-
]}
178-
data={selectedScripts}
179-
isLoading={loading}
180-
title={t('titles.scripts')}
181-
actions={myActions}
182-
options={{
183-
search: false,
184-
searchFieldAlignment: 'left',
185-
selection: false,
186-
pageSize: pageSize,
187-
rowStyle: (rowData) => ({
188-
backgroundColor: rowData.enabled ? '#33AE9A' : '#FFF',
189-
}),
190-
headerStyle: {
191-
backgroundColor: '#03a96d',
192-
color: '#FFF',
193-
padding: '2px',
194-
textTransform: 'uppercase',
195-
fontSize: '18px',
196-
},
197-
actionsColumnIndex: -1,
198-
}}
199-
detailPanel={(rowData) => {
200-
return <CustomScriptDetailPage row={rowData} />
201-
}}
202-
/>
203-
</GluuViewWrapper>
204-
{hasPermission(permissions, SCRIPT_DELETE) && (
205-
<GluuDialog
206-
row={item}
207-
handler={toggle}
208-
modal={modal}
209-
subject="script"
210-
onAccept={onDeletionConfirmed}
211-
/>
212-
)}
213-
</React.Fragment>
165+
<Card>
166+
<GluuRibbon title={t('titles.scripts')} fromLeft />
167+
<CardBody>
168+
<FormGroup row />
169+
<FormGroup row />
170+
<GluuViewWrapper canShow={hasPermission(permissions, SCRIPT_READ)}>
171+
<MaterialTable
172+
components={{
173+
Container: (props) => <Paper {...props} elevation={0} />,
174+
}}
175+
columns={[
176+
{ title: `${t('fields.inum')}`, field: 'inum' },
177+
{ title: `${t('fields.name')}`, field: 'name' },
178+
{
179+
title: `${t('options.enabled')}`,
180+
field: 'enabled',
181+
type: 'boolean',
182+
render: (rowData) => (
183+
<Badge color={rowData.enabled == 'true' ? 'primary' : 'info'}>
184+
{rowData.enabled ? 'true' : 'false'}
185+
</Badge>
186+
),
187+
},
188+
]}
189+
data={selectedScripts}
190+
isLoading={loading}
191+
title=""
192+
actions={myActions}
193+
options={{
194+
search: false,
195+
searchFieldAlignment: 'left',
196+
selection: false,
197+
pageSize: pageSize,
198+
rowStyle: (rowData) => ({
199+
backgroundColor: rowData.enabled ? '#33AE9A' : '#FFF',
200+
}),
201+
headerStyle: applicationStyle.tableHeaderStyle,
202+
actionsColumnIndex: -1,
203+
}}
204+
detailPanel={(rowData) => {
205+
return <CustomScriptDetailPage row={rowData} />
206+
}}
207+
/>
208+
</GluuViewWrapper>
209+
{hasPermission(permissions, SCRIPT_DELETE) && (
210+
<GluuDialog
211+
row={item}
212+
handler={toggle}
213+
modal={modal}
214+
subject="script"
215+
onAccept={onDeletionConfirmed}
216+
/>
217+
)}
218+
</CardBody>
219+
</Card>
214220
)
215221
}
216222

‎plugins/admin/components/Roles/UiRoleListPage.js

+86-40
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,102 @@
11
import React from 'react'
22
import MaterialTable from 'material-table'
3+
import { Paper } from '@material-ui/core'
34
import UiRoleDetailPage from './UiRoleDetailPage'
45
import { Badge } from 'reactstrap'
56
import { connect } from 'react-redux'
7+
import { Card, CardBody, FormGroup } from '../../../../app/components'
68
import { useTranslation } from 'react-i18next'
79
import GluuViewWrapper from '../../../../app/routes/Apps/Gluu/GluuViewWrapper'
8-
import { hasPermission, SCRIPT_READ } from '../../../../app/utils/PermChecker'
10+
import GluuRibbon from '../../../../app/routes/Apps/Gluu/GluuRibbon'
11+
import applicationStyle from '../../../../app/routes/Apps/Gluu/styles/applicationstyle'
12+
import {
13+
hasPermission,
14+
SCRIPT_READ,
15+
SCRIPT_WRITE,
16+
} from '../../../../app/utils/PermChecker'
917

1018
function UiRoleListPage({ apiRoles, permissions, loading }) {
1119
const { t } = useTranslation()
20+
const myActions = []
1221
const pageSize = localStorage.getItem('paggingSize') || 10
1322

23+
if (hasPermission(permissions, SCRIPT_READ)) {
24+
myActions.push((rowData) => ({
25+
icon: 'visibility',
26+
iconProps: {
27+
color: 'primary',
28+
id: 'viewRole' + rowData.inum,
29+
},
30+
tooltip: `${t('messages.view_role_details')}`,
31+
onClick: (e, rowData) => handleGoToRoleEditPage(rowData, true),
32+
disabled: false,
33+
}))
34+
}
35+
36+
if (hasPermission(permissions, SCRIPT_WRITE)) {
37+
myActions.push((rowData) => ({
38+
icon: 'edit',
39+
iconProps: {
40+
color: 'primary',
41+
id: 'editRole' + rowData.inum,
42+
},
43+
tooltip: `${t('messages.edit_role')}`,
44+
onClick: (e, entry) => handleGoToRoleEditPage(entry, false),
45+
disabled: false,
46+
}))
47+
}
48+
if (hasPermission(permissions, SCRIPT_WRITE)) {
49+
myActions.push({
50+
icon: 'add',
51+
tooltip: `${t('messages.add_role')}`,
52+
iconProps: { color: 'primary' },
53+
isFreeAction: true,
54+
onClick: () => handleGoToRoleAddPage(),
55+
})
56+
}
57+
1458
return (
15-
<React.Fragment>
16-
<GluuViewWrapper canShow={hasPermission(permissions, SCRIPT_READ)}>
17-
<MaterialTable
18-
columns={[
19-
{
20-
title: `${t('fields.name')}`,
21-
field: 'name',
22-
width: '20%',
23-
render: (rowData) => <Badge color="info">{rowData.name}</Badge>,
24-
},
25-
{ title: `${t('fields.description')}`, field: 'description' },
26-
]}
27-
data={apiRoles}
28-
isLoading={loading || false}
29-
title={t('titles.roles')}
30-
actions={[]}
31-
options={{
32-
search: false,
33-
searchFieldAlignment: 'left',
34-
selection: false,
35-
pageSize: pageSize,
36-
rowStyle: (rowData) => ({
37-
backgroundColor: rowData.enabled ? '#33AE9A' : '#FFF',
38-
}),
39-
headerStyle: {
40-
backgroundColor: '#03a96d',
41-
color: '#FFF',
42-
padding: '2px',
43-
textTransform: 'uppercase',
44-
fontSize: '18px',
45-
},
46-
actionsColumnIndex: -1,
47-
}}
48-
detailPanel={(rowData) => {
49-
return <UiRoleDetailPage row={rowData} />
50-
}}
51-
/>
52-
</GluuViewWrapper>
53-
</React.Fragment>
59+
<Card>
60+
<GluuRibbon title={t('titles.roles')} fromLeft />
61+
<CardBody>
62+
<FormGroup row />
63+
<FormGroup row />
64+
<GluuViewWrapper canShow={hasPermission(permissions, SCRIPT_READ)}>
65+
<MaterialTable
66+
components={{
67+
Container: (props) => <Paper {...props} elevation={0} />,
68+
}}
69+
columns={[
70+
{
71+
title: `${t('fields.name')}`,
72+
field: 'name',
73+
width: '20%',
74+
render: (rowData) => <Badge color="info">{rowData.name}</Badge>,
75+
},
76+
{ title: `${t('fields.description')}`, field: 'description' },
77+
]}
78+
data={apiRoles}
79+
isLoading={loading || false}
80+
title=""
81+
actions={myActions}
82+
options={{
83+
search: true,
84+
searchFieldAlignment: 'left',
85+
selection: false,
86+
pageSize: pageSize,
87+
rowStyle: (rowData) => ({
88+
backgroundColor: rowData.enabled ? '#33AE9A' : '#FFF',
89+
}),
90+
headerStyle: applicationStyle.tableHeaderStyle,
91+
actionsColumnIndex: -1,
92+
}}
93+
detailPanel={(rowData) => {
94+
return <UiRoleDetailPage row={rowData} />
95+
}}
96+
/>
97+
</GluuViewWrapper>
98+
</CardBody>
99+
</Card>
54100
)
55101
}
56102

0 commit comments

Comments
 (0)