🚸 (account) Improve account form and fix cyclic dependencies

apps/builder/src/components/VariableSearchInput.tsx

@@ -14,13 +14,13 @@ import {
   Tag,
 } from '@chakra-ui/react'
 import { EditIcon, PlusIcon, TrashIcon } from '@/components/icons'
-import { useTypebot } from '@/features/editor'
+import { useTypebot } from '@/features/editor/providers/TypebotProvider/TypebotProvider'
 import cuid from 'cuid'
 import { Variable } from 'models'
 import React, { useState, useRef, ChangeEvent, useEffect } from 'react'
 import { byId, isDefined, isNotDefined } from 'utils'
 import { useOutsideClick } from '@/hooks/useOutsideClick'
-import { useParentModal } from '@/features/graph'
+import { useParentModal } from '@/features/graph/providers/ParentModalProvider'
 
 type Props = {
   initialVariableId?: string

apps/builder/src/components/icons.tsx

@@ -355,8 +355,8 @@ export const SendEmailIcon = (props: IconProps) => (
 export const GithubIcon = (props: IconProps) => (
   <Icon viewBox="0 0 98 96" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
+      fillRule="evenodd"
+      clipRule="evenodd"
       d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"
       fill={useColorModeValue('#24292f', 'white')}
     />

apps/builder/src/components/inputs/TextBox.tsx

@@ -10,7 +10,7 @@ import { Variable } from 'models'
 import React, { ChangeEvent, useEffect, useRef, useState } from 'react'
 import { useDebouncedCallback } from 'use-debounce'
 import { env } from 'utils'
-import { VariablesButton } from '../../features/variables/components/VariablesButton'
+import { VariablesButton } from '@/features/variables'
 import { MoreInfoTooltip } from '../MoreInfoTooltip'
 
 export type TextBoxProps = {

apps/builder/src/features/account/UserProvider.tsx

@@ -5,27 +5,28 @@ import {
   ReactNode,
   useContext,
   useEffect,
-  useMemo,
   useState,
 } from 'react'
-import { isDefined, isNotDefined } from 'utils'
-import { dequal } from 'dequal'
+import { env, isDefined, isNotDefined } from 'utils'
 import { User } from 'db'
 import { setUser as setSentryUser } from '@sentry/nextjs'
 import { useToast } from '@/hooks/useToast'
 import { updateUserQuery } from './queries/updateUserQuery'
+import { useDebouncedCallback } from 'use-debounce'
 
 const userContext = createContext<{
   user?: User
   isLoading: boolean
-  isSaving: boolean
-  hasUnsavedChanges: boolean
   currentWorkspaceId?: string
   updateUser: (newUser: Partial<User>) => void
-  saveUser: (newUser?: Partial<User>) => Promise<void>
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  //@ts-ignore
-}>({})
+}>({
+  isLoading: false,
+  updateUser: () => {
+    console.log('updateUser not implemented')
+  },
+})
+
+const debounceTimeout = 1000
 
 export const UserProvider = ({ children }: { children: ReactNode }) => {
   const router = useRouter()
@@ -34,13 +35,6 @@ export const UserProvider = ({ children }: { children: ReactNode }) => {
   const { showToast } = useToast()
   const [currentWorkspaceId, setCurrentWorkspaceId] = useState<string>()
 
-  const [isSaving, setIsSaving] = useState(false)
-
-  const hasUnsavedChanges = useMemo(
-    () => !dequal(session?.user, user),
-    [session?.user, user]
-  )
-
   useEffect(() => {
     if (isDefined(user) || isNotDefined(session)) return
     setCurrentWorkspaceId(
@@ -70,31 +64,36 @@ export const UserProvider = ({ children }: { children: ReactNode }) => {
 
   const isSigningIn = () => ['/signin', '/register'].includes(router.pathname)
 
-  const updateUser = (newUser: Partial<User>) => {
+  const updateUser = (updates: Partial<User>) => {
     if (isNotDefined(user)) return
-    setUser({ ...user, ...newUser })
+    const newUser = { ...user, ...updates }
+    setUser(newUser)
+    saveUser(newUser)
   }
 
-  const saveUser = async (newUser?: Partial<User>) => {
-    if (isNotDefined(user)) return
-    setIsSaving(true)
-    if (newUser) updateUser(newUser)
-    const { error } = await updateUserQuery(user.id, { ...user, ...newUser })
-    if (error) showToast({ title: error.name, description: error.message })
-    await refreshUser()
-    setIsSaving(false)
-  }
+  const saveUser = useDebouncedCallback(
+    async (newUser?: Partial<User>) => {
+      if (isNotDefined(user)) return
+      const { error } = await updateUserQuery(user.id, { ...user, ...newUser })
+      if (error) showToast({ title: error.name, description: error.message })
+      await refreshUser()
+    },
+    env('E2E_TEST') === 'true' ? 0 : debounceTimeout
+  )
+
+  useEffect(() => {
+    return () => {
+      saveUser.flush()
+    }
+  }, [saveUser])
 
   return (
     <userContext.Provider
       value={{
         user,
-        isSaving,
         isLoading: status === 'loading',
-        hasUnsavedChanges,
         currentWorkspaceId,
         updateUser,
-        saveUser,
       }}
     >
       {children}

apps/builder/src/features/account/account.spec.ts

@@ -7,13 +7,10 @@ test.describe.configure({ mode: 'parallel' })
 test('should display user info properly', async ({ page }) => {
   await page.goto('/typebots')
   await page.click('text=Settings & Members')
-  const saveButton = page.locator('button:has-text("Save")')
-  await expect(saveButton).toBeHidden()
   expect(
     page.locator('input[type="email"]').getAttribute('disabled')
   ).toBeDefined()
-  await page.fill('#name', 'John Doe')
-  expect(saveButton).toBeVisible()
+  await page.getByRole('textbox', { name: 'Name:' }).fill('John Doe')
   await page.setInputFiles('input[type="file"]', getTestAsset('avatar.jpg'))
   await expect(page.locator('img >> nth=1')).toHaveAttribute(
     'src',

apps/builder/src/features/account/components/MyAccountForm/MyAccountForm.tsx

@@ -1,35 +1,28 @@
-import {
-  Stack,
-  HStack,
-  Avatar,
-  Button,
-  FormControl,
-  FormLabel,
-  Input,
-  Tooltip,
-  Flex,
-  Text,
-} from '@chakra-ui/react'
+import { Stack, HStack, Avatar, Text, Tooltip } from '@chakra-ui/react'
 import { UploadIcon } from '@/components/icons'
-import React, { ChangeEvent } from 'react'
-import { isDefined } from 'utils'
+import React, { useState } from 'react'
 import { ApiTokensList } from './ApiTokensList'
 import { UploadButton } from '@/components/ImageUploadContent/UploadButton'
 import { useUser } from '@/features/account'
+import { Input } from '@/components/inputs/Input'
 
 export const MyAccountForm = () => {
-  const { user, updateUser, saveUser, hasUnsavedChanges, isSaving } = useUser()
+  const { user, updateUser } = useUser()
+  const [name, setName] = useState(user?.name ?? '')
+  const [email, setEmail] = useState(user?.email ?? '')
 
   const handleFileUploaded = async (url: string) => {
     updateUser({ image: url })
   }
 
-  const handleNameChange = (e: ChangeEvent<HTMLInputElement>) => {
-    updateUser({ name: e.target.value })
+  const handleNameChange = (newName: string) => {
+    setName(newName)
+    updateUser({ name: newName })
   }
 
-  const handleEmailChange = (e: ChangeEvent<HTMLInputElement>) => {
-    updateUser({ email: e.target.value })
+  const handleEmailChange = (newEmail: string) => {
+    setEmail(newEmail)
+    updateUser({ email: newEmail })
   }
 
   return (
@@ -56,40 +49,26 @@ export const MyAccountForm = () => {
         </Stack>
       </HStack>
 
-      <FormControl>
-        <FormLabel htmlFor="name">Name</FormLabel>
-        <Input id="name" value={user?.name ?? ''} onChange={handleNameChange} />
-      </FormControl>
-      {isDefined(user?.email) && (
-        <Tooltip
-          label="Updating email is not available."
-          placement="left"
-          hasArrow
-        >
-          <FormControl>
-            <FormLabel htmlFor="email">Email address</FormLabel>
-            <Input
-              id="email"
-              type="email"
-              isDisabled
-              value={user?.email ?? ''}
-              onChange={handleEmailChange}
-            />
-          </FormControl>
-        </Tooltip>
-      )}
-
-      {hasUnsavedChanges && (
-        <Flex justifyContent="flex-end">
-          <Button
-            colorScheme="blue"
-            onClick={() => saveUser()}
-            isLoading={isSaving}
-          >
-            Save
-          </Button>
-        </Flex>
-      )}
+      <Input
+        value={name}
+        onChange={handleNameChange}
+        label="Name:"
+        withVariableButton={false}
+        debounceTimeout={0}
+      />
+      <Tooltip label="Updating email is not available. Contact the support if you want to change it.">
+        <span>
+          <Input
+            type="email"
+            value={email}
+            onChange={handleEmailChange}
+            label="Email address:"
+            withVariableButton={false}
+            debounceTimeout={0}
+            isDisabled
+          />
+        </span>
+      </Tooltip>
 
       {user && <ApiTokensList user={user} />}
     </Stack>

apps/builder/src/features/account/components/UserPreferenceForm/UserPreferencesForm.tsx

@@ -7,20 +7,20 @@ import { AppearanceRadioGroup } from './AppearanceRadioGroup'
 
 export const UserPreferencesForm = () => {
   const { setColorMode } = useColorMode()
-  const { saveUser, user } = useUser()
+  const { user, updateUser } = useUser()
 
   useEffect(() => {
     if (!user?.graphNavigation)
-      saveUser({ graphNavigation: GraphNavigation.TRACKPAD })
-  }, [saveUser, user?.graphNavigation])
+      updateUser({ graphNavigation: GraphNavigation.TRACKPAD })
+  }, [updateUser, user?.graphNavigation])
 
   const changeGraphNavigation = async (value: string) => {
-    await saveUser({ graphNavigation: value as GraphNavigation })
+    updateUser({ graphNavigation: value as GraphNavigation })
   }
 
   const changeAppearance = async (value: string) => {
     setColorMode(value)
-    await saveUser({ preferredAppAppearance: value })
+    updateUser({ preferredAppAppearance: value })
   }
 
   return (

apps/builder/src/features/dashboard/components/OnboardingModal.tsx

@@ -23,7 +23,7 @@ export const OnboardingModal = ({ totalTypebots }: Props) => {
     '/bots/onboarding.json',
     '/bots/onboarding-dark.json'
   )
-  const { user, saveUser } = useUser()
+  const { user, updateUser } = useUser()
   const { isOpen, onOpen, onClose } = useDisclosure()
   const [typebot, setTypebot] = useState<Typebot>()
   const confettiCanvaContainer = useRef<HTMLCanvasElement | null>(null)
@@ -88,15 +88,15 @@ export const OnboardingModal = ({ totalTypebots }: Props) => {
     const isCompany = answer.variableId === 'cl126jqww000w2e6dq9yv4ifq'
     const isCategories = answer.variableId === 'cl126mo3t001b2e6dvyi16bkd'
     const isOtherCategories = answer.variableId === 'cl126q38p001q2e6d0hj23f6b'
-    if (isName) saveUser({ name: answer.content })
-    if (isCompany) saveUser({ company: answer.content })
+    if (isName) updateUser({ name: answer.content })
+    if (isCompany) updateUser({ company: answer.content })
     if (isCategories) {
       const onboardingCategories = answer.content.split(', ')
-      saveUser({ onboardingCategories })
+      updateUser({ onboardingCategories })
       setChosenCategories(onboardingCategories)
     }
     if (isOtherCategories)
-      saveUser({
+      updateUser({
         onboardingCategories: [...chosenCategories, answer.content],
       })
   }

apps/builder/src/features/editor/providers/TypebotProvider/TypebotProvider.tsx

@@ -17,11 +17,11 @@ import {
   useState,
 } from 'react'
 import { isDefined, isNotDefined, omit } from 'utils'
+import { edgesAction, EdgesActions } from './actions/edges'
+import { itemsAction, ItemsActions } from './actions/items'
 import { GroupsActions, groupsActions } from './actions/groups'
 import { blocksAction, BlocksActions } from './actions/blocks'
 import { variablesAction, VariablesActions } from './actions/variables'
-import { edgesAction, EdgesActions } from './actions/edges'
-import { itemsAction, ItemsActions } from './actions/items'
 import { dequal } from 'dequal'
 import cuid from 'cuid'
 import { useToast } from '@/hooks/useToast'
@@ -30,17 +30,19 @@ import useUndo from '../../hooks/useUndo'
 import { useLinkedTypebots } from '@/hooks/useLinkedTypebots'
 import { updateTypebotQuery } from '../../queries/updateTypebotQuery'
 import { preventUserFromRefreshing } from '@/utils/helpers'
-import { updatePublishedTypebotQuery } from '@/features/publish'
-import { saveWebhookQuery } from '@/features/blocks/integrations/webhook/queries/saveWebhookQuery'
 import {
   createPublishedTypebotQuery,
+  updatePublishedTypebotQuery,
   deletePublishedTypebotQuery,
+} from '@/features/publish/queries'
+import { saveWebhookQuery } from '@/features/blocks/integrations/webhook/queries/saveWebhookQuery'
+import {
   checkIfTypebotsAreEqual,
   checkIfPublished,
   parseTypebotToPublicTypebot,
   parseDefaultPublicId,
   parsePublicTypebotToTypebot,
-} from '@/features/publish'
+} from '@/features/publish/utils'
 import { useAutoSave } from '@/hooks/useAutoSave'
 
 const autoSaveTimeout = 10000
@@ -60,6 +62,7 @@ type UpdateTypebotPayload = Partial<{
 export type SetTypebot = (
   newPresent: Typebot | ((current: Typebot) => Typebot)
 ) => void
+
 const typebotContext = createContext<
   {
     typebot?: Typebot

apps/builder/src/features/editor/providers/TypebotProvider/actions/blocks.ts

@@ -5,7 +5,6 @@ import {
   DraggableBlockType,
   BlockIndices,
 } from 'models'
-import { removeEmptyGroups } from './groups'
 import { WritableDraft } from 'immer/dist/types/types-external'
 import { SetTypebot } from '../TypebotProvider'
 import produce from 'immer'
@@ -13,7 +12,7 @@ import { cleanUpEdgeDraft, deleteEdgeDraft } from './edges'
 import cuid from 'cuid'
 import { byId, isWebhookBlock, blockHasItems } from 'utils'
 import { duplicateItemDraft } from './items'
-import { parseNewBlock } from '@/features/graph'
+import { parseNewBlock } from '@/features/graph/utils'
 
 export type BlocksActions = {
   createBlock: (
@@ -30,7 +29,7 @@ export type BlocksActions = {
   deleteBlock: (indices: BlockIndices) => void
 }
 
-const blocksAction = (setTypebot: SetTypebot): BlocksActions => ({
+export const blocksAction = (setTypebot: SetTypebot): BlocksActions => ({
   createBlock: (
     groupId: string,
     block: DraggableBlock | DraggableBlockType,
@@ -78,7 +77,7 @@ const removeBlockFromGroup =
     typebot.groups[groupIndex].blocks.splice(blockIndex, 1)
   }
 
-const createBlockDraft = (
+export const createBlockDraft = (
   typebot: WritableDraft<Typebot>,
   block: DraggableBlock | DraggableBlockType,
   groupId: string,
@@ -134,7 +133,7 @@ const moveBlockToGroup = (
   typebot.groups[groupIndex].blocks.splice(blockIndex ?? 0, 0, newBlock)
 }
 
-const duplicateBlockDraft =
+export const duplicateBlockDraft =
   (groupId: string) =>
   (block: Block): Block => {
     const blockId = cuid()
@@ -162,4 +161,19 @@ const duplicateBlockDraft =
     }
   }
 
-export { blocksAction, createBlockDraft, duplicateBlockDraft }
+export const deleteGroupDraft =
+  (typebot: WritableDraft<Typebot>) => (groupIndex: number) => {
+    cleanUpEdgeDraft(typebot, typebot.groups[groupIndex].id)
+    typebot.groups.splice(groupIndex, 1)
+  }
+
+export const removeEmptyGroups = (typebot: WritableDraft<Typebot>) => {
+  const emptyGroupsIndices = typebot.groups.reduce<number[]>(
+    (arr, group, idx) => {
+      group.blocks.length === 0 && arr.push(idx)
+      return arr
+    },
+    []
+  )
+  emptyGroupsIndices.forEach(deleteGroupDraft(typebot))
+}

apps/builder/src/features/editor/providers/TypebotProvider/actions/groups.ts

@@ -1,16 +1,12 @@
 import cuid from 'cuid'
 import { produce } from 'immer'
-import { WritableDraft } from 'immer/dist/internal'
-import {
-  Group,
-  DraggableBlock,
-  DraggableBlockType,
-  BlockIndices,
-  Typebot,
-} from 'models'
+import { Group, DraggableBlock, DraggableBlockType, BlockIndices } from 'models'
 import { SetTypebot } from '../TypebotProvider'
-import { cleanUpEdgeDraft } from './edges'
-import { createBlockDraft, duplicateBlockDraft } from './blocks'
+import {
+  deleteGroupDraft,
+  createBlockDraft,
+  duplicateBlockDraft,
+} from './blocks'
 import { Coordinates } from '@/features/graph'
 
 export type GroupsActions = {
@@ -82,21 +78,4 @@ const groupsActions = (setTypebot: SetTypebot): GroupsActions => ({
     ),
 })
 
-const deleteGroupDraft =
-  (typebot: WritableDraft<Typebot>) => (groupIndex: number) => {
-    cleanUpEdgeDraft(typebot, typebot.groups[groupIndex].id)
-    typebot.groups.splice(groupIndex, 1)
-  }
-
-const removeEmptyGroups = (typebot: WritableDraft<Typebot>) => {
-  const emptyGroupsIndices = typebot.groups.reduce<number[]>(
-    (arr, group, idx) => {
-      group.blocks.length === 0 && arr.push(idx)
-      return arr
-    },
-    []
-  )
-  emptyGroupsIndices.forEach(deleteGroupDraft(typebot))
-}
-
-export { groupsActions, removeEmptyGroups }
+export { groupsActions }

packages/eslint-config-custom/index.js

@@ -13,19 +13,6 @@ module.exports = {
     },
   },
   rules: {
-    'no-restricted-imports': [
-      'error',
-      {
-        patterns: [
-          '*/src/*',
-          'src/*',
-          '*/src',
-          '@/features/*/*',
-          '!@/features/blocks/*',
-          '!@/features/*/api',
-        ],
-      },
-    ],
     '@typescript-eslint/no-namespace': 'off',
   },
 }