add toolbar ext

add toolbar ext add toolbar ext Signed-off-by: ashutosh16 <[email protected]>
argoproj · Aug 21, 2024 · ec8626a · ec8626a
1 parent 7246755
commit ec8626a
Showing 1 changed file with 7 additions and 2 deletions.
diff --git a/src/components/top-bar/top-bar.tsx b/src/components/top-bar/top-bar.tsx
@@ -30,6 +30,7 @@ export interface Toolbar {
     breadcrumbs?: { title: string | React.ReactNode, path?: string; }[];
     tools?: React.ReactNode;
     actionMenu?: ActionMenu;
+    toolBarExtensions?: React.ReactNode[];
 }
 
 export interface TopBarProps extends React.Props<any> {
@@ -85,22 +86,26 @@ const renderBreadcrumbs = (breadcrumbs: { title: string | React.ReactNode, path?
     </div>
 );
 
-const renderActionMenu = (actionMenu: ActionMenu) => (
+const renderActionMenu = (actionMenu: ActionMenu, toolBarExts: 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) => (
+            <React.Fragment key={index}>{ext}</React.Fragment>
+        ))}
     </div>
 );
 
 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.actionMenu && renderActionMenu(toolbar.actionMenu, toolbar.toolBarExtensions)}
         </div>
+
         <div className='columns small-3 top-bar__right-side'>
             {toolbar.filter && renderFilter(toolbar.filter)}
             {toolbar.tools}