add toolbar ext

Signed-off-by: ashutosh16 <[email protected]> add actionmenut ext Signed-off-by: ashutosh16 <[email protected]> add actionmenut ext Signed-off-by: ashutosh16 <[email protected]>
argoproj · Aug 22, 2024 · 7ea29b4 · 7ea29b4
1 parent 6e4cffc
commit 7ea29b4
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 4 deletions.
diff --git a/src/components/top-bar/top-bar.tsx b/src/components/top-bar/top-bar.tsx
@@ -30,7 +30,7 @@ export interface Toolbar {
     breadcrumbs?: { title: string | React.ReactNode, path?: string; }[];
     tools?: React.ReactNode;
     actionMenu?: ActionMenu;
-    toolBarExtensions?: React.ReactNode[];
+    actionMenuExtensions?: React.ReactNode[];
 }
 
 export interface TopBarProps extends React.Props<any> {
@@ -86,15 +86,15 @@ const renderBreadcrumbs = (breadcrumbs: { title: string | React.ReactNode, path?
     </div>
 );
 
-const renderActionMenu = (actionMenu: ActionMenu, toolBarExts: React.ReactNode[]) => (
+const renderActionMenu = (actionMenu: ActionMenu, actionMenuExtensions: React.ReactNode[]) => (
     <div>
         {actionMenu.items.map((item, i) => (
             <button disabled={!!item.disabled} qe-id={item.qeId} className='argo-button argo-button--base' onClick={() => item.action()} style={{marginRight: 2}} key={i}>
                 {item.iconClassName && (<i className={item.iconClassName} style={{marginLeft: '-5px', marginRight: '5px'}}/>)}
                 {item.title}
             </button>
         ))}
-        {toolBarExts && toolBarExts.map((ext, index) => (
+        {actionMenuExtensions && actionMenuExtensions.map((ext, index) => (
             <React.Fragment key={index}>{ext}</React.Fragment>
         ))}
     </div>
@@ -103,7 +103,7 @@ const renderActionMenu = (actionMenu: ActionMenu, toolBarExts: React.ReactNode[]
 const renderToolbar = (toolbar: Toolbar) => (
     <div className='top-bar row' key='tool-bar'>
         <div className='columns small-9 top-bar__left-side'>
-            {toolbar.actionMenu && renderActionMenu(toolbar.actionMenu, toolbar.toolBarExtensions)}
+            {toolbar.actionMenu && renderActionMenu(toolbar.actionMenu, toolbar.actionMenuExtensions)}
         </div>
 
         <div className='columns small-3 top-bar__right-side'>

diff --git a/stories/top-bar.stories.tsx b/stories/top-bar.stories.tsx
@@ -0,0 +1,15 @@
+import { storiesOf } from '@storybook/react';
+import * as React from 'react';
+import { TopBar } from '../src/components/top-bar/top-bar';
+
+
+storiesOf('TopBar', module)
+    .add('basic tabs', () => (
+        <TopBar title='My Title' toolbar={{}} />
+    ))
+    .add('with actions menu', () => (
+        <TopBar title='My Title' toolbar={{ actionMenu: { items: [{ action: () => alert(' here' ), title: "click here" }] } }} />
+    ))
+    .add('with extension menu', () => (
+        <TopBar title='My Title' toolbar={{ actionMenu: { items: [{ action: () => alert(' here' ), title: "click here" }] }, actionMenuExtensions: [<React.Fragment key={1}>render the custom component</React.Fragment>] }} />
+    ));