feat: allow custom authentication component in header (@clevercanary/…

…hca-atlas-tracker#395)
DataBiosphere · Aug 15, 2024 · 59ae938 · 59ae938
1 parent acd1526
commit 59ae938
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 17 deletions.
diff --git a/...ns/components/Authentication/components/AuthenticationMenu/authenticationMenu.stories.tsx b/...ns/components/Authentication/components/AuthenticationMenu/authenticationMenu.stories.tsx
@@ -22,14 +22,14 @@ const AuthenticationMenuTemplate: StoryFn<typeof AuthenticationMenu> = (
 export const AuthenticationMenuStory = AuthenticationMenuTemplate.bind({});
 AuthenticationMenuStory.args = {
   userProfile: {
-    email: "[email protected]",
-    email_verified: true,
-    family_name: "Smith",
-    given_name: "John",
-    hd: "",
-    locale: "",
+    // email: "[email protected]",
+    // email_verified: true,
+    // family_name: "Smith",
+    // given_name: "John",
+    // hd: "",
+    // locale: "",
     name: "john_smith",
     picture: "https://i.pravatar.cc/200",
-    sub: "",
+    // sub: "",
   },
 };
diff --git a/...ts/Actions/components/Authentication/components/AuthenticationMenu/authenticationMenu.tsx b/...ts/Actions/components/Authentication/components/AuthenticationMenu/authenticationMenu.tsx
@@ -1,6 +1,5 @@
 import { MenuItem } from "@mui/material";
 import React, { MouseEvent, useState } from "react";
-import { UserProfile } from "../../../../../../../../../../../../hooks/useAuthentication/useFetchGoogleProfile";
 import {
   AuthenticationMenu as Menu,
   Avatar,
@@ -11,7 +10,10 @@ import {
 
 export interface AuthenticationMenuProps {
   onLogout: () => void;
-  userProfile: UserProfile;
+  userProfile: {
+    name: string;
+    picture: string;
+  };
 }
 
 export const AuthenticationMenu = ({
@@ -32,10 +34,7 @@ export const AuthenticationMenu = ({
   return (
     <>
       <UserIcon onClick={onOpenMenu}>
-        <Avatar
-          alt={`${userProfile.given_name} ${userProfile.family_name}`}
-          src={userProfile.picture}
-        />
+        <Avatar alt={userProfile.name} src={userProfile.picture} />
       </UserIcon>
       <Menu
         anchorEl={anchorEl}
@@ -51,9 +50,7 @@ export const AuthenticationMenu = ({
       >
         <UserSummary>
           You are signed in as:
-          <UserNames noWrap>
-            {userProfile.given_name} {userProfile.family_name}
-          </UserNames>
+          <UserNames noWrap>{userProfile.name}</UserNames>
         </UserSummary>
         <MenuItem
           onClick={(): void => {

diff --git a/src/components/Layout/components/Header/header.tsx b/src/components/Layout/components/Header/header.tsx
@@ -13,7 +13,10 @@ import { Navigation, SocialMedia } from "./common/entities";
 import { getNavigationLinks } from "./common/utils";
 import { Announcements } from "./components/Announcements/announcements";
 import { Actions } from "./components/Content/components/Actions/actions";
-import { Authentication } from "./components/Content/components/Actions/components/Authentication/authentication";
+import {
+  Authentication as DefaultAuthentication,
+  AuthenticationProps,
+} from "./components/Content/components/Actions/components/Authentication/authentication";
 import { Menu } from "./components/Content/components/Actions/components/Menu/menu";
 import { Search } from "./components/Content/components/Actions/components/Search/search";
 import { Navigation as DXNavigation } from "./components/Content/components/Navigation/navigation";
@@ -27,6 +30,7 @@ import { useMeasureHeader } from "./hooks/useMeasureHeader";
 export interface HeaderProps {
   actions?: ReactNode;
   announcements?: ComponentsConfig;
+  authenticationComponent?: React.ComponentType<AuthenticationProps>;
   authenticationEnabled?: boolean;
   className?: string;
   logo: ReactNode;
@@ -47,6 +51,7 @@ export const Header = ({ ...headerProps }: HeaderProps): JSX.Element => {
     actions,
     announcements,
     authenticationEnabled,
+    authenticationComponent: Authentication = DefaultAuthentication,
     className,
     logo,
     navigation: [navItemsL, navItemsC, navItemsR] = [],