Merge branch 'feat-storage-browser/main' into feat-storage-browser/ad…

…d-display-text
aws-amplify · Nov 8, 2024 · a5ca9f0 · a5ca9f0
2 parents f58db68 + 7f22edd
commit a5ca9f0
Show file tree

Hide file tree

Showing 16 changed files with 181 additions and 252 deletions.
diff --git a/...ges/react-storage/src/components/StorageBrowser/actions/handlers/__tests__/upload.spec.ts b/...ges/react-storage/src/components/StorageBrowser/actions/handlers/__tests__/upload.spec.ts
@@ -71,6 +71,7 @@ describe('uploadHandler', () => {
         locationCredentialsProvider: credentials,
         onProgress: expect.any(Function),
         preventOverwrite: true,
+        checksumAlgorithm: 'crc-32',
       },
       path: `${baseInput.destinationPrefix}${baseInput.data.key}`,
     };

diff --git a/packages/react-storage/src/components/StorageBrowser/actions/handlers/upload.ts b/packages/react-storage/src/components/StorageBrowser/actions/handlers/upload.ts
@@ -67,6 +67,7 @@ export const uploadHandler: UploadHandler = ({
       },
       preventOverwrite,
       customEndpoint,
+      checksumAlgorithm: 'crc-32',
     },
   };
 

diff --git a/packages/react-storage/src/components/StorageBrowser/views/Controls/Paginate.tsx b/packages/react-storage/src/components/StorageBrowser/views/Controls/Paginate.tsx
@@ -23,13 +23,7 @@ const getButtonVariantProps = (
   variant: PaginateVariant,
   props: PaginateControlProps
 ): ButtonElementProps => {
-  const {
-    currentPage,
-    disableNext,
-    disablePrevious,
-    handleNext,
-    handlePrevious,
-  } = props;
+  const { currentPage, hasMorePages, onPaginate, highestPageVisited } = props;
 
   let ariaCurrent, ariaLabel, className, disabled, onClick, children;
 
@@ -48,17 +42,25 @@ const getButtonVariantProps = (
     case 'paginate-next':
       ariaLabel = 'Go to next page';
       className = `${BLOCK_NAME}__button-next`;
-      disabled = disableNext;
-      onClick = handleNext;
+      disabled =
+        !!currentPage &&
+        !!highestPageVisited &&
+        currentPage >= highestPageVisited &&
+        !hasMorePages;
+      onClick = () => {
+        if (currentPage && onPaginate) onPaginate(currentPage + 1);
+      };
       children = (
         <IconElement variant={variant} className={`${BLOCK_NAME}__icon`} />
       );
       break;
     case 'paginate-previous':
       ariaLabel = 'Go to previous page';
       className = `${BLOCK_NAME}__button-next`;
-      disabled = disablePrevious;
-      onClick = handlePrevious;
+      disabled = !!currentPage && currentPage <= 1;
+      onClick = () => {
+        if (currentPage && onPaginate) onPaginate(currentPage - 1);
+      };
       children = (
         <IconElement variant={variant} className={`${BLOCK_NAME}__icon`} />
       );
@@ -83,13 +85,11 @@ export interface PaginateControlProps {
   // eslint-disable-next-line react/no-unused-prop-types
   currentPage?: number;
   // eslint-disable-next-line react/no-unused-prop-types
-  disableNext?: boolean;
+  onPaginate?: (page: number) => void;
   // eslint-disable-next-line react/no-unused-prop-types
-  disablePrevious?: boolean;
+  highestPageVisited?: number;
   // eslint-disable-next-line react/no-unused-prop-types
-  handleNext?: () => void;
-  // eslint-disable-next-line react/no-unused-prop-types
-  handlePrevious?: () => void;
+  hasMorePages?: boolean;
 }
 
 export const PaginateControl = (

diff --git a/...es/react-storage/src/components/StorageBrowser/views/Controls/__tests__/Paginate.spec.tsx b/...es/react-storage/src/components/StorageBrowser/views/Controls/__tests__/Paginate.spec.tsx
@@ -4,7 +4,14 @@ import { PaginateControl } from '../Paginate';
 
 describe('PaginationControl', () => {
   it('renders the PaginationControl', async () => {
-    render(<PaginateControl />);
+    render(
+      <PaginateControl
+        currentPage={1}
+        onPaginate={jest.fn()}
+        highestPageVisited={10}
+        hasMorePages={false}
+      />
+    );
 
     const nav = screen.getByRole('navigation', {
       name: 'Pagination',

diff --git a/...ews/LocationActionView/CopyView/__tests__/__snapshots__/useDestinationPicker.spec.ts.snap b/...ews/LocationActionView/CopyView/__tests__/__snapshots__/useDestinationPicker.spec.ts.snap
@@ -4,17 +4,14 @@ exports[`useDestinationPicker should return the correct initial state 1`] = `
 {
   "bucket": "bucket",
   "currentPage": 1,
-  "handleNext": [Function],
-  "handlePrevious": [Function],
   "hasError": false,
   "hasNextToken": false,
+  "highestPageVisited": 0,
   "isLoading": true,
   "items": [],
   "message": undefined,
+  "onPaginate": [Function],
   "onSearch": [Function],
-  "range": [
-    0,
-    10,
-  ],
+  "pageItems": [],
 }
 `;
diff --git a/...e/src/components/StorageBrowser/views/LocationActionView/CopyView/useDestinationPicker.ts b/...e/src/components/StorageBrowser/views/LocationActionView/CopyView/useDestinationPicker.ts
@@ -3,6 +3,7 @@ import { usePaginate } from '../../hooks/usePaginate';
 import {
   listLocationItemsHandler,
   ListLocationItemsHandlerOutput,
+  LocationItemData,
 } from '../../../actions';
 import { useGetActionInput } from '../../../providers/configuration';
 import { getDestinationListFullPrefix } from '../utils/getDestinationPickerDataTable';
@@ -34,12 +35,12 @@ export const useDestinationPicker = ({
   hasNextToken: boolean;
   currentPage: number;
   isLoading: boolean;
+  highestPageVisited: number;
   hasError: boolean;
   message: string | undefined;
-  handleNext: () => void;
-  handlePrevious: () => void;
+  pageItems: LocationItemData[];
+  onPaginate: (page: number) => void;
   onSearch: (query: string) => void;
-  range: [number, number];
 } => {
   const prefix = getDestinationListFullPrefix(destinationList);
 
@@ -55,21 +56,22 @@ export const useDestinationPicker = ({
 
   const { items, nextToken } = data;
 
-  const resultCount = items.length;
   const hasNextToken = !!nextToken;
 
-  const onPaginateNext = () => {
+  const paginateCallback = () => {
     handleList({
       config: getInput(),
       prefix,
       options: { ...DEFAULT_LIST_OPTIONS, nextToken },
     });
   };
 
-  const { currentPage, handlePaginateNext, handlePaginatePrevious, range } =
+  const { currentPage, onPaginate, highestPageVisited, pageItems } =
     usePaginate({
-      onPaginateNext,
+      items,
+      paginateCallback,
       pageSize: 10,
+      hasNextToken,
     });
 
   useEffect(() => {
@@ -90,14 +92,11 @@ export const useDestinationPicker = ({
     hasNextToken,
     currentPage,
     isLoading,
+    highestPageVisited,
     hasError,
     message,
-    handleNext: () => {
-      handlePaginateNext({ resultCount, hasNextToken });
-    },
-    handlePrevious: () => {
-      handlePaginatePrevious();
-    },
+    pageItems,
+    onPaginate,
     onSearch: (query: string) => {
       handleList({
         config: getInput(),
@@ -108,6 +107,5 @@ export const useDestinationPicker = ({
         },
       });
     },
-    range,
   };
 };
diff --git a/...eact-storage/src/components/StorageBrowser/views/LocationActionView/DestinationPicker.tsx b/...eact-storage/src/components/StorageBrowser/views/LocationActionView/DestinationPicker.tsx
@@ -42,14 +42,14 @@ export const DestinationPicker = ({
   const {
     bucket,
     items,
+    highestPageVisited,
     hasNextToken,
     currentPage,
     isLoading,
     hasError,
-    handleNext,
-    handlePrevious,
+    onPaginate,
     onSearch,
-    range,
+    pageItems,
   } = useDestinationPicker({ destinationList });
 
   const handleNavigateFolder = (key: string) => {
@@ -62,15 +62,6 @@ export const DestinationPicker = ({
     onDestinationChange(newPath);
   };
 
-  const pageItems = React.useMemo(() => {
-    const [start, end] = range;
-    return items.slice(start, end);
-  }, [range, items]);
-
-  const disableNext =
-    !hasNextToken && currentPage * DEFAULT_PAGE_SIZE > items.length;
-  const disablePrevious = currentPage === 1;
-
   const tableData = getDestinationPickerTableData({
     items: pageItems,
     handleNavigateFolder,
@@ -122,10 +113,9 @@ export const DestinationPicker = ({
         <SearchControl />
         <PaginateControl
           currentPage={currentPage}
-          disableNext={disableNext}
-          disablePrevious={disablePrevious}
-          handleNext={handleNext}
-          handlePrevious={handlePrevious}
+          hasMorePages={hasNextToken}
+          onPaginate={onPaginate}
+          highestPageVisited={highestPageVisited}
         />
       </ViewElement>
       <ViewElement className="storage-browser__table-wrapper">

diff --git a/...act-storage/src/components/StorageBrowser/views/LocationDetailView/LocationDetailView.tsx b/...act-storage/src/components/StorageBrowser/views/LocationDetailView/LocationDetailView.tsx
@@ -67,9 +67,9 @@ export function LocationDetailView({
   const {
     page,
     pageItems,
+    hasNextPage,
+    highestPageVisited,
     isLoading,
-    isPaginatePreviousDisabled,
-    isPaginateNextDisabled,
     currentLocation,
     currentPath,
     areAllFilesSelected,
@@ -82,8 +82,7 @@ export function LocationDetailView({
     showIncludeSubfolders,
     onDropFiles,
     onRefresh,
-    onPaginateNext,
-    onPaginatePrevious,
+    onPaginate,
     onDownload,
     onNavigate,
     onNavigateHome,
@@ -133,10 +132,9 @@ export function LocationDetailView({
           />
           <Paginate
             currentPage={page}
-            disableNext={isPaginateNextDisabled}
-            disablePrevious={isPaginatePreviousDisabled}
-            handleNext={onPaginateNext}
-            handlePrevious={onPaginatePrevious}
+            onPaginate={onPaginate}
+            hasMorePages={hasNextPage}
+            highestPageVisited={highestPageVisited}
           />
           <DataRefreshControl
             className={`${CLASS_BASE}__locations-detail-view-data-refresh`}

diff --git a/...mponents/StorageBrowser/views/LocationDetailView/__tests__/useLocationDetailView.spec.tsx b/...mponents/StorageBrowser/views/LocationDetailView/__tests__/useLocationDetailView.spec.tsx
@@ -191,8 +191,6 @@ describe('useLocationDetailView', () => {
       useLocationDetailView(initialValues)
     );
 
-    expect(result.current.isPaginateNextDisabled).toBe(true);
-    expect(result.current.isPaginatePreviousDisabled).toBe(true);
     expect(result.current.pageItems).toEqual([]);
 
     // set up first page mock
@@ -223,32 +221,28 @@ describe('useLocationDetailView', () => {
 
     // go next
     act(() => {
-      result.current.onPaginateNext();
+      result.current.onPaginate(2);
     });
 
     // check if data is correct
     expect(result.current.page).toEqual(2);
-    expect(result.current.isPaginateNextDisabled).toBe(true);
-    expect(result.current.isPaginatePreviousDisabled).toBe(false);
     expect(result.current.pageItems).toEqual(testData.slice(3));
 
     // go previous
     act(() => {
-      result.current.onPaginatePrevious();
+      result.current.onPaginate(1);
     });
 
     // check data
     expect(result.current.page).toEqual(1);
-    expect(result.current.isPaginateNextDisabled).toBe(false);
-    expect(result.current.isPaginatePreviousDisabled).toBe(true);
     expect(result.current.pageItems).toEqual(testData.slice(0, 3));
   });
 
   it('should handle refreshing location data', () => {
     useStoreSpy.mockReturnValue([testStoreState, mockDispatchStoreAction]);
 
     const mockDataState = {
-      data: { items: [], nextToken: undefined },
+      data: { result: [], nextToken: 'token123' },
       message: '',
       hasError: false,
       isLoading: false,
@@ -260,7 +254,7 @@ describe('useLocationDetailView', () => {
 
     // move to next page to check behavior
     act(() => {
-      result.current.onPaginateNext();
+      result.current.onPaginate(2);
     });
     expect(result.current.page).toEqual(2);
-Original file line number
+Diff line change
@@ Expand Up / @@ -67,6 +67,7 @@ export const uploadHandler: UploadHandler = ({ @@
           },
           preventOverwrite,
           customEndpoint,
+          checksumAlgorithm: 'crc-32',
         },
       };
@@ Expand Down @@