From 6dd923656d7aecb41de28beb948b27b47f2fc4e6 Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Tue, 24 May 2022 10:18:57 +0800
Subject: [PATCH] Fix storage reload button

---
 .../StorageExplorer/FileExplorerHeader.js     | 21 +++++++++++++++++++
 .../StorageExplorer/StorageExplorer.js        |  4 ++--
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerHeader.js b/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerHeader.js
index d4c344974fd..854673a3667 100644
--- a/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerHeader.js
+++ b/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerHeader.js
@@ -17,6 +17,7 @@ import {
   IconLoader,
   Typography,
 } from '@supabase/ui'
+import { useStorageStore } from 'localStores/storageExplorer/StorageExplorerStore'
 import { STORAGE_VIEWS, STORAGE_SORT_BY } from '../Storage.constants.ts'
 
 const HeaderPathEdit = ({ loading, breadcrumbs, togglePathEdit }) => {
@@ -125,12 +126,16 @@ const FileExplorerHeader = ({
 }) => {
   const debounceDuration = 300
   const [isEditingPath, setIsEditingPath] = useState(false)
+  const [isRefreshing, setIsRefreshing] = useState(false)
   const [pathString, setPathString] = useState('')
   const [searchString, setSearchString] = useState('')
 
   const uploadButtonRef = useRef(null)
   const previousBreadcrumbs = useRef(null)
 
+  const storageExplorerStore = useStorageStore()
+  const { refetchAllOpenedFolders } = storageExplorerStore
+
   useEffect(() => {
     if (itemSearchString) setSearchString(itemSearchString)
   }, [])
@@ -198,6 +203,12 @@ const FileExplorerHeader = ({
     onSelectBreadcrumb(columnIndex)
   }
 
+  const refreshData = async () => {
+    setIsRefreshing(true)
+    await refetchAllOpenedFolders()
+    setIsRefreshing(false)
+  }
+
   return (
     <div
       className="
@@ -267,6 +278,16 @@ const FileExplorerHeader = ({
       {/* Actions */}
       <div className="flex items-center space-x-4">
         <div className="flex items-center space-x-1">
+          <Button
+            className="mr-2"
+            size="tiny"
+            icon={<IconRefreshCw />}
+            type="text"
+            loading={isRefreshing}
+            onClick={refreshData}
+          >
+            Reload
+          </Button>
           <Dropdown
             overlay={[
               <Dropdown.RadioGroup key="viewOptions" value={view} onChange={onChangeView}>
diff --git a/studio/components/to-be-cleaned/Storage/StorageExplorer/StorageExplorer.js b/studio/components/to-be-cleaned/Storage/StorageExplorer/StorageExplorer.js
index 0e5a662ff48..e8ed0105432 100644
--- a/studio/components/to-be-cleaned/Storage/StorageExplorer/StorageExplorer.js
+++ b/studio/components/to-be-cleaned/Storage/StorageExplorer/StorageExplorer.js
@@ -270,8 +270,8 @@ const StorageExplorer = observer(({ bucket }) => {
       ref={storageExplorerRef}
       className="
         bg-bg-primary-light dark:bg-bg-primary-dark
-        border border-panel-border-light dark:border-panel-border-dark
-        w-full h-full rounded-md flex flex-col"
+        border-panel-border-light dark:border-panel-border-dark flex
+        h-full w-full flex-col rounded-md border"
     >
       {selectedItems.length === 0 ? (
         <FileExplorerHeader