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

GluuFederation · Dec 3, 2021 · 1951b9c · 1951b9c
1 parent 96482db
commit 1951b9c
Show file tree

Hide file tree

Showing 8 changed files with 29 additions and 14 deletions.
diff --git a/app/locales/en/translation.json b/app/locales/en/translation.json
@@ -358,7 +358,9 @@
   },
   "titles": {
     "acrs": "ACRs",
+    "acrs_logging": "ACRs && Logging",
     "algorithmic_keys": "Algorithmic Keys",
+    "application_settings":"Application Settings",
     "all_attributes": "Attributes/Claims",
     "all_custom_scripts": "Custom Scripts",
     "all_oidc_clients": "OpenID Clients",
@@ -378,6 +380,7 @@
     "sql_authentication": "Sql Authentication",
     "logging": "LOGGING",
     "jwk_keys": "JWK keys",
+    "jans_json_property": "Jans Server JSON Configuration",
     "modules_properties": "Module Properties",
     "oauth_server_status_title": "OAuth server status",
     "oidc_clients": "OIDC Clients",

diff --git a/app/routes/Apps/Gluu/ribbon.js b/app/routes/Apps/Gluu/ribbon.js
@@ -4,7 +4,7 @@ export default {
     top: '11px',
     right: '-5px',
     padding: '0.5rem',
-    width: '12rem',
+    minWidth: '12rem',
     background: '#00C49F',
     zIndex: 3,
     color: 'white',
@@ -17,7 +17,7 @@ export default {
     top: '11px',
     left: '-5px',
     padding: '0.5rem',
-    width: '12rem',
+    minWidth: '12rem',
     background: '#00C49F',
     zIndex: 3,
     color: 'white',

diff --git a/plugins/admin/components/Configuration/LicenseDetailsPage.js b/plugins/admin/components/Configuration/LicenseDetailsPage.js
@@ -135,7 +135,7 @@ function LicenseDetailsPage({ item, loading, dispatch }) {
             ) : (
               <Alert severity="warning">
                 {!loading &&
-                  'The License Api is not enabled for this application.'}
+                  'The License API is not enabled for this application.'}
               </Alert>
             )}
           </GluuLoader>

diff --git a/plugins/admin/components/Settings/SettingsPage.js b/plugins/admin/components/Settings/SettingsPage.js
@@ -2,6 +2,7 @@ import React, { useState } from 'react'
 import { connect } from 'react-redux'
 import GluuLabel from '../../../../app/routes/Apps/Gluu/GluuLabel'
 import GluuTooltip from '../../../../app/routes/Apps/Gluu/GluuTooltip'
+import GluuRibbon from '../../../../app/routes/Apps/Gluu/GluuRibbon'
 import { SETTINGS } from '../../../../app/utils/ApiResources'
 
 import {
@@ -24,7 +25,11 @@ function SettingsPage() {
   return (
     <React.Fragment>
       <Card>
+        <GluuRibbon title="titles.application_settings" fromLeft doTranslate />
         <CardBody>
+          <FormGroup row> </FormGroup>
+          <FormGroup row> </FormGroup>
+          <FormGroup row> </FormGroup>
           <GluuTooltip doc_category={SETTINGS} doc_entry="pageSize">
             <FormGroup row>
               <GluuLabel label="List paging size" size={4} />

diff --git a/plugins/auth-server/components/Configuration/ConfigPage.js b/plugins/auth-server/components/Configuration/ConfigPage.js
@@ -3,6 +3,7 @@ import { FormGroup, Card, CardBody } from '../../../../app/components'
 import GluuLoader from '../../../../app/routes/Apps/Gluu/GluuLoader'
 import GluuCommitFooter from '../../../../app/routes/Apps/Gluu/GluuCommitFooter'
 import GluuCommitDialog from '../../../../app/routes/Apps/Gluu/GluuCommitDialog'
+import GluuRibbon from '../../../../app/routes/Apps/Gluu/GluuRibbon'
 import useExitPrompt from '../../../../app/routes/Apps/Gluu/useExitPrompt'
 import PropertyBuilder from './JsonPropertyBuilder'
 import { connect } from 'react-redux'
@@ -52,7 +53,11 @@ function ConfigPage({ configuration, loading, dispatch }) {
   return (
     <GluuLoader blocking={loading}>
       <Card>
+        <GluuRibbon title="titles.jans_json_property" fromLeft doTranslate />
         <CardBody style={{ minHeight: 500 }}>
+          <FormGroup row></FormGroup>
+          <FormGroup row></FormGroup>
+          <FormGroup row></FormGroup>
           {Object.keys(configuration).map((propKey, idx) => (
             <PropertyBuilder
               key={idx}

diff --git a/plugins/auth-server/components/Configuration/Defaults/DefaultConfigPage.js b/plugins/auth-server/components/Configuration/Defaults/DefaultConfigPage.js
@@ -8,8 +8,10 @@ import {
   Accordion,
   Card,
   CardBody,
+  FormGroup,
 } from '../../../../../app/components'
 import { getJsonConfig } from '../../../redux/actions/JsonConfigActions'
+import GluuRibbon from '../../../../../app/routes/Apps/Gluu/GluuRibbon'
 
 function DefaultConfigPage({ dispatch }) {
   const { t } = useTranslation()
@@ -20,7 +22,11 @@ function DefaultConfigPage({ dispatch }) {
     <React.Fragment>
       <Container>
         <Card>
+          <GluuRibbon title={t('titles.acrs_logging')} fromLeft />
           <CardBody>
+            <FormGroup row></FormGroup>
+            <FormGroup row></FormGroup>
+            <FormGroup row></FormGroup>
             <Accordion className="mb-2 b-primary" initialOpen>
               <Accordion.Header className="text-primary">
                 {t('titles.acrs').toUpperCase()}

diff --git a/plugins/auth-server/components/Configuration/Keys/KeysPage.js b/plugins/auth-server/components/Configuration/Keys/KeysPage.js
@@ -9,6 +9,7 @@ import {
 } from '../../../../../app/components'
 import JwksPage from './Jwks/JwksPage'
 import { useTranslation } from 'react-i18next'
+import GluuRibbon from '../../../../../app/routes/Apps/Gluu/GluuRibbon'
 
 function KeysPage() {
   const { t } = useTranslation()
@@ -19,7 +20,7 @@ function KeysPage() {
           <Nav pills className="mb-4 flex-column flex-md-row mt-4 mt-lg-0">
             <NavItem>
               <UncontrolledTabs.NavLink tabId="jwkpanel">
-                {t('titles.public_keys')}
+                <GluuRibbon title={t('titles.public_keys')} fromLeft />
               </UncontrolledTabs.NavLink>
             </NavItem>
           </Nav>

diff --git a/plugins/services-plugin/Components/Configuration/CachePage.js b/plugins/services-plugin/Components/Configuration/CachePage.js
@@ -14,6 +14,7 @@ import {
 import GluuFooter from '../../../../app/routes/Apps/Gluu/GluuFooter'
 import GluuLabel from '../../../../app/routes/Apps/Gluu/GluuLabel'
 import GluuTooltip from '../../../../app/routes/Apps/Gluu/GluuTooltip'
+import GluuRibbon from '../../../../app/routes/Apps/Gluu/GluuRibbon'
 import CacheInMemory from './CacheInMemory'
 import CacheRedis from './CacheRedis'
 import CacheNative from './CacheNative'
@@ -110,6 +111,10 @@ function CachePage({
           message={t('messages.request_waiting_message')}
         >
           <Card>
+            <GluuRibbon title={t('fields.cache_configuration')} fromLeft />
+            <FormGroup row> </FormGroup>
+            <FormGroup row> </FormGroup>
+            <FormGroup row> </FormGroup>
             <CardBody>
               <Formik
                 initialValues={INITIAL_VALUES}
@@ -179,16 +184,6 @@ function CachePage({
                 {(formik) => (
                   <Form onSubmit={formik.handleSubmit}>
                     <FormGroup row>
-                      <Col
-                        xs="12"
-                        style={{
-                          fontSize: 24,
-                          fontWeight: 'bold',
-                          marginBottom: 15,
-                        }}
-                      >
-                        {t('fields.cache_configuration')}
-                      </Col>
                       <GluuLabel label="fields.cache_provider_type" size={4} />
                       <Col sm={8}>
                         {cacheData.cacheProviderType && (