Report page for all reports

responsible-ai-collaborative · Apr 25, 2024 · a2821b6 · a2821b6
1 parent 6a74e52
commit a2821b6
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 22 deletions.
diff --git a/site/gatsby-site/page-creators/createReportPages.js b/site/gatsby-site/page-creators/createReportPages.js
@@ -6,7 +6,7 @@ const createReportPages = async (graphql, createPage, { languages }) => {
   const result = await graphql(
     `
       query ReportPages {
-        reports: allMongodbAiidprodReports(filter: { is_incident_report: { eq: false } }) {
+        reports: allMongodbAiidprodReports {
           nodes {
             report_number
             language

diff --git a/site/gatsby-site/src/components/reports/ReportCard.js b/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">

diff --git a/site/gatsby-site/src/templates/report.js b/site/gatsby-site/src/templates/report.js
@@ -4,7 +4,7 @@ import { Trans, useTranslation } from 'react-i18next';
 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 @@ import ClassificationsDisplay from 'components/taxa/ClassificationsDisplay';
 
 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 @@ function ReportPage(props) {
           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 @@ export const query = graphql`
         publish
       }
     }
+    incident: mongodbAiidprodIncidents(
+      reports: { elemMatch: { report_number: { in: [$report_number] } } }
+    ) {
+      incident_id
+    }
   }
 `;