Update reports pages to display trend reports on candidate page and also display minimum and exact AT version information where applicable

Author: howard-e

client/components/Reports/SummarizeTestPlanReport.jsx

@@ -42,33 +42,51 @@ const SummarizeTestPlanReport = ({ testPlanVersion, testPlanReports }) => {
   );
   if (!testPlanReport) return <Navigate to="/404" />;
 
-  const { at, browser, recommendedAtVersion } = testPlanReport;
+  const {
+    at,
+    browser,
+    recommendedAtVersion,
+    exactAtVersion,
+    minimumAtVersion
+  } = testPlanReport;
   const overallMetrics = getMetrics({ testPlanReport });
 
   // Construct testPlanTarget
   const testPlanTarget = {
     id: `${at.id}${browser.id}`,
     at,
     browser,
-    atVersion: recommendedAtVersion
+    atVersion: recommendedAtVersion || exactAtVersion || minimumAtVersion,
+    isMinimumAtVersion:
+      !recommendedAtVersion && !exactAtVersion && !!minimumAtVersion
   };
 
   const none = None('No Data');
 
   const renderVersionsSummaryTable = () => {
-    if (testPlanVersion.phase !== 'RECOMMENDED') return null;
+    if (
+      !(
+        testPlanVersion.phase === 'RECOMMENDED' ||
+        testPlanVersion.phase === 'CANDIDATE'
+      )
+    ) {
+      return null;
+    }
+    if (!testPlanTarget.atVersion) return null;
 
     const title = `${testPlanTarget.at.name} Versions Summary`;
     const testPlanReportsForTarget = testPlanVersion.testPlanReports.filter(
       testPlanReport =>
         testPlanReport.at.id === at.id &&
         testPlanReport.browser.id === browser.id
     );
-    testPlanReportsForTarget.sort(
-      (a, b) =>
-        new Date(b.recommendedAtVersion.releasedAt) -
-        new Date(a.recommendedAtVersion.releasedAt)
-    );
+    testPlanReportsForTarget.sort((a, b) => {
+      const aAtVersion =
+        a.recommendedAtVersion || a.exactAtVersion || a.minimumAtVersion;
+      const bAtVersion =
+        b.recommendedAtVersion || b.exactAtVersion || b.minimumAtVersion;
+      return new Date(bAtVersion.releasedAt) - new Date(aAtVersion.releasedAt);
+    });
 
     return (
       <>
@@ -88,22 +106,34 @@ const SummarizeTestPlanReport = ({ testPlanVersion, testPlanReports }) => {
           </thead>
           <tbody>
             {testPlanReportsForTarget.map(testPlanReport => {
-              const { recommendedAtVersion, metrics } = testPlanReport;
+              const {
+                recommendedAtVersion,
+                exactAtVersion,
+                minimumAtVersion,
+                metrics
+              } = testPlanReport;
               const { mustFormatted, shouldFormatted, mayFormatted } = metrics;
 
+              const atVersion =
+                recommendedAtVersion || exactAtVersion || minimumAtVersion;
+              const isMinimumAtVersion = atVersion === minimumAtVersion;
+              const atVersionDisplayName = isMinimumAtVersion
+                ? `${atVersion.name} or later`
+                : atVersion.name;
+
               return (
                 <tr key={`VersionsSummaryRow_${testPlanReport.id}`}>
                   <td>
                     {testPlanReportId === testPlanReport.id ? (
-                      <>{recommendedAtVersion.name}</>
+                      <>{atVersionDisplayName}</>
                     ) : (
                       <Link
                         to={
                           `/report/${testPlanVersion.id}` +
                           `/targets/${testPlanReport.id}`
                         }
                       >
-                        {recommendedAtVersion.name}
+                        {atVersionDisplayName}
                       </Link>
                     )}
                   </td>

client/components/Reports/SummarizeTestPlanVersion.jsx

@@ -103,14 +103,22 @@ const SummarizeTestPlanVersion = ({ testPlanVersion, testPlanReports }) => {
         if (testPlanReport.status === 'DRAFT') return null;
         const overallMetrics = getMetrics({ testPlanReport });
 
-        const { at, browser, recommendedAtVersion } = testPlanReport;
+        const {
+          at,
+          browser,
+          recommendedAtVersion,
+          exactAtVersion,
+          minimumAtVersion
+        } = testPlanReport;
 
         // Construct testPlanTarget
         const testPlanTarget = {
           id: `${at.id}${browser.id}`,
           at,
           browser,
-          atVersion: recommendedAtVersion
+          atVersion: recommendedAtVersion || exactAtVersion || minimumAtVersion,
+          isMinimumAtVersion:
+            !recommendedAtVersion && !exactAtVersion && !!minimumAtVersion
         };
 
         return (

client/components/Reports/getTitles.js

@@ -8,9 +8,16 @@ const getTestPlanVersionTitle = (
   return title;
 };
 
-const getTestPlanTargetTitle = ({ at, browser, atVersion }) => {
+const getTestPlanTargetTitle = ({
+  at,
+  browser,
+  atVersion,
+  isMinimumAtVersion
+}) => {
   if (!atVersion) return `${at.name} and ${browser.name}`;
-  return `${at.name} ${atVersion.name} and ${browser.name}`;
+  return `${at.name} ${atVersion.name}${
+    isMinimumAtVersion ? ' or later' : ''
+  } and ${browser.name}`;
 };
 
 export { getTestPlanTargetTitle, getTestPlanVersionTitle };

client/components/Reports/queries.js

@@ -145,6 +145,12 @@ export const REPORT_PAGE_QUERY = gql`
         recommendedAtVersion {
           ...AtVersionFields
         }
+        exactAtVersion {
+          ...AtVersionFields
+        }
+        minimumAtVersion {
+          ...AtVersionFields
+        }
         runnableTests {
           ...TestFieldsSimple
         }