From 49f257794525a5d6051bff109147b6133c7ee550 Mon Sep 17 00:00:00 2001
From: Keith Chong <kykchong@redhat.com>
Date: Wed, 1 Dec 2021 18:03:17 -0500
Subject: [PATCH] feat: Allow customized Page and TopBar titles (#164) (#165)

Signed-off-by: Keith Chong <kykchong@redhat.com>
---
 src/components/page/page.tsx |  6 ++++--
 stories/page.tsx             | 16 +++++++++++++++-
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/components/page/page.tsx b/src/components/page/page.tsx
index 8580f5a37c..74d30ee7b8 100644
--- a/src/components/page/page.tsx
+++ b/src/components/page/page.tsx
@@ -12,6 +12,8 @@ require('./page.scss');
 interface PageProps extends React.Props<any> {
     title: string;
     toolbar?: Toolbar | Observable<Toolbar>;
+    topBarTitle?: string;
+    useTitleOnly?: boolean;
 }
 
 export interface PageContextProps {
@@ -32,7 +34,7 @@ export const Page = (props: PageProps) => {
                         <PageContext.Consumer>
                             {(ctx) => {
                                 let titleParts = [ctx.title];
-                                if (toolbar && toolbar.breadcrumbs && toolbar.breadcrumbs.length > 0) {
+                                if (!props.useTitleOnly && toolbar && toolbar.breadcrumbs && toolbar.breadcrumbs.length > 0) {
                                     titleParts = [toolbar.breadcrumbs.map((item) => item.title).reverse().join(' / ')].concat(titleParts);
                                 } else if (props.title) {
                                     titleParts = [props.title].concat(titleParts);
@@ -45,7 +47,7 @@ export const Page = (props: PageProps) => {
                             }}
                         </PageContext.Consumer>
                         <div className='page__top-bar'>
-                            <TopBar title={props.title} toolbar={toolbar}/>
+                            <TopBar title={props.topBarTitle ? props.topBarTitle : props.title} toolbar={toolbar}/>
                         </div>
                     </React.Fragment>
                 )}
diff --git a/stories/page.tsx b/stories/page.tsx
index 686d00534c..4b7b859cf2 100644
--- a/stories/page.tsx
+++ b/stories/page.tsx
@@ -124,4 +124,18 @@ storiesOf('Page', module)
                 </Route>
             </Router>
         );
-    });
+    }).add('custom top bar title', () => (
+        <Router history={history}>
+            <Route path={location.pathname}>
+                <Layout navItems={navItems}>
+                    <Page title='helmet title' topBarTitle='Top Bar Title' toolbar={{ breadcrumbs: [{title: 'Apps ' , path: '/applications'}, {title: 'app name'}] }}>
+                        <div style={{padding: '1em'}}>
+                            <div className='white-box'>
+                                Test
+                            </div>
+                        </div>
+                    </Page>
+                </Layout>
+            </Route>
+        </Router>
+    ));