✨ Add OpenAI block

Also migrate credentials to tRPC

Closes #253

apps/builder/src/features/blocks/integrations/sendEmail/components/SendEmailSettings/SendEmailSettings.tsx

@@ -8,14 +8,15 @@ import {
   FormLabel,
 } from '@chakra-ui/react'
 import { CodeEditor } from '@/components/inputs/CodeEditor'
-import { CredentialsType, SendEmailOptions, Variable } from 'models'
-import React, { useState } from 'react'
+import { SendEmailOptions, Variable } from 'models'
+import React from 'react'
 import { env, isNotEmpty } from 'utils'
 import { SmtpConfigModal } from './SmtpConfigModal'
 import { SwitchWithLabel } from '@/components/inputs/SwitchWithLabel'
 import { VariableSearchInput } from '@/components/inputs/VariableSearchInput'
 import { CredentialsDropdown } from '@/features/credentials'
 import { TextInput, Textarea } from '@/components/inputs'
+import { useWorkspace } from '@/features/workspace/WorkspaceProvider'
 
 type Props = {
   options: SendEmailOptions
@@ -23,11 +24,10 @@ type Props = {
 }
 
 export const SendEmailSettings = ({ options, onOptionsChange }: Props) => {
+  const { workspace } = useWorkspace()
   const { isOpen, onOpen, onClose } = useDisclosure()
-  const [refreshCredentialsKey, setRefreshCredentialsKey] = useState(0)
 
   const handleCredentialsSelect = (credentialsId?: string) => {
-    setRefreshCredentialsKey(refreshCredentialsKey + 1)
     onOptionsChange({
       ...options,
       credentialsId: credentialsId === undefined ? 'default' : credentialsId,
@@ -109,16 +109,18 @@ export const SendEmailSettings = ({ options, onOptionsChange }: Props) => {
     <Stack spacing={4}>
       <Stack>
         <Text>From: </Text>
-        <CredentialsDropdown
-          type={CredentialsType.SMTP}
-          currentCredentialsId={options.credentialsId}
-          onCredentialsSelect={handleCredentialsSelect}
-          onCreateNewClick={onOpen}
-          defaultCredentialLabel={env('SMTP_FROM')
-            ?.match(/<(.*)>/)
-            ?.pop()}
-          refreshDropdownKey={refreshCredentialsKey}
-        />
+        {workspace && (
+          <CredentialsDropdown
+            type="smtp"
+            workspaceId={workspace.id}
+            currentCredentialsId={options.credentialsId}
+            onCredentialsSelect={handleCredentialsSelect}
+            onCreateNewClick={onOpen}
+            defaultCredentialLabel={env('SMTP_FROM')
+              ?.match(/<(.*)>/)
+              ?.pop()}
+          />
+        )}
       </Stack>
       <TextInput
         label="Reply to:"

apps/builder/src/features/blocks/integrations/sendEmail/components/SendEmailSettings/SmtpConfigForm.tsx

@@ -2,12 +2,12 @@ import { TextInput, NumberInput } from '@/components/inputs'
 import { SwitchWithLabel } from '@/components/inputs/SwitchWithLabel'
 import { Stack } from '@chakra-ui/react'
 import { isDefined } from '@udecode/plate-common'
-import { SmtpCredentialsData } from 'models'
+import { SmtpCredentials } from 'models'
 import React from 'react'
 
 type Props = {
-  config: SmtpCredentialsData
-  onConfigChange: (config: SmtpCredentialsData) => void
+  config: SmtpCredentials['data']
+  onConfigChange: (config: SmtpCredentials['data']) => void
 }
 
 export const SmtpConfigForm = ({ config, onConfigChange }: Props) => {

apps/builder/src/features/blocks/integrations/sendEmail/components/SendEmailSettings/SmtpConfigModal.tsx

@@ -9,14 +9,14 @@ import {
   Button,
 } from '@chakra-ui/react'
 import { useUser } from '@/features/account'
-import { CredentialsType, SmtpCredentialsData } from 'models'
 import React, { useState } from 'react'
 import { isNotDefined } from 'utils'
 import { SmtpConfigForm } from './SmtpConfigForm'
 import { useWorkspace } from '@/features/workspace'
 import { useToast } from '@/hooks/useToast'
 import { testSmtpConfig } from '../../queries/testSmtpConfigQuery'
-import { createCredentialsQuery } from '@/features/credentials'
+import { SmtpCredentials } from 'models'
+import { trpc } from '@/lib/trpc'
 
 type Props = {
   isOpen: boolean
@@ -33,10 +33,29 @@ export const SmtpConfigModal = ({
   const { workspace } = useWorkspace()
   const [isCreating, setIsCreating] = useState(false)
   const { showToast } = useToast()
-  const [smtpConfig, setSmtpConfig] = useState<SmtpCredentialsData>({
+  const [smtpConfig, setSmtpConfig] = useState<SmtpCredentials['data']>({
     from: {},
     port: 25,
   })
+  const {
+    credentials: {
+      listCredentials: { refetch: refetchCredentials },
+    },
+  } = trpc.useContext()
+  const { mutate } = trpc.credentials.createCredentials.useMutation({
+    onSettled: () => setIsCreating(false),
+    onError: (err) => {
+      showToast({
+        description: err.message,
+        status: 'error',
+      })
+    },
+    onSuccess: (data) => {
+      refetchCredentials()
+      onNewCredentials(data.credentialsId)
+      onClose()
+    },
+  })
 
   const handleCreateClick = async () => {
     if (!user?.email || !workspace?.id) return
@@ -53,19 +72,14 @@ export const SmtpConfigModal = ({
         description: "We couldn't send the test email with your configuration",
       })
     }
-    const { data, error } = await createCredentialsQuery({
-      data: smtpConfig,
-      name: smtpConfig.from.email as string,
-      type: CredentialsType.SMTP,
-      workspaceId: workspace.id,
+    mutate({
+      credentials: {
+        data: smtpConfig,
+        name: smtpConfig.from.email as string,
+        type: 'smtp',
+        workspaceId: workspace.id,
+      },
     })
-    setIsCreating(false)
-    if (error)
-      return showToast({ title: error.name, description: error.message })
-    if (!data?.credentials)
-      return showToast({ description: "Credentials wasn't created" })
-    onNewCredentials(data.credentials.id)
-    onClose()
   }
   return (
     <Modal isOpen={isOpen} onClose={onClose}>

apps/builder/src/features/blocks/integrations/sendEmail/queries/testSmtpConfigQuery.ts

@@ -1,7 +1,7 @@
-import { SmtpCredentialsData } from 'models'
+import { SmtpCredentials } from 'models'
 import { sendRequest } from 'utils'
 
-export const testSmtpConfig = (smtpData: SmtpCredentialsData, to: string) =>
+export const testSmtpConfig = (smtpData: SmtpCredentials['data'], to: string) =>
   sendRequest({
     method: 'POST',
     url: '/api/integrations/email/test-config',