Merge pull request #6064 from aws-amplify/feat-storage-browser/fix-do…

…wnload fix: add back download handler to location detail view
aws-amplify · Nov 12, 2024 · 9610892 · 9610892
2 parents 6ce7bde + 3b4e3ae
commit 9610892
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 15 deletions.
diff --git a/...mponents/StorageBrowser/views/LocationDetailView/__tests__/useLocationDetailView.spec.tsx b/...mponents/StorageBrowser/views/LocationDetailView/__tests__/useLocationDetailView.spec.tsx
@@ -13,6 +13,7 @@ import {
 
 import * as StoreModule from '../../../providers/store';
 import * as ConfigModule from '../../../providers/configuration';
+import * as TasksModule from '../../../tasks';
 import { LocationState } from '../../../providers/store/location';
 
 import {
@@ -30,17 +31,19 @@ const folderDataOne: FolderData = {
   type: 'FOLDER',
 };
 
-const fileDataOne: FileData = {
+const fileDataOne: FileDataItem = {
   id: '2',
   key: 'some-prefix/cool.jpg',
+  fileKey: 'some-prefix/cool.jpg',
   type: 'FILE',
   lastModified: new Date(),
   size: 25600,
 };
 
-const fileDataTwo: FileData = {
+const fileDataTwo: FileDataItem = {
   id: '3',
   key: 'some-prefix/maybe-cool.png',
+  fileKey: 'some-prefix/maybe-cool.png',
   type: 'FILE',
   lastModified: new Date(),
   size: 25600,
@@ -106,6 +109,26 @@ const config: ActionInputConfig = {
 };
 useGetActionSpy.mockReturnValue(() => config);
 
+const taskOne: TasksModule.Task<FileData> = {
+  data: fileItem,
+  cancel: jest.fn(),
+  message: undefined,
+  progress: undefined,
+  remove: jest.fn(),
+  status: 'QUEUED',
+};
+
+const handleDownload = jest.fn();
+jest.spyOn(TasksModule, 'useProcessTasks').mockReturnValue([
+  {
+    isProcessing: false,
+    isProcessingComplete: false,
+    statusCounts: TasksModule.INITIAL_STATUS_COUNTS,
+    tasks: [taskOne],
+  },
+  handleDownload,
+]);
+
 describe('useLocationDetailView', () => {
   const mockLocation = { current: undefined, path: '', key: '' };
   // create mocks
@@ -328,6 +351,16 @@ describe('useLocationDetailView', () => {
     });
   });
 
+  it('should handle downloading a file', () => {
+    const { result } = renderHook(() =>
+      useLocationDetailView({ onExit: jest.fn() })
+    );
+
+    result.current.onDownload(fileDataOne);
+    expect(handleDownload).toHaveBeenCalledTimes(1);
+    expect(handleDownload).toHaveBeenCalledWith({ config, data: fileDataOne });
+  });
+
   it('should navigate home', () => {
     const mockOnExit = jest.fn();
 

diff --git a/...etailView/getLocationDetailViewTableData/__tests__/getLocationDetailViewTableData.spec.ts b/...etailView/getLocationDetailViewTableData/__tests__/getLocationDetailViewTableData.spec.ts
@@ -19,6 +19,7 @@ describe('getLocationDetailViewTableData', () => {
   } as const;
   const fileItem = {
     key: 'file-key.ext',
+    fileKey: 'file-key.ext',
     lastModified: new Date(1),
     id: 'file-id',
     size: 1,

diff --git a/...views/LocationDetailView/getLocationDetailViewTableData/getLocationDetailViewTableData.ts b/...views/LocationDetailView/getLocationDetailViewTableData/getLocationDetailViewTableData.ts
@@ -1,6 +1,10 @@
 import { DataTableProps } from '../../../composables/DataTable';
 import { LocationData } from '../../../actions';
-import { LocationItemData } from '../../../actions/handlers';
+import {
+  createFileDataItem,
+  FileDataItem,
+  LocationItemData,
+} from '../../../actions/handlers';
 import { getFileRowContent } from './getFileRowContent';
 import { getFolderRowContent } from './getFolderRowContent';
 import { displayText } from '../../../displayText/en';
@@ -25,7 +29,7 @@ export const getLocationDetailViewTableData = ({
   fileDataItems?: FileData[];
   hasFiles: boolean;
   pageItems: LocationItemData[];
-  onDownload: (fileItem: FileData) => void;
+  onDownload: (fileItem: FileDataItem) => void;
   onNavigate: (location: LocationData, path?: string) => void;
   onSelect: (isSelected: boolean, fileItem: FileData) => void;
   onSelectAll: () => void;
@@ -53,7 +57,7 @@ export const getLocationDetailViewTableData = ({
         const isSelected =
           fileDataItems?.some((item) => item.id === id) ?? false;
         const onFileDownload = () => {
-          onDownload(locationItem);
+          onDownload(createFileDataItem(locationItem));
         };
         const onFileSelect = () => {
           onSelect(isSelected, locationItem);

diff --git a/...t-storage/src/components/StorageBrowser/views/LocationDetailView/useLocationDetailView.ts b/...t-storage/src/components/StorageBrowser/views/LocationDetailView/useLocationDetailView.ts
@@ -16,6 +16,8 @@ import { createEnhancedListHandler } from '../../actions/createEnhancedListHandl
 import { useGetActionInput } from '../../providers/configuration';
 import { displayText } from '../../displayText/en';
 import { LocationState } from '../../providers/store/location';
+import { useProcessTasks } from '../../tasks';
+import { downloadHandler, FileDataItem } from '../../actions/handlers';
 
 interface UseLocationDetailView {
   hasError: boolean;
@@ -24,7 +26,7 @@ interface UseLocationDetailView {
   isLoading: boolean;
   location: LocationState;
   areAllFilesSelected: boolean;
-  fileDataItems: FileData[] | undefined;
+  fileDataItems: FileDataItem[] | undefined;
   hasFiles: boolean;
   showIncludeSubfolders: boolean;
   message: string | undefined;
@@ -37,7 +39,7 @@ interface UseLocationDetailView {
   onNavigate: (location: LocationData, path?: string) => void;
   onNavigateHome: () => void;
   onPaginate: (page: number) => void;
-  onDownload: (fileItem: FileData) => void;
+  onDownload: (fileItem: FileDataItem) => void;
   onSearch: (query: string, includeSubfolders?: boolean) => void;
   onSelect: (isSelected: boolean, fileItem: FileData) => void;
   onSelectAll: () => void;
@@ -78,6 +80,7 @@ const listLocationItemsAction = createEnhancedListHandler(
 export function useLocationDetailView(
   options?: UseLocationDetailViewOptions
 ): UseLocationDetailView {
+  const getConfig = useGetActionInput();
   const { initialValues, onActionSelect, onExit, onNavigate } = options ?? {};
 
   const listOptionsRef = React.useRef({
@@ -93,11 +96,14 @@ export function useLocationDetailView(
   const { fileDataItems } = locationItems;
   const hasInvalidPrefix = isUndefined(prefix);
 
-  const getConfig = useGetActionInput();
+  const [_, handleDownload] = useProcessTasks(downloadHandler);
 
   const [{ data, isLoading, hasError, message }, handleList] = useDataState(
     listLocationItemsAction,
-    { items: [], nextToken: undefined }
+    {
+      items: [],
+      nextToken: undefined,
+    }
   );
 
   // set up pagination
@@ -197,12 +203,8 @@ export function useLocationDetailView(
       });
       onActionSelect?.(actionType);
     },
-    onDownload: (fileItem: FileData) => {
-      // FIXME: Integrate with download handler/process tasks hook when available.
-      // eslint-disable-next-line no-console
-      console.error(
-        `Trying to download ${fileItem.key} but download not yet integrated`
-      );
+    onDownload: (data: FileDataItem) => {
+      handleDownload({ config: getConfig(), data });
     },
     onNavigateHome: () => {
       onExit?.();