perf(e2e): ⚡️ Migrate to Playwright

apps/builder/components/shared/DebouncedInput.tsx

@@ -6,27 +6,24 @@ import {
   useEffect,
   useState,
 } from 'react'
-import { useDebounce } from 'use-debounce'
 
 type Props = Omit<InputProps, 'onChange' | 'value'> & {
-  delay: number
   initialValue: string
   onChange: (debouncedValue: string) => void
 }
 
 export const DebouncedInput = forwardRef(
   (
-    { delay, onChange, initialValue, ...props }: Props,
+    { onChange, initialValue, ...props }: Props,
     ref: ForwardedRef<HTMLInputElement>
   ) => {
     const [currentValue, setCurrentValue] = useState(initialValue)
-    const [currentValueDebounced] = useDebounce(currentValue, delay)
 
     useEffect(() => {
-      if (currentValueDebounced === initialValue) return
-      onChange(currentValueDebounced)
+      if (currentValue === initialValue) return
+      onChange(currentValue)
       // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [currentValueDebounced])
+    }, [currentValue])
 
     const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
       setCurrentValue(e.target.value)

apps/builder/components/shared/DebouncedTextarea.tsx

@@ -1,27 +1,23 @@
 import { Textarea, TextareaProps } from '@chakra-ui/react'
 import { ChangeEvent, useEffect, useState } from 'react'
-import { useDebounce } from 'use-debounce'
 
 type Props = Omit<TextareaProps, 'onChange' | 'value'> & {
-  delay: number
   initialValue: string
   onChange: (debouncedValue: string) => void
 }
 
 export const DebouncedTextarea = ({
-  delay,
   onChange,
   initialValue,
   ...props
 }: Props) => {
   const [currentValue, setCurrentValue] = useState(initialValue)
-  const [currentValueDebounced] = useDebounce(currentValue, delay)
 
   useEffect(() => {
-    if (currentValueDebounced === initialValue) return
-    onChange(currentValueDebounced)
+    if (currentValue === initialValue) return
+    onChange(currentValue)
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [currentValueDebounced])
+  }, [currentValue])
 
   const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
     setCurrentValue(e.target.value)

apps/builder/components/shared/DropdownList.tsx

@@ -5,6 +5,7 @@ import {
   MenuButtonProps,
   MenuItem,
   MenuList,
+  Portal,
   Stack,
 } from '@chakra-ui/react'
 import { ChevronLeftIcon } from 'assets/icons'
@@ -41,22 +42,24 @@ export const DropdownList = <T,>({
         >
           {currentItem ?? placeholder}
         </MenuButton>
-        <MenuList maxW="500px" shadow="lg">
-          <Stack maxH={'35vh'} overflowY="scroll" spacing="0">
-            {items.map((item) => (
-              <MenuItem
-                key={item as unknown as string}
-                maxW="500px"
-                overflow="hidden"
-                whiteSpace="nowrap"
-                textOverflow="ellipsis"
-                onClick={handleMenuItemClick(item)}
-              >
-                {item}
-              </MenuItem>
-            ))}
-          </Stack>
-        </MenuList>
+        <Portal>
+          <MenuList maxW="500px" shadow="lg" zIndex={1500}>
+            <Stack maxH={'35vh'} overflowY="scroll" spacing="0">
+              {items.map((item) => (
+                <MenuItem
+                  key={item as unknown as string}
+                  maxW="500px"
+                  overflow="hidden"
+                  whiteSpace="nowrap"
+                  textOverflow="ellipsis"
+                  onClick={handleMenuItemClick(item)}
+                >
+                  {item}
+                </MenuItem>
+              ))}
+            </Stack>
+          </MenuList>
+        </Portal>
       </Menu>
     </>
   )

apps/builder/components/shared/SearchableDropdown.tsx

@@ -17,12 +17,14 @@ type Props = {
   selectedItem?: string
   items: string[]
   onValueChange?: (value: string) => void
+  isLoading?: boolean
 } & InputProps
 
 export const SearchableDropdown = ({
   selectedItem,
   items,
   onValueChange,
+  isLoading = false,
   ...inputProps
 }: Props) => {
   const { onOpen, onClose, isOpen } = useDisclosure()
@@ -47,6 +49,7 @@ export const SearchableDropdown = ({
         )
         .slice(0, 50),
     ])
+    if (inputRef.current === document.activeElement) onOpen()
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [items])
 
@@ -97,6 +100,7 @@ export const SearchableDropdown = ({
             value={inputValue}
             onChange={onInputChange}
             onClick={onOpen}
+            type="text"
             {...inputProps}
           />
         </PopoverTrigger>
@@ -130,7 +134,9 @@ export const SearchableDropdown = ({
               })}
             </>
           ) : (
-            <Text p={4}>Not found.</Text>
+            <Text p={4} color="gray.500">
+              {isLoading ? 'Loading...' : 'Not found.'}
+            </Text>
           )}
         </PopoverContent>
       </Popover>

apps/builder/components/shared/TableList.tsx

@@ -13,7 +13,7 @@ export type TableListItemProps<T> = {
 }
 
 type Props<T> = {
-  initialItems?: Table<T>
+  initialItems: Table<T>
   onItemsChange: (items: Table<T>) => void
   addLabel?: string
   Item: (props: TableListItemProps<T>) => JSX.Element
@@ -27,7 +27,7 @@ export const TableList = <T,>({
   Item,
   ComponentBetweenItems = () => <></>,
 }: Props<T>) => {
-  const [items, setItems] = useImmer(initialItems ?? { byId: {}, allIds: [] })
+  const [items, setItems] = useImmer(initialItems)
   const [showDeleteId, setShowDeleteId] = useState<string | undefined>()
 
   useEffect(() => {
@@ -80,6 +80,7 @@ export const TableList = <T,>({
             pos="relative"
             onMouseEnter={handleMouseEnter(itemId)}
             onMouseLeave={handleMouseLeave}
+            mt={idx !== 0 && ComponentBetweenItems ? 4 : 0}
           >
             <Item
               id={itemId}

apps/builder/components/shared/TextboxWithVariableButton/TextboxWithVariableButton.tsx

@@ -13,13 +13,11 @@ import {
 import { UserIcon } from 'assets/icons'
 import { Variable } from 'models'
 import React, { useEffect, useRef, useState } from 'react'
-import { useDebounce } from 'use-debounce'
 import { VariableSearchInput } from '../VariableSearchInput'
 
 export type TextBoxWithVariableButtonProps = {
   initialValue: string
   onChange: (value: string) => void
-  delay?: number
   TextBox:
     | ComponentWithAs<'textarea', TextareaProps>
     | ComponentWithAs<'input', InputProps>
@@ -28,7 +26,6 @@ export type TextBoxWithVariableButtonProps = {
 export const TextBoxWithVariableButton = ({
   initialValue,
   onChange,
-  delay,
   TextBox,
   ...props
 }: TextBoxWithVariableButtonProps) => {
@@ -36,13 +33,12 @@ export const TextBoxWithVariableButton = ({
     null
   )
   const [value, setValue] = useState(initialValue)
-  const [debouncedValue] = useDebounce(value, delay ?? 100)
   const [carretPosition, setCarretPosition] = useState<number>(0)
 
   useEffect(() => {
-    if (debouncedValue !== initialValue) onChange(debouncedValue)
+    if (value !== initialValue) onChange(value)
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [debouncedValue])
+  }, [value])
 
   const handleVariableSelected = (variable?: Variable) => {
     if (!textBoxRef.current || !variable) return

apps/builder/components/shared/VariableSearchInput.tsx

@@ -118,6 +118,7 @@ export const VariableSearchInput = ({
             value={inputValue}
             onChange={onInputChange}
             onClick={onOpen}
+            placeholder={inputProps.placeholder ?? 'Select a variable'}
             {...inputProps}
           />
         </PopoverTrigger>