Merge pull request #150 from adhocteam/kw-display-reports

Display reports

cucumber/features/activityReport.feature

@@ -1,7 +1,7 @@
 Feature: TTA Smarthub Activity Report
     Scenario: Report can be filled out
         Given I am logged in
-        And I am on the activity reports page
+        And I am on the landing page
         Then I see "New activity report for Region 14" message
         When I select "Non-Grantee"
         Then I see "QRIS System" as an option in the "Non-grantee name(s)" multiselect

cucumber/features/steps/activityReportSteps.js

@@ -5,14 +5,21 @@ const {
 const assertTrue = require('assert');
 const scope = require('../support/scope');
 
-Given('I am on the activity reports page', async () => {
+Given('I am on the landing page', async () => {
   const page = scope.context.currentPage;
-  const selector = 'a[href$="activity-reports/new"]';
+  const selector = 'a[href$="activity-reports"]';
   await Promise.all([
     page.waitForNavigation(),
     page.click(selector),
   ]);
   await scope.context.currentPage.waitForSelector('h1');
+
+  const selectorNewReport = 'a[href$="activity-reports/new"]';
+  await Promise.all([
+    page.waitForNavigation(),
+    page.click(selectorNewReport),
+  ]);
+  await scope.context.currentPage.waitForSelector('h1');
 });
 
 When('I select {string}', async (inputLabel) => {

cucumber/features/steps/homePageSteps.js

@@ -22,7 +22,7 @@ Given('I am logged in', async () => {
 
   const loginLinkSelector = 'a[href$="api/login"]';
   // const homeLinkSelector = 'a[href$="/"]';
-  const activityReportsSelector = 'a[href$="activity-reports/new"]';
+  const activityReportsSelector = 'a[href$="activity-reports"]';
 
   await page.goto(scope.uri);
   await page.waitForSelector('em'); // Page title
@@ -52,7 +52,7 @@ Then('I see {string} message', async (string) => {
 
 Then('I see {string} link', async (string) => {
   const page = scope.context.currentPage;
-  const selector = 'a[href$="activity-reports/new"]';
+  const selector = 'a[href$="activity-reports"]';
 
   await page.waitForSelector(selector);
   const value = await page.$eval(selector, (el) => el.textContent);

docs/openapi/index.yaml

@@ -113,6 +113,40 @@ components:
           description: The type of the activity, Training or Technical Assistance (or both)
           items:
             type: string
+    shortActivityReport:
+      type: object
+      description: >
+        This object represents a shorter version of a report on an activity that a specialist has completed
+        with 1 to many grants or non-grantees
+      properties:
+        id:
+          type: number
+        regionId:
+          type: number
+          description: Home region id of the activity report user
+        startDate:
+          type: string
+        lastSaved:
+          type: string
+        topics:
+          type: array
+          description: Topics covered during the TTA
+          items:
+            type: string
+        activityRecipients:
+          type: array
+          description: Activity recipients - grantees or non-grantees
+          items:
+            type: object
+        collaborators:
+          type: array
+          description: Collaborating user names
+          items:
+            type: object
+        status:
+          type: string
+          enum: ['approved', 'draft', 'submitted']
+          description: The current state of the report
     selectableUser:
       type: object
       description: >

docs/openapi/paths/activity-reports/activity-reports.yaml

@@ -1,3 +1,15 @@
+get:
+  tags:
+    - activity-reports
+  description: Gets activity reports from the database.
+  responses:
+    200:
+      description: Successfully retrieved activity reports
+      content:
+        application/json:
+          schema:
+            type: object
+            $ref: '../../index.yaml#/components/schemas/shortActivityReport'
 post:
   tags:
     - activity-reports

frontend/package.json

@@ -33,6 +33,8 @@
     "react-select": "^3.1.0",
     "react-stickynode": "^3.0.4",
     "react-with-direction": "^1.3.1",
+    "simplebar": "^5.3.0",
+    "simplebar-react": "^2.3.0",
     "url-join": "^4.0.1",
     "use-deep-compare-effect": "^1.6.1",
     "uswds": "^2.9.0"

frontend/src/App.css

@@ -3,8 +3,8 @@
   top: 0;
   z-index: -1;
   left: 0;
-  width: 100%;
-  height: 345px;
+  width: 200px;
+  height: 100%;
   content: "";
   background-color: #264a64;
 }
@@ -38,3 +38,4 @@ body {
 .SingleDatePickerInput__disabled {
   opacity: 0.7;
 }
+

frontend/src/App.js

@@ -3,7 +3,6 @@ import 'uswds/dist/css/uswds.css';
 import '@trussworks/react-uswds/lib/index.css';
 
 import { BrowserRouter, Route, Switch } from 'react-router-dom';
-import { GridContainer } from '@trussworks/react-uswds';
 import { Helmet } from 'react-helmet';
 
 import { fetchUser, fetchLogout } from './fetchers/Auth';
@@ -15,11 +14,14 @@ import Admin from './pages/Admin';
 import Unauthenticated from './pages/Unauthenticated';
 import NotFound from './pages/NotFound';
 import Home from './pages/Home';
+import Landing from './pages/Landing';
 import ActivityReport from './pages/ActivityReport';
 import isAdmin from './permissions';
 import 'react-dates/initialize';
 import 'react-dates/lib/css/_datepicker.css';
 import './App.css';
+import MainLayout from './components/MainLayout';
+import LandingLayout from './components/LandingLayout';
 
 function App() {
   const [user, updateUser] = useState();
@@ -58,6 +60,7 @@ function App() {
   }
 
   const admin = isAdmin(user);
+
   const renderAuthenticatedRoutes = () => (
     <div role="main" id="main-content">
       <IdleModal
@@ -66,33 +69,42 @@ function App() {
         logoutUser={logout}
       />
       <Switch>
+        <Route
+          exact
+          path="/activity-reports"
+          render={({ match }) => (
+            <LandingLayout><Landing match={match} /></LandingLayout>
+          )}
+        />
+
         <Route
           exact
           path="/"
           render={() => (
-            <Home />
+            <MainLayout><Home /></MainLayout>
           )}
         />
+
         <Route
           path="/activity-reports/:activityReportId/:currentPage?"
           render={({ match, location }) => (
-            <ActivityReport location={location} match={match} user={user} />
-          )}
-        />
-        {admin
-        && (
-        <Route
-          path="/admin/:userId?"
-          render={({ match }) => (
-            <Admin match={match} />
+            <MainLayout>
+              <ActivityReport location={location} match={match} user={user} />
+            </MainLayout>
           )}
         />
+
+        {admin && (
+          <Route
+            path="/admin/:userId?"
+            render={({ match }) => <MainLayout><Admin match={match} /></MainLayout>}
+          />
         )}
+
         <Route
-          render={() => (
-            <NotFound />
-          )}
+          render={() => <MainLayout><NotFound /></MainLayout>}
         />
+
       </Switch>
     </div>
   );
@@ -103,17 +115,21 @@ function App() {
         <meta charSet="utf-8" />
       </Helmet>
       <BrowserRouter>
-        {authenticated && <a className="usa-skipnav" href="#main-content">Skip to main content</a>}
+        {authenticated && (
+          <a className="usa-skipnav" href="#main-content">
+            Skip to main content
+          </a>
+        )}
         <UserContext.Provider value={{ user, authenticated, logout }}>
           <Header authenticated={authenticated} admin={admin} />
           <div className="background-stripe" />
           <section className="usa-section">
-            <GridContainer>
-              {!authenticated
-        && <Unauthenticated loggedOut={loggedOut} timedOut={timedOut} />}
-              {authenticated
-        && renderAuthenticatedRoutes()}
-            </GridContainer>
+
+            {!authenticated && (
+            <Unauthenticated loggedOut={loggedOut} timedOut={timedOut} />
+            )}
+            {authenticated && renderAuthenticatedRoutes()}
+
           </section>
         </UserContext.Provider>
       </BrowserRouter>

frontend/src/components/Header.js

@@ -14,7 +14,7 @@ function Header({ authenticated, admin }) {
     <NavLink exact to="/">
       Home
     </NavLink>,
-    <NavLink to="/activity-reports/new">
+    <NavLink to="/activity-reports">
       Activity Reports
     </NavLink>,
   ];

frontend/src/components/LandingLayout.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Grid } from '@trussworks/react-uswds';
+
+function LandingLayout({ children }) {
+  return (
+    <Grid row>
+      <Grid tablet={{ col: true }} className="smart-hub--fit-content">{children}</Grid>
+    </Grid>
+  );
+}
+
+LandingLayout.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export default LandingLayout;

frontend/src/components/MainLayout.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { GridContainer } from '@trussworks/react-uswds';
+
+function MainLayout({ children }) {
+  return (
+    <GridContainer>
+      {children}
+    </GridContainer>
+  );
+}
+
+MainLayout.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export default MainLayout;

frontend/src/fetchers/activityReports.js

@@ -30,6 +30,11 @@ export const getReport = async (reportId) => {
   return report.json();
 };
 
+export const getReports = async () => {
+  const reports = await get(activityReportUrl);
+  return reports.json();
+};
+
 export const getRecipients = async () => {
   const recipients = await get(join(activityReportUrl, 'activity-recipients'));
   return recipients.json();

frontend/src/pages/ActivityReport/index.css

@@ -6,9 +6,7 @@
   font-style: normal;
   line-height: normal;
   letter-spacing: normal;
-  color: #ffffff;
   margin-bottom: 40px;
-  margin-top: 40px;
 }
 
 .smart-hub--form-section {
@@ -66,4 +64,4 @@
   border-bottom-left-radius: 4px;
   border-bottom-right-radius: 4px;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
-}
+}