today is the day to be less stupid. don't detect system route by looking at strings

Author: david-crespo

app/components/TopBar.tsx

@@ -1,5 +1,5 @@
 import { Menu, MenuButton, MenuItem, MenuList } from '@reach/menu-button'
-import { useLocation, useNavigate, useParams } from 'react-router-dom'
+import { useNavigate, useParams } from 'react-router-dom'
 
 import { navToLogin, useApiMutation, useApiQuery } from '@oxide/api'
 import {
@@ -15,7 +15,19 @@ import { pb } from 'app/util/path-builder'
 
 import { OrgPicker, ProjectPicker, SiloSystemPicker } from './TopBarPicker'
 
-export function TopBar() {
+type TopBarProps = {
+  /**
+   * Passing around flags like this is definitely a code smell, but this is the
+   * simplest thing for now. This allows `SystemLayout` to tell us when we're on
+   * a system route (instead of detecting it in an unreliable way by, for
+   * example, checking what the pathname starts with) while at the same time
+   * keeping the logic for showing/hiding the system/silo picker based on the
+   * current user's permissions bundled up in here.
+   */
+  isSystemRoute?: boolean
+}
+
+export function TopBar({ isSystemRoute = false }: TopBarProps) {
   const navigate = useNavigate()
   const logout = useApiMutation('logout', {
     onSuccess: () => {
@@ -42,20 +54,18 @@ export function TopBar() {
   // would see the silo picker pop in when the request resolves. Bad.
   const isFleetViewer = !!systemPolicy
 
-  const isSystem = pb.isSystemPath(useLocation().pathname)
-
   const { projectName } = useParams()
 
   const [cornerPicker, ...otherPickers] = [
-    isFleetViewer && <SiloSystemPicker isSystem={isSystem} key={0} />,
+    isFleetViewer && <SiloSystemPicker isSystemRoute={isSystemRoute} key={0} />,
     // TODO: This works ok in most situations, but when an operator user is on
     // the orgs page with no org selected, they see this picker, which is
     // redundant with the list of orgs. Overall this logic is starting to feel
     // silly, which points to a non-centralized approach handled in the layouts
     // like we were doing before. That way, for example, we know whether we're
     // on a system situation because we're in SystemLayout. Seems pretty obvious
     // in hindsight.
-    !isSystem && <OrgPicker key={1} />,
+    !isSystemRoute && <OrgPicker key={1} />,
     projectName && <ProjectPicker key={2} />,
   ].filter(isTruthy)
 

app/components/TopBarPicker.tsx

@@ -104,7 +104,7 @@ const NoOrgLogo = () => (
   </div>
 )
 
-export function SiloSystemPicker({ isSystem }: { isSystem: boolean }) {
+export function SiloSystemPicker({ isSystemRoute }: { isSystemRoute: boolean }) {
   const commonProps = {
     items: [
       { label: 'System', to: pb.silos() },
@@ -113,7 +113,7 @@ export function SiloSystemPicker({ isSystem }: { isSystem: boolean }) {
     'aria-label': 'Switch between system and silo',
   }
 
-  return isSystem ? (
+  return isSystemRoute ? (
     <TopBarPicker
       {...commonProps}
       category="System"

app/layouts/SystemLayout.tsx

@@ -39,7 +39,7 @@ SystemLayout.loader = async () => {
 export default function SystemLayout() {
   return (
     <PageContainer>
-      <TopBar />
+      <TopBar isSystemRoute />
       <Sidebar>
         <Sidebar.Nav>
           <DocsLinkItem />

app/util/path-builder.ts

@@ -54,9 +54,6 @@ export const pb = {
   sshKeys: () => '/settings/ssh-keys',
 
   deviceSuccess: () => '/device/success',
-
-  // someday we'll be less stupid. not today
-  isSystemPath: (pathname: string) => pathname.startsWith(pb.system()),
 }
 
 // export const jelly = 'just kidding'