refactor: Remove user roles from dropdown (#4419)

site/src/components/BorderedMenu/BorderedMenu.tsx

@@ -34,11 +34,11 @@ const useStyles = makeStyles((theme) => ({
 
     "&[data-variant='user-dropdown'] $paperRoot": {
       paddingBottom: theme.spacing(1),
-      width: 292,
+      minWidth: 292,
     },
   },
   paperRoot: {
-    width: "292px",
+    minWidth: 292,
     border: `2px solid ${theme.palette.secondary.dark}`,
     borderRadius: theme.shape.borderRadius,
     boxShadow: theme.shadows[6],

site/src/components/UserDropdown/UsersDropdown.tsx

@@ -85,11 +85,10 @@ export const useStyles = makeStyles((theme) => ({
 
   menuItem: {
     height: navHeight,
-    padding: `${theme.spacing(1.5)}px 0px ${theme.spacing(1.5)}px ${theme.spacing(2.75)}px`,
+    padding: theme.spacing(1.5, 0),
 
     "&:hover": {
-      backgroundColor: theme.palette.action.hover,
-      transition: "background-color 0.3s ease",
+      backgroundColor: "transparent",
     },
   },
 }))

site/src/components/UserDropdownContent/UserDropdownContent.test.tsx

@@ -1,5 +1,5 @@
 import { screen } from "@testing-library/react"
-import { MockOwnerRole, MockUser } from "../../testHelpers/entities"
+import { MockUser } from "../../testHelpers/entities"
 import { render } from "../../testHelpers/renderHelpers"
 import { Language, UserDropdownContent } from "./UserDropdownContent"
 
@@ -23,12 +23,6 @@ describe("UserDropdownContent", () => {
     expect(screen.getByText(Language.signOutLabel)).toBeDefined()
   })
 
-  it("displays the user's roles", () => {
-    render(<UserDropdownContent user={MockUser} onSignOut={jest.fn()} onPopoverClose={jest.fn()} />)
-
-    expect(screen.getByText(MockOwnerRole.display_name)).toBeDefined()
-  })
-
   it("has the correct link for the account item", () => {
     render(<UserDropdownContent user={MockUser} onSignOut={jest.fn()} onPopoverClose={jest.fn()} />)
 

site/src/components/UserDropdownContent/UserDropdownContent.tsx

@@ -1,4 +1,3 @@
-import Chip from "@material-ui/core/Chip"
 import Divider from "@material-ui/core/Divider"
 import ListItemIcon from "@material-ui/core/ListItemIcon"
 import ListItemText from "@material-ui/core/ListItemText"
@@ -9,7 +8,6 @@ import AccountIcon from "@material-ui/icons/AccountCircleOutlined"
 import { FC } from "react"
 import { Link } from "react-router-dom"
 import * as TypesGen from "../../api/typesGenerated"
-import { Role } from "../../api/typesGenerated"
 import { navHeight } from "../../theme/constants"
 import { DocsIcon } from "../Icons/DocsIcon"
 import { LogoutIcon } from "../Icons/LogoutIcon"
@@ -46,13 +44,6 @@ export const UserDropdownContent: FC<UserDropdownContentProps> = ({
         </div>
         <Typography className={styles.userName}>{user.username}</Typography>
         <Typography className={styles.userEmail}>{user.email}</Typography>
-        <ul className={styles.chipContainer}>
-          {user.roles.map((role: Role) => (
-            <li key={role.name} className={styles.chipStyles}>
-              <Chip classes={{ root: styles.chipRoot }} label={role.display_name} />
-            </li>
-          ))}
-        </ul>
       </div>
 
       <Divider />
@@ -94,7 +85,7 @@ export const UserDropdownContent: FC<UserDropdownContentProps> = ({
 
 const useStyles = makeStyles((theme) => ({
   root: {
-    paddingTop: theme.spacing(3),
+    padding: theme.spacing(3, 2),
     textAlign: "center",
   },
   avatarContainer: {
@@ -116,27 +107,13 @@ const useStyles = makeStyles((theme) => ({
   },
   userName: {
     fontSize: 16,
-    marginBottom: theme.spacing(0.5),
+    marginTop: theme.spacing(1),
   },
   userEmail: {
     fontSize: 14,
     letterSpacing: 0.2,
     color: theme.palette.text.secondary,
   },
-  chipContainer: {
-    display: "flex",
-    justifyContent: "center",
-    flexWrap: "wrap",
-    listStyle: "none",
-    margin: "0",
-    padding: `${theme.spacing(1.5)}px ${theme.spacing(2.75)}px`,
-  },
-  chipStyles: {
-    margin: theme.spacing(0.5),
-  },
-  chipRoot: {
-    backgroundColor: theme.palette.secondary.dark,
-  },
   link: {
     textDecoration: "none",
     color: "inherit",