From d5446a72a8b4147c021c5b643ec4a2a58ed455fe Mon Sep 17 00:00:00 2001 From: Michael Matloka Date: Thu, 7 May 2026 17:14:18 +0000 Subject: [PATCH 1/3] feat(auth): make region picker prominent in OAuth login flow Surface a side-by-side US Cloud / EU Cloud chooser above the sign-in button so non-technical users can no longer miss the region choice. Previously the region was buried behind a small "change" link, which caused EU customers to silently log into US Cloud and land on an empty project. The selected region is now also echoed on the sign-in button itself for an extra confirmation cue. Generated-By: PostHog Code Task-Id: d739b1d2-b053-45ec-967b-5521802d275b --- .../auth/components/OAuthControls.tsx | 27 ++-- .../features/auth/components/RegionSelect.tsx | 131 ++++++++++-------- 2 files changed, 88 insertions(+), 70 deletions(-) diff --git a/apps/code/src/renderer/features/auth/components/OAuthControls.tsx b/apps/code/src/renderer/features/auth/components/OAuthControls.tsx index 421e354e7..ab35711cc 100644 --- a/apps/code/src/renderer/features/auth/components/OAuthControls.tsx +++ b/apps/code/src/renderer/features/auth/components/OAuthControls.tsx @@ -14,8 +14,18 @@ export function OAuthControls() { errorMessage, } = useOAuthFlow(); + // Display the chosen region inline on the sign-in button so a user who + // doesn't read labels still spots EU vs US before clicking through. + const regionLabel = REGION_LABELS[region]; + return ( - <> + + + {errorMessage && ( {errorMessage} @@ -48,17 +58,10 @@ export function OAuthControls() { ) : ( )} - {isPending ? "Cancel" : "Sign in / sign up with PostHog"} + {isPending + ? "Cancel" + : `Sign in / sign up with PostHog \u00B7 ${regionLabel}`} - - - - - + ); } diff --git a/apps/code/src/renderer/features/auth/components/RegionSelect.tsx b/apps/code/src/renderer/features/auth/components/RegionSelect.tsx index 46126463d..32fa02526 100644 --- a/apps/code/src/renderer/features/auth/components/RegionSelect.tsx +++ b/apps/code/src/renderer/features/auth/components/RegionSelect.tsx @@ -1,82 +1,97 @@ import { Flex, Select, Text } from "@radix-ui/themes"; import { IS_DEV } from "@shared/constants/environment"; import type { CloudRegion } from "@shared/types/regions"; -import { useState } from "react"; interface RegionSelectProps { region: CloudRegion; - regionLabel: string; onRegionChange: (region: CloudRegion) => void; disabled?: boolean; } +interface RegionOption { + value: CloudRegion; + flag: string; + label: string; + hint: string; +} + +const REGION_OPTIONS: RegionOption[] = [ + { + value: "us", + flag: "\u{1F1FA}\u{1F1F8}", // US flag + label: "US Cloud", + hint: "us.posthog.com", + }, + { + value: "eu", + flag: "\u{1F1EA}\u{1F1FA}", // EU flag + label: "EU Cloud", + hint: "eu.posthog.com", + }, +]; + export function RegionSelect({ region, - regionLabel, onRegionChange, disabled = false, }: RegionSelectProps) { - const [expanded, setExpanded] = useState(false); - - if (!expanded) { - return ( - - - {regionLabel} - {" \u00B7 "} - - - - ); - } - return ( - + - + PostHog region - - + + Pick where your account lives - { - onRegionChange(value as CloudRegion); - setExpanded(false); - }} - size="2" - disabled={disabled} - > - - - US Cloud - EU Cloud - {IS_DEV && Development} - - +
+ {REGION_OPTIONS.map((option) => { + const isSelected = option.value === region; + return ( + + ); + })} +
+ {IS_DEV && ( + + Development override + onRegionChange(value as CloudRegion)} + size="2" + disabled={disabled} + > + + + US Cloud + EU Cloud + Development + + + + )} ); } From 827c4409a447fb79fdce37d0f4777651b8957ed7 Mon Sep 17 00:00:00 2001 From: Michael Matloka Date: Fri, 8 May 2026 09:30:06 +0200 Subject: [PATCH 2/3] Clean up --- .../auth/components/OAuthControls.tsx | 9 +- .../features/auth/components/RegionSelect.tsx | 119 ++++++++---------- .../components/sections/AccountSettings.tsx | 4 +- apps/code/src/shared/types/regions.ts | 31 ++++- 4 files changed, 82 insertions(+), 81 deletions(-) diff --git a/apps/code/src/renderer/features/auth/components/OAuthControls.tsx b/apps/code/src/renderer/features/auth/components/OAuthControls.tsx index ab35711cc..77ec95eb9 100644 --- a/apps/code/src/renderer/features/auth/components/OAuthControls.tsx +++ b/apps/code/src/renderer/features/auth/components/OAuthControls.tsx @@ -1,7 +1,6 @@ import { useOAuthFlow } from "@features/auth/hooks/useOAuthFlow"; import { Callout, Flex, Spinner } from "@radix-ui/themes"; import posthogIcon from "@renderer/assets/images/posthog-icon.svg"; -import { REGION_LABELS } from "@shared/types/regions"; import { RegionSelect } from "./RegionSelect"; export function OAuthControls() { @@ -14,10 +13,6 @@ export function OAuthControls() { errorMessage, } = useOAuthFlow(); - // Display the chosen region inline on the sign-in button so a user who - // doesn't read labels still spots EU vs US before clicking through. - const regionLabel = REGION_LABELS[region]; - return ( )} - {isPending - ? "Cancel" - : `Sign in / sign up with PostHog \u00B7 ${regionLabel}`} + {isPending ? "Cancel" : `Sign in / sign up with PostHog`} ); diff --git a/apps/code/src/renderer/features/auth/components/RegionSelect.tsx b/apps/code/src/renderer/features/auth/components/RegionSelect.tsx index 32fa02526..ee00c1497 100644 --- a/apps/code/src/renderer/features/auth/components/RegionSelect.tsx +++ b/apps/code/src/renderer/features/auth/components/RegionSelect.tsx @@ -1,6 +1,6 @@ -import { Flex, Select, Text } from "@radix-ui/themes"; +import { Flex, Text } from "@radix-ui/themes"; import { IS_DEV } from "@shared/constants/environment"; -import type { CloudRegion } from "@shared/types/regions"; +import { type CloudRegion, REGION_LABELS } from "@shared/types/regions"; interface RegionSelectProps { region: CloudRegion; @@ -8,27 +8,7 @@ interface RegionSelectProps { disabled?: boolean; } -interface RegionOption { - value: CloudRegion; - flag: string; - label: string; - hint: string; -} - -const REGION_OPTIONS: RegionOption[] = [ - { - value: "us", - flag: "\u{1F1FA}\u{1F1F8}", // US flag - label: "US Cloud", - hint: "us.posthog.com", - }, - { - value: "eu", - flag: "\u{1F1EA}\u{1F1FA}", // EU flag - label: "EU Cloud", - hint: "eu.posthog.com", - }, -]; +const LOGIN_GRID_REGIONS: CloudRegion[] = ["us", "eu"]; export function RegionSelect({ region, @@ -42,56 +22,61 @@ export function RegionSelect({ PostHog region - Pick where your account lives + Pick where your data lives
- {REGION_OPTIONS.map((option) => { - const isSelected = option.value === region; - return ( - - ); - })} + {LOGIN_GRID_REGIONS.map((regionKey) => ( + onRegionChange(regionKey)} + /> + ))}
{IS_DEV && ( - - Development override - onRegionChange(value as CloudRegion)} - size="2" - disabled={disabled} - > - - - US Cloud - EU Cloud - Development - - - + onRegionChange("dev")} + /> )} ); } + +function RegionPickerOptionButton({ + regionKey, + selected, + disabled, + onSelect, +}: { + regionKey: CloudRegion; + selected: boolean; + disabled: boolean; + onSelect: () => void; +}) { + const { flag, label, hint } = REGION_LABELS[regionKey]; + return ( + + ); +} diff --git a/apps/code/src/renderer/features/settings/components/sections/AccountSettings.tsx b/apps/code/src/renderer/features/settings/components/sections/AccountSettings.tsx index 0fcd3265d..31c7705ad 100644 --- a/apps/code/src/renderer/features/settings/components/sections/AccountSettings.tsx +++ b/apps/code/src/renderer/features/settings/components/sections/AccountSettings.tsx @@ -7,7 +7,7 @@ import { import { useSeat } from "@hooks/useSeat"; import { SignOut } from "@phosphor-icons/react"; import { Avatar, Badge, Button, Flex, Spinner, Text } from "@radix-ui/themes"; -import { REGION_LABELS } from "@shared/types/regions"; +import { formatRegionBadge } from "@shared/types/regions"; export function AccountSettings() { const isAuthenticated = useAuthStateValue( @@ -66,7 +66,7 @@ export function AccountSettings() { {cloudRegion && ( - {REGION_LABELS[cloudRegion]} + {formatRegionBadge(cloudRegion)} )} {seat && ( diff --git a/apps/code/src/shared/types/regions.ts b/apps/code/src/shared/types/regions.ts index af8cc5b52..65bcb3f70 100644 --- a/apps/code/src/shared/types/regions.ts +++ b/apps/code/src/shared/types/regions.ts @@ -1,7 +1,30 @@ export type CloudRegion = "us" | "eu" | "dev"; -export const REGION_LABELS: Record = { - us: "πŸ‡ΊπŸ‡Έ US Cloud", - eu: "πŸ‡ͺπŸ‡Ί EU Cloud", - dev: "πŸ› οΈ Development", +export interface RegionLabel { + flag: string; + label: string; + hint: string; +} + +export const REGION_LABELS: Record = { + us: { + flag: "πŸ‡ΊπŸ‡Έ", + label: "US Cloud", + hint: "us.posthog.com", + }, + eu: { + flag: "πŸ‡ͺπŸ‡Ί", + label: "EU Cloud", + hint: "eu.posthog.com", + }, + dev: { + flag: "πŸ› οΈ", + label: "Local development", + hint: "localhost:8010", + }, }; + +export function formatRegionBadge(region: CloudRegion): string { + const entry = REGION_LABELS[region]; + return `${entry.flag} ${entry.label}`; +} From 15004e8931b3811ccd34ae1444d8679a4e8aa6dd Mon Sep 17 00:00:00 2001 From: Michael Matloka Date: Fri, 8 May 2026 08:56:28 +0100 Subject: [PATCH 3/3] Update apps/code/src/renderer/features/auth/components/OAuthControls.tsx Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com> --- .../src/renderer/features/auth/components/OAuthControls.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/code/src/renderer/features/auth/components/OAuthControls.tsx b/apps/code/src/renderer/features/auth/components/OAuthControls.tsx index 77ec95eb9..e6e15b2b8 100644 --- a/apps/code/src/renderer/features/auth/components/OAuthControls.tsx +++ b/apps/code/src/renderer/features/auth/components/OAuthControls.tsx @@ -53,7 +53,7 @@ export function OAuthControls() { ) : ( )} - {isPending ? "Cancel" : `Sign in / sign up with PostHog`} + {isPending ? "Cancel" : "Sign in / sign up with PostHog"} );