feat: analyst review sidebar layout

bcgov · Apr 9, 2021 · a66cf66 · a66cf66
1 parent 7eed736
commit a66cf66
Show file tree

Hide file tree

Showing 3 changed files with 157 additions and 111 deletions.
diff --git a/app/components/Application/ReviewSidebar.tsx b/app/components/Application/ReviewSidebar.tsx
@@ -1,83 +1,115 @@
 import React from 'react';
-import {Button, Card} from 'react-bootstrap';
+import {Button} from 'react-bootstrap';
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import {faCheck} from '@fortawesome/free-solid-svg-icons';
 
 interface Props {
   reviewStep: string;
+  onClose: () => void;
+  onCompleted: () => void;
 }
 
 export const ApplicationReviewStep: React.FunctionComponent<Props> = ({
-  reviewStep
+  reviewStep,
+  onClose,
+  onCompleted
 }) => {
   return (
-    <>
-      <Card className="text-center justification-card">
-        <div id="justification" className="scrollbar">
-          <h1>{reviewStep} Review</h1>
-          <Button style={{width: '80%'}} variant="outline-info">
-            <FontAwesomeIcon icon={faCheck} />
-            Mark this step as complete
-          </Button>
-          <Card.Body className="scrollbar">
-            COMMENTS GO HERE COMMENTS GO HERE COMMENTS GO HERE COMMENTS GO HERE
-            COMMENTS GO HERE COMMENTS GO HERE COMMENTS GO HERE COMMENTS GO HERE
-            COMMENTS GO HERE COMMENTS GO HERE COMMENTS GO HERE COMMENTS GO HERE
-            COMMENTS GO HERE COMMENTS GO HERE COMMENTS GO HERE COMMENTS GO HERE
-            COMMENTS GO HERE COMMENTS GO HERE COMMENTS GO HERE COMMENTS GO HERE
-            COMMENTS GO HERE COMMENTS GO HERE COMMENTS GO HERE COMMENTS GO HERE
-            COMMENTS GO HERE COMMENTS GO HERE COMMENTS GO HERE COMMENTS GO HERE
-            COMMENTS GO HERE COMMENTS GO HERE COMMENTS GO HERE COMMENTS GO HERE
-            COMMENTS GO HERE COMMENTS GO HERE COMMENTS GO HERE COMMENTS GO HERE
-            COMMENTS GO HERE COMMENTS GO HERE COMMENTS GO HERE COMMENTS GO HERE
-            COMMENTS GO HERE COMMENTS GO HERE COMMENTS GO HERE COMMENTS GO HERE
-            COMMENTS GO HERE COMMENTS GO HERE COMMENTS GO HERE COMMENTS GO HERE
-            COMMENTS GO HERE COMMENTS GO HERE COMMENTS GO HERE COMMENTS GO HERE
-            COMMENTS GO HERE COMMENTS GO HERE COMMENTS GO HERE COMMENTS GO HERE
-            COMMENTS GO HERE COMMENTS GO HERE COMMENTS GO HERE COMMENTS GO HERE
-            COMMENTS GO HERE COMMENTS GO HERE COMMENTS GO HERE COMMENTS GO HERE
-            COMMENTS GO HERE COMMENTS GO HERE COMMENTS GO HERE COMMENTS GO HERE
-            COMMENTS GO HERE COMMENTS GO HERE COMMENTS GO HERE COMMENTS GO HERE
-            COMMENTS GO HERE COMMENTS GO HERE COMMENTS GO HERE COMMENTS GO HERE
-            COMMENTS GO HERE COMMENTS GO HERE COMMENTS GO HERE COMMENTS GO HERE
-            COMMENTS GO HERE COMMENTS GO HERE COMMENTS GO HERE COMMENTS GO HERE
-            COMMENTS GO HERE COMMENTS GO HERE COMMENTS GO HERE COMMENTS GO HERE
-            COMMENTS GO HERE COMMENTS GO HERE COMMENTS GO HERE COMMENTS GO HERE
-            COMMENTS GO HERE COMMENTS GO HERE COMMENTS GO HERE COMMENTS GO HERE
-            COMMENTS GO HERE COMMENTS GO HERE COMMENTS GO HERE COMMENTS GO HERE
-            COMMENTS GO HERE COMMENTS GO HERE COMMENTS GO HERE COMMENTS GO HERE
-            COMMENTS GO HERE COMMENTS GO HERE COMMENTS GO HERE COMMENTS GO HERE
-            COMMENTS GO HERE COMMENTS GO HERE COMMENTS GO HERE COMMENTS GO HERE
-            COMMENTS GO HERE COMMENTS GO HERE COMMENTS GO HERE COMMENTS GO HERE
-            COMMENTS GO HERE COMMENTS GO HERE COMMENTS GO HERE COMMENTS GO HERE
-            COMMENTS GO HERE
-          </Card.Body>
-        </div>
-        <Card.Footer className="text-muted">2 days ago</Card.Footer>
-      </Card>
+    <div id="sidebar" className="col-md-4 col-xxl-3">
+      <button
+        type="button"
+        id="close"
+        aria-label={`Close ${reviewStep} Review`}
+        onClick={onClose}
+      >
+        ×
+      </button>
+      <h2>{reviewStep} Review</h2>
+      <Button
+        variant="outline-primary"
+        type="button"
+        onClick={onCompleted}
+        style={{
+          padding: '0.75rem .9rem',
+          display: 'block',
+          margin: 'auto'
+        }}
+      >
+        <FontAwesomeIcon icon={faCheck} style={{marginRight: '0.5rem'}} />
+        Mark this review step completed
+      </Button>
+      <div id="scrollable-comments" tabIndex={0}>
+        HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO
+        HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO
+        HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO
+        HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO
+        HELLO HELLO sd sdjf sdjfh lk ie dsdfo o od pd j h y ii k k i i i y y y y
+        j j n n b g g g g g j u i k j n k l m n b b v v h k i k j n k l m n b b
+        v v h k h k i k j n k l m n b b v v h k i k j n k l m n b b v v h k i k
+        j n k l m n b b v v h k i k j n k l m n b b v v h k i k j n k l m n b b
+        v v h k i k j n k l m n b b v v h k i k j n k l m n b b v v h k i k j n
+        k l m n b b v v h k i k j n k l m n b b v v h k i k j n k l m n b b v v
+        h k i k j n k l m n b b v v h k i k j n k l m n b b v v h k i k j n k l
+        m n b b v v h k i k j n k l m n b b v v h k i k j n k l m n b b v v h k
+        i k j n k l m n b b v v h k i k j n k l m n b b v v h k i k j n k l m n
+        b b v v h k i k j n k l m n b b v v h k i k j n k l m n b b v v h k i k
+        j n k l m n b b v v
+      </div>
+      <div id="button-footer">
+        <Button variant="link" style={{padding: 0}}>
+          Show Resolved
+        </Button>
+        <Button variant="primary">+ New Comment</Button>
+      </div>
       <style jsx>{`
-        #justification-card {
-          margin: 1rem 1rem 1rem 1rem;
-        }
-        #justification {
+        #sidebar {
           position: fixed;
-          padding: 1rem;
-          max-height: 50em;
-          background: #eee;
+          top: 68px;
+          right: 0;
+          height: calc(100% - 68px);
+          background: #f7f7f7;
+          border: 1px solid transparent;
+          border-left-color: #dfdfdf;
+          padding: 0 1.5em;
+        }
+        #close {
+          font-size: 2.2rem;
+          position: absolute;
+          top: 0;
+          left: 1rem;
+          cursor: pointer;
+          border: none;
+          background: none;
+        }
+        h2 {
+          margin: 15px 0;
+          text-align: center;
+        }
+        #scrollable-comments {
           overflow-y: scroll;
-          align: center;
+          height: calc(100% - 108px - 3rem - 53px);
+          margin: 1.5rem 0;
+          padding: 0.5em 0.7em 0 0.5em;
         }
-        .scrollbar::-webkit-scrollbar {
+        #scrollable-comments::-webkit-scrollbar {
           -webkit-appearance: none;
           width: 8px;
         }
-        .scrollbar::-webkit-scrollbar-thumb {
+        #scrollable-comments::-webkit-scrollbar-thumb {
           border-radius: 4px;
           background-color: rgba(0, 0, 0, 0.5);
           box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
         }
+        #button-footer {
+          position: absolute;
+          bottom: 0;
+          margin-bottom: 15px;
+          width: calc(100% - 3em);
+          display: flex;
+          justify-content: space-between;
+        }
       `}</style>
-    </>
+    </div>
   );
 };
 

diff --git a/app/pages/analyst/application-review.tsx b/app/pages/analyst/application-review.tsx
@@ -1,15 +1,15 @@
 import React, {Component} from 'react';
 import {graphql} from 'react-relay';
 import {applicationReviewQueryResponse} from 'applicationReviewQuery.graphql';
-import {Row, Col} from 'react-bootstrap';
+import {Row} from 'react-bootstrap';
 import IncentiveCalculatorContainer from 'containers/Incentives/IncentiveCalculatorContainer';
 import ApplicationRevisionStatusContainer from 'containers/Applications/ApplicationRevisionStatusContainer';
 import DefaultLayout from 'layouts/default-layout';
 import ApplicationDetails from 'containers/Applications/ApplicationDetailsContainer';
 import ApplicationOverrideNotification from 'components/Application/ApplicationOverrideNotificationCard';
 import {CiipPageComponentProps} from 'next-env';
 import {INCENTIVE_ANALYST, ADMIN_GROUP} from 'data/group-constants';
-import ApplicationReviewStep from 'components/Application/ApplicationReviewStep';
+import ReviewSidebar from 'components/Application/ReviewSidebar';
 
 const ALLOWED_GROUPS = [INCENTIVE_ANALYST, ...ADMIN_GROUP];
 
@@ -73,23 +73,42 @@ class ApplicationReview extends Component<Props> {
       }
     }
   `;
+  state = {isSidebarOpened: false};
+  constructor(props) {
+    super(props);
+    this.toggleSidebar = this.toggleSidebar.bind(this);
+  }
+  toggleSidebar() {
+    this.setState((state) => {
+      return {isSidebarOpened: !state.isSidebarOpened};
+    });
+  }
 
   render() {
     const {query} = this.props;
     const {overrideJustification} = query?.applicationRevision;
     const {session} = query || {};
+
     return (
-      <DefaultLayout session={session} width="wide">
-        <ApplicationRevisionStatusContainer
-          applicationRevisionStatus={query.application.reviewRevisionStatus}
-          applicationRowId={query.application.rowId}
-        />
-        <ApplicationOverrideNotification
-          overrideJustification={overrideJustification}
-        />
-        <hr />
+      <DefaultLayout session={session} width="wide" fixedHeader>
         <Row className="application-container">
-          <Col md={8} className="application-body">
+          <div
+            id="application-body"
+            className={`col-md-${this.state.isSidebarOpened ? 8 : 10}
+             col-xxl-${this.state.isSidebarOpened ? 9 : 10}
+             offset-md-${this.state.isSidebarOpened ? 0 : 1}`}
+          >
+            <ApplicationRevisionStatusContainer
+              applicationRevisionStatus={query.application.reviewRevisionStatus}
+              applicationRowId={query.application.rowId}
+            />
+            <button type="button" onClick={this.toggleSidebar}>
+              Click to toggle review comments
+            </button>
+            <ApplicationOverrideNotification
+              overrideJustification={overrideJustification}
+            />
+            <hr />
             <ApplicationDetails
               review
               query={query}
@@ -99,16 +118,17 @@ class ApplicationReview extends Component<Props> {
             <IncentiveCalculatorContainer
               applicationRevision={query.applicationRevision}
             />
-          </Col>
-          <Col md={4} className="review-step-box">
-            <ApplicationReviewStep reviewStep="Technical" />
-          </Col>
+          </div>
+          {this.state.isSidebarOpened && (
+            <ReviewSidebar
+              reviewStep="Technical"
+              onClose={this.toggleSidebar}
+              onCompleted={() => {
+                console.log('implement me in 2293');
+              }}
+            />
+          )}
         </Row>
-        <style jsx>{`
-          .container {
-            display: none;
-          }
-        `}</style>
       </DefaultLayout>
     );
   }

diff --git a/app/tests/unit/pages/__snapshots__/application-review.test.tsx.snap b/app/tests/unit/pages/__snapshots__/application-review.test.tsx.snap
@@ -2,6 +2,7 @@
 
 exports[`The application-review page matches the last accepted Snapshot 1`] = `
 <Relay(DefaultLayout)
+  fixedHeader={true}
   session={
     Object {
       " $fragmentRefs": Object {
@@ -11,30 +12,36 @@ exports[`The application-review page matches the last accepted Snapshot 1`] = `
   }
   width="wide"
 >
-  <Relay(ApplicationRevisionStatusComponent)
-    applicationRevisionStatus={
-      Object {
-        " $fragmentRefs": Object {
-          "ApplicationRevisionStatusContainer_applicationRevisionStatus": true,
-        },
-      }
-    }
-    applicationRowId={1}
-  />
-  <ApplicationOverrideNotification
-    overrideJustification={null}
-  />
-  <hr
-    className="jsx-1070550671"
-  />
   <Row
     className="application-container"
     noGutters={false}
   >
-    <Col
-      className="application-body"
-      md={8}
+    <div
+      className="col-md-10
+             col-xxl-10
+             offset-md-1"
+      id="application-body"
     >
+      <Relay(ApplicationRevisionStatusComponent)
+        applicationRevisionStatus={
+          Object {
+            " $fragmentRefs": Object {
+              "ApplicationRevisionStatusContainer_applicationRevisionStatus": true,
+            },
+          }
+        }
+        applicationRowId={1}
+      />
+      <button
+        onClick={[Function]}
+        type="button"
+      >
+        Click to toggle review comments
+      </button>
+      <ApplicationOverrideNotification
+        overrideJustification={null}
+      />
+      <hr />
       <Relay(ApplicationDetailsComponent)
         application={
           Object {
@@ -91,20 +98,7 @@ exports[`The application-review page matches the last accepted Snapshot 1`] = `
           }
         }
       />
-    </Col>
-    <Col
-      className="review-step-box"
-      md={4}
-    >
-      <ApplicationReviewStep
-        reviewStep="Technical"
-      />
-    </Col>
+    </div>
   </Row>
-  <JSXStyle
-    id="1070550671"
-  >
-    .container.jsx-1070550671{display:none;}
-  </JSXStyle>
 </Relay(DefaultLayout)>
 `;