feat(onboarding-ui): add function to prefill Workspace URL based on W… (

#694)

* feat(onboarding-ui): add function to prefill Workspace URL based on Workspace Name

* add Divider

* refactor: isValidDomanName method

* refactor: isValidDomanName method function

* refactor: change variable name

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

@@ -6,6 +6,46 @@ import WorkspaceUrlInput from './WorkspaceUrlInput';
 
 type Args = ComponentProps<typeof CreateCloudWorkspaceForm>;
 
+const isValidLength = (domainName: string) => {
+  if (domainName.length < 3) {
+    return 'Workspace URL should have at least 3 characters';
+  }
+  return true;
+};
+
+const isValidFirstSubstring = (domainName: string) => {
+  const firstSubstring = domainName.slice(0, 3);
+  if (firstSubstring === 'rc-') {
+    return 'Workspace URL address unavailable';
+  }
+  return true;
+};
+
+const isValidCharacter = (domainName: string) => {
+  const regex = RegExp('^([a-zA-Z0-9]([a-zA-Z0-9\\-]{0,61}[a-zA-Z0-9]))$');
+  if (!regex.test(domainName)) {
+    return 'Invalid character for Workspace URL';
+  }
+  return true;
+};
+
+const isValidDomainName = async (domainName: string) => {
+  const validationList = [
+    isValidLength,
+    isValidFirstSubstring,
+    isValidCharacter,
+  ];
+
+  for (const validate of validationList) {
+    const validateMessage = validate(domainName);
+    if (typeof validateMessage === 'string') {
+      return validateMessage;
+    }
+  }
+
+  return true;
+};
+
 export default {
   title: 'forms/CreateCloudWorkspaceForm',
   component: CreateCloudWorkspaceForm,
@@ -23,7 +63,7 @@ export default {
       ['pt', 'Português'],
     ],
     domain: 'rocket.chat',
-    validateUrl: async (url) => (url === 'rocket' ? 'invalid url' : true),
+    validateUrl: isValidDomainName,
     validateEmail: async (email) =>
       email === 'rocket@rocket.chat' ? 'invalid email' : true,
   },

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

@@ -5,13 +5,14 @@ import {
   ButtonGroup,
   Button,
   Box,
+  Divider,
   EmailInput,
   TextInput,
   Select,
   CheckBox,
   Grid,
 } from '@rocket.chat/fuselage';
-import type { ReactElement } from 'react';
+import type { ReactElement, FocusEvent } from 'react';
 import type { SubmitHandler, Validate } from 'react-hook-form';
 import { useForm, Controller } from 'react-hook-form';
 import { useTranslation, Trans } from 'react-i18next';
@@ -57,9 +58,16 @@ const CreateCloudWorkspaceForm = ({
     register,
     control,
     handleSubmit,
+    setValue,
     formState: { isValid, isValidating, isSubmitting, errors },
   } = useForm<CreateCloudWorkspaceFormPayload>({ mode: 'onChange' });
 
+  const onNameBlur = (e: FocusEvent<HTMLInputElement>) => {
+    const fieldValue = e.target.value;
+    const workspaceURL = fieldValue.replace(/[^a-zA-Z0-9-]/g, '').toLowerCase();
+    setValue('workspaceURL', workspaceURL, { shouldValidate: true });
+  };
+
   return (
     <Form onSubmit={handleSubmit(onSubmit)}>
       <Form.Title>{t('form.createCloudWorkspace.title')}</Form.Title>
@@ -95,6 +103,7 @@ const CreateCloudWorkspaceForm = ({
               {...register('workspaceName', { required: true })}
               defaultValue={defaultValues?.workspaceName}
               error={errors?.workspaceName?.type || undefined}
+              onBlur={onNameBlur}
             />
           </Field.Row>
           {errors.workspaceName && (
@@ -187,6 +196,8 @@ const CreateCloudWorkspaceForm = ({
           </Grid.Item>
         </Grid>
 
+        <Divider mb='x0' />
+
         <Field>
           <Field.Row justifyContent='flex-start'>
             <CheckBox {...register('agreement', { required: true })} mie='x8' />