blsmedia/bot
2
0
Fork 0
Code Activity

💄 (collaborator) Fix collab list UI

Browse Source
This commit is contained in:
Baptiste Arnaud
2023-02-14 17:38:32 +01:00
parent 0e5a34d5a1
commit 6e066c44e1
3 changed files with 15 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
apps/builder/src/features/collaboration/components/CollaborationMenuButton/CollaborationList.tsx
View File

@ -137,8 +137,8 @@ export const CollaborationList = () => {
} }
return ( return (
<Stack spacing={4} py="4"> <Stack spacing={1} pt="4" pb="2">
<HStack as="form" onSubmit={handleInvitationSubmit} px="4"> <HStack as="form" onSubmit={handleInvitationSubmit} px="4" pb="2">
<Input <Input
size="sm" size="sm"
placeholder="colleague@company.com" placeholder="colleague@company.com"
@ -167,9 +167,9 @@ export const CollaborationList = () => {
</Button> </Button>
</HStack> </HStack>
{workspace && ( {workspace && (
<Flex py="2" px="4" justifyContent="space-between"> <Flex py="2" px="4" justifyContent="space-between" alignItems="center">
<HStack minW={0}> <HStack minW={0} spacing={3}>
<EmojiOrImageIcon icon={workspace.icon} /> <EmojiOrImageIcon icon={workspace.icon} boxSize="32px" />
<Text fontSize="15px" noOfLines={1}> <Text fontSize="15px" noOfLines={1}>
Everyone at {workspace.name} Everyone at {workspace.name}
</Text> </Text>
@ -208,7 +208,10 @@ export const CollaborationList = () => {
<HStack p="4" justifyContent="space-between"> <HStack p="4" justifyContent="space-between">
<HStack> <HStack>
<SkeletonCircle boxSize="32px" /> <SkeletonCircle boxSize="32px" />
<Skeleton width="230px" h="10px" /> <Stack>
<Skeleton width="130px" h="6px" />
<Skeleton width="200px" h="6px" />
</Stack>
</HStack> </HStack>
<Skeleton width="80px" h="10px" /> <Skeleton width="80px" h="10px" />
</HStack> </HStack>

6
apps/builder/src/features/collaboration/components/CollaborationMenuButton/CollaboratorButton.tsx
View File

@ -8,6 +8,7 @@ import {
Stack, Stack,
Tag, Tag,
Text, Text,
useColorModeValue,
} from '@chakra-ui/react' } from '@chakra-ui/react'
import { CollaborationType } from 'db' import { CollaborationType } from 'db'
import React from 'react' import React from 'react'
@ -34,13 +35,14 @@ export const CollaboratorItem = ({
onDeleteClick, onDeleteClick,
onChangeCollaborationType, onChangeCollaborationType,
}: Props) => { }: Props) => {
const hoverBgColor = useColorModeValue('gray.100', 'gray.700')
const handleEditClick = () => const handleEditClick = () =>
onChangeCollaborationType(CollaborationType.WRITE) onChangeCollaborationType(CollaborationType.WRITE)
const handleViewClick = () => const handleViewClick = () =>
onChangeCollaborationType(CollaborationType.READ) onChangeCollaborationType(CollaborationType.READ)
return ( return (
<Menu placement="bottom-end"> <Menu placement="bottom-end">
<MenuButton _hover={{ backgroundColor: 'gray.100' }} borderRadius="md"> <MenuButton _hover={{ backgroundColor: hoverBgColor }} borderRadius="md">
<CollaboratorIdentityContent <CollaboratorIdentityContent
email={email} email={email}
name={name} name={name}
@ -80,7 +82,7 @@ export const CollaboratorIdentityContent = ({
email: string email: string
}) => ( }) => (
<HStack justifyContent="space-between" maxW="full" py="2" px="4"> <HStack justifyContent="space-between" maxW="full" py="2" px="4">
<HStack minW={0}> <HStack minW={0} spacing={3}>
<Avatar name={name} src={image} size="sm" /> <Avatar name={name} src={image} size="sm" />
<Stack spacing={0} minW="0"> <Stack spacing={0} minW="0">
{name && ( {name && (

3
apps/builder/src/pages/api/typebots/[typebotId]/invitations.ts
View File

@ -15,7 +15,8 @@ import { sendGuestInvitationEmail } from 'emails'
const handler = async (req: NextApiRequest, res: NextApiResponse) => { const handler = async (req: NextApiRequest, res: NextApiResponse) => {
const user = await getAuthenticatedUser(req) const user = await getAuthenticatedUser(req)
if (!user) return notAuthenticated(res) if (!user) return notAuthenticated(res)
const typebotId = req.query.typebotId as string const typebotId = req.query.typebotId as string | undefined
if (!typebotId) return badRequest(res)
if (req.method === 'GET') { if (req.method === 'GET') {
const invitations = await prisma.invitation.findMany({ const invitations = await prisma.invitation.findMany({
where: { typebotId, typebot: canReadTypebots(typebotId, user) }, where: { typebotId, typebot: canReadTypebots(typebotId, user) },