feat: update CreateFirstMemberPage props (#690)

Author: PedroRorato

packages/onboarding-ui/src/forms/CreateFirstMemberForm/CreateFirstMemberForm.spec.tsx

@@ -4,14 +4,16 @@ import CreateFirstMemberForm from './CreateFirstMemberForm';
 
 const onSubmit = jest.fn();
 const onBackButtonClick = jest.fn();
+const validateUsername = jest.fn();
 const validatePassword = jest.fn();
 
 const props = {
   currentStep: 1,
   stepCount: 1,
-  workspaceName: 'Kapai',
+  organizationName: 'Kapai',
   onSubmit,
   onBackButtonClick,
+  validateUsername,
   validatePassword,
 };
 

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

@@ -19,6 +19,8 @@ export default {
     workspaceName: 'Kapai',
     onSubmit: action('onSubmit'),
     onBackButtonClick: action('onBackButtonClick'),
+    validateUsername: async (username) =>
+      username === 'rocket' ? 'Invalid username' : true,
     validatePassword: async (password) =>
       password === '12345' ? 'Invalid password' : true,
   },

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

@@ -20,20 +20,24 @@ type CreateFirstMemberFormPayload = {
 };
 
 type CreateFirstMemberFormProps = {
+  defaultValues?: CreateFirstMemberFormPayload;
   currentStep: number;
   stepCount: number;
-  workspaceName: string;
+  organizationName: string;
   onSubmit: SubmitHandler<CreateFirstMemberFormPayload>;
   onBackButtonClick: () => void;
+  validateUsername: Validate<string>;
   validatePassword: Validate<string>;
 };
 
 const CreateFirstMemberForm = ({
+  defaultValues,
   currentStep,
   stepCount,
-  workspaceName,
+  organizationName,
   onSubmit,
   onBackButtonClick,
+  validateUsername,
   validatePassword,
 }: CreateFirstMemberFormProps): ReactElement => {
   const { t } = useTranslation();
@@ -49,7 +53,7 @@ const CreateFirstMemberForm = ({
       <Form.Steps currentStep={currentStep} stepCount={stepCount} />
       <Form.Title>{t('form.createFirstMemberForm.title')}</Form.Title>
       <Form.Subtitle>
-        {t('form.createFirstMemberForm.subtitle', { workspaceName })}
+        {t('form.createFirstMemberForm.subtitle', { organizationName })}
       </Form.Subtitle>
 
       <FieldGroup mbs='x16'>
@@ -61,12 +65,16 @@ const CreateFirstMemberForm = ({
           </Field.Label>
           <Field.Row>
             <TextInput
+              {...register('username', {
+                validate: validateUsername,
+                required: true,
+              })}
+              defaultValue={defaultValues?.username}
               error={errors?.username?.type || undefined}
-              {...register('username', { required: true })}
             />
           </Field.Row>
-          {errors.username && (
-            <Field.Error>{t('component.form.requiredField')}</Field.Error>
+          {errors?.username && (
+            <Field.Error>{errors.username.message}</Field.Error>
           )}
         </Field>
 
@@ -80,6 +88,7 @@ const CreateFirstMemberForm = ({
                 validate: validatePassword,
                 required: true,
               })}
+              defaultValue={defaultValues?.password}
             />
           </Field.Row>
           {errors.password && (

packages/onboarding-ui/src/pages/CreateFirstMemberPage/CreateFirstMemberPage.spec.tsx

@@ -4,14 +4,16 @@ import CreateFirstMemberPage from './CreateFirstMemberPage';
 
 const onSubmit = jest.fn();
 const onBackButtonClick = jest.fn();
+const validateUsername = jest.fn();
 const validatePassword = jest.fn();
 
 const props = {
   currentStep: 1,
   stepCount: 1,
-  workspaceName: 'Kapai',
+  organizationName: 'Kapai',
   onSubmit,
   onBackButtonClick,
+  validateUsername,
   validatePassword,
 };
 

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

@@ -19,6 +19,8 @@ export default {
     workspaceName: 'Kapai',
     onSubmit: action('onSubmit'),
     onBackButtonClick: action('onBackButtonClick'),
+    validateUsername: async (username) =>
+      username === 'rocket' ? 'Invalid username' : true,
     validatePassword: async (password) =>
       password === '12345' ? 'Invalid password' : true,
   },

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

@@ -1,23 +1,14 @@
-import type { ReactElement } from 'react';
-import type { SubmitHandler } from 'react-hook-form';
+import type { ComponentProps, ReactElement } from 'react';
 
 import BackgroundLayer from '../../common/BackgroundLayer';
 import FormPageLayout from '../../common/FormPageLayout';
 import type { FormPageLayoutStyleProps } from '../../common/Types';
 import CreateFirstMemberForm from '../../forms/CreateFirstMemberForm';
 import TitleCreateFirstMemberPage from './TitleCreateFirstMemberPage';
 
-type CreateCloudWorkspacePageProps = {
-  currentStep: number;
-  stepCount: number;
-  workspaceName: string;
-  onSubmit: SubmitHandler<{
-    username: string;
-    password: string;
-  }>;
-  onBackButtonClick: () => void;
-  validatePassword: (url: string) => Promise<boolean>;
-};
+type CreateCloudWorkspacePageProps = ComponentProps<
+  typeof CreateFirstMemberForm
+>;
 
 const CreateFirstMemberPage = (
   props: CreateCloudWorkspacePageProps