fix(storage-browser): update task statuses before passing to callbacks, add error to TaskResult (#6484)

Author: calebpollman

.changeset/forty-hotels-tan.md

@@ -0,0 +1,5 @@
+---
+"@aws-amplify/ui-react-storage": patch
+---
+
+fix(storage-browser): update task statuses before passing to callbacks, add error to TaskResult

docs/src/pages/[platform]/connected-components/storage/storage-browser/react.mdx

@@ -487,39 +487,12 @@ The following `default` actions are invoked by the default UI views:
 
 <Example>
 <ExampleCode>
-```ts
-import { createStorageBrowser, defaultActionConfigs } from '@aws-amplify/ui-react-storage/browser';
-
-const { StorageBrowser } = createStorageBrowser({
-  actions: {
-    default: {
-      upload: {
-        ...defaultActionConfigs.upload,
-        handler: ({ config, data, options }) =>
-          defaultActionConfigs.upload.handler({
-            config,
-            data,
-            options: {
-              ...options,
-              onSuccess: (...input) => {
-                options?.onSuccess?.(...input);
-                fileUploadCounter.add(1); // Your custom counter metrics.
-              },
-              onError: (data, message, error) => {
-                options?.onError?.(data, message, error);
-                fileUploadError.recordError(error); // Your custom error metrics.
-              },
-            },
-          }),
-      }
-    }
-  }
-});
+```tsx file=../../../../../../../examples/next/pages/ui/components/storage/storage-browser/default-auth/routed/StorageBrowser.ts
 ```
 </ExampleCode>
 </Example>
 
-#### New custom actions
+#### Add Custom actions
 
 `custom` actions can be provided to add entirely new functionality to `StorageBrowser` which can be used by custom UI views. 
 

examples/next/pages/ui/components/storage/storage-browser/default-auth/routed/StorageBrowser.ts

@@ -3,13 +3,54 @@ import { Amplify } from 'aws-amplify';
 import {
   createAmplifyAuthAdapter,
   createStorageBrowser,
+  defaultHandlers,
+  defaultActionConfigs,
 } from '@aws-amplify/ui-react-storage/browser';
 import '@aws-amplify/ui-react-storage/styles.css';
 
 import config from './aws-exports';
 
 Amplify.configure(config);
 
+const uploads = [];
+const errors = [];
+const fileUploadCounter = {
+  add: (value: { key: string }) => {
+    uploads.push(value);
+
+    console.log('uploads', uploads);
+  },
+  recordError: (error: Error) => {
+    errors.push(error);
+
+    console.log('errors', errors);
+  },
+};
+
 export const { StorageBrowser } = createStorageBrowser({
   config: createAmplifyAuthAdapter(),
+  actions: {
+    default: {
+      upload: {
+        ...defaultActionConfigs.upload,
+        handler: (input) => {
+          const output = defaultHandlers.upload(input);
+
+          output.result.then((result) => {
+            const { error, status, value } = result;
+            if (status === 'COMPLETE') {
+              fileUploadCounter.add(value);
+            } else if (
+              status === 'FAILED' ||
+              status === 'OVERWRITE_PREVENTED'
+            ) {
+              fileUploadCounter.recordError(error);
+            }
+          });
+
+          return output;
+        },
+      },
+    },
+  },
 });

packages/react-storage/src/components/StorageBrowser/actions/handlers/__tests__/copy.spec.ts

@@ -113,13 +113,15 @@ describe('copyHandler', () => {
   });
 
   it('returns failed status', async () => {
-    const errorMessage = 'error-message';
-    mockCopy.mockRejectedValue(new Error(errorMessage));
+    const error = new Error('No copy!');
+
+    mockCopy.mockRejectedValue(error);
     const { result } = copyHandler(baseInput);
 
     expect(await result).toEqual({
+      error,
+      message: error.message,
       status: 'FAILED',
-      message: errorMessage,
     });
   });
 });

packages/react-storage/src/components/StorageBrowser/actions/handlers/__tests__/createFolder.spec.ts

@@ -122,37 +122,38 @@ describe('createFolderHandler', () => {
   });
 
   it('handles a failure as expected', async () => {
-    const errorMessage = 'error-message';
+    const error = new Error('No new folder!');
 
     mockUploadData.mockReturnValue({
       ...mockUploadDataReturnValue,
-      result: Promise.reject(new Error(errorMessage)),
+      result: Promise.reject(error),
       state: 'ERROR',
     });
 
     const { result } = createFolderHandler(baseInput);
 
     expect(await result).toStrictEqual({
-      message: errorMessage,
+      error,
+      message: error.message,
       status: 'FAILED',
     });
   });
 
   it('returns "OVERWRITE_PREVENTED" on `PreconditionFailed` error', async () => {
-    const message = 'No overwrite!';
-    const overwritePreventedError = new Error(message);
-    overwritePreventedError.name = 'PreconditionFailed';
+    const error = new Error('No overwrite!');
+    error.name = 'PreconditionFailed';
 
     mockUploadData.mockReturnValue({
       ...mockUploadDataReturnValue,
-      result: Promise.reject(overwritePreventedError),
+      result: Promise.reject(error),
       state: 'ERROR',
     });
 
     const { result } = createFolderHandler(baseInput);
 
     expect(await result).toStrictEqual({
-      message,
+      error,
+      message: error.message,
       status: 'OVERWRITE_PREVENTED',
     });
   });

packages/react-storage/src/components/StorageBrowser/actions/handlers/__tests__/delete.spec.ts

@@ -61,13 +61,14 @@ describe('deleteHandler', () => {
   });
 
   it('returns failed status', async () => {
-    const errorMessage = 'error-message';
-    mockRemove.mockRejectedValue(new Error(errorMessage));
+    const error = new Error('No delete!');
+    mockRemove.mockRejectedValue(error);
     const { result } = deleteHandler(baseInput);
 
     expect(await result).toEqual({
+      error,
+      message: error.message,
       status: 'FAILED',
-      message: errorMessage,
     });
   });
 });

packages/react-storage/src/components/StorageBrowser/actions/handlers/__tests__/download.spec.ts

@@ -61,13 +61,14 @@ describe('downloadHandler', () => {
   });
 
   it('returns failed status', async () => {
-    const errorMessage = 'error-message';
-    mockGetUrl.mockRejectedValue(new Error(errorMessage));
+    const error = new Error('No download!');
+    mockGetUrl.mockRejectedValue(error);
     const { result } = downloadHandler(baseInput);
 
     expect(await result).toEqual({
+      error,
+      message: error.message,
       status: 'FAILED',
-      message: errorMessage,
     });
   });
 });

packages/react-storage/src/components/StorageBrowser/actions/handlers/__tests__/upload.spec.ts

@@ -178,6 +178,7 @@ describe('uploadHandler', () => {
     const { result } = uploadHandler(baseInput);
 
     expect(await result).toStrictEqual({
+      error,
       message: error.message,
       status: 'FAILED',
     });
@@ -196,18 +197,19 @@ describe('uploadHandler', () => {
     const { result } = uploadHandler(baseInput);
 
     expect(await result).toStrictEqual({
-      message: 'Failed!',
+      error,
+      message: error.message,
       status: 'CANCELED',
     });
   });
 
   it('handles an overwrite failure as expected', async () => {
-    const preconditionError = new Error('Failed!');
-    preconditionError.name = 'PreconditionFailed';
+    const error = new Error('Failed!');
+    error.name = 'PreconditionFailed';
 
     mockUploadData.mockReturnValue({
       ...mockUploadDataReturnValue,
-      result: Promise.reject(preconditionError),
+      result: Promise.reject(error),
       state: 'ERROR',
     });
 
@@ -217,7 +219,8 @@ describe('uploadHandler', () => {
     });
 
     expect(await result).toStrictEqual({
-      message: 'Failed!',
+      error,
+      message: error.message,
       status: 'OVERWRITE_PREVENTED',
     });
   });

packages/react-storage/src/components/StorageBrowser/actions/handlers/copy.ts

@@ -67,6 +67,9 @@ export const copyHandler: CopyHandler = (input) => {
         status: 'COMPLETE' as const,
         value: { key: path },
       }))
-      .catch(({ message }: Error) => ({ message, status: 'FAILED' })),
+      .catch((error: Error) => {
+        const { message } = error;
+        return { error, message, status: 'FAILED' };
+      }),
   };
 };

packages/react-storage/src/components/StorageBrowser/actions/handlers/createFolder.ts

@@ -58,11 +58,12 @@ export const createFolderHandler: CreateFolderHandler = (input) => {
         status: 'COMPLETE' as const,
         value: { key: path },
       }))
-      .catch(({ message, name }: Error) => {
+      .catch((error: Error) => {
+        const { message, name } = error;
         if (name === 'PreconditionFailed') {
-          return { message, status: 'OVERWRITE_PREVENTED' };
+          return { error, message, status: 'OVERWRITE_PREVENTED' };
         }
-        return { message, status: 'FAILED' };
+        return { error, message, status: 'FAILED' };
       }),
   };
 };