From cf4daf59eeabb6bb162083d82b7530a8f463f4ac Mon Sep 17 00:00:00 2001
From: Fran McDade <franmcdade@Frans-MacBook-Pro.local>
Date: Thu, 11 Jan 2024 17:30:01 +1000
Subject: [PATCH] feat: update header component to take additional actions
 (#560)

---
 .../src/components/Layout/components/Header/common/utils.ts   | 3 +++
 .../Actions/components/Menu/components/Toolbar/toolbar.tsx    | 4 ++++
 .../src/components/Layout/components/Header/header.tsx        | 4 ++++
 3 files changed, 11 insertions(+)

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
index d849f5a6..fda40a43 100644
--- 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/packages/data-explorer-ui/src/components/Layout/components/Header/components/Content/components/Actions/components/Menu/components/Toolbar/toolbar.tsx b/packages/data-explorer-ui/src/components/Layout/components/Header/components/Content/components/Actions/components/Menu/components/Toolbar/toolbar.tsx
index 853ca039..caa678e4 100644
--- a/packages/data-explorer-ui/src/components/Layout/components/Header/components/Content/components/Actions/components/Menu/components/Toolbar/toolbar.tsx
+++ b/packages/data-explorer-ui/src/components/Layout/components/Header/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
index 168d35f5..55ec73b7 100644
--- 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}