refactor(webapp): invite and user form with new blueprintjs-formik components

packages/webapp/src/containers/Dialogs/InviteUserDialog/InviteUserForm.tsx

@@ -16,6 +16,11 @@ import { transformApiErrors } from './utils';
 
 import { compose, objectKeysTransform } from '@/utils';
 
+const initialValues = {
+  email: '',
+  role_id: ''
+}
+
 function InviteUserForm({
   // #withDialogActions
   closeDialog,
@@ -23,7 +28,8 @@ function InviteUserForm({
   const { dialogName, isEditMode, inviteUserMutate, userId } =
     useInviteUserFormContext();
 
-  const initialValues = {
+  const initialFormValues = {
+    ...initialValues,
     status: 1,
     ...(isEditMode &&
       pick(
@@ -66,7 +72,7 @@ function InviteUserForm({
   return (
     <Formik
       validationSchema={InviteUserFormSchema}
-      initialValues={initialValues}
+      initialValues={initialFormValues}
       onSubmit={handleSubmit}
     >
       <InviteUserFormContent />

packages/webapp/src/containers/Dialogs/InviteUserDialog/InviteUserFormContent.tsx

@@ -6,6 +6,8 @@ import {
   ListSelect,
   FieldRequiredHint,
   FormattedMessage as T,
+  FFormGroup,
+  FInputGroup,
 } from '@/components';
 import { CLASSES } from '@/constants/classes';
 import classNames from 'classnames';
@@ -32,19 +34,13 @@ function InviteUserFormContent({
           <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" />}
-            >
-              <InputGroup medium={true} {...field} />
-            </FormGroup>
-          )}
-        </FastField>
+        <FFormGroup
+          name={'email'}
+          label={<T id={'invite_user.label.email'} />}
+          labelInfo={<FieldRequiredHint />}
+        >
+          <FInputGroup name={'email'} />
+        </FFormGroup>
         {/* ----------- Role name ----------- */}
         <FastField name={'role_id'}>
           {({ form, field: { value }, meta: { error, touched } }) => (
@@ -78,7 +74,13 @@ function InviteUserFormContent({
             <T id={'cancel'} />
           </Button>
 
-          <Button intent={Intent.PRIMARY} type="submit" disabled={isSubmitting}>
+          <Button
+            intent={Intent.PRIMARY}
+            type="submit"
+            disabled={isSubmitting}
+            loading={isSubmitting}
+            style={{ minWidth: '95px' }}
+          >
             {isEditMode ? <T id={'edit'} /> : <T id={'invite'} />}
           </Button>
         </div>

packages/webapp/src/containers/Dialogs/UserFormDialog/UserFormContent.tsx

@@ -41,17 +41,29 @@ function UserFormContent({
         <UserFormCalloutAlerts calloutCodes={calloutCode} />
 
         {/* ----------- Email ----------- */}
-        <FFormGroup name={'email'} label={<T id={'email'} />}>
+        <FFormGroup
+          name={'email'}
+          label={<T id={'email'} />}
+          labelInfo={<FieldRequiredHint />}
+        >
           <FInputGroup name={'email'} />
         </FFormGroup>
 
         {/* ----------- First name ----------- */}
-        <FFormGroup name={'first_name'} label={<T id={'first_name'} />}>
+        <FFormGroup
+          name={'first_name'}
+          label={<T id={'first_name'} />}
+          labelInfo={<FieldRequiredHint />}
+        >
           <FInputGroup name={'first_name'} />
         </FFormGroup>
 
         {/* ----------- Last name ----------- */}
-        <FFormGroup name={'last_name'} label={<T id={'last_name'} />}>
+        <FFormGroup
+          name={'last_name'}
+          label={<T id={'last_name'} />}
+          labelInfo={<FieldRequiredHint />}
+        >
           <FInputGroup name={'last_name'} />
         </FFormGroup>
 
@@ -94,6 +106,7 @@ function UserFormContent({
             type="submit"
             disabled={isSubmitting}
             loading={isSubmitting}
+            style={{ minWidth: '85px' }}
           >
             <T id={'edit'} />
           </Button>