feat: default layout supports user controls in title banner

bcgov · Nov 23, 2020 · 45610ea · 45610ea
1 parent 0047155
commit 45610ea
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 11 deletions.
diff --git a/app/layouts/default-layout.tsx b/app/layouts/default-layout.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import {Container} from 'react-bootstrap';
+import {Container, Row, Col} from 'react-bootstrap';
 import {graphql, createFragmentContainer} from 'react-relay';
 import {defaultLayout_session} from '__generated__/defaultLayout_session.graphql';
 import getConfig from 'next/config';
@@ -14,6 +14,7 @@ const runtimeConfig = getConfig()?.publicRuntimeConfig ?? {};
 
 interface Props {
   title?: string | JSX.Element;
+  titleControls?: JSX.Element;
   showSubheader?: boolean;
   session: defaultLayout_session;
   width?: 'narrow' | 'wide';
@@ -26,6 +27,7 @@ interface Props {
 const DefaultLayout: React.FunctionComponent<Props> = ({
   children,
   title,
+  titleControls,
   showSubheader,
   session,
   width = 'narrow',
@@ -49,10 +51,15 @@ const DefaultLayout: React.FunctionComponent<Props> = ({
         {title ? (
           <div className="page-title">
             <Container className={width}>
-              <h1>{title}</h1>
-              {help && (
-                <Help title={help.title} helpMessage={help.helpMessage} />
-              )}
+              <Row>
+                <Col>
+                  <h1>{title}</h1>
+                  {help && (
+                    <Help title={help.title} helpMessage={help.helpMessage} />
+                  )}
+                </Col>
+                <Col xs="auto">{titleControls}</Col>
+              </Row>
             </Container>
           </div>
         ) : null}

diff --git a/app/pages/admin/products-benchmarks.tsx b/app/pages/admin/products-benchmarks.tsx
@@ -97,8 +97,16 @@ class ProductsBenchmarks extends Component<Props> {
   render() {
     const {query} = this.props;
     const {totalProductCount} = this.state;
+    const newProductButton = (
+      <Button onClick={this.toggleShowCreateForm}>New Product</Button>
+    );
+
     return (
-      <DefaultLayout session={query.session} title="Manage Products">
+      <DefaultLayout
+        session={query.session}
+        title="Manage Products"
+        titleControls={newProductButton}
+      >
         <Row>
           <Col md={{span: 4, offset: 4}}>
             <Toast
@@ -114,11 +122,6 @@ class ProductsBenchmarks extends Component<Props> {
             <br />
           </Col>
         </Row>
-        <Row>
-          <Col>
-            <Button onClick={this.toggleShowCreateForm}>New Product</Button>
-          </Col>
-        </Row>
         <Row>
           <Col>
             {this.state.expandCreateForm && (