chore: dismiss invalid files message

packages/react-storage/src/components/StorageBrowser/views/LocationActionView/UploadView/UploadViewProvider.tsx

@@ -44,6 +44,7 @@ export function UploadViewProvider({
     onTaskRemove,
     onSelectFiles,
     onToggleOverwrite,
+    onDismissFilesValidationMessage,
   } = props;
 
   const isActionStartDisabled =
@@ -60,7 +61,10 @@ export function UploadViewProvider({
     : undefined;
   const filesValidationMessage =
     invalidFiles && !isProcessing
-      ? getFilesValidationMessage({ invalidFiles })
+      ? {
+          ...getFilesValidationMessage({ invalidFiles }),
+          onDismiss: onDismissFilesValidationMessage,
+        }
       : undefined;
 
   return (

packages/react-storage/src/components/StorageBrowser/views/LocationActionView/UploadView/__tests__/UploadView.spec.tsx

@@ -31,6 +31,7 @@ const onActionExit = jest.fn();
 const onDropFiles = jest.fn();
 const onSelectFiles = jest.fn();
 const onToggleOverwrite = jest.fn();
+const onDismissFilesValidationMessage = jest.fn();
 
 const callbacks = {
   onActionCancel,
@@ -39,6 +40,7 @@ const callbacks = {
   onActionExit,
   onSelectFiles,
   onToggleOverwrite,
+  onDismissFilesValidationMessage,
 };
 
 const statusCounts = { ...INITIAL_STATUS_COUNTS };

packages/react-storage/src/components/StorageBrowser/views/LocationActionView/UploadView/__tests__/useUploadView.spec.ts

@@ -136,6 +136,24 @@ describe('useUploadView', () => {
   });
 
   it('should call handleProcessTasks with the expected values', () => {
+    mockUserStoreState.files = [invalidFileItem];
+    const { result } = renderHook(() => useUploadView());
+    act(() => {
+      result.current.onActionStart();
+    });
+    expect(handleProcessTasks).toHaveBeenCalledTimes(1);
+    expect(handleProcessTasks).toHaveBeenCalledWith({
+      config: {
+        bucket: rootLocation.bucket,
+        credentials,
+        region: 'region',
+      },
+      options: { preventOverwrite: true },
+      destinationPrefix: '',
+    });
+  });
+
+  it('should remove any invalid files action is started', () => {
     mockUserStoreState.files = [invalidFileItem];
     const { result } = renderHook(() => useUploadView());
     act(() => {
@@ -148,20 +166,16 @@ describe('useUploadView', () => {
     });
   });
 
-  it('should remove any invalid files action is started', () => {
+  it('should remove any invalid files when files validation message is dismissed', () => {
+    mockUserStoreState.files = [invalidFileItem];
     const { result } = renderHook(() => useUploadView());
     act(() => {
-      result.current.onActionStart();
+      result.current.onDismissFilesValidationMessage();
     });
-    expect(handleProcessTasks).toHaveBeenCalledTimes(1);
-    expect(handleProcessTasks).toHaveBeenCalledWith({
-      config: {
-        bucket: rootLocation.bucket,
-        credentials,
-        region: 'region',
-      },
-      options: { preventOverwrite: true },
-      destinationPrefix: '',
+    expect(dispatchStoreAction).toHaveBeenCalledTimes(1);
+    expect(dispatchStoreAction).toHaveBeenCalledWith({
+      type: 'REMOVE_FILE_ITEM',
+      id: invalidFileItem.id,
     });
   });
 

packages/react-storage/src/components/StorageBrowser/views/LocationActionView/UploadView/types.ts

@@ -4,10 +4,11 @@ import { ActionViewType, ActionViewProps, ActionViewState } from '../types';
 
 export interface UploadViewState extends ActionViewState<FileItem> {
   isOverwritingEnabled: boolean;
+  invalidFiles: FileItems | undefined;
   onDropFiles: (files: File[]) => void;
   onSelectFiles: (type: 'FILE' | 'FOLDER') => void;
   onToggleOverwrite: () => void;
-  invalidFiles: FileItems | undefined;
+  onDismissFilesValidationMessage: () => void;
 }
 
 export interface UploadViewProps

packages/react-storage/src/components/StorageBrowser/views/LocationActionView/UploadView/useUploadView.ts

@@ -71,10 +71,14 @@ export const useUploadView = (
     [dispatchStoreAction]
   );
 
-  const onActionStart = React.useCallback(() => {
+  const onDismissFilesValidationMessage = React.useCallback(() => {
     invalidFiles?.forEach((file) => {
       dispatchStoreAction({ type: 'REMOVE_FILE_ITEM', id: file.id });
     });
+  }, [invalidFiles, dispatchStoreAction]);
+
+  const onActionStart = React.useCallback(() => {
+    onDismissFilesValidationMessage();
 
     handleProcess({
       config: getInput(),
@@ -86,8 +90,7 @@ export const useUploadView = (
     key,
     getInput,
     handleProcess,
-    invalidFiles,
-    dispatchStoreAction,
+    onDismissFilesValidationMessage,
   ]);
 
   const onActionCancel = React.useCallback(() => {
@@ -128,5 +131,6 @@ export const useUploadView = (
     onTaskRemove,
     onSelectFiles,
     onToggleOverwrite,
+    onDismissFilesValidationMessage,
   };
 };

packages/ui/src/theme/css/component/StorageBrowser/storageBrowser.scss

@@ -198,6 +198,10 @@
 
   &__message {
     flex: 1;
+
+    &-dismiss {
+      margin-left: auto;
+    }
   }
 
   &__buttons {