🌐 Improve i18n collaboration type and timeSince parsing
This commit is contained in:
@@ -28,7 +28,8 @@ 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'
|
||||
import { useTranslate } from '@tolgee/react'
|
||||
import { ReadableCollaborationType } from './ReadableCollaborationType'
|
||||
|
||||
export const CollaborationList = () => {
|
||||
const { currentRole, workspace } = useWorkspace()
|
||||
@@ -180,10 +181,7 @@ export const CollaborationList = () => {
|
||||
</Text>
|
||||
</HStack>
|
||||
<Tag flexShrink={0}>
|
||||
{convertCollaborationTypeEnumToReadable(
|
||||
t,
|
||||
CollaborationType.FULL_ACCESS
|
||||
)}
|
||||
<ReadableCollaborationType type={CollaborationType.FULL_ACCESS} />
|
||||
</Tag>
|
||||
</Flex>
|
||||
)}
|
||||
@@ -232,43 +230,25 @@ const CollaborationTypeMenuButton = ({
|
||||
}: {
|
||||
type: CollaborationType
|
||||
onChange: (type: CollaborationType) => void
|
||||
}) => {
|
||||
const { t } = useTranslate()
|
||||
|
||||
return (
|
||||
<Menu placement="bottom-end">
|
||||
<MenuButton
|
||||
flexShrink={0}
|
||||
size="sm"
|
||||
as={Button}
|
||||
rightIcon={<ChevronLeftIcon transform={'rotate(-90deg)'} />}
|
||||
>
|
||||
{convertCollaborationTypeEnumToReadable(t, type)}
|
||||
</MenuButton>
|
||||
<MenuList minW={0}>
|
||||
<Stack maxH={'35vh'} overflowY="scroll" spacing="0">
|
||||
<MenuItem onClick={() => onChange(CollaborationType.READ)}>
|
||||
{convertCollaborationTypeEnumToReadable(t, CollaborationType.READ)}
|
||||
</MenuItem>
|
||||
<MenuItem onClick={() => onChange(CollaborationType.WRITE)}>
|
||||
{convertCollaborationTypeEnumToReadable(t, CollaborationType.WRITE)}
|
||||
</MenuItem>
|
||||
</Stack>
|
||||
</MenuList>
|
||||
</Menu>
|
||||
)
|
||||
}
|
||||
|
||||
export const convertCollaborationTypeEnumToReadable = (
|
||||
t: TFnType,
|
||||
type: CollaborationType
|
||||
) => {
|
||||
switch (type) {
|
||||
case CollaborationType.READ:
|
||||
return t('collaboration.roles.view.label')
|
||||
case CollaborationType.WRITE:
|
||||
return t('collaboration.roles.edit.label')
|
||||
case CollaborationType.FULL_ACCESS:
|
||||
return t('collaboration.roles.full.label')
|
||||
}
|
||||
}
|
||||
}) => (
|
||||
<Menu placement="bottom-end">
|
||||
<MenuButton
|
||||
flexShrink={0}
|
||||
size="sm"
|
||||
as={Button}
|
||||
rightIcon={<ChevronLeftIcon transform={'rotate(-90deg)'} />}
|
||||
>
|
||||
<ReadableCollaborationType type={type} />
|
||||
</MenuButton>
|
||||
<MenuList minW={0}>
|
||||
<Stack maxH={'35vh'} overflowY="scroll" spacing="0">
|
||||
<MenuItem onClick={() => onChange(CollaborationType.READ)}>
|
||||
<ReadableCollaborationType type={CollaborationType.READ} />
|
||||
</MenuItem>
|
||||
<MenuItem onClick={() => onChange(CollaborationType.WRITE)}>
|
||||
<ReadableCollaborationType type={CollaborationType.WRITE} />
|
||||
</MenuItem>
|
||||
</Stack>
|
||||
</MenuList>
|
||||
</Menu>
|
||||
)
|
||||
|
||||
@@ -12,8 +12,8 @@ import {
|
||||
} from '@chakra-ui/react'
|
||||
import { CollaborationType } from '@typebot.io/prisma'
|
||||
import React from 'react'
|
||||
import { convertCollaborationTypeEnumToReadable } from './CollaborationList'
|
||||
import { useTranslate } from '@tolgee/react'
|
||||
import { ReadableCollaborationType } from './ReadableCollaborationType'
|
||||
|
||||
type Props = {
|
||||
image?: string
|
||||
@@ -50,16 +50,16 @@ export const CollaboratorItem = ({
|
||||
name={name}
|
||||
image={image}
|
||||
isGuest={isGuest}
|
||||
tag={convertCollaborationTypeEnumToReadable(t, type)}
|
||||
type={type}
|
||||
/>
|
||||
</MenuButton>
|
||||
{isOwner && (
|
||||
<MenuList shadow="lg">
|
||||
<MenuItem onClick={handleEditClick}>
|
||||
{convertCollaborationTypeEnumToReadable(t, CollaborationType.WRITE)}
|
||||
<ReadableCollaborationType type={CollaborationType.WRITE} />
|
||||
</MenuItem>
|
||||
<MenuItem onClick={handleViewClick}>
|
||||
{convertCollaborationTypeEnumToReadable(t, CollaborationType.READ)}
|
||||
<ReadableCollaborationType type={CollaborationType.READ} />
|
||||
</MenuItem>
|
||||
<MenuItem color="red.500" onClick={onDeleteClick}>
|
||||
{t('remove')}
|
||||
@@ -72,13 +72,13 @@ export const CollaboratorItem = ({
|
||||
|
||||
export const CollaboratorIdentityContent = ({
|
||||
name,
|
||||
tag,
|
||||
type,
|
||||
isGuest = false,
|
||||
image,
|
||||
email,
|
||||
}: {
|
||||
name?: string
|
||||
tag?: string
|
||||
type: CollaborationType
|
||||
image?: string
|
||||
isGuest?: boolean
|
||||
email: string
|
||||
@@ -106,7 +106,9 @@ export const CollaboratorIdentityContent = ({
|
||||
</HStack>
|
||||
<HStack flexShrink={0}>
|
||||
{isGuest && <Tag color="gray.400">{t('pending')}</Tag>}
|
||||
<Tag>{tag}</Tag>
|
||||
<Tag>
|
||||
<ReadableCollaborationType type={type} />
|
||||
</Tag>
|
||||
</HStack>
|
||||
</HStack>
|
||||
)
|
||||
|
||||
@@ -0,0 +1,14 @@
|
||||
import { T } from '@tolgee/react'
|
||||
import { CollaborationType } from '@typebot.io/prisma'
|
||||
|
||||
type Props = { type: CollaborationType }
|
||||
export const ReadableCollaborationType = ({ type }: Props) => {
|
||||
switch (type) {
|
||||
case CollaborationType.READ:
|
||||
return <T keyName="collaboration.roles.view.label" />
|
||||
case CollaborationType.WRITE:
|
||||
return <T keyName="collaboration.roles.edit.label" />
|
||||
case CollaborationType.FULL_ACCESS:
|
||||
return <T keyName="collaboration.roles.full.label" />
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user