From f697a5e99c37d331e391597fdb58a99dd51c728f Mon Sep 17 00:00:00 2001 From: Baptiste Arnaud Date: Fri, 20 Jan 2023 08:12:59 +0100 Subject: [PATCH] :children_crossing: (fileUpload) Add clear and skip button labels customization --- .../components/FileInputSettings.tsx | 41 ++++++++++++++----- .../inputs/fileUpload/fileUpload.spec.ts | 6 ++- .../fileUpload/components/FileUploadForm.tsx | 10 ++--- .../fileUpload/components/FileUploadForm.tsx | 19 +++++---- .../models/src/features/blocks/inputs/file.ts | 4 ++ 5 files changed, 54 insertions(+), 26 deletions(-) diff --git a/apps/builder/src/features/blocks/inputs/fileUpload/components/FileInputSettings.tsx b/apps/builder/src/features/blocks/inputs/fileUpload/components/FileInputSettings.tsx index a083b432c..d08dd1fdf 100644 --- a/apps/builder/src/features/blocks/inputs/fileUpload/components/FileInputSettings.tsx +++ b/apps/builder/src/features/blocks/inputs/fileUpload/components/FileInputSettings.tsx @@ -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 ( { withVariableButton={false} /> - - - Button label: - - - + + + Save upload URL{options.isMultipleAllowed ? 's' : ''} in a variable: diff --git a/apps/builder/src/features/blocks/inputs/fileUpload/fileUpload.spec.ts b/apps/builder/src/features/blocks/inputs/fileUpload/fileUpload.spec.ts index 7d027c9ce..4bcf3bc17 100644 --- a/apps/builder/src/features/blocks/inputs/fileUpload/fileUpload.spec.ts +++ b/apps/builder/src/features/blocks/inputs/fileUpload/fileUpload.spec.ts @@ -37,9 +37,11 @@ test('options should work', async ({ page }) => { await page.click('text="Allow multiple files?"') await page.fill('div[contenteditable=true]', 'Upload now!!') 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() diff --git a/packages/bot-engine/src/features/blocks/inputs/fileUpload/components/FileUploadForm.tsx b/packages/bot-engine/src/features/blocks/inputs/fileUpload/components/FileUploadForm.tsx index 6af4cba7f..21cf28302 100644 --- a/packages/bot-engine/src/features/blocks/inputs/fileUpload/components/FileUploadForm.tsx +++ b/packages/bot-engine/src/features/blocks/inputs/fileUpload/components/FileUploadForm.tsx @@ -2,7 +2,7 @@ import { Spinner, SendButton } from '@/components/SendButton' import { useAnswers } from '@/providers/AnswersProvider' import { useTypebot } from '@/providers/TypebotProvider' import { InputSubmitContent } from '@/types' -import { FileInputBlock } from 'models' +import { defaultFileInputOptions, FileInputBlock } from 'models' import React, { ChangeEvent, FormEvent, useState, DragEvent } from 'react' import { uploadFiles } from 'utils' @@ -181,7 +181,7 @@ export const FileUploadForm = ({ } onClick={onSkip} > - Skip + {labels.skip ?? defaultFileInputOptions.labels.skip} )} @@ -195,17 +195,17 @@ export const FileUploadForm = ({ } onClick={clearFiles} > - Clear + {labels.clear ?? defaultFileInputOptions.labels.clear} )} 1 ? 's' : '' }` - : 'Upload' + : labels.button } disableIcon /> diff --git a/packages/js/src/features/blocks/inputs/fileUpload/components/FileUploadForm.tsx b/packages/js/src/features/blocks/inputs/fileUpload/components/FileUploadForm.tsx index 12a9a06bb..87f15e509 100644 --- a/packages/js/src/features/blocks/inputs/fileUpload/components/FileUploadForm.tsx +++ b/packages/js/src/features/blocks/inputs/fileUpload/components/FileUploadForm.tsx @@ -1,6 +1,6 @@ import { SendButton, Spinner } from '@/components/SendButton' import { BotContext, InputSubmitContent } from '@/types' -import { FileInputBlock } from 'models' +import { defaultFileInputOptions, FileInputBlock } from 'models' import { createSignal, Match, Show, Switch } from 'solid-js' import { uploadFiles } from 'utils' @@ -179,7 +179,8 @@ export const FileUploadForm = (props: Props) => { } onClick={() => props.onSkip()} > - Skip + {props.block.options.labels.skip ?? + defaultFileInputOptions.labels.skip} @@ -199,15 +200,17 @@ export const FileUploadForm = (props: Props) => { } onClick={clearFiles} > - Clear + {props.block.options.labels.clear ?? + defaultFileInputOptions.labels.clear} - {props.block.options.labels.button - ? `${props.block.options.labels.button} ${ - selectedFiles().length - } file${selectedFiles().length > 1 ? 's' : ''}` - : 'Upload'} + {props.block.options.labels.button === + defaultFileInputOptions.labels.button + ? `Upload ${selectedFiles().length} file${ + selectedFiles().length > 1 ? 's' : '' + }` + : props.block.options.labels.button} diff --git a/packages/models/src/features/blocks/inputs/file.ts b/packages/models/src/features/blocks/inputs/file.ts index 9a2687eaf..45ad8993e 100644 --- a/packages/models/src/features/blocks/inputs/file.ts +++ b/packages/models/src/features/blocks/inputs/file.ts @@ -8,6 +8,8 @@ export const fileInputOptionsSchema = optionBaseSchema.and( labels: z.object({ placeholder: z.string(), button: z.string(), + clear: z.string().optional(), + skip: z.string().optional(), }), sizeLimit: z.number().optional(), }) @@ -29,6 +31,8 @@ export const defaultFileInputOptions: FileInputOptions = { or drag and drop
(size limit: 10MB)`, button: 'Upload', + clear: 'Clear', + skip: 'Skip', }, }