Merge pull request #575 from rebeccaalpert/onRejectHandler

thatblindgeye · web-flow · commit 58e22bd5e4fc · 2025-06-11T08:22:16.000-04:00
fix(MessageBar/FileDropZone): Allow passing additional props to react-dropzone
diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotAttachment.tsx b/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotAttachment.tsx
@@ -138,10 +138,17 @@ export const BasicDemo: FunctionComponent = () => {
         }, 1000);
       })
       .catch((error: DOMException) => {
+        setShowAlert(true);
         setError(`Failed to read file: ${error.message}`);
       });
   };
 
+  const handleAttachRejected = () => {
+    setFile(undefined);
+    setShowAlert(true);
+    setError('This demo only supports file extensions .txt, .json, .yaml, and .yaml. Please try a different file.');
+  };
+
   const handleFileDrop = (event: DropEvent, data: File[]) => {
     handleFile(data);
   };
@@ -227,6 +234,7 @@ export const BasicDemo: FunctionComponent = () => {
             'application/json': ['.json'],
             'application/yaml': ['.yaml', '.yml']
           }}
+          onAttachRejected={handleAttachRejected}
         >
           <ChatbotContent>
             <MessageBox>
@@ -254,7 +262,17 @@ export const BasicDemo: FunctionComponent = () => {
                 <FileDetailsLabel fileName={file.name} isLoading={isLoadingFile} onClose={onClose} />
               </div>
             )}
-            <MessageBar onSendMessage={handleSend} hasAttachButton handleAttach={handleAttach} />
+            <MessageBar
+              onSendMessage={handleSend}
+              hasAttachButton
+              handleAttach={handleAttach}
+              allowedFileTypes={{
+                'text/plain': ['.txt'],
+                'application/json': ['.json'],
+                'application/yaml': ['.yaml', '.yml']
+              }}
+              onAttachRejected={handleAttachRejected}
+            />
             <ChatbotFootnote label="ChatBot uses AI. Check for mistakes." />
           </ChatbotFooter>
         </FileDropZone>
diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotAttachmentMenu.tsx b/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotAttachmentMenu.tsx
@@ -127,6 +127,7 @@ export const AttachmentMenuDemo: FunctionComponent = () => {
   // Attachments
   // --------------------------------------------------------------------------
   const handleFileDrop = (event: DropEvent, data: File[]) => {
+    setIsOpen(false);
     setFile(data[0]);
     setIsLoadingFile(true);
     setTimeout(() => {
diff --git a/packages/module/src/FileDropZone/FileDropZone.test.tsx b/packages/module/src/FileDropZone/FileDropZone.test.tsx
@@ -40,4 +40,87 @@ describe('FileDropZone', () => {
 
     expect(onFileDrop).not.toHaveBeenCalled();
   });
+
+  it('should respect minSize restriction', async () => {
+    const onAttachRejected = jest.fn();
+    const { container } = render(
+      <FileDropZone onFileDrop={jest.fn()} minSize={1000} onAttachRejected={onAttachRejected} />
+    );
+
+    const file = new File(['Test'], 'example.txt', { type: 'text/plain' });
+    const fileInput = container.querySelector('input[type="file"]') as HTMLInputElement;
+
+    await userEvent.upload(fileInput, file);
+
+    expect(onAttachRejected).toHaveBeenCalled();
+  });
+  it('should respect maxSize restriction', async () => {
+    const onAttachRejected = jest.fn();
+    const { container } = render(
+      <FileDropZone onFileDrop={jest.fn()} maxSize={100} onAttachRejected={onAttachRejected} />
+    );
+
+    const largeContent = 'x'.repeat(200);
+    const file = new File([largeContent], 'example.txt', { type: 'text/plain' });
+    const fileInput = container.querySelector('input[type="file"]') as HTMLInputElement;
+
+    await userEvent.upload(fileInput, file);
+
+    expect(onAttachRejected).toHaveBeenCalled();
+  });
+
+  it('should respect maxFiles restriction', async () => {
+    const onAttachRejected = jest.fn();
+    const { container } = render(
+      <FileDropZone onFileDrop={jest.fn()} maxFiles={1} onAttachRejected={onAttachRejected} />
+    );
+
+    const files = [
+      new File(['Test1'], 'example1.txt', { type: 'text/plain' }),
+      new File(['Test2'], 'example2.txt', { type: 'text/plain' })
+    ];
+    const fileInput = container.querySelector('input[type="file"]') as HTMLInputElement;
+
+    await userEvent.upload(fileInput, files);
+
+    expect(onAttachRejected).toHaveBeenCalled();
+  });
+
+  it('should be disabled when isAttachmentDisabled is true', async () => {
+    const onFileDrop = jest.fn();
+    const { container } = render(<FileDropZone onFileDrop={onFileDrop} isAttachmentDisabled={true} />);
+
+    const file = new File(['Test'], 'example.text', { type: 'text/plain' });
+    const fileInput = container.querySelector('input[type="file"]') as HTMLInputElement;
+    await userEvent.upload(fileInput, file);
+
+    expect(onFileDrop).not.toHaveBeenCalled();
+  });
+
+  it('should call onAttach when files are attached', async () => {
+    const onAttach = jest.fn();
+    const { container } = render(<FileDropZone onFileDrop={jest.fn()} onAttach={onAttach} />);
+
+    const file = new File(['Test'], 'example.txt', { type: 'text/plain' });
+    const fileInput = container.querySelector('input[type="file"]') as HTMLInputElement;
+
+    await userEvent.upload(fileInput, file);
+
+    expect(onAttach).toHaveBeenCalled();
+  });
+  it('should use custom validator when provided', async () => {
+    const validator = jest.fn().mockReturnValue({ message: 'Custom error' });
+    const onAttachRejected = jest.fn();
+    const onFileDrop = jest.fn();
+    const { container } = render(
+      <FileDropZone onFileDrop={onFileDrop} validator={validator} onAttachRejected={onAttachRejected} />
+    );
+
+    const file = new File(['Test'], 'example.txt', { type: 'text/plain' });
+    const fileInput = container.querySelector('input[type="file"]') as HTMLInputElement;
+    await userEvent.upload(fileInput, file);
+
+    expect(validator).toHaveBeenCalledWith(file);
+    expect(onAttachRejected).toHaveBeenCalled();
+  });
 });
diff --git a/packages/module/src/FileDropZone/FileDropZone.tsx b/packages/module/src/FileDropZone/FileDropZone.tsx
@@ -3,7 +3,7 @@ import type { FunctionComponent } from 'react';
 import { useState } from 'react';
 import { ChatbotDisplayMode } from '../Chatbot';
 import { UploadIcon } from '@patternfly/react-icons';
-import { Accept } from 'react-dropzone/.';
+import { Accept, FileError, FileRejection } from 'react-dropzone/.';
 
 export interface FileDropZoneProps {
   /** Content displayed when the drop zone is not currently in use */
@@ -22,6 +22,20 @@ export interface FileDropZoneProps {
   allowedFileTypes?: Accept;
   /** Display mode for the Chatbot parent; this influences the styles applied */
   displayMode?: ChatbotDisplayMode;
+  /** Minimum file size allowed */
+  minSize?: number;
+  /** Max file size allowed */
+  maxSize?: number;
+  /** Max number of files allowed */
+  maxFiles?: number;
+  /** Whether attachments are disabled */
+  isAttachmentDisabled?: boolean;
+  /** Callback when file(s) are attached */
+  onAttach?: <T extends File>(acceptedFiles: T[], fileRejections: FileRejection[], event: DropEvent) => void;
+  /** Callback function for AttachButton when an attachment fails */
+  onAttachRejected?: (fileRejections: FileRejection[], event: DropEvent) => void;
+  /** Validator for files; see https://react-dropzone.js.org/#!/Custom%20validation for more information */
+  validator?: <T extends File>(file: T) => FileError | readonly FileError[] | null;
 }
 
 const FileDropZone: FunctionComponent<FileDropZoneProps> = ({
@@ -30,6 +44,13 @@ const FileDropZone: FunctionComponent<FileDropZoneProps> = ({
   infoText = 'Maximum file size is 25 MB',
   onFileDrop,
   allowedFileTypes,
+  minSize,
+  maxSize,
+  maxFiles,
+  isAttachmentDisabled,
+  onAttach,
+  onAttachRejected,
+  validator,
   displayMode = ChatbotDisplayMode.default,
   ...props
 }: FileDropZoneProps) => {
@@ -50,7 +71,16 @@ const FileDropZone: FunctionComponent<FileDropZoneProps> = ({
     <MultipleFileUpload
       dropzoneProps={{
         accept: allowedFileTypes,
-        onDrop: () => setShowDropZone(false),
+        onDrop: (acceptedFiles, fileRejections: FileRejection[], event: DropEvent) => {
+          setShowDropZone(false);
+          onAttach && onAttach(acceptedFiles, fileRejections, event);
+        },
+        minSize,
+        maxSize,
+        maxFiles,
+        disabled: isAttachmentDisabled,
+        onDropRejected: onAttachRejected,
+        validator,
         ...props
       }}
       onDragEnter={() => setShowDropZone(true)}
diff --git a/packages/module/src/MessageBar/AttachButton.test.tsx b/packages/module/src/MessageBar/AttachButton.test.tsx
@@ -98,4 +98,79 @@ describe('Attach button', () => {
 
     expect(onAttachAccepted).not.toHaveBeenCalled();
   });
+
+  it('should respect minSize restriction', async () => {
+    const onAttachRejected = jest.fn();
+    render(<AttachButton inputTestId="input" minSize={1000} onAttachRejected={onAttachRejected} />);
+
+    const file = new File(['Test'], 'example.txt', { type: 'text/plain' });
+    const input = screen.getByTestId('input');
+
+    await userEvent.upload(input, file);
+
+    expect(onAttachRejected).toHaveBeenCalled();
+  });
+
+  it('should respect maxSize restriction', async () => {
+    const onAttachRejected = jest.fn();
+    render(<AttachButton inputTestId="input" maxSize={100} onAttachRejected={onAttachRejected} />);
+
+    const largeContent = 'x'.repeat(200);
+    const file = new File([largeContent], 'example.txt', { type: 'text/plain' });
+    const input = screen.getByTestId('input');
+
+    await userEvent.upload(input, file);
+
+    expect(onAttachRejected).toHaveBeenCalled();
+  });
+
+  it('should respect maxFiles restriction', async () => {
+    const onAttachRejected = jest.fn();
+    render(<AttachButton inputTestId="input" maxFiles={1} onAttachRejected={onAttachRejected} />);
+
+    const files = [
+      new File(['Test1'], 'example1.txt', { type: 'text/plain' }),
+      new File(['Test2'], 'example2.txt', { type: 'text/plain' })
+    ];
+
+    const input = screen.getByTestId('input');
+    await userEvent.upload(input, files);
+
+    expect(onAttachRejected).toHaveBeenCalled();
+  });
+
+  it('should be disabled when isAttachmentDisabled is true', async () => {
+    const onFileDrop = jest.fn();
+    render(<AttachButton inputTestId="input" isAttachmentDisabled={true} />);
+
+    const file = new File(['Test'], 'example.text', { type: 'text/plain' });
+    const input = screen.getByTestId('input');
+    await userEvent.upload(input, file);
+
+    expect(onFileDrop).not.toHaveBeenCalled();
+  });
+
+  it('should call onAttach when files are attached', async () => {
+    const onAttach = jest.fn();
+    render(<AttachButton inputTestId="input" onAttach={onAttach} />);
+
+    const file = new File(['Test'], 'example.txt', { type: 'text/plain' });
+    const input = screen.getByTestId('input');
+
+    await userEvent.upload(input, file);
+
+    expect(onAttach).toHaveBeenCalled();
+  });
+  it('should use custom validator when provided', async () => {
+    const validator = jest.fn().mockReturnValue({ message: 'Custom error' });
+    const onAttachRejected = jest.fn();
+    render(<AttachButton inputTestId="input" validator={validator} onAttachRejected={onAttachRejected} />);
+
+    const file = new File(['Test'], 'example.txt', { type: 'text/plain' });
+    const input = screen.getByTestId('input');
+    await userEvent.upload(input, file);
+
+    expect(validator).toHaveBeenCalledWith(file);
+    expect(onAttachRejected).toHaveBeenCalled();
+  });
 });
diff --git a/packages/module/src/MessageBar/AttachButton.tsx b/packages/module/src/MessageBar/AttachButton.tsx
@@ -7,7 +7,7 @@ import { forwardRef } from 'react';
 
 // Import PatternFly components
 import { Button, ButtonProps, DropEvent, Icon, Tooltip, TooltipProps } from '@patternfly/react-core';
-import { Accept, useDropzone } from 'react-dropzone';
+import { Accept, DropzoneOptions, FileError, FileRejection, useDropzone } from 'react-dropzone';
 import { PaperclipIcon } from '@patternfly/react-icons/dist/esm/icons/paperclip-icon';
 
 export interface AttachButtonProps extends ButtonProps {
@@ -33,7 +33,24 @@ export interface AttachButtonProps extends ButtonProps {
   tooltipContent?: string;
   /** Test id applied to input */
   inputTestId?: string;
+  /** Whether button is compact */
   isCompact?: boolean;
+  /** Minimum file size allowed */
+  minSize?: number;
+  /** Max file size allowed */
+  maxSize?: number;
+  /** Max number of files allowed */
+  maxFiles?: number;
+  /** Whether attachments are disabled */
+  isAttachmentDisabled?: boolean;
+  /** Callback when file(s) are attached */
+  onAttach?: <T extends File>(acceptedFiles: T[], fileRejections: FileRejection[], event: DropEvent) => void;
+  /** Callback function for AttachButton when an attachment fails */
+  onAttachRejected?: (fileRejections: FileRejection[], event: DropEvent) => void;
+  /** Validator for files; see https://react-dropzone.js.org/#!/Custom%20validation for more information */
+  validator?: <T extends File>(file: T) => FileError | readonly FileError[] | null;
+  /** Additional props passed to react-dropzone */
+  dropzoneProps?: DropzoneOptions;
 }
 
 const AttachButtonBase: FunctionComponent<AttachButtonProps> = ({
@@ -47,12 +64,28 @@ const AttachButtonBase: FunctionComponent<AttachButtonProps> = ({
   inputTestId,
   isCompact,
   allowedFileTypes,
+  minSize,
+  maxSize,
+  maxFiles,
+  isAttachmentDisabled,
+  onAttach,
+  onAttachRejected,
+  validator,
+  dropzoneProps,
   ...props
 }: AttachButtonProps) => {
   const { open, getInputProps } = useDropzone({
     multiple: true,
     onDropAccepted: onAttachAccepted,
-    accept: allowedFileTypes
+    accept: allowedFileTypes,
+    minSize,
+    maxSize,
+    maxFiles,
+    disabled: isAttachmentDisabled,
+    onDrop: onAttach,
+    onDropRejected: onAttachRejected,
+    validator,
+    ...dropzoneProps
   });
 
   return (
diff --git a/packages/module/src/MessageBar/MessageBar.tsx b/packages/module/src/MessageBar/MessageBar.tsx
