- {formattedBreadcrumbs.map((crumb, idx) => (
+ {formattedBreadcrumbs.map((crumb: any, idx: number) => (
{idx !== 0 &&
}
{
)
}
-const FileExplorerHeader = ({
- view = STORAGE_VIEWS.COLUMNS,
- sortBy = STORAGE_SORT_BY.NAME,
- sortByOrder = STORAGE_SORT_BY_ORDER.ASC,
- loading = {},
- breadcrumbs = [],
- backDisabled = false,
- isSearching = false,
+interface Props {
+ isSearching: boolean
+ itemSearchString: string
+ setIsSearching: (value: boolean) => void
+ setItemSearchString: (value: string) => void
+ onFilesUpload: (event: any, columnIndex: number) => void
+}
+
+const FileExplorerHeader: FC = ({
itemSearchString = '',
setItemSearchString = () => {},
- onSetPathByString = () => {},
- onChangeView = () => {},
- onChangeSortBy = () => {},
- onChangeSortByOrder = () => {},
- onToggleSearch = () => {},
onFilesUpload = () => {},
- onSelectBack = () => {},
- onSelectCreateFolder = () => {},
- onSelectBreadcrumb = () => {},
}) => {
const debounceDuration = 300
- const [isEditingPath, setIsEditingPath] = useState(false)
- const [isRefreshing, setIsRefreshing] = useState(false)
const [pathString, setPathString] = useState('')
const [searchString, setSearchString] = useState('')
+ const [loading, setLoading] = useState({ isLoading: false, message: '' })
- const uploadButtonRef = useRef(null)
- const previousBreadcrumbs = useRef(null)
+ 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)
const storageExplorerStore = useStorageStore()
- const { refetchAllOpenedFolders } = storageExplorerStore
+ const {
+ view,
+ setView,
+ columns,
+ sortBy,
+ setSortBy,
+ sortByOrder,
+ setSortByOrder,
+ popColumn,
+ popColumnAtIndex,
+ popOpenedFolders,
+ fetchFoldersByPath,
+ refetchAllOpenedFolders,
+ addNewFolderPlaceholder,
+ clearOpenedFolders,
+ closeFilePreview,
+ } = storageExplorerStore
+
+ const breadcrumbs = columns.map((column: any) => column.name)
+ const backDisabled = columns.length <= 1
useEffect(() => {
if (itemSearchString) setSearchString(itemSearchString)
@@ -137,11 +152,18 @@ const FileExplorerHeader = ({
}, [breadcrumbs])
const searchInputHandler = useCallback(debounce(setItemSearchString, debounceDuration), [])
- const onSearchInputUpdate = (event) => {
+ const onSearchInputUpdate = (event: any) => {
setSearchString(event.target.value)
+ // @ts-ignore
searchInputHandler(event.target.value)
}
+ const onSelectBack = () => {
+ popColumn()
+ popOpenedFolders()
+ closeFilePreview()
+ }
+
const onSelectUpload = () => {
if (uploadButtonRef.current) {
uploadButtonRef.current.click()
@@ -155,11 +177,11 @@ const FileExplorerHeader = ({
if (isSearching) onCancelSearch()
}
- const onUpdatePathString = (event) => {
+ const onUpdatePathString = (event: any) => {
setPathString(event.target.value)
}
- const navigateByPathString = (event) => {
+ const navigateByPathString = (event: any) => {
if (event) {
event.preventDefault()
event.stopPropagation()
@@ -168,6 +190,19 @@ const FileExplorerHeader = ({
onSetPathByString(compact(pathString.split('/')))
}
+ const onSetPathByString = async (paths: any[]) => {
+ if (paths.length === 0) {
+ popColumnAtIndex(0)
+ clearOpenedFolders()
+ closeFilePreview()
+ } else {
+ const pathString = paths.join('/')
+ setLoading({ isLoading: true, message: `Navigating to ${pathString}...` })
+ await fetchFoldersByPath(paths)
+ setLoading({ isLoading: false, message: '' })
+ }
+ }
+
const cancelSetPathString = () => {
setIsEditingPath(false)
}
@@ -177,17 +212,19 @@ const FileExplorerHeader = ({
// Searching for column view requires much more thinking
const toggleSearch = () => {
setIsEditingPath(false)
- onToggleSearch(true)
+ setIsSearching(true)
}
+
const onCancelSearch = () => {
setSearchString('')
- onToggleSearch(false)
+ setIsSearching(false)
+ setItemSearchString('')
}
/** Methods for breadcrumbs */
- const selectBreadcrumb = (columnIndex) => {
- onSelectBreadcrumb(columnIndex)
+ const selectBreadcrumb = (columnIndex: number) => {
+ popColumnAtIndex(columnIndex)
}
const refreshData = async () => {
@@ -278,7 +315,7 @@ const FileExplorerHeader = ({
+
Columns
List
,
@@ -295,14 +332,14 @@ const FileExplorerHeader = ({
}
type="text"
disabled={breadcrumbs.length === 0}
- onChange={onChangeView}
+ onChange={setView}
>
View as
+
Name
Time created
Time modified
@@ -326,7 +363,7 @@ const FileExplorerHeader = ({
Ascending
Descending
@@ -352,6 +389,7 @@ const FileExplorerHeader = ({
+ {/* @ts-ignore */}
}
type="text"
disabled={breadcrumbs.length === 0}
- onClick={() => onSelectCreateFolder()}
+ onClick={() => addNewFolderPlaceholder(-1)}
>
Create folder
@@ -381,7 +419,7 @@ const FileExplorerHeader = ({
}
actions={[
{},
- onSelectItemsDelete = () => {},
- onSelectItemsMove = () => {},
- onUnselectAllItems = () => {},
-}) => {
+const FileExplorerHeaderSelection = () => {
+ const storageExplorerStore = useStorageStore()
+ const {
+ selectedItems,
+ downloadFile,
+ downloadSelectedFiles,
+ clearSelectedItems,
+ setSelectedItemsToDelete,
+ setSelectedItemsToMove,
+ } = storageExplorerStore
+
return (
}
type="text"
shadow={false}
- onClick={onUnselectAllItems}
+ onClick={() => clearSelectedItems()}
/>
{selectedItems.length} items
selected
- {/* [Joshen] Disabled multi download for now */}
}
type="primary"
shadow={false}
- onClick={onSelectItemsDownload}
+ onClick={async () => {
+ if (selectedItems.length === 1) {
+ await downloadFile(selectedItems[0])
+ } else {
+ await downloadSelectedFiles(selectedItems)
+ }
+ }}
>
Download
@@ -34,7 +44,7 @@ const FileExplorerHeaderSelection = ({
icon={
}
type="primary"
shadow={false}
- onClick={onSelectItemsDelete}
+ onClick={() => setSelectedItemsToDelete(selectedItems)}
>
Delete
@@ -42,7 +52,7 @@ const FileExplorerHeaderSelection = ({
icon={
}
type="primary"
shadow={false}
- onClick={onSelectItemsMove}
+ onClick={() => setSelectedItemsToMove(selectedItems)}
>
Move
diff --git a/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerRow.js b/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerRow.js
index efc6aa48d98..6712cc90e09 100644
--- a/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerRow.js
+++ b/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerRow.js
@@ -26,6 +26,7 @@ import {
CONTEXT_MENU_KEYS,
} from '../Storage.constants.ts'
import { formatBytes } from 'lib/helpers'
+import { useStorageStore } from 'localStores/storageExplorer/StorageExplorerStore'
const RowIcon = ({ view, status, fileType, mimeType }) => {
if (view === STORAGE_VIEWS.LIST && status === STORAGE_ROW_STATUS.LOADING) {
@@ -85,6 +86,9 @@ const FileExplorerRow = ({
onSelectItemRename = () => {},
onSelectItemMove = () => {},
}) => {
+ const storageExplorerStore = useStorageStore()
+ const { downloadFolder } = storageExplorerStore
+
const itemWithColumnIndex = { ...item, columnIndex }
const isSelected = find(selectedItems, item) !== undefined
const isOpened =
@@ -146,8 +150,22 @@ const FileExplorerRow = ({
? [{ name: 'Delete', onClick: () => onSelectItemDelete(itemWithColumnIndex) }]
: item.type === STORAGE_ROW_TYPES.FOLDER
? [
- { name: 'Rename', onClick: () => onSelectItemRename(itemWithColumnIndex) },
- { name: 'Delete', onClick: () => onSelectItemDelete(itemWithColumnIndex) },
+ {
+ name: 'Rename',
+ icon:
,
+ onClick: () => onSelectItemRename(itemWithColumnIndex),
+ },
+ {
+ name: 'Download',
+ icon:
,
+ onClick: () => downloadFolder(itemWithColumnIndex),
+ },
+ { name: 'Separator' },
+ {
+ name: 'Delete',
+ icon:
,
+ onClick: () => onSelectItemDelete(itemWithColumnIndex),
+ },
]
: [
...(!item.isCorrupted
diff --git a/studio/components/to-be-cleaned/Storage/StorageExplorer/FolderContextMenu.js b/studio/components/to-be-cleaned/Storage/StorageExplorer/FolderContextMenu.js
index 01d6629c32c..72d6ae9951b 100644
--- a/studio/components/to-be-cleaned/Storage/StorageExplorer/FolderContextMenu.js
+++ b/studio/components/to-be-cleaned/Storage/StorageExplorer/FolderContextMenu.js
@@ -1,10 +1,15 @@
+import { useStorageStore } from 'localStores/storageExplorer/StorageExplorerStore'
import { Menu, Item } from 'react-contexify'
import 'react-contexify/dist/ReactContexify.css'
const FolderContextMenu = ({ id = '', onRenameFolder = () => {}, onDeleteFolder = () => {} }) => {
+ const storageExplorerStore = useStorageStore()
+ const { downloadFolder } = storageExplorerStore
+
return (
)
diff --git a/studio/components/to-be-cleaned/Storage/StorageExplorer/PreviewPane.js b/studio/components/to-be-cleaned/Storage/StorageExplorer/PreviewPane.tsx
similarity index 90%
rename from studio/components/to-be-cleaned/Storage/StorageExplorer/PreviewPane.js
rename to studio/components/to-be-cleaned/Storage/StorageExplorer/PreviewPane.tsx
index 38b05a2c691..49066467eae 100644
--- a/studio/components/to-be-cleaned/Storage/StorageExplorer/PreviewPane.js
+++ b/studio/components/to-be-cleaned/Storage/StorageExplorer/PreviewPane.tsx
@@ -1,3 +1,4 @@
+import { isEmpty } from 'lodash'
import {
Button,
IconX,
@@ -11,13 +12,13 @@ import SVG from 'react-inlinesvg'
import { formatBytes } from 'lib/helpers'
import { Transition } from '@headlessui/react'
import Link from 'next/link'
+import { useStorageStore } from 'localStores/storageExplorer/StorageExplorerStore'
-const PreviewFile = ({ mimeType, previewUrl }) => {
+const PreviewFile = ({ mimeType, previewUrl }: { mimeType: string; previewUrl: string }) => {
if (!mimeType || !previewUrl) {
return (