feat(admin-ui): implement toast

admin-ui/app/components/App/AuthenticatedRouteSelector.js

@@ -3,7 +3,7 @@ import AppLayout from '../../layout/default'
 import { RoutedContent } from 'Routes'
 import ByeBye from 'Routes/Pages/ByeBye'
 import AppAuthProvider from 'Utils/AppAuthProvider'
-
+import GluuToast from 'Routes/Apps/Gluu/GluuToast'
 export default function AuthenticatedRouteSelector() {
   const selectedComponents =
     window.location.href.indexOf('logout') > -1 ? (
@@ -12,6 +12,7 @@ export default function AuthenticatedRouteSelector() {
       <AppAuthProvider>
         <AppLayout>
           <RoutedContent />
+          <GluuToast />
         </AppLayout>
       </AppAuthProvider>
     )

admin-ui/app/locales/en/translation.json

@@ -352,6 +352,7 @@
     "user-management": "User Management"
   },
   "messages": {
+    "success_in_saving": "Changes saved successfully",
     "action_commit_question": "Audit log: Want to apply changes made on this page?",
     "action_deletion_question": "Do you really want to delete this item?",
     "action_deletion_for": "Deletion confirmation for",

admin-ui/app/redux/actions/ToastAction.js

@@ -0,0 +1,10 @@
+import {UPDATE_TOAST} from './types'
+
+export const updateToast = (showToast = false, type = "success", message = "") =>  ({
+    type:UPDATE_TOAST,
+    payload:{
+        showToast:showToast,
+        message:message,
+        type:type
+    }
+})

admin-ui/app/redux/actions/types.js

@@ -90,3 +90,8 @@ export const UPDATE_LICENSE_DETAILS_RESPONSE = 'UPDATE_LICENSE_DETAILS_RESPONSE'
 //User Management
 export const GET_USERS = 'GET_USERS'
 export const GET_USERS_RESPONSE = 'GET_USERS_RESPONSE'
+
+
+// Toasts
+
+export const UPDATE_TOAST = "UPDATE_TOAST"

admin-ui/app/redux/reducers/ToastReducer.js

@@ -0,0 +1,26 @@
+import {UPDATE_TOAST } from '../actions/types'
+import reducerRegistry from './ReducerRegistry'
+const INIT_STATE = {
+  showToast:false,
+  message:"",
+  type:"success"
+}
+
+const reducerName = 'toastReducer'
+
+export default function toastReducer(state = INIT_STATE, action) {
+  switch (action.type) {
+    case UPDATE_TOAST:
+      return {
+        ...state,
+        showToast:action.payload.showToast,
+        message:action.payload.message,
+        type:action.payload.type
+      }
+    default:
+      return {
+        ...state,
+      }
+  }
+}
+reducerRegistry.register(reducerName, toastReducer)

admin-ui/app/redux/reducers/index.js

@@ -11,6 +11,7 @@ import licenseReducer from './LicenseReducer'
 import licenseDetailsReducer from './LicenseDetailsReducer'
 import oidcDiscoveryReducer from './OidcDiscoveryReducer'
 import attributesReducerRoot from './AttributesReducer'
+import toastReducer from './ToastReducer'
 const appReducers = {
   authReducer,
   fidoReducer,
@@ -21,7 +22,8 @@ const appReducers = {
   mauReducer,
   healthReducer,
   licenseDetailsReducer,
-  attributesReducerRoot
+  attributesReducerRoot,
+  toastReducer
 }
 
 export default appReducers

admin-ui/app/routes/Apps/Gluu/GluuToast.js

@@ -0,0 +1,45 @@
+import React, { useEffect } from 'react'
+import { ToastContainer , toast} from "react-toastify";
+import {useSelector, useDispatch} from 'react-redux'
+import { useTranslation } from 'react-i18next';
+import {updateToast} from 'Redux/actions/ToastAction'
+function GluuToast(){
+    const dispatch = useDispatch();
+    const { t } = useTranslation()
+    const {showToast, message, type} = useSelector(state => state.toastReducer)
+
+    const ToastDesign = () => {
+        return (
+            <div style={{textAlign:"left"}}>
+                <strong>{type == 'success' ? "Success" : "Error" }</strong><br/>
+                {message == "" ? type == "success" ? t('messages.success_in_saving') : t('messages.error_in_saving') : message}
+            </div>
+        )
+    }
+    const showTheToast = () => {
+        if(type == "success"){
+            toast.success(<ToastDesign />)
+        }else{
+            toast.error(<ToastDesign />)
+        }
+    }  
+
+    useEffect(() => {
+        if(showToast){
+            showTheToast();
+            dispatch(updateToast(false, 'success', ''))
+
+        }
+    },[showToast])
+
+    return (
+        <ToastContainer
+            autoClose={10000}
+            closeOnClick
+            newestOnTop
+            draggable={false}
+        />
+    )
+}
+
+export default GluuToast;

admin-ui/plugins/admin/redux/sagas/ApiPermissionSaga.js

@@ -20,6 +20,7 @@ import {
   isFourZeroOneError,
   addAdditionalData,
 } from 'Utils/TokenController'
+import {updateToast} from 'Redux/actions/ToastAction'
 import {
   GET_PERMISSIONS,
   ADD_PERMISSION,
@@ -78,9 +79,11 @@ export function* addPermission({ payload }) {
     addAdditionalData(audit, CREATE, API_PERMISSION, payload)
     const permApi = yield* newFunction()
     const data = yield call(permApi.addPermission, payload.action.action_data)
+    yield put(updateToast(true, 'success'))
     yield put(addPermissionResponse(data))
     yield call(postUserAction, audit)
   } catch (e) {
+    yield put(updateToast(true, 'error'))
     yield put(addPermissionResponse(null))
     if (isFourZeroOneError(e)) {
       const jwt = yield select((state) => state.authReducer.userinfo_jwt)
@@ -94,9 +97,11 @@ export function* editPermission({ payload }) {
     addAdditionalData(audit, UPDATE, API_PERMISSION, payload)
     const permApi = yield* newFunction()
     const data = yield call(permApi.editPermission, payload.action.action_data)
+    yield put(updateToast(true, 'success'))
     yield put(editPermissionResponse(data))
     yield call(postUserAction, audit)
   } catch (e) {
+    yield put(updateToast(true, 'error'))
     yield put(editPermissionResponse(null))
     if (isFourZeroOneError(e)) {
       const jwt = yield select((state) => state.authReducer.userinfo_jwt)
@@ -111,9 +116,11 @@ export function* deletePermission({ payload }) {
     addAdditionalData(audit, DELETION, API_PERMISSION, payload)
     const permApi = yield* newFunction()
     yield call(permApi.deletePermission, payload.action.action_data)
+    yield put(updateToast(true, 'success'))
     yield put(deletePermissionResponse(payload.action.action_data))
     yield call(postUserAction, audit)
   } catch (e) {
+    yield put(updateToast(true, 'error'))
     yield put(deletePermissionResponse(null))
     if (isFourZeroOneError(e)) {
       const jwt = yield select((state) => state.authReducer.userinfo_jwt)

admin-ui/plugins/admin/redux/sagas/ApiRoleSaga.js

@@ -14,6 +14,7 @@ import {
   FETCH,
 } from '../../../../app/audit/UserActionType'
 import { getAPIAccessToken } from 'Redux/actions/AuthActions'
+import {updateToast} from 'Redux/actions/ToastAction'
 import {
   isFourZeroOneError,
   addAdditionalData,
@@ -78,9 +79,11 @@ export function* addRole({ payload }) {
     addAdditionalData(audit, CREATE, API_ROLE, payload)
     const roleApi = yield* newFunction()
     const data = yield call(roleApi.addRole, payload.action.action_data)
+    yield put(updateToast(true, 'success'))
     yield put(getRolesAction({}))
     yield call(postUserAction, audit)
   } catch (e) {
+    yield put(updateToast(true, 'error'))
     yield put(addRoleResponse(null))
     if (isFourZeroOneError(e)) {
       const jwt = yield select((state) => state.authReducer.userinfo_jwt)
@@ -94,9 +97,11 @@ export function* editRole({ payload }) {
     addAdditionalData(audit, UPDATE, API_ROLE, payload)
     const roleApi = yield* newFunction()
     const data = yield call(roleApi.editRole, payload.action.action_data)
+    yield put(updateToast(true, 'success'))
     yield put(getRolesAction({}))
     yield call(postUserAction, audit)
   } catch (e) {
+    yield put(updateToast(true, 'error'))
     yield put(editRoleResponse(null))
     if (isFourZeroOneError(e)) {
       const jwt = yield select((state) => state.authReducer.userinfo_jwt)
@@ -111,9 +116,11 @@ export function* deleteRole({ payload }) {
     addAdditionalData(audit, DELETION, API_ROLE, payload)
     const roleApi = yield* newFunction()
     yield call(roleApi.deleteRole, payload.action.action_data)
+    yield put(updateToast(true, 'success'))
     yield put(getRolesAction({}))
     yield call(postUserAction, audit)
   } catch (e) {
+    yield put(updateToast(true, 'error'))
     yield put(deleteRoleResponse(null))
     if (isFourZeroOneError(e)) {
       const jwt = yield select((state) => state.authReducer.userinfo_jwt)

admin-ui/plugins/admin/redux/sagas/CustomScriptSaga.js

@@ -14,6 +14,7 @@ import {
 } from '../../../../app/audit/UserActionType'
 import { getAPIAccessToken } from 'Redux/actions/AuthActions'
 import { isFourZeroOneError, addAdditionalData } from 'Utils/TokenController'
+import {updateToast} from 'Redux/actions/ToastAction'
 import {
   GET_CUSTOM_SCRIPT,
   GET_CUSTOM_SCRIPT_BY_TYPE,
@@ -78,9 +79,11 @@ export function* addScript({ payload }) {
       scriptApi.addCustomScript,
       payload.action.action_data,
     )
+    yield put(updateToast(true, 'success'))
     yield put(addCustomScriptResponse(data))
     yield call(postUserAction, audit)
   } catch (e) {
+    yield put(updateToast(true, 'error'))
     yield put(addCustomScriptResponse(null))
     if (isFourZeroOneError(e)) {
       const jwt = yield select((state) => state.authReducer.userinfo_jwt)
@@ -97,9 +100,11 @@ export function* editScript({ payload }) {
       scriptApi.editCustomScript,
       payload.action.action_data,
     )
+    yield put(updateToast(true, 'success'))
     yield put(editCustomScriptResponse(data))
     yield call(postUserAction, audit)
   } catch (e) {
+    yield put(updateToast(true, 'error'))
     yield put(editCustomScriptResponse(null))
     if (isFourZeroOneError(e)) {
       const jwt = yield select((state) => state.authReducer.userinfo_jwt)
@@ -114,9 +119,11 @@ export function* deleteScript({ payload }) {
     addAdditionalData(audit, DELETION, SCRIPT, payload)
     const scriptApi = yield* newFunction()
     yield call(scriptApi.deleteCustomScript, payload.action.action_data)
+    yield put(updateToast(true, 'success'))
     yield put(deleteCustomScriptResponse(payload.action.action_data))
     yield call(postUserAction, audit)
   } catch (e) {
+    yield put(updateToast(true, 'error'))
     yield put(deleteCustomScriptResponse(null))
     if (isFourZeroOneError(e)) {
       const jwt = yield select((state) => state.authReducer.userinfo_jwt)

admin-ui/plugins/admin/redux/sagas/MappingSaga.js

@@ -16,6 +16,7 @@ import {
 import { API_MAPPING } from '../audit/Resources'
 import { FETCH } from '../../../../app/audit/UserActionType'
 import { getAPIAccessToken } from 'Redux/actions/AuthActions'
+import {updateToast} from 'Redux/actions/ToastAction'
 import {
   isFourZeroOneError,
   addAdditionalData,
@@ -63,8 +64,10 @@ export function* updateMapping({ payload }) {
   try {
     const mappingApi = yield* newFunction()
     const data = yield call(mappingApi.updateMapping, payload.data)
+    yield put(updateToast(true, 'success'))
     yield put(updatePermissionsServerResponse(data))
   } catch (e) {
+    yield put(updateToast(true, 'error'))
     yield put(updatePermissionsLoading(false))
     yield put(getMappingResponse(null))
     if (isFourZeroOneError(e)) {
@@ -78,8 +81,10 @@ export function* addMapping({ payload }) {
   try {
     const mappingApi = yield* newFunction()
     const data = yield call(mappingApi.addMapping, payload.data)
+    yield put(updateToast(true, 'success'))
     yield put(getMapping({}))
   } catch (e) {
+    yield put(updateToast(true, 'error'))
     yield put(updatePermissionsLoading(false))
     // yield put(getMappingResponse(null))
     if (isFourZeroOneError(e)) {
@@ -94,8 +99,10 @@ export function* deleteMapping({ payload }) {
   try {
     const mappingApi = yield* newFunction()
     const data = yield call(mappingApi.deleteMapping, payload.data)
+    yield put(updateToast(true, 'success'))
     yield put(getMapping({}))
   } catch (e) {
+    yield put(updateToast(true, 'error'))
     yield put(updatePermissionsLoading(false))
     // yield put(getMappingResponse(null))
     if (isFourZeroOneError(e)) {

admin-ui/plugins/auth-server/redux/sagas/JsonConfigSaga.js

@@ -6,6 +6,7 @@ import { getClient } from 'Redux/api/base'
 import { JSON_CONFIG } from '../audit/Resources'
 import { PATCH, FETCH } from '../../../../app/audit/UserActionType'
 import { postUserAction } from 'Redux/api/backend-api'
+import {updateToast} from 'Redux/actions/ToastAction'
 import {
   isFourZeroOneError,
   addAdditionalData,
@@ -55,9 +56,11 @@ export function* patchJsonConfig({ payload }) {
       configApi.patchJsonConfig,
       payload.action.action_data,
     )
+    yield put(updateToast(true, 'success'))
     yield put(patchJsonConfigResponse(data))
     yield call(postUserAction, audit)
   } catch (e) {
+    yield put(updateToast(true, 'error'))
     yield put(patchJsonConfigResponse(null))
     if (isFourZeroOneError(e)) {
       const jwt = yield select((state) => state.authReducer.userinfo_jwt)

admin-ui/plugins/auth-server/redux/sagas/LoggingSaga.js

@@ -5,6 +5,7 @@ import {
   editLoggingResponse,
 } from '../actions/LoggingActions'
 import { getAPIAccessToken } from 'Redux/actions/AuthActions'
+import {updateToast} from 'Redux/actions/ToastAction'
 import { GET_LOGGING, PUT_LOGGING } from '../actions/types'
 import LoggingApi from '../api/LoggingApi'
 import { getClient } from 'Redux/api/base'
@@ -37,8 +38,10 @@ export function* editLogging({ payload }) {
   try {
     const api = yield* newFunction()
     const data = yield call(api.editLoggingConfig, payload.data)
+    yield put(updateToast(true, 'success'))
     yield put(editLoggingResponse(data))
   } catch (e) {
+    yield put(updateToast(true, 'error'))
     yield put(editLoggingResponse(null))
     if (isFourZeroOneError(e)) {
       const jwt = yield select((state) => state.authReducer.userinfo_jwt)

admin-ui/plugins/auth-server/redux/sagas/OAuthScopeSaga.js

@@ -8,6 +8,7 @@ import {
   select,
 } from 'redux-saga/effects'
 import { getAPIAccessToken } from '../actions/AuthActions'
+import {updateToast} from 'Redux/actions/ToastAction'
 import {
   getScopesResponse,
   getScopeByPatternResponse,
@@ -122,9 +123,11 @@ export function* addAScope({ payload }) {
     addAdditionalData(audit, CREATE, SCOPE, payload)
     const scopeApi = yield* newFunction()
     const data = yield call(scopeApi.addNewScope, payload.action.action_data)
+    yield put(updateToast(true, 'success'))
     yield put(addScopeResponse(data))
     yield call(postUserAction, audit)
   } catch (e) {
+    yield put(updateToast(true, 'error'))
     yield put(addScopeResponse(null))
     if (isFourZeroOneError(e)) {
       const jwt = yield select((state) => state.authReducer.userinfo_jwt)
@@ -139,9 +142,11 @@ export function* editAnScope({ payload }) {
     addAdditionalData(audit, UPDATE, SCOPE, payload)
     const scopeApi = yield* newFunction()
     const data = yield call(scopeApi.editAScope, payload.action.action_data)
+    yield put(updateToast(true, 'success'))
     yield put(editScopeResponse(data))
     yield call(postUserAction, audit)
   } catch (e) {
+    yield put(updateToast(true, 'error'))
     yield put(editScopeResponse(null))
     if (isFourZeroOneError(e)) {
       const jwt = yield select((state) => state.authReducer.userinfo_jwt)
@@ -156,9 +161,11 @@ export function* deleteAnScope({ payload }) {
     addAdditionalData(audit, DELETION, SCOPE, payload)
     const scopeApi = yield* newFunction()
     yield call(scopeApi.deleteAScope, payload.action.action_data)
+    yield put(updateToast(true, 'success'))
     yield put(deleteScopeResponse(payload.action.action_data))
     yield call(postUserAction, audit)
   } catch (e) {
+    yield put(updateToast(true, 'error'))
     yield put(deleteScopeResponse(null))
     if (isFourZeroOneError(e)) {
       const jwt = yield select((state) => state.s.userinfo_jwt)