From 6e4cffc85a5b575d00cabc78a0ac311160c8b020 Mon Sep 17 00:00:00 2001
From: ashutosh16 <ashutosh_singh@intuit.com>
Date: Tue, 20 Aug 2024 22:12:31 -0700
Subject: [PATCH 1/3] add toolbar ext

add toolbar ext

add toolbar ext

Signed-off-by: ashutosh16 <ashutosh_singh@intuit.com>
---
 src/components/top-bar/top-bar.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/top-bar/top-bar.tsx b/src/components/top-bar/top-bar.tsx
index 6f9def32..b677b21f 100644
--- 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,7 +86,7 @@ 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}>
@@ -93,14 +94,18 @@ const renderActionMenu = (actionMenu: ActionMenu) => (
                 {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}

From 7ea29b4dc698c257cd3690144db7cbe55cd117a1 Mon Sep 17 00:00:00 2001
From: ashutosh16 <ashutosh_singh@intuit.com>
Date: Wed, 21 Aug 2024 13:05:25 -0700
Subject: [PATCH 2/3] add toolbar ext

Signed-off-by: ashutosh16 <ashutosh_singh@intuit.com>

add actionmenut ext

Signed-off-by: ashutosh16 <ashutosh_singh@intuit.com>

add actionmenut ext

Signed-off-by: ashutosh16 <ashutosh_singh@intuit.com>
---
 src/components/top-bar/top-bar.tsx |  8 ++++----
 stories/top-bar.stories.tsx        | 15 +++++++++++++++
 2 files changed, 19 insertions(+), 4 deletions(-)
 create mode 100644 stories/top-bar.stories.tsx

diff --git a/src/components/top-bar/top-bar.tsx b/src/components/top-bar/top-bar.tsx
index b677b21f..9cd81191 100644
--- 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,7 +86,7 @@ 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}>
@@ -94,7 +94,7 @@ const renderActionMenu = (actionMenu: ActionMenu, toolBarExts: React.ReactNode[]
                 {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
new file mode 100644
index 00000000..f66fcb49
--- /dev/null
+++ 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>] }} />
+    ));
\ No newline at end of file

From 09f8799827b2e6252ba25c85abbe9cbe626e4ca0 Mon Sep 17 00:00:00 2001
From: ashutosh16 <ashutosh_singh@intuit.com>
Date: Thu, 22 Aug 2024 10:22:16 -0700
Subject: [PATCH 3/3] add actionmenut ext

Signed-off-by: ashutosh16 <ashutosh_singh@intuit.com>
---
 stories/top-bar.stories.tsx | 15 ---------------
 1 file changed, 15 deletions(-)
 delete mode 100644 stories/top-bar.stories.tsx

diff --git a/stories/top-bar.stories.tsx b/stories/top-bar.stories.tsx
deleted file mode 100644
index f66fcb49..00000000
--- a/stories/top-bar.stories.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-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>] }} />
-    ));
\ No newline at end of file