Add ability to delete a report in My Alerts

frontend/src/Constants.js

@@ -74,6 +74,7 @@ export const managerReportStatuses = [
 
 export const REPORT_STATUSES = {
   DRAFT: 'draft',
+  DELETED: 'deleted',
   SUBMITTED: 'submitted',
   NEEDS_ACTION: 'needs_action',
   APPROVED: 'approved',
@@ -82,3 +83,8 @@ export const REPORT_STATUSES = {
 export const REPORTS_PER_PAGE = 10;
 export const ALERTS_PER_PAGE = 10;
 export const GOVERNMENT_HOSTNAME_EXTENSION = '.ohs.acf.hhs.gov';
+export const ESCAPE_KEY_CODE = 27;
+
+// In Internet Explorer (tested on release 9 and 11) and Firefox 36 and earlier
+// the Esc key returns "Esc" instead of "Escape".
+export const ESCAPE_KEY_CODES = ['Escape', 'Esc'];

frontend/src/components/DeleteReportModal.css

@@ -0,0 +1,8 @@
+#deleteDialog div {
+    border-style: none;
+    padding: .5rem;
+    margin: .5rem;
+}
+#deleteDialog button {
+    margin-left: 20px;
+}

frontend/src/components/DeleteReportModal.js

@@ -0,0 +1,62 @@
+import React, { useCallback, useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import { Button, Modal } from '@trussworks/react-uswds';
+
+import { ESCAPE_KEY_CODES } from '../Constants';
+import './DeleteReportModal.css';
+
+const DeleteModal = ({
+  onDelete, onClose, closeModal,
+}) => {
+  const modalRef = useRef(null);
+
+  const onEscape = useCallback((event) => {
+    if (ESCAPE_KEY_CODES.includes(event.key)) {
+      closeModal();
+    }
+  }, [closeModal]);
+
+  useEffect(() => {
+    document.addEventListener('keydown', onEscape, false);
+    return () => {
+      document.removeEventListener('keydown', onEscape, false);
+    };
+  }, [onEscape]);
+
+  useEffect(() => {
+    const button = modalRef.current.querySelector('button');
+    if (button) {
+      button.focus();
+    }
+  });
+
+  return (
+    <div ref={modalRef} aria-modal="true" role="dialog" id="deleteDialog">
+      <Modal
+        title={<h2>Delete Activity Report</h2>}
+        actions={(
+          <>
+            <Button type="button" onClick={onClose}>
+              Cancel
+            </Button>
+
+            <Button type="button" secondary onClick={onDelete}>
+              Delete
+            </Button>
+          </>
+        )}
+      >
+        Are you sure you want to delete this activity report?
+        This action can only be undone by a TTA Smart Hub Administrator
+      </Modal>
+    </div>
+  );
+};
+
+DeleteModal.propTypes = {
+  onDelete: PropTypes.func.isRequired,
+  onClose: PropTypes.func.isRequired,
+  closeModal: PropTypes.func.isRequired,
+};
+
+export default DeleteModal;

frontend/src/components/__tests__/DeleteReportModal.js

@@ -0,0 +1,59 @@
+import '@testing-library/jest-dom';
+import React from 'react';
+import {
+  render, screen,
+} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { useModal, connectModal, Button } from '@trussworks/react-uswds';
+
+import DeleteReportModal from '../DeleteReportModal';
+
+const SomeComponent = () => {
+  const { isOpen, openModal, closeModal } = useModal();
+  const ConnectModal = connectModal(DeleteReportModal);
+
+  return (
+    <div>
+      <ConnectModal
+        onDelete={() => {}}
+        onClose={() => {}}
+        closeModal={closeModal}
+        isOpen={isOpen}
+      />
+      <Button onClick={openModal}>Open</Button>
+    </div>
+  );
+};
+
+describe('DeleteReportModal', () => {
+  it('shows two buttons', async () => {
+    // Given a page with a modal
+    render(<DeleteReportModal
+      onDelete={() => {}}
+      onClose={() => {}}
+      closeModal={() => {}}
+      isOpen
+    />);
+    // When the modal is triggered
+    const buttons = await screen.findAllByRole('button');
+
+    // Then we see our options
+    expect(buttons.length).toBe(2);
+  });
+
+  it('exits when escapse key is pressed', async () => {
+    // Given a page with a modal
+    render(<SomeComponent />);
+
+    // When the modal is triggered
+    const button = await screen.findByText('Open');
+    userEvent.click(button);
+
+    const modal = await screen.findByTestId('modal');
+    expect(modal).toBeVisible();
+
+    // And the modal  can closeclose the modal via the escape key
+    userEvent.type(modal, '{esc}', { skipClick: true });
+    expect(screen.queryByTestId('modal')).not.toBeTruthy();
+  });
+});

frontend/src/fetchers/__tests__/activityReports.js

@@ -9,6 +9,7 @@ import {
   legacyReportById,
   getReports,
   getReportAlerts,
+  deleteReport,
 } from '../activityReports';
 import { REPORTS_PER_PAGE } from '../../Constants';
 
@@ -119,4 +120,13 @@ describe('activityReports fetcher', () => {
       expect(savedReport).toEqual(report);
     });
   });
+
+  describe('deleteReport', () => {
+    it('deletes the report', async () => {
+      const status = { status: 200 };
+      fetchMock.delete(join('api', 'activity-reports', '1'), status);
+      await deleteReport(1);
+      expect(fetchMock.called()).toBeTruthy();
+    });
+  });
 });

frontend/src/fetchers/activityReports.js

@@ -1,5 +1,7 @@
 import join from 'url-join';
-import { get, put, post } from './index';
+import {
+  get, put, post, destroy,
+} from './index';
 import { DECIMAL_BASE, REPORTS_PER_PAGE, ALERTS_PER_PAGE } from '../Constants';
 
 const activityReportUrl = join('/', 'api', 'activity-reports');
@@ -26,6 +28,10 @@ export const saveReport = async (reportId, data) => {
   return report.json();
 };
 
+export const deleteReport = async (reportId) => {
+  await destroy(join(activityReportUrl, reportId.toString(DECIMAL_BASE)));
+};
+
 export const createReport = async (data) => {
   const report = await post(activityReportUrl, data);
   return report.json();

frontend/src/fetchers/index.js

@@ -50,3 +50,21 @@ export const post = async (url, data) => {
   }
   return res;
 };
+
+/*
+ * Note: Due to `delete` being a keyword, we'll settle with `destroy`
+ */
+export const destroy = async (url) => {
+  const res = await fetch(url, {
+    method: 'DELETE',
+    credentials: 'same-origin',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+
+  if (!res.ok) {
+    throw new Error(res.statusText);
+  }
+  return res;
+};

frontend/src/pages/ActivityReport/Pages/__tests__/goalsObjectives.js

@@ -174,5 +174,31 @@ describe('goals objectives', () => {
       const objective = await screen.findByText('title');
       expect(objective).toBeVisible();
     });
+
+    it('isPageComplete is true', async () => {
+      const objectives = [
+        {
+          id: 1,
+          title: 'title',
+          ttaProvided: 'tta',
+          status: 'In Progress',
+        },
+        {
+          id: 2,
+          title: 'title',
+          ttaProvided: 'tta',
+          status: 'In Progress',
+        },
+      ];
+      const formData = { activityRecipientType: 'non-grantee', objectivesWithoutGoals: objectives };
+      const isComplete = goalsObjectives.isPageComplete(formData);
+      expect(isComplete).toBeTruthy();
+    });
+
+    it('isPageComplete is false', async () => {
+      const formData = { activityRecipientType: 'grantee', goals: [] };
+      const isComplete = goalsObjectives.isPageComplete(formData);
+      expect(isComplete).not.toBeTruthy();
+    });
   });
 });