blsmedia/bot
2
0
Fork 0
Code Issues Activity

Add editor header translation keys (#1110)

Browse Source 
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Implemented internationalization support across various components
using the `useTranslate` function for dynamic content translation.

- **Enhancements**
- Updated UI elements such as buttons, tooltips, placeholders, and
labels to display translated text, improving accessibility and user
experience for non-English speakers.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Baptiste Arnaud <contact@baptiste-arnaud.fr>
Co-authored-by: Baptiste Arnaud <baptiste.arnaud95@gmail.com>
This commit is contained in:
Gabriel Pavão
2023-12-28 06:50:33 -03:00
committed by GitHub
parent 74f5a17de0
commit d42e4a9ce1
38 changed files with 520 additions and 199 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -28,9 +28,11 @@ import { deleteInvitationQuery } from '../queries/deleteInvitationQuery'
import { updateCollaboratorQuery } from '../queries/updateCollaboratorQuery'
import { deleteCollaboratorQuery } from '../queries/deleteCollaboratorQuery'
import { sendInvitationQuery } from '../queries/sendInvitationQuery'
import { TFnType, useTranslate } from '@tolgee/react'
export const CollaborationList = () => {
const { currentRole, workspace } = useWorkspace()
const { t } = useTranslate()
const { typebot } = useTypebot()
const [invitationType, setInvitationType] = useState<CollaborationType>(
CollaborationType.READ
@@ -50,7 +52,7 @@ export const CollaborationList = () => {
typebotId: typebot?.id,
onError: (e) =>
showToast({
title: "Couldn't fetch collaborators",
title: t('share.button.popover.collaboratorsFetch.error.label'),
description: e.message,
}),
})
@@ -62,7 +64,7 @@ export const CollaborationList = () => {
typebotId: typebot?.id,
onError: (e) =>
showToast({
title: "Couldn't fetch invitations",
title: t('share.button.popover.invitationsFetch.error.label'),
description: e.message,
}),
})
@@ -132,7 +134,10 @@ export const CollaborationList = () => {
mutateCollaborators({ collaborators: collaborators ?? [] })
if (error)
return showToast({ title: error.name, description: error.message })
showToast({ status: 'success', title: 'Invitation sent! 📧' })
showToast({
status: 'success',
title: t('share.button.popover.invitationSent.successToast.label'),
})
setInvitationEmail('')
}
@@ -141,7 +146,7 @@ export const CollaborationList = () => {
<HStack as="form" onSubmit={handleInvitationSubmit} px="4" pb="2">
<Input
size="sm"
placeholder="colleague@company.com"
placeholder={t('share.button.popover.inviteInput.placeholder')}
name="inviteEmail"
value={invitationEmail}
onChange={(e) => setInvitationEmail(e.target.value)}
@@ -163,7 +168,7 @@ export const CollaborationList = () => {
type="submit"
isDisabled={!hasFullAccess}
>
Invite
{t('share.button.popover.inviteButton.label')}
</Button>
</HStack>
{workspace && (
@@ -176,6 +181,7 @@ export const CollaborationList = () => {
</HStack>
<Tag flexShrink={0}>
{convertCollaborationTypeEnumToReadable(
t,
CollaborationType.FULL_ACCESS
)}
</Tag>
@@ -227,6 +233,8 @@ const CollaborationTypeMenuButton = ({
type: CollaborationType
onChange: (type: CollaborationType) => void
}) => {
const { t } = useTranslate()
return (
<Menu placement="bottom-end">
<MenuButton
@@ -235,15 +243,15 @@ const CollaborationTypeMenuButton = ({
as={Button}
rightIcon={<ChevronLeftIcon transform={'rotate(-90deg)'} />}
>
{convertCollaborationTypeEnumToReadable(type)}
{convertCollaborationTypeEnumToReadable(t, type)}
</MenuButton>
<MenuList minW={0}>
<Stack maxH={'35vh'} overflowY="scroll" spacing="0">
<MenuItem onClick={() => onChange(CollaborationType.READ)}>
{convertCollaborationTypeEnumToReadable(CollaborationType.READ)}
{convertCollaborationTypeEnumToReadable(t, CollaborationType.READ)}
</MenuItem>
<MenuItem onClick={() => onChange(CollaborationType.WRITE)}>
{convertCollaborationTypeEnumToReadable(CollaborationType.WRITE)}
{convertCollaborationTypeEnumToReadable(t, CollaborationType.WRITE)}
</MenuItem>
</Stack>
</MenuList>
@@ -252,14 +260,15 @@ const CollaborationTypeMenuButton = ({
}
export const convertCollaborationTypeEnumToReadable = (
t: TFnType,
type: CollaborationType
) => {
switch (type) {
case CollaborationType.READ:
return 'Can view'
return t('collaboration.roles.view.label')
case CollaborationType.WRITE:
return 'Can edit'
return t('collaboration.roles.edit.label')
case CollaborationType.FULL_ACCESS:
return 'Full access'
return t('collaboration.roles.full.label')
}
}

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

@@ -13,6 +13,7 @@ import {
import { CollaborationType } from '@typebot.io/prisma'
import React from 'react'
import { convertCollaborationTypeEnumToReadable } from './CollaborationList'
import { useTranslate } from '@tolgee/react'
type Props = {
image?: string
@@ -35,6 +36,7 @@ export const CollaboratorItem = ({
onDeleteClick,
onChangeCollaborationType,
}: Props) => {
const { t } = useTranslate()
const hoverBgColor = useColorModeValue('gray.100', 'gray.700')
const handleEditClick = () =>
onChangeCollaborationType(CollaborationType.WRITE)
@@ -48,19 +50,19 @@ export const CollaboratorItem = ({
name={name}
image={image}
isGuest={isGuest}
tag={convertCollaborationTypeEnumToReadable(type)}
tag={convertCollaborationTypeEnumToReadable(t, type)}
/>
</MenuButton>
{isOwner && (
<MenuList shadow="lg">
<MenuItem onClick={handleEditClick}>
{convertCollaborationTypeEnumToReadable(CollaborationType.WRITE)}
{convertCollaborationTypeEnumToReadable(t, CollaborationType.WRITE)}
</MenuItem>
<MenuItem onClick={handleViewClick}>
{convertCollaborationTypeEnumToReadable(CollaborationType.READ)}
{convertCollaborationTypeEnumToReadable(t, CollaborationType.READ)}
</MenuItem>
<MenuItem color="red.500" onClick={onDeleteClick}>
Remove
{t('remove')}
</MenuItem>
</MenuList>
)}
@@ -80,28 +82,32 @@ export const CollaboratorIdentityContent = ({
image?: string
isGuest?: boolean
email: string
}) => (
<HStack justifyContent="space-between" maxW="full" py="2" px="4">
<HStack minW={0} spacing={3}>
<Avatar name={name} src={image} size="sm" />
<Stack spacing={0} minW="0">
{name && (
<Text textAlign="left" fontSize="15px">
{name}
}) => {
const { t } = useTranslate()
return (
<HStack justifyContent="space-between" maxW="full" py="2" px="4">
<HStack minW={0} spacing={3}>
<Avatar name={name} src={image} size="sm" />
<Stack spacing={0} minW="0">
{name && (
<Text textAlign="left" fontSize="15px">
{name}
</Text>
)}
<Text
color="gray.500"
fontSize={name ? '14px' : 'inherit'}
noOfLines={1}
>
{email}
</Text>
)}
<Text
color="gray.500"
fontSize={name ? '14px' : 'inherit'}
noOfLines={1}
>
{email}
</Text>
</Stack>
</Stack>
</HStack>
<HStack flexShrink={0}>
{isGuest && <Tag color="gray.400">{t('pending')}</Tag>}
<Tag>{tag}</Tag>
</HStack>
</HStack>
<HStack flexShrink={0}>
{isGuest && <Tag color="gray.400">Pending</Tag>}
<Tag>{tag}</Tag>
</HStack>
</HStack>
)
)
}