feat(admin-ui): show ldpat test result based on API response

Author: harryandriyan

admin-ui/plugins/services/Components/Configuration/LdapListPage.js

@@ -24,6 +24,7 @@ import {
   setCurrentItem,
   deleteLdap,
   testLdap,
+  resetTestLdap,
 } from 'Plugins/services/redux/actions/LdapActions'
 import { getPersistenceType } from 'Plugins/services/redux/actions/PersistenceActions'
 import { useTranslation } from 'react-i18next'
@@ -50,6 +51,7 @@ function LdapListPage({
   const history = useHistory()
   const [item, setItem] = useState({})
   const [modal, setModal] = useState(false)
+  const [testRunning, setTestRunning] = useState(false)
   const pageSize = localStorage.getItem('paggingSize') || 10
   const [alertObj, setAlertObj] = useState({
     severity: '',
@@ -137,31 +139,44 @@ function LdapListPage({
   function testLdapConnect(row) {
     const testPromise = new Promise(function (resolve, reject) {
       setAlertObj({ ...alertObj, show: false })
+      dispatch(resetTestLdap())
       resolve()
     })
 
     testPromise
       .then(() => {
+        setTestRunning(true)
         dispatch(testLdap(row))
       })
-      .then(() => {
-        if (testStatus) {
-          setAlertObj({
-            ...alertObj,
-            severity: 'success',
-            message: `${t('messages.ldap_connection_success')}`,
-            show: true,
-          })
-        } else {
-          setAlertObj({
-            ...alertObj,
-            severity: 'error',
-            message: `${t('messages.ldap_connection_error')}`,
-            show: true,
-          })
-        }
-      })
   }
+
+  useEffect(() => {
+    dispatch(resetTestLdap())
+    setAlertObj({ ...alertObj, show: false })
+  }, [])
+
+  useEffect(() => {
+    if (testStatus === null || !testRunning) {
+      return
+    }
+
+    if (testStatus) {
+      setAlertObj({
+        ...alertObj,
+        severity: 'success',
+        message: `${t('messages.ldap_connection_success')}`,
+        show: true,
+      })
+    } else {
+      setAlertObj({
+        ...alertObj,
+        severity: 'error',
+        message: `${t('messages.ldap_connection_error')}`,
+        show: true,
+      })
+    }
+  }, [testStatus])
+
   return (
     <Card style={applicationStyle.mainCard}>
       <CardBody>

admin-ui/plugins/services/redux/actions/LdapActions.js

@@ -10,6 +10,7 @@ import {
   SET_LDAP,
   TEST_LDAP,
   TEST_LDAP_RESPONSE,
+  RESET_TEST_LDAP_RESPONSE
 } from './types'
 
 export const getLdapConfig = () => ({
@@ -58,10 +59,15 @@ export const setCurrentItem = (item) => ({
 
 export const testLdap = (data) => ({
   type: TEST_LDAP,
-  payload: {data},
+  payload: { data },
 })
 
 export const testLdapResponse = (data) => ({
   type: TEST_LDAP_RESPONSE,
   payload: { data },
-})
+})
+
+export const resetTestLdap = () => ({
+  type: RESET_TEST_LDAP_RESPONSE,
+  payload: {},
+})

admin-ui/plugins/services/redux/actions/types.js

@@ -85,7 +85,6 @@ export const PUT_ACRS_RESPONSE = 'PUT_ACRS_RESPONSE'
 export const GET_ACR_AUTH_SCRIPT = 'GET_ACR_AUTH_SCRIPT'
 export const GET_ACR_AUTH_SCRIPT_RESPONSE = 'GET_ACR_AUTH_SCRIPT_RESPONSE'
 
-
 // fido
 export const GET_FIDO = 'GET_FIDO'
 export const GET_FIDO_RESPONSE = 'GET_FIDO_RESPONSE'
@@ -118,6 +117,7 @@ export const DELETE_LDAP = 'DELETE_LDAP'
 export const DELETE_LDAP_RESPONSE = 'DELETE_LDAP_RESPONSE'
 export const TEST_LDAP = 'TEST_LDAP'
 export const TEST_LDAP_RESPONSE = 'TEST_LDAP_RESPONSE'
+export const RESET_TEST_LDAP_RESPONSE = 'RESET_TEST_LDAP_RESPONSE'
 // Couchbase
 export const GET_COUCHBASE = 'GET_COUCHBASE'
 export const GET_COUCHBASE_RESPONSE = 'GET_COUCHBASE_RESPONSE'
@@ -179,4 +179,3 @@ export const GET_JSON_CONFIG = 'GET_JSON_CONFIG'
 export const GET_JSONCONFIG_RESPONSE = 'GET_JSONCONFIG_RESPONSE'
 export const PATCH_JSON_CONFIG = 'PATCH_JSON_CONFIG'
 export const PATCH_JSONCONFIG_RESPONSE = 'PATCH_JSONCONFIG_RESPONSE'
-

admin-ui/plugins/services/redux/api/LdapApi.js

@@ -41,7 +41,6 @@ export default class LdapApi {
 
   // test LDAP Config
   testLdapConfig = (input) => {
-    console.log('Ldap Api testLdapConfig  ')
     return new Promise((resolve, reject) => {
       this.api.postConfigDatabaseLdapTest(input, (error, data, response) => {
         this.handleResponse(error, reject, resolve, data)

admin-ui/plugins/services/redux/reducers/LdapReducer.js

@@ -11,12 +11,13 @@ import {
   DELETE_LDAP_RESPONSE,
   TEST_LDAP,
   TEST_LDAP_RESPONSE,
+  RESET_TEST_LDAP_RESPONSE,
 } from '../actions/types'
 const INIT_STATE = {
   ldap: [],
   item: {},
   loading: false,
-  testStatus: false,
+  testStatus: null,
 }
 
 export default function ldapReducer(state = INIT_STATE, action) {
@@ -120,6 +121,11 @@ export default function ldapReducer(state = INIT_STATE, action) {
         loading: false,
       }
 
+    case RESET_TEST_LDAP_RESPONSE:
+      return {
+        ...state,
+        testStatus: INIT_STATE.testStatus,
+      }
     case RESET:
       return {
         ...state,