From c66c4d181229fe4f881b8719017137c9356d3258 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kamil=20Og=C3=B3rek?= <kamil.ogorek@gmail.com>
Date: Thu, 24 Jul 2025 11:49:12 +0200
Subject: [PATCH] feat: Allow for preselecting organization when authorizing
 oauth app (#37403)

---
 apps/studio/pages/authorize.tsx | 36 +++++++++++++++++++++++++++------
 1 file changed, 30 insertions(+), 6 deletions(-)

diff --git a/apps/studio/pages/authorize.tsx b/apps/studio/pages/authorize.tsx
index 49e60d48ac923..70ebd6c5e4750 100644
--- a/apps/studio/pages/authorize.tsx
+++ b/apps/studio/pages/authorize.tsx
@@ -30,7 +30,7 @@ import {
 
 const APIAuthorizationPage: NextPageWithLayout = () => {
   const router = useRouter()
-  const { auth_id } = useParams()
+  const { auth_id, organization_slug } = useParams()
   const [isApproving, setIsApproving] = useState(false)
   const [isDeclining, setIsDeclining] = useState(false)
   const [selectedOrgSlug, setSelectedOrgSlug] = useState<string>()
@@ -58,7 +58,11 @@ const APIAuthorizationPage: NextPageWithLayout = () => {
 
   useEffect(() => {
     if (isSuccessOrganizations && organizations.length > 0) {
-      setSelectedOrgSlug(organizations[0].slug)
+      if (organization_slug) {
+        setSelectedOrgSlug(organizations.find(({ slug }) => slug === organization_slug)?.slug)
+      } else {
+        setSelectedOrgSlug(organizations[0].slug)
+      }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isSuccessOrganizations])
@@ -168,7 +172,9 @@ const APIAuthorizationPage: NextPageWithLayout = () => {
             <Button
               type="default"
               loading={isDeclining}
-              disabled={isApproving || isExpired}
+              disabled={
+                isApproving || isExpired || (Boolean(organization_slug) && !selectedOrgSlug)
+              }
               onClick={onDeclineRequest}
             >
               Decline
@@ -182,7 +188,9 @@ const APIAuthorizationPage: NextPageWithLayout = () => {
             ) : (
               <Button
                 loading={isApproving}
-                disabled={isDeclining || isExpired}
+                disabled={
+                  isDeclining || isExpired || (Boolean(organization_slug) && !selectedOrgSlug)
+                }
                 onClick={onApproveRequest}
               >
                 Authorize {requester?.name}
@@ -226,11 +234,27 @@ const APIAuthorizationPage: NextPageWithLayout = () => {
               first.
             </AlertDescription_Shadcn_>
           </Alert_Shadcn_>
+        ) : organization_slug && !selectedOrgSlug ? (
+          <Alert_Shadcn_ variant="warning">
+            <AlertCircle className="h-4 w-4" />
+            <AlertTitle_Shadcn_>
+              Organization is needed for installing an integration
+            </AlertTitle_Shadcn_>
+            <AlertDescription_Shadcn_ className="">
+              Your account is not a member of the pre-selected organization. To use this
+              integration, it must be installed within an organization your account is associated
+              with.
+            </AlertDescription_Shadcn_>
+          </Alert_Shadcn_>
         ) : (
           <Listbox
-            label="Select an organization to grant API access to"
+            label={
+              organization_slug
+                ? 'API access will be granted to pre-selected organization:'
+                : 'Select an organization to grant API access to:'
+            }
             value={selectedOrgSlug}
-            disabled={isExpired}
+            disabled={isExpired || Boolean(organization_slug)}
             onChange={setSelectedOrgSlug}
           >
             {(organizations ?? []).map((organization) => (