blsmedia/bot
2
0
Fork 0
Code Activity

🚸 (fileUpload) Add clear and skip button labels customization

Browse Source
This commit is contained in:
Baptiste Arnaud
2023-01-20 08:12:59 +01:00
parent aa32fe782f
commit f697a5e99c
5 changed files with 54 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
apps/builder/src/features/blocks/inputs/fileUpload/components/FileInputSettings.tsx
View File

@ -14,16 +14,28 @@ type Props = {
export const FileInputSettings = ({ options, onOptionsChange }: Props) => {
const handleButtonLabelChange = (button: string) =>
onOptionsChange({ ...options, labels: { ...options.labels, button } })
const handlePlaceholderLabelChange = (placeholder: string) =>
onOptionsChange({ ...options, labels: { ...options.labels, placeholder } })
const handleMultipleFilesChange = (isMultipleAllowed: boolean) =>
onOptionsChange({ ...options, isMultipleAllowed })
const handleVariableChange = (variable?: Variable) =>
onOptionsChange({ ...options, variableId: variable?.id })
const handleSizeLimitChange = (sizeLimit?: number) =>
onOptionsChange({ ...options, sizeLimit })
const handleRequiredChange = (isRequired: boolean) =>
onOptionsChange({ ...options, isRequired })
const updateClearButtonLabel = (clear: string) =>
onOptionsChange({ ...options, labels: { ...options.labels, clear } })
const updateSkipButtonLabel = (skip: string) =>
onOptionsChange({ ...options, labels: { ...options.labels, skip } })
return (
<Stack spacing={4}>
<SwitchWithLabel
@ -56,17 +68,24 @@ export const FileInputSettings = ({ options, onOptionsChange }: Props) => {
withVariableButton={false}
/>
</Stack>
<Stack>
<FormLabel mb="0" htmlFor="button">
Button label:
</FormLabel>
<Input
id="button"
defaultValue={options.labels.button}
onChange={handleButtonLabelChange}
withVariableButton={false}
/>
</Stack>
<Input
label="Button label:"
defaultValue={options.labels.button}
onChange={handleButtonLabelChange}
withVariableButton={false}
/>
<Input
label="Clear button label:"
defaultValue={options.labels.clear}
onChange={updateClearButtonLabel}
withVariableButton={false}
/>
<Input
label="Skip button label:"
defaultValue={options.labels.skip}
onChange={updateSkipButtonLabel}
withVariableButton={false}
/>
<Stack>
<FormLabel mb="0" htmlFor="variable">
Save upload URL{options.isMultipleAllowed ? 's' : ''} in a variable:

6
apps/builder/src/features/blocks/inputs/fileUpload/fileUpload.spec.ts
View File

@ -37,9 +37,11 @@ test('options should work', async ({ page }) => {
await page.click('text="Allow multiple files?"')
await page.fill('div[contenteditable=true]', '<strong>Upload now!!</strong>')
await page.fill('[value="Upload"]', 'Go')
await page.fill('[value="Clear"]', 'Reset')
await page.fill('[value="Skip"]', 'Pass')
await page.fill('input[value="10"]', '20')
await page.click('text="Restart"')
await expect(typebotViewer(page).locator(`text="Skip"`)).toBeVisible()
await expect(typebotViewer(page).locator(`text="Pass"`)).toBeVisible()
await expect(typebotViewer(page).locator(`text="Upload now!!"`)).toBeVisible()
await typebotViewer(page)
.locator(`input[type="file"]`)
@ -49,7 +51,7 @@ test('options should work', async ({ page }) => {
getTestAsset('avatar.jpg'),
])
await expect(typebotViewer(page).locator(`text="3"`)).toBeVisible()
await typebotViewer(page).locator('text="Go 3 files"').click()
await typebotViewer(page).locator('text="Go"').click()
await expect(
typebotViewer(page).locator(`text="3 files uploaded"`)
).toBeVisible()