fix:claims dropdown is not populated in Add/Edit scopes page #140

Author: duttarnab

admin-ui/plugins/auth-server/components/Scopes/ScopeAddPage.js

@@ -1,14 +1,38 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import { connect } from 'react-redux'
 import { useHistory } from 'react-router-dom'
 import { Container, CardBody, Card } from '../../../../app/components'
 import ScopeForm from './ScopeForm'
 import { addScope } from '../../redux/actions/ScopeActions'
 import { buildPayload } from '../../../../app/utils/PermChecker'
+import GluuLoader from '../../../../app/routes/Apps/Gluu/GluuLoader'
+import {
+  getAttributes,
+  getScripts
+} from '../../../../app//redux/actions/InitActions'
+import GluuAlert from '../../../../app/routes/Apps/Gluu/GluuAlert'
+import { useTranslation } from 'react-i18next'
 
-function ScopeAddPage({ scripts, dispatch, attributes }) {
+function ScopeAddPage({ scripts, dispatch, attributes, loading, saveOperationFlag, errorInSaveOperationFlag }) {
   const userAction = {}
   const history = useHistory()
+  const { t } = useTranslation()
+  useEffect(() => {
+    if (attributes.length === 0) {
+      buildPayload(userAction, 'Fetch attributes', {})
+      dispatch(getAttributes(userAction))
+    }
+    if (scripts.length === 0) {
+      buildPayload(userAction, 'Fetch custom scripts', {})
+      dispatch(getScripts(userAction))
+    }
+  }, [])
+
+  useEffect(() => {
+    if (saveOperationFlag && !errorInSaveOperationFlag)
+      history.push('/auth-server/scopes')
+  }, [saveOperationFlag])
+
   function handleSubmit(data) {
     if (data) {
       const postBody = {}
@@ -18,7 +42,6 @@ function ScopeAddPage({ scripts, dispatch, attributes }) {
       postBody['scope'] = data
       buildPayload(userAction, message, postBody)
       dispatch(addScope(userAction))
-      history.push('/auth-server/scopes')
     }
   }
 
@@ -34,7 +57,12 @@ function ScopeAddPage({ scripts, dispatch, attributes }) {
   }
 
   return (
-    <React.Fragment>
+    <GluuLoader blocking={loading}>
+      <GluuAlert
+        severity={t('titles.error')}
+        message={t('messages.error_in_saving')}
+        show={errorInSaveOperationFlag}
+      />
       <Container>
         <Card className="mb-3">
           <CardBody>
@@ -47,7 +75,7 @@ function ScopeAddPage({ scripts, dispatch, attributes }) {
           </CardBody>
         </Card>
       </Container>
-    </React.Fragment>
+    </GluuLoader>
   )
 }
 const mapStateToProps = (state) => {
@@ -56,6 +84,8 @@ const mapStateToProps = (state) => {
     permissions: state.authReducer.permissions,
     scripts: state.initReducer.scripts,
     attributes: state.initReducer.attributes,
+    saveOperationFlag: state.scopeReducer.saveOperationFlag,
+    errorInSaveOperationFlag: state.scopeReducer.errorInSaveOperationFlag,
   }
 }
 export default connect(mapStateToProps)(ScopeAddPage)

admin-ui/plugins/auth-server/components/Scopes/ScopeEditPage.js

@@ -1,22 +1,44 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import { connect } from 'react-redux'
 import { useHistory } from 'react-router-dom'
 import { CardBody, Card } from '../../../../app/components'
 import GluuLoader from '../../../../app/routes/Apps/Gluu/GluuLoader'
 import ScopeForm from './ScopeForm'
 import { editScope } from '../../redux/actions/ScopeActions'
 import { buildPayload } from '../../../../app/utils/PermChecker'
+import {
+  getAttributes,
+  getScripts
+} from '../../../../app//redux/actions/InitActions'
+import GluuAlert from '../../../../app/routes/Apps/Gluu/GluuAlert'
+import { useTranslation } from 'react-i18next'
 
-function ScopeEditPage({ scope, loading, dispatch, scripts, attributes }) {
+function ScopeEditPage({ scope, loading, dispatch, scripts, attributes, saveOperationFlag, errorInSaveOperationFlag }) {
   const userAction = {}
   const history = useHistory()
+  const { t } = useTranslation()
+
   if (!scope.attributes) {
     scope.attributes = {
       spontaneousClientId: null,
       spontaneousClientScopes: [],
       showInConfigurationEndpoint: false,
     }
   }
+  useEffect(() => {
+    if (attributes.length === 0) {
+      buildPayload(userAction, 'Fetch attributes', {})
+      dispatch(getAttributes(userAction))
+    }
+    if (scripts.length === 0) {
+      buildPayload(userAction, 'Fetch custom scripts', {})
+      dispatch(getScripts(userAction))
+    }
+  }, [])
+  useEffect(() => {
+    if (saveOperationFlag && !errorInSaveOperationFlag)
+      history.push('/auth-server/scopes')
+  }, [saveOperationFlag])
 
   function handleSubmit(data) {
     if (data) {
@@ -27,11 +49,15 @@ function ScopeEditPage({ scope, loading, dispatch, scripts, attributes }) {
       postBody['scope'] = data
       buildPayload(userAction, message, postBody)
       dispatch(editScope(userAction))
-      history.push('/auth-server/scopes')
     }
   }
   return (
     <GluuLoader blocking={loading}>
+      <GluuAlert
+        severity={t('titles.error')}
+        message={t('messages.error_in_saving')}
+        show={errorInSaveOperationFlag}
+      />
       <Card className="mb-3">
         <CardBody>
           <ScopeForm
@@ -52,6 +78,8 @@ const mapStateToProps = (state) => {
     permissions: state.authReducer.permissions,
     scripts: state.initReducer.scripts,
     attributes: state.initReducer.attributes,
+    saveOperationFlag: state.scopeReducer.saveOperationFlag,
+    errorInSaveOperationFlag: state.scopeReducer.errorInSaveOperationFlag,
   }
 }
 

admin-ui/plugins/auth-server/components/Scopes/ScopeForm.js

@@ -32,7 +32,8 @@ function ScopeForm({ scope, scripts, attributes, handleSubmit }) {
     .filter((item) => item.scriptType == 'DYNAMIC_SCOPE')
     .filter((item) => item.enabled)
     .map((item) => ({ dn: item.dn, name: item.name }))
-  claims = attributes.map((item) => ({ dn: item.dn, name: item.name }))
+  claims = attributes.map((item) => ({ dn: item.dn, name: item.displayName }))
+
   const [init, setInit] = useState(false)
   const [modal, setModal] = useState(false)
   const [showClaimsPanel, handleClaimsPanel] = useState(

admin-ui/plugins/auth-server/redux/reducers/ScopeReducer.js

@@ -20,6 +20,8 @@ const INIT_STATE = {
   items: [],
   item: {},
   loading: false,
+  saveOperationFlag: false,
+  errorInSaveOperationFlag: false,
 }
 
 const reducerName = 'scopeReducer'
@@ -73,9 +75,16 @@ export default function scopeReducer(state = INIT_STATE, action) {
           ...state,
           items: [...state.items],
           loading: false,
+          saveOperationFlag: true,
+          errorInSaveOperationFlag: false,
         }
       } else {
-        return handleDefault()
+        return {
+          ...state,
+          loading: false,
+          saveOperationFlag: true,
+          errorInSaveOperationFlag: true,
+        }
       }
 
     case EDIT_SCOPE:
@@ -87,9 +96,16 @@ export default function scopeReducer(state = INIT_STATE, action) {
           ...state,
           items: [...state.items],
           loading: false,
+          saveOperationFlag: true,
+          errorInSaveOperationFlag: false,
         }
       } else {
-        return handleDefault()
+        return {
+          ...state,
+          loading: false,
+          saveOperationFlag: true,
+          errorInSaveOperationFlag: true,
+        }
       }
     case DELETE_SCOPE:
       return handleLoading()
@@ -123,12 +139,16 @@ export default function scopeReducer(state = INIT_STATE, action) {
     return {
       ...state,
       loading: true,
+      saveOperationFlag: false,
+      errorInSaveOperationFlag: false,
     }
   }
   function handleDefault() {
     return {
       ...state,
       loading: false,
+      saveOperationFlag: false,
+      errorInSaveOperationFlag: false,
     }
   }
 }