dashboard: fix missing avatar and logout menu (#3819)

This commit is contained in:
Caleb Doxsey 2022-12-17 09:04:01 -07:00 committed by GitHub
parent 539fd51579
commit 191eeceb05
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -1,8 +1,3 @@
import { PageData } from "../types";
import { Avatar } from "./Avatar";
import Logo from "./Logo";
import { ToolbarOffset } from "./ToolbarOffset";
import UserSidebarContent from "./UserSidebarContent";
import {
Drawer,
IconButton,
@ -18,7 +13,13 @@ import styled from "@mui/material/styles/styled";
import { get } from "lodash";
import React, { FC, useState } from "react";
import { ChevronLeft, ChevronRight, Menu as MenuIcon } from "react-feather";
import LogoURL from "../static/logo_white.svg";
import { PageData } from "../types";
import { Avatar } from "./Avatar";
import Logo from "./Logo";
import { ToolbarOffset } from "./ToolbarOffset";
import UserSidebarContent from "./UserSidebarContent";
const DrawerHeader = styled("div")(({ theme }) => ({
display: "flex",
@ -47,7 +48,15 @@ const Header: FC<HeaderProps> = ({ includeSidebar, data }) => {
setAnchorEl(null);
};
const userName =
get(data, "user.name") || get(data, "user.claims.given_name");
get(data, "user.name") ||
get(data, "user.claims.given_name") ||
get(data, "profile.claims.name") ||
get(data, "profile.claims.given_name") ||
"";
const userPictureUrl =
get(data, "user.claims.picture") ||
get(data, "profile.claims.picture") ||
null;
const handleDrawerOpen = () => {
setDrawerOpen(true);
@ -109,17 +118,12 @@ const Header: FC<HeaderProps> = ({ includeSidebar, data }) => {
</>
) : (
<a href="/.pomerium">
<Logo src={ data?.logoUrl || LogoURL }/>
<Logo src={data?.logoUrl || LogoURL} />
</a>
)}
<Box flexGrow={1} />
{userName && (
<>
<IconButton color="inherit" onClick={handleMenuOpen}>
<Avatar
name={userName}
url={get(data, "user.claims.picture", null)}
/>
<Avatar name={userName} url={userPictureUrl} />
</IconButton>
<Menu
onClose={handleMenuClose}
@ -133,8 +137,6 @@ const Header: FC<HeaderProps> = ({ includeSidebar, data }) => {
>
<MenuItem onClick={handleLogout}>Logout</MenuItem>
</Menu>
</>
)}
</Toolbar>
</AppBar>
);