chore(StorageBrowser) : Generalize table resolver for default actions (#6566)

* update table resolvers

* update to use createTableResolver

* cleanup

* address feedback

* Revert "update to use createTableResolver"

This reverts commit c699150.

* cleanup

* address feedback

Author: ashika112

packages/react-storage/src/components/StorageBrowser/actions/index.ts

@@ -45,6 +45,7 @@ export type {
   LocationItemType,
   LocationPermissions,
   LocationType,
+  OptionalFileData,
   TaskData,
   TaskHandler,
   TaskHandlerInput,

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

@@ -5,7 +5,7 @@ import { ControlsContextProvider } from '../../../controls';
 import { useDisplayText } from '../../../displayText';
 
 import { useResolveTableData } from '../../hooks/useResolveTableData';
-import { COPY_TABLE_KEYS, COPY_TABLE_RESOLVERS } from '../../utils';
+import { FILE_DATA_ITEM_TABLE_KEYS, COPY_TABLE_RESOLVERS } from '../../utils';
 
 import { FoldersMessageProvider } from './FoldersMessageControl';
 import { FoldersPaginationProvider } from './FoldersPaginationControl';
@@ -65,10 +65,14 @@ export function CopyViewProvider({
     onSelectFolder,
   } = folders;
 
-  const tableData = useResolveTableData(COPY_TABLE_KEYS, COPY_TABLE_RESOLVERS, {
-    items,
-    props: { displayText, isProcessing, onTaskRemove },
-  });
+  const tableData = useResolveTableData(
+    FILE_DATA_ITEM_TABLE_KEYS,
+    COPY_TABLE_RESOLVERS,
+    {
+      items,
+      props: { displayText, isProcessing, onTaskRemove },
+    }
+  );
 
   const isActionStartDisabled =
     isProcessing || isProcessingComplete || !destination?.current;

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

@@ -4,7 +4,7 @@ import { ControlsContextProvider } from '../../../controls/context';
 import { useDisplayText } from '../../../displayText';
 
 import { useResolveTableData } from '../../hooks/useResolveTableData';
-import { DELETE_TABLE_KEYS, DELETE_TABLE_RESOLVERS } from '../../utils';
+import { FILE_DATA_ITEM_TABLE_KEYS, DELETE_TABLE_RESOLVERS } from '../../utils';
 
 import type { DeleteViewProviderProps } from './types';
 
@@ -42,7 +42,7 @@ export function DeleteViewProvider({
     : undefined;
 
   const tableData = useResolveTableData(
-    DELETE_TABLE_KEYS,
+    FILE_DATA_ITEM_TABLE_KEYS,
     DELETE_TABLE_RESOLVERS,
     {
       items,

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

@@ -1,7 +1,6 @@
 export {
-  COPY_TABLE_KEYS,
   COPY_TABLE_RESOLVERS,
-  DELETE_TABLE_KEYS,
+  FILE_DATA_ITEM_TABLE_KEYS,
   DELETE_TABLE_RESOLVERS,
   UPLOAD_TABLE_KEYS,
   UPLOAD_TABLE_RESOLVERS,

packages/react-storage/src/components/StorageBrowser/views/utils/tableResolvers/__testUtils__/tasks.ts

@@ -2,21 +2,16 @@ import { MULTIPART_UPLOAD_THRESHOLD_BYTES } from '../../../../actions/handlers/c
 import type { TaskStatus } from '../../../../tasks';
 
 import type {
+  FileDataTask,
   CopyActionTask,
   DeleteActionTask,
   UploadActionTask,
 } from '../types';
 
-type MockCopyOrDeleteTaskStatus = Exclude<TaskStatus, 'OVERWRITE_PREVENTED'>;
+type MockFileDataTaskStatus = Exclude<TaskStatus, 'OVERWRITE_PREVENTED'>;
 
-type MockCopyTasks = {
-  [K in MockCopyOrDeleteTaskStatus]: Omit<CopyActionTask, 'status'> & {
-    status: K;
-  };
-};
-
-type MockDeleteTasks = {
-  [K in MockCopyOrDeleteTaskStatus]: Omit<DeleteActionTask, 'status'> & {
+type MockFileDataTasks = {
+  [K in MockFileDataTaskStatus]: Omit<FileDataTask, 'status'> & {
     status: K;
   };
 };
@@ -26,7 +21,7 @@ type MockUploadTasks = {
 };
 
 const MOCK_PREFIX = 'test-folder/';
-const MOCK_COPY_OR_DELETE_TASK_BASE = {
+const MOCK_FILE_DATA_ITEM_BASE = {
   fileKey: 'file1.txt',
   lastModified: new Date(),
   size: 1000,
@@ -35,12 +30,12 @@ const MOCK_COPY_OR_DELETE_TASK_BASE = {
 
 const MOCK_COPY_DESTINATION_PREFIX = 'some-destination-folder/';
 const MOCK_COPY_DATA: Omit<CopyActionTask['data'], 'id'> = {
-  ...MOCK_COPY_OR_DELETE_TASK_BASE,
+  ...MOCK_FILE_DATA_ITEM_BASE,
   key: `${MOCK_COPY_DESTINATION_PREFIX}${MOCK_PREFIX}file1.txt`,
   sourceKey: `${MOCK_PREFIX}file1.txt`,
 };
 
-export const MOCK_COPY_TASKS: MockCopyTasks = {
+export const MOCK_COPY_TASKS: MockFileDataTasks = {
   CANCELED: {
     data: {
       ...MOCK_COPY_DATA,
@@ -94,11 +89,11 @@ export const MOCK_COPY_TASKS: MockCopyTasks = {
 };
 
 const MOCK_DELETE_DATA: Omit<DeleteActionTask['data'], 'id'> = {
-  ...MOCK_COPY_OR_DELETE_TASK_BASE,
+  ...MOCK_FILE_DATA_ITEM_BASE,
   key: `${MOCK_PREFIX}file1.txt`,
 };
 
-export const MOCK_DELETE_TASKS: MockDeleteTasks = {
+export const MOCK_DELETE_TASKS: MockFileDataTasks = {
   CANCELED: {
     data: {
       ...MOCK_DELETE_DATA,

packages/react-storage/src/components/StorageBrowser/views/utils/tableResolvers/__tests__/copyActionTask.spec.ts

@@ -2,9 +2,13 @@ import { capitalize } from '@aws-amplify/ui';
 import { CopyViewDisplayText } from '../../../../displayText';
 
 import { MOCK_COPY_TASKS } from '../__testUtils__/tasks';
-import { STATUS_ICONS, STATUS_LABELS } from '../constants';
+import {
+  FILE_DATA_ITEM_TABLE_KEYS,
+  STATUS_ICONS,
+  STATUS_LABELS,
+} from '../constants';
 import { CopyActionTask, CopyTableResolverProps } from '../types';
-import { COPY_TABLE_KEYS, COPY_TABLE_RESOLVERS } from '../copyResolvers';
+import { COPY_TABLE_RESOLVERS } from '../copyResolvers';
 
 const mockDisplayText: CopyViewDisplayText = {
   tableColumnNameHeader: 'Name',
@@ -28,7 +32,7 @@ describe('COPY_TABLE_RESOLVERS', () => {
   beforeEach(jest.clearAllMocks);
 
   describe('getCell', () => {
-    it.each(COPY_TABLE_KEYS)(
+    it.each(FILE_DATA_ITEM_TABLE_KEYS)(
       'returns the expect cell `key` for a "%s" table `key`',
       (key) => {
         const data = {
@@ -235,7 +239,7 @@ describe('COPY_TABLE_RESOLVERS', () => {
 
   describe('getHeader', () => {
     // filter out cancel, does not allow sorting
-    it.each(COPY_TABLE_KEYS.filter((key) => key !== 'cancel'))(
+    it.each(FILE_DATA_ITEM_TABLE_KEYS.filter((key) => key !== 'cancel'))(
       'returns the expect header data for a %s column',
       (key) => {
         const data = { key, props: mockProps };

packages/react-storage/src/components/StorageBrowser/views/utils/tableResolvers/__tests__/deleteActionTask.spec.ts

@@ -2,9 +2,13 @@ import { capitalize } from '@aws-amplify/ui';
 import { DeleteViewDisplayText } from '../../../../displayText';
 
 import { MOCK_DELETE_TASKS } from '../__testUtils__/tasks';
-import { STATUS_ICONS, STATUS_LABELS } from '../constants';
+import {
+  FILE_DATA_ITEM_TABLE_KEYS,
+  STATUS_ICONS,
+  STATUS_LABELS,
+} from '../constants';
 import { DeleteActionTask, DeleteTableResolverProps } from '../types';
-import { DELETE_TABLE_KEYS, DELETE_TABLE_RESOLVERS } from '../deleteResolvers';
+import { DELETE_TABLE_RESOLVERS } from '../deleteResolvers';
 
 const mockDisplayText: DeleteViewDisplayText = {
   tableColumnNameHeader: 'Name',
@@ -28,7 +32,7 @@ describe('DELETE_TABLE_RESOLVERS', () => {
   beforeEach(jest.clearAllMocks);
 
   describe('getCell', () => {
-    it.each(DELETE_TABLE_KEYS)(
+    it.each(FILE_DATA_ITEM_TABLE_KEYS)(
       'returns the expect cell `key` for a "%s" table `key`',
       (key) => {
         const data = {
@@ -235,7 +239,7 @@ describe('DELETE_TABLE_RESOLVERS', () => {
 
   describe('getHeader', () => {
     // filter out cancel, does not allow sorting
-    it.each(DELETE_TABLE_KEYS.filter((key) => key !== 'cancel'))(
+    it.each(FILE_DATA_ITEM_TABLE_KEYS.filter((key) => key !== 'cancel'))(
       'returns the expect header data for a %s column',
       (key) => {
         const data = { key, props: mockProps };

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

@@ -4,7 +4,7 @@ import {
   MOCK_UPLOAD_TASKS_SINGLE_PART,
 } from '../__testUtils__/tasks';
 import {
-  getCopyOrDeleteCancelCellContent,
+  getFileDataCancelCellContent,
   getFileSize,
   getFileType,
   getUploadCellFolder,
@@ -23,7 +23,7 @@ describe('table resolver utils', () => {
 
     it('returns the expected values for a QUEUED task prior to processing', () => {
       const item = tasks.QUEUED;
-      const output = getCopyOrDeleteCancelCellContent({
+      const output = getFileDataCancelCellContent({
         item,
         key: 'cancel',
         props: { ...props, isProcessing: false },
@@ -39,7 +39,7 @@ describe('table resolver utils', () => {
 
     it('returns the expected values for a QUEUED task during processing', () => {
       const item = tasks.QUEUED;
-      const output = getCopyOrDeleteCancelCellContent({
+      const output = getFileDataCancelCellContent({
         item,
         key: 'cancel',
         props: { ...props, isProcessing: true },
@@ -55,7 +55,7 @@ describe('table resolver utils', () => {
 
     it('returns the expected values for a PENDING task', () => {
       const item = tasks.PENDING;
-      const output = getCopyOrDeleteCancelCellContent({
+      const output = getFileDataCancelCellContent({
         item,
         key: 'cancel',
         props: { ...props, isProcessing: true },
@@ -71,7 +71,7 @@ describe('table resolver utils', () => {
 
     it('returns the expected values for a CANCELED task', () => {
       const item = tasks.CANCELED;
-      const output = getCopyOrDeleteCancelCellContent({
+      const output = getFileDataCancelCellContent({
         item,
         key: 'cancel',
         props: { ...props, isProcessing: true },
@@ -87,7 +87,7 @@ describe('table resolver utils', () => {
 
     it('returns the expected values for a COMPLETE task', () => {
       const item = tasks.COMPLETE;
-      const output = getCopyOrDeleteCancelCellContent({
+      const output = getFileDataCancelCellContent({
         item,
         key: 'cancel',
         props: { ...props, isProcessing: true },
@@ -103,7 +103,7 @@ describe('table resolver utils', () => {
 
     it('calls onTaskRemove with the expected values for a removable task', () => {
       const item = tasks.QUEUED;
-      const output = getCopyOrDeleteCancelCellContent({
+      const output = getFileDataCancelCellContent({
         item,
         key: 'cancel',
         props: { ...props, isProcessing: false },
@@ -131,7 +131,7 @@ describe('table resolver utils', () => {
 
     it('calls onTaskRemove with the expected values for a cancelable task', () => {
       const item = tasks.QUEUED;
-      const output = getCopyOrDeleteCancelCellContent({
+      const output = getFileDataCancelCellContent({
         item,
         key: 'cancel',
         props: { ...props, isProcessing: true },

packages/react-storage/src/components/StorageBrowser/views/utils/tableResolvers/constants.ts

@@ -15,3 +15,12 @@ export const STATUS_ICONS = {
   CANCELED: 'action-canceled',
   QUEUED: 'action-queued',
 } as const;
+
+export const FILE_DATA_ITEM_TABLE_KEYS = [
+  'name',
+  'folder',
+  'type',
+  'size',
+  'status',
+  'cancel',
+] as const;

packages/react-storage/src/components/StorageBrowser/views/utils/tableResolvers/copyResolvers.ts

@@ -1,73 +1,13 @@
 import { capitalize, noop } from '@aws-amplify/ui';
 
-import type { WithKey } from '../../../components/types';
 import { isCopyViewDisplayTextKey } from '../../../displayText';
 
-import { STATUS_ICONS, STATUS_LABELS } from './constants';
-import type {
-  CopyActionTask,
-  CopyTableKey,
-  CopyTaskTableResolvers,
-} from './types';
-import {
-  getCopyCellFolder,
-  getCopyOrDeleteCancelCellContent,
-  getFileSize,
-  getFileType,
-} from './utils';
+import { STATUS_LABELS } from './constants';
+import type { FileDataTaskTableResolvers, GetFileDataCell } from './types';
+import { cancel, folder, getFileDataCellKey, name, size, type } from './utils';
 
-export const COPY_TABLE_KEYS = [
-  'name',
-  'folder',
-  'type',
-  'size',
-  'status',
-  'cancel',
-] as const;
-
-type GetCopyTaskCell = CopyTaskTableResolvers['getCell'];
-
-const getCopyCellKey = ({
-  key,
-  item,
-}: WithKey<{ item: CopyActionTask }, CopyTableKey>) => `${key}-${item.data.id}`;
-
-const name: GetCopyTaskCell = (data) => {
-  const key = getCopyCellKey(data);
-
-  const { item } = data;
-  const text = item.data.fileKey;
-  const icon = STATUS_ICONS[item.status];
-
-  return { key, type: 'text', content: { icon, text } };
-};
-
-const folder: GetCopyTaskCell = (data) => {
-  const key = getCopyCellKey(data);
-  const text = getCopyCellFolder(data.item);
-
-  return { key, type: 'text', content: { text } };
-};
-
-const type: GetCopyTaskCell = (data) => {
-  const key = getCopyCellKey(data);
-  const { fileKey } = data.item.data;
-
-  const text = getFileType(fileKey);
-
-  return { key, type: 'text', content: { text } };
-};
-
-const size: GetCopyTaskCell = (data) => {
-  const key = getCopyCellKey(data);
-  const { size: value } = data.item.data;
-  const displayValue = getFileSize(value);
-
-  return { key, type: 'number', content: { value, displayValue } };
-};
-
-const status: GetCopyTaskCell = (data) => {
-  const key = getCopyCellKey(data);
+const status: GetFileDataCell = (data) => {
+  const key = getFileDataCellKey(data);
   const {
     item: { status },
     props: { displayText },
@@ -82,13 +22,6 @@ const status: GetCopyTaskCell = (data) => {
   return { key, type: 'text', content: { text } };
 };
 
-const cancel: GetCopyTaskCell = (data) => {
-  const key = getCopyCellKey(data);
-  const content = getCopyOrDeleteCancelCellContent(data);
-
-  return { key, type: 'button', content };
-};
-
 const COPY_CELL_RESOLVERS = {
   name,
   folder,
@@ -104,10 +37,10 @@ const COPY_CELL_RESOLVERS = {
    * keep TS happy as "progress" headers were included in display text interfaces
    * and cannot be removed from the tables without a breaking change
    */
-  progress: noop as GetCopyTaskCell,
+  progress: noop as GetFileDataCell,
 };
 
-export const COPY_TABLE_RESOLVERS: CopyTaskTableResolvers = {
+export const COPY_TABLE_RESOLVERS: FileDataTaskTableResolvers = {
   getCell: (data) => COPY_CELL_RESOLVERS[data.key](data),
   getHeader: ({ key, props: { displayText } }) => {
     const text = displayText[`tableColumn${capitalize(key)}Header`];