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

…date-usepaginate
aws-amplify · Nov 7, 2024 · 4bd73f5 · 4bd73f5
2 parents d0bec87 + 9f78d59
commit 4bd73f5
Show file tree

Hide file tree

Showing 10 changed files with 125 additions and 34 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,
     onPaginate,
@@ -86,6 +88,7 @@ export function LocationDetailView({
     onNavigateHome,
     onSelect,
     onSelectAll,
+    onSearch,
   } = useLocationDetailView({ onNavigate: onNavigateProp, onExit });
 
   return (
@@ -98,6 +101,8 @@ export function LocationDetailView({
           isDataRefreshDisabled: isLoading,
           currentLocation,
           currentPath,
+          searchPlaceholder,
+          showIncludeSubfolders,
           tableData: getLocationDetailViewTableData({
             areAllFilesSelected,
             currentLocation,
@@ -115,6 +120,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/...nents/StorageBrowser/views/LocationDetailView/getLocationDetailViewTableData/constants.ts b/...nents/StorageBrowser/views/LocationDetailView/getLocationDetailViewTableData/constants.ts
@@ -0,0 +1,10 @@
+import { LocationDetailViewHeaders } from './types';
+
+export const LOCATION_DETAIL_VIEW_HEADERS: LocationDetailViewHeaders = [
+  { key: 'checkbox', type: 'text', content: { text: '' } },
+  { key: 'name', type: 'sort', content: { label: 'Name' } },
+  { key: 'type', type: 'sort', content: { label: 'Type' } },
+  { key: 'last-modified', type: 'sort', content: { label: 'Last Modified' } },
+  { key: 'size', type: 'sort', content: { label: 'Size' } },
+  { key: 'download', type: 'text', content: { text: '' } },
+];
diff --git a/...orageBrowser/views/LocationDetailView/getLocationDetailViewTableData/getFileRowContent.ts b/...orageBrowser/views/LocationDetailView/getLocationDetailViewTableData/getFileRowContent.ts
@@ -1,9 +1,11 @@
+import { humanFileSize } from '@aws-amplify/ui';
+
 import { DataTableProps } from '../../../composables/DataTable';
 import { LocationData } from '../../../actions';
-import { LOCATION_DETAIL_VIEW_HEADERS } from './getLocationDetailViewTableData';
-import { humanFileSize } from '@aws-amplify/ui';
 import { displayText } from '../../../displayText/en';
 
+import { LOCATION_DETAIL_VIEW_HEADERS } from './constants';
+
 export const getFileRowContent = ({
   currentLocation,
   currentPath,

diff --git a/...ageBrowser/views/LocationDetailView/getLocationDetailViewTableData/getFolderRowContent.ts b/...ageBrowser/views/LocationDetailView/getLocationDetailViewTableData/getFolderRowContent.ts
@@ -1,5 +1,5 @@
 import { DataTableProps } from '../../../composables/DataTable';
-import { LOCATION_DETAIL_VIEW_HEADERS } from './getLocationDetailViewTableData';
+import { LOCATION_DETAIL_VIEW_HEADERS } from './constants';
 
 export const getFolderRowContent = ({
   itemSubPath,

diff --git a/...views/LocationDetailView/getLocationDetailViewTableData/getLocationDetailViewTableData.ts b/...views/LocationDetailView/getLocationDetailViewTableData/getLocationDetailViewTableData.ts
@@ -1,31 +1,12 @@
-import { WithKey } from '../../../components/types';
 import { DataTableProps } from '../../../composables/DataTable';
 import { LocationData } from '../../../actions';
-import { LocationItemData } from '../../../../../../dist/types/components/StorageBrowser/actions';
+import { LocationItemData } from '../../../actions/handlers';
 import { getFileRowContent } from './getFileRowContent';
 import { getFolderRowContent } from './getFolderRowContent';
 import { displayText } from '../../../displayText/en';
 import { FileData } from '../../../actions/handlers';
 
-type HeaderKeys =
-  | 'checkbox'
-  | 'name'
-  | 'type'
-  | 'last-modified'
-  | 'size'
-  | 'download';
-
-export const LOCATION_DETAIL_VIEW_HEADERS: WithKey<
-  DataTableProps['headers'][number],
-  HeaderKeys
->[] = [
-  { key: 'checkbox', type: 'text', content: { text: '' } },
-  { key: 'name', type: 'sort', content: { label: 'Name' } },
-  { key: 'type', type: 'sort', content: { label: 'Type' } },
-  { key: 'last-modified', type: 'sort', content: { label: 'Last Modified' } },
-  { key: 'size', type: 'sort', content: { label: 'Size' } },
-  { key: 'download', type: 'text', content: { text: '' } },
-];
+import { LOCATION_DETAIL_VIEW_HEADERS } from './constants';
 
 export const getLocationDetailViewTableData = ({
   areAllFilesSelected,

diff --git a/...omponents/StorageBrowser/views/LocationDetailView/getLocationDetailViewTableData/types.ts b/...omponents/StorageBrowser/views/LocationDetailView/getLocationDetailViewTableData/types.ts
@@ -0,0 +1,15 @@
+import { DataTableProps } from '../../../composables/DataTable';
+import { WithKey } from '../../../components/types';
+
+export type HeaderKeys =
+  | 'checkbox'
+  | 'name'
+  | 'type'
+  | 'last-modified'
+  | 'size'
+  | 'download';
+
+export type LocationDetailViewHeaders = WithKey<
+  DataTableProps['headers'][number],
+  HeaderKeys
+>[];
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();
+  });
 });