Replace deprecated components on /authorize page (supabase#37965)

* replace deprecated components on `/authorize` route

* Minor clean ups

---------

Co-authored-by: Joshen Lim <[email protected]>

Author: Saeris

apps/studio/components/interfaces/Organization/OAuthApps/AuthorizeRequesterDetails.tsx

@@ -8,6 +8,7 @@ export interface AuthorizeRequesterDetailsProps {
   name: string
   domain: string
   scopes: OAuthScope[]
+  showOnlyScopes?: boolean
 }
 
 export const ScopeSection = ({
@@ -55,31 +56,43 @@ export const AuthorizeRequesterDetails = ({
   name,
   domain,
   scopes,
+  showOnlyScopes = false,
 }: AuthorizeRequesterDetailsProps) => {
   return (
     <div className="flex gap-y-4 flex-col">
-      <div className="flex flex-row gap-x-4 items-center">
-        <div className="flex items-center">
-          <div
-            className="w-14 h-14 md:w-16 md:h-16 bg-center bg-no-repeat bg-cover flex items-center justify-center rounded-md border border-control"
-            style={{
-              backgroundImage: !!icon ? `url('${icon}')` : 'none',
-            }}
-          >
-            {!icon && <p className="text-foreground-light text-lg">{name[0]}</p>}
+      {!showOnlyScopes && (
+        <div className="flex flex-row gap-x-4 items-center">
+          <div className="flex items-center">
+            <div
+              className="w-12 h-12 md:w-14 md:h-14 bg-center bg-no-repeat bg-cover flex items-center justify-center rounded-md border border-control"
+              style={{
+                backgroundImage: !!icon ? `url('${icon}')` : 'none',
+              }}
+            >
+              {!icon && <p className="text-foreground-light text-lg">{name[0]}</p>}
+            </div>
           </div>
+          <p className="text-foreground">
+            {name} ({domain}) is requesting API access to an organization.
+          </p>
         </div>
-        <p className="text-foreground">
-          {name} ({domain}) is requesting API access to an organization.
-        </p>
-      </div>
+      )}
       <div>
-        <h2>Permissions</h2>
-        <p className="text-sm text-foreground-light">
-          The following scopes will apply for the{' '}
-          <span className="text-amber-900">selected organization and all of its projects.</span>
-        </p>
+        {!showOnlyScopes && (
+          <>
+            <h3>Permissions</h3>
+            <p className="text-sm text-foreground-light">
+              The following scopes will apply for the{' '}
+              <span className="text-amber-900">selected organization and all of its projects.</span>
+            </p>
+          </>
+        )}
         <div className="pt-2">
+          {scopes.length === 0 && (
+            <p className="text-foreground-lighter text-sm">
+              No permissions requested, {name} will not have access to your organization or projects
+            </p>
+          )}
           <ScopeSection
             description={PERMISSIONS_DESCRIPTIONS.ANALYTICS}
             hasReadScope={scopes.includes(OAuthScope.ANALYTICS_READ)}