Add buttonChildren and children props to UserHeaderItem (#2234)

This increases the flexibility by allowing customization.

.changeset/cyan-chicken-juggle.md

@@ -0,0 +1,15 @@
+---
+"@comet/cms-admin": minor
+---
+
+Add `buttonChildren` and `children` props to `UserHeaderItem`
+
+This increases the flexibility of the `UserHeaderItem` component by allowing the `AppHeaderDropdown` label to be passed via `buttonChildren`. More buttons or other list items in the dropdown can be passed via `children`.
+
+**Example:**
+```tsx
+<UserHeaderItem buttonChildren="Some custom label">
+    <Button variant="contained">Some custom button</Button>
+    <Button>Some custom button 2</Button>
+</UserHeaderItem>
+```

packages/admin/cms-admin/src/common/header/UserHeaderItem.tsx

@@ -1,10 +1,12 @@
-import { AppHeaderDropdown, Loading } from "@comet/admin";
+import { gql, useMutation } from "@apollo/client";
+import { AppHeaderDropdown, AppHeaderDropdownProps, Loading } from "@comet/admin";
 import { Account, Info, Logout } from "@comet/admin-icons";
 import { Box, Button as MUIButton } from "@mui/material";
 import { styled } from "@mui/material/styles";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 
+import { useCurrentUser } from "../../userPermissions/hooks/currentUser";
 import { AboutModal } from "./about/AboutModal";
 import { GQLSignOutMutation } from "./UserHeaderItem.generated";
 
@@ -24,10 +26,6 @@ const Separator = styled(Box)`
     margin-bottom: 20px;
 `;
 
-import { gql, useMutation } from "@apollo/client";
-
-import { useCurrentUser } from "../../userPermissions/hooks/currentUser";
-
 const signOutMutation = gql`
     mutation SignOut {
         currentUserSignOut
@@ -36,17 +34,19 @@ const signOutMutation = gql`
 
 interface UserHeaderItemProps {
     aboutModalLogo?: React.ReactElement;
+    buttonChildren?: AppHeaderDropdownProps["buttonChildren"];
+    children?: React.ReactNode;
 }
 
 export function UserHeaderItem(props: UserHeaderItemProps): React.ReactElement {
-    const { aboutModalLogo } = props;
+    const { aboutModalLogo, buttonChildren, children } = props;
 
     const user = useCurrentUser();
     const [showAboutModal, setShowAboutModal] = React.useState(false);
     const [signOut, { loading: isSigningOut }] = useMutation<GQLSignOutMutation>(signOutMutation);
 
     return (
-        <AppHeaderDropdown buttonChildren={user.name} startIcon={<Account />}>
+        <AppHeaderDropdown buttonChildren={buttonChildren ?? user.name} startIcon={<Account />}>
             <DropdownContent padding={4}>
                 <Button
                     fullWidth={true}
@@ -58,6 +58,7 @@ export function UserHeaderItem(props: UserHeaderItemProps): React.ReactElement {
                 >
                     <FormattedMessage id="comet.about" defaultMessage="About" />
                 </Button>
+                {children}
                 <Separator />
                 {isSigningOut ? (
                     <Loading />