Enhancement/add user email in studio

apps/studio/src/components/AppNavbar.tsx

@@ -1,15 +1,13 @@
 import Image from "next/image"
 import NextLink from "next/link"
 import { Flex, HStack } from "@chakra-ui/react"
-import { AvatarMenu, Button, Menu } from "@opengovsg/design-system-react"
+import { Button } from "@opengovsg/design-system-react"
 import { BiLinkExternal } from "react-icons/bi"
 
 import { ADMIN_NAVBAR_HEIGHT } from "~/constants/layouts"
-import { useMe } from "~/features/me/api"
+import { AvatarMenu } from "./AvatarMenu"
 
 export function AppNavbar(): JSX.Element {
-  const { me, logout } = useMe()
-
   return (
     <Flex flex="0 0 auto" gridColumn="1/-1" height={ADMIN_NAVBAR_HEIGHT}>
       <Flex
@@ -55,14 +53,7 @@ export function AppNavbar(): JSX.Element {
           >
             Report an issue
           </Button>
-          <AvatarMenu
-            name={me.name}
-            variant="subtle"
-            bg="base.canvas.brand-subtle"
-            menuListProps={{ maxWidth: "19rem" }}
-          >
-            <Menu.Item onClick={() => logout()}>Sign out</Menu.Item>
-          </AvatarMenu>
+          <AvatarMenu />
         </HStack>
       </Flex>
     </Flex>

apps/studio/src/components/AvatarMenu.tsx

@@ -0,0 +1,40 @@
+import { Divider, Flex, Text } from "@chakra-ui/react"
+import {
+  Menu,
+  AvatarMenu as OgpAvatarMenu,
+} from "@opengovsg/design-system-react"
+import { BiLogOut, BiUser } from "react-icons/bi"
+
+import { useMe } from "~/features/me/api"
+
+export const AvatarMenu = () => {
+  const { me, logout } = useMe()
+
+  return (
+    <OgpAvatarMenu
+      name={me.name}
+      variant="subtle"
+      bg="base.canvas.brand-subtle"
+      menuListProps={{ maxWidth: "19rem" }}
+    >
+      <Menu.Item
+        isDisabled
+        style={{ cursor: "default", backgroundColor: "transparent" }}
+      >
+        <Flex alignItems="center" gap="0.75rem">
+          <BiUser size="1.25rem" color="#666c7a" />
+          <Text textStyle="subhead-1" textColor="base.content.medium">
+            {me.email}
+          </Text>
+        </Flex>
+      </Menu.Item>
+      <Divider orientation="horizontal" />
+      <Menu.Item onClick={() => logout()}>
+        <Flex alignItems="center" gap="0.75rem">
+          <BiLogOut size="1.25rem" />
+          <Text>Sign out</Text>
+        </Flex>
+      </Menu.Item>
+    </OgpAvatarMenu>
+  )
+}

apps/studio/src/components/SearchableHeader.tsx

@@ -1,18 +1,17 @@
 import Image from "next/image"
 import NextLink from "next/link"
 import { Flex, Grid, GridItem, Text, Tooltip } from "@chakra-ui/react"
-import { AvatarMenu, IconButton, Menu } from "@opengovsg/design-system-react"
+import { IconButton } from "@opengovsg/design-system-react"
 
 import { Searchbar, useSearchStyle } from "~/components/Searchbar"
-import { useMe } from "~/features/me/api"
 import { DASHBOARD } from "~/lib/routes"
 import { trpc } from "~/utils/trpc"
+import { AvatarMenu } from "./AvatarMenu"
 
 interface SearchableHeaderProps {
   siteId: string
 }
 export const SearchableHeader = ({ siteId }: SearchableHeaderProps) => {
-  const { me, logout } = useMe()
   const [{ name }] = trpc.site.getSiteName.useSuspenseQuery({
     siteId: Number(siteId),
   })
@@ -55,14 +54,7 @@ export const SearchableHeader = ({ siteId }: SearchableHeaderProps) => {
       </GridItem>
 
       <GridItem justifyContent="flex-end" display="flex">
-        <AvatarMenu
-          name={me.name}
-          variant="subtle"
-          bg="base.canvas.brand-subtle"
-          menuListProps={{ maxWidth: "19rem" }}
-        >
-          <Menu.Item onClick={() => logout()}>Sign out</Menu.Item>
-        </AvatarMenu>
+        <AvatarMenu />
       </GridItem>
     </Grid>
   )

apps/studio/src/stories/Page/SitePage.stories.tsx

@@ -89,3 +89,14 @@ export const PageSettings: Story = {
     })
   },
 }
+
+export const ExpandedProfileDropdown: Story = {
+  play: async ({ canvasElement }) => {
+    const screen = within(canvasElement)
+    const testUserSelector = await screen.findByText(/TU/i)
+    const testUserSelectorButton = testUserSelector.closest("button")
+    if (testUserSelectorButton) {
+      await userEvent.click(testUserSelectorButton)
+    }
+  },
+}