fix(admin-ui): resolve all bugs displayed for admin-ui #308

GluuFederation · Nov 16, 2021 · fa7b08d · fa7b08d
1 parent b35a6e1
commit fa7b08d
Show file tree

Hide file tree

Showing 9 changed files with 81 additions and 89 deletions.
diff --git a/app/routes/Apps/Gluu/GluuAutoCompleteWithAdd.js b/app/routes/Apps/Gluu/GluuAutoCompleteWithAdd.js
@@ -30,11 +30,10 @@ function GluuAutoCompleteWithAdd({
     }
   }
 
-  const handleChange = (name, selected) => {
-    console.log(selected)
+  const handleChange = (elementName, selected) => {
     setItems(selected)
     setOpts(selected)
-    formik.setFieldValue(name, items)
+    formik.setFieldValue(elementName, items)
   }
 
   return (

diff --git a/app/routes/Apps/Gluu/GluuErrorFallBack.js b/app/routes/Apps/Gluu/GluuErrorFallBack.js
@@ -1,9 +1,6 @@
 import React from 'react'
 
-function GluuErrorFallBack({ error, resetErrorBoundary }) {
-  function logger(error) {
-    console.log(error.message)
-  }
+function GluuErrorFallBack({ error}) {
   return (
     <div role="alert">
       <pre>{error.message}</pre>

diff --git a/app/routes/Apps/Gluu/GluuModal.js b/app/routes/Apps/Gluu/GluuModal.js
@@ -11,10 +11,6 @@ import { useTranslation } from 'react-i18next'
 
 function GluuModal({ title, modal, handler, onAccept }) {
   const { t } = useTranslation()
-  let uri = ''
-  function savePress(e) {
-    uri = document.getElementById('uri').value
-  }
   return (
     <Modal isOpen={modal} toggle={handler} className="modal-outline-primary">
       <ModalHeader toggle={handler}>

diff --git a/app/routes/Apps/Gluu/Tests/GluuAppSiderbar.test.js b/app/routes/Apps/Gluu/Tests/GluuAppSiderbar.test.js
@@ -1,52 +1,25 @@
 import React from 'react'
-import { render, screen } from '@testing-library/react'
+import { render } from '@testing-library/react'
 import GluuAppSidebar from '../GluuAppSidebar'
 import { combineReducers } from 'redux'
 import { BrowserRouter as Router } from 'react-router-dom'
 import { createStore } from 'redux'
 import { Provider } from 'react-redux'
 import i18n from '../../../../i18n'
 import { I18nextProvider } from 'react-i18next'
-import reducerRegistry from '../../../../redux/reducers/ReducerRegistry'
-//import store from '../../../../redux/store'
-import appReducers from '../../../../redux/reducers'
 import authReducer from '../../../../redux/reducers/AuthReducer'
 import Sidebar from '../../../../../app/components/Sidebar'
 
-jest.spyOn(global.console, 'log').mockImplementation(jest.fn());
-jest.spyOn(global.console, 'error').mockImplementation(jest.fn());
+jest.spyOn(global.console, 'log').mockImplementation(jest.fn())
+jest.spyOn(global.console, 'error').mockImplementation(jest.fn())
 
-const combine = (reducers) => {
-  const reducerNames = Object.keys(reducers)
-  Object.keys(appReducers).forEach((item) => {
-    if (reducerNames.indexOf(item) === -1) {
-      reducers[item] = (state = null) => state
-    }
-  })
-  return combineReducers(reducers)
-}
-const reducers = combine(reducerRegistry.getReducers())
-
-const INIT_STATE = {
-  isAuthenticated: false,
-  userinfo: null,
-  userinfo_jwt: null,
-  token: null,
-  issuer: null,
-  permissions: [],
-  location: {},
-  config: {},
-  backendIsUp: true,
-}
-
-//const store1 = createStore(reducers, INIT_STATE)
 const store = createStore(
   combineReducers({
     authReducer,
     noReducer: (state = {}) => state,
   }),
 )
- const pageConfig ={}
+const pageConfig = {}
 const Wrapper = ({ children }) => (
   <I18nextProvider i18n={i18n}>
     <Provider store={store}>
@@ -64,6 +37,4 @@ const Wrapper = ({ children }) => (
 it('Should show the sidebar properly', () => {
   const scopes = []
   render(<GluuAppSidebar scopes={scopes} />, { wrapper: Wrapper })
-
-  // screen.getByText('Sign out')
 })
diff --git a/app/routes/Apps/Gluu/Tests/GluuInlineInput.test.js b/app/routes/Apps/Gluu/Tests/GluuInlineInput.test.js
@@ -8,8 +8,11 @@ let LABEL = 'fields.application_type'
 let NAME = 'application_type'
 let VALUE = true
 
+function handler() {
+  console.log('')
+}
+
 it('Should render a boolean select box', () => {
-  function handler() {}
   render(
     <I18nextProvider i18n={i18n}>
       <GluuInlineInput
@@ -27,9 +30,9 @@ it('Should render a boolean select box', () => {
 })
 
 it('Should render a typeahead component with array', () => {
-  const VALUE = ['Two']
+  VALUE = ['Two']
   const options = ['One', 'Two', 'Three']
-  function handler() {}
+
   render(
     <I18nextProvider i18n={i18n}>
       <GluuInlineInput
@@ -47,8 +50,7 @@ it('Should render a typeahead component with array', () => {
 })
 
 it('Should render a text input', () => {
-  const VALUE = 'Client Secret'
-  function handler() {}
+  VALUE = 'Client Secret'
   render(
     <I18nextProvider i18n={i18n}>
       <GluuInlineInput

diff --git a/plugins/admin/components/CustomScripts/ScriptListPage.js b/plugins/admin/components/CustomScripts/ScriptListPage.js
@@ -40,9 +40,7 @@ function ScriptListTable({ scripts, loading, dispatch, permissions }) {
   const myActions = []
   const [item, setItem] = useState({})
   const [modal, setModal] = useState(false)
-  const [pageSize, setPageSize] = useState(
-    localStorage.getItem('paggingSize') || 10,
-  )
+  const pageSize = localStorage.getItem('paggingSize') || 10
   const [limit, setLimit] = useState(pageSize)
   const [pattern, setPattern] = useState(null)
   const [selectedScripts, setSelectedScripts] = useState(scripts)
@@ -78,7 +76,7 @@ function ScriptListTable({ scripts, loading, dispatch, permissions }) {
         id: 'editCustomScript' + rowData.inum,
       },
       tooltip: `${t('messages.edit_script')}`,
-      onClick: (event, rowData) => handleGoToCustomScriptEditPage(rowData),
+      onClick: (event, entry) => handleGoToCustomScriptEditPage(entry),
       disabled: false,
     }))
   }
@@ -96,7 +94,6 @@ function ScriptListTable({ scripts, loading, dispatch, permissions }) {
       tooltip: `${t('messages.advanced_search')}`,
       iconProps: { color: 'primary' },
       isFreeAction: true,
-      onClick: () => {},
     })
   }
   if (hasPermission(permissions, SCRIPT_READ)) {
@@ -120,7 +117,7 @@ function ScriptListTable({ scripts, loading, dispatch, permissions }) {
         id: 'deleteCustomScript' + rowData.inum,
       },
       tooltip: `${t('messages.delete_script')}`,
-      onClick: (event, rowData) => handleCustomScriptDelete(rowData),
+      onClick: (event, row) => handleCustomScriptDelete(row),
       disabled: false,
     }))
   }

diff --git a/plugins/admin/components/Health/HealthPage.js b/plugins/admin/components/Health/HealthPage.js
@@ -9,7 +9,9 @@ import { useTranslation } from 'react-i18next'
 
 function HealthPage() {
   const { t } = useTranslation()
-  useEffect(() => {}, [])
+  useEffect(() => {
+    console.log('')
+  }, [])
   return (
     <Container>
       <Card className="mb-3">

diff --git a/plugins/admin/components/MonthlyActiveUsersPage.js b/plugins/admin/components/MonthlyActiveUsersPage.js
@@ -1,5 +1,12 @@
 import React, { Component, useState, useEffect } from 'react'
-import { Button, Card, CardFooter, CardBody, Label, Input } from '../../../app/components'
+import {
+  Button,
+  Card,
+  CardFooter,
+  CardBody,
+  Label,
+  Input,
+} from '../../../app/components'
 import GluuLoader from '../../../app/routes/Apps/Gluu/GluuLoader'
 import GluuViewWrapper from '../../../app/routes/Apps/Gluu/GluuViewWrapper'
 import {
@@ -51,27 +58,27 @@ class MonthBox extends Component {
     this.props.onClick && this.props.onClick(e)
   }
 }
-function prepending(n){
-  return n > 9 ? "" + n: "0" + n;
+function prepending(n) {
+  return n > 9 ? '' + n : '0' + n
 }
 function MonthlyActiveUsersPage({ stat, permissions, loading, dispatch }) {
   const { t } = useTranslation()
   const userAction = {}
   const options = {}
   const currentDate = new Date()
-  const selectionRange = {
-    startDate: new Date(),
-    endDate: new Date(),
-    key: 'selection',
-  }
-  const [average, setAverage] = useState(0)
   const [showAuthCodeATGraph, setShowAuthCodeATGraph] = useState(true)
-  const [showClientCredentialATGraph, setShowClientCredentialATGraph] = useState(true)
+  const [
+    showClientCredentialATGraph,
+    setShowClientCredentialATGraph,
+  ] = useState(true)
 
   const pickRange2 = React.createRef()
   const [rangeValue2, setRangeValue2] = useState({
-    from: { year: currentDate.getFullYear(), month: currentDate.getMonth()-3 },
-    to: { year: currentDate.getFullYear(), month: currentDate.getMonth()+1 },
+    from: {
+      year: currentDate.getFullYear(),
+      month: currentDate.getMonth() - 3,
+    },
+    to: { year: currentDate.getFullYear(), month: currentDate.getMonth() + 1 },
   })
   const pickerLang = {
     months: [
@@ -93,9 +100,15 @@ function MonthlyActiveUsersPage({ stat, permissions, loading, dispatch }) {
   }
 
   useEffect(() => {
-    let initialMonths = currentDate.getFullYear().toString() + prepending(currentDate.getMonth()+1)
-    for(let i = 0; i < 4; i ++) {
-      initialMonths = initialMonths + '%20' + currentDate.getFullYear().toString() + prepending(currentDate.getMonth()-i)
+    let initialMonths =
+      currentDate.getFullYear().toString() +
+      prepending(currentDate.getMonth() + 1)
+    for (let i = 0; i < 4; i++) {
+      initialMonths =
+        initialMonths +
+        '%20' +
+        currentDate.getFullYear().toString() +
+        prepending(currentDate.getMonth() - i)
     }
     options['month'] = initialMonths
     buildPayload(userAction, 'GET MAU', options)
@@ -139,10 +152,12 @@ function MonthlyActiveUsersPage({ stat, permissions, loading, dispatch }) {
             color: 'black',
           }}
         >
-          <p className="label">{`${t('fields.month')} : ${label % 100}/${Math.floor(
-            label / 100,
-          )}`}</p>
-          <p className="label">{`${t('fields.monthly_active_users')} : ${payload[0].value}`}</p>
+          <p className="label">{`${t('fields.month')} : ${
+            label % 100
+          }/${Math.floor(label / 100)}`}</p>
+          <p className="label">{`${t('fields.monthly_active_users')} : ${
+            payload[0].value
+          }`}</p>
         </div>
       )
     }
@@ -162,11 +177,15 @@ function MonthlyActiveUsersPage({ stat, permissions, loading, dispatch }) {
             color: 'black',
           }}
         >
-          <p className="label">{`${t('fields.month')} : ${label % 100}/${Math.floor(
-            label / 100,
-          )}`}</p>
-          <p className="label">{`${t('fields.authorization_code_access_token')} : ${payload[0].value}`}</p>
-          <p className="label">{`${t('fields.client_credentials_access_token')} : ${payload[1].value}`}</p>
+          <p className="label">{`${t('fields.month')} : ${
+            label % 100
+          }/${Math.floor(label / 100)}`}</p>
+          <p className="label">{`${t(
+            'fields.authorization_code_access_token',
+          )} : ${payload[0].value}`}</p>
+          <p className="label">{`${t(
+            'fields.client_credentials_access_token',
+          )} : ${payload[1].value}`}</p>
         </div>
       )
     }
@@ -181,7 +200,9 @@ function MonthlyActiveUsersPage({ stat, permissions, loading, dispatch }) {
   const _handleClickRangeBox2 = (e) => {
     pickRange2.current.show()
   }
-  const handleRangeChange2 = (value, text, listIndex) => {}
+  const handleRangeChange2 = () => {
+    console.log('')
+  }
   const handleRangeDissmis2 = (value) => {
     setRangeValue2(value)
   }
@@ -194,8 +215,6 @@ function MonthlyActiveUsersPage({ stat, permissions, loading, dispatch }) {
     }
     return (sum / length).toFixed(2)
   }
-
-
 
   return (
     <GluuLoader blocking={loading}>
@@ -208,7 +227,6 @@ function MonthlyActiveUsersPage({ stat, permissions, loading, dispatch }) {
               className="d-flex flex-column justify-content-center align-items-center pt-5"
               style={{ minHeight: '400px' }}
             >
-
               <div className="d-flex justify-content-center align-items-center mb-3">
                 <Picker
                   ref={pickRange2}
@@ -238,10 +256,15 @@ function MonthlyActiveUsersPage({ stat, permissions, loading, dispatch }) {
                   {t('actions.view')}
                 </Button>
                 <Label className="h4">
-                  {t('fields.average_of_mau')}{arrAvg(Object.values(stat))}
+                  {t('fields.average_of_mau')}
+                  {arrAvg(Object.values(stat))}
                 </Label>
               </div>
-              <ResponsiveContainer className="mau-graph" width="80%" height={500}>
+              <ResponsiveContainer
+                className="mau-graph"
+                width="80%"
+                height={500}
+              >
                 <LineChart height={300} data={Object.values(stat)}>
                   <Line
                     name={t('fields.monthly_active_users')}
@@ -261,7 +284,11 @@ function MonthlyActiveUsersPage({ stat, permissions, loading, dispatch }) {
                   <Legend />
                 </LineChart>
               </ResponsiveContainer>
-              <ResponsiveContainer className="token-graph" width="80%" height={500} >
+              <ResponsiveContainer
+                className="token-graph"
+                width="80%"
+                height={500}
+              >
                 <LineChart height={300} data={Object.values(stat)}>
                   {showAuthCodeATGraph && (
                     <Line
@@ -316,7 +343,9 @@ function MonthlyActiveUsersPage({ stat, permissions, loading, dispatch }) {
                     type="checkbox"
                     checked={showClientCredentialATGraph}
                     onClick={(e) => {
-                      setShowClientCredentialATGraph(!showClientCredentialATGraph)
+                      setShowClientCredentialATGraph(
+                        !showClientCredentialATGraph,
+                      )
                     }}
                   />
                   <div className="state p-primary">

diff --git a/plugins/admin/components/Reports/ReportPage.js b/plugins/admin/components/Reports/ReportPage.js
@@ -1,5 +1,4 @@
 import React from 'react'
-import SimpleBarChart from './SimpleBarChart'
 
 function ReportPage() {
   return <div></div>