remove ActionType to allow for upload view support in getActionViewTa…

…bleData, update Table cell types to include key in base definition
aws-amplify · Nov 7, 2024 · 49dfe0c · 49dfe0c
1 parent 22759c5
commit 49dfe0c
Show file tree

Hide file tree

Showing 14 changed files with 65 additions and 57 deletions.
diff --git a/packages/react-storage/jest.config.ts b/packages/react-storage/jest.config.ts
@@ -16,10 +16,10 @@ const config: Config = {
       // functions: 90,
       // lines: 95,
       // statements: 95,
-      branches: 81,
-      functions: 85.8,
+      branches: 81.5,
+      functions: 86.5,
       lines: 93,
-      statements: 92.7,
+      statements: 93,
     },
   },
   moduleNameMapper: { '^uuid$': '<rootDir>/../../node_modules/uuid' },

diff --git a/packages/react-storage/src/components/StorageBrowser/actions/types.ts b/packages/react-storage/src/components/StorageBrowser/actions/types.ts
@@ -1,7 +1,10 @@
+import { DataState } from '@aws-amplify/ui-react-core';
 import { LocationCredentialsProvider } from '../storage-internal';
 
-import { ActionState } from '../do-not-import-from-here/actions/createActionStateContext';
-import { FileData } from './handlers';
+export type ActionState<T = any, K = any> = [
+  state: DataState<T>,
+  handleAction: (...input: K[]) => void,
+];
 
 export interface ActionInputConfig {
   accountId?: string;
@@ -22,8 +25,6 @@ export interface TaskData {
   id: string;
 }
 
-export interface ActionData extends TaskData, FileData {}
-
 export interface TaskHandlerOptions {
   onProgress?: (
     data: { key: string; id: string },

diff --git a/packages/react-storage/src/components/StorageBrowser/composables/DataTable/DataTable.tsx b/packages/react-storage/src/components/StorageBrowser/composables/DataTable/DataTable.tsx
@@ -13,11 +13,11 @@ import { WithKey } from '../../components/types';
 import { CheckboxHeader } from './headers/CheckboxHeader';
 
 export interface DataTableRow {
-  content: WithKey<DataTableDataCell>[];
+  content: DataTableDataCell[];
 }
 
 export interface DataTableProps {
-  headers: WithKey<DataTableHeader>[];
+  headers: DataTableHeader[];
   rows: WithKey<DataTableRow>[];
 }
 

diff --git a/packages/react-storage/src/components/StorageBrowser/composables/DataTable/types.ts b/packages/react-storage/src/components/StorageBrowser/composables/DataTable/types.ts
@@ -6,16 +6,17 @@ import { CheckboxDataCellProps } from './dataCells/CheckboxDataCell';
 import { DateDataCellProps } from './dataCells/DateDataCell';
 import { NumberDataCellProps } from './dataCells/NumberDataCell';
 import { TextDataCellProps } from './dataCells/TextDataCell';
+import { WithKey } from '../../components/types';
 
-export interface DataTableCheckboxHeader extends CheckboxHeaderProps {
+export interface DataTableCheckboxHeader extends WithKey<CheckboxHeaderProps> {
   type: 'checkbox';
 }
 
-export interface DataTableSortHeader extends SortHeaderProps {
+export interface DataTableSortHeader extends WithKey<SortHeaderProps> {
   type: 'sort';
 }
 
-export interface DataTableTextHeader extends TextHeaderProps {
+export interface DataTableTextHeader extends WithKey<TextHeaderProps> {
   type: 'text';
 }
 
@@ -24,23 +25,24 @@ export type DataTableHeader =
   | DataTableSortHeader
   | DataTableTextHeader;
 
-export interface DataTableButtonDataCell extends ButtonDataCellProps {
+export interface DataTableButtonDataCell extends WithKey<ButtonDataCellProps> {
   type: 'button';
 }
 
-export interface DataTableCheckboxDataCell extends CheckboxDataCellProps {
+export interface DataTableCheckboxDataCell
+  extends WithKey<CheckboxDataCellProps> {
   type: 'checkbox';
 }
 
-export interface DataTableDateDataCell extends DateDataCellProps {
+export interface DataTableDateDataCell extends WithKey<DateDataCellProps> {
   type: 'date';
 }
 
-export interface DataTableNumberDataCell extends NumberDataCellProps {
+export interface DataTableNumberDataCell extends WithKey<NumberDataCellProps> {
   type: 'number';
 }
 
-export interface DataTableTextDataCell extends TextDataCellProps {
+export interface DataTableTextDataCell extends WithKey<TextDataCellProps> {
   type: 'text';
 }
 

diff --git a/...c/components/StorageBrowser/controls/compareFunctions/__tests__/compareButtonData.spec.ts b/...c/components/StorageBrowser/controls/compareFunctions/__tests__/compareButtonData.spec.ts
@@ -2,7 +2,7 @@ import { SortDirection } from '../../../composables/DataTable';
 import { compareButtonData } from '../compareButtonData';
 
 describe('compareButtonData', () => {
-  const emptyContent = { type: 'button' as const, content: {} };
+  const emptyContent = { type: 'button' as const, key: '', content: {} };
   const a = { ...emptyContent, content: { label: 'a' } };
   const b = { ...emptyContent, content: { label: 'b' } };
   const getComparisonResults = (direction: SortDirection) => [

diff --git a/...src/components/StorageBrowser/controls/compareFunctions/__tests__/compareDateData.spec.ts b/...src/components/StorageBrowser/controls/compareFunctions/__tests__/compareDateData.spec.ts
@@ -2,7 +2,7 @@ import { SortDirection } from '../../../composables/DataTable';
 import { compareDateData } from '../compareDateData';
 
 describe('compareDateData', () => {
-  const emptyContent = { type: 'date' as const, content: {} };
+  const emptyContent = { type: 'date' as const, key: '', content: {} };
   const a = { ...emptyContent, content: { date: new Date(1600387200000) } };
   const b = { ...emptyContent, content: { date: new Date(1702339200000) } };
   const getComparisonResults = (direction: SortDirection) => [

diff --git a/...c/components/StorageBrowser/controls/compareFunctions/__tests__/compareNumberData.spec.ts b/...c/components/StorageBrowser/controls/compareFunctions/__tests__/compareNumberData.spec.ts
@@ -2,7 +2,7 @@ import { SortDirection } from '../../../composables/DataTable';
 import { compareNumberData } from '../compareNumberData';
 
 describe('compareNumberData', () => {
-  const emptyContent = { type: 'number' as const, content: {} };
+  const emptyContent = { type: 'number' as const, key: '', content: {} };
   const a = { ...emptyContent, content: { value: 1 } };
   const b = { ...emptyContent, content: { value: 2 } };
   const getComparisonResults = (direction: SortDirection) => [

diff --git a/...src/components/StorageBrowser/controls/compareFunctions/__tests__/compareTextData.spec.ts b/...src/components/StorageBrowser/controls/compareFunctions/__tests__/compareTextData.spec.ts
@@ -2,7 +2,7 @@ import { SortDirection } from '../../../composables/DataTable';
 import { compareTextData } from '../compareTextData';
 
 describe('compareTextData', () => {
-  const emptyContent = { type: 'text' as const, content: {} };
+  const emptyContent = { type: 'text' as const, key: '', content: {} };
   const a = { ...emptyContent, content: { text: 'a' } };
   const b = { ...emptyContent, content: { text: 'b' } };
   const getComparisonResults = (direction: SortDirection) => [

diff --git a/packages/react-storage/src/components/StorageBrowser/providers/index.ts b/packages/react-storage/src/components/StorageBrowser/providers/index.ts
@@ -6,6 +6,7 @@ export {
 export {
   FileItem,
   FileItems,
+  isFileItem,
   StoreProviderProps,
   StoreProvider,
 } from './store';
diff --git a/packages/react-storage/src/components/StorageBrowser/providers/store/files/index.ts b/packages/react-storage/src/components/StorageBrowser/providers/store/files/index.ts
@@ -1,2 +1,3 @@
 export { FilesProvider, FilesContext, useFiles } from './context';
+export { isFileItem } from './utils';
 export * from './types';
diff --git a/packages/react-storage/src/components/StorageBrowser/providers/store/files/utils.ts b/packages/react-storage/src/components/StorageBrowser/providers/store/files/utils.ts
@@ -72,3 +72,6 @@ export const parseFileSelectParams = (
   const [selectType, ...rest] = value;
   return [selectType, !rest?.length ? undefined : { accept: rest.join() }];
 };
+
+export const isFileItem = (value: unknown): value is FileItem =>
+  !!(value as FileItem).file;
diff --git a/packages/react-storage/src/components/StorageBrowser/providers/store/index.ts b/packages/react-storage/src/components/StorageBrowser/providers/store/index.ts
@@ -1,3 +1,3 @@
-export { FileItem, FileItems } from './files';
+export { FileItem, FileItems, isFileItem } from './files';
 export { StoreProvider, StoreProviderProps } from './StoreProvider';
 export { useStore, UseStoreState } from './useStore';
diff --git a/...onents/StorageBrowser/views/LocationActionView/__tests__/__snapshots__/utils.spec.ts.snap b/...onents/StorageBrowser/views/LocationActionView/__tests__/__snapshots__/utils.spec.ts.snap
@@ -154,6 +154,7 @@ exports[`getActionViewTableData should have remove handler on queued files 1`] =
         "content": {
           "ariaLabel": "Remove item: folder/subfolder/file1.txt",
           "icon": "cancel",
+          "isDisabled": false,
           "onClick": [MockFunction],
         },
         "key": "action-1",

diff --git a/packages/react-storage/src/components/StorageBrowser/views/LocationActionView/utils.ts b/packages/react-storage/src/components/StorageBrowser/views/LocationActionView/utils.ts
@@ -1,13 +1,18 @@
 import { humanFileSize, isUndefined } from '@aws-amplify/ui';
 
-import { DataTableProps } from '../../composables/DataTable';
+import {
+  DataTableButtonDataCell,
+  DataTableProps,
+} from '../../composables/DataTable';
 import { DataTableRow } from '../../composables/DataTable/DataTable';
 import { IconVariant } from '../../context/elements';
 import { WithKey } from '../../components/types';
 import { Task, TaskStatus } from '../../tasks';
 
 import { STATUS_DISPLAY_VALUES } from './constants';
-import { ActionData } from '../../actions/types';
+
+import { FileItem, isFileItem } from '../../providers';
+import { FileData } from '../../actions/handlers';
 
 const DELETE_ACTION_VIEW_HEADERS: DataTableProps['headers'] = [
   { key: 'key', type: 'sort', content: { label: 'Name' } },
@@ -43,15 +48,13 @@ export const getFilenameWithoutPrefix = (path: string): string => {
   const folder = path.lastIndexOf('/') + 1;
   return path.slice(folder, path.length);
 };
-// type GetDataTableButtonDataCell<T extends TaskData> = (task: Task<T>) =>DataTableButtonDataCell
-export const getActionViewTableData = <T extends ActionData>({
-  tasks,
 
+export const getActionViewTableData = <T extends FileItem | FileData>({
+  tasks,
   path,
   isProcessing,
 }: {
   tasks: Task<T>[];
-
   path: string;
   isProcessing: boolean;
 }): DataTableProps => {
@@ -81,44 +84,40 @@ export const getActionViewTableData = <T extends ActionData>({
               content: { text: getFileTypeDisplayValue(item.data.key) },
             };
           }
-          case 'size':
+          case 'size': {
+            const value = isFileItem(item.data)
+              ? item.data.file.size
+              : item.data.size;
             return {
               key,
               type: 'number',
-              content: {
-                value: item.data.size,
-                displayValue: humanFileSize(item.data.size, true),
-              },
+              content: { value, displayValue: humanFileSize(value, true) },
             };
-          case 'status':
+          }
+          case 'status': {
             return {
               key,
               type: 'text',
               content: { text: STATUS_DISPLAY_VALUES[item.status] },
             };
-          case 'action':
-            return isProcessing
-              ? {
-                  key,
-                  type: 'button',
-                  content: {
-                    icon: 'cancel',
-                    ariaLabel: `Cancel item: ${item.data.key}`,
-                    onClick: item.cancel,
-                    isDisabled:
-                      isUndefined(item.cancel) ||
-                      (item.status !== 'PENDING' && item.status !== 'QUEUED'),
-                  },
-                }
-              : {
-                  key,
-                  type: 'button',
-                  content: {
-                    icon: 'cancel',
-                    ariaLabel: `Remove item: ${item.data.key}`,
-                    onClick: item.remove,
-                  },
-                };
+          }
+          case 'action': {
+            const isDisabled =
+              (isProcessing && isUndefined(item.cancel)) ||
+              (item.status !== 'PENDING' && item.status !== 'QUEUED');
+            const onClick = isProcessing ? item.cancel : item.remove;
+            const ariaLabel = `${isProcessing ? 'Cancel' : 'Remove'} item: ${
+              item.data.key
+            }`;
+
+            const buttonCell: DataTableButtonDataCell = {
+              key,
+              type: 'button',
+              content: { isDisabled, onClick, ariaLabel, icon: 'cancel' },
+            };
+
+            return buttonCell;
+          }
 
           default:
             return { key, type: 'text', content: { text: '' } };