feat(onboarding-ui): update props and fix bugs in CreateCloudWorkspac… (#675)

* feat(onboarding-ui): update props and fix bugs in CreateCloudWorkspacePage

* feat: add optional onBackButtonClick prop

* feat: add required rule to the select fields

* refactor: email and url error handling and add default values

* fix: rerun ci test

Author: PedroRorato

packages/onboarding-ui/src/forms/CreateCloudWorkspaceForm/CreateCloudWorkspaceForm.stories.tsx

@@ -23,7 +23,7 @@ export default {
       ['pt', 'Português'],
     ],
     domain: 'rocket.chat',
-    validateUrl: async (url) => url !== 'rocket',
+    validateUrl: async (url) => (url === 'rocket' ? 'invalid url' : true),
     validateEmail: async (email) =>
       email === 'rocket@rocket.chat' ? 'invalid email' : true,
   },

packages/onboarding-ui/src/forms/CreateCloudWorkspaceForm/CreateCloudWorkspaceForm.tsx

@@ -12,7 +12,7 @@ import {
   Grid,
 } from '@rocket.chat/fuselage';
 import type { ReactElement } from 'react';
-import type { SubmitHandler } from 'react-hook-form';
+import type { SubmitHandler, Validate } from 'react-hook-form';
 import { useForm, Controller } from 'react-hook-form';
 import { useTranslation, Trans } from 'react-i18next';
 
@@ -31,20 +31,23 @@ type CreateCloudWorkspaceFormPayload = {
 };
 
 type CreateCloudWorkspaceFormProps = {
+  defaultValues?: CreateCloudWorkspaceFormPayload;
   onSubmit: SubmitHandler<CreateCloudWorkspaceFormPayload>;
   serverRegionOptions: SelectOption[];
   languageOptions: SelectOption[];
   domain: string;
-  onBackButtonClick: () => void;
-  validateUrl: (url: string) => Promise<boolean>;
-  validateEmail: (url: string) => Promise<boolean>;
+  onBackButtonClick?: () => void;
+  validateUrl: Validate<string>;
+  validateEmail: Validate<string>;
 };
 
 const CreateCloudWorkspaceForm = ({
+  defaultValues,
   onSubmit,
   domain,
   serverRegionOptions,
   languageOptions,
+  onBackButtonClick,
   validateUrl,
   validateEmail,
 }: CreateCloudWorkspaceFormProps): ReactElement => {
@@ -68,20 +71,16 @@ const CreateCloudWorkspaceForm = ({
           </Field.Label>
           <Field.Row>
             <EmailInput
-              error={errors?.organizationEmail?.type || undefined}
               {...register('organizationEmail', {
                 required: true,
                 validate: validateEmail,
               })}
+              defaultValue={defaultValues?.organizationEmail}
+              error={errors?.organizationEmail?.type || undefined}
             />
           </Field.Row>
-          {errors.organizationEmail?.type === 'required' && (
-            <Field.Error>{t('component.form.requiredField')}</Field.Error>
-          )}
-          {errors.organizationEmail?.type === 'validate' && (
-            <Field.Error>
-              {t('form.createCloudWorkspace.fields.orgEmail.invalid')}
-            </Field.Error>
+          {errors?.organizationEmail && (
+            <Field.Error>{errors.organizationEmail.message}</Field.Error>
           )}
         </Field>
 
@@ -93,8 +92,9 @@ const CreateCloudWorkspaceForm = ({
           </Field.Label>
           <Field.Row>
             <TextInput
-              error={errors?.workspaceName?.type || undefined}
               {...register('workspaceName', { required: true })}
+              defaultValue={defaultValues?.workspaceName}
+              error={errors?.workspaceName?.type || undefined}
             />
           </Field.Row>
           {errors.workspaceName && (
@@ -115,15 +115,11 @@ const CreateCloudWorkspaceForm = ({
                 required: true,
                 validate: validateUrl,
               })}
+              defaultValue={defaultValues?.workspaceURL}
             />
           </Field.Row>
-          {errors.workspaceURL?.type === 'required' && (
-            <Field.Error>{t('component.form.requiredField')}</Field.Error>
-          )}
-          {errors.workspaceURL?.type === 'validate' && (
-            <Field.Error>
-              {t('form.createCloudWorkspace.fields.workspaceUrl.exists')}
-            </Field.Error>
+          {errors?.workspaceURL && (
+            <Field.Error>{errors.workspaceURL.message}</Field.Error>
           )}
         </Field>
 
@@ -144,6 +140,8 @@ const CreateCloudWorkspaceForm = ({
                 <Controller
                   name='serverRegion'
                   control={control}
+                  rules={{ required: true }}
+                  defaultValue={defaultValues?.serverRegion}
                   render={({ field }) => (
                     <Select
                       {...field}
@@ -172,6 +170,8 @@ const CreateCloudWorkspaceForm = ({
                 <Controller
                   name='language'
                   control={control}
+                  rules={{ required: true }}
+                  defaultValue={defaultValues?.language}
                   render={({ field }) => (
                     <Select
                       {...field}
@@ -228,6 +228,12 @@ const CreateCloudWorkspaceForm = ({
 
       <Form.Footer>
         <ButtonGroup>
+          {onBackButtonClick && (
+            <Button disabled={isSubmitting} onClick={onBackButtonClick}>
+              {t('component.form.action.back')}
+            </Button>
+          )}
+
           <Button
             type='submit'
             primary

packages/onboarding-ui/src/pages/CreateCloudWorkspacePage/CreateCloudWorkspacePage.stories.tsx

@@ -22,7 +22,7 @@ export default {
       ['pt', 'Português'],
     ],
     domain: 'rocket.chat',
-    validateUrl: async (url) => url !== 'rocket',
+    validateUrl: async (url) => (url === 'rocket' ? 'invalid url' : true),
     validateEmail: async (email) =>
       email === 'rocket@rocket.chat' ? 'invalid email' : true,
   },

packages/onboarding-ui/src/pages/CreateCloudWorkspacePage/CreateCloudWorkspacePage.tsx

@@ -1,7 +1,5 @@
-import type { SelectOption } from '@rocket.chat/fuselage';
 import { Box } from '@rocket.chat/fuselage';
-import type { ReactElement } from 'react';
-import type { SubmitHandler } from 'react-hook-form';
+import type { ComponentProps, ReactElement } from 'react';
 import { useTranslation, Trans } from 'react-i18next';
 
 import BackgroundLayer from '../../common/BackgroundLayer';
@@ -10,23 +8,9 @@ import CreateCloudWorkspaceForm from '../../forms/CreateCloudWorkspaceForm';
 import Description from './Description';
 import TitleCreateCloudPage from './TitleCreateCloudPage';
 
-type CreateCloudWorkspacePageProps = {
-  onSubmit: SubmitHandler<{
-    organizationEmail: string;
-    workspaceName: string;
-    workspaceURL: string;
-    serverRegion: string;
-    language: string;
-    agreement: boolean;
-    updates: boolean;
-  }>;
-  domain: string;
-  serverRegionOptions: SelectOption[];
-  languageOptions: SelectOption[];
-  onBackButtonClick: () => void;
-  validateUrl: (url: string) => Promise<boolean>;
-  validateEmail: (url: string) => Promise<boolean>;
-};
+type CreateCloudWorkspacePageProps = ComponentProps<
+  typeof CreateCloudWorkspaceForm
+>;
 
 const CreateCloudWorkspacePage = (
   props: CreateCloudWorkspacePageProps
@@ -41,6 +25,7 @@ const CreateCloudWorkspacePage = (
         subtitle={t('page.createCloudWorkspace.tryGold')}
       >
         <CreateCloudWorkspaceForm {...props} />
+
         <Box mbs='x28' display='inline' textAlign='center'>
           <Trans i18nKey='page.alreadyHaveAccount'>
             Already have an account?

packages/onboarding-ui/src/pages/CreateCloudWorkspacePage/Description.tsx

@@ -32,8 +32,8 @@ const Description = (): ReactElement => {
     [color]
   );
 
-  const listItem = (text: string) => (
-    <List.Item fontScale='p1'>
+  const listItem = (text: string, id: number) => (
+    <List.Item key={id} fontScale='p1'>
       <Icon name='check' size='x24' mie='x12' />
       {text}
     </List.Item>
@@ -43,7 +43,7 @@ const Description = (): ReactElement => {
     <Box>
       <Box>
         <List color={color} spacing='x16' icon={icon}>
-          {featuresList.map((text) => listItem(text))}
+          {featuresList.map((text, id) => listItem(text, id))}
         </List>
       </Box>
     </Box>