[Prod] Reopen closed goals, properly match goals with no collaborators, fix bug with goal similarity versioning

.circleci/config.yml

@@ -291,7 +291,7 @@ parameters:
  default: "al/ttahub-2570/flat-resource-sql"
  type: string
  sandbox_git_branch: # change to feature branch to test deployment
- default: "mb/TTAHUB/frontend-for-tr-dashboard"
+ default: "jp/2793/reopen-frontend"
  type: string
  prod_new_relic_app_id:
  default: "877570491"

frontend/package.json

@@ -11,7 +11,7 @@
  "@hookform/error-message": "^0.0.5",
  "@react-hook/resize-observer": "^1.2.6",
  "@trussworks/react-uswds": "4.1.1",
- "@ttahub/common": "2.0.18",
+ "@ttahub/common": "^2.1.3",
  "@use-it/interval": "^1.0.0",
  "async": "^3.2.3",
  "browserslist": "^4.16.5",

frontend/src/components/GoalCards/GoalCard.js

@@ -55,6 +55,7 @@ function GoalCard({
  recipientId,
  regionId,
  showCloseSuspendGoalModal,
+ showReopenGoalModal,
  performGoalStatusUpdate,
  handleGoalCheckboxSelect,
  isChecked,
@@ -77,6 +78,7 @@ function GoalCard({
  createdVia,
  collaborators,
  onAR,
+ isReopenedGoal,
  } = goal;
 
  const sortedObjectives = [...objectives, ...(sessionObjectives || [])];
@@ -88,7 +90,7 @@ function GoalCard({
  const lastTTA = useMemo(() => objectives.reduce((prev, curr) => (new Date(prev) > new Date(curr.endDate) ? prev : curr.endDate), ''), [objectives]);
  const history = useHistory();
 
- const goalNumbers = goal.goalNumbers.join(', ');
+ const goalNumbers = `${goal.goalNumbers.join(', ')}${isReopenedGoal ? '-R' : ''}`;
 
  const { user } = useContext(UserContext);
  const { setIsAppLoading } = useContext(AppLoadingContext);
@@ -110,6 +112,12 @@ function GoalCard({
 
  const contextMenuLabel = `Actions for goal ${id}`;
  const menuItems = [
+ ...(goalStatus === 'Closed' ? [{
+ label: 'Reopen',
+ onClick: () => {
+ showReopenGoalModal(id);
+ },
+ }] : []),
  {
  label: goalStatus === 'Closed' ? 'View' : 'Edit',
  onClick: () => {
@@ -270,6 +278,7 @@ GoalCard.propTypes = {
  recipientId: PropTypes.string.isRequired,
  regionId: PropTypes.string.isRequired,
  showCloseSuspendGoalModal: PropTypes.func.isRequired,
+ showReopenGoalModal: PropTypes.func.isRequired,
  performGoalStatusUpdate: PropTypes.func.isRequired,
  handleGoalCheckboxSelect: PropTypes.func.isRequired,
  isChecked: PropTypes.bool.isRequired,

frontend/src/components/GoalCards/GoalCards.js

@@ -10,7 +10,8 @@ import GoalsCardsHeader from './GoalsCardsHeader';
 import Container from '../Container';
 import GoalCard from './GoalCard';
 import CloseSuspendReasonModal from '../CloseSuspendReasonModal';
-import { updateGoalStatus } from '../../fetchers/goals';
+import { reopenGoal, updateGoalStatus } from '../../fetchers/goals';
+import ReopenReasonModal from '../ReopenReasonModal';
 
 function GoalCards({
  recipientId,
@@ -46,6 +47,11 @@ function GoalCards({
  const [resetModalValues, setResetModalValues] = useState(false);
  const closeSuspendModalRef = useRef();
 
+ // Reopen reason modal.
+ const [reopenGoalId, setReopenGoalId] = useState(null);
+ const [resetReopenModalValues, setResetReopenModalValues] = useState(false);
+ const reopenModalRef = useRef();
+
  const showCloseSuspendGoalModal = (status, goalIds, oldGoalStatus) => {
  setCloseSuspendGoalIds(goalIds);
  setCloseSuspendStatus(status);
@@ -54,6 +60,27 @@ function GoalCards({
  closeSuspendModalRef.current.toggleModal(true);
  };
 
+ const showReopenGoalModal = (goalId) => {
+ setReopenGoalId(goalId);
+ setResetReopenModalValues(!resetReopenModalValues);
+ reopenModalRef.current.toggleModal(true);
+ };
+
+ const onSubmitReopenGoal = async (goalId, reopenReason, reopenContext) => {
+ const updatedGoal = await reopenGoal(goalId, reopenReason, reopenContext);
+
+ const newGoals = goals.map((g) => (g.id === updatedGoal.id ? {
+ ...g,
+ goalStatus: 'In Progress',
+ previousStatus: 'Closed',
+ isReopenedGoal: true,
+ } : g));
+
+ setGoals(newGoals);
+
+ reopenModalRef.current.toggleModal(false);
+ };
+
  const performGoalStatusUpdate = async (
  goalIds,
  newGoalStatus,
@@ -182,6 +209,13 @@ function GoalCards({
  resetValues={resetModalValues}
  oldGoalStatus={closeSuspendOldStatus}
  />
+ <ReopenReasonModal
+ id="reopen-reason-modal"
+ modalRef={reopenModalRef}
+ goalId={reopenGoalId}
+ resetValues={resetReopenModalValues}
+ onSubmit={onSubmitReopenGoal}
+ />
  <GoalsCardsHeader
  title="TTA goals and objectives"
  count={goalsCount || 0}
@@ -219,6 +253,7 @@ function GoalCards({
  recipientId={recipientId}
  regionId={regionId}
  showCloseSuspendGoalModal={showCloseSuspendGoalModal}
+ showReopenGoalModal={showReopenGoalModal}
  performGoalStatusUpdate={performGoalStatusUpdate}
  handleGoalCheckboxSelect={handleGoalCheckboxSelect}
  isChecked={selectedGoalCheckBoxes[goal.id] || false}

frontend/src/components/GoalForm/Form.js

@@ -64,6 +64,7 @@ export default function Form({
  recipient,
  regionId,
  goalTemplateId,
+ isReopenedGoal,
 }) {
  const { isAppLoading } = useContext(AppLoadingContext);
 
@@ -101,7 +102,7 @@ export default function Form({
 
  const objectiveErrors = errors[FORM_FIELD_INDEXES.OBJECTIVES];
 
- const formTitle = goalNumbers && goalNumbers.length ? `Goal ${goalNumbers.join(', ')}` : 'Recipient TTA goal';
+ const formTitle = goalNumbers && goalNumbers.length ? `Goal ${goalNumbers.join(', ')}${isReopenedGoal ? '-R' : ''}` : 'Recipient TTA goal';
 
  const showAlert = isOnReport && status !== 'Closed';
 
@@ -351,6 +352,7 @@ Form.propTypes = {
  })).isRequired,
  isNew: PropTypes.bool.isRequired,
  goalTemplateId: PropTypes.number,
+ isReopenedGoal: PropTypes.bool.isRequired,
 };
 
 Form.defaultProps = {

frontend/src/components/GoalForm/index.js

@@ -74,6 +74,7 @@ export default function GoalForm({
  source: {},
  createdVia: '',
  goalTemplateId: null,
+ isReopenedGoal: false,
  }), [possibleGrants]);
 
  const [showForm, setShowForm] = useState(true);
@@ -98,6 +99,7 @@ export default function GoalForm({
  const [goalOnApprovedAR, setGoalOnApprovedReport] = useState(goalDefaults.onApprovedAR);
  const [goalOnAnyReport, setGoalOnAnyReport] = useState(goalDefaults.onAnyReport);
  const [nudgedGoalSelection, setNudgedGoalSelection] = useState({});
+ const [isReopenedGoal, setIsReopenedGoal] = useState(goalDefaults.isReopenedGoal);
 
  useDeepCompareEffect(() => {
  const newPrompts = grantsToMultiValue(selectedGrants, { ...prompts });
@@ -172,6 +174,7 @@ export default function GoalForm({
  setSource(grantsToMultiValue(selectedGoalGrants, goal.source, ''));
  setCreatedVia(goal.createdVia || '');
  setGoalCollaborators(goal.collaborators || []);
+ setIsReopenedGoal(goal.isReopenedGoal || false);
 
  // this is a lot of work to avoid two loops through the goal.objectives
  // but I'm sure you'll agree its totally worth it
@@ -1099,6 +1102,7 @@ export default function GoalForm({
  createdVia={createdVia}
  collaborators={goalCollaborators}
  goalTemplateId={goalTemplateId}
+ isReopenedGoal={isReopenedGoal}
  />
  )}
 

frontend/src/components/ReopenReasonModal.js

@@ -0,0 +1,113 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { REOPEN_REASONS, GOAL_STATUS } from '@ttahub/common';
+import {
+ Form, FormGroup, ErrorMessage, Label, Fieldset, Radio, Textarea,
+} from '@trussworks/react-uswds';
+import Modal from './Modal';
+
+const ReopenReasonModal = ({
+ modalRef, goalId, onSubmit, resetValues,
+}) => {
+ const [reopenReason, setReopenReason] = useState('');
+ const [reopenContext, setReopenContext] = useState('');
+ const [showValidationError, setShowValidationError] = useState(false);
+
+ useEffect(() => {
+ // Every time we show the modal reset the form.
+ setReopenReason('');
+ setReopenContext('');
+ setShowValidationError(false);
+ }, [resetValues]);
+
+ const reasonChanged = (e) => {
+ setReopenReason(e.target.value);
+ setShowValidationError(false);
+ };
+
+ const reasonRadioOptions = Object.values(REOPEN_REASONS[GOAL_STATUS.CLOSED]);
+
+ const generateReasonRadioButtons = () => reasonRadioOptions.map((r) => (
+ <Radio
+ id={r.trim().replace(' ', '-').toLowerCase()}
+ key={r}
+ onChange={reasonChanged}
+ name="reopenReason"
+ label={r}
+ value={r}
+ className="smart-hub--report-checkbox"
+ checked={reopenReason === r}
+ />
+ ));
+ const contextChanged = (e) => {
+ setReopenContext(e.target.value);
+ };
+
+ const validateSubmit = () => {
+ if (!reopenReason) {
+ setShowValidationError(true);
+ } else {
+ onSubmit(goalId, reopenReason, reopenContext);
+ }
+ };
+
+ return (
+ <div className="smart-hub--goal-close-suspend-reason">
+ <Modal
+ modalRef={modalRef}
+ onOk={validateSubmit}
+ modalId="ReopenReasonModal"
+ title="Why are you reopening this goal?"
+ okButtonText="Submit"
+ okButtonAriaLabel="Reopen goal"
+ okButtonCss="usa-button--primary"
+ cancelButtonCss="usa-button--unstyled"
+ showTitleRequired
+ forceAction
+ >
+ <Form
+ key={`reopen-reason-form-goal-${goalId}`}
+ >
+ <FormGroup error={showValidationError} className="margin-top-0">
+ <ErrorMessage>
+ {showValidationError
+ ? 'Please select a reason for reopening this goal.' : null}
+ </ErrorMessage>
+ <Fieldset>
+ {
+ generateReasonRadioButtons()
+ }
+ </Fieldset>
+ </FormGroup>
+ <FormGroup>
+ <Fieldset>
+ <Label htmlFor="reopen-reason-context">
+ Additional context
+ </Label>
+ <Textarea
+ id="reopen-reason-context"
+ name="reopen-reason-context"
+ type="text"
+ value={reopenContext}
+ onChange={contextChanged}
+ />
+ </Fieldset>
+ </FormGroup>
+ </Form>
+ </Modal>
+ </div>
+ );
+};
+
+ReopenReasonModal.propTypes = {
+ modalRef: PropTypes.oneOfType([
+ PropTypes.func,
+ PropTypes.shape(),
+ ]).isRequired,
+ goalId: PropTypes.number.isRequired,
+ onSubmit: PropTypes.func.isRequired,
+ resetValues: PropTypes.bool.isRequired,
+};
+
+export default ReopenReasonModal;