feat: edit user dialog handle error.

src/containers/Dialogs/UserFormDialog/UserForm.js

@@ -10,6 +10,7 @@ import withDialogActions from 'containers/Dialog/withDialogActions';
 import { UserFormSchema } from './UserForm.schema';
 import UserFormContent from './UserFormContent';
 import { useUserFormContext } from './UserFormProvider';
+import { transformErrors } from './utils';
 
 import { compose, objectKeysTransform } from 'utils';
 
@@ -20,13 +21,10 @@ function UserForm({
   // #withDialogActions
   closeDialog,
 }) {
-  const {
-    dialogName,
-    user,
-    userId,
-    isEditMode,
-    EditUserMutate,
-  } = useUserFormContext();
+  const [calloutCode, setCalloutCode] = React.useState([]);
+
+  const { dialogName, user, userId, isEditMode, EditUserMutate } =
+    useUserFormContext();
 
   const initialValues = {
     ...(isEditMode &&
@@ -59,7 +57,7 @@ function UserForm({
           data: { errors },
         },
       } = error;
-
+      transformErrors(errors, { setErrors, setCalloutCode });
       setSubmitting(false);
     };
 
@@ -72,7 +70,7 @@ function UserForm({
       initialValues={initialValues}
       onSubmit={handleSubmit}
     >
-      <UserFormContent />
+      <UserFormContent calloutCode={calloutCode} />
     </Formik>
   );
 }

src/containers/Dialogs/UserFormDialog/UserFormContent.js

@@ -15,16 +15,18 @@ import { ListSelect, FieldRequiredHint } from 'components';
 import { useUserFormContext } from './UserFormProvider';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import { compose } from 'utils';
+import { UserFormCalloutAlerts } from './components';
 
 /**
  * User form content.
  */
 function UserFormContent({
+  calloutCode,
   // #withDialogActions
   closeDialog,
 }) {
   const { isSubmitting } = useFormikContext();
-  const { dialogName, roles } = useUserFormContext();
+  const { dialogName, roles, isAuth } = useUserFormContext();
 
   const handleClose = () => {
     closeDialog(dialogName);
@@ -33,6 +35,8 @@ function UserFormContent({
   return (
     <Form>
       <div className={Classes.DIALOG_BODY}>
+        <UserFormCalloutAlerts calloutCodes={calloutCode} />
+
         {/* ----------- Email ----------- */}
         <FastField name={'email'}>
           {({ field, meta: { error, touched } }) => (
@@ -109,6 +113,7 @@ function UserFormContent({
                 // labelProp={'id '}
                 popoverProps={{ minimal: true }}
                 intent={inputIntent({ error, touched })}
+                disabled={isAuth}
               />
             </FormGroup>
           )}

src/containers/Dialogs/UserFormDialog/UserFormProvider.js

@@ -1,5 +1,10 @@
 import React, { createContext, useContext } from 'react';
-import { useEditUser, useUser, useRoles } from 'hooks/query';
+import {
+  useEditUser,
+  useUser,
+  useRoles,
+  useAuthenticatedAccount,
+} from 'hooks/query';
 
 import { DialogContent } from 'components';
 
@@ -20,10 +25,18 @@ function UserFormProvider({ userId, dialogName, ...props }) {
   // fetch roles list.
   const { data: roles, isLoading: isRolesLoading } = useRoles();
 
+  // Retrieve authenticated user information.
+  const {
+    data: { id },
+  } = useAuthenticatedAccount();
+
   const isEditMode = userId;
 
+  const isAuth = user.system_user_id == id
+
   // Provider state.
   const provider = {
+    isAuth,
     userId,
     dialogName,
 

src/containers/Dialogs/UserFormDialog/components.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { includes } from 'lodash';
+import { Callout, Intent } from '@blueprintjs/core';
+
+export const UserFormCalloutAlerts = ({ calloutCodes }) => {
+  return [
+    includes(calloutCodes, 200) && (
+      <Callout icon={null} intent={Intent.DANGER}>
+        {intl.get('roles.error.you_cannot_change_your_own_role')}
+      </Callout>
+    ),
+  ];
+};

src/containers/Dialogs/UserFormDialog/utils.js

@@ -1,15 +1,13 @@
 import intl from 'react-intl-universal';
-import { Intent } from '@blueprintjs/core';
-import { AppToaster } from 'components';
 
 // handle delete errors.
-export const transformErrors = (errors) => {
+export const transformErrors = (errors, { setErrors, setCalloutCode }) => {
   if (
     errors.find((error) => error.type === 'CANNOT_AUTHORIZED_USER_MUTATE_ROLE')
   ) {
-    AppToaster.show({
-      message: intl.get('roles.error.you_cannot_change_your_own_role'),
-      intent: Intent.DANGER,
+    setCalloutCode([200]);
+    setErrors({
+      role_id: intl.get('roles.error.you_cannot_change_your_own_role'),
     });
   }
 };