feat(admin-ui): user edit page gentle push

admin-ui/plugins/admin/components/UserManagement/UserEditPage.js

@@ -0,0 +1,86 @@
+import React from 'react'
+import { useHistory } from 'react-router-dom'
+import { Container, CardBody, Card } from '../../../../app/components'
+import UserForm from './UserForm'
+import GluuAlert from '../../../../app/routes/Apps/Gluu/GluuAlert'
+import { useTranslation } from 'react-i18next'
+import { useFormik } from 'formik'
+import { initialClaims } from './constLists'
+import { createNewUser } from '../../redux/actions/UserActions'
+import { useDispatch, useSelector } from 'react-redux'
+function UserEditPage() {
+  const dispatch = useDispatch()
+  const userAction = {}
+  const history = useHistory()
+  const { t } = useTranslation()
+  const userDetails = useSelector((state) => state.userReducer.selectedUserData)
+  const createCustomAttributes = (values) => {
+    let customAttributes = []
+    if (values) {
+      for (let key in values) {
+        if (initialClaims.some((e) => e.id == key)) {
+          let val = []
+          val.push(values[key])
+          let obj = {
+            name: key,
+            multiValued: false,
+            values: val,
+            value: values[key],
+            displayValue: values[key],
+          }
+          customAttributes.push(obj)
+        }
+      }
+      // console.log(values);
+      return customAttributes
+    }
+  }
+
+  const submitData = (values) => {
+    let customAttributes = createCustomAttributes(values)
+    let submitableValues = {
+      userId: values.userId || '',
+      mail: values.mail,
+      displayName: values.displayName || '',
+      jansStatus: values.jansStatus || '',
+      userPassword: values.userPassword || '',
+      givenName: values.givenName || '',
+      customAttributes: customAttributes,
+    }
+    dispatch(createNewUser(submitableValues))
+    // console.log(submitableValues)
+  }
+
+  const initialValues = {
+    displayName: userDetails.displayName,
+    givenName: userDetails.givenName,
+    mail: userDetails.mail,
+    userId: userDetails.userId,
+  }
+
+  const formik = useFormik({
+    initialValues: initialValues,
+    onSubmit: (values) => {
+      //   submitData(values)
+      alert(JSON.stringify(values, null, 2))
+    },
+  })
+  return (
+    <React.Fragment>
+      {/* <GluuRibbon title={t('titles.user_management')} fromLeft /> */}
+      <GluuAlert
+        severity={t('titles.error')}
+        message={t('messages.error_in_saving')}
+        show={false}
+      />
+      <Container>
+        <Card className="mb-3">
+          <CardBody>
+            <UserForm formik={formik} />
+          </CardBody>
+        </Card>
+      </Container>
+    </React.Fragment>
+  )
+}
+export default UserEditPage

admin-ui/plugins/admin/components/UserManagement/UserList.js

@@ -4,7 +4,7 @@ import { Paper } from '@material-ui/core'
 import UserDetailViewPage from './UserDetailViewPage'
 // import RoleAddDialogForm from './RoleAddDialogForm'
 import { Badge } from 'reactstrap'
-import { getUsers } from '../../redux/actions/UserActions'
+import { getUsers, setSelectedUserData } from '../../redux/actions/UserActions'
 import { useDispatch, useSelector } from 'react-redux'
 import { Card, CardBody, FormGroup } from '../../../../app/components'
 import { useTranslation } from 'react-i18next'
@@ -42,6 +42,11 @@ function UserList(props) {
   function handleGoToUserAddPage() {
     return history.push('/adm/usermanagement/add')
   }
+  function handleGoToUserEditPage(row) {
+    console.log('edit data', row)
+    dispatch(setSelectedUserData(row))
+    return history.push(`/adm/usermanagement/edit:` + row.tableData.uuid)
+  }
 
   if (hasPermission(permissions, ROLE_WRITE)) {
     myActions.push({
@@ -52,6 +57,16 @@ function UserList(props) {
       onClick: () => handleGoToUserAddPage(),
     })
   }
+  if (hasPermission(permissions, ROLE_WRITE)) {
+    myActions.push((rowData) => ({
+      icon: 'edit',
+      iconProps: {
+        id: 'editScope' + rowData.inum,
+      },
+      onClick: (event, rowData) => handleGoToUserEditPage(rowData),
+      disabled: !hasPermission(permissions, ROLE_WRITE),
+    }))
+  }
 
   // function handleAddNewRole() {
   //   toggle()

admin-ui/plugins/admin/plugin-metadata.js

@@ -2,6 +2,7 @@ import HealthPage from './components/Health/HealthPage'
 import ReportPage from './components/Reports/ReportPage'
 import UserList from './components/UserManagement/UserList'
 import UserAddPage from './components/UserManagement/UserAddPage'
+import UserEditPage from './components/UserManagement/UserEditPage'
 import UiRoleListPage from './components/Roles/UiRoleListPage'
 import UiPermListPage from './components/Permissions/UiPermListPage'
 import MappingPage from './components/Mapping/MappingPage'
@@ -143,6 +144,11 @@ const pluginMetadata = {
       path: PLUGIN_BASE_APTH + '/usermanagement/add',
       permission: ACR_READ,
     },
+    {
+      component: UserEditPage,
+      path: PLUGIN_BASE_APTH + '/usermanagement/edit:id',
+      permission: SCRIPT_WRITE,
+    },
   ],
   reducers: [
     { name: 'scriptReducer', reducer: scriptReducer },

admin-ui/plugins/admin/redux/actions/UserActions.js

@@ -3,13 +3,19 @@ import {
   UM_UPDATE_USERS_RESPONSE,
   UM_UPDATE_LOADING,
   UM_CREATE_NEW_USER,
+  UM_SELECTED_USER_DATA,
 } from './types'
 
 export const getUsers = (action) => ({
   type: UM_GET_USERS,
   payload: { action },
 })
 
+export const setSelectedUserData = (action) => ({
+  type: UM_SELECTED_USER_DATA,
+  payload: action,
+})
+
 export const updateUserResponse = (action) => ({
   type: UM_UPDATE_USERS_RESPONSE,
   payload: { action },

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

@@ -67,3 +67,4 @@ export const UM_GET_USERS = 'UM_GET_USERS'
 export const UM_UPDATE_USERS_RESPONSE = 'UM_UPDATE_USERS_RESPONSE'
 export const UM_UPDATE_LOADING = 'UM_UPDATE_LOADING'
 export const UM_CREATE_NEW_USER = 'UM_CREATE_NEW_USER'
+export const UM_SELECTED_USER_DATA = 'UM_SELECTED_USER_DATA'

admin-ui/plugins/admin/redux/reducers/UserReducer.js

@@ -2,11 +2,13 @@ import {
   UM_UPDATE_USERS_RESPONSE,
   UM_UPDATE_LOADING,
   UM_GET_USERS,
+  UM_SELECTED_USER_DATA,
 } from '../actions/types'
 import reducerRegistry from '../../../../app/redux/reducers/ReducerRegistry'
 
 const INIT_STATE = {
   items: [],
+  selectedUserData: null,
   loading: false,
 }
 const reducerName = 'userReducer'
@@ -23,6 +25,11 @@ export default function userReducer(state = INIT_STATE, action) {
         ...state,
         loading: action.payload,
       }
+    case UM_SELECTED_USER_DATA:
+      return {
+        ...state,
+        selectedUserData: action.payload,
+      }
     case UM_UPDATE_USERS_RESPONSE:
       console.log('USERS', action.payload)
       return {