From ab8bc4e180fbe46d48bc8809e4e951276e399f74 Mon Sep 17 00:00:00 2001 From: Allan Zheng Date: Mon, 18 Nov 2024 12:59:10 -0800 Subject: [PATCH 1/4] feat: dismiss invalid files message --- .../UploadView/UploadViewProvider.tsx | 6 +++++- .../views/LocationActionView/UploadView/types.ts | 3 ++- .../LocationActionView/UploadView/useUploadView.ts | 10 +++++++--- .../css/component/StorageBrowser/storageBrowser.scss | 4 ++++ 4 files changed, 18 insertions(+), 5 deletions(-) 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/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 { From 3050a483d7728f3654b4d8cbfb4e4a613946b359 Mon Sep 17 00:00:00 2001 From: Zheng Date: Thu, 21 Nov 2024 12:24:33 -0800 Subject: [PATCH 2/4] chore: rename to handleResetInvalidFiles --- .../LocationActionView/UploadView/UploadViewProvider.tsx | 4 ++-- .../views/LocationActionView/UploadView/types.ts | 2 +- .../views/LocationActionView/UploadView/useUploadView.ts | 8 ++++---- 3 files changed, 7 insertions(+), 7 deletions(-) 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 d1c69e8f910..7a4a0eb30df 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,7 +44,7 @@ export function UploadViewProvider({ onTaskRemove, onSelectFiles, onToggleOverwrite, - onDismissFilesValidationMessage, + handleResetInvalidFiles, } = props; const isActionStartDisabled = @@ -63,7 +63,7 @@ export function UploadViewProvider({ invalidFiles && !isProcessing ? { ...getFilesValidationMessage({ invalidFiles }), - onDismiss: onDismissFilesValidationMessage, + onDismiss: handleResetInvalidFiles, } : undefined; 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 daf03fe445e..df817b69bbf 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 @@ -8,7 +8,7 @@ export interface UploadViewState extends ActionViewState { onDropFiles: (files: File[]) => void; onSelectFiles: (type: 'FILE' | 'FOLDER') => void; onToggleOverwrite: () => void; - onDismissFilesValidationMessage: () => void; + handleResetInvalidFiles: () => 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 774ed4b791b..e7cc94f8bc0 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,14 +71,14 @@ export const useUploadView = ( [dispatchStoreAction] ); - const onDismissFilesValidationMessage = React.useCallback(() => { + const handleResetInvalidFiles = React.useCallback(() => { invalidFiles?.forEach((file) => { dispatchStoreAction({ type: 'REMOVE_FILE_ITEM', id: file.id }); }); }, [invalidFiles, dispatchStoreAction]); const onActionStart = React.useCallback(() => { - onDismissFilesValidationMessage(); + handleResetInvalidFiles(); handleProcess({ config: getInput(), @@ -90,7 +90,7 @@ export const useUploadView = ( key, getInput, handleProcess, - onDismissFilesValidationMessage, + handleResetInvalidFiles, ]); const onActionCancel = React.useCallback(() => { @@ -131,6 +131,6 @@ export const useUploadView = ( onTaskRemove, onSelectFiles, onToggleOverwrite, - onDismissFilesValidationMessage, + handleResetInvalidFiles, }; }; From 71d59770ba2ea9e1d72ac5bd86ba8d536fcc9e61 Mon Sep 17 00:00:00 2001 From: Zheng Date: Thu, 21 Nov 2024 15:46:32 -0800 Subject: [PATCH 3/4] Revert "chore: rename to handleResetInvalidFiles" This reverts commit 3050a483d7728f3654b4d8cbfb4e4a613946b359. --- .../LocationActionView/UploadView/UploadViewProvider.tsx | 4 ++-- .../views/LocationActionView/UploadView/types.ts | 2 +- .../views/LocationActionView/UploadView/useUploadView.ts | 8 ++++---- 3 files changed, 7 insertions(+), 7 deletions(-) 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 7a4a0eb30df..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,7 +44,7 @@ export function UploadViewProvider({ onTaskRemove, onSelectFiles, onToggleOverwrite, - handleResetInvalidFiles, + onDismissFilesValidationMessage, } = props; const isActionStartDisabled = @@ -63,7 +63,7 @@ export function UploadViewProvider({ invalidFiles && !isProcessing ? { ...getFilesValidationMessage({ invalidFiles }), - onDismiss: handleResetInvalidFiles, + onDismiss: onDismissFilesValidationMessage, } : undefined; 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 df817b69bbf..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 @@ -8,7 +8,7 @@ export interface UploadViewState extends ActionViewState { onDropFiles: (files: File[]) => void; onSelectFiles: (type: 'FILE' | 'FOLDER') => void; onToggleOverwrite: () => void; - handleResetInvalidFiles: () => void; + 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 e7cc94f8bc0..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,14 +71,14 @@ export const useUploadView = ( [dispatchStoreAction] ); - const handleResetInvalidFiles = React.useCallback(() => { + const onDismissFilesValidationMessage = React.useCallback(() => { invalidFiles?.forEach((file) => { dispatchStoreAction({ type: 'REMOVE_FILE_ITEM', id: file.id }); }); }, [invalidFiles, dispatchStoreAction]); const onActionStart = React.useCallback(() => { - handleResetInvalidFiles(); + onDismissFilesValidationMessage(); handleProcess({ config: getInput(), @@ -90,7 +90,7 @@ export const useUploadView = ( key, getInput, handleProcess, - handleResetInvalidFiles, + onDismissFilesValidationMessage, ]); const onActionCancel = React.useCallback(() => { @@ -131,6 +131,6 @@ export const useUploadView = ( onTaskRemove, onSelectFiles, onToggleOverwrite, - handleResetInvalidFiles, + onDismissFilesValidationMessage, }; }; From 22c61ae4784b71e42ca01be625d22a8086be8f64 Mon Sep 17 00:00:00 2001 From: Zheng Date: Thu, 21 Nov 2024 15:57:29 -0800 Subject: [PATCH 4/4] test: add unit tests --- .../UploadView/__tests__/UploadView.spec.tsx | 2 ++ .../__tests__/useUploadView.spec.ts | 36 +++++++++++++------ 2 files changed, 27 insertions(+), 11 deletions(-) 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, }); });