aws-amplify · cshfang · Nov 7, 2024 · Nov 6, 2024 · Nov 7, 2024 · Nov 7, 2024
@@ -15,7 +15,7 @@ export interface NavigationProps {
 export const Navigation = ({
   items,
 }: NavigationProps): React.JSX.Element | null => {
-  if (!items?.length) {
+  if (!items.length) {
     return null;
   }
 

@@ -17,7 +17,7 @@ const BLOCK_NAME = `${CLASS_BASE}__search`;
 const TOGGLE_BLOCK = 'toggle';
 
 export interface SearchProps {
-  onSearch: (term: string, includeSubfolders: boolean) => void;
+  onSearch?: (term: string, includeSubfolders: boolean) => void;
   searchPlaceholder?: string;
   showIncludeSubfolders?: boolean;
 }
@@ -47,7 +47,7 @@ export const Search = ({
         placeholder={searchPlaceholder}
         onKeyUp={(event) => {
           if (event.key === 'Enter') {
-            onSearch(term, subfoldersIncluded);
+            onSearch?.(term, subfoldersIncluded);
           }
         }}
         value={term}
@@ -58,7 +58,7 @@ export const Search = ({
             className={`${BLOCK_NAME}__field-clear-button`}
             onClick={() => {
               setTerm('');
-              onSearch('', subfoldersIncluded);
+              onSearch?.('', subfoldersIncluded);
             }}
             variant="refresh"
           >
@@ -68,7 +68,7 @@ export const Search = ({
       </Field>
       <ButtonElement
         className={`${BLOCK_NAME}__submit-button`}
-        onClick={() => onSearch(term, subfoldersIncluded)}
+        onClick={() => onSearch?.(term, subfoldersIncluded)}
       >
         Submit
       </ButtonElement>

@@ -10,7 +10,7 @@ export const DropZoneControl = ({
   className,
   children,
 }: ControlProps & { children: React.ReactNode }): React.JSX.Element | null => {
-  const { props } = useDropZone();
+  const props = useDropZone();
 
   const ResolvedDropZone = useResolvedComposable(DropZone, 'DropZone');
 

@@ -13,10 +13,6 @@ export const NavigationControl = ({
 
   const ResolvedNavigation = useResolvedComposable(Navigation, 'Navigation');
 
-  if (!props) {
-    return null;
-  }
-
   return (
     <ViewElement className={className}>
       <ResolvedNavigation {...props} />

@@ -13,10 +13,6 @@ export const SearchControl = ({
   const { showIncludeSubfolders, searchPlaceholder } = data;
   const ResolvedSearch = useResolvedComposable(Search, 'Search');
 
-  if (!onSearch) {
-    return null;
-  }
-
   return (
     <ViewElement className={className}>
       <ResolvedSearch

@@ -16,10 +16,6 @@ export const StatusDisplayControl = ({
     'StatusDisplay'
   );
 
-  if (!props) {
-    return null;
-  }
-
   return (
     <ViewElement className={className}>
       <ResolvedStatusDisplay {...props} />

@@ -41,12 +41,4 @@ describe('NavigationControl', () => {
     expect(item1).toHaveTextContent('Item 1');
     expect(item2).toHaveTextContent('Item 2');
   });
-
-  it('returns null without props', () => {
-    mockUseNavigation.mockReturnValue(null);
-
-    render(<NavigationControl />);
-
-    expect(screen.queryByRole('navigation')).not.toBeInTheDocument();
-  });
 });
@@ -1,10 +1,7 @@
 import { createContextUtilities } from '@aws-amplify/ui-react-core';
 import { ControlsContext } from './types';
 
-const defaultValue = {
-  data: {},
-  actionsConfig: {},
-} as ControlsContext;
+const defaultValue = { data: {} } as ControlsContext;
 
 export const { useControlsContext, ControlsContextProvider } =
   createContextUtilities({

@@ -8,10 +8,6 @@ describe('useActionCancel', () => {
       actionCancelLabel: 'Cancel',
       isActionCancelDisabled: false,
     },
-    actionsConfig: {
-      isCancelable: true,
-      type: 'BATCH_ACTION',
-    },
     onActionCancel: jest.fn(),
   };
   const useControlsContextSpy = jest.spyOn(

@@ -7,10 +7,6 @@ describe('useActionStart', () => {
     data: {
       actionStartLabel: 'Start',
     },
-    actionsConfig: {
-      isCancelable: true,
-      type: 'BATCH_ACTION',
-    },
     onActionStart: jest.fn(),
   };
 

@@ -19,12 +19,10 @@ describe('useDropZone', () => {
     });
 
     const result = useDropZone();
-    result.props!.onDropComplete!(files);
+    result.onDropComplete?.(files);
 
     expect(result).toStrictEqual({
-      props: {
-        onDropComplete: expect.any(Function),
-      },
+      onDropComplete: expect.any(Function),
     });
     expect(mockOnDropFiles).toHaveBeenCalledWith(files);
   });

@@ -57,12 +57,12 @@ describe('useNavigation', () => {
     });
   });
 
-  it('returns null if current location is undefined', () => {
+  it('returns empty items if current location is undefined', () => {
     mockUseControlsContext.mockReturnValue({ data: {} });
 
     const { result } = renderHook(() => useNavigation());
 
-    expect(result.current).toBeNull();
+    expect(result.current).toStrictEqual({ items: [] });
   });
 
   it('calls onNavigateHome', () => {

@@ -0,0 +1,61 @@
+import { useControlsContext } from '../../../controls/context';
+import { useStatusDisplay } from '../useStatusDisplay';
+
+jest.mock('../../../controls/context');
+
+describe('useStatusDisplay', () => {
+  const data = {
+    statusCounts: {
+      CANCELED: 2,
+      COMPLETE: 4,
+      FAILED: 3,
+      PENDING: 0,
+      QUEUED: 1,
+      TOTAL: 10,
+    },
+  };
+
+  // assert mocks
+  const mockUseControlsContext = useControlsContext as jest.Mock;
+
+  afterEach(() => {
+    mockUseControlsContext.mockReset();
+  });
+
+  it('returns useStatusDisplay data', () => {
+    mockUseControlsContext.mockReturnValue({ data });
+
+    expect(useStatusDisplay()).toStrictEqual({
+      statuses: [
+        expect.objectContaining({ count: 4 }),
+        expect.objectContaining({ count: 3 }),
+        expect.objectContaining({ count: 2 }),
+        expect.objectContaining({ count: 1 }),
+      ],
+      total: 10,
+    });
+  });
+
+  it('returns default values if statusCounts is undefined', () => {
+    mockUseControlsContext.mockReturnValue({ data: {} });
+
+    expect(useStatusDisplay()).toStrictEqual({ statuses: [], total: 0 });
+  });
+
+  it('returns default values if statusCounts total is 0', () => {
+    mockUseControlsContext.mockReturnValue({
+      data: {
+        statusCounts: {
+          CANCELED: 0,
+          COMPLETE: 0,
+          FAILED: 0,
+          PENDING: 0,
+          QUEUED: 0,
+          TOTAL: 0,
+        },
+      },
+    });
+
+    expect(useStatusDisplay()).toStrictEqual({ statuses: [], total: 0 });
+  });
+});
@@ -1,22 +1,12 @@
 import { DropZoneProps } from '../../composables/DropZone';
 import { useControlsContext } from '../../controls/context';
 
-export type UseDropZone = () => {
-  props?: {
-    onDropComplete: DropZoneProps['onDropComplete'];
-  };
-};
-
 /**
  * This hook, not to be confused with the useDropZone vended from @aws-amplify/ui-react-core, is only intended for use
  * with its corresponding DropZone control.
  */
-export const useDropZone: UseDropZone = () => {
+export const useDropZone = (): Pick<DropZoneProps, 'onDropComplete'> => {
   const { onDropFiles } = useControlsContext();
 
-  return {
-    props: {
-      onDropComplete: onDropFiles,
-    },
-  };
+  return { onDropComplete: onDropFiles };
 };
@@ -2,13 +2,13 @@ import React from 'react';
 import { NavigationProps } from '../../composables/Navigation';
 import { useControlsContext } from '../../controls/context';
 
-export const useNavigation = (): NavigationProps | null => {
+export const useNavigation = (): NavigationProps => {
   const { data, onNavigate, onNavigateHome } = useControlsContext();
   const { currentLocation, currentPath = '' } = data;
 
   return React.useMemo(() => {
     if (!currentLocation) {
-      return null;
+      return { items: [] };
     }
 
     const { bucket, permission, prefix = '', type } = currentLocation;