admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

5078 ability to invite team members (#5750)

Browse Source 
## Added features
- update team member setting page
- add a section to send invitation by email
- add a new invitation email
- update email font to 'Trebuchet MS' as Google Inter font is not
working, we need to use a web safe font
https://templates.mailchimp.com/design/typography/

## Demo

https://github.com/twentyhq/twenty/assets/29927851/c731d883-1599-4281-87e3-0671f36994ae

## Invitation Email

![image](https://github.com/twentyhq/twenty/assets/29927851/d569fc64-fa0c-4769-a3dd-1193a12b495c)
This commit is contained in:
martmull
2024-06-05 16:35:14 +02:00
committed by GitHub
parent 3c4b497846
commit e9d3ed99ca
28 changed files with 608 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
packages/twenty-front/src/modules/ui/input/components/TextInputV2.tsx
View File

@ -34,12 +34,17 @@ const StyledInputContainer = styled.div`
width: 100%;
`;
const StyledInput = styled.input<Pick<TextInputV2ComponentProps, 'fullWidth'>>`
const StyledInput = styled.input<
Pick<TextInputV2ComponentProps, 'fullWidth' | 'LeftIcon'>
>`
background-color: ${({ theme }) => theme.background.transparent.lighter};
border: 1px solid ${({ theme }) => theme.border.color.medium};
border-bottom-left-radius: ${({ theme }) => theme.border.radius.sm};
border-bottom-left-radius: ${({ theme, LeftIcon }) =>
!LeftIcon && theme.border.radius.sm};
border-right: none;
border-top-left-radius: ${({ theme }) => theme.border.radius.sm};
border-left: ${({ LeftIcon }) => LeftIcon && 'none'};
border-top-left-radius: ${({ theme, LeftIcon }) =>
!LeftIcon && theme.border.radius.sm};
box-sizing: border-box;
color: ${({ theme }) => theme.font.color.primary};
display: flex;
@ -69,6 +74,18 @@ const StyledErrorHelper = styled.div`
padding: ${({ theme }) => theme.spacing(1)};
`;
const StyledLeftIconContainer = styled.div`
align-items: center;
background-color: ${({ theme }) => theme.background.transparent.lighter};
border: 1px solid ${({ theme }) => theme.border.color.medium};
border-bottom-left-radius: ${({ theme }) => theme.border.radius.sm};
border-right: none;
border-top-left-radius: ${({ theme }) => theme.border.radius.sm};
display: flex;
justify-content: center;
padding-left: ${({ theme }) => theme.spacing(2)};
`;
const StyledTrailingIconContainer = styled.div`
align-items: center;
background-color: ${({ theme }) => theme.background.transparent.lighter};
@ -101,6 +118,7 @@ export type TextInputV2ComponentProps = Omit<
fullWidth?: boolean;
error?: string;
RightIcon?: IconComponent;
LeftIcon?: IconComponent;
onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
onBlur?: FocusEventHandler<HTMLInputElement>;
};
@ -123,6 +141,7 @@ const TextInputV2Component = (
disabled,
tabIndex,
RightIcon,
LeftIcon,
autoComplete,
}: TextInputV2ComponentProps,
// eslint-disable-next-line @nx/workspace-component-props-naming
@ -143,6 +162,13 @@ const TextInputV2Component = (
<StyledContainer className={className} fullWidth={fullWidth ?? false}>
{label && <StyledLabel>{label + (required ? '*' : '')}</StyledLabel>}
<StyledInputContainer>
{!!LeftIcon && (
<StyledLeftIconContainer>
<StyledTrailingIcon>
<LeftIcon size={theme.icon.size.md} />
</StyledTrailingIcon>
</StyledLeftIconContainer>
)}
<StyledInput
autoComplete={autoComplete || 'off'}
ref={combinedRef}
@ -154,7 +180,7 @@ const TextInputV2Component = (
onChange?.(event.target.value);
}}
onKeyDown={onKeyDown}
{...{ autoFocus, disabled, placeholder, required, value }}
{...{ autoFocus, disabled, placeholder, required, value, LeftIcon }}
/>
<StyledTrailingIconContainer>
{error && (

143
packages/twenty-front/src/modules/workspace/components/WorkspaceInviteTeam.tsx Normal file
View File

@ -0,0 +1,143 @@
import { useEffect } from 'react';
import { Controller, useForm } from 'react-hook-form';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { zodResolver } from '@hookform/resolvers/zod';
import { Key } from 'ts-key-enum';
import { IconCopy, IconMail, IconSend } from 'twenty-ui';
import { z } from 'zod';
import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
import { Button } from '@/ui/input/button/components/Button';
import { TextInput } from '@/ui/input/components/TextInput';
import { extractEmailsList } from '@/workspace/utils/extractEmailList';
import { useSendInviteLinkMutation } from '~/generated/graphql';
import { isDefined } from '~/utils/isDefined';
const StyledContainer = styled.div`
display: flex;
flex-direction: row;
`;
const StyledLinkContainer = styled.div`
flex: 1;
margin-right: ${({ theme }) => theme.spacing(2)};
`;
const emailValidationSchema = (email: string) =>
z.string().email(`Invalid email '${email}'`);
const validationSchema = () =>
z
.object({
emails: z.string().superRefine((value, ctx) => {
if (!value.length) {
return;
}
const emails = extractEmailsList(value);
if (emails.length === 0) {
ctx.addIssue({
code: z.ZodIssueCode.invalid_string,
message: 'Emails should not be empty',
validation: 'email',
});
}
const invalidEmails: string[] = [];
for (const email of emails) {
const result = emailValidationSchema(email).safeParse(email);
if (!result.success) {
invalidEmails.push(email);
}
}
if (invalidEmails.length > 0) {
ctx.addIssue({
code: z.ZodIssueCode.invalid_string,
message:
invalidEmails.length > 1
? 'Emails "' + invalidEmails.join('", "') + '" are invalid'
: 'Email "' + invalidEmails.join('", "') + '" is invalid',
validation: 'email',
});
}
}),
})
.required();
type FormInput = {
emails: string;
};
export const WorkspaceInviteTeam = () => {
const theme = useTheme();
const { enqueueSnackBar } = useSnackBar();
const [sendInviteLink] = useSendInviteLinkMutation();
const { reset, handleSubmit, control, formState } = useForm<FormInput>({
mode: 'onSubmit',
resolver: zodResolver(validationSchema()),
defaultValues: {
emails: '',
},
});
const submit = handleSubmit(async (data) => {
const emailsList = extractEmailsList(data.emails);
const result = await sendInviteLink({ variables: { emails: emailsList } });
if (isDefined(result.errors)) {
throw result.errors;
}
enqueueSnackBar('Invite link sent to email addresses', {
variant: SnackBarVariant.Success,
icon: <IconCopy size={theme.icon.size.md} />,
duration: 2000,
});
});
const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
if (e.key === Key.Enter) {
submit();
}
};
const { isSubmitSuccessful } = formState;
useEffect(() => {
if (isSubmitSuccessful) {
reset();
}
}, [isSubmitSuccessful, reset]);
return (
<form onSubmit={submit}>
<StyledContainer>
<StyledLinkContainer>
<Controller
name="emails"
control={control}
render={({ field: { value, onChange }, fieldState: { error } }) => {
return (
<TextInput
placeholder="tim@apple.com, jony.ive@apple.dev"
LeftIcon={IconMail}
value={value}
onChange={onChange}
error={error?.message}
onKeyDown={handleKeyDown}
fullWidth
/>
);
}}
/>
</StyledLinkContainer>
<Button
Icon={IconSend}
variant="primary"
accent="blue"
title="Invite"
type="submit"
/>
</StyledContainer>
</form>
);
};

9
packages/twenty-front/src/modules/workspace/graphql/mutations/sendInviteLink.ts Normal file
View File

@ -0,0 +1,9 @@
import { gql } from '@apollo/client';
export const SEND_INVITE_LINK = gql`
mutation SendInviteLink($emails: [String!]!) {
sendInviteLink(emails: $emails) {
success
}
}
`;

28
packages/twenty-front/src/modules/workspace/utils/__tests__/extractEmailList.test.ts Normal file
View File

@ -0,0 +1,28 @@
import { extractEmailsList } from '@/workspace/utils/extractEmailList';
describe('extractEmailList', () => {
it('should extract email list', () => {
expect(extractEmailsList('toto@toto.com')).toEqual(['toto@toto.com']);
});
it('should extract email list with multiple emails', () => {
expect(extractEmailsList('toto@toto.com,toto2@toto.com')).toEqual([
'toto@toto.com',
'toto2@toto.com',
]);
});
it('should extract email list with multiple emails and wrong emails', () => {
expect(extractEmailsList('toto@toto.com,toto2@toto.com,toto')).toEqual([
'toto@toto.com',
'toto2@toto.com',
'toto',
]);
});
it('should remove duplicates', () => {
expect(extractEmailsList('toto@toto.com,toto@toto.com')).toEqual([
'toto@toto.com',
]);
});
it('should remove empty emails', () => {
expect(extractEmailsList('toto@toto.com,')).toEqual(['toto@toto.com']);
});
});

10
packages/twenty-front/src/modules/workspace/utils/extractEmailList.ts Normal file
View File

@ -0,0 +1,10 @@
export const extractEmailsList = (emails: string) => {
return Array.from(
new Set(
emails
.split(',')
.map((email) => email.trim())
.filter((email) => email.length > 0),
),
);
};