feat(site/experimental): add an organization switcher to the user menu

aslilac · aslilac · commit 25cc464e5da2 · 2024-05-14T16:51:26.000Z
diff --git a/site/src/api/queries/users.ts b/site/src/api/queries/users.ts
@@ -249,3 +249,10 @@ export const updateAppearanceSettings = (
     },
   };
 };
+
+export const myOrganizations = () => {
+  return {
+    queryKey: ["organizations", "me"],
+    queryFn: () => API.getOrganizations(),
+  };
+};
diff --git a/site/src/contexts/auth/RequireAuth.tsx b/site/src/contexts/auth/RequireAuth.tsx
@@ -67,7 +67,7 @@ export const RequireAuth: FC = () => {
 };
 
 type RequireKeys<T, R extends keyof T> = Omit<T, R> & {
-  [K in keyof Pick<T, R>]: NonNullable<T[K]>;
+  [K in keyof Pick<T, R>]-?: NonNullable<T[K]>;
 };
 
 // We can do some TS magic here but I would rather to be explicit on what
diff --git a/site/src/modules/dashboard/Navbar/UserDropdown/UserDropdown.tsx b/site/src/modules/dashboard/Navbar/UserDropdown/UserDropdown.tsx
@@ -1,6 +1,7 @@
 import { css, type Interpolation, type Theme, useTheme } from "@emotion/react";
 import Badge from "@mui/material/Badge";
 import type { FC } from "react";
+import { useQuery } from "react-query";
 import type * as TypesGen from "api/typesGenerated";
 import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
 import {
@@ -11,6 +12,7 @@ import {
 import { UserAvatar } from "components/UserAvatar/UserAvatar";
 import { BUTTON_SM_HEIGHT, navHeight } from "theme/constants";
 import { UserDropdownContent } from "./UserDropdownContent";
+import { myOrganizations } from "api/queries/users";
 
 export interface UserDropdownProps {
   user: TypesGen.User;
@@ -26,6 +28,7 @@ export const UserDropdown: FC<UserDropdownProps> = ({
   onSignOut,
 }) => {
   const theme = useTheme();
+  const organizationsQuery = useQuery(myOrganizations());
 
   return (
     <Popover>
@@ -63,6 +66,7 @@ export const UserDropdown: FC<UserDropdownProps> = ({
               user={user}
               buildInfo={buildInfo}
               supportLinks={supportLinks}
+              organizations={organizationsQuery.data}
               onSignOut={onSignOut}
             />
           </PopoverContent>
diff --git a/site/src/modules/dashboard/Navbar/UserDropdown/UserDropdownContent.tsx b/site/src/modules/dashboard/Navbar/UserDropdown/UserDropdownContent.tsx
@@ -20,6 +20,7 @@ import { CopyButton } from "components/CopyButton/CopyButton";
 import { ExternalImage } from "components/ExternalImage/ExternalImage";
 import { usePopover } from "components/Popover/Popover";
 import { Stack } from "components/Stack/Stack";
+import { useDashboard } from "modules/dashboard/useDashboard";
 
 export const Language = {
   accountLabel: "Account",
@@ -84,18 +85,21 @@ const styles = {
 
 export interface UserDropdownContentProps {
   user: TypesGen.User;
+  organizations?: TypesGen.Organization[];
   buildInfo?: TypesGen.BuildInfoResponse;
   supportLinks?: readonly TypesGen.LinkConfig[];
   onSignOut: () => void;
 }
 
 export const UserDropdownContent: FC<UserDropdownContentProps> = ({
-  buildInfo,
   user,
+  organizations,
+  buildInfo,
   supportLinks,
   onSignOut,
 }) => {
   const popover = usePopover();
+  const { organizationId, setOrganizationId } = useDashboard();
 
   const onPopoverClose = () => {
     popover.setIsOpen(false);
@@ -128,6 +132,42 @@ export const UserDropdownContent: FC<UserDropdownContentProps> = ({
 
       <Divider css={{ marginBottom: 8 }} />
 
+      {organizations && (
+        <div>
+          <div
+            css={{
+              padding: "8px 20px 6px",
+              textTransform: "uppercase",
+              letterSpacing: 1.1,
+              lineHeight: 1.1,
+              fontSize: "0.8em",
+            }}
+          >
+            My teams
+          </div>
+          {organizations.map((org) => (
+            <MenuItem
+              key={org.id}
+              css={styles.menuItem}
+              onClick={() => {
+                setOrganizationId(org.id);
+                popover.setIsOpen(false);
+              }}
+            >
+              {/* <LogoutIcon css={styles.menuItemIcon} /> */}
+              <Stack direction="row" spacing={1} css={styles.menuItemText}>
+                {org.name}
+                {organizationId == org.id && (
+                  <span css={{ fontSize: 12, color: "gray" }}>Current</span>
+                )}
+              </Stack>
+            </MenuItem>
+          ))}
+        </div>
+      )}
+
+      <Divider css={{ marginBottom: 8 }} />
+
       <Link to="/settings/account" css={styles.link}>
         <MenuItem css={styles.menuItem} onClick={onPopoverClose}>
           <AccountIcon css={styles.menuItemIcon} />
