From 3cd522205d8e7c8b87ea96408f0e694fb17afbcd Mon Sep 17 00:00:00 2001 From: Joshen Lim Date: Mon, 11 Sep 2023 14:04:45 +0800 Subject: [PATCH] Add appropriate empty state while searching --- .../Storage/StorageExplorer/FileExplorer.tsx | 4 ++ .../StorageExplorer/FileExplorerColumn.tsx | 39 +++++++++++++------ .../StorageExplorer/FileExplorerHeader.tsx | 18 +++++---- .../StorageExplorer/StorageExplorer.tsx | 2 +- studio/state/storage-explorer.ts | 13 +++++++ 5 files changed, 56 insertions(+), 20 deletions(-) create mode 100644 studio/state/storage-explorer.ts diff --git a/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorer.tsx b/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorer.tsx index 09783f3f591..7b5b02dcb99 100644 --- a/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorer.tsx +++ b/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorer.tsx @@ -15,6 +15,7 @@ export interface FileExplorerProps { openedFolders: any[] selectedItems: any[] selectedFilePreview: any + itemSearchString: string onFilesUpload: (event: any, index: number) => void onSelectAllItemsInColumn: (index: number) => void onSelectColumnEmptySpace: (index: number) => void @@ -28,6 +29,7 @@ const FileExplorer = ({ openedFolders = [], selectedItems = [], selectedFilePreview = {}, + itemSearchString, onFilesUpload = noop, onSelectAllItemsInColumn = noop, onSelectColumnEmptySpace = noop, @@ -64,6 +66,7 @@ const FileExplorer = ({ openedFolders={openedFolders} selectedItems={selectedItems} selectedFilePreview={selectedFilePreview} + itemSearchString={itemSearchString} onFilesUpload={onFilesUpload} onSelectAllItemsInColumn={onSelectAllItemsInColumn} onSelectColumnEmptySpace={onSelectColumnEmptySpace} @@ -82,6 +85,7 @@ const FileExplorer = ({ column={columns[columns.length - 1]} selectedItems={selectedItems} selectedFilePreview={selectedFilePreview} + itemSearchString={itemSearchString} onFilesUpload={onFilesUpload} onSelectAllItemsInColumn={onSelectAllItemsInColumn} onSelectColumnEmptySpace={onSelectColumnEmptySpace} diff --git a/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerColumn.tsx b/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerColumn.tsx index 264deef55a7..2793a20724b 100644 --- a/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerColumn.tsx +++ b/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerColumn.tsx @@ -16,6 +16,7 @@ import { import { formatBytes } from 'lib/helpers' import { BASE_PATH } from 'lib/constants' import { StorageColumn } from '../Storage.types' +import { useStorageExplorerStateSnapshot } from 'state/storage-explorer' const DragOverOverlay = ({ isOpen, onDragLeave, onDrop, folderIsEmpty }: any) => { return ( @@ -59,6 +60,7 @@ export interface FileExplorerColumnProps { openedFolders?: any[] selectedItems: any[] selectedFilePreview: any + itemSearchString: string onFilesUpload: (event: any, index: number) => void onSelectAllItemsInColumn: (index: number) => void onSelectColumnEmptySpace: (index: number) => void @@ -74,6 +76,7 @@ const FileExplorerColumn = ({ openedFolders = [], selectedItems = [], selectedFilePreview = {}, + itemSearchString, onFilesUpload = noop, onSelectAllItemsInColumn = noop, onSelectColumnEmptySpace = noop, @@ -83,6 +86,8 @@ const FileExplorerColumn = ({ const [isDraggedOver, setIsDraggedOver] = useState(false) const fileExplorerColumnRef = useRef(null) + const snap = useStorageExplorerStateSnapshot() + useEffect(() => { if (fileExplorerColumnRef) { const { scrollHeight, clientHeight } = fileExplorerColumnRef.current @@ -103,6 +108,9 @@ const FileExplorerColumn = ({ const columnItems = column.items const columnItemsSize = sum(columnItems.map((item) => get(item, ['metadata', 'size'], 0))) + const isEmpty = + column.items.filter((item) => item.status !== STORAGE_ROW_STATUS.LOADING).length === 0 + const { show } = useContextMenu() const displayMenu = (event: any) => { show(event, { @@ -229,15 +237,26 @@ const FileExplorerColumn = ({ /> {/* Drag drop upload CTA for when column is empty */} - {column.items.length === 0 && column.status !== STORAGE_ROW_STATUS.LOADING && ( + {!(snap.isSearching && itemSearchString.length > 0) && + column.items.length === 0 && + column.status !== STORAGE_ROW_STATUS.LOADING && ( +
+ +

Drop your files here

+

+ Or upload them via the "Upload file" button above +

+
+ )} + + {snap.isSearching && itemSearchString.length > 0 && isEmpty && (
- -

Drop your files here

-

- Or upload them via the "Upload file" button above +

No results found in this folder

+

+ Your search for "{itemSearchString}" did not return any results

)} @@ -245,11 +264,9 @@ const FileExplorerColumn = ({ {/* Drag drop upload CTA for when column has files */} setIsDraggedOver(false)} onDrop={() => setIsDraggedOver(false)} - folderIsEmpty={ - column.items.filter((item) => item.status !== STORAGE_ROW_STATUS.LOADING).length === 0 - } /> {/* List interface footer */} diff --git a/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerHeader.tsx b/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerHeader.tsx index 2a21c297af8..4e2f88297c1 100644 --- a/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerHeader.tsx +++ b/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerHeader.tsx @@ -24,6 +24,7 @@ import { import { useCheckPermissions } from 'hooks' import { useStorageStore } from 'localStores/storageExplorer/StorageExplorerStore' import { STORAGE_SORT_BY, STORAGE_SORT_BY_ORDER, STORAGE_VIEWS } from '../Storage.constants' +import { useStorageExplorerStateSnapshot } from 'state/storage-explorer' const HeaderPathEdit = ({ loading, isSearching, breadcrumbs, togglePathEdit }: any) => { return ( @@ -109,13 +110,14 @@ const FileExplorerHeader = ({ onFilesUpload = noop, }: FileExplorerHeader) => { const debounceDuration = 300 + const snap = useStorageExplorerStateSnapshot() + const [pathString, setPathString] = useState('') const [searchString, setSearchString] = useState('') const [loading, setLoading] = useState({ isLoading: false, message: '' }) const [isEditingPath, setIsEditingPath] = useState(false) const [isRefreshing, setIsRefreshing] = useState(false) - const [isSearching, setIsSearching] = useState(false) const uploadButtonRef: any = useRef(null) const previousBreadcrumbs: any = useRef(null) @@ -179,7 +181,7 @@ const FileExplorerHeader = ({ const togglePathEdit = () => { setIsEditingPath(true) setPathString(breadcrumbs.slice(1).join('/')) - if (isSearching) onCancelSearch() + if (snap.isSearching) onCancelSearch() } const onUpdatePathString = (event: any) => { @@ -217,12 +219,12 @@ const FileExplorerHeader = ({ // Searching for column view requires much more thinking const toggleSearch = () => { setIsEditingPath(false) - setIsSearching(true) + snap.setIsSearching(true) } const onCancelSearch = () => { setSearchString('') - setIsSearching(false) + snap.setIsSearching(false) setItemSearchString('') } @@ -260,7 +262,7 @@ const FileExplorerHeader = ({ }} /> )} - {!isSearching && <>} + {!snap.isSearching && <>} {isEditingPath ? (
) : ( @@ -462,7 +464,7 @@ const FileExplorerHeader = ({
- {isSearching ? ( + {snap.isSearching ? ( { view, currentBucketName, openBucket, - selectedBucket, loadExplorerPreferences, fetchFolderContents, @@ -227,6 +226,7 @@ const StorageExplorer = ({ bucket }: StorageExplorerProps) => { openedFolders={openedFolders} selectedItems={selectedItems} selectedFilePreview={selectedFilePreview} + itemSearchString={itemSearchString} onFilesUpload={onFilesUpload} onSelectAllItemsInColumn={onSelectAllItemsInColumn} onSelectColumnEmptySpace={onSelectColumnEmptySpace} diff --git a/studio/state/storage-explorer.ts b/studio/state/storage-explorer.ts new file mode 100644 index 00000000000..ae0a905b52e --- /dev/null +++ b/studio/state/storage-explorer.ts @@ -0,0 +1,13 @@ +import { proxy, snapshot, useSnapshot } from 'valtio' + +export const storageExplorerState = proxy({ + isSearching: false, + setIsSearching: (bool: boolean) => { + storageExplorerState.isSearching = bool + }, +}) + +export const getStorageExplorerStateSnapshot = () => snapshot(storageExplorerState) + +export const useStorageExplorerStateSnapshot = (options?: Parameters[1]) => + useSnapshot(storageExplorerState, options)