From d7e9c1179c9fd5f5c8b19a530c9c1e08613028b1 Mon Sep 17 00:00:00 2001
From: Matthieu Foucault <matthieu@button.is>
Date: Thu, 18 Mar 2021 16:28:21 -0700
Subject: [PATCH] feat: add application and facility info to application page

---
 app/layouts/default-layout.tsx                |  41 +++--
 app/pages/reporter/application.tsx            |  30 ++++
 app/pages/reporter/view-application.tsx       |  29 +++-
 .../default-layout.test.tsx.snap              |  12 +-
 .../view-application.test.tsx.snap            | 140 ++++++++++++++++++
 .../__snapshots__/application.test.tsx.snap   |  20 +++
 .../unit/pages/reporter/application.test.tsx  |   4 +
 .../unit/pages/view-application.test.tsx      |   4 +
 8 files changed, 256 insertions(+), 24 deletions(-)

diff --git a/app/layouts/default-layout.tsx b/app/layouts/default-layout.tsx
index 52730df9ce..9e6d02bc63 100644
--- a/app/layouts/default-layout.tsx
+++ b/app/layouts/default-layout.tsx
@@ -54,17 +54,24 @@ const DefaultLayout: React.FunctionComponent<Props> = ({
         {showSubheader && <Subheader />}
       </Header>
       <main>
-        {title ? (
+        {title || titleControls ? (
           <div className="page-title">
             <Container className={width}>
               <Row>
-                <Col>
-                  <h1>{title}</h1>
-                  {help && (
-                    <Help title={help.title} helpMessage={help.helpMessage} />
-                  )}
-                </Col>
-                <Col xs="auto">{titleControls}</Col>
+                {title && (
+                  <Col>
+                    <div className="title-container">
+                      <h1>{title}</h1>
+                      {help && (
+                        <Help
+                          title={help.title}
+                          helpMessage={help.helpMessage}
+                        />
+                      )}
+                    </div>
+                  </Col>
+                )}
+                <Col sm="auto">{titleControls}</Col>
               </Row>
             </Container>
           </div>
@@ -88,6 +95,18 @@ const DefaultLayout: React.FunctionComponent<Props> = ({
           main {
             flex-grow: 1;
           }
+
+          .title-container {
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+          }
+          h1 {
+            font-size: 30px;
+            display: inline-block;
+            margin-bottom: 0;
+          }
         `}
       </style>
       <style jsx global>
@@ -105,14 +124,10 @@ const DefaultLayout: React.FunctionComponent<Props> = ({
           .footer {
             flex-shrink: 0;
           }
-          h1 {
-            font-size: 30px;
-            display: inline-block;
-          }
           .page-title {
             background: #f5f5f5;
             border-bottom: 1px solid #ccc;
-            padding: 40px 0 20px;
+            padding: 30px 0 30px;
           }
           .page-title h1 {
             font-size: 25px;
diff --git a/app/pages/reporter/application.tsx b/app/pages/reporter/application.tsx
index 88780549dd..ddee626cd9 100644
--- a/app/pages/reporter/application.tsx
+++ b/app/pages/reporter/application.tsx
@@ -25,10 +25,14 @@ class Application extends Component<Props> {
       query {
         application(id: $applicationId) {
           id
+          rowId
           latestDraftRevision {
             versionNumber
             legalDisclaimerAccepted
           }
+          facilityByFacilityId {
+            bcghgid
+          }
         }
         session {
           ...defaultLayout_session
@@ -74,7 +78,33 @@ class Application extends Component<Props> {
 
     return (
       <DefaultLayout session={session}>
+        <div className="application-ids">
+          Application ID: {application.rowId}
+          <br />
+          {application.latestDraftRevision.versionNumber > 1 && (
+            <>
+              Version Number: {application.latestDraftRevision.versionNumber}
+              <br />
+            </>
+          )}
+          BC GHG ID: {application.facilityByFacilityId.bcghgid}
+        </div>
         <ApplicationWizard query={query} loading={this.props.loading} />
+        <style jsx global>{`
+          .application-ids {
+            margin-top: -50px;
+            min-height: 50px;
+            display: flex;
+            justify-content: flex-end;
+            align-items: center;
+          }
+          @media screen and (min-width: 992px) {
+            .application-ids {
+              margin-top: -60px;
+              min-height: 60px;
+            }
+          }
+        `}</style>
         <style jsx global>{`
           @media print {
             .nav-guide-container {
diff --git a/app/pages/reporter/view-application.tsx b/app/pages/reporter/view-application.tsx
index f30ef56962..4995e509d0 100644
--- a/app/pages/reporter/view-application.tsx
+++ b/app/pages/reporter/view-application.tsx
@@ -37,6 +37,10 @@ class ViewApplication extends Component<Props> {
           )
 
         application(id: $applicationId) {
+          rowId
+          facilityByFacilityId {
+            bcghgid
+          }
           latestDraftRevision {
             versionNumber
           }
@@ -77,19 +81,19 @@ class ViewApplication extends Component<Props> {
   render() {
     const {session} = this.props.query;
     const {query} = this.props;
-    const reviewComments = query.application?.reviewCommentsByApplicationId.edges.map(
+    const {application} = query;
+    const reviewComments = application?.reviewCommentsByApplicationId.edges.map(
       (result) => result.node.description
     );
     const status =
-      query?.application?.applicationRevisionStatus?.applicationRevisionStatus;
+      application?.applicationRevisionStatus?.applicationRevisionStatus;
     const changesRequested = status === 'REQUESTED_CHANGES';
     const hasBeenReviewed = status !== 'SUBMITTED' && status !== 'DRAFT';
 
     const thisVersion = Number(this.props.router.query.version);
     const latestSubmittedRevision =
-      query.application.latestSubmittedRevision?.versionNumber;
-    const latestDraftRevision =
-      query.application.latestDraftRevision?.versionNumber;
+      application.latestSubmittedRevision?.versionNumber;
+    const latestDraftRevision = application.latestDraftRevision?.versionNumber;
 
     const newerSubmissionExists = latestSubmittedRevision > thisVersion;
     const newerDraftExists = latestDraftRevision > latestSubmittedRevision;
@@ -126,11 +130,26 @@ class ViewApplication extends Component<Props> {
       </>
     );
 
+    const applicationInfo = (
+      <div>
+        Application ID: {application.rowId}
+        <br />
+        {thisVersion > 1 && (
+          <>
+            Version: {application.latestDraftRevision.versionNumber}
+            <br />
+          </>
+        )}
+        BC GHG ID: {application.facilityByFacilityId.bcghgid}
+      </div>
+    );
+
     return (
       <DefaultLayout
         showSubheader
         session={session}
         title="Summary of your application"
+        titleControls={applicationInfo}
       >
         <Row>
           <Col md={12}>
diff --git a/app/tests/unit/layout/__snapshots__/default-layout.test.tsx.snap b/app/tests/unit/layout/__snapshots__/default-layout.test.tsx.snap
index 9ba4768671..0b6a1d40e0 100644
--- a/app/tests/unit/layout/__snapshots__/default-layout.test.tsx.snap
+++ b/app/tests/unit/layout/__snapshots__/default-layout.test.tsx.snap
@@ -2,14 +2,14 @@
 
 exports[`The DefaultLayout component matches the last accepted Snapshot 1`] = `
 <div
-  className="jsx-3986300452 page-wrap"
+  className="jsx-1441402825 page-wrap"
 >
   <HeaderLayout
     isLoggedIn={false}
     isRegistered={false}
   />
   <main
-    className="jsx-3986300452"
+    className="jsx-1441402825"
   >
     <Container
       className="content narrow"
@@ -19,14 +19,14 @@ exports[`The DefaultLayout component matches the last accepted Snapshot 1`] = `
   </main>
   <Footer />
   <JSXStyle
-    id="2203946758"
+    id="309934731"
   >
-    .page-wrap.jsx-3986300452{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}main.jsx-3986300452{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}
+    .page-wrap.jsx-1441402825{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}main.jsx-1441402825{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}.title-container.jsx-1441402825{height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}h1.jsx-1441402825{font-size:30px;display:inline-block;margin-bottom:0;}
   </JSXStyle>
   <JSXStyle
-    id="390132651"
+    id="1603055883"
   >
-    a{color:#0053b3;}.btn-link{color:#0053b3;}.content{padding-top:50px;-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;}.footer{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}h1{font-size:30px;display:inline-block;}.page-title{background:#f5f5f5;border-bottom:1px solid #ccc;padding:40px 0 20px;}.page-title h1{font-size:25px;font-weight:400;}h3{margin-bottom:20px;font-weight:500;}.blue{color:#036;}p{line-height:25px;}.ciip-card{border:1px solid #036;padding:15px;border-radius:0;box-shadow:1px 8px 13px -5px #00336694;}button.full-width{width:100%;}.btn-primary{background:#036;border-color:#036;}.with-shadow{box-shadow:1px 8px 13px -5px #00336694;}.accordion .card-body{font-size:15px;}.container.wide{max-width:1600px;}@media screen and (min-width:992px){#page-content{padding-top:60px;}}.btn-outline-primary{color:#0053b3;border-color:#0053b3;}.badge-success,.btn-success{background-color:#24883e;}
+    a{color:#0053b3;}.btn-link{color:#0053b3;}.content{padding-top:50px;-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;}.footer{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}.page-title{background:#f5f5f5;border-bottom:1px solid #ccc;padding:30px 0 30px;}.page-title h1{font-size:25px;font-weight:400;}h3{margin-bottom:20px;font-weight:500;}.blue{color:#036;}p{line-height:25px;}.ciip-card{border:1px solid #036;padding:15px;border-radius:0;box-shadow:1px 8px 13px -5px #00336694;}button.full-width{width:100%;}.btn-primary{background:#036;border-color:#036;}.with-shadow{box-shadow:1px 8px 13px -5px #00336694;}.accordion .card-body{font-size:15px;}.container.wide{max-width:1600px;}@media screen and (min-width:992px){#page-content{padding-top:60px;}}.btn-outline-primary{color:#0053b3;border-color:#0053b3;}.badge-success,.btn-success{background-color:#24883e;}
   </JSXStyle>
 </div>
 `;
diff --git a/app/tests/unit/pages/__snapshots__/view-application.test.tsx.snap b/app/tests/unit/pages/__snapshots__/view-application.test.tsx.snap
index 345f06a103..1a7e3a514d 100644
--- a/app/tests/unit/pages/__snapshots__/view-application.test.tsx.snap
+++ b/app/tests/unit/pages/__snapshots__/view-application.test.tsx.snap
@@ -11,6 +11,15 @@ exports[`View submitted application page displays a "Resume latest draft" button
   }
   showSubheader={true}
   title="Summary of your application"
+  titleControls={
+    <div>
+      Application ID: 
+      1
+      <br />
+      BC GHG ID: 
+      123456
+    </div>
+  }
 >
   <Row
     noGutters={false}
@@ -63,6 +72,9 @@ exports[`View submitted application page displays a "Resume latest draft" button
             "applicationRevisionStatus": Object {
               "applicationRevisionStatus": "REQUESTED_CHANGES",
             },
+            "facilityByFacilityId": Object {
+              "bcghgid": "123456",
+            },
             "latestDraftRevision": Object {
               "versionNumber": 2,
             },
@@ -92,6 +104,7 @@ exports[`View submitted application page displays a "Resume latest draft" button
                 },
               ],
             },
+            "rowId": 1,
           }
         }
         liveValidate={false}
@@ -108,6 +121,9 @@ exports[`View submitted application page displays a "Resume latest draft" button
               "applicationRevisionStatus": Object {
                 "applicationRevisionStatus": "REQUESTED_CHANGES",
               },
+              "facilityByFacilityId": Object {
+                "bcghgid": "123456",
+              },
               "latestDraftRevision": Object {
                 "versionNumber": 2,
               },
@@ -137,6 +153,7 @@ exports[`View submitted application page displays a "Resume latest draft" button
                   },
                 ],
               },
+              "rowId": 1,
             },
             "session": Object {
               " $fragmentRefs": Object {
@@ -163,6 +180,15 @@ exports[`View submitted application page displays a "Revise" button when changes
   }
   showSubheader={true}
   title="Summary of your application"
+  titleControls={
+    <div>
+      Application ID: 
+      1
+      <br />
+      BC GHG ID: 
+      123456
+    </div>
+  }
 >
   <Row
     noGutters={false}
@@ -189,6 +215,9 @@ exports[`View submitted application page displays a "Revise" button when changes
               "applicationRevisionStatus": Object {
                 "applicationRevisionStatus": "REQUESTED_CHANGES",
               },
+              "facilityByFacilityId": Object {
+                "bcghgid": "123456",
+              },
               "latestDraftRevision": Object {
                 "versionNumber": 1,
               },
@@ -218,6 +247,7 @@ exports[`View submitted application page displays a "Revise" button when changes
                   },
                 ],
               },
+              "rowId": 1,
             }
           }
         />
@@ -232,6 +262,9 @@ exports[`View submitted application page displays a "Revise" button when changes
             "applicationRevisionStatus": Object {
               "applicationRevisionStatus": "REQUESTED_CHANGES",
             },
+            "facilityByFacilityId": Object {
+              "bcghgid": "123456",
+            },
             "latestDraftRevision": Object {
               "versionNumber": 1,
             },
@@ -261,6 +294,7 @@ exports[`View submitted application page displays a "Revise" button when changes
                 },
               ],
             },
+            "rowId": 1,
           }
         }
         liveValidate={false}
@@ -277,6 +311,9 @@ exports[`View submitted application page displays a "Revise" button when changes
               "applicationRevisionStatus": Object {
                 "applicationRevisionStatus": "REQUESTED_CHANGES",
               },
+              "facilityByFacilityId": Object {
+                "bcghgid": "123456",
+              },
               "latestDraftRevision": Object {
                 "versionNumber": 1,
               },
@@ -306,6 +343,7 @@ exports[`View submitted application page displays a "Revise" button when changes
                   },
                 ],
               },
+              "rowId": 1,
             },
             "session": Object {
               " $fragmentRefs": Object {
@@ -332,6 +370,15 @@ exports[`View submitted application page does not show an application decision w
   }
   showSubheader={true}
   title="Summary of your application"
+  titleControls={
+    <div>
+      Application ID: 
+      1
+      <br />
+      BC GHG ID: 
+      123456
+    </div>
+  }
 >
   <Row
     noGutters={false}
@@ -349,6 +396,9 @@ exports[`View submitted application page does not show an application decision w
             "applicationRevisionStatus": Object {
               "applicationRevisionStatus": "SUBMITTED",
             },
+            "facilityByFacilityId": Object {
+              "bcghgid": "123456",
+            },
             "latestDraftRevision": Object {
               "versionNumber": 1,
             },
@@ -370,6 +420,7 @@ exports[`View submitted application page does not show an application decision w
             "reviewCommentsByApplicationId": Object {
               "edges": Array [],
             },
+            "rowId": 1,
           }
         }
         liveValidate={false}
@@ -386,6 +437,9 @@ exports[`View submitted application page does not show an application decision w
               "applicationRevisionStatus": Object {
                 "applicationRevisionStatus": "SUBMITTED",
               },
+              "facilityByFacilityId": Object {
+                "bcghgid": "123456",
+              },
               "latestDraftRevision": Object {
                 "versionNumber": 1,
               },
@@ -407,6 +461,7 @@ exports[`View submitted application page does not show an application decision w
               "reviewCommentsByApplicationId": Object {
                 "edges": Array [],
               },
+              "rowId": 1,
             },
             "session": Object {
               " $fragmentRefs": Object {
@@ -433,6 +488,15 @@ exports[`View submitted application page should render a "View most recent submi
   }
   showSubheader={true}
   title="Summary of your application"
+  titleControls={
+    <div>
+      Application ID: 
+      1
+      <br />
+      BC GHG ID: 
+      123456
+    </div>
+  }
 >
   <Row
     noGutters={false}
@@ -503,6 +567,9 @@ exports[`View submitted application page should render a "View most recent submi
             "applicationRevisionStatus": Object {
               "applicationRevisionStatus": "REQUESTED_CHANGES",
             },
+            "facilityByFacilityId": Object {
+              "bcghgid": "123456",
+            },
             "latestDraftRevision": Object {
               "versionNumber": 2,
             },
@@ -532,6 +599,7 @@ exports[`View submitted application page should render a "View most recent submi
                 },
               ],
             },
+            "rowId": 1,
           }
         }
         liveValidate={false}
@@ -548,6 +616,9 @@ exports[`View submitted application page should render a "View most recent submi
               "applicationRevisionStatus": Object {
                 "applicationRevisionStatus": "REQUESTED_CHANGES",
               },
+              "facilityByFacilityId": Object {
+                "bcghgid": "123456",
+              },
               "latestDraftRevision": Object {
                 "versionNumber": 2,
               },
@@ -577,6 +648,7 @@ exports[`View submitted application page should render a "View most recent submi
                   },
                 ],
               },
+              "rowId": 1,
             },
             "session": Object {
               " $fragmentRefs": Object {
@@ -603,6 +675,15 @@ exports[`View submitted application page should render a "View most recent submi
   }
   showSubheader={true}
   title="Summary of your application"
+  titleControls={
+    <div>
+      Application ID: 
+      1
+      <br />
+      BC GHG ID: 
+      123456
+    </div>
+  }
 >
   <Row
     noGutters={false}
@@ -673,6 +754,9 @@ exports[`View submitted application page should render a "View most recent submi
             "applicationRevisionStatus": Object {
               "applicationRevisionStatus": "REQUESTED_CHANGES",
             },
+            "facilityByFacilityId": Object {
+              "bcghgid": "123456",
+            },
             "latestDraftRevision": Object {
               "versionNumber": 3,
             },
@@ -702,6 +786,7 @@ exports[`View submitted application page should render a "View most recent submi
                 },
               ],
             },
+            "rowId": 1,
           }
         }
         liveValidate={false}
@@ -718,6 +803,9 @@ exports[`View submitted application page should render a "View most recent submi
               "applicationRevisionStatus": Object {
                 "applicationRevisionStatus": "REQUESTED_CHANGES",
               },
+              "facilityByFacilityId": Object {
+                "bcghgid": "123456",
+              },
               "latestDraftRevision": Object {
                 "versionNumber": 3,
               },
@@ -747,6 +835,7 @@ exports[`View submitted application page should render a "View most recent submi
                   },
                 ],
               },
+              "rowId": 1,
             },
             "session": Object {
               " $fragmentRefs": Object {
@@ -773,6 +862,15 @@ exports[`View submitted application page shows approval when reviewed and approv
   }
   showSubheader={true}
   title="Summary of your application"
+  titleControls={
+    <div>
+      Application ID: 
+      1
+      <br />
+      BC GHG ID: 
+      123456
+    </div>
+  }
 >
   <Row
     noGutters={false}
@@ -795,6 +893,9 @@ exports[`View submitted application page shows approval when reviewed and approv
             "applicationRevisionStatus": Object {
               "applicationRevisionStatus": "APPROVED",
             },
+            "facilityByFacilityId": Object {
+              "bcghgid": "123456",
+            },
             "latestDraftRevision": Object {
               "versionNumber": 1,
             },
@@ -816,6 +917,7 @@ exports[`View submitted application page shows approval when reviewed and approv
             "reviewCommentsByApplicationId": Object {
               "edges": Array [],
             },
+            "rowId": 1,
           }
         }
         liveValidate={false}
@@ -832,6 +934,9 @@ exports[`View submitted application page shows approval when reviewed and approv
               "applicationRevisionStatus": Object {
                 "applicationRevisionStatus": "APPROVED",
               },
+              "facilityByFacilityId": Object {
+                "bcghgid": "123456",
+              },
               "latestDraftRevision": Object {
                 "versionNumber": 1,
               },
@@ -853,6 +958,7 @@ exports[`View submitted application page shows approval when reviewed and approv
               "reviewCommentsByApplicationId": Object {
                 "edges": Array [],
               },
+              "rowId": 1,
             },
             "session": Object {
               " $fragmentRefs": Object {
@@ -879,6 +985,15 @@ exports[`View submitted application page shows rejection when reviewed and rejec
   }
   showSubheader={true}
   title="Summary of your application"
+  titleControls={
+    <div>
+      Application ID: 
+      1
+      <br />
+      BC GHG ID: 
+      123456
+    </div>
+  }
 >
   <Row
     noGutters={false}
@@ -901,6 +1016,9 @@ exports[`View submitted application page shows rejection when reviewed and rejec
             "applicationRevisionStatus": Object {
               "applicationRevisionStatus": "REJECTED",
             },
+            "facilityByFacilityId": Object {
+              "bcghgid": "123456",
+            },
             "latestDraftRevision": Object {
               "versionNumber": 1,
             },
@@ -922,6 +1040,7 @@ exports[`View submitted application page shows rejection when reviewed and rejec
             "reviewCommentsByApplicationId": Object {
               "edges": Array [],
             },
+            "rowId": 1,
           }
         }
         liveValidate={false}
@@ -938,6 +1057,9 @@ exports[`View submitted application page shows rejection when reviewed and rejec
               "applicationRevisionStatus": Object {
                 "applicationRevisionStatus": "REJECTED",
               },
+              "facilityByFacilityId": Object {
+                "bcghgid": "123456",
+              },
               "latestDraftRevision": Object {
                 "versionNumber": 1,
               },
@@ -959,6 +1081,7 @@ exports[`View submitted application page shows rejection when reviewed and rejec
               "reviewCommentsByApplicationId": Object {
                 "edges": Array [],
               },
+              "rowId": 1,
             },
             "session": Object {
               " $fragmentRefs": Object {
@@ -985,6 +1108,15 @@ exports[`View submitted application page shows reviewer comments when reviewed a
   }
   showSubheader={true}
   title="Summary of your application"
+  titleControls={
+    <div>
+      Application ID: 
+      1
+      <br />
+      BC GHG ID: 
+      123456
+    </div>
+  }
 >
   <Row
     noGutters={false}
@@ -1011,6 +1143,9 @@ exports[`View submitted application page shows reviewer comments when reviewed a
             "applicationRevisionStatus": Object {
               "applicationRevisionStatus": "REJECTED",
             },
+            "facilityByFacilityId": Object {
+              "bcghgid": "123456",
+            },
             "latestDraftRevision": Object {
               "versionNumber": 1,
             },
@@ -1040,6 +1175,7 @@ exports[`View submitted application page shows reviewer comments when reviewed a
                 },
               ],
             },
+            "rowId": 1,
           }
         }
         liveValidate={false}
@@ -1056,6 +1192,9 @@ exports[`View submitted application page shows reviewer comments when reviewed a
               "applicationRevisionStatus": Object {
                 "applicationRevisionStatus": "REJECTED",
               },
+              "facilityByFacilityId": Object {
+                "bcghgid": "123456",
+              },
               "latestDraftRevision": Object {
                 "versionNumber": 1,
               },
@@ -1085,6 +1224,7 @@ exports[`View submitted application page shows reviewer comments when reviewed a
                   },
                 ],
               },
+              "rowId": 1,
             },
             "session": Object {
               " $fragmentRefs": Object {
diff --git a/app/tests/unit/pages/reporter/__snapshots__/application.test.tsx.snap b/app/tests/unit/pages/reporter/__snapshots__/application.test.tsx.snap
index ac45cc3e7d..66928eb388 100644
--- a/app/tests/unit/pages/reporter/__snapshots__/application.test.tsx.snap
+++ b/app/tests/unit/pages/reporter/__snapshots__/application.test.tsx.snap
@@ -10,6 +10,17 @@ exports[`The /reporter/application page matches the last accepted Snapshot 1`] =
     }
   }
 >
+  <div
+    className="jsx-2575158560 application-ids"
+  >
+    Application ID: 
+    1
+    <br
+      className="jsx-2575158560"
+    />
+    BC GHG ID: 
+    1234
+  </div>
   <Relay(ApplicationWizardComponent)
     query={
       Object {
@@ -17,11 +28,15 @@ exports[`The /reporter/application page matches the last accepted Snapshot 1`] =
           "ApplicationWizard_query": true,
         },
         "application": Object {
+          "facilityByFacilityId": Object {
+            "bcghgid": "1234",
+          },
           "id": "1",
           "latestDraftRevision": Object {
             "legalDisclaimerAccepted": true,
             "versionNumber": 1,
           },
+          "rowId": 1,
         },
         "session": Object {
           " $fragmentRefs": Object {
@@ -31,6 +46,11 @@ exports[`The /reporter/application page matches the last accepted Snapshot 1`] =
       }
     }
   />
+  <JSXStyle
+    id="2935419904"
+  >
+    .application-ids{margin-top:-50px;min-height:50px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}@media screen and (min-width:992px){.application-ids{margin-top:-60px;min-height:60px;}}
+  </JSXStyle>
   <JSXStyle
     id="3438383081"
   >
diff --git a/app/tests/unit/pages/reporter/application.test.tsx b/app/tests/unit/pages/reporter/application.test.tsx
index 8d53660ac8..31bdbc3695 100644
--- a/app/tests/unit/pages/reporter/application.test.tsx
+++ b/app/tests/unit/pages/reporter/application.test.tsx
@@ -13,6 +13,10 @@ const query: applicationQueryResponse['query'] = {
     ApplicationWizard_query: true
   },
   application: {
+    rowId: 1,
+    facilityByFacilityId: {
+      bcghgid: '1234'
+    },
     id: '1',
     latestDraftRevision: {
       versionNumber: 1,
diff --git a/app/tests/unit/pages/view-application.test.tsx b/app/tests/unit/pages/view-application.test.tsx
index 977a3db158..b3eebf5a10 100644
--- a/app/tests/unit/pages/view-application.test.tsx
+++ b/app/tests/unit/pages/view-application.test.tsx
@@ -13,6 +13,10 @@ const query: viewApplicationQueryResponse['query'] = {
     }
   },
   application: {
+    rowId: 1,
+    facilityByFacilityId: {
+      bcghgid: '123456'
+    },
     latestDraftRevision: {
       versionNumber: 1
     },