feat(admin-ui): additional refactoring #412

GluuFederation · Aug 31, 2022 · daa519f · daa519f
1 parent 0176f02
commit daa519f
Show file tree

Hide file tree

Showing 16 changed files with 71 additions and 87 deletions.
diff --git a/admin-ui/app/routes/Apps/Gluu/GluuAutoCompleteWithAdd.js b/admin-ui/app/routes/Apps/Gluu/GluuAutoCompleteWithAdd.js
@@ -3,7 +3,6 @@ import { FormGroup, Col, Row, Button, Input } from 'Components'
 import { Typeahead } from 'react-bootstrap-typeahead'
 import GluuLabel from '../Gluu/GluuLabel'
 import GluuTooltip from './GluuTooltip'
-import applicationStyle from './styles/applicationstyle'
 import { useTranslation } from 'react-i18next'
 import { ThemeContext } from 'Context/theme/themeContext'
 

diff --git a/admin-ui/app/routes/Apps/Gluu/GluuCommitDialog.js b/admin-ui/app/routes/Apps/Gluu/GluuCommitDialog.js
@@ -102,7 +102,6 @@ const GluuCommitDialog = ({
         </FormGroup>
       </ModalBody>
       <ModalFooter>
-        {/* <ClipLoader loading={loading} size={35} /> */}
         {active && (
           <Button color={`primary-${selectedTheme}`} onClick={handleAccept}>
             <i className="fa fa-check-circle mr-2"></i>

diff --git a/admin-ui/app/routes/Apps/Gluu/GluuLabel.js b/admin-ui/app/routes/Apps/Gluu/GluuLabel.js
@@ -2,6 +2,7 @@ import React from 'react'
 import { Label } from 'Components'
 import ReactTooltip from 'react-tooltip'
 import { useTranslation } from 'react-i18next'
+import applicationStyle from './styles/applicationstyle'
 
 function GluuLabel({ label, required, size, doc_category, doc_entry, style }) {
   const { t } = useTranslation()
@@ -15,7 +16,7 @@ function GluuLabel({ label, required, size, doc_category, doc_entry, style }) {
     <Label for={label} sm={getSize()} data-tip data-for={label} style={style}>
       <h5>
         {t(label)}
-        {required && <span style={{ color: 'red', fontSize: '22px' }}> *</span>}
+        {required && <span style={applicationStyle.fieldRequired}> *</span>}
         :
       </h5>
       {doc_category && (

diff --git a/admin-ui/app/routes/Apps/Gluu/GluuNameValuesProperty.js b/admin-ui/app/routes/Apps/Gluu/GluuNameValuesProperty.js
@@ -7,18 +7,14 @@ import { createTheme, ThemeProvider } from '@material-ui/core/styles'
 
 function GluuNameValuesProperty({
   formik,
-  name,
   label1,
   name1,
   placeholder1,
   label2,
   name2,
   placeholder2,
   value,
-  inputId,
   options,
-  validator,
-  items,
   dataArr,
 }) {
   const [dataArray, setDataArray] = useState(dataArr)

diff --git a/admin-ui/app/routes/Apps/Gluu/GluuNavBar.js b/admin-ui/app/routes/Apps/Gluu/GluuNavBar.js
@@ -5,7 +5,6 @@ import {
   Avatar,
   AvatarAddOn,
   DropdownToggle,
-  NavbarThemeProvider,
   Navbar,
   Nav,
   NavItem,

diff --git a/admin-ui/app/routes/Apps/Gluu/GluuRemovableInputRow.js b/admin-ui/app/routes/Apps/Gluu/GluuRemovableInputRow.js
@@ -2,6 +2,8 @@ import React from 'react'
 import { Col, FormGroup, Input } from 'Components'
 import GluuLabel from './GluuLabel'
 import GluuTooltip from './GluuTooltip'
+import applicationStyle from './styles/applicationstyle'
+
 function GluuRemovableInputRow({
   label,
   name,
@@ -34,16 +36,7 @@ function GluuRemovableInputRow({
           />
         </Col>
         <div
-          style={{
-            float: 'right',
-            justifyContent: 'center',
-            cursor: 'pointer',
-            padding: '5px',
-            width: '25px',
-            height: '25px',
-            marginTop: '0px',
-            marginRight: '-10px',
-          }}
+          style={applicationStyle.removableInputRow}
           onClick={handler}
         >
           <i className={'fa fa-fw fa-close'} style={{ color: 'red' }}></i>

diff --git a/admin-ui/app/routes/Apps/Gluu/GluuRemovableSelectRow.js b/admin-ui/app/routes/Apps/Gluu/GluuRemovableSelectRow.js
@@ -3,6 +3,7 @@ import GluuLabel from './GluuLabel'
 import { Col, FormGroup, CustomInput, InputGroup } from 'Components'
 import { useTranslation } from 'react-i18next'
 import GluuTooltip from './GluuTooltip'
+import applicationstyle from './styles/applicationstyle'
 
 function GluuRemovableSelectRow({
   label,
@@ -44,19 +45,7 @@ function GluuRemovableSelectRow({
             </CustomInput>
           </InputGroup>
         </Col>
-        <div
-          style={{
-            float: 'right',
-            justifyContent: 'center',
-            cursor: 'pointer',
-            padding: '5px',
-            width: '25px',
-            height: '25px',
-            marginTop: '0px',
-            marginRight: '-10px',
-          }}
-          onClick={handler}
-        >
+        <div style={applicationstyle.removableInputRow} onClick={handler}>
           <i className={'fa fa-fw fa-close'} style={{ color: 'red' }}></i>
         </div>
       </FormGroup>

diff --git a/admin-ui/app/routes/Apps/Gluu/GluuRemovableTypeAhead.js b/admin-ui/app/routes/Apps/Gluu/GluuRemovableTypeAhead.js
@@ -4,13 +4,13 @@ import { Col, FormGroup, CustomInput, InputGroup } from 'Components'
 import { useTranslation } from 'react-i18next'
 import GluuTooltip from './GluuTooltip'
 import { Typeahead } from 'react-bootstrap-typeahead'
+import applicationstyle from './styles/applicationstyle'
 
 function GluuRemovableTypeAhead({
   label,
   name,
   value,
   formik,
-  values,
   lsize,
   rsize,
   handler,
@@ -49,16 +49,7 @@ function GluuRemovableTypeAhead({
           </InputGroup>
         </Col>
         <div
-          style={{
-            float: 'right',
-            justifyContent: 'center',
-            cursor: 'pointer',
-            padding: '5px',
-            width: '25px',
-            height: '25px',
-            marginTop: '0px',
-            marginRight: '-10px',
-          }}
+          style={applicationstyle.removableInputRow}
           onClick={handler}
         >
           <i className={'fa fa-fw fa-close'} style={{ color: 'red' }}></i>

diff --git a/admin-ui/app/routes/Apps/Gluu/styles/applicationstyle.js b/admin-ui/app/routes/Apps/Gluu/styles/applicationstyle.js
@@ -38,4 +38,18 @@ export default {
     backgroundColor: '#F5F5F5',
     float: 'left',
   },
+  fieldRequired: {
+    color: 'red',
+    fontSize: '22px',
+  },
+ removableInputRow: {
+  float: 'right',
+  justifyContent: 'center',
+  cursor: 'pointer',
+  padding: '5px',
+  width: '25px',
+  height: '25px',
+  marginTop: '0px',
+  marginRight: '-10px',
+},
 }
diff --git a/admin-ui/app/routes/Dashboards/DashboardPage.js b/admin-ui/app/routes/Dashboards/DashboardPage.js
@@ -75,14 +75,18 @@ function DashboardPage({
     const currentMonth = date.getMonth() + 1
     const formattedMonth = currentMonth > 9 ? currentMonth : `0${currentMonth}`
     const yearMonth = `${currentYear}${formattedMonth}`
-    const currentMonthData = statData.find(({ month }) => month.toString() === yearMonth)
+    const currentMonthData = statData.find(
+      ({ month }) => month.toString() === yearMonth,
+    )
 
     const mau = currentMonthData?.mau
-    const token = currentMonthData?.authz_code_access_token_count + currentMonthData?.client_credentials_access_token_count
+    const token =
+      currentMonthData?.authz_code_access_token_count +
+      currentMonthData?.client_credentials_access_token_count
     if (mau) {
       setMauCount(mau)
     }
-    if(token) {
+    if (token) {
       setTokenCount(token)
     }
   }, [statData])
@@ -197,10 +201,7 @@ function DashboardPage({
   const StatusCard = () => {
     return (
       <Grid xs={12}>
-        <Paper
-          className={`${classes.statusContainer} ml-20`}
-          elevation={3}
-        >
+        <Paper className={`${classes.statusContainer} ml-20`} elevation={3}>
           <div className={classes.userInfoText}>
             <div className={classes.statusText}>
               <Box display="flex" justifyContent="flex-start">
@@ -287,11 +288,7 @@ function DashboardPage({
           style={{ background: themeColors.dashboard.supportCard }}
         >
           <div style={{ zIndex: 2 }}>
-            <img
-              src={Logo}
-              alt="logo"
-              className={classes.supportLogo}
-            />
+            <img src={Logo} alt="logo" className={classes.supportLogo} />
             <div className="mt-40">Gluu Services</div>
             <div className="mt-40">Community Support</div>
             <div className="mt-40">FAQ</div>
@@ -309,9 +306,7 @@ function DashboardPage({
             }}
           >
             <div className={classes.textVertical}>WORLD</div>
-            <div className={`${classes.textVertical} text-center`}>
-              WIDE
-            </div>
+            <div className={`${classes.textVertical} text-center`}>WIDE</div>
             <div className={`${classes.textVertical} text-right`}>
               SU<span className={`${classes.redText}`}>PP</span>ORT
             </div>
@@ -329,9 +324,7 @@ function DashboardPage({
         <div className={classes.root}>
           <Grid container className="px-40">
             <Grid item lg={breakDashboardCard ? 12 : 4} md={12}>
-              <h3 className="txt-white">
-                {t('dashboard.summary_title')}
-              </h3>
+              <h3 className="txt-white">{t('dashboard.summary_title')}</h3>
               <div className="mt-20">
                 {summaryData.map((data, key) => (
                   <Paper key={key} className={classes.summary}>
@@ -341,21 +334,27 @@ function DashboardPage({
                 ))}
               </div>
             </Grid>
-            <Grid item lg={breakDashboardCard ? 6 : 4} md={6} xs={12} style={{ width: '100%' }}>
+            <Grid
+              item
+              lg={breakDashboardCard ? 6 : 4}
+              md={6}
+              xs={12}
+              style={{ width: '100%' }}
+            >
               <Paper
                 className={`${classes.dashboardCard} top-minus-40`}
                 elevation={0}
                 spacing={2}
               >
                 <Grid className={classes.flex} container>
-                  <Grid
-                    item
-                    xs={12}
-                    className={isMobile ? 'mt-20' : ''}
-                  >
+                  <Grid item xs={12} className={isMobile ? 'mt-20' : ''}>
                     <Paper
                       className={classes.userInfo}
-                      style={isTabletOrMobile || breakDashboardCard ? { marginLeft: 0 } : {}}
+                      style={
+                        isTabletOrMobile || breakDashboardCard
+                          ? { marginLeft: 0 }
+                          : {}
+                      }
                       elevation={3}
                     >
                       <div className={classes.userInfoTitle}>
@@ -386,19 +385,31 @@ function DashboardPage({
                 </Grid>
               </Paper>
             </Grid>
-            <Grid item lg={breakDashboardCard ? 6 : 4} md={6} xs={12} style={{ width: '100%' }}>
+            <Grid
+              item
+              lg={breakDashboardCard ? 6 : 4}
+              md={6}
+              xs={12}
+              style={{ width: '100%' }}
+            >
               <StatusCard />
             </Grid>
           </Grid>
           <Grid container className={`px-40`}>
             <Grid lg={12} xs={12}>
-              <h3 className="text-white">{t('dashboard.access_tokens_graph')}</h3>
+              <h3 className="text-white">
+                {t('dashboard.access_tokens_graph')}
+              </h3>
               {isTabletOrMobile ? (
                 <Grid container className={`${classes.whiteBg}`}>
                   <Grid
                     xs={12}
                     item
-                    style={isTabletOrMobile ? { marginLeft: 40 } : { marginLeft: 40, marginBottom: 40 }}
+                    style={
+                      isTabletOrMobile
+                        ? { marginLeft: 40 }
+                        : { marginLeft: 40, marginBottom: 40 }
+                    }
                   >
                     <div>{t('dashboard.select_date_range')}</div>
                     <DateRange />
@@ -409,7 +420,13 @@ function DashboardPage({
                     style={isMobile ? mobileChartStyle : {}}
                     item
                   >
-                    <div className={isTabletOrMobile ? classes.chartContainerTable : classes.chartContainer}>
+                    <div
+                      className={
+                        isTabletOrMobile
+                          ? classes.chartContainerTable
+                          : classes.chartContainer
+                      }
+                    >
                       <DashboardChart />
                     </div>
                   </Grid>

diff --git a/admin-ui/app/routes/License/LicenseDetailsPage.test.js b/admin-ui/app/routes/License/LicenseDetailsPage.test.js
@@ -7,11 +7,6 @@ import i18n from '../../i18n'
 import { I18nextProvider } from 'react-i18next'
 import license from "./license"
 
-const permissions = [
-  'https://jans.io/oauth/config/attributes.readonly',
-  'https://jans.io/oauth/config/attributes.write',
-  'https://jans.io/oauth/config/attributes.delete',
-]
 const INIT_LICENSE_DETAIL_STATE = {
   item: license,
   loading: false,

diff --git a/admin-ui/plugins/auth-server/components/Clients/ClientBasicPanel.js b/admin-ui/plugins/auth-server/components/Clients/ClientBasicPanel.js
@@ -53,10 +53,6 @@ const ClientBasicPanel = ({
   )
   const [showClientSecret, setShowClientSecret] = useState(false)
 
-  function handleExpirable() {
-    setExpirable(!expirable)
-  }
-
   function getScopeMapping(exitingScopes, scopes) {
     if (!exitingScopes) {
       exitingScopes = []
@@ -67,9 +63,6 @@ const ClientBasicPanel = ({
   function uriValidator(uri) {
     return uri
   }
-  function postUriValidator(uri) {
-    return uri
-  }
   function handleClickShowClientSecret() {
     setShowClientSecret(!showClientSecret)
   }

diff --git a/admin-ui/plugins/auth-server/components/Configuration/ConfigPage.js b/admin-ui/plugins/auth-server/components/Configuration/ConfigPage.js
@@ -24,7 +24,7 @@ import { SIMPLE_PASSWORD_AUTH, FETCHING_SCRIPTS } from 'Plugins/auth-server/comm
 import { getAcrsConfig, editAcrs } from 'Plugins/auth-server/redux/actions/AcrsActions'
 import { getScripts } from 'Redux/actions/InitActions'
 
-function ConfigPage({ acrs, scripts, configuration, loading, dispatch, permissions }) {
+function ConfigPage({ acrs, scripts, configuration, dispatch, permissions }) {
   const { t } = useTranslation()
   const lSize = 6
   const userAction = {}

diff --git a/admin-ui/plugins/auth-server/components/Scopes/ScopeDetailPage.js b/admin-ui/plugins/auth-server/components/Scopes/ScopeDetailPage.js
@@ -6,7 +6,6 @@ import { useTranslation } from 'react-i18next'
 import { ThemeContext } from 'Context/theme/themeContext'
 
 function ScopeDetailPage({ row }) {
-  console.log("========================="+JSON.stringify(row))
   const { t } = useTranslation()
   const theme = useContext(ThemeContext)
   const selectedTheme = theme.state.theme

diff --git a/admin-ui/plugins/auth-server/components/Scopes/ScopeListPage.js b/admin-ui/plugins/auth-server/components/Scopes/ScopeListPage.js
@@ -57,7 +57,6 @@ function ScopeListPage({ scopes, permissions, loading, dispatch }) {
   const selectedTheme = theme.state.theme
   const themeColors = getThemeColor(selectedTheme)
   const bgThemeColor = { background: themeColors.background }
-  const classes = styles()
 
   SetTitle(t('titles.scopes'))
 

diff --git a/admin-ui/plugins/schema/components/Person/AttributeAddPage.js b/admin-ui/plugins/schema/components/Person/AttributeAddPage.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { connect } from 'react-redux'
 import { useHistory } from 'react-router-dom'
-import { Container, CardBody, Card } from 'Components'
+import { CardBody, Card } from 'Components'
 import AttributeForm from './AttributeForm'
 import { addAttribute } from 'Plugins/schema/redux/actions/AttributeActions'
 import applicationStyle from 'Routes/Apps/Gluu/styles/applicationstyle'