added view as button to user menu

src/teams/TeamList.tsx

@@ -9,6 +9,7 @@ import {
   ListItemButton,
   Box,
   IconButton,
+  Grid2,
 } from "@mui/material";
 import { pond } from "protobuf-ts/pond";
 import { useGlobalState, useSnackbar, useTeamAPI, useUserAPI } from "providers";
@@ -59,7 +60,7 @@ export default function TeamList() {
   const history = useNavigate();
   const isMobile = useMobile()
   const snackbar = useSnackbar();
-  const [{ user, as }] = useGlobalState();
+  const [{ user, as, team }] = useGlobalState();
   const [teamPerms, setTeamPerms] = useState<Map<string | number, pond.Permission[]>>(new Map());
   const [teamPrefs, setTeamPrefs] = useState<Map<string | number, pond.TeamPreferences> >(new Map());
   const [total, setTotal] = useState<number>(0);
@@ -73,13 +74,17 @@ export default function TeamList() {
     setLoading(true);
     let newTeamPerms: Map<string | number, pond.Permission[]> = new Map();
     let newTeamPrefs: Map<string | number, pond.TeamPreferences> = new Map();
+    let viewAs: string | undefined = as
+    if (as === team.key()) {
+      viewAs = undefined
+    }
     teamAPI
-      .listTeams(limit, limit * page, undefined, "name", undefined, undefined, as, search)
+      .listTeams(limit, limit * page, undefined, "name", undefined, undefined, viewAs, search)
       .then(resp => {
         setTotal(resp.data.total ? resp.data.total : 0);
         let newTeams: Team[] = []
         resp.data.teams.forEach(team => {
-          let u = as ? as : user.id();
+          let u = viewAs ? viewAs : user.id();
           let t = Team.create(team)
           if (team.settings && u !== "") {
             userAPI
@@ -207,9 +212,22 @@ export default function TeamList() {
   const renderTitle = () => {
     return (
       <Box className={classes.titleBox}>
-        <Typography variant="h5">
-          Teams
+        <Avatar
+          src={user.settings.avatar}
+        />
+        <Grid2 container direction="column" marginLeft={1}>
+          <Grid2 marginBottom={-0.25}>
+            <Typography variant="h6">
+              {user.name()}'s Teams
             </Typography>
+          </Grid2>
+          <Grid2 marginTop={-0.25}>
+            <Typography variant="body2">
+              All teams you are a member of.
+            </Typography>
+          </Grid2>
+        </Grid2>
+        
         <IconButton onClick={() => setTeamDialogOpen(true)} color="primary" className={classes.button}>
           <AddBox/>
         </IconButton>

src/user/UserMenu.tsx

@@ -1,4 +1,4 @@
-import { Avatar, Box, Button, IconButton, ListItemIcon, ListItemText, Menu, MenuItem, PaletteColor, Theme, Tooltip, useTheme } from "@mui/material";
+import { Avatar, Box, Button, Checkbox, IconButton, ListItemIcon, ListItemText, Menu, MenuItem, PaletteColor, Theme, Tooltip, useTheme } from "@mui/material";
 import { useGlobalState } from "../providers/StateContainer";
 import { getSecondaryColour, getSignatureAccentColour } from "../services/whiteLabel";
 import { makeStyles } from "@mui/styles";
@@ -14,6 +14,7 @@ import { purple } from "@mui/material/colors";
 import { useNavigate } from "react-router-dom";
 import TeamDialog from "teams/TeamDialog";
 import AccessObject from "./AccessObject";
+import { useSnackbar, useUserAPI } from "hooks";
 
 const useStyles = makeStyles((theme: Theme) => ({
   accessIcon: {
@@ -80,19 +81,20 @@ interface Props {
 export default function UserMenu(props: Props) {
 
   const { toggleTheme } = props;
-  const [{ user, team, as }] = useGlobalState();
+  const [{ user, team, as }, dispatch] = useGlobalState();
   const { loginWithRedirect } = useAuth0();
   const classes = useStyles();
   const theme = useTheme();
 
+  const userAPI = useUserAPI()
+  const snackbar = useSnackbar()
+
   const name = user.name();
   const picture = user.settings.avatar;
   const [lockIsHovered, setLockIsHovered] = useState<boolean>(false);
   const [userMenuIsOpen, setUserMenuIsOpen] = useState(false);
   const [anchorEl, setAnchorEl] = useState<any>(null);
   const [userSettingsIsOpen, setUserSettingsIsOpen] = useState<boolean>(false);
-  // const hasAdmin = user.hasFeature ? user.hasFeature("admin") : false;
-  // const allowedToCopyToken = user.allowedTo("copy-token");
   const hasTeams = user.hasFeature ? user.hasFeature("teams") : false;
   const [teamDialogIsOpen, setTeamDialogIsOpen] = useState<boolean>(false);
   const [accessDialogOpen, setAccessDialogOpen] = useState<boolean>(false);
@@ -242,6 +244,36 @@ export default function UserMenu(props: Props) {
             <ListItemText primary="Select Team" />
           </MenuItem>
         )}
+        {hasTeams && (
+          <MenuItem
+            onClick={() => {
+              if (as.length > 1) {
+                user.settings.useTeam = false;
+                dispatch({ key: "as", value: "" });
+                userAPI.updateUser(user.id(), user.protobuf()).then(_resp => {
+                  snackbar.info("Will no longer view as team by default");
+                });
+              } else {
+                user.settings.useTeam = true;
+                dispatch({ key: "as", value: team.key() });
+                userAPI.updateUser(user.id(), user.protobuf()).then(_resp => {
+                  snackbar.info("Will now view as " + team.name() + " by default");
+                });
+              }
+            }}
+            disabled={user.settings.defaultTeam.length < 1}
+            aria-label="Open Team Menu"
+            dense>
+            <ListItemIcon>
+              <Checkbox
+                disabled={user.settings.defaultTeam.length < 1}
+                checked={as.length > 1}
+                style={{ margin: 0, padding: 0 }}
+              />
+            </ListItemIcon>
+            <ListItemText primary="View Site as Team" />
+          </MenuItem>
+        )}
         {hasAdmin && (
           <Tooltip title="Access Object">
             <MenuItem onClick={() => openAccessObject()} aria-label="Access Object" dense>