✨ (credentials) Add credentials management menu in workspace settings

Closes #1567

apps/builder/src/features/editor/components/BlockIcon.tsx

@@ -1,6 +1,5 @@
-import { useColorModeValue } from '@chakra-ui/react'
+import { IconProps, useColorModeValue } from '@chakra-ui/react'
 import React from 'react'
-import { FlagIcon, SendEmailIcon, ThunderIcon } from '@/components/icons'
 import { WaitIcon } from '@/features/blocks/logic/wait/components/WaitIcon'
 import { ScriptIcon } from '@/features/blocks/logic/script/components/ScriptIcon'
 import { JumpIcon } from '@/features/blocks/logic/jump/components/JumpIcon'
@@ -40,10 +39,12 @@ import { LogicBlockType } from '@typebot.io/schemas/features/blocks/logic/consta
 import { Block } from '@typebot.io/schemas'
 import { OpenAILogo } from '@/features/blocks/integrations/openai/components/OpenAILogo'
 import { ForgedBlockIcon } from '@/features/forge/ForgedBlockIcon'
+import { SendEmailIcon } from '@/features/blocks/integrations/sendEmail/components/SendEmailIcon'
+import { FlagIcon, ThunderIcon } from '@/components/icons'
 
-type BlockIconProps = { type: Block['type']; mt?: string }
+type BlockIconProps = { type: Block['type'] } & IconProps
 
-export const BlockIcon = ({ type, mt }: BlockIconProps): JSX.Element => {
+export const BlockIcon = ({ type, ...props }: BlockIconProps): JSX.Element => {
   const blue = useColorModeValue('blue.500', 'blue.300')
   const orange = useColorModeValue('orange.500', 'orange.300')
   const purple = useColorModeValue('purple.500', 'purple.300')
@@ -51,78 +52,78 @@ export const BlockIcon = ({ type, mt }: BlockIconProps): JSX.Element => {
 
   switch (type) {
     case BubbleBlockType.TEXT:
-      return <TextBubbleIcon color={blue} mt={mt} />
+      return <TextBubbleIcon color={blue} {...props} />
     case BubbleBlockType.IMAGE:
-      return <ImageBubbleIcon color={blue} mt={mt} />
+      return <ImageBubbleIcon color={blue} {...props} />
     case BubbleBlockType.VIDEO:
-      return <VideoBubbleIcon color={blue} mt={mt} />
+      return <VideoBubbleIcon color={blue} {...props} />
     case BubbleBlockType.EMBED:
-      return <EmbedBubbleIcon color={blue} mt={mt} />
+      return <EmbedBubbleIcon color={blue} {...props} />
     case BubbleBlockType.AUDIO:
-      return <AudioBubbleIcon color={blue} mt={mt} />
+      return <AudioBubbleIcon color={blue} {...props} />
     case InputBlockType.TEXT:
-      return <TextInputIcon color={orange} mt={mt} />
+      return <TextInputIcon color={orange} {...props} />
     case InputBlockType.NUMBER:
-      return <NumberInputIcon color={orange} mt={mt} />
+      return <NumberInputIcon color={orange} {...props} />
     case InputBlockType.EMAIL:
-      return <EmailInputIcon color={orange} mt={mt} />
+      return <EmailInputIcon color={orange} {...props} />
     case InputBlockType.URL:
-      return <UrlInputIcon color={orange} mt={mt} />
+      return <UrlInputIcon color={orange} {...props} />
     case InputBlockType.DATE:
-      return <DateInputIcon color={orange} mt={mt} />
+      return <DateInputIcon color={orange} {...props} />
     case InputBlockType.PHONE:
-      return <PhoneInputIcon color={orange} mt={mt} />
+      return <PhoneInputIcon color={orange} {...props} />
     case InputBlockType.CHOICE:
-      return <ButtonsInputIcon color={orange} mt={mt} />
+      return <ButtonsInputIcon color={orange} {...props} />
     case InputBlockType.PICTURE_CHOICE:
-      return <PictureChoiceIcon color={orange} mt={mt} />
+      return <PictureChoiceIcon color={orange} {...props} />
     case InputBlockType.PAYMENT:
-      return <PaymentInputIcon color={orange} mt={mt} />
+      return <PaymentInputIcon color={orange} {...props} />
     case InputBlockType.RATING:
-      return <RatingInputIcon color={orange} mt={mt} />
+      return <RatingInputIcon color={orange} {...props} />
     case InputBlockType.FILE:
-      return <FileInputIcon color={orange} mt={mt} />
+      return <FileInputIcon color={orange} {...props} />
     case LogicBlockType.SET_VARIABLE:
-      return <SetVariableIcon color={purple} mt={mt} />
+      return <SetVariableIcon color={purple} {...props} />
     case LogicBlockType.CONDITION:
-      return <ConditionIcon color={purple} mt={mt} />
+      return <ConditionIcon color={purple} {...props} />
     case LogicBlockType.REDIRECT:
-      return <RedirectIcon color={purple} mt={mt} />
+      return <RedirectIcon color={purple} {...props} />
     case LogicBlockType.SCRIPT:
-      return <ScriptIcon mt={mt} />
+      return <ScriptIcon {...props} />
     case LogicBlockType.WAIT:
-      return <WaitIcon color={purple} mt={mt} />
+      return <WaitIcon color={purple} {...props} />
     case LogicBlockType.JUMP:
-      return <JumpIcon color={purple} mt={mt} />
+      return <JumpIcon color={purple} {...props} />
     case LogicBlockType.TYPEBOT_LINK:
-      return <TypebotLinkIcon color={purple} mt={mt} />
+      return <TypebotLinkIcon color={purple} {...props} />
     case LogicBlockType.AB_TEST:
-      return <AbTestIcon color={purple} mt={mt} />
+      return <AbTestIcon color={purple} {...props} />
     case IntegrationBlockType.GOOGLE_SHEETS:
-      return <GoogleSheetsLogo mt={mt} />
+      return <GoogleSheetsLogo {...props} />
     case IntegrationBlockType.GOOGLE_ANALYTICS:
-      return <GoogleAnalyticsLogo mt={mt} />
+      return <GoogleAnalyticsLogo {...props} />
     case IntegrationBlockType.WEBHOOK:
-      return <ThunderIcon mt={mt} />
+      return <ThunderIcon {...props} />
     case IntegrationBlockType.ZAPIER:
-      return <ZapierLogo mt={mt} />
+      return <ZapierLogo {...props} />
     case IntegrationBlockType.MAKE_COM:
-      return <MakeComLogo mt={mt} />
+      return <MakeComLogo {...props} />
     case IntegrationBlockType.PABBLY_CONNECT:
-      return <PabblyConnectLogo mt={mt} />
+      return <PabblyConnectLogo {...props} />
     case IntegrationBlockType.EMAIL:
-      return <SendEmailIcon mt={mt} />
+      return <SendEmailIcon {...props} />
     case IntegrationBlockType.CHATWOOT:
-      return <ChatwootLogo mt={mt} />
+      return <ChatwootLogo {...props} />
     case IntegrationBlockType.PIXEL:
-      return <PixelLogo mt={mt} />
+      return <PixelLogo {...props} />
     case IntegrationBlockType.ZEMANTIC_AI:
-      return <ZemanticAiLogo mt={mt} />
+      return <ZemanticAiLogo {...props} />
     case 'start':
-      return <FlagIcon mt={mt} />
+      return <FlagIcon {...props} />
     case IntegrationBlockType.OPEN_AI:
-      return <OpenAILogo mt={mt} fill={openAIColor} />
+      return <OpenAILogo {...props} fill={openAIColor} />
     default:
-      return <ForgedBlockIcon type={type} mt={mt} />
+      return <ForgedBlockIcon type={type} {...props} />
   }
 }

apps/builder/src/features/editor/components/BlockLabel.tsx

@@ -1,4 +1,4 @@
-import { Text } from '@chakra-ui/react'
+import { Text, TextProps } from '@chakra-ui/react'
 import React from 'react'
 import { useTranslate } from '@tolgee/react'
 import { BubbleBlockType } from '@typebot.io/schemas/features/blocks/bubbles/constants'
@@ -8,98 +8,224 @@ import { LogicBlockType } from '@typebot.io/schemas/features/blocks/logic/consta
 import { Block } from '@typebot.io/schemas'
 import { ForgedBlockLabel } from '@/features/forge/ForgedBlockLabel'
 
-type Props = { type: Block['type'] }
+type Props = { type: Block['type'] } & TextProps
 
-export const BlockLabel = ({ type }: Props): JSX.Element => {
+export const BlockLabel = ({ type, ...props }: Props): JSX.Element => {
   const { t } = useTranslate()
 
   switch (type) {
     case 'start':
-      return <Text fontSize="sm">{t('editor.sidebarBlock.start.label')}</Text>
+      return (
+        <Text fontSize="sm" {...props}>
+          {t('editor.sidebarBlock.start.label')}
+        </Text>
+      )
     case BubbleBlockType.TEXT:
     case InputBlockType.TEXT:
-      return <Text fontSize="sm">{t('editor.sidebarBlock.text.label')}</Text>
+      return (
+        <Text fontSize="sm" {...props}>
+          {t('editor.sidebarBlock.text.label')}
+        </Text>
+      )
     case BubbleBlockType.IMAGE:
-      return <Text fontSize="sm">{t('editor.sidebarBlock.image.label')}</Text>
+      return (
+        <Text fontSize="sm" {...props}>
+          {t('editor.sidebarBlock.image.label')}
+        </Text>
+      )
     case BubbleBlockType.VIDEO:
-      return <Text fontSize="sm">{t('editor.sidebarBlock.video.label')}</Text>
+      return (
+        <Text fontSize="sm" {...props}>
+          {t('editor.sidebarBlock.video.label')}
+        </Text>
+      )
     case BubbleBlockType.EMBED:
-      return <Text fontSize="sm">{t('editor.sidebarBlock.embed.label')}</Text>
+      return (
+        <Text fontSize="sm" {...props}>
+          {t('editor.sidebarBlock.embed.label')}
+        </Text>
+      )
     case BubbleBlockType.AUDIO:
-      return <Text fontSize="sm">{t('editor.sidebarBlock.audio.label')}</Text>
+      return (
+        <Text fontSize="sm" {...props}>
+          {t('editor.sidebarBlock.audio.label')}
+        </Text>
+      )
     case InputBlockType.NUMBER:
-      return <Text fontSize="sm">{t('editor.sidebarBlock.number.label')}</Text>
+      return (
+        <Text fontSize="sm" {...props}>
+          {t('editor.sidebarBlock.number.label')}
+        </Text>
+      )
     case InputBlockType.EMAIL:
-      return <Text fontSize="sm">{t('editor.sidebarBlock.email.label')}</Text>
+      return (
+        <Text fontSize="sm" {...props}>
+          {t('editor.sidebarBlock.email.label')}
+        </Text>
+      )
     case InputBlockType.URL:
-      return <Text fontSize="sm">{t('editor.sidebarBlock.website.label')}</Text>
+      return (
+        <Text fontSize="sm" {...props}>
+          {t('editor.sidebarBlock.website.label')}
+        </Text>
+      )
     case InputBlockType.DATE:
-      return <Text fontSize="sm">{t('editor.sidebarBlock.date.label')}</Text>
+      return (
+        <Text fontSize="sm" {...props}>
+          {t('editor.sidebarBlock.date.label')}
+        </Text>
+      )
     case InputBlockType.PHONE:
-      return <Text fontSize="sm">{t('editor.sidebarBlock.phone.label')}</Text>
+      return (
+        <Text fontSize="sm" {...props}>
+          {t('editor.sidebarBlock.phone.label')}
+        </Text>
+      )
     case InputBlockType.CHOICE:
-      return <Text fontSize="sm">{t('editor.sidebarBlock.button.label')}</Text>
+      return (
+        <Text fontSize="sm" {...props}>
+          {t('editor.sidebarBlock.button.label')}
+        </Text>
+      )
     case InputBlockType.PICTURE_CHOICE:
       return (
-        <Text fontSize="sm">{t('editor.sidebarBlock.picChoice.label')}</Text>
+        <Text fontSize="sm" {...props}>
+          {t('editor.sidebarBlock.picChoice.label')}
+        </Text>
       )
     case InputBlockType.PAYMENT:
-      return <Text fontSize="sm">{t('editor.sidebarBlock.payment.label')}</Text>
+      return (
+        <Text fontSize="sm" {...props}>
+          {t('editor.sidebarBlock.payment.label')}
+        </Text>
+      )
     case InputBlockType.RATING:
-      return <Text fontSize="sm">{t('editor.sidebarBlock.rating.label')}</Text>
+      return (
+        <Text fontSize="sm" {...props}>
+          {t('editor.sidebarBlock.rating.label')}
+        </Text>
+      )
     case InputBlockType.FILE:
-      return <Text fontSize="sm">{t('editor.sidebarBlock.file.label')}</Text>
+      return (
+        <Text fontSize="sm" {...props}>
+          {t('editor.sidebarBlock.file.label')}
+        </Text>
+      )
     case LogicBlockType.SET_VARIABLE:
       return (
-        <Text fontSize="sm">{t('editor.sidebarBlock.setVariable.label')}</Text>
+        <Text fontSize="sm" {...props}>
+          {t('editor.sidebarBlock.setVariable.label')}
+        </Text>
       )
     case LogicBlockType.CONDITION:
       return (
-        <Text fontSize="sm">{t('editor.sidebarBlock.condition.label')}</Text>
+        <Text fontSize="sm" {...props}>
+          {t('editor.sidebarBlock.condition.label')}
+        </Text>
       )
     case LogicBlockType.REDIRECT:
       return (
-        <Text fontSize="sm">{t('editor.sidebarBlock.redirect.label')}</Text>
+        <Text fontSize="sm" {...props}>
+          {t('editor.sidebarBlock.redirect.label')}
+        </Text>
       )
     case LogicBlockType.SCRIPT:
-      return <Text fontSize="sm">{t('editor.sidebarBlock.script.label')}</Text>
+      return (
+        <Text fontSize="sm" {...props}>
+          {t('editor.sidebarBlock.script.label')}
+        </Text>
+      )
     case LogicBlockType.TYPEBOT_LINK:
-      return <Text fontSize="sm">{t('editor.sidebarBlock.typebot.label')}</Text>
+      return (
+        <Text fontSize="sm" {...props}>
+          {t('editor.sidebarBlock.typebot.label')}
+        </Text>
+      )
     case LogicBlockType.WAIT:
-      return <Text fontSize="sm">{t('editor.sidebarBlock.wait.label')}</Text>
+      return (
+        <Text fontSize="sm" {...props}>
+          {t('editor.sidebarBlock.wait.label')}
+        </Text>
+      )
     case LogicBlockType.JUMP:
-      return <Text fontSize="sm">{t('editor.sidebarBlock.jump.label')}</Text>
+      return (
+        <Text fontSize="sm" {...props}>
+          {t('editor.sidebarBlock.jump.label')}
+        </Text>
+      )
     case LogicBlockType.AB_TEST:
-      return <Text fontSize="sm">{t('editor.sidebarBlock.abTest.label')}</Text>
+      return (
+        <Text fontSize="sm" {...props}>
+          {t('editor.sidebarBlock.abTest.label')}
+        </Text>
+      )
     case IntegrationBlockType.GOOGLE_SHEETS:
-      return <Text fontSize="sm">{t('editor.sidebarBlock.sheets.label')}</Text>
+      return (
+        <Text fontSize="sm" {...props}>
+          {t('editor.sidebarBlock.sheets.label')}
+        </Text>
+      )
     case IntegrationBlockType.GOOGLE_ANALYTICS:
       return (
-        <Text fontSize="sm">{t('editor.sidebarBlock.analytics.label')}</Text>
+        <Text fontSize="sm" {...props}>
+          {t('editor.sidebarBlock.analytics.label')}
+        </Text>
       )
     case IntegrationBlockType.WEBHOOK:
-      return <Text fontSize="sm">HTTP request</Text>
+      return (
+        <Text fontSize="sm" {...props}>
+          HTTP request
+        </Text>
+      )
     case IntegrationBlockType.ZAPIER:
-      return <Text fontSize="sm">{t('editor.sidebarBlock.zapier.label')}</Text>
+      return (
+        <Text fontSize="sm" {...props}>
+          {t('editor.sidebarBlock.zapier.label')}
+        </Text>
+      )
     case IntegrationBlockType.MAKE_COM:
-      return <Text fontSize="sm">{t('editor.sidebarBlock.makecom.label')}</Text>
+      return (
+        <Text fontSize="sm" {...props}>
+          {t('editor.sidebarBlock.makecom.label')}
+        </Text>
+      )
     case IntegrationBlockType.PABBLY_CONNECT:
-      return <Text fontSize="sm">{t('editor.sidebarBlock.pabbly.label')}</Text>
+      return (
+        <Text fontSize="sm" {...props}>
+          {t('editor.sidebarBlock.pabbly.label')}
+        </Text>
+      )
     case IntegrationBlockType.EMAIL:
-      return <Text fontSize="sm">{t('editor.sidebarBlock.email.label')}</Text>
+      return (
+        <Text fontSize="sm" {...props}>
+          {t('editor.sidebarBlock.email.label')}
+        </Text>
+      )
     case IntegrationBlockType.CHATWOOT:
       return (
-        <Text fontSize="sm">{t('editor.sidebarBlock.chatwoot.label')}</Text>
+        <Text fontSize="sm" {...props}>
+          {t('editor.sidebarBlock.chatwoot.label')}
+        </Text>
       )
     case IntegrationBlockType.OPEN_AI:
-      return <Text fontSize="sm">{t('editor.sidebarBlock.openai.label')}</Text>
+      return (
+        <Text fontSize="sm" {...props}>
+          {t('editor.sidebarBlock.openai.label')}
+        </Text>
+      )
     case IntegrationBlockType.PIXEL:
-      return <Text fontSize="sm">{t('editor.sidebarBlock.pixel.label')}</Text>
+      return (
+        <Text fontSize="sm" {...props}>
+          {t('editor.sidebarBlock.pixel.label')}
+        </Text>
+      )
     case IntegrationBlockType.ZEMANTIC_AI:
       return (
-        <Text fontSize="sm">{t('editor.sidebarBlock.zemanticAi.label')}</Text>
+        <Text fontSize="sm" {...props}>
+          {t('editor.sidebarBlock.zemanticAi.label')}
+        </Text>
       )
     default:
-      return <ForgedBlockLabel type={type} />
+      return <ForgedBlockLabel type={type} {...props} />
   }
 }