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 ? (
-
- ) : (
-
- {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 && (
-
-
- }
- size="tiny"
- type="text"
- className="shrink-0 px-1"
- disabled={backDisabled}
- onClick={() => {
- setIsPathDialogOpen(false)
- onSelectBack()
- }}
- />
-
-
-
- )}
-
-
+
-
+
+ {isListView && !isBucketRoot && (
+
}
+ onClick={() => {
+ setIsPathDialogOpen(false)
+ onSelectBack()
+ }}
+ />
+ )}
{
return (
-