diff --git a/apps/studio/components/interfaces/Storage/StorageExplorer/FileExplorerHeader.test.tsx b/apps/studio/components/interfaces/Storage/StorageExplorer/FileExplorerHeader.test.tsx index b8cea74a308..594e087836f 100644 --- a/apps/studio/components/interfaces/Storage/StorageExplorer/FileExplorerHeader.test.tsx +++ b/apps/studio/components/interfaces/Storage/StorageExplorer/FileExplorerHeader.test.tsx @@ -104,7 +104,7 @@ describe('FileExplorerHeader', () => { ).toBeTruthy() }) - it('renders text-xs breadcrumbs in a row above the search bar in list view', () => { + it('renders a go-up button to the left of search when not at bucket root', () => { mockUseStoragePreference.mockReturnValue(createPreference(STORAGE_VIEWS.LIST)) render( @@ -115,19 +115,43 @@ describe('FileExplorerHeader', () => { /> ) - const rootBreadcrumb = screen.getByRole('button', { name: 'my-bucket' }) - const inactiveBreadcrumb = screen.getByRole('button', { name: 'images' }) - const activeBreadcrumb = screen.getByText('2024') - - expect(rootBreadcrumb).toHaveClass('text-xs') - expect(inactiveBreadcrumb).toHaveClass('text-xs', 'text-foreground-lighter') - expect(activeBreadcrumb).toHaveClass('text-xs', 'text-foreground') - expect(activeBreadcrumb).not.toHaveClass('text-foreground-lighter') - expect(screen.queryByRole('button', { name: '2024' })).not.toBeInTheDocument() + expect(screen.getByRole('button', { name: 'Go up one level' })).toBeInTheDocument() + expect(screen.queryByRole('button', { name: 'my-bucket' })).not.toBeInTheDocument() + expect(screen.queryByRole('button', { name: 'images' })).not.toBeInTheDocument() expect(screen.getByPlaceholderText('Search in 2024...')).toBeInTheDocument() }) - it('uses breadcrumb buttons to navigate back to a previous folder level with keyboard input', async () => { + it('does not render the go-up button in column view when not at bucket root', () => { + render( + + ) + + expect(screen.queryByRole('button', { name: 'Go up one level' })).not.toBeInTheDocument() + }) + + it('does not render the go-up button at bucket root', () => { + const snapshot = createSnapshot() + snapshot.columns = [makeColumn('my-bucket')] + mockUseStorageExplorerStateSnapshot.mockReturnValue(snapshot) + mockUseStoragePreference.mockReturnValue(createPreference(STORAGE_VIEWS.LIST)) + + render( + + ) + + expect(screen.queryByRole('button', { name: 'Go up one level' })).not.toBeInTheDocument() + expect(screen.getByPlaceholderText('Search in root directory...')).toBeInTheDocument() + }) + + it('goes up one folder level when the go-up button is clicked', async () => { const snapshot = createSnapshot() mockUseStorageExplorerStateSnapshot.mockReturnValue(snapshot) mockUseStoragePreference.mockReturnValue(createPreference(STORAGE_VIEWS.LIST)) @@ -140,12 +164,11 @@ describe('FileExplorerHeader', () => { /> ) - const breadcrumbButton = screen.getByRole('button', { name: 'images' }) - breadcrumbButton.focus() - await userEvent.keyboard('{Enter}') + await userEvent.click(screen.getByRole('button', { name: 'Go up one level' })) - expect(snapshot.popColumnAtIndex).toHaveBeenCalledWith(1) - expect(snapshot.popOpenedFoldersAtIndex).toHaveBeenCalledWith(0) + expect(snapshot.popColumn).toHaveBeenCalled() + expect(snapshot.popOpenedFolders).toHaveBeenCalled() + expect(snapshot.setSelectedFilePreview).toHaveBeenCalledWith(undefined) }) it('opens path edit mode from Navigate and tracks the click', async () => { diff --git a/apps/studio/components/interfaces/Storage/StorageExplorer/FileExplorerHeader.tsx b/apps/studio/components/interfaces/Storage/StorageExplorer/FileExplorerHeader.tsx index e2802395e96..90eec27f5b8 100644 --- a/apps/studio/components/interfaces/Storage/StorageExplorer/FileExplorerHeader.tsx +++ b/apps/studio/components/interfaces/Storage/StorageExplorer/FileExplorerHeader.tsx @@ -3,12 +3,10 @@ import { compact, isEqual, noop } from 'lodash' import { ArrowLeft, Check, - ChevronRight, Columns, Edit2, FolderPlus, List, - LoaderCircle, RefreshCw, Search, Upload, @@ -132,71 +130,6 @@ const NavigateDialog = ({ ) } -const HeaderBreadcrumbs = ({ - loading, - breadcrumbs, - selectBreadcrumb, -}: { - loading: { isLoading: boolean; message: string } - breadcrumbs: string[] - selectBreadcrumb: (i: number) => void -}) => { - // Max 5 crumbs, otherwise replace middle segment with ellipsis and only - // have the first 2 and last 2 crumbs visible - const ellipsis = '...' - const breadcrumbsWithIndexes = breadcrumbs.map((name: string, index: number) => { - return { name, index } - }) - - const formattedBreadcrumbs = - breadcrumbsWithIndexes.length <= 5 - ? breadcrumbsWithIndexes - : breadcrumbsWithIndexes - .slice(0, 2) - .concat([{ name: ellipsis, index: -1 }]) - .concat( - breadcrumbsWithIndexes.slice( - breadcrumbsWithIndexes.length - 2, - breadcrumbsWithIndexes.length - ) - ) - - return loading.isLoading ? ( -
- -

{loading.message}

-
- ) : ( -
- {formattedBreadcrumbs.map((crumb, idx: number) => { - const isEllipsis = crumb.name === ellipsis - const isActive = crumb.index === breadcrumbs.length - 1 - - return ( -
- {idx !== 0 && ( - - )} - {isEllipsis ? ( - {crumb.name} - ) : isActive ? ( - {crumb.name} - ) : ( - - )} -
- ) - })} -
- ) -} - interface FileExplorerHeader { itemSearchString: string setItemSearchString: (value: string) => void @@ -226,7 +159,6 @@ export const FileExplorerHeader = ({ popColumn, popColumnAtIndex, popOpenedFolders, - popOpenedFoldersAtIndex, fetchFoldersByPath, refetchAllOpenedFolders, refreshAll, @@ -245,9 +177,7 @@ export const FileExplorerHeader = ({ } = useStoragePreference(projectRef) const breadcrumbs = columns.map((column) => column.name) - const backDisabled = columns.length <= 1 const isListView = view === STORAGE_VIEWS.LIST - const showFolderBreadcrumbs = breadcrumbs.length > 1 const isBucketRoot = breadcrumbs.length <= 1 const currentFolderName = breadcrumbs[breadcrumbs.length - 1] const searchPlaceholder = isBucketRoot @@ -356,13 +286,6 @@ export const FileExplorerHeader = ({ snap.setIsSearching(value.length > 0) } - /** Methods for breadcrumbs */ - - const selectBreadcrumb = (columnIndex: number) => { - popColumnAtIndex(columnIndex) - popOpenedFoldersAtIndex(columnIndex - 1) - } - const refreshData = async () => { await refreshAll() } @@ -374,32 +297,22 @@ export const FileExplorerHeader = ({ return (
- {isListView && showFolderBreadcrumbs && ( -
-
-
-
- )} - -
+
-
+
+ {isListView && !isBucketRoot && ( +