From aa90bf19a02df1cac9750b760c7f0b8878ef8bd8 Mon Sep 17 00:00:00 2001
From: Caleb Doxsey <cdoxsey@pomerium.com>
Date: Fri, 16 Dec 2022 14:05:08 -0700
Subject: [PATCH] dashboard: fix missing avatar and logout menu

---
 ui/src/components/Header.tsx | 60 +++++++++++++++++++-----------------
 1 file changed, 31 insertions(+), 29 deletions(-)

diff --git a/ui/src/components/Header.tsx b/ui/src/components/Header.tsx
index d9e33570ee0..dfa11e3d908 100644
--- a/ui/src/components/Header.tsx
+++ b/ui/src/components/Header.tsx
@@ -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,32 +118,25 @@ 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)}
-              />
-            </IconButton>
-            <Menu
-              onClose={handleMenuClose}
-              anchorOrigin={{
-                vertical: "bottom",
-                horizontal: "center",
-              }}
-              keepMounted
-              open={!!anchorEl}
-              anchorEl={anchorEl}
-            >
-              <MenuItem onClick={handleLogout}>Logout</MenuItem>
-            </Menu>
-          </>
-        )}
+        <IconButton color="inherit" onClick={handleMenuOpen}>
+          <Avatar name={userName} url={userPictureUrl} />
+        </IconButton>
+        <Menu
+          onClose={handleMenuClose}
+          anchorOrigin={{
+            vertical: "bottom",
+            horizontal: "center",
+          }}
+          keepMounted
+          open={!!anchorEl}
+          anchorEl={anchorEl}
+        >
+          <MenuItem onClick={handleLogout}>Logout</MenuItem>
+        </Menu>
       </Toolbar>
     </AppBar>
   );