Add appropriate empty state while searching

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}

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<any>(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 && (
+          <div className="h-full w-full flex flex-col items-center justify-center">
+            <img
+              src={`${BASE_PATH}/img/storage-placeholder.svg`}
+              className="opacity-75 pointer-events-none"
+            />
+            <p className="my-3 opacity-75">Drop your files here</p>
+            <p className="w-40 text-center text-sm text-scale-1100">
+              Or upload them via the "Upload file" button above
+            </p>
+          </div>
+        )}
+
+      {snap.isSearching && itemSearchString.length > 0 && isEmpty && (
         <div className="h-full w-full flex flex-col items-center justify-center">
-          <img
-            src={`${BASE_PATH}/img/storage-placeholder.svg`}
-            className="opacity-75 pointer-events-none"
-          />
-          <p className="my-3 opacity-75">Drop your files here</p>
-          <p className="w-40 text-center text-sm text-scale-1100">
-            Or upload them via the "Upload file" button above
+          <p className="text-sm my-3 text-scale-1200">No results found in this folder</p>
+          <p className="w-40 text-center text-sm text-light">
+            Your search for "{itemSearchString}" did not return any results
           </p>
         </div>
       )}
@@ -245,11 +264,9 @@ const FileExplorerColumn = ({
       {/* Drag drop upload CTA for when column has files */}
       <DragOverOverlay
         isOpen={isDraggedOver}
+        folderIsEmpty={isEmpty}
         onDragLeave={() => setIsDraggedOver(false)}
         onDrop={() => setIsDraggedOver(false)}
-        folderIsEmpty={
-          column.items.filter((item) => item.status !== STORAGE_ROW_STATUS.LOADING).length === 0
-        }
       />
 
       {/* List interface footer */}

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 ? (
           <form className="ml-2 flex-grow">
             <Input
@@ -294,14 +296,14 @@ const FileExplorerHeader = ({
         ) : view === STORAGE_VIEWS.COLUMNS ? (
           <HeaderPathEdit
             loading={loading}
-            isSearching={isSearching}
+            isSearching={snap.isSearching}
             breadcrumbs={breadcrumbs}
             togglePathEdit={togglePathEdit}
           />
         ) : (
           <HeaderBreadcrumbs
             loading={loading}
-            isSearching={isSearching}
+            isSearching={snap.isSearching}
             breadcrumbs={breadcrumbs}
             selectBreadcrumb={selectBreadcrumb}
           />
@@ -462,7 +464,7 @@ const FileExplorerHeader = ({
 
         <div className="h-6 border-r border-scale-600" />
         <div className="flex items-center pr-1.5">
-          {isSearching ? (
+          {snap.isSearching ? (
             <Input
               size="tiny"
               autoFocus

studio/components/to-be-cleaned/Storage/StorageExplorer/StorageExplorer.tsx

@@ -42,7 +42,6 @@ const StorageExplorer = ({ bucket }: StorageExplorerProps) => {
     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}

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<typeof useSnapshot>[1]) =>
+  useSnapshot(storageExplorerState, options)