feat(forms): allow custom upload hints (#802)

Author: obenjiro

src/bundle/toolbar/custom/ToolbarFilePopup.tsx

@@ -20,7 +20,7 @@ export type ToolbarFilePopupProps = Omit<ToolbarBaseProps<never>, 'editor'> & {
 
     uploadHandler?: FileUploadHandler;
     onSuccessUpload?: (result: BatchUploadResult) => void;
-} & Pick<FileFormProps, 'onSubmit'>;
+} & Pick<FileFormProps, 'onSubmit' | 'uploadHint'>;
 
 export const ToolbarFilePopup: React.FC<ToolbarFilePopupProps> = ({
     className,
@@ -32,6 +32,7 @@ export const ToolbarFilePopup: React.FC<ToolbarFilePopupProps> = ({
     onClick,
     uploadHandler,
     onSuccessUpload,
+    uploadHint,
 }) => {
     const toaster = useToaster();
     const [loading, showLoading, hideLoading] = useBooleanState(false);
@@ -82,6 +83,7 @@ export const ToolbarFilePopup: React.FC<ToolbarFilePopupProps> = ({
                     onClick?.('addFile');
                 }}
                 loading={loading}
+                uploadHint={uploadHint}
             />
         </Popup>
     );

src/bundle/toolbar/custom/ToolbarImagePopup.tsx

@@ -19,7 +19,7 @@ export type ToolbarImagePopuProps = Omit<ToolbarBaseProps<never>, 'editor'> & {
     onSuccessUpload?: (res: BatchUploadResult) => void;
     hide: () => void;
     anchorElement: HTMLElement | null;
-} & Pick<ImageFormProps, 'onSubmit' | 'imageTitle'>;
+} & Pick<ImageFormProps, 'onSubmit' | 'imageTitle' | 'uploadHint'>;
 
 export const ToolbarImagePopup: React.FC<ToolbarImagePopuProps> = ({
     className,
@@ -31,6 +31,7 @@ export const ToolbarImagePopup: React.FC<ToolbarImagePopuProps> = ({
     uploadImages,
     onSuccessUpload,
     imageTitle,
+    uploadHint,
 }) => {
     const toaster = useToaster();
     const [loading, showLoading, hideLoading] = useBooleanState(false);
@@ -81,6 +82,7 @@ export const ToolbarImagePopup: React.FC<ToolbarImagePopuProps> = ({
                 }}
                 loading={loading}
                 imageTitle={imageTitle}
+                uploadHint={uploadHint}
             />
         </Popup>
     );

src/forms/FileForm.tsx

@@ -30,6 +30,7 @@ export type FileFormProps = ClassNameProps & {
     onCancel(): void;
     onAttach?: (files: File[]) => void;
     loading?: boolean;
+    uploadHint?: string;
 };
 
 export const FileForm: React.FC<FileFormProps> = ({
@@ -39,6 +40,7 @@ export const FileForm: React.FC<FileFormProps> = ({
     onSubmit,
     onAttach,
     loading,
+    uploadHint,
 }) => {
     const [tabId, setTabId] = useState<string>(() =>
         isFunction(onAttach) ? TabId.Attach : TabId.Link,
@@ -75,7 +77,7 @@ export const FileForm: React.FC<FileFormProps> = ({
             )}
             {tabId === TabId.Attach && onAttach && (
                 <>
-                    <Form.Layout>{i18n('file_upload_help')}</Form.Layout>
+                    <Form.Layout>{uploadHint ?? i18n('file_upload_help')}</Form.Layout>
                     <Form.Footer onCancel={onCancel}>
                         <ButtonAttach
                             multiple

src/forms/ImageForm.tsx

@@ -36,6 +36,7 @@ export type ImageFormProps = ClassNameProps & {
     onAttach?: (files: File[]) => void;
     loading?: boolean;
     imageTitle?: string;
+    uploadHint?: string;
 };
 
 export const ImageForm: React.FC<ImageFormProps> = ({
@@ -46,6 +47,7 @@ export const ImageForm: React.FC<ImageFormProps> = ({
     onAttach,
     loading,
     imageTitle: providedName,
+    uploadHint,
 }) => {
     const [tabId, setTabId] = useState<string>(() =>
         isFunction(onAttach) ? ImageTabId.Attach : ImageTabId.Link,
@@ -89,7 +91,7 @@ export const ImageForm: React.FC<ImageFormProps> = ({
             )}
             {tabId === ImageTabId.Attach && onAttach && (
                 <>
-                    <Form.Layout>{i18n('image_upload_help')}</Form.Layout>
+                    <Form.Layout>{uploadHint ?? i18n('image_upload_help')}</Form.Layout>
                     <Form.Footer onCancel={onCancel}>
                         <ButtonAttach
                             multiple

src/forms/uploadHints.test.tsx

@@ -0,0 +1,28 @@
+import {renderToStaticMarkup} from 'react-dom/server';
+
+import {FileForm} from './FileForm';
+import {ImageForm} from './ImageForm';
+
+describe('upload hints', () => {
+    const commonImageProps = {
+        onSubmit: jest.fn(),
+        onCancel: jest.fn(),
+        onAttach: () => {},
+    };
+
+    it('ImageForm should display custom upload hint', () => {
+        const html = renderToStaticMarkup(
+            <ImageForm {...commonImageProps} uploadHint="custom image hint" />,
+        );
+
+        expect(html).toContain('custom image hint');
+    });
+
+    it('FileForm should display custom upload hint', () => {
+        const html = renderToStaticMarkup(
+            <FileForm {...commonImageProps} uploadHint="custom file hint" />,
+        );
+
+        expect(html).toContain('custom file hint');
+    });
+});