From 23802e15faf9593b97d6adf0afcd02bb6d01e382 Mon Sep 17 00:00:00 2001
From: jog1t <39823706+jog1t@users.noreply.github.com>
Date: Thu, 8 Jan 2026 15:07:15 +0000
Subject: [PATCH] fix(frontend): prefetch context switcher content only on org
 routes (#3792)

### TL;DR

Refactored the ContextSwitcher component to improve code organization and fix a naming inconsistency.

### What changed?

- Extracted the inner functionality of `ContextSwitcher` into a new `ContextSwitcherInner` component
- Renamed `useContextSwitchMatch` to `useContextSwitcherMatch` for consistency
- Simplified conditional logic by passing the organization as a prop to the inner component
- Removed unnecessary type checking and conditional expressions

### How to test?

1. Navigate to pages that use the context switcher
2. Verify the context switcher appears correctly
3. Click on the context switcher to open the dropdown
4. Confirm that all functionality works as expected

### Why make this change?

This refactoring improves code readability and maintainability by:
- Creating a clearer separation of concerns between components
- Fixing inconsistent naming conventions
- Simplifying conditional logic that was unnecessarily complex
- Making the code more predictable by using props instead of accessing context data in multiple places
---
 frontend/src/app/context-switcher.tsx | 59 +++++++++++++--------------
 1 file changed, 28 insertions(+), 31 deletions(-)

diff --git a/frontend/src/app/context-switcher.tsx b/frontend/src/app/context-switcher.tsx
index 96b6fdaec0..b73644e62a 100644
--- a/frontend/src/app/context-switcher.tsx
+++ b/frontend/src/app/context-switcher.tsx
@@ -27,48 +27,45 @@ import { SafeHover } from "@/components/safe-hover";
 import { VisibilitySensor } from "@/components/visibility-sensor";
 
 export function ContextSwitcher() {
-	const [isOpen, setIsOpen] = useState(false);
+	const match = useContextSwitcherMatch();
+
+	if (!match) {
+		return null;
+	}
 
-	const match = useContextSwitchMatch();
+	return <ContextSwitcherInner organization={match.organization} />;
+}
 
+function ContextSwitcherInner({ organization }: { organization: string }) {
+	const [isOpen, setIsOpen] = useState(false);
 	usePrefetchInfiniteQuery({
-		enabled: typeof match === "object" && "organization" in match,
 		...useCloudDataProvider().projectsQueryOptions({
-			organization:
-				typeof match === "object" && "organization" in match
-					? match.organization
-					: "",
+			organization,
 		}),
 	});
 
-	if (!match) {
-		return null;
-	}
-
 	return (
-		<>
-			<Popover open={isOpen} onOpenChange={setIsOpen}>
-				<PopoverTrigger asChild>
-					<Button
-						variant="outline"
-						className="flex h-auto justify-between items-center px-2 py-1.5"
-						endIcon={<Icon icon={faChevronDown} />}
-					>
-						<Breadcrumbs />
-					</Button>
-				</PopoverTrigger>
-				<PopoverContent
-					className="p-0 max-w-[calc(12rem*3)] w-full"
-					align="start"
+		<Popover open={isOpen} onOpenChange={setIsOpen}>
+			<PopoverTrigger asChild>
+				<Button
+					variant="outline"
+					className="flex h-auto justify-between items-center px-2 py-1.5"
+					endIcon={<Icon icon={faChevronDown} />}
 				>
-					<Content onClose={() => setIsOpen(false)} />
-				</PopoverContent>
-			</Popover>
-		</>
+					<Breadcrumbs />
+				</Button>
+			</PopoverTrigger>
+			<PopoverContent
+				className="p-0 max-w-[calc(12rem*3)] w-full"
+				align="start"
+			>
+				<Content onClose={() => setIsOpen(false)} />
+			</PopoverContent>
+		</Popover>
 	);
 }
 
-const useContextSwitchMatch = ():
+const useContextSwitcherMatch = ():
 	| {
 			project: string;
 			namespace: string;
@@ -100,7 +97,7 @@ const useContextSwitchMatch = ():
 };
 
 function Breadcrumbs() {
-	const match = useContextSwitchMatch();
+	const match = useContextSwitcherMatch();
 
 	if (match && "project" in match && "namespace" in match) {
 		return (