Fix table view report links

site/gatsby-site/cypress/e2e/integration/apps/incidents.cy.js

@@ -409,4 +409,34 @@ describe('Incidents App', () => {
       cy.get('[data-cy="current-page"]').should('have.text', '1');
     }
   );
+
+  conditionalIt(!Cypress.env('isEmptyEnvironment'), 'Should switch between views', () => {
+    cy.visit(url);
+
+    cy.waitForStableDOM();
+
+    cy.get('[data-cy="table-view"] button').contains('Issue Reports').click();
+
+    cy.waitForStableDOM();
+
+    cy.get('[data-cy="row"]').should('have.length.at.least', 10);
+
+    cy.get('[data-cy="row"] td a')
+      .first()
+      .should('have.attr', 'href')
+      .and('match', /^\/reports\/\d+$/);
+
+    cy.get('[data-cy="table-view"] button')
+      .contains(/^Reports$/)
+      .click();
+
+    cy.waitForStableDOM();
+
+    cy.get('[data-cy="row"]').should('have.length.at.least', 10);
+
+    cy.get('[data-cy="row"] td a')
+      .first()
+      .should('have.attr', 'href')
+      .and('match', /^\/cite\/\d+#r\d+$/);
+  });
 });

site/gatsby-site/src/components/reports/ReportCard.js

@@ -14,6 +14,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faQuestionCircle } from '@fortawesome/free-solid-svg-icons';
 import { hasVariantData } from 'utils/variants';
 import { format, fromUnixTime } from 'date-fns';
+import { Link } from 'gatsby';
 
 const ReportCard = ({
   item,
@@ -46,12 +47,6 @@ const ReportCard = ({
     }
   };
 
-  const toggleReadMoreKeyDown = (e) => {
-    if (e.key === 'Enter') {
-      toggleReadMore();
-    }
-  };
-
   const [isBottomReached, setIsBottomReached] = useState(false);
 
   useEffect(() => {
@@ -143,23 +138,19 @@ const ReportCard = ({
         </div>
         <div className="mt-0 cursor-default select-text">
           <div className="flex">
-            {reportTitle ? (
-              <>{reportTitle}</>
-            ) : (
-              <button
-                className="w-3/4 text-left"
-                onClick={toggleReadMore}
-                onKeyDown={toggleReadMoreKeyDown}
-              >
+            <Link to={`/reports/${item.report_number}`} className="hover:no-underline">
+              {reportTitle ? (
+                <>{reportTitle}</>
+              ) : (
                 <h5
                   className={`max-w-full text-xl font-bold tracking-tight text-gray-900 dark:text-white w-full ${
                     !alwaysExpanded ? 'cursor-pointer hover:text-primary-blue' : 'cursor-default'
                   }`}
                 >
                   <Trans ns="landing">{item.title}</Trans>
                 </h5>
-              </button>
-            )}
+              )}
+            </Link>
           </div>
           <div className="flex justify-between flex-wrap">
             <WebArchiveLink url={item.url} className="text-dark-gray">

site/gatsby-site/src/components/reports/ReportsTable.js

@@ -32,8 +32,15 @@ export default function ReportsTable({ data, isLiveData, setIsLiveData }) {
       {
         title: t('Report Number'),
         accessor: 'report_number',
-        Cell: ({ row: { values } }) => (
-          <a className="flex" href={`/reports/${values.report_number}`}>
+        Cell: ({ row: { values, original } }) => (
+          <a
+            className="flex"
+            href={
+              original.incident_id
+                ? `/cite/${original.incident_id}#r${values.report_number}`
+                : `/reports/${values.report_number}`
+            }
+          >
             Report {values.report_number}
           </a>
         ),

site/gatsby-site/src/graphql/reports.js

@@ -209,7 +209,7 @@ export const FIND_REPORTS = gql`
 
 export const FIND_REPORTS_TABLE = gql`
   query FindReports($query: ReportQueryInput!) {
-    reports(query: $query, sort: { report_number: DESC }, limit: 999) {
+    reports(query: $query, sortBy: REPORT_NUMBER_DESC, limit: 9999) {
       _id
       submitters
       date_published

site/gatsby-site/src/pages/apps/incidents.js

@@ -83,18 +83,65 @@
         break;
 
       case 'reports':
-        if (isLiveData && reports) {
+        if (isLiveData && reports && !reportsLoading) {
           setReportsData(transformReports(reports.reports));
-        } else if (data?.reports?.nodes) {
+        } else if (!isLiveData && data?.reports?.nodes) {
           setReportsData(transformReports(data.reports.nodes));
         }
         break;
       default:
     }
-  }, [isLiveData, incidents, data, selectedView]);
+  }, [isLiveData, incidents, data, selectedView, reportsLoading]);
 
   function transformReports(reports) {
-    return reports.map((report) => ({
+    let reportsData = reports;
+
+    // Since we don't currently have report pages for reports, we need to add the incident_id to the reports to create the correct link /cite/:incident_id#r:report_number
+    if (selectedView === 'reports') {
+      const incidents = data.reports.nodes;
+
+      if (isLiveData) {
+        if (incidents) {
+          const reportToIncidentMap = [];
+
+          incidents.forEach((incident) => {
+            incident.reports.forEach((report) => {
+              reportToIncidentMap[report.report_number] = incident.incident_id;
+            });
+          });
+          const updatedReports = reports.map((report) => ({
+            ...report,
+            incident_id: reportToIncidentMap[report.report_number],
+          }));
+
+          reportsData = updatedReports;
+        } else {
+          reportsData = reports;
+        }
+      } else {
+        // Adds the incident_id to reports in order to create the correct link /cite/:incident_id#r:report_number
+        const reportsMap = new Map();
+
+        reports.forEach((incident) => {
+          incident.reports.forEach((report) => {
+            if (!reportsMap.has(report.report_number) && report.is_incident_report) {
+              reportsMap.set(report.report_number, {
+                ...report,
+                incident_id: incident.incident_id,
+              });
+            }
+          });
+        });
+
+        const flattenReports = Array.from(reportsMap.values()).sort(
+          (a, b) => b.report_number - a.report_number
+        );
+
+        reportsData = flattenReports;
+      }
+    }
+
+    return reportsData.map((report) => ({
       ...report,
       flag: report.flag ? 'Yes' : 'No',
       is_incident_report: report.is_incident_report ? 'No' : 'Yes',
@@ -104,7 +151,7 @@
   return (
     <div className="w-full" {...props}>
       <div>
-        <Button.Group className="mb-4">
+        <Button.Group className="mb-4" data-cy="table-view">
           <Button
             color={`${selectedView === 'incidents' ? 'dark' : 'gray'}`}
             onClick={() => {
@@ -239,26 +286,30 @@
         name
       }
     }
-    reports: allMongodbAiidprodReports(
-      filter: { is_incident_report: { eq: true } }
-      sort: { report_number: DESC }
+
+    reports: allMongodbAiidprodIncidents(
+      filter: { reports: { elemMatch: { is_incident_report: { eq: true } } } }
+      sort: { reports: { report_number: DESC } }
     ) {
       nodes {
-        report_number
-        title
-        url
-        authors
-        date_downloaded
-        date_modified
-        date_published
-        date_submitted
-        description
-        flag
-        image_url
-        language
-        source_domain
-        submitters
-        is_incident_report
+        incident_id
+        reports {
+          report_number
+          title
+          url
+          authors
+          date_downloaded
+          date_modified
+          date_published
+          date_submitted
+          description
+          flag
+          image_url
+          language
+          source_domain
+          submitters
+          is_incident_report
+        }
       }
     }
 

site/gatsby-site/src/templates/report.js

@@ -4,7 +4,7 @@
 import Container from '../elements/Container';
 import SocialShareButtons from '../components/ui/SocialShareButtons';
 import { useLocalization } from 'plugins/gatsby-theme-i18n';
-import { graphql } from 'gatsby';
+import { Link, graphql } from 'gatsby';
 import ReportCard from 'components/reports/ReportCard';
 import { Button } from 'flowbite-react';
 import { useUserContext } from 'contexts/userContext';
@@ -13,10 +13,12 @@
 
 function ReportPage(props) {
   const {
-    data: { report, allMongodbAiidprodTaxa, allMongodbAiidprodClassifications },
+    data: { report, allMongodbAiidprodTaxa, allMongodbAiidprodClassifications, incident },
     data,
   } = props;
 
+  const incidentId = incident?.incident_id;
+
   const { t } = useTranslation();
 
   const { locale } = useLocalization();
@@ -41,19 +43,33 @@
           data-cy="edit-report"
           size={'xs'}
           color="light"
-          href={`/cite/edit?report_number=${report.report_number}`}
+          href={`/cite/edit?report_number=${report.report_number}${
+            incidentId ? `&incident_id=${incidentId}` : ''
+          }`}
           className="hover:no-underline "
         >
           <Trans>Edit</Trans>
         </Button>
       );
     }
-  }, []);
+  }, [loading]);
 
   return (
     <>
       <div className={'titleWrapper'}>
-        <h1 className="tw-styled-heading">{locale == 'en' ? metaTitle : defaultTitle}</h1>
+        <div className="flex content-between w-full">
+          <h1 className="tw-styled-heading">{locale == 'en' ? metaTitle : defaultTitle}</h1>
+          {incidentId && (
+            <Link
+              to={`/cite/${incident.incident_id}#r${report.report_number}`}
+              className="hover:no-underline mb-5"
+            >
+              <Button outline={true} color={'light'}>
+                <Trans>Back to Incident {{ incidentId }}</Trans>
+              </Button>
+            </Link>
+          )}
+        </div>
         <SocialShareButtons
           metaTitle={metaTitle}
           path={props.location.pathname}
@@ -223,6 +239,11 @@
         publish
       }
     }
+    incident: mongodbAiidprodIncidents(
+      reports: { elemMatch: { report_number: { in: [$report_number] } } }
+    ) {
+      incident_id
+    }
   }
 `;