fix: storage permissions (supabase#29937)

* fix: storage permissions * write -> read * whoops * right one this time * chore: update @supabase/shared-types * check permissions for creating folders * add additional permissions checks * use buttontooltip --------- Co-authored-by: phamhieu <phamhieu1998@gmail.com>

Author: alaister

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

@@ -2,6 +2,8 @@ import { compact, uniqBy } from 'lodash'
 import { Item, Menu, Separator, Submenu } from 'react-contexify'
 import 'react-contexify/dist/ReactContexify.css'
 
+import { PermissionAction } from '@supabase/shared-types/out/constants'
+import { useCheckPermissions } from 'hooks/misc/useCheckPermissions'
 import { useStorageStore } from 'localStores/storageExplorer/StorageExplorerStore'
 import { ChevronRight, ChevronsDown, ChevronsUp, Clipboard, Eye, FolderPlus } from 'lucide-react'
 import {
@@ -16,6 +18,7 @@ interface ColumnContextMenuProps {
 }
 
 const ColumnContextMenu = ({ id = '' }: ColumnContextMenuProps) => {
+ const canUpdateFiles = useCheckPermissions(PermissionAction.STORAGE_WRITE, '*')
  const storageExplorerStore = useStorageStore()
  const {
  columns,
@@ -57,11 +60,15 @@ const ColumnContextMenu = ({ id = '' }: ColumnContextMenuProps) => {
 
  return (
  <Menu id={id} animation="fade">
- <Item onClick={({ props }) => onSelectCreateFolder(props.index)}>
- <FolderPlus size="14" strokeWidth={1} />
- <span className="ml-2 text-xs">New folder</span>
- </Item>
- <Separator />
+ {canUpdateFiles && (
+ <>
+ <Item onClick={({ props }) => onSelectCreateFolder(props.index)}>
+ <FolderPlus size="14" strokeWidth={1} />
+ <span className="ml-2 text-xs">New folder</span>
+ </Item>
+ <Separator />
+ </>
+ )}
  <Item onClick={({ props }) => onSelectAllItemsInColumn(props.index)}>
  <Clipboard size="14" strokeWidth={1} />
  <span className="ml-2 text-xs">Select all items</span>

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

@@ -183,7 +183,7 @@ const FileExplorerHeader = ({
 
  const breadcrumbs = columns.map((column) => column.name)
  const backDisabled = columns.length <= 1
- const canUpdateStorage = useCheckPermissions(PermissionAction.STORAGE_ADMIN_WRITE, '*')
+ const canUpdateStorage = useCheckPermissions(PermissionAction.STORAGE_WRITE, '*')
 
  useEffect(() => {
  if (itemSearchString) setSearchString(itemSearchString)

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

@@ -1,8 +1,13 @@
+import { Download, Move, Trash2, X } from 'lucide-react'
+
+import { PermissionAction } from '@supabase/shared-types/out/constants'
+import { ButtonTooltip } from 'components/ui/ButtonTooltip'
+import { useCheckPermissions } from 'hooks/misc/useCheckPermissions'
 import { useStorageStore } from 'localStores/storageExplorer/StorageExplorerStore'
-import { X, Download, Trash2, Move } from 'lucide-react'
 import { Button } from 'ui'
 
 const FileExplorerHeaderSelection = () => {
+ const canUpdateFiles = useCheckPermissions(PermissionAction.STORAGE_WRITE, '*')
  const storageExplorerStore = useStorageStore()
  const {
  selectedItems,
@@ -39,20 +44,34 @@ const FileExplorerHeaderSelection = () => {
  Download
  </Button>
  <div className="border-r border-green-900 py-3 opacity-50" />
- <Button
+
+ <ButtonTooltip
  icon={<Trash2 size={16} strokeWidth={2} />}
  type="primary"
  onClick={() => setSelectedItemsToDelete(selectedItems)}
+ tooltip={{
+ content: {
+ side: 'bottom',
+ text: !canUpdateFiles ? 'You need additional permissions to delete files' : undefined,
+ },
+ }}
  >
  Delete
- </Button>
- <Button
+ </ButtonTooltip>
+
+ <ButtonTooltip
  icon={<Move size={16} strokeWidth={2} />}
  type="primary"
  onClick={() => setSelectedItemsToMove(selectedItems)}
+ tooltip={{
+ content: {
+ side: 'bottom',
+ text: !canUpdateFiles ? 'You need additional permissions to move files' : undefined,
+ },
+ }}
  >
  Move
- </Button>
+ </ButtonTooltip>
  </div>
  </div>
  )

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

@@ -139,7 +139,7 @@ const FileExplorerRow: ItemRenderer<StorageItem, FileExplorerRowProps> = ({
  const isOpened =
  openedFolders.length > columnIndex ? isEqual(openedFolders[columnIndex], item) : false
  const isPreviewed = !isEmpty(selectedFilePreview) && isEqual(selectedFilePreview?.id, item.id)
- const canUpdateFiles = useCheckPermissions(PermissionAction.STORAGE_ADMIN_WRITE, '*')
+ const canUpdateFiles = useCheckPermissions(PermissionAction.STORAGE_WRITE, '*')
 
  const { show } = useContextMenu()
 

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

@@ -15,7 +15,7 @@ const FolderContextMenu = ({ id = '' }: FolderContextMenuProps) => {
  const storageExplorerStore = useStorageStore()
  const { openedFolders, downloadFolder, setSelectedItemToRename, setSelectedItemsToDelete } =
  storageExplorerStore
- const canUpdateFiles = useCheckPermissions(PermissionAction.STORAGE_ADMIN_WRITE, '*')
+ const canUpdateFiles = useCheckPermissions(PermissionAction.STORAGE_WRITE, '*')
 
  return (
  <Menu id={id} animation="fade">

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

@@ -27,7 +27,7 @@ const ItemContextMenu = ({ id = '' }: ItemContextMenuProps) => {
  } = storageExplorerStore
  const { onCopyUrl } = useCopyUrl(storageExplorerStore.projectRef)
  const isPublic = selectedBucket.public
- const canUpdateFiles = useCheckPermissions(PermissionAction.STORAGE_ADMIN_WRITE, '*')
+ const canUpdateFiles = useCheckPermissions(PermissionAction.STORAGE_WRITE, '*')
 
  const onHandleClick = async (event: any, item: StorageItemWithColumn, expiresIn?: number) => {
  if (item.isCorrupted) return

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

@@ -107,7 +107,7 @@ const PreviewPane = () => {
  } = storageExplorerStore
  const { onCopyUrl } = useCopyUrl(storageExplorerStore.projectRef)
 
- const canUpdateFiles = useCheckPermissions(PermissionAction.STORAGE_ADMIN_WRITE, '*')
+ const canUpdateFiles = useCheckPermissions(PermissionAction.STORAGE_WRITE, '*')
 
  if (!file) {
  return null

apps/studio/components/to-be-cleaned/Storage/StorageSettings/S3Connection.tsx

@@ -33,7 +33,7 @@ export const S3Connection = () => {
  const [openDeleteDialog, setOpenDeleteDialog] = useState(false)
  const [deleteCred, setDeleteCred] = useState<{ id: string; description: string }>()
 
- const canReadS3Credentials = useCheckPermissions(PermissionAction.STORAGE_ADMIN_WRITE, '*')
+ const canReadS3Credentials = useCheckPermissions(PermissionAction.STORAGE_ADMIN_READ, '*')
 
  const { data: projectAPI } = useProjectApiQuery({ projectRef: projectRef })
  const { data: storageCreds, ...storageCredsQuery } = useStorageCredentialsQuery(

apps/studio/package.json

@@ -40,7 +40,7 @@
  "@supabase/auth-js": "2.64.2",
  "@supabase/pg-meta": "*",
  "@supabase/realtime-js": "2.10.2",
- "@supabase/shared-types": "0.1.73",
+ "@supabase/shared-types": "0.1.74",
  "@supabase/supabase-js": "^2.44.3",
  "@tanstack/react-query": "4.35.7",
  "@tanstack/react-query-devtools": "4.35.7",