Merge branch 'develop'

src/containers/Dialogs/InviteUserDialog/InviteUserDialog.schema.js

@@ -2,10 +2,8 @@ import * as Yup from 'yup';
 import intl from 'react-intl-universal';
 
 const Schema = Yup.object().shape({
-  email: Yup.string()
-    .email()
-    .required()
-    .label(intl.get('email')),
+  email: Yup.string().email().required().label(intl.get('email')),
+  role_id: Yup.string().required().label(intl.get('roles.label.role_name_')),
 });
 
-export const InviteUserFormSchema = Schema;
+export const InviteUserFormSchema = Schema;

src/containers/Dialogs/InviteUserDialog/InviteUserFormContent.js

@@ -1,7 +1,11 @@
 import React from 'react';
 import { FormGroup, InputGroup, Intent, Button } from '@blueprintjs/core';
 import { FastField, Form, useFormikContext, ErrorMessage } from 'formik';
-import { FormattedMessage as T } from 'components';
+import {
+  ListSelect,
+  FieldRequiredHint,
+  FormattedMessage as T,
+} from 'components';
 import { CLASSES } from 'common/classes';
 import classNames from 'classnames';
 import { inputIntent } from 'utils';
@@ -15,23 +19,24 @@ function InviteUserFormContent({
   closeDialog,
 }) {
   const { isSubmitting } = useFormikContext();
-  const { isEditMode, dialogName } = useInviteUserFormContext();
+  const { isEditMode, dialogName, roles } = useInviteUserFormContext();
 
   const handleClose = () => {
     closeDialog(dialogName);
   };
-
+  console.log(roles, 'XX');
   return (
     <Form>
       <div className={CLASSES.DIALOG_BODY}>
         <p className="mb2">
           <T id={'your_access_to_your_team'} />
         </p>
-
+        {/* ----------- Email ----------- */}
         <FastField name={'email'}>
           {({ field, meta: { error, touched } }) => (
             <FormGroup
               label={<T id={'email'} />}
+              labelInfo={<FieldRequiredHint />}
               className={classNames('form-group--email', CLASSES.FILL)}
               intent={inputIntent({ error, touched })}
               helperText={<ErrorMessage name="email" />}
@@ -40,6 +45,31 @@ function InviteUserFormContent({
             </FormGroup>
           )}
         </FastField>
+        {/* ----------- Role name ----------- */}
+        <FastField name={'role_id'}>
+          {({ form, field: { value }, meta: { error, touched } }) => (
+            <FormGroup
+              label={<T id={'roles.label.role_name'} />}
+              labelInfo={<FieldRequiredHint />}
+              helperText={<ErrorMessage name="role_id" />}
+              className={classNames(CLASSES.FILL, 'form-group--role_name')}
+              intent={inputIntent({ error, touched })}
+            >
+              <ListSelect
+                items={roles}
+                onItemSelect={({ id }) => {
+                  form.setFieldValue('role_id', id);
+                }}
+                selectedItem={value}
+                selectedItemProp={'id'}
+                textProp={'name'}
+                // labelProp={'id '}
+                popoverProps={{ minimal: true }}
+                intent={inputIntent({ error, touched })}
+              />
+            </FormGroup>
+          )}
+        </FastField>
       </div>
 
       <div className={CLASSES.DIALOG_FOOTER}>

src/containers/Dialogs/InviteUserDialog/InviteUserFormProvider.js

@@ -1,5 +1,5 @@
 import React, { createContext } from 'react';
-import { useCreateInviteUser, useUsers } from 'hooks/query';
+import { useCreateInviteUser, useUsers, useRoles } from 'hooks/query';
 import { DialogContent } from 'components';
 
 const InviteUserFormContext = createContext();
@@ -14,6 +14,9 @@ function InviteUserFormProvider({ userId, isEditMode, dialogName, ...props }) {
   // fetch users list.
   const { isLoading: isUsersLoading } = useUsers();
 
+  // fetch roles list.
+  const { data: roles, isLoading: isRolesLoading } = useRoles();
+
   // Provider state.
   const provider = {
     inviteUserMutate,
@@ -21,10 +24,14 @@ function InviteUserFormProvider({ userId, isEditMode, dialogName, ...props }) {
     userId,
     isUsersLoading,
     isEditMode,
+    roles,
   };
 
   return (
-    <DialogContent isLoading={isUsersLoading} name={'invite-form'}>
+    <DialogContent
+      isLoading={isUsersLoading || isRolesLoading}
+      name={'invite-form'}
+    >
       <InviteUserFormContext.Provider value={provider} {...props} />
     </DialogContent>
   );

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/UserForm.schema.js

@@ -2,20 +2,14 @@ import * as Yup from 'yup';
 import intl from 'react-intl-universal';
 
 const Schema = Yup.object().shape({
-  email: Yup.string()
-    .email()
-    .required()
-    .label(intl.get('email')),
-  first_name: Yup.string()
-    .required()
-    .label(intl.get('first_name_')),
-  last_name: Yup.string()
-    .required()
-    .label(intl.get('last_name_')),
+  email: Yup.string().email().required().label(intl.get('email')),
+  first_name: Yup.string().required().label(intl.get('first_name_')),
+  last_name: Yup.string().required().label(intl.get('last_name_')),
   phone_number: Yup.string()
     .matches()
     .required()
     .label(intl.get('phone_number_')),
+  role_id: Yup.string().required().label(intl.get('roles.label.role_name_')),
 });
 
 export const UserFormSchema = Schema;

src/containers/Dialogs/UserFormDialog/UserFormContent.js

@@ -11,20 +11,22 @@ import { FormattedMessage as T } from 'components';
 import { CLASSES } from 'common/classes';
 import classNames from 'classnames';
 import { inputIntent } from 'utils';
-import { FieldRequiredHint } from 'components';
+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 } = 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 } }) => (
@@ -88,6 +92,32 @@ function UserFormContent({
             </FormGroup>
           )}
         </FastField>
+        {/* ----------- Role name ----------- */}
+        <FastField name={'role_id'}>
+          {({ form, field: { value }, meta: { error, touched } }) => (
+            <FormGroup
+              label={<T id={'roles.label.role_name'} />}
+              labelInfo={<FieldRequiredHint />}
+              helperText={<ErrorMessage name="role_id" />}
+              className={classNames(CLASSES.FILL, 'form-group--role_name')}
+              intent={inputIntent({ error, touched })}
+            >
+              <ListSelect
+                items={roles}
+                onItemSelect={({ id }) => {
+                  form.setFieldValue('role_id', id);
+                }}
+                selectedItem={value}
+                selectedItemProp={'id'}
+                textProp={'name'}
+                // labelProp={'id '}
+                popoverProps={{ minimal: true }}
+                intent={inputIntent({ error, touched })}
+                disabled={isAuth}
+              />
+            </FormGroup>
+          )}
+        </FastField>
       </div>
 
       <div className={CLASSES.DIALOG_FOOTER}>

src/containers/Dialogs/UserFormDialog/UserFormProvider.js

@@ -1,5 +1,10 @@
 import React, { createContext, useContext } from 'react';
-import { useEditUser, useUser } from 'hooks/query';
+import {
+  useEditUser,
+  useUser,
+  useRoles,
+  useAuthenticatedAccount,
+} from 'hooks/query';
 
 import { DialogContent } from 'components';
 
@@ -17,10 +22,21 @@ function UserFormProvider({ userId, dialogName, ...props }) {
     enabled: !!userId,
   });
 
+  // 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,
 
@@ -28,10 +44,14 @@ function UserFormProvider({ userId, dialogName, ...props }) {
     EditUserMutate,
 
     isEditMode,
+    roles,
   };
 
   return (
-    <DialogContent isLoading={isUserLoading} name={'user-form'}>
+    <DialogContent
+      isLoading={isUserLoading || isRolesLoading}
+      name={'user-form'}
+    >
       <UserFormContext.Provider value={provider} {...props} />
     </DialogContent>
   );

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

@@ -0,0 +1,13 @@
+import intl from 'react-intl-universal';
+
+// handle delete errors.
+export const transformErrors = (errors, { setErrors, setCalloutCode }) => {
+  if (
+    errors.find((error) => error.type === 'CANNOT_AUTHORIZED_USER_MUTATE_ROLE')
+  ) {
+    setCalloutCode([200]);
+    setErrors({
+      role_id: intl.get('roles.error.you_cannot_change_your_own_role'),
+    });
+  }
+};