Ability to navigate to the user's accounts from the main page

src/AllRoutes.tsx

@@ -21,6 +21,7 @@ import GitHubIcon from '@mui/icons-material/GitHub';
 import GCPStatus from './components/status/GCPStatus';
 import GitHubStatus from './components/status/GitHubStatus';
 import * as Sentry from '@sentry/react';
+import AccountsSwitch from './components/common/AccountSwitch';
 
 const AsyncViewerProfile = React.lazy(() => import('./scenes/Profile/ViewerProfile'));
 
@@ -228,6 +229,11 @@ function AllRoutes() {
                 Cirrus CI
               </Typography>
             </Link>
+            <Suspense fallback={<div />}>
+              <div className={classes.titleShift}>
+                <AccountsSwitch></AccountsSwitch>
+              </div>
+            </Suspense>
             <div className={classes.flex} />
             <Suspense fallback={<div />}>
               <GCPStatus />

src/components/common/AccountSwitch.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useNavigate } from 'react-router-dom';
-import { useFragment } from 'react-relay';
+import { useLazyLoadQuery } from 'react-relay';
 import { graphql } from 'babel-plugin-relay/macro';
 
 import Menu from '@mui/material/Menu';
@@ -10,25 +10,11 @@ import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
 
 import { navigateHelper } from '../../utils/navigateHelper';
 
-import { AccountSwitch_viewer$key } from './__generated__/AccountSwitch_viewer.graphql';
+import { AccountSwitchQuery } from './__generated__/AccountSwitchQuery.graphql';
 
-interface AccountSwitchProps {
-  viewer?: AccountSwitch_viewer$key;
-}
+interface AccountSwitchProps {}
 
 export default function AccountsSwitch(props: AccountSwitchProps) {
-  let viewer = useFragment(
-    graphql`
-      fragment AccountSwitch_viewer on User {
-        relatedOwners {
-          platform
-          name
-        }
-      }
-    `,
-    props.viewer,
-  );
-
   const navigate = useNavigate();
 
   const [menuAnchorEl, setMenuAnchorEl] = React.useState<null | HTMLElement>(null);
@@ -46,6 +32,19 @@ export default function AccountsSwitch(props: AccountSwitchProps) {
     navigateHelper(navigate, e, '/github/' + name);
   };
 
+  const viewer = useLazyLoadQuery<AccountSwitchQuery>(
+    graphql`
+      query AccountSwitchQuery {
+        viewer {
+          relatedOwners {
+            platform
+            name
+          }
+        }
+      }
+    `,
+    {},
+  ).viewer;
   if (!viewer) return null;
   if (viewer.relatedOwners && viewer.relatedOwners.length <= 1) return null;
 

src/components/common/AppBreadcrumbs.tsx

@@ -16,13 +16,11 @@ import BookmarkBorderIcon from '@mui/icons-material/BookmarkBorder';
 
 import { absoluteLink } from '../../utils/link';
 import RepositoryIcon from './RepositoryIcon';
-import AccountSwitch from './AccountSwitch';
 
 import { AppBreadcrumbs_build$key } from './__generated__/AppBreadcrumbs_build.graphql';
 import { AppBreadcrumbs_repository$key } from './__generated__/AppBreadcrumbs_repository.graphql';
 import { AppBreadcrumbs_task$key } from './__generated__/AppBreadcrumbs_task.graphql';
 import { AppBreadcrumbs_info$key } from './__generated__/AppBreadcrumbs_info.graphql';
-import { AppBreadcrumbs_viewer$key } from './__generated__/AppBreadcrumbs_viewer.graphql';
 
 const useStyles = makeStyles(theme => {
   return {
@@ -61,7 +59,6 @@ interface Props {
     href?: string;
     Icon: typeof SvgIcon | React.ElementType;
   }>;
-  viewer?: AppBreadcrumbs_viewer$key;
 }
 
 export default function AppBreadcrumbs(props: Props) {
@@ -121,14 +118,6 @@ export default function AppBreadcrumbs(props: Props) {
     `,
     props.task,
   );
-  let viewer = useFragment(
-    graphql`
-      fragment AppBreadcrumbs_viewer on User {
-        ...AccountSwitch_viewer
-      }
-    `,
-    props.viewer,
-  );
 
   let { branch, extraCrumbs } = props;
   let classes = useStyles();
@@ -177,7 +166,6 @@ export default function AppBreadcrumbs(props: Props) {
 
   return (
     <Stack className={classes.root} direction="row" spacing={1}>
-      <AccountSwitch viewer={viewer} />
       <Breadcrumbs
         className={classes.breadcrumbs}
         separator={<NavigateNextIcon fontSize="small" />}

src/scenes/Build/BuildById.tsx

@@ -19,9 +19,6 @@ export default function BuildById(): JSX.Element {
           ...BuildDetails_build
           ...AppBreadcrumbs_build
         }
-        viewer {
-          ...AppBreadcrumbs_viewer
-        }
       }
     `,
     { buildId },
@@ -32,7 +29,7 @@ export default function BuildById(): JSX.Element {
   }
   return (
     <>
-      <AppBreadcrumbs build={response.build} viewer={response.viewer} />
+      <AppBreadcrumbs build={response.build} />
       <BuildDetails build={response.build} />
     </>
   );

src/scenes/Build/BuildBySHA.tsx

@@ -21,9 +21,6 @@ export default function BuildBySHA() {
           ...BuildDetails_build
           ...AppBreadcrumbs_build
         }
-        viewer {
-          ...AppBreadcrumbs_viewer
-        }
       }
     `,
     { owner, name, SHA },
@@ -40,7 +37,7 @@ export default function BuildBySHA() {
   }
   return (
     <>
-      <AppBreadcrumbs build={response.searchBuilds[0]} viewer={response.viewer} />
+      <AppBreadcrumbs build={response.searchBuilds[0]} />
       <BuildDetails build={response.searchBuilds[0]} />
     </>
   );

src/scenes/Owner/Owner.tsx

@@ -19,9 +19,6 @@ export default function Owner(): JSX.Element {
           ...OwnerRepositoryList_info
           ...AppBreadcrumbs_info
         }
-        viewer {
-          ...AppBreadcrumbs_viewer
-        }
       }
     `,
     { platform, owner },
@@ -32,7 +29,7 @@ export default function Owner(): JSX.Element {
   }
   return (
     <>
-      <AppBreadcrumbs info={response.ownerInfoByName} viewer={response.viewer} />
+      <AppBreadcrumbs info={response.ownerInfoByName} />
       <OwnerRepositoryList info={response.ownerInfoByName} />
     </>
   );

src/scenes/Owner/OwnerSettingsRenderer.tsx

@@ -19,9 +19,6 @@ export default function OwnerSettingsRenderer(): JSX.Element {
           ...OwnerSettings_info
           ...AppBreadcrumbs_info
         }
-        viewer {
-          ...AppBreadcrumbs_viewer
-        }
       }
     `,
     { platform, name },
@@ -31,7 +28,6 @@ export default function OwnerSettingsRenderer(): JSX.Element {
     <>
       <AppBreadcrumbs
         info={response.ownerInfoByName}
-        viewer={response.viewer}
         extraCrumbs={[
           {
             name: 'Account Settings',

src/scenes/Repository/OwnerRepository.tsx

@@ -22,9 +22,6 @@ export default function OwnerRepository(): JSX.Element {
           ...AppBreadcrumbs_repository
           ...RepositoryBuildList_repository @arguments(branch: $branch)
         }
-        viewer {
-          ...AppBreadcrumbs_viewer
-        }
       }
     `,
     { platform, owner, name, branch },
@@ -42,7 +39,7 @@ export default function OwnerRepository(): JSX.Element {
   }
   return (
     <>
-      <AppBreadcrumbs repository={response.ownerRepository} viewer={response.viewer} branch={branch} />
+      <AppBreadcrumbs repository={response.ownerRepository} branch={branch} />
       <RepositoryBuildList repository={response.ownerRepository} branch={branch} />
     </>
   );

src/scenes/RepositoryMetrics/RepositoryMetrics.tsx

@@ -20,9 +20,6 @@ export default function RepositoryMetrics(parentProps): JSX.Element {
           ...AppBreadcrumbs_repository
           ...RepositoryMetricsPage_repository
         }
-        viewer {
-          ...AppBreadcrumbs_viewer
-        }
       }
     `,
     { platform, owner, name },
@@ -35,7 +32,6 @@ export default function RepositoryMetrics(parentProps): JSX.Element {
     <>
       <AppBreadcrumbs
         repository={response.ownerRepository}
-        viewer={response.viewer}
         extraCrumbs={[
           {
             name: 'Metrics',

src/scenes/RepositorySettings/RepositorySettings.tsx

@@ -20,9 +20,6 @@ export default function RepositorySettings(): JSX.Element {
           ...AppBreadcrumbs_repository
           ...RepositorySettingsPage_repository
         }
-        viewer {
-          ...AppBreadcrumbs_viewer
-        }
       }
     `,
     { repositoryId },
@@ -35,7 +32,6 @@ export default function RepositorySettings(): JSX.Element {
     <>
       <AppBreadcrumbs
         repository={response.repository}
-        viewer={response.viewer}
         extraCrumbs={[
           {
             name: 'Repository Settings',

src/scenes/Task/Task.tsx

@@ -19,9 +19,6 @@ export default function Task(): JSX.Element {
           ...TaskDetails_task
           ...AppBreadcrumbs_task
         }
-        viewer {
-          ...AppBreadcrumbs_viewer
-        }
       }
     `,
     { taskId },
@@ -32,7 +29,7 @@ export default function Task(): JSX.Element {
   }
   return (
     <>
-      <AppBreadcrumbs task={response.task} viewer={response.viewer} />
+      <AppBreadcrumbs task={response.task} />
       <TaskDetails task={response.task} />
     </>
   );