Add option to change sort by order to storage explorer

studio/components/to-be-cleaned/Storage/Storage.constants.ts

@@ -10,6 +10,11 @@ export const STORAGE_SORT_BY = {
   LAST_ACCESSED_AT: 'last_accessed_at',
 }
 
+export const STORAGE_SORT_BY_ORDER = {
+  ASC: 'asc',
+  DESC: 'desc',
+}
+
 export const STORAGE_ROW_TYPES = {
   BUCKET: 'BUCKET',
   FILE: 'FILE',

studio/components/to-be-cleaned/Storage/StorageExplorer/ColumnContextMenu.js

@@ -1,7 +1,7 @@
 import { Menu, Item, Separator, Submenu } from 'react-contexify'
 import 'react-contexify/dist/ReactContexify.css'
 
-import { STORAGE_VIEWS, STORAGE_SORT_BY } from '../Storage.constants'
+import { STORAGE_VIEWS, STORAGE_SORT_BY, STORAGE_SORT_BY_ORDER } from '../Storage.constants'
 
 const ColumnContextMenu = ({
   id = '',
@@ -9,6 +9,7 @@ const ColumnContextMenu = ({
   onSelectAllItems = () => {},
   onSelectView = () => {},
   onSelectSort = () => {},
+  onSelectSortByOrder = () => {},
 }) => {
   return (
     <Menu id={id} animation="fade">
@@ -37,6 +38,10 @@ const ColumnContextMenu = ({
         <Item onClick={() => onSelectSort(STORAGE_SORT_BY.UPDATED_AT)}>Last modified</Item>
         <Item onClick={() => onSelectSort(STORAGE_SORT_BY.LAST_ACCESSED_AT)}>Last accessed</Item>
       </Submenu>
+      <Submenu label="Sort by order">
+        <Item onClick={() => onSelectSortByOrder(STORAGE_SORT_BY_ORDER.ASC)}>Asc</Item>
+        <Item onClick={() => onSelectSortByOrder(STORAGE_SORT_BY_ORDER.DESC)}>Desc</Item>
+      </Submenu>
     </Menu>
   )
 }

studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorer.js

@@ -29,6 +29,7 @@ const FileExplorer = ({
   onSelectCreateFolder = () => {},
   onChangeView = () => {},
   onChangeSortBy = () => {},
+  onChangeSortByOrder = () => {},
   onColumnLoadMore = () => {},
 }) => {
   const fileExplorerRef = useRef(null)
@@ -53,6 +54,7 @@ const FileExplorer = ({
         onSelectAllItems={onSelectAllItemsInColumn}
         onSelectView={onChangeView}
         onSelectSort={onChangeSortBy}
+        onSelectSortByOrder={onChangeSortByOrder}
       />
       <ItemContextMenu
         id={CONTEXT_MENU_KEYS.STORAGE_ITEM}

studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerHeader.js

@@ -15,10 +15,10 @@ import {
   IconX,
   IconEdit2,
   IconLoader,
-  Typography,
+  Typography, IconChevronsUp,
 } from '@supabase/ui'
 import { useStorageStore } from 'localStores/storageExplorer/StorageExplorerStore'
-import { STORAGE_VIEWS, STORAGE_SORT_BY } from '../Storage.constants.ts'
+import { STORAGE_VIEWS, STORAGE_SORT_BY, STORAGE_SORT_BY_ORDER } from '../Storage.constants.ts'
 
 const HeaderPathEdit = ({ loading, breadcrumbs, togglePathEdit }) => {
   return (
@@ -109,6 +109,7 @@ const HeaderBreadcrumbs = ({ loading, breadcrumbs, selectBreadcrumb }) => {
 const FileExplorerHeader = ({
   view = STORAGE_VIEWS.COLUMNS,
   sortBy = STORAGE_SORT_BY.NAME,
+  sortByOrder = STORAGE_SORT_BY_ORDER.ASC,
   loading = {},
   breadcrumbs = [],
   backDisabled = false,
@@ -118,6 +119,7 @@ const FileExplorerHeader = ({
   onSetPathByString = () => {},
   onChangeView = () => {},
   onChangeSortBy = () => {},
+  onChangeSortByOrder = () => {},
   onToggleSearch = () => {},
   onFilesUpload = () => {},
   onSelectBack = () => {},
@@ -330,6 +332,23 @@ const FileExplorerHeader = ({
               Sort
             </Button>
           </Dropdown>
+          <Dropdown
+            overlay={[
+              <Dropdown.RadioGroup key="sortOrderOptions" value={sortByOrder} onChange={onChangeSortByOrder}>
+                <Dropdown.Radio value={STORAGE_SORT_BY_ORDER.ASC}>Asc</Dropdown.Radio>
+                <Dropdown.Radio value={STORAGE_SORT_BY_ORDER.DESC}>Desc</Dropdown.Radio>
+              </Dropdown.RadioGroup>,
+            ]}
+          >
+            <Button
+              as="span"
+              icon={sortByOrder === STORAGE_SORT_BY_ORDER.DESC ? <IconChevronsDown size={16} strokeWidth={2} />  : <IconChevronsUp size={16} strokeWidth={2} />}
+              type="text"
+              disabled={breadcrumbs.length === 0}
+            >
+              Sort Order
+            </Button>
+          </Dropdown>
         </div>
         <div className="border-panel-border-light dark:border-panel-border-dark h-6 border-r" />
         <div className="flex items-center space-x-1">

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

@@ -40,6 +40,8 @@ const StorageExplorer = observer(({ bucket }) => {
     setView,
     sortBy,
     setSortBy,
+    sortByOrder,
+    setSortByOrder,
     currentBucketName,
     copyFileURLToClipboard,
     openBucket,
@@ -268,6 +270,8 @@ const StorageExplorer = observer(({ bucket }) => {
 
   const onChangeSortBy = (sortBy) => setSortBy(sortBy)
 
+  const onChangeSortByOrder = (sortByOrder) => setSortByOrder(sortByOrder)
+
   const onToggleSearch = (bool) => {
     setIsSearching(bool)
     if (bool === false) {
@@ -287,6 +291,7 @@ const StorageExplorer = observer(({ bucket }) => {
         <FileExplorerHeader
           view={view}
           sortBy={sortBy}
+          sortByOrder={sortByOrder}
           loading={loading}
           breadcrumbs={columns.map((column) => column.name)}
           backDisabled={columns.length <= 1}
@@ -295,6 +300,7 @@ const StorageExplorer = observer(({ bucket }) => {
           setItemSearchString={setItemSearchString}
           onChangeView={onChangeView}
           onChangeSortBy={onChangeSortBy}
+          onChangeSortByOrder={onChangeSortByOrder}
           onToggleSearch={onToggleSearch}
           onFilesUpload={onFilesUpload}
           onSelectBack={onSelectBack}
@@ -335,6 +341,7 @@ const StorageExplorer = observer(({ bucket }) => {
           onSelectCreateFolder={onSelectCreateFolder}
           onChangeView={onChangeView}
           onChangeSortBy={onChangeSortBy}
+          onChangeSortByOrder={onChangeSortByOrder}
           onColumnLoadMore={(index, column) =>
             fetchMoreFolderContents(index, column, itemSearchString)
           }

studio/localStores/storageExplorer/StorageExplorerStore.js

@@ -54,6 +54,7 @@ class StorageExplorerStore {
   loaded = false
   view = STORAGE_VIEWS.COLUMNS
   sortBy = STORAGE_SORT_BY.NAME
+  sortByOrder = 'asc'
   buckets = []
   selectedBucket = {}
   selectedBucketToEdit = {}
@@ -64,7 +65,7 @@ class StorageExplorerStore {
   selectedItemsToMove = []
   selectedFilePreview = {}
 
-  DEFAULT_OPTIONS = { limit: LIMIT, offset: OFFSET, sortBy: { column: this.sortBy, order: 'asc' } }
+  DEFAULT_OPTIONS = { limit: LIMIT, offset: OFFSET, sortBy: { column: this.sortBy, order: this.sortByOrder } }
 
   /* Supabase client */
   supabaseClient = null
@@ -208,6 +209,13 @@ class StorageExplorerStore {
     await this.refetchAllOpenedFolders()
   }
 
+  setSortByOrder = async (sortByOrder) => {
+    this.sortByOrder = sortByOrder
+    this.closeFilePreview()
+    this.updateExplorerPreferences()
+    await this.refetchAllOpenedFolders()
+  }
+
   clearColumns = () => {
     this.columns = []
   }
@@ -940,7 +948,7 @@ class StorageExplorerStore {
       limit: LIMIT,
       offset: OFFSET,
       search: searchString,
-      sortBy: { column: this.sortBy, order: 'asc' },
+      sortBy: { column: this.sortBy, order: this.sortByOrder },
     }
     const parameters = { signal: this.abortController.signal }
 
@@ -973,7 +981,7 @@ class StorageExplorerStore {
       limit: LIMIT,
       offset: column.items.length,
       search: searchString,
-      sortBy: { column: this.sortBy, order: 'asc' },
+      sortBy: { column: this.sortBy, order: this.sortByOrder },
     }
     const parameters = { signal: this.abortController.signal }
 
@@ -1012,7 +1020,7 @@ class StorageExplorerStore {
         const options = {
           limit: LIMIT,
           offset: OFFSET,
-          sortBy: { column: this.sortBy, order: 'asc' },
+          sortBy: { column: this.sortBy, order: this.sortByOrder },
         }
 
         const { data: items, error } = await this.supabaseClient.storage
@@ -1152,7 +1160,7 @@ class StorageExplorerStore {
     }
   }
 
-  /* 
+  /*
     Recursively returns a list of items along every directory within the specified base folder
     Each item has an extra property 'prefix' which has the prefix that leads to the item
     Used specifically for any operation that deals with every file along the folder
@@ -1174,7 +1182,7 @@ class StorageExplorerStore {
       formattedPathToFolder = `${prefix}/${name}`
     }
 
-    const options = { limit: LIMIT, offset: OFFSET, sortBy: { column: this.sortBy, order: 'asc' } }
+    const options = { limit: LIMIT, offset: OFFSET, sortBy: { column: this.sortBy, order: this.sortByOrder } }
     const { data: folderContents } = await this.supabaseClient.storage
       .from(this.selectedBucket.name)
       .list(formattedPathToFolder, options)
@@ -1338,6 +1346,7 @@ class StorageExplorerStore {
     const preferences = {
       view: this.view,
       sortBy: this.sortBy,
+      sortByOrder: this.sortByOrder,
     }
     localStorage.setItem(localStorageKey, JSON.stringify(preferences))
     return preferences
@@ -1347,13 +1356,15 @@ class StorageExplorerStore {
     const localStorageKey = this.getLocalStorageKey()
     const preferences = localStorage.getItem(localStorageKey)
     if (preferences) {
-      const { view, sortBy } = JSON.parse(preferences)
+      const { view, sortBy, sortByOrder } = JSON.parse(preferences)
       this.view = view
       this.sortBy = sortBy
+      this.sortByOrder = sortByOrder
     } else {
-      const { view, sortBy } = this.updateExplorerPreferences()
+      const { view, sortBy, sortByOrder } = this.updateExplorerPreferences()
       this.view = view
       this.sortBy = sortBy
+      this.sortByOrder = sortByOrder
     }
   }
 }