diff --git a/packages/react-storage/src/components/StorageBrowser/views/LocationActionView/UploadView/UploadViewProvider.tsx b/packages/react-storage/src/components/StorageBrowser/views/LocationActionView/UploadView/UploadViewProvider.tsx index 2a4cb52b15f..d1c69e8f910 100644 --- a/packages/react-storage/src/components/StorageBrowser/views/LocationActionView/UploadView/UploadViewProvider.tsx +++ b/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 ( diff --git a/packages/react-storage/src/components/StorageBrowser/views/LocationActionView/UploadView/__tests__/UploadView.spec.tsx b/packages/react-storage/src/components/StorageBrowser/views/LocationActionView/UploadView/__tests__/UploadView.spec.tsx index c5e81daef5a..ccf9ea19254 100644 --- a/packages/react-storage/src/components/StorageBrowser/views/LocationActionView/UploadView/__tests__/UploadView.spec.tsx +++ b/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 }; diff --git a/packages/react-storage/src/components/StorageBrowser/views/LocationActionView/UploadView/__tests__/useUploadView.spec.ts b/packages/react-storage/src/components/StorageBrowser/views/LocationActionView/UploadView/__tests__/useUploadView.spec.ts index cbb2f680723..124bd2cd34d 100644 --- a/packages/react-storage/src/components/StorageBrowser/views/LocationActionView/UploadView/__tests__/useUploadView.spec.ts +++ b/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, }); }); diff --git a/packages/react-storage/src/components/StorageBrowser/views/LocationActionView/UploadView/types.ts b/packages/react-storage/src/components/StorageBrowser/views/LocationActionView/UploadView/types.ts index c6a08fa7c35..daf03fe445e 100644 --- a/packages/react-storage/src/components/StorageBrowser/views/LocationActionView/UploadView/types.ts +++ b/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 { isOverwritingEnabled: boolean; + invalidFiles: FileItems | undefined; onDropFiles: (files: File[]) => void; onSelectFiles: (type: 'FILE' | 'FOLDER') => void; onToggleOverwrite: () => void; - invalidFiles: FileItems | undefined; + onDismissFilesValidationMessage: () => void; } export interface UploadViewProps diff --git a/packages/react-storage/src/components/StorageBrowser/views/LocationActionView/UploadView/useUploadView.ts b/packages/react-storage/src/components/StorageBrowser/views/LocationActionView/UploadView/useUploadView.ts index 1d7e6313b0c..774ed4b791b 100644 --- a/packages/react-storage/src/components/StorageBrowser/views/LocationActionView/UploadView/useUploadView.ts +++ b/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, }; }; diff --git a/packages/ui/src/theme/css/component/StorageBrowser/storageBrowser.scss b/packages/ui/src/theme/css/component/StorageBrowser/storageBrowser.scss index 8f81bccdde0..00838ca8b0a 100644 --- a/packages/ui/src/theme/css/component/StorageBrowser/storageBrowser.scss +++ b/packages/ui/src/theme/css/component/StorageBrowser/storageBrowser.scss @@ -198,6 +198,10 @@ &__message { flex: 1; + + &-dismiss { + margin-left: auto; + } } &__buttons {