fix: missing search in detail view (#6023)

aws-amplify · Nov 7, 2024 · 9f78d59 · 9f78d59
1 parent 7f09467
commit 9f78d59
Show file tree

Hide file tree

Showing 5 changed files with 93 additions and 10 deletions.
diff --git a/packages/react-storage/src/components/StorageBrowser/composables/Search.tsx b/packages/react-storage/src/components/StorageBrowser/composables/Search.tsx
@@ -74,13 +74,13 @@ export const Search = ({
       </ButtonElement>
       {showIncludeSubfolders ? (
         <SpanElement className={`${BLOCK_NAME}-${TOGGLE_BLOCK}__container`}>
-          <InputElement
-            checked={subfoldersIncluded}
-            className={`${BLOCK_NAME}-${TOGGLE_BLOCK}__checkbox`}
-            onChange={() => setSubfoldersIncluded(!subfoldersIncluded)}
-            type="checkbox"
-          />
           <LabelElement className={`${BLOCK_NAME}-${TOGGLE_BLOCK}__label`}>
+            <InputElement
+              checked={subfoldersIncluded}
+              className={`${BLOCK_NAME}-${TOGGLE_BLOCK}__checkbox`}
+              onChange={() => setSubfoldersIncluded(!subfoldersIncluded)}
+              type="checkbox"
+            />
             Include subfolders
           </LabelElement>
         </SpanElement>

diff --git a/...c/components/StorageBrowser/views/LocationActionView/__tests__/CopyFilesControls.spec.tsx b/...c/components/StorageBrowser/views/LocationActionView/__tests__/CopyFilesControls.spec.tsx
@@ -1,10 +1,12 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import * as UseCopyViewModule from '../CopyView/useCopyView';
-import * as Config from '../../../providers/configuration';
-
 import userEvent from '@testing-library/user-event';
+
+import * as AmplifyReactCore from '@aws-amplify/ui-react-core';
+
 import * as TempActions from '../../../do-not-import-from-here/createTempActionsProvider';
+import * as UseCopyViewModule from '../CopyView/useCopyView';
+import * as Config from '../../../providers/configuration';
 import { CopyFilesControls } from '../CopyFilesControls';
 
 const TEST_ACTIONS = {
@@ -15,13 +17,29 @@ const TEST_ACTIONS = {
 
 jest.spyOn(TempActions, 'useTempActions').mockReturnValue(TEST_ACTIONS);
 const useCopyViewSpy = jest.spyOn(UseCopyViewModule, 'useCopyView');
+const useDataSpy = jest.spyOn(AmplifyReactCore, 'useDataState');
 
 describe('CopyFilesControls', () => {
   const onExitMock = jest.fn();
   const onActionCancelMock = jest.fn();
   const onActionStartMock = jest.fn();
   const onSetDestinationList = jest.fn();
 
+  beforeAll(() => {
+    useDataSpy.mockReturnValue([
+      {
+        data: {
+          items: [{ id: '1', key: 'Location A', type: 'FOLDER' }],
+          nextToken: undefined,
+        },
+        message: '',
+        hasError: false,
+        isLoading: false,
+      },
+      jest.fn(),
+    ]);
+  });
+
   beforeEach(() => {
     jest.clearAllMocks();
     useCopyViewSpy.mockReturnValue({
@@ -98,8 +116,9 @@ describe('CopyFilesControls', () => {
   });
 
   it('renders all controls', () => {
-    const { getByRole } = render(<CopyFilesControls />);
+    const { getByRole, getByPlaceholderText } = render(<CopyFilesControls />);
 
+    expect(getByPlaceholderText('Search for folders')).toBeInTheDocument();
     expect(getByRole('button', { name: 'Exit' })).toBeInTheDocument();
     expect(getByRole('button', { name: 'Start' })).toBeInTheDocument();
     expect(getByRole('button', { name: 'Cancel' })).toBeInTheDocument();

diff --git a/...act-storage/src/components/StorageBrowser/views/LocationDetailView/LocationDetailView.tsx b/...act-storage/src/components/StorageBrowser/views/LocationDetailView/LocationDetailView.tsx
@@ -78,6 +78,8 @@ export function LocationDetailView({
     hasError,
     message,
     shouldShowEmptyMessage,
+    searchPlaceholder,
+    showIncludeSubfolders,
     onDropFiles,
     onRefresh,
     onPaginateNext,
@@ -87,6 +89,7 @@ export function LocationDetailView({
     onNavigateHome,
     onSelect,
     onSelectAll,
+    onSearch,
   } = useLocationDetailView({ onNavigate: onNavigateProp, onExit });
 
   return (
@@ -99,6 +102,8 @@ export function LocationDetailView({
           isDataRefreshDisabled: isLoading,
           currentLocation,
           currentPath,
+          searchPlaceholder,
+          showIncludeSubfolders,
           tableData: getLocationDetailViewTableData({
             areAllFilesSelected,
             currentLocation,
@@ -116,6 +121,7 @@ export function LocationDetailView({
         onNavigate={onNavigate}
         onNavigateHome={onNavigateHome}
         onRefresh={onRefresh}
+        onSearch={onSearch}
       >
         <NavigationControl
           className={`${CLASS_BASE}__location-detail-view-navigation`}

diff --git a/.../components/StorageBrowser/views/LocationDetailView/__tests__/LocationDetailView.spec.tsx b/.../components/StorageBrowser/views/LocationDetailView/__tests__/LocationDetailView.spec.tsx
@@ -153,6 +153,42 @@ describe('LocationDetailView', () => {
     expect(messageText).toBeInTheDocument();
   });
 
+  it('allows searching for items', async () => {
+    useStoreSpy.mockReturnValueOnce([
+      {
+        location: { current: location, path: '', key: location.prefix },
+        locationItems: { fileDataItems: undefined },
+      } as StoreModule.UseStoreState,
+      dispatchStoreAction,
+    ]);
+    mockListItemsAction({ result: testResult });
+
+    const { getByPlaceholderText, getByText } = render(<LocationDetailView />);
+
+    const input = getByPlaceholderText('Search current folder');
+    const subfolderOption = getByText('Include subfolders');
+
+    expect(input).toBeInTheDocument();
+    expect(subfolderOption).toBeInTheDocument();
+
+    input.focus();
+    await act(async () => {
+      await user.keyboard('boo');
+      await user.click(getByText('Submit'));
+    });
+
+    expect(handleList).toHaveBeenCalledWith(
+      expect.objectContaining({
+        options: expect.objectContaining({
+          search: {
+            filterKey: 'key',
+            query: 'boo',
+          },
+        }),
+      })
+    );
+  });
+
   it('loads initial location items for a BUCKET location as expected', () => {
     useStoreSpy.mockReturnValueOnce([
       {

diff --git a/...torage/src/components/StorageBrowser/views/LocationsView/__tests__/LocationsView.spec.tsx b/...torage/src/components/StorageBrowser/views/LocationsView/__tests__/LocationsView.spec.tsx
@@ -301,4 +301,26 @@ describe('LocationsListView', () => {
       },
     });
   });
+
+  it('allows searching for items', async () => {
+    const user = userEvent.setup();
+    const { getByPlaceholderText, getByText, queryByText } = render(
+      <LocationsView />
+    );
+
+    const input = getByPlaceholderText('Filter folders and files');
+
+    expect(input).toBeInTheDocument();
+    expect(queryByText('item-0/')).toBeInTheDocument();
+    expect(queryByText('item-1/')).toBeInTheDocument();
+
+    input.focus();
+    await act(async () => {
+      await user.keyboard('item-0');
+      await user.click(getByText('Submit'));
+    });
+
+    expect(queryByText('item-0/')).toBeInTheDocument();
+    expect(queryByText('item-1/')).not.toBeInTheDocument();
+  });
 });