feat: Group required reports in test plan report status dialog (#1337)

Author: stalgiag

client/components/TestPlanReportStatusDialog/index.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import AddTestToQueueWithConfirmation from '../AddTestToQueueWithConfirmation';
 import { useQuery } from '@apollo/client';
@@ -26,9 +26,21 @@ const TestPlanReportStatusDialog = ({
 
   const { testPlanReportStatuses } = testPlanVersion;
 
-  let requiredReports = 0;
+  const { requiredReportsCount, sortedStatuses } = useMemo(() => {
+    let requiredCount = 0;
 
-  const tableRows = testPlanReportStatuses.map(status => {
+    const sorted = [...testPlanReportStatuses].sort(
+      (a, b) => Number(b.isRequired) - Number(a.isRequired)
+    );
+
+    sorted.forEach(status => {
+      if (status.isRequired) requiredCount += 1;
+    });
+
+    return { requiredReportsCount: requiredCount, sortedStatuses: sorted };
+  }, [testPlanReportStatuses]);
+
+  const tableRows = sortedStatuses.map(status => {
     const {
       isRequired,
       at,
@@ -38,8 +50,6 @@ const TestPlanReportStatusDialog = ({
       testPlanReport
     } = status;
 
-    if (isRequired) requiredReports += 1;
-
     const key =
       `${at.name}-${browser.name}-` +
       `${minimumAtVersion?.id ?? exactAtVersion?.id}-` +
@@ -105,7 +115,7 @@ const TestPlanReportStatusDialog = ({
               {phase[0] + phase.slice(1).toLowerCase()}
             </span>
             &nbsp;{reviewDescription}.&nbsp;
-            <strong>{requiredReports} AT/browser&nbsp;</strong>
+            <strong>{requiredReportsCount} AT/browser&nbsp;</strong>
             pairs {requirementNeedsDescription}.
           </p>
         )}

client/tests/e2e/snapshots/saved/_account_settings.html

@@ -99,9 +99,7 @@ <h2>Admin Actions</h2>
               <button type="button" class="btn btn-primary">
                 Import Latest Test Plan Versions
               </button>
-              <p>
-                Date of latest test plan version: February 13, 2025 01:40 UTC
-              </p>
+              <p>Date of latest test plan version: March 6, 2025 19:25 UTC</p>
             </section>
           </div>
         </main>

client/tests/e2e/snapshots/saved/_data-management.html

@@ -263,7 +263,7 @@ <h3>
                         element)
                       </option>
                       <option value="49">Main Landmark</option>
-                      <option value="60">Media Seek Slider</option>
+                      <option value="93">Media Seek Slider</option>
                       <option value="54">Meter</option>
                       <option value="90">Modal Dialog Example</option>
                       <option value="89">Navigation Menu Button</option>
@@ -274,10 +274,10 @@ <h3>
                         Radio Group Example Using aria-activedescendant
                       </option>
                       <option value="59">Rating Slider</option>
-                      <option value="39">Select Only Combobox Example</option>
+                      <option value="7">Select Only Combobox Example</option>
                       <option value="61">Switch Example</option>
                       <option value="62">Tabs with Manual Activation</option>
-                      <option value="93">Toggle Button</option>
+                      <option value="94">Toggle Button</option>
                       <option value="64">Vertical Temperature Slider</option>
                     </select>
                   </div>
@@ -1192,7 +1192,7 @@ <h2>Test Plans Status Summary</h2>
                     <span
                       class="full-width auto-width css-36z7cz"
                       role="listitem"
-                      ><a href="/test-review/93"
+                      ><a href="/test-review/94"
                         ><span
                           ><svg
                             aria-hidden="true"
@@ -1740,7 +1740,7 @@ <h2>Test Plans Status Summary</h2>
                 <td>
                   <div class="css-bpz90">
                     <span class="rd full-width css-be9e2a">R&amp;D</span>
-                    <p class="review-text">Complete <b>Oct 10, 2024</b></p>
+                    <p class="review-text">Complete <b>Mar 6, 2025</b></p>
                   </div>
                 </td>
                 <td>
@@ -1763,7 +1763,7 @@ <h2>Test Plans Status Summary</h2>
                             <path
                               fill="currentColor"
                               d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"></path></svg
-                          ><b>V24.10.10</b></span
+                          ><b>V25.03.06</b></span
                         ></a
                       ></span
                     ><button
@@ -2210,15 +2210,15 @@ <h2>Test Plans Status Summary</h2>
                 <td>
                   <div class="css-bpz90">
                     <span class="rd full-width css-be9e2a">R&amp;D</span>
-                    <p class="review-text">Complete <b>Mar 17, 2022</b></p>
+                    <p class="review-text">Complete <b>Mar 6, 2025</b></p>
                   </div>
                 </td>
                 <td>
                   <div role="list" aria-setsize="2" class="css-1bj5ml9">
                     <span
                       class="full-width auto-width css-36z7cz"
                       role="listitem"
-                      ><a href="/test-review/60"
+                      ><a href="/test-review/93"
                         ><span
                           ><svg
                             aria-hidden="true"
@@ -2233,7 +2233,7 @@ <h2>Test Plans Status Summary</h2>
                             <path
                               fill="currentColor"
                               d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"></path></svg
-                          ><b>V22.03.17-1</b></span
+                          ><b>V25.03.06</b></span
                         ></a
                       ></span
                     ><button