fix(edge functions secrets): allow read-only role to read secrets metadata (supabase#40667)

According to our API permissions model, the read-only role can also read
secrets metadata (the actual secret itself is not viewable by anybdoy).
Updating the frontend UI to match.

Author: charislam

apps/studio/components/interfaces/Functions/EdgeFunctionSecrets/EdgeFunctionSecrets.tsx

@@ -18,22 +18,25 @@ import AddNewSecretForm from './AddNewSecretForm'
 import EdgeFunctionSecret from './EdgeFunctionSecret'
 import { EditSecretSheet } from './EditSecretSheet'
 
-const EdgeFunctionSecrets = () => {
+export const EdgeFunctionSecrets = () => {
   const { ref: projectRef } = useParams()
   const [searchString, setSearchString] = useState('')
 
   // Track the ID being deleted to exclude it from error checking
   const deletingSecretNameRef = useRef<string | null>(null)
 
-  const { can: canReadSecrets, isLoading: isLoadingPermissions } = useAsyncCheckPermissions(
-    PermissionAction.SECRETS_READ,
+  const { can: canReadSecrets, isLoading: isLoadingSecretsPermissions } = useAsyncCheckPermissions(
+    PermissionAction.FUNCTIONS_SECRET_READ,
     '*'
   )
   const { can: canUpdateSecrets } = useAsyncCheckPermissions(PermissionAction.SECRETS_WRITE, '*')
 
-  const { data, error, isLoading, isSuccess, isError } = useSecretsQuery({
-    projectRef: projectRef,
-  })
+  const { data, error, isLoading, isSuccess, isError } = useSecretsQuery(
+    {
+      projectRef: projectRef,
+    },
+    { enabled: canReadSecrets }
+  )
 
   const { setValue: setSelectedSecretToEdit, value: selectedSecretToEdit } =
     useQueryStateWithSelect({
@@ -82,10 +85,14 @@ const EdgeFunctionSecrets = () => {
     <TableHead key="actions" />,
   ]
 
+  const showLoadingState = isLoadingSecretsPermissions || (canReadSecrets && isLoading)
+
   return (
     <>
-      {isLoading || isLoadingPermissions ? (
+      {showLoadingState ? (
         <GenericSkeletonLoader />
+      ) : !canReadSecrets ? (
+        <NoPermission resourceText="view this project's edge function secrets" />
       ) : (
         <>
           {isError && <AlertError error={error} subject="Failed to retrieve project secrets" />}
@@ -187,5 +194,3 @@ const EdgeFunctionSecrets = () => {
     </>
   )
 }
-
-export default EdgeFunctionSecrets

apps/studio/package.json

@@ -62,7 +62,7 @@
     "@supabase/mcp-utils": "^0.2.0",
     "@supabase/pg-meta": "workspace:*",
     "@supabase/realtime-js": "catalog:",
-    "@supabase/shared-types": "0.1.80",
+    "@supabase/shared-types": "0.1.83",
     "@supabase/sql-to-rest": "^0.1.6",
     "@supabase/supabase-js": "catalog:",
     "@tanstack/react-query": "^4.42.0",

apps/studio/pages/project/[ref]/functions/secrets.tsx

@@ -1,4 +1,4 @@
-import EdgeFunctionSecrets from 'components/interfaces/Functions/EdgeFunctionSecrets/EdgeFunctionSecrets'
+import { EdgeFunctionSecrets } from 'components/interfaces/Functions/EdgeFunctionSecrets/EdgeFunctionSecrets'
 import { FunctionsSecretsEmptyStateLocal } from 'components/interfaces/Functions/FunctionsEmptyState'
 import DefaultLayout from 'components/layouts/DefaultLayout'
 import EdgeFunctionsLayout from 'components/layouts/EdgeFunctionsLayout/EdgeFunctionsLayout'