feat: update header component to take additional actions (#560) (#561)

Co-authored-by: Fran McDade <franmcdade@Frans-MacBook-Pro.local>
clevercanary · Feb 26, 2024 · 84e4537 · 84e4537
1 parent 7e42348
commit 84e4537
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 0 deletions.
diff --git a/packages/data-explorer-ui/src/components/Layout/components/Header/common/utils.ts b/packages/data-explorer-ui/src/components/Layout/components/Header/common/utils.ts
@@ -14,6 +14,9 @@ import { SocialMedia } from "./entities";
 export function flattenMoreLink(links: NavLinkItem[]): NavLinkItem[] {
   return links.flatMap((link: NavLinkItem) => {
     if (link.label === HEADER_NAVIGATION_LABEL.MORE) {
+      if (link.flatten === false) {
+        return link;
+      }
       return link.menuItems as NavLinkItem[];
     }
     return link;

diff --git a/...ader/components/Content/components/Actions/components/Menu/components/Toolbar/toolbar.tsx b/...ader/components/Content/components/Actions/components/Menu/components/Toolbar/toolbar.tsx
@@ -6,6 +6,7 @@ import { Authentication } from "../../../Authentication/authentication";
 import { Search } from "../../../Search/search";
 
 export interface DialogTitleProps {
+  actions?: ReactNode;
   Announcements?: ReactNode;
   authenticationEnabled?: boolean;
   Logo?: ReactNode;
@@ -15,6 +16,7 @@ export interface DialogTitleProps {
 }
 
 export const Toolbar = ({
+  actions,
   Announcements,
   authenticationEnabled,
   Logo,
@@ -39,6 +41,8 @@ export const Toolbar = ({
             authenticationEnabled={authenticationEnabled}
             closeMenu={onClose}
           />
+          {/* Additional actions i.e. call-to-action button */}
+          {actions}
           {/* Close menu */}
           <IconButton color="ink" onClick={onClose}>
             <CloseRoundedIcon />

diff --git a/packages/data-explorer-ui/src/components/Layout/components/Header/header.tsx b/packages/data-explorer-ui/src/components/Layout/components/Header/header.tsx
@@ -38,6 +38,7 @@ import { Socials } from "./components/Content/components/Socials/socials.styles"
 import { AppBar as HeaderAppBar, HeaderSmAppBar } from "./header.styles";
 
 export interface HeaderProps {
+  actions?: ReactNode;
   Announcements?: ReactNode;
   authenticationEnabled?: boolean;
   className?: string;
@@ -54,6 +55,7 @@ export const Header = ({ ...headerProps }: HeaderProps): JSX.Element => {
   const {
     Announcements,
     authenticationEnabled,
+    actions,
     className,
     Logo,
     navAlignment = ELEMENT_ALIGNMENT.LEFT,
@@ -160,6 +162,8 @@ export const Header = ({ ...headerProps }: HeaderProps): JSX.Element => {
             authenticationEnabled={authenticationEnabled}
             closeMenu={closeMenu}
           />
+          {/* Additional actions i.e. call-to-action button */}
+          {actions}
           {/* Menu */}
           <Menu
             closeMenu={closeMenu}