[PROD-06/05] [TTAHUB-2942] Fix RTR goal selection

.circleci/config.yml

@@ -423,7 +423,7 @@ parameters:
     default: "mb/TTAHUB-2943/remove-models"
     type: string
   sandbox_git_branch:  # change to feature branch to test deployment
-    default: "mb/TTAHUB-2530/update-RTR-objective-form"
+    default: "al-ttahub-2942-fix-number-of-goals"
     type: string
   prod_new_relic_app_id:
     default: "877570491"

frontend/src/components/GoalCards/GoalCards.js

@@ -31,14 +31,14 @@ function GoalCards({
   canMergeGoals,
   shouldDisplayMergeSuccess,
   dismissMergeSuccess,
+  goalBuckets,
 }) {
   const history = useHistory();
   const [rttapaValidation, setRttapaValidation] = useState(false);
 
   // Goal select check boxes.
   const [selectedGoalCheckBoxes, setSelectedGoalCheckBoxes] = useState({});
   const [allGoalsChecked, setAllGoalsChecked] = useState(false);
-  const [printAllGoals, setPrintAllGoals] = useState(false);
 
   // Close/Suspend Reason Modal.
   const [closeSuspendGoalIds, setCloseSuspendGoalIds] = useState([]);
@@ -116,29 +116,35 @@ function GoalCards({
     goalsArr.reduce((obj, g) => ({ ...obj, [g.id]: checked }), {})
   );
 
-  useEffect(() => {
-    const checkValues = Object.values(selectedGoalCheckBoxes);
-    if (checkValues.length
-      && (checkValues.length === goals.length || checkValues.length === goalsCount)
-      && checkValues.every((v) => v === true)) {
-      setAllGoalsChecked(true);
-    } else if (printAllGoals === true) {
-      setPrintAllGoals(false);
-    }
-  }, [selectedGoalCheckBoxes, allGoalsChecked, printAllGoals, goalsCount, goals.length]);
-
   const selectAllGoalCheckboxSelect = (event) => {
     const { target: { checked = null } = {} } = event;
 
+    // Preserve checked goals on other pages.
+    const thisPagesGoalIds = goals.map((g) => g.id);
+    const preservedCheckboxes = Object.keys(selectedGoalCheckBoxes).reduce((obj, key) => {
+      if (!thisPagesGoalIds.includes(parseInt(key, DECIMAL_BASE))) {
+        return { ...obj, [key]: selectedGoalCheckBoxes[key] };
+      }
+      return { ...obj };
+    }, {});
+
     if (checked === true) {
-      setSelectedGoalCheckBoxes(makeGoalCheckboxes(goals, true));
+      setSelectedGoalCheckBoxes({ ...makeGoalCheckboxes(goals, true), ...preservedCheckboxes });
+    } else {
+      setSelectedGoalCheckBoxes({ ...makeGoalCheckboxes(goals, false), ...preservedCheckboxes });
+    }
+  };
+
+  // Check if all goals on the page are checked.
+  useEffect(() => {
+    const goalIds = goals.map((g) => g.id);
+    const countOfCheckedOnThisPage = goalIds.filter((id) => selectedGoalCheckBoxes[id]).length;
+    if (goals.length === countOfCheckedOnThisPage) {
       setAllGoalsChecked(true);
     } else {
-      setSelectedGoalCheckBoxes(makeGoalCheckboxes(goals, false));
       setAllGoalsChecked(false);
-      setPrintAllGoals(false);
     }
-  };
+  }, [goals, selectedGoalCheckBoxes]);
 
   const handleGoalCheckboxSelect = (event) => {
     const { target: { checked = null, value = null } = {} } = event;
@@ -149,10 +155,9 @@ function GoalCards({
     }
   };
 
-  const checkAllGoals = () => {
-    const allIdCheckBoxes = allGoalIds.reduce((obj, g) => ({ ...obj, [g]: true }), {});
+  const checkAllGoals = (isClear) => {
+    const allIdCheckBoxes = allGoalIds.reduce((obj, g) => ({ ...obj, [g]: !isClear }), {});
     setSelectedGoalCheckBoxes(allIdCheckBoxes);
-    setPrintAllGoals(true);
   };
 
   const numberOfSelectedGoals = Object.values(selectedGoalCheckBoxes).filter((g) => g).length;
@@ -164,14 +169,14 @@ function GoalCards({
   const selectedGoalIdsButNumerical = selectedCheckBoxes.map((id) => parseInt(id, DECIMAL_BASE));
   const draftSelectedRttapa = goals.filter((g) => selectedGoalIdsButNumerical.includes(g.id) && g.goalStatus === 'Draft').map((g) => g.id);
 
-  const allSelectedGoalIds = (() => {
+  const allSelectedPageGoalIds = (() => {
     const selection = goals.filter((g) => selectedGoalCheckBoxes[g.id]);
-    return selection.map((g) => g.ids).flat();
+    return selection.map((g) => g.id);
   })();
 
   const rttapaLink = (() => {
     if (selectedCheckBoxes && selectedCheckBoxes.length) {
-      const selectedGoalIdsQuery = allSelectedGoalIds.map((id) => `goalId[]=${encodeURIComponent(id)}`).join('&');
+      const selectedGoalIdsQuery = allSelectedPageGoalIds.map((id) => `goalId[]=${encodeURIComponent(id)}`).join('&');
       return `/recipient-tta-records/${recipientId}/region/${regionId}/rttapa/new?${selectedGoalIdsQuery}`;
     }
 
@@ -232,7 +237,7 @@ function GoalCards({
           allGoalsChecked={allGoalsChecked}
           selectAllGoalCheckboxSelect={selectAllGoalCheckboxSelect}
           selectAllGoals={checkAllGoals}
-          selectedGoalIds={allSelectedGoalIds}
+          pageSelectedGoalIds={allSelectedPageGoalIds}
           perPageChange={perPageChange}
           pageGoalIds={goals.map((g) => g.id)}
           showRttapaValidation={showRttapaValidation}
@@ -241,6 +246,8 @@ function GoalCards({
           canMergeGoals={canMergeGoals}
           shouldDisplayMergeSuccess={shouldDisplayMergeSuccess}
           dismissMergeSuccess={dismissMergeSuccess}
+          goalBuckets={goalBuckets}
+          allSelectedGoalIds={selectedGoalCheckBoxes}
         />
         <div className="padding-x-3 padding-y-2">
           {goals.map((goal, index) => (
@@ -291,6 +298,10 @@ GoalCards.propTypes = {
   canMergeGoals: PropTypes.bool.isRequired,
   shouldDisplayMergeSuccess: PropTypes.bool,
   dismissMergeSuccess: PropTypes.func.isRequired,
+  goalBuckets: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.number,
+    goalIds: PropTypes.arrayOf(PropTypes.number),
+  })).isRequired,
 };
 
 GoalCards.defaultProps = {

frontend/src/components/GoalCards/GoalDataController.js

@@ -132,7 +132,9 @@ function GoalDataController({
           query,
           mergedGoals || [],
         );
-        setData(response);
+        const rolledUpGoalIds = response.allGoalIds.map((goal) => goal.id);
+        const goalBuckets = response.allGoalIds;
+        setData({ ...response, allGoalIds: rolledUpGoalIds, goalBuckets });
         setError('');
         // display success message if we have merged goals
         setShouldDisplayMergedSuccess((mergedGoals && mergedGoals.length > 0));
@@ -259,6 +261,7 @@ function GoalDataController({
           canMergeGoals={canMergeGoals}
           shouldDisplayMergeSuccess={shouldDisplayMergeSuccess}
           dismissMergeSuccess={dismissMergeSuccess}
+          goalBuckets={data.goalBuckets}
         />
       </FilterContext.Provider>
     </div>

frontend/src/components/GoalCards/GoalsCardsHeader.js

@@ -30,14 +30,16 @@ export default function GoalCardsHeader({
   allGoalsChecked,
   selectAllGoalCheckboxSelect,
   selectAllGoals,
-  selectedGoalIds,
+  pageSelectedGoalIds,
   perPageChange,
   pageGoalIds,
   showRttapaValidation,
   draftSelectedRttapa,
   canMergeGoals,
   shouldDisplayMergeSuccess,
   dismissMergeSuccess,
+  allSelectedGoalIds,
+  goalBuckets,
 }) {
   const [goalMergeGroups, setGoalMergeGroups] = useState([]);
   const history = useHistory();
@@ -71,8 +73,22 @@ export default function GoalCardsHeader({
 
   const showAddNewButton = hasActiveGrants && hasButtonPermissions;
   const onPrint = () => {
+    // See if we have goals selected.
+    let goalsToPrint = Object.keys(allSelectedGoalIds).filter(
+      (key) => allSelectedGoalIds[key],
+    ).map((key) => parseInt(key, DECIMAL_BASE));
+
+    // If we don't just print the page.
+    if (!goalsToPrint.length) {
+      goalsToPrint = pageGoalIds;
+    }
+    // Get all the goals and associated goals from the buckets.
+    goalsToPrint = goalBuckets.filter(
+      (bucket) => goalsToPrint.includes(bucket.id),
+    ).map((bucket) => bucket.goalIds).flat();
+
     history.push(`/recipient-tta-records/${recipientId}/region/${regionId}/rttapa/print${window.location.search}`, {
-      sortConfig, selectedGoalIds: !selectedGoalIds.length ? pageGoalIds : selectedGoalIds,
+      sortConfig, selectedGoalIds: goalsToPrint,
     });
   };
 
@@ -89,6 +105,9 @@ export default function GoalCardsHeader({
     return null;
   })();
 
+  const hasGoalsSelected = pageSelectedGoalIds ? pageSelectedGoalIds.length > 0 : false;
+  const showClearAllAlert = numberOfSelectedGoals === count;
+
   return (
     <div className="padding-x-3 position-relative">
       <div className="desktop:display-flex flex-1 desktop:padding-top-0 padding-top-2 bg-white">
@@ -199,7 +218,7 @@ export default function GoalCardsHeader({
           className="display-flex flex-align-center margin-left-3 margin-y-0"
           onClick={onPrint}
         >
-          {`Preview and print ${selectedGoalIds.length > 0 ? 'selected' : ''}`}
+          {`Preview and print ${hasGoalsSelected ? 'selected' : ''}`}
         </Button>
       </div>
       <div>
@@ -222,16 +241,20 @@ export default function GoalCardsHeader({
           </Alert>
         )}
         {
-          !showRttapaValidation && allGoalsChecked && (numberOfSelectedGoals !== count)
+          !showRttapaValidation && allGoalsChecked
             ? (
               <Alert className="margin-top-3" type="info" slim>
-                {`All ${numberOfSelectedGoals} goals on this page are selected.`}
+                {showClearAllAlert
+                  ? `All ${count} goals are selected.`
+                  : `All ${pageSelectedGoalIds.length} goals on this page are selected.`}
                 <button
                   type="button"
                   className="usa-button usa-button--unstyled margin-left-1"
-                  onClick={selectAllGoals}
+                  onClick={() => selectAllGoals(showClearAllAlert)}
                 >
-                  {`Select all ${count} goals`}
+                  {showClearAllAlert
+                    ? 'Clear selection'
+                    : `Select all ${count} goals`}
                 </button>
               </Alert>
             )
@@ -287,7 +310,7 @@ GoalCardsHeader.propTypes = {
   allGoalsChecked: PropTypes.bool,
   numberOfSelectedGoals: PropTypes.number,
   selectAllGoals: PropTypes.func,
-  selectedGoalIds: PropTypes.arrayOf(PropTypes.string).isRequired,
+  pageSelectedGoalIds: PropTypes.arrayOf(PropTypes.number).isRequired,
   perPageChange: PropTypes.func.isRequired,
   pageGoalIds: PropTypes.oneOfType(
     [PropTypes.arrayOf(PropTypes.number), PropTypes.number],
@@ -297,6 +320,11 @@ GoalCardsHeader.propTypes = {
   canMergeGoals: PropTypes.bool.isRequired,
   shouldDisplayMergeSuccess: PropTypes.bool,
   dismissMergeSuccess: PropTypes.func.isRequired,
+  allSelectedGoalIds: PropTypes.shape({ id: PropTypes.bool }).isRequired,
+  goalBuckets: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.number,
+    goals: PropTypes.arrayOf(PropTypes.number),
+  })).isRequired,
 };
 
 GoalCardsHeader.defaultProps = {

frontend/src/components/GoalCards/__tests__/GoalCards.js

@@ -36,7 +36,7 @@ const defaultUser = {
 
 const baseGoals = [{
   id: 4598,
-  ids: [4598],
+  ids: [4598, 4599],
   goalStatus: 'In Progress',
   createdOn: '2021-06-15',
   goalText: 'This is goal text 1.',
@@ -220,6 +220,7 @@ const setGoals = jest.fn();
 const history = createMemoryHistory();
 
 const renderTable = ({ goals, goalsCount, allGoalIds = null }, user, hasActiveGrants = true) => {
+  const goalBuckets = !goals ? [] : goals.map((g) => ({ id: g.id, goalIds: g.ids }));
   render(
     <Router history={history}>
       <AriaLiveContext.Provider value={{ announce: mockAnnounce }}>
@@ -246,6 +247,7 @@ const renderTable = ({ goals, goalsCount, allGoalIds = null }, user, hasActiveGr
             allGoalIds={allGoalIds || goals.map((g) => g.id)}
             shouldDisplayMergeSuccess={false}
             dismissMergeSuccess={jest.fn()}
+            goalBuckets={goalBuckets}
           />
         </UserContext.Provider>
       </AriaLiveContext.Provider>
@@ -489,6 +491,27 @@ describe('Goals Table', () => {
       expect(screen.queryByText(/7 selected/i)).toBeNull();
     });
 
+    it('Shows the clear selection button and clears when clicked', async () => {
+      const selectAll = await screen.findByRole('checkbox', { name: /deselect all goals/i });
+      fireEvent.click(selectAll);
+      expect(await screen.findByText(/6 selected/i)).toBeVisible();
+
+      const selectAllPages = await screen.findByRole('button', { name: /select all 7 goals/i });
+      fireEvent.click(selectAllPages);
+
+      expect(screen.queryByText(/7 selected/i)).toBeVisible();
+
+      const clearSelection = await screen.findByRole('button', { name: /clear selection/i });
+      fireEvent.click(clearSelection);
+
+      expect(screen.queryByText(/7 selected/i)).toBeNull();
+      // verify all check boxes are unchecked.
+      const checkBoxes = screen.queryAllByTestId('selectGoalTestId');
+      checkBoxes.forEach((checkBox) => {
+        expect(checkBox.checked).toBe(false);
+      });
+    });
+
     it('Deselect via pill', async () => {
       const selectAll = await screen.findByRole('checkbox', { name: /deselect all goals/i });
       fireEvent.click(selectAll);
@@ -604,6 +627,35 @@ describe('Goals Table', () => {
 
       expect(history.push).toHaveBeenCalled();
     });
+
+    it('calls print passing all goal ids on the page', async () => {
+      // print goals
+      const printButton = await screen.findByRole('button', { name: /Preview and print/i });
+      userEvent.click(printButton);
+      expect(history.push).toHaveBeenCalledWith('/recipient-tta-records/1000/region/1/rttapa/print', {
+        selectedGoalIds: [4598, 4599, 65479],
+        sortConfig: {
+          activePage: 1, direction: 'asc', offset: 0, sortBy: 'goalStatus',
+        },
+      });
+    });
+
+    it('calls print passing all selected goal ids', async () => {
+      // print goals
+      const printButton = await screen.findByRole('button', { name: /Preview and print/i });
+
+      // select the checkbox with the value of 4598.
+      const checkBox = screen.queryAllByTestId('selectGoalTestId')[0];
+      fireEvent.click(checkBox);
+
+      userEvent.click(printButton);
+      expect(history.push).toHaveBeenCalledWith('/recipient-tta-records/1000/region/1/rttapa/print', {
+        selectedGoalIds: [4598, 4599],
+        sortConfig: {
+          activePage: 1, direction: 'asc', offset: 0, sortBy: 'goalStatus',
+        },
+      });
+    });
   });
 
   describe('Context Menu with Different User Permissions', () => {