feat: add role name in edit & invite user dialog.

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: Yup.string().email().required().label(intl.get('email')),
-    .email()
+  role_name: Yup.string().required().label(intl.get('roles.label.role_name_')),
-    .required()
-    .label(intl.get('email')),
 });
 
 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';
@@ -27,11 +31,12 @@ function InviteUserFormContent({
         <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,32 @@ function InviteUserFormContent({
             </FormGroup>
           )}
         </FastField>
+        {/* ----------- Role name ----------- */}
+        <FastField name={'role_name'}>
+          {({ form, field: { value }, meta: { error, touched } }) => (
+            <FormGroup
+              label={<T id={'roles.label.role_name'} />}
+              labelInfo={<FieldRequiredHint />}
+              helperText={<ErrorMessage name="role_name" />}
+              className={classNames(CLASSES.FILL, 'form-group--role_name')}
+              intent={inputIntent({ error, touched })}
+            >
+              <ListSelect
+                items={[]}
+                // onItemSelect={(item) => {
+                //   form.setFieldValue('role_name', item.role_id);
+                // }}
+                selectedItem={value}
+                selectedItemProp={'role_id '}
+                // textProp={'role_name'}
+                // labelProp={'role_id '}
+                popoverProps={{ minimal: true }}
+                intent={inputIntent({ error, touched })}
+                // filterable={false}
+              />
+            </FormGroup>
+          )}
+        </FastField>
       </div>
 
       <div className={CLASSES.DIALOG_FOOTER}>

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: Yup.string().email().required().label(intl.get('email')),
-    .email()
+  first_name: Yup.string().required().label(intl.get('first_name_')),
-    .required()
+  last_name: Yup.string().required().label(intl.get('last_name_')),
-    .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_name: Yup.string().required().label(intl.get('roles.label.role_name_')),
 });
 
 export const UserFormSchema = Schema;

src/containers/Dialogs/UserFormDialog/UserFormContent.js

@@ -11,7 +11,7 @@ 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';
@@ -88,6 +88,29 @@ function UserFormContent({
             </FormGroup>
           )}
         </FastField>
+        {/* ----------- Role name ----------- */}
+        <FastField name={'role_name'}>
+          {({ form, field: { value }, meta: { error, touched } }) => (
+            <FormGroup
+              label={<T id={'roles.label.role_name'} />}
+              labelInfo={<FieldRequiredHint />}
+              className={classNames('form-group--role_name', CLASSES.FILL)}
+              intent={inputIntent({ error, touched })}
+            >
+              <ListSelect
+                items={[]}
+                // onItemSelect={(item) => {
+                //   form.setFieldValue('role_name', item.role_id);
+                // }}
+                selectedItem={value}
+                selectedItemProp={'role_id '}
+                // textProp={'role_name'}
+                // labelProp={'role_id '}
+                popoverProps={{ minimal: true }}
+              />
+            </FormGroup>
+          )}
+        </FastField>
       </div>
 
       <div className={CLASSES.DIALOG_FOOTER}>

src/containers/Preferences/Users/Roles/RolesForm/RolesForm.schema.js

@@ -3,7 +3,7 @@ import intl from 'react-intl-universal';
 import { DATATYPES_LENGTH } from 'common/dataTypes';
 
 const Schema = Yup.object().shape({
-  role_name: Yup.string().required().label(intl.get('roles.label.role_name')),
+  role_name: Yup.string().required().label(intl.get('roles.label.role_name_')),
   role_description: Yup.string().nullable().max(DATATYPES_LENGTH.TEXT),
 
   permissions: Yup.object().shape({

src/lang/en/index.json

@@ -1473,7 +1473,8 @@
   "roles.column.description":"description",
   "roles.edit_roles":"Edit Roles",
   "roles.delete_roles":"Delete Roles",
-  "roles.label.role_name":"Role name",
+  "roles.label.role_name":"Role Name",
+  "roles.label.role_name_":"Role name",
   "sidebar.transactions_locaking":"Transactions Locaking",
   "transactions_locking.dialog.label":"Transactions locking",
   "roles.permission_schema.success_message":"The role has been created successfully.",