feat(admin-ui): design the layout for api role management #327

GluuFederation · Dec 7, 2021 · a3048ef · a3048ef
1 parent 056524c
commit a3048ef
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 30 deletions.
diff --git a/plugins/admin/components/Permissions/UiPermDetailPage.js b/plugins/admin/components/Permissions/UiPermDetailPage.js
@@ -7,21 +7,23 @@ function UiPermDetailPage({ row }) {
     <React.Fragment>
       <Container style={{ backgroundColor: '#F5F5F5' }}>
         <Row>
-          <Col sm={3}>
+          <Col sm={6}>
             <GluuFormDetailRow
               label="fields.name"
-              value={row.name}
+              value={row.permission}
               isBadge={true}
             />
           </Col>
-          <Col sm={9}>
-            <GluuFormDetailRow
-              label="fields.description"
-              value={row.description}
-              lsize={3}
-              rsize={9}
-            />
-          </Col>
+          {row.description && (
+            <Col sm={3}>
+              <GluuFormDetailRow
+                label="fields.description"
+                value={row.description}
+                lsize={3}
+                rsize={9}
+              />
+            </Col>
+          )}
         </Row>
       </Container>
     </React.Fragment>

diff --git a/plugins/admin/components/Permissions/UiPermListPage.js b/plugins/admin/components/Permissions/UiPermListPage.js
@@ -9,11 +9,7 @@ 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 {
-  deletePermission,
-  getPermissions,
-  setCurrentItem,
-} from '../../redux/actions/ApiPermissionActions'
+import { getPermissions } from '../../redux/actions/ApiPermissionActions'
 import {
   hasPermission,
   buildPayload,
@@ -22,7 +18,6 @@ import {
 } from '../../../../app/utils/PermChecker'
 
 function UiPermListPage({ apiPerms, permissions, loading, dispatch }) {
-  console.log('==========' + JSON.stringify(apiPerms))
   const { t } = useTranslation()
   const myActions = []
   const options = []
@@ -47,11 +42,11 @@ function UiPermListPage({ apiPerms, permissions, loading, dispatch }) {
   }
 
   if (hasPermission(permissions, SCRIPT_WRITE)) {
-    myActions.push((rowData) => ({
+    myActions.push((rowD) => ({
       icon: 'edit',
       iconProps: {
         color: 'primary',
-        id: 'editRole' + rowData.inum,
+        id: 'editRole' + rowD.inum,
       },
       tooltip: `${t('messages.edit_role')}`,
       onClick: (e, entry) => handleGoToRoleEditPage(entry, false),
@@ -83,8 +78,10 @@ function UiPermListPage({ apiPerms, permissions, loading, dispatch }) {
               {
                 title: `${t('fields.name')}`,
                 field: 'permission',
-                width: '20%',
-                render: (rowData) => <Badge color="info">{rowData.permission}</Badge>,
+                width: '50%',
+                render: (rowData) => (
+                  <Badge color="info">{rowData.permission}</Badge>
+                ),
               },
               //{ title: `${t('fields.description')}`, field: 'description' },
             ]}
@@ -103,8 +100,8 @@ function UiPermListPage({ apiPerms, permissions, loading, dispatch }) {
               headerStyle: applicationStyle.tableHeaderStyle,
               actionsColumnIndex: -1,
             }}
-            detailPanel={(rowData) => {
-              return <UiPermDetailPage row={rowData} />
+            detailPanel={(rowD) => {
+              return <UiPermDetailPage row={rowD} />
             }}
           />
         </GluuViewWrapper>

diff --git a/plugins/admin/components/Roles/UiRoleDetailPage.js b/plugins/admin/components/Roles/UiRoleDetailPage.js
@@ -10,7 +10,7 @@ function UiRoleDetailPage({ row }) {
           <Col sm={3}>
             <GluuFormDetailRow
               label="fields.name"
-              value={row.name}
+              value={row.role}
               isBadge={true}
             />
           </Col>

diff --git a/plugins/admin/components/Roles/UiRoleListPage.js b/plugins/admin/components/Roles/UiRoleListPage.js
@@ -9,11 +9,7 @@ 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 {
-  deleteRole,
-  getRoles,
-  setCurrentItem,
-} from '../../redux/actions/ApiRoleActions'
+import { getRoles } from '../../redux/actions/ApiRoleActions'
 import {
   hasPermission,
   buildPayload,
@@ -82,10 +78,10 @@ function UiRoleListPage({ apiRoles, permissions, loading, dispatch }) {
               {
                 title: `${t('fields.name')}`,
                 field: 'role',
-                width: '20%',
+                width: '40%',
                 render: (rowData) => <Badge color="info">{rowData.role}</Badge>,
               },
-              { title: `${t('fields.description')}`, field: 'description' },
+              //{ title: `${t('fields.description')}`, field: 'description' },
             ]}
             data={apiRoles}
             isLoading={loading || false}