*feat AppHeader aside content (#575)

hazelcast · Oct 10, 2024 · d780baf · d780baf
1 parent 5e6901c
commit d780baf
Show file tree

Hide file tree

Showing 7 changed files with 70 additions and 4 deletions.
diff --git a/packages/ui/.loki/reference/chrome_minimal_App_Header_With_Aside_Content.png b/packages/ui/.loki/reference/chrome_minimal_App_Header_With_Aside_Content.png
diff --git a/...oki/reference/chrome_minimal_App_Header_Without_Menu_And_With_Aside_Content.png b/...oki/reference/chrome_minimal_App_Header_Without_Menu_And_With_Aside_Content.png
diff --git a/packages/ui/__stories__/AppHeader.stories.tsx b/packages/ui/__stories__/AppHeader.stories.tsx
@@ -118,3 +118,50 @@ export const WithoutMenu = () => {
     />
   )
 }
+
+export const WithoutMenuAndWithAsideContent = () => {
+  const [cluster, setCluster] = useState<string | null>(null)
+
+  return (
+    <AppHeaderComponent
+      name="Management Center"
+      clusterSelectProps={{
+        clusterName: cluster,
+        clusterNames: ['Cluster-1', 'Cluster-2'],
+        clusterVersions: { 'Cluster-1': '5.5', 'Cluster-2': '6.0', 'Cluster-3': '3.1.2' },
+        onChange: setCluster,
+      }}
+      logoProps={{
+        LinkComponent: ({ children, className }) => <span className={className}>{children}</span>,
+      }}
+      asideContent={<Button>Link</Button>}
+    />
+  )
+}
+
+export const WithAsideContent = () => {
+  const [cluster, setCluster] = useState<string | null>(null)
+
+  return (
+    <AppHeaderComponent
+      name="Management Center"
+      clusterSelectProps={{
+        clusterName: cluster,
+        clusterNames: ['Cluster-1', 'Cluster-2'],
+        clusterVersions: { 'Cluster-1': '5.5', 'Cluster-2': '6.0', 'Cluster-3': '3.1.2' },
+        onChange: setCluster,
+      }}
+      asideContent={<Button>Link</Button>}
+      logoProps={{
+        LinkComponent: ({ children, className }) => <span className={className}>{children}</span>,
+      }}
+      menuContent={() => (
+        <>
+          <Button color="light" variant="text">
+            Item 1
+          </Button>
+        </>
+      )}
+    />
+  )
+}
diff --git a/packages/ui/src/AppHeader/AppHeader.module.scss b/packages/ui/src/AppHeader/AppHeader.module.scss
@@ -22,5 +22,8 @@
 }
 
 .aside {
+  display: flex;
+  align-items: center;
   margin-left: auto;
+  gap: c.$grid * 4;
 }
diff --git a/packages/ui/src/AppHeader/AppHeader.tsx b/packages/ui/src/AppHeader/AppHeader.tsx
@@ -13,6 +13,7 @@ export interface AppHeaderProps extends DataTestProp {
   name: ReactNode
   className?: string
   children?: ReactNode
+  asideContent?: ReactNode
   environment?: 'production'
   logoProps: AppHeaderLogoProps
   clusterSelectProps?: SelectClusterProps
@@ -27,6 +28,7 @@ export const AppHeader = ({
   clusterSelectProps,
   logoProps,
   menuContent,
+  asideContent,
   'data-test': dataTest = 'app-header',
 }: AppHeaderProps) => (
   <header data-test={dataTest} className={cls(styles.root, className)}>
@@ -35,6 +37,9 @@ export const AppHeader = ({
     {clusterSelectProps && <SelectCluster {...clusterSelectProps} />}
     {children}
     {environment && <EnvironmentBadge environment={environment} />}
-    <div className={styles.aside}>{menuContent && <AppHeaderMenu>{menuContent}</AppHeaderMenu>}</div>
+    <div className={styles.aside}>
+      {asideContent}
+      {menuContent && <AppHeaderMenu separator={!!asideContent}>{menuContent}</AppHeaderMenu>}
+    </div>
   </header>
 )
diff --git a/packages/ui/src/AppHeader/AppHeaderMenu/AppHeaderMenu.module.scss b/packages/ui/src/AppHeader/AppHeaderMenu/AppHeaderMenu.module.scss
@@ -1,5 +1,14 @@
 @use '../../../styles/constants' as c;
 
+.root {
+  display: flex;
+  align-items: center;
+}
+
+.separator {
+  border-left: 1px solid c.$colorNeutralLight;
+}
+
 .content {
   padding: c.$grid * 2;
   color: c.$colorNeutralLighter;

diff --git a/packages/ui/src/AppHeader/AppHeaderMenu/AppHeaderMenu.tsx b/packages/ui/src/AppHeader/AppHeaderMenu/AppHeaderMenu.tsx
@@ -1,5 +1,6 @@
 import React, { ReactNode, useState } from 'react'
 import { Menu as MenuIcon } from 'react-feather'
+import cn from 'classnames'
 
 import { Button } from '../../Button'
 import { Popover } from '../../Popover'
@@ -8,15 +9,16 @@ import { useOpenCloseState } from '../../hooks'
 import styles from './AppHeaderMenu.module.scss'
 
 export interface AppHeaderMenuProps {
+  separator?: boolean
   children: (props: { onClose: () => void }) => ReactNode
 }
 
-export const AppHeaderMenu = ({ children }: AppHeaderMenuProps) => {
+export const AppHeaderMenu = ({ separator, children }: AppHeaderMenuProps) => {
   const [anchorElement, setAnchorElement] = useState<HTMLElement | null>()
   const { isOpen, toggle, close } = useOpenCloseState()
 
   return (
-    <>
+    <div className={cn(styles.root, { [styles.separator]: separator })}>
       <Button
         variant="text"
         color="light"
@@ -34,6 +36,6 @@ export const AppHeaderMenu = ({ children }: AppHeaderMenuProps) => {
       <Popover open={isOpen} anchorElement={anchorElement} onClose={close} className={styles.content}>
         {children({ onClose: close })}
       </Popover>
-    </>
+    </div>
   )
 }