blsmedia/bot
2
0
Fork 0
Code Activity

🐛 (editor) Improve variables dropdown auto focus

Browse Source
This commit is contained in:
Baptiste Arnaud
2023-01-11 10:53:24 +01:00
parent 4c2eaf9b79
commit b65ffe8c53
9 changed files with 28 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
apps/builder/src/components/VariableSearchInput.tsx
View File

@ -11,21 +11,20 @@ import {
useColorModeValue,
PopoverAnchor,
Portal,
Tag,
} from '@chakra-ui/react'
import { EditIcon, PlusIcon, TrashIcon } from '@/components/icons'
import { useTypebot } from '@/features/editor'
import cuid from 'cuid'
import { Variable } from 'models'
import React, { useState, useRef, ChangeEvent, useEffect } from 'react'
import { useDebouncedCallback } from 'use-debounce'
import { byId, env, isDefined, isNotDefined } from 'utils'
import { byId, isDefined, isNotDefined } from 'utils'
import { useOutsideClick } from '@/hooks/useOutsideClick'
import { useParentModal } from '@/features/graph'
type Props = {
initialVariableId?: string
debounceTimeout?: number
isDefaultOpen?: boolean
autoFocus?: boolean
onSelectVariable: (
variable: Pick<Variable, 'id' | 'name'> | undefined
) => void
@ -34,8 +33,7 @@ type Props = {
export const VariableSearchInput = ({
initialVariableId,
onSelectVariable,
isDefaultOpen,
debounceTimeout = 1000,
autoFocus,
...inputProps
}: Props) => {
const bg = useColorModeValue('gray.200', 'gray.700')
@ -46,13 +44,6 @@ export const VariableSearchInput = ({
const [inputValue, setInputValue] = useState(
variables.find(byId(initialVariableId))?.name ?? ''
)
const debounced = useDebouncedCallback(
(value) => {
const variable = variables.find((v) => v.name === value)
if (variable) onSelectVariable(variable)
},
env('E2E_TEST') === 'true' ? 0 : debounceTimeout
)
const [filteredItems, setFilteredItems] = useState<Variable[]>(
variables ?? []
)
@ -67,25 +58,17 @@ export const VariableSearchInput = ({
useOutsideClick({
ref: dropdownRef,
handler: onClose,
handler: () => onClose,
})
useEffect(() => {
if (isDefaultOpen) onOpen()
if (autoFocus) onOpen()
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [])
useEffect(
() => () => {
debounced.flush()
},
[debounced]
)
const onInputChange = (e: ChangeEvent<HTMLInputElement>) => {
setInputValue(e.target.value)
debounced(e.target.value)
if (e.target.value === '') {
onSelectVariable(undefined)
setFilteredItems([...variables.slice(0, 50)])
@ -104,6 +87,7 @@ export const VariableSearchInput = ({
setInputValue(variable.name)
onSelectVariable(variable)
setKeyboardFocusIndex(undefined)
inputRef.current?.blur()
onClose()
}
@ -112,6 +96,7 @@ export const VariableSearchInput = ({
const id = 'v' + cuid()
onSelectVariable({ id, name: inputValue })
createVariable({ id, name: inputValue })
inputRef.current?.blur()
onClose()
}
@ -122,7 +107,6 @@ export const VariableSearchInput = ({
setFilteredItems(filteredItems.filter((item) => item.id !== variable.id))
if (variable.name === inputValue) {
setInputValue('')
debounced('')
}
}
@ -147,7 +131,12 @@ export const VariableSearchInput = ({
if (e.key === 'Enter' && isDefined(keyboardFocusIndex)) {
if (keyboardFocusIndex === 0 && isCreateVariableButtonDisplayed)
handleCreateNewVariableClick()
else handleVariableNameClick(filteredItems[keyboardFocusIndex])()
else
handleVariableNameClick(
filteredItems[
keyboardFocusIndex - (isCreateVariableButtonDisplayed ? 1 : 0)
]
)()
return setKeyboardFocusIndex(undefined)
}
if (e.key === 'ArrowDown') {
@ -199,6 +188,7 @@ export const VariableSearchInput = ({
role="menu"
w="inherit"
shadow="lg"
onMouseDown={(e) => e.stopPropagation()}
>
{isCreateVariableButtonDisplayed && (
<Button
@ -215,7 +205,10 @@ export const VariableSearchInput = ({
leftIcon={<PlusIcon />}
bgColor={keyboardFocusIndex === 0 ? bg : 'transparent'}
>
Create &quot;{inputValue}&quot;
Create
<Tag colorScheme="orange" ml="1">
{inputValue}
</Tag>
</Button>
)}
{filteredItems.length > 0 && (
@ -230,7 +223,6 @@ export const VariableSearchInput = ({
role="menuitem"
minH="40px"
key={idx}
onMouseDown={(e) => e.stopPropagation()}
onClick={handleVariableNameClick(item)}
fontSize="16px"
fontWeight="normal"

2
apps/builder/src/features/blocks/bubbles/textBubble/components/TextBubbleEditor/TextBubbleEditor.tsx
View File

@ -163,7 +163,7 @@ const TextBubbleEditorContent = ({
<VariableSearchInput
onSelectVariable={handleVariableSelected}
placeholder="Search for a variable"
isDefaultOpen
autoFocus
/>
</Flex>
)}

1
apps/builder/src/features/blocks/bubbles/textBubble/components/TextBubbleEditor/ToolBar.tsx
View File

@ -27,6 +27,7 @@ type Props = {
export const ToolBar = ({ onVariablesButtonClick, ...props }: Props) => {
const editor = usePlateEditorRef()
const handleVariablesButtonMouseDown = (e: React.MouseEvent) => {
e.stopPropagation()
e.preventDefault()
onVariablesButtonClick()
}

2
apps/builder/src/features/blocks/bubbles/textBubble/textBubble.spec.ts
View File

@ -48,7 +48,7 @@ test.describe('Text bubble block', () => {
await page.press('div[role="textbox"]', 'Shift+Enter')
await page.click('button[aria-label="Insert variable"]')
await page.fill('[data-testid="variables-input"]', 'test')
await page.click('text=Create "test"')
await page.getByRole('menuitem', { name: 'Create test' }).click()
await page.click('text=Preview')
await expect(

2
apps/builder/src/features/blocks/integrations/googleSheets/googleSheets.spec.ts
View File

@ -169,5 +169,5 @@ const fillInSpreadsheetInfo = async (page: Page) => {
const createNewVar = async (page: Page, name: string) => {
await page.fill('input[placeholder="Select a variable"] >> nth=-1', name)
await page.click(`text=Create "${name}"`)
await page.getByRole('menuitem', { name: `Create ${name}` }).click()
}

3
apps/builder/src/features/blocks/integrations/webhook/components/WebhookSettings/ResponseMappingInputs.tsx
View File

@ -8,7 +8,6 @@ export const DataVariableInputs = ({
item,
onItemChange,
dataItems,
debounceTimeout,
}: TableListItemProps<ResponseVariableMapping> & { dataItems: string[] }) => {
const handleBodyPathChange = (bodyPath: string) =>
onItemChange({ ...item, bodyPath })
@ -24,7 +23,6 @@ export const DataVariableInputs = ({
value={item.bodyPath}
onValueChange={handleBodyPathChange}
placeholder="Select the data"
debounceTimeout={debounceTimeout}
withVariableButton
/>
</FormControl>
@ -34,7 +32,6 @@ export const DataVariableInputs = ({
onSelectVariable={handleVariableChange}
placeholder="Search for a variable"
initialVariableId={item.variableId}
debounceTimeout={debounceTimeout}
/>
</FormControl>
</Stack>

1
apps/builder/src/features/blocks/integrations/webhook/components/WebhookSettings/VariableForTestInputs.tsx
View File

@ -23,7 +23,6 @@ export const VariableForTestInputs = ({
id={'name' + item.id}
initialVariableId={item.variableId}
onSelectVariable={handleVariableSelect}
debounceTimeout={debounceTimeout}
/>
</FormControl>
<FormControl>

8
apps/builder/src/features/blocks/logic/setVariable/setVariable.spec.ts
View File

@ -18,11 +18,11 @@ test.describe('Set variable block', () => {
await page.goto(`/typebots/${typebotId}/edit`)
await page.click('text=Type a number...')
await page.fill('input[placeholder="Select a variable"] >> nth=-1', 'Num')
await page.click('text=Create "Num"')
await page.getByRole('menuitem', { name: 'Create Num' }).click()
await page.click('text=Click to edit... >> nth = 0')
await page.fill('input[placeholder="Select a variable"] >> nth=-1', 'Total')
await page.click('text=Create "Total"')
await page.getByRole('menuitem', { name: 'Create Total' }).click()
await page.fill('textarea', '1000 * {{Num}}')
await page.click('text=Click to edit...', { force: true })
@ -30,7 +30,7 @@ test.describe('Set variable block', () => {
'input[placeholder="Select a variable"] >> nth=-1',
'Custom var'
)
await page.click('text=Create "Custom var"')
await page.getByRole('menuitem', { name: 'Create Custom var' }).click()
await page.fill('textarea', 'Custom value')
await page.click('text=Click to edit...', { force: true })
@ -38,7 +38,7 @@ test.describe('Set variable block', () => {
'input[placeholder="Select a variable"] >> nth=-1',
'Addition'
)
await page.click('text=Create "Addition"')
await page.getByRole('menuitem', { name: 'Create Addition' }).click()
await page.fill('textarea', '1000 + {{Total}}')
await page.click('text=Preview')

2
apps/builder/src/features/variables/components/VariablesButton.tsx
View File

@ -38,7 +38,7 @@ export const VariablesButton = ({ onSelectVariable, ...props }: Props) => {
onSelectVariable={onSelectVariable}
placeholder="Search for a variable"
shadow="lg"
isDefaultOpen
autoFocus
/>
</PopoverContent>
</Popover>