fix(storage-browser): remove key parsing in useDeleteView (#6450)

Author: calebpollman

.changeset/metal-dogs-attack.md

@@ -0,0 +1,5 @@
+---
+"@aws-amplify/ui-react-storage": patch
+---
+
+fix(storage-browser): remove key parsing in useDeleteView

packages/react-storage/src/components/StorageBrowser/views/LocationActionView/CopyView/CopyViewProvider.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 
+import { MessageProps } from '../../../composables/Message';
 import { ControlsContextProvider } from '../../../controls/context';
 import { useDisplayText } from '../../../displayText';
 
@@ -9,7 +10,7 @@ import { FoldersMessageProvider } from './FoldersMessageControl';
 import { FoldersPaginationProvider } from './FoldersPaginationControl';
 import { FoldersTableProvider } from './FoldersTableControl';
 import { CopyViewProviderProps } from './types';
-import { MessageProps } from '../../../composables/Message';
+import { getFolderText } from './utils';
 
 export function CopyViewProvider({
   children,
@@ -30,14 +31,14 @@ export function CopyViewProvider({
     statusDisplayCompletedLabel,
     statusDisplayFailedLabel,
     statusDisplayQueuedLabel,
+    title,
   } = displayText;
 
   const {
     destination,
     folders,
     isProcessing,
     isProcessingComplete,
-    location,
     statusCounts,
     tasks,
     onActionCancel,
@@ -64,11 +65,9 @@ export function CopyViewProvider({
     onSelectFolder,
   } = folders;
 
-  const { key: locationKey } = location ?? {};
-
   const tableData = getActionViewTableData({
+    getFolderText,
     tasks,
-    locationKey,
     isProcessing,
     displayText,
     onTaskRemove,
@@ -110,6 +109,7 @@ export function CopyViewProvider({
         statusDisplayFailedLabel,
         statusDisplayQueuedLabel,
         tableData,
+        title,
       }}
       onActionCancel={onActionCancel}
       onActionExit={onActionExit}

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

@@ -32,9 +32,10 @@ jest.spyOn(Config, 'useGetActionInput').mockReturnValue(() => ({
 
 const getActionCompleteMessage = jest.fn();
 const getListFoldersResultsMessage = jest.fn();
+const title = 'Copy';
 jest.mock('../../../../displayText', () => ({
   useDisplayText: () => ({
-    CopyView: { getActionCompleteMessage, getListFoldersResultsMessage },
+    CopyView: { getActionCompleteMessage, getListFoldersResultsMessage, title },
   }),
 }));
 
@@ -174,6 +175,7 @@ describe('CopyViewProvider', () => {
         isActionExitDisabled: true,
         isActionDestinationNavigable: false,
         statusCounts: processingViewState.statusCounts,
+        title,
       },
       ...actionCallbacks,
     });

packages/react-storage/src/components/StorageBrowser/views/LocationActionView/CopyView/__tests__/utils.spec.ts

@@ -0,0 +1,28 @@
+import { CopyHandlerData } from '../../../../actions';
+import { Task } from '../../../../tasks';
+
+import { getFolderText } from '../utils';
+
+describe('getFolderText', () => {
+  it('returns the expected value', () => {
+    const expected = 'my-prefix/';
+    const fileKey = 'my-key.jpg';
+    const sourceKey = `${expected}${fileKey}`;
+
+    const task: Task<CopyHandlerData> = {
+      data: {
+        fileKey,
+        key: `my-destination/${fileKey}`,
+        sourceKey,
+        id: 'id',
+        lastModified: new Date(),
+      },
+      message: undefined,
+      progress: undefined,
+      status: 'QUEUED',
+    };
+    const output = getFolderText(task);
+
+    expect(output).toBe(expected);
+  });
+});

packages/react-storage/src/components/StorageBrowser/views/LocationActionView/CopyView/utils.ts

@@ -0,0 +1,6 @@
+import { CopyHandlerData } from '../../../actions';
+import { Task } from '../../../tasks';
+
+export const getFolderText = ({
+  data: { fileKey, sourceKey },
+}: Task<CopyHandlerData>): string => sourceKey.slice(0, -fileKey.length);

packages/react-storage/src/components/StorageBrowser/views/LocationActionView/DeleteView/DeleteViewProvider.tsx

@@ -2,8 +2,10 @@ import React from 'react';
 
 import { ControlsContextProvider } from '../../../controls/context';
 import { useDisplayText } from '../../../displayText';
+
 import { getActionViewTableData } from '../getActionViewTableData';
 import { DeleteViewProviderProps } from './types';
+import { getFolderText } from './utils';
 
 export function DeleteViewProvider({
   children,
@@ -25,7 +27,6 @@ export function DeleteViewProvider({
   const {
     isProcessing,
     isProcessingComplete,
-    location,
     statusCounts,
     tasks,
     onActionCancel,
@@ -40,9 +41,9 @@ export function DeleteViewProvider({
 
   const tableData = getActionViewTableData({
     tasks,
-    locationKey: location.key,
     isProcessing,
     displayText,
+    getFolderText,
     onTaskRemove,
   });
 

packages/react-storage/src/components/StorageBrowser/views/LocationActionView/DeleteView/__tests__/useDeleteView.spec.ts

@@ -2,23 +2,43 @@ import { renderHook, act } from '@testing-library/react';
 
 import { useStore } from '../../../../providers/store';
 import { useAction } from '../../../../useAction';
+import { FileDataItem } from '../../../../actions';
 
 import { useDeleteView } from '../useDeleteView';
 import { INITIAL_STATUS_COUNTS } from '../../../../tasks';
 
 jest.mock('../../../../providers/store');
 jest.mock('../../../../useAction');
 
+const fileDataItems: FileDataItem[] = [
+  {
+    key: 'pretend-prefix/test-file.txt',
+    fileKey: 'test-file.txt',
+    lastModified: new Date(),
+    id: 'id-1',
+    size: 10,
+    type: 'FILE',
+  },
+  {
+    key: 'pretend-prefix/deeply-nested/test-file.txt',
+    fileKey: 'test-file.txt',
+    lastModified: new Date(),
+    id: 'id-2',
+    size: 10,
+    type: 'FILE',
+  },
+];
+
 describe('useDeleteView', () => {
-  const mockeUseAction = jest.mocked(useAction);
-  const mockeUseStore = jest.mocked(useStore);
+  const mockUseAction = jest.mocked(useAction);
+  const mockUseStore = jest.mocked(useStore);
   const mockCancel = jest.fn();
   const mockDispatchStoreAction = jest.fn();
   const mockHandleDelete = jest.fn();
   const mockReset = jest.fn();
 
   beforeEach(() => {
-    mockeUseStore.mockReturnValue([
+    mockUseStore.mockReturnValue([
       {
         actionType: 'DELETE',
         files: [],
@@ -33,23 +53,12 @@ describe('useDeleteView', () => {
           path: '',
           key: 'test-prefix/',
         },
-        locationItems: {
-          fileDataItems: [
-            {
-              key: 'pretend-prefix/test-file.txt',
-              fileKey: 'test-file.txt',
-              lastModified: new Date(),
-              id: 'id',
-              size: 10,
-              type: 'FILE',
-            },
-          ],
-        },
+        locationItems: { fileDataItems },
       },
       mockDispatchStoreAction,
     ]);
 
-    mockeUseAction.mockReturnValue([
+    mockUseAction.mockReturnValue([
       {
         isProcessing: false,
         isProcessingComplete: false,
@@ -88,8 +97,8 @@ describe('useDeleteView', () => {
     mockDispatchStoreAction.mockClear();
     mockHandleDelete.mockClear();
     mockReset.mockClear();
-    mockeUseAction.mockReset();
-    mockeUseStore.mockReset();
+    mockUseAction.mockReset();
+    mockUseStore.mockReset();
   });
 
   it('should return the correct initial state', () => {
@@ -151,4 +160,14 @@ describe('useDeleteView', () => {
       type: 'RESET_ACTION_TYPE',
     });
   });
+
+  it('provides the unmodified value of `fileDataItems` to `useAction` as `items`', () => {
+    renderHook(() => useDeleteView());
+
+    expect(mockUseAction).toHaveBeenCalledTimes(1);
+    expect(mockUseAction).toHaveBeenCalledWith(
+      'delete',
+      expect.objectContaining({ items: fileDataItems })
+    );
+  });
 });

packages/react-storage/src/components/StorageBrowser/views/LocationActionView/DeleteView/__tests__/utils.spec.ts

@@ -0,0 +1,26 @@
+import { DeleteHandlerData } from '../../../../actions';
+import { Task } from '../../../../tasks';
+
+import { getFolderText } from '../utils';
+
+describe('getFolderText', () => {
+  it('returns the expected value', () => {
+    const expected = 'my-prefix/';
+    const fileKey = 'my-key.jpg';
+    const key = `${expected}${fileKey}`;
+
+    const task: Task<DeleteHandlerData> = {
+      data: {
+        fileKey,
+        key,
+        id: 'id',
+      },
+      message: undefined,
+      progress: undefined,
+      status: 'QUEUED',
+    };
+    const output = getFolderText(task);
+
+    expect(output).toBe(expected);
+  });
+});

packages/react-storage/src/components/StorageBrowser/views/LocationActionView/DeleteView/useDeleteView.ts

@@ -1,33 +1,26 @@
 import React from 'react';
 import { isFunction } from '@aws-amplify/ui';
 
+import { FileDataItem } from '../../../actions';
 import { useStore } from '../../../providers/store';
 import { Task } from '../../../tasks';
 import { useAction } from '../../../useAction';
 
 import { DeleteViewState, UseDeleteViewOptions } from './types';
 
+// assign to constant to ensure referential equality
+const EMPTY_ITEMS: FileDataItem[] = [];
+
 export const useDeleteView = (
   options?: UseDeleteViewOptions
 ): DeleteViewState => {
   const { onExit: _onExit } = options ?? {};
 
   const [{ location, locationItems }, dispatchStoreAction] = useStore();
-  const { fileDataItems } = locationItems;
-  const { current, key } = location;
-
-  const data = React.useMemo(
-    () =>
-      !fileDataItems
-        ? []
-        : fileDataItems.map((item) => ({
-            ...item,
-            key: `${key}${item.fileKey}`,
-          })),
-    [fileDataItems, key]
-  );
+  const { current } = location;
+  const { fileDataItems: items = EMPTY_ITEMS } = locationItems;
 
-  const [processState, handleProcess] = useAction('delete', { items: data });
+  const [processState, handleProcess] = useAction('delete', { items });
 
   const { isProcessing, isProcessingComplete, statusCounts, tasks } =
     processState;

packages/react-storage/src/components/StorageBrowser/views/LocationActionView/DeleteView/utils.ts

@@ -0,0 +1,6 @@
+import { DeleteHandlerData } from '../../../actions';
+import { Task } from '../../../tasks';
+
+export const getFolderText = ({
+  data: { fileKey, key },
+}: Task<DeleteHandlerData>): string => key.slice(0, -fileKey.length);