Merge pull request #214 from adhocteam/kw-include-context-menu

Include the context menu in the activity reports table
adhocteam · Mar 8, 2021 · e7db658 · e7db658
2 parents cf78ad4 + 263f242
commit e7db658
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 17 deletions.
diff --git a/frontend/src/pages/Landing/__tests__/index.js b/frontend/src/pages/Landing/__tests__/index.js
@@ -85,7 +85,7 @@ describe('Landing Page', () => {
     expect(reportIdLink).toBeVisible();
     expect(reportIdLink.closest('a')).toHaveAttribute(
       'href',
-      '/activity-reports/1/activity-summary',
+      '/activity-reports/1',
     );
   });
 

diff --git a/frontend/src/pages/Landing/index.css b/frontend/src/pages/Landing/index.css
@@ -111,17 +111,12 @@ h1.landing {
   overflow: hidden;
   text-overflow: ellipsis;
   display: inline-block;
-  width: 210px;
+  width: 200px;
   vertical-align: middle;
 }
 
-.smart-hub--dotdotdot {
-  font-size: 25px;
-  font-weight: bold;
-  border: none;
-  background: transparent;
-  padding-bottom: 15px;
-  line-height: 0.75;
+.usa-button.smart-hub--button__no-margin {
+  margin-left: 0px;
 }
 
 .smart-hub--plus {

diff --git a/frontend/src/pages/Landing/index.js b/frontend/src/pages/Landing/index.js
@@ -3,7 +3,7 @@ import {
   Tag, Table, Alert, Grid,
 } from '@trussworks/react-uswds';
 import { Helmet } from 'react-helmet';
-import { Link } from 'react-router-dom';
+import { Link, useHistory } from 'react-router-dom';
 import SimpleBar from 'simplebar-react';
 import 'simplebar/dist/simplebar.min.css';
 
@@ -16,8 +16,9 @@ import '@trussworks/react-uswds/lib/index.css';
 import './index.css';
 import MyAlerts from './MyAlerts';
 import { hasReadWrite } from '../../permissions';
+import ContextMenu from '../../components/ContextMenu';
 
-function renderReports(reports) {
+function renderReports(reports, history) {
   const emptyReport = {
     id: '',
     displayId: '',
@@ -87,12 +88,20 @@ function renderReports(reports) {
       </Tag>
     ));
 
+    const menuItems = [
+      {
+        label: 'Edit',
+        onClick: () => { history.push(`/activity-reports/${id}`); },
+      },
+    ];
+    const contextMenuLabel = `Edit activity report ${displayId}`;
+
     return (
       <tr key={`landing_${id}`}>
         <th scope="row">
           <Link
-            to={`/activity-reports/${id}/activity-summary`}
-            href={`/activity-reports/${id}/activity-summary`}
+            to={`/activity-reports/${id}`}
+            href={`/activity-reports/${id}`}
           >
             {displayId}
           </Link>
@@ -127,16 +136,15 @@ function renderReports(reports) {
           </Tag>
         </td>
         <td>
-          <button type="button" className="smart-hub--dotdotdot">
-            ...
-          </button>
+          <ContextMenu label={contextMenuLabel} menuItems={menuItems} />
         </td>
       </tr>
     );
   });
 }
 
 function Landing() {
+  const history = useHistory();
   const [isLoaded, setIsLoaded] = useState(false);
   const [reports, updateReports] = useState([]);
   const [reportAlerts, updateReportAlerts] = useState([]);
@@ -205,7 +213,7 @@ function Landing() {
                       <th scope="col" aria-label="..." />
                     </tr>
                   </thead>
-                  <tbody>{renderReports(reports)}</tbody>
+                  <tbody>{renderReports(reports, history)}</tbody>
                 </Table>
               </Container>
             </SimpleBar>