Chore/api keys perms (#33684)

* Dont try and load keys if user doesnt have permission

* Async check perms

apps/studio/components/ui/ProjectSettings/DisplayApiSettings.tsx

@@ -4,7 +4,7 @@ import { useParams } from 'common'
 import Panel from 'components/ui/Panel'
 import { useJwtSecretUpdatingStatusQuery } from 'data/config/jwt-secret-updating-status-query'
 import { useProjectSettingsV2Query } from 'data/config/project-settings-v2-query'
-import { useCheckPermissions } from 'hooks/misc/useCheckPermissions'
+import { useAsyncCheckProjectPermissions } from 'hooks/misc/useCheckPermissions'
 import { useFlag } from 'hooks/ui/useFlag'
 import { AlertCircle, Loader2 } from 'lucide-react'
 import { Input } from 'ui'
@@ -32,8 +32,10 @@ const DisplayApiSettings = ({
   } = useJwtSecretUpdatingStatusQuery({ projectRef })
   const jwtSecretUpdateStatus = data?.jwtSecretUpdateStatus
 
-  const canReadAPIKeys = useCheckPermissions(PermissionAction.READ, 'service_api_keys')
-
+  const { isLoading, can: canReadAPIKeys } = useAsyncCheckProjectPermissions(
+    PermissionAction.READ,
+    'service_api_keys'
+  )
   const isNotUpdatingJwtSecret =
     jwtSecretUpdateStatus === undefined || jwtSecretUpdateStatus === JwtSecretUpdateStatus.Updated
   const apiKeys = settings?.service_api_keys ?? []
@@ -58,7 +60,20 @@ const DisplayApiSettings = ({
           )
         }
       >
-        {isProjectSettingsError || isJwtSecretUpdateStatusError ? (
+        {isLoading ? (
+          <div className="flex items-center justify-center py-8 space-x-2">
+            <Loader2 className="animate-spin" size={16} strokeWidth={1.5} />
+            <p className="text-sm text-foreground-light">Retrieving API keys</p>
+          </div>
+        ) : !canReadAPIKeys ? (
+          <div className="flex items-center py-8 px-8 space-x-2">
+            <AlertCircle size={16} strokeWidth={1.5} />
+            <p className="text-sm text-foreground-light">
+              You don't have permission to view API keys. These keys restricted to users with higher
+              access levels.
+            </p>
+          </div>
+        ) : isProjectSettingsError || isJwtSecretUpdateStatusError ? (
           <div className="flex items-center justify-center py-8 space-x-2">
             <AlertCircle size={16} strokeWidth={1.5} />
             <p className="text-sm text-foreground-light">
@@ -137,8 +152,8 @@ const DisplayApiSettings = ({
               className="border-t"
               title="API keys have moved"
               badgeLabel={'Changelog'}
-              description={` 
-  \`anon\` and \`service_role\` API keys can now be replaced with \`publishable\` and \`secret\` API keys.   
+              description={`
+  \`anon\` and \`service_role\` API keys can now be replaced with \`publishable\` and \`secret\` API keys.
   `}
               href="https://github.com/orgs/supabase/discussions/29260"
               buttonText="Read the announcement"
@@ -148,7 +163,7 @@ const DisplayApiSettings = ({
               className="border-t"
               title="New API keys coming Q4 2024"
               description={`
-\`anon\` and \`service_role\` API keys will be changing to \`publishable\` and \`secret\` API keys.    
+\`anon\` and \`service_role\` API keys will be changing to \`publishable\` and \`secret\` API keys.
 `}
               href="https://github.com/orgs/supabase/discussions/29260"
               buttonText="Read the announcement"