[dashboard] introduce "/?orgSlug=", which allows to pre-select an org in a "create workspace" URL (e.g. "/?orgSlug=org1#github.com/my/repo")

Author: geropl

components/dashboard/src/data/organizations/orgs-query.ts

@@ -61,14 +61,31 @@ export function useCurrentOrg(): { data?: Organization; isLoading: boolean } {
         return { data: undefined, isLoading: true };
     }
     let orgId = localStorage.getItem("active-org");
+    let org: Organization | undefined = undefined;
+    if (orgId) {
+        org = orgs.data.find((org) => org.id === orgId);
+    }
+
+    // 1. Check for org slug
+    const orgSlugParam = getOrgSlugFromQuery(location.search);
+    if (orgSlugParam) {
+        org = orgs.data.find((org) => org.slug === orgSlugParam);
+    }
+
+    // 2. Check for org id
+    // id is more speficic than slug, so it takes precedence
     const orgIdParam = new URLSearchParams(location.search).get("org");
     if (orgIdParam) {
         orgId = orgIdParam;
+        org = orgs.data.find((org) => org.id === orgId);
     }
-    let org = orgs.data.find((org) => org.id === orgId);
+
+    // 3. Fallback: pick the first org
     if (!org) {
         org = orgs.data[0];
     }
+
+    // Persist the selected org
     if (org) {
         localStorage.setItem("active-org", org.id);
     } else if (orgId && (orgs.isLoading || orgs.isStale)) {
@@ -79,3 +96,7 @@ export function useCurrentOrg(): { data?: Organization; isLoading: boolean } {
     }
     return { data: org, isLoading: false };
 }
+
+export function getOrgSlugFromQuery(search: string): string | undefined {
+    return new URLSearchParams(search).get("orgSlug") || undefined;
+}

components/dashboard/src/login/SSOLoginForm.tsx

@@ -13,6 +13,7 @@ import { openOIDCStartWindow } from "../provider-utils";
 import { useFeatureFlag } from "../data/featureflag-query";
 import { useLocation } from "react-router";
 import { useOnboardingState } from "../dedicated-setup/use-needs-setup";
+import { getOrgSlugFromQuery } from "../data/organizations/orgs-query";
 
 type Props = {
     onSuccess: () => void;
@@ -33,7 +34,10 @@ export const SSOLoginForm: FC<Props> = ({ onSuccess }) => {
     const singleOrgMode = (onboardingState?.organizationCountTotal || 0) < 2;
 
     const [orgSlug, setOrgSlug] = useState(
-        getOrgSlugFromPath(location.pathname) || window.localStorage.getItem("sso-org-slug") || "",
+        getOrgSlugFromPath(location.pathname) ||
+            window.localStorage.getItem("sso-org-slug") ||
+            getOrgSlugFromQuery(location.search) ||
+            "",
     );
     const [error, setError] = useState("");
 
@@ -80,7 +84,7 @@ export const SSOLoginForm: FC<Props> = ({ onSuccess }) => {
             <div className="mt-10 space-y-2 w-56">
                 {!singleOrgMode && (
                     <TextInputField
-                        label="Organization Slug"
+                        label="Organization"
                         placeholder="my-organization"
                         value={orgSlug}
                         onChange={setOrgSlug}