Merge pull request #609 from EPantelaios/feature/CAT-1061

themiszamani · web-flow · commit f1662a253338 · 2025-11-10T16:57:02.000+02:00
[CAT-1066] - Permit reporter role to click and view assessments
diff --git a/src/api/services/reports.ts b/src/api/services/reports.ts
@@ -1,5 +1,11 @@
-import { useMutation, useQuery } from "@tanstack/react-query";
+import { useInfiniteQuery, useMutation, useQuery } from "@tanstack/react-query";
 import { APIClient } from "../client";
+import type {
+  ApiAdminAssessments,
+  AssessmentDetailsResponse,
+  AssessmentListResponse,
+  Pagination,
+} from "@/types";
 
 export interface ReportDefinition {
   id: string;
@@ -126,3 +132,50 @@ export const useGetReportFilters = ({
     },
     enabled: !!token && !!reportDefinitionId && isRegistered,
   });
+
+export const useGetReportAssessments = ({
+  size,
+  token,
+  search,
+  isRegistered,
+}: ApiAdminAssessments) =>
+  useInfiniteQuery({
+    queryKey: ["all-assessments", { size, search }],
+    queryFn: async ({ pageParam = 1 }) => {
+      const response = await APIClient(token).get<AssessmentListResponse>(
+        `/v1/reports/assessments?size=${size}&page=${pageParam}${search !== "" ? "&search=" + search : ""}`,
+      );
+      return response.data;
+    },
+    initialPageParam: 1,
+    getNextPageParam: (lastPage) => {
+      const pageMeta = lastPage as Pagination;
+      if (pageMeta.number_of_page < pageMeta.total_pages) {
+        return pageMeta.number_of_page + 1;
+      } else {
+        return undefined;
+      }
+    },
+    enabled: !!token && isRegistered,
+  });
+
+export function useGetReportAssessmentById({
+  id,
+  token,
+  isRegistered,
+}: {
+  id: string;
+  token?: string;
+  isRegistered?: boolean;
+}) {
+  return useQuery({
+    queryKey: ["assessment", id],
+    queryFn: async () => {
+      const url = `/v1/reports/assessments/${id}`;
+      const response =
+        await APIClient(token).get<AssessmentDetailsResponse>(url);
+      return response.data;
+    },
+    enabled: !!token && isRegistered && id !== "",
+  });
+}
diff --git a/src/pages/admin/reports/Reports.tsx b/src/pages/admin/reports/Reports.tsx
@@ -1,4 +1,5 @@
-import { useCallback, useState } from "react";
+import { useCallback, useState, useMemo } from "react";
+import { Link } from "react-router-dom";
 import {
   Container,
   Row,
@@ -20,6 +21,9 @@ import type {
   ReportDefinition,
   ReportFilter,
 } from "@/api/services/reports";
+import type { AssessmentListItem } from "@/types";
+import { buildRoute } from "@/routes";
+import ROUTES from "@/routes";
 import styles from "./Reports.module.css";
 
 interface ReportsProps {
@@ -33,6 +37,7 @@ interface ReportsProps {
   reportFilters: ReportFilter[];
   selectedFilters: Record<string, string[]>;
   appliedFilters: Record<string, string[]>;
+  assessments: AssessmentListItem[];
   onReportDefinitionChange: (definitionId: string) => void;
   onFilterChange: (
     filterName: string,
@@ -55,6 +60,7 @@ function Reports({
   reportFilters,
   selectedFilters,
   appliedFilters,
+  assessments,
   onReportDefinitionChange,
   onFilterChange,
   onApplyFilters,
@@ -63,6 +69,18 @@ function Reports({
 }: ReportsProps) {
   const [showFilterDropdown, setShowFilterDropdown] = useState(false);
 
+  // Create assessment name-to-ID lookup map
+  const assessmentNameToIdMap = useMemo(() => {
+    const map = new Map<string, string>();
+    assessments.forEach((assessment) => {
+      map.set(assessment.name, assessment.id);
+    });
+    return map;
+  }, [assessments]);
+
+  const isRowAssessment = reportData?.rows_dimension === "assessment";
+  const isColumnAssessment = reportData?.columns_dimension === "assessment";
+
   const getAppliedFilterCount = useCallback(() => {
     return Object.values(appliedFilters).reduce(
       (total, values) => total + values.length,
@@ -322,9 +340,24 @@ function Reports({
                           </Button>
                         )}
                       </th>
-                      {reportData.columns.map((column, index) => (
-                        <th key={index}>{column}</th>
-                      ))}
+                      {reportData.columns.map((column, index) => {
+                        const assessmentId = assessmentNameToIdMap.get(column);
+                        const isClickable = isColumnAssessment && assessmentId;
+
+                        return isClickable ? (
+                          <th key={index}>
+                            <Link
+                              to={buildRoute(ROUTES.ASSESSMENTS.VIEW, {
+                                asmtId: assessmentId,
+                              })}
+                            >
+                              {column}
+                            </Link>
+                          </th>
+                        ) : (
+                          <th key={index}>{column}</th>
+                        );
+                      })}
                     </tr>
                   </thead>
                   <tbody>
@@ -348,22 +381,39 @@ function Reports({
                         </td>
                       </tr>
                     ) : (
-                      reportData.rows.map((row, rowIndex) => (
-                        <tr key={rowIndex}>
-                          <td className={styles["row-header"]}>{row}</td>
-                          {reportData.data[rowIndex]?.map(
-                            (cellValue, cellIndex) => (
-                              <td key={cellIndex}>
-                                <span
-                                  className={`${styles["status-badge"]} ${getStatusClass(cellValue)}`}
+                      reportData.rows.map((row, rowIndex) => {
+                        const assessmentId = assessmentNameToIdMap.get(row);
+                        const isClickable = isRowAssessment && assessmentId;
+
+                        return (
+                          <tr key={rowIndex}>
+                            {isClickable ? (
+                              <td className={styles["row-header"]}>
+                                <Link
+                                  to={buildRoute(ROUTES.ASSESSMENTS.VIEW, {
+                                    asmtId: assessmentId,
+                                  })}
                                 >
-                                  {getDisplayValue(cellValue)}
-                                </span>
+                                  {row}
+                                </Link>
                               </td>
-                            ),
-                          )}
-                        </tr>
-                      ))
+                            ) : (
+                              <td className={styles["row-header"]}>{row}</td>
+                            )}
+                            {reportData.data[rowIndex]?.map(
+                              (cellValue, cellIndex) => (
+                                <td key={cellIndex}>
+                                  <span
+                                    className={`${styles["status-badge"]} ${getStatusClass(cellValue)}`}
+                                  >
+                                    {getDisplayValue(cellValue)}
+                                  </span>
+                                </td>
+                              ),
+                            )}
+                          </tr>
+                        );
+                      })
                     )}
                   </tbody>
                 </Table>
diff --git a/src/pages/admin/reports/ReportsContainer.tsx b/src/pages/admin/reports/ReportsContainer.tsx
@@ -6,9 +6,11 @@ import {
   useGetReportFilters,
   useExportReport,
   type ReportResponse,
+  useGetReportAssessments,
 } from "@/api/services/reports";
 import toast from "react-hot-toast";
 import Reports from "./Reports";
+import type { AssessmentListItem } from "@/types";
 
 function ReportsContainer() {
   const { keycloak, registered } = useContext(AuthContext)!;
@@ -23,6 +25,12 @@ function ReportsContainer() {
   const [appliedFilters, setAppliedFilters] = useState<
     Record<string, string[]>
   >({});
+  const [shouldFetchAssessments, setShouldFetchAssessments] = useState(false);
+  const [allAssessments, setAllAssessments] = useState<AssessmentListItem[]>(
+    [],
+  );
+  const [isFetchingAllAssessments, setIsFetchingAllAssessments] =
+    useState(false);
 
   const {
     data: reportDefinitions,
@@ -39,9 +47,40 @@ function ReportsContainer() {
     isRegistered: registered,
   });
 
+  const {
+    data: assessmentsData,
+    fetchNextPage,
+    hasNextPage,
+  } = useGetReportAssessments({
+    size: 5,
+    token: keycloak?.token || "",
+    search: "",
+    isRegistered:
+      registered && shouldFetchAssessments && isFetchingAllAssessments,
+  });
+
   const generateReportMutation = useGenerateReport(keycloak?.token || "");
   const exportReportMutation = useExportReport(keycloak?.token || "");
 
+  // Fetch all assessments with pagination
+  useEffect(() => {
+    if (!assessmentsData || !isFetchingAllAssessments) return;
+
+    let tmpAssessments: AssessmentListItem[] = [];
+    if (assessmentsData?.pages) {
+      assessmentsData.pages.map((page) => {
+        tmpAssessments = [...tmpAssessments, ...page.content];
+      });
+      if (hasNextPage) {
+        fetchNextPage();
+      }
+    }
+
+    setAllAssessments(tmpAssessments);
+    setIsFetchingAllAssessments(false);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [assessmentsData, fetchNextPage, hasNextPage, isFetchingAllAssessments]);
+
   const handleGenerateReportForDefinition = useCallback(
     async (definitionId: string, filters?: Record<string, string[]>) => {
       if (!isInitialLoad) {
@@ -66,6 +105,16 @@ function ReportsContainer() {
         });
         setReportData(result);
 
+        if (
+          (result.rows_dimension === "assessment" ||
+            result.columns_dimension === "assessment") &&
+          !shouldFetchAssessments
+        ) {
+          setAllAssessments([]);
+          setShouldFetchAssessments(true);
+          setIsFetchingAllAssessments(true);
+        }
+
         if (isInitialLoad) {
           setIsInitialLoad(false);
         }
@@ -76,7 +125,12 @@ function ReportsContainer() {
         setIsGenerating(false);
       }
     },
-    [isInitialLoad, selectedFilters, generateReportMutation],
+    [
+      isInitialLoad,
+      selectedFilters,
+      generateReportMutation,
+      shouldFetchAssessments,
+    ],
   );
 
   useEffect(() => {
@@ -93,12 +147,8 @@ function ReportsContainer() {
     if (selectedReportDefinition && !reportData && isInitialLoad) {
       handleGenerateReportForDefinition(selectedReportDefinition);
     }
-  }, [
-    selectedReportDefinition,
-    reportData,
-    isInitialLoad,
-    handleGenerateReportForDefinition,
-  ]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedReportDefinition, reportData, isInitialLoad]);
 
   const handleReportDefinitionChange = (definitionId: string) => {
     setSelectedReportDefinition(definitionId);
@@ -202,6 +252,7 @@ function ReportsContainer() {
       reportFilters={reportFilters || []}
       selectedFilters={selectedFilters}
       appliedFilters={appliedFilters}
+      assessments={allAssessments}
       onReportDefinitionChange={handleReportDefinitionChange}
       onFilterChange={handleFilterChange}
       onApplyFilters={handleApplyFilters}
diff --git a/src/pages/assessments/AssessmentView.tsx b/src/pages/assessments/AssessmentView.tsx
@@ -17,6 +17,7 @@ import { useTranslation } from "react-i18next";
 import { prettyPrintRanking } from "@/utils";
 import { AutoTestDetails } from "./components/tests/AutoTestDetails";
 import gatherStats from "./utils/gatherStats";
+import { useGetReportAssessmentById } from "@/api/services/reports";
 
 /** AssessmentView page that displays the results of an assessment */
 const AssessmentView = ({ isPublic }: { isPublic: boolean }) => {
@@ -28,14 +29,29 @@ const AssessmentView = ({ isPublic }: { isPublic: boolean }) => {
 
   const asmtNumID = asmtId !== undefined ? asmtId : "";
 
+  const hasFullAssessmentAccess =
+    keycloak?.resourceAccess?.["backend-service"]?.roles?.some((role) =>
+      ["admin", "reporter"].includes(role),
+    ) ?? false;
+
+  const { data: reportAssessmentData } = useGetReportAssessmentById({
+    id: asmtNumID,
+    token: keycloak?.token || "",
+    isRegistered: registered && hasFullAssessmentAccess,
+  });
+
   const { data: assessmentData } = useGetAssessment({
     id: asmtNumID,
     token: keycloak?.token || "",
-    isRegistered: registered,
+    isRegistered: registered && !hasFullAssessmentAccess,
     isPublic: isPublic,
   });
 
-  const assessment = assessmentData?.assessment_doc;
+  const finalAssessmentData = hasFullAssessmentAccess
+    ? reportAssessmentData
+    : assessmentData;
+
+  const assessment = finalAssessmentData?.assessment_doc;
   const stats = gatherStats(assessment);
 
   return (
diff --git a/src/pages/assessments/AssessmentsList.tsx b/src/pages/assessments/AssessmentsList.tsx
@@ -236,7 +236,7 @@ function AssessmentsList({ listPublic = false }: AssessmentListProps) {
 
   const { data: adminSettings } = useGetAdminSettings({
     token: keycloak?.token || "",
-    isRegistered: registered || false,
+    isRegistered: (registered && userType?.toLowerCase() === "admin") || false,
   });
 
   // Check if Zenodo publishing is enabled
