Add landscape to review page

client/src/app/api/models.ts

@@ -72,6 +72,9 @@ export interface Ref {
   id: number;
   name: string;
 }
+export interface IdRef {
+  id: number;
+}
 
 export interface JobFunction {
   id: number;

client/src/app/pages/reports/components/identified-risks-table/identified-risks-table.tsx

@@ -246,7 +246,7 @@ export const IdentifiedRisksTable: React.FC<IIdentifiedRisksTableProps> = ({
                       <Td {...getTdProps({ columnKey: "applications" })}>
                         {item?.applications.length ? (
                           <Link to={getApplicationsUrl(item?.applications)}>
-                            {item.applications.length}
+                            {item.applications.length} Application(s)
                           </Link>
                         ) : (
                           "N/A"

client/src/app/pages/reports/components/landscape/landscape.tsx

@@ -3,9 +3,10 @@ import { useTranslation } from "react-i18next";
 import { Flex, FlexItem, Skeleton } from "@patternfly/react-core";
 
 import { RISK_LIST } from "@app/Constants";
-import { Assessment, Questionnaire } from "@app/api/models";
+import { Assessment, IdRef, Questionnaire } from "@app/api/models";
 import { ConditionalRender } from "@app/components/ConditionalRender";
 import { Donut } from "./donut";
+import { useFetchAssessmentsWithArchetypeApplications } from "@app/queries/assessments";
 
 interface IAggregateRiskData {
   green: number;
@@ -59,23 +60,30 @@ interface ILandscapeProps {
    * The set of assessments for the selected questionnaire.  Risk values will be
    * aggregated from the individual assessment risks.
    */
-  assessments: Assessment[];
+  assessmentRefs?: IdRef[];
 }
 
 export const Landscape: React.FC<ILandscapeProps> = ({
   questionnaire,
-  assessments,
+  assessmentRefs,
 }) => {
   const { t } = useTranslation();
 
+  const { assessmentsWithArchetypeApplications } =
+    useFetchAssessmentsWithArchetypeApplications();
+
+  const filteredAssessments = assessmentsWithArchetypeApplications.filter(
+    (assessment) => assessmentRefs?.some((ref) => ref.id === assessment.id)
+  );
+
   const landscapeData = useMemo(
-    () => aggregateRiskData(assessments),
-    [assessments]
+    () => aggregateRiskData(filteredAssessments),
+    [filteredAssessments]
   );
 
   return (
     <ConditionalRender
-      when={!questionnaire && !assessments}
+      when={!questionnaire && !filteredAssessments}
       then={
         <div style={{ height: 200, width: 400 }}>
           <Skeleton height="75%" width="100%" />

client/src/app/pages/reports/reports.tsx

@@ -38,6 +38,7 @@ import { Landscape } from "./components/landscape";
 import AdoptionCandidateTable from "./components/adoption-candidate-table/adoption-candidate-table";
 import { AdoptionPlan } from "./components/adoption-plan";
 import { IdentifiedRisksTable } from "./components/identified-risks-table";
+import { toIdRef } from "@app/utils/model-utils";
 
 const ALL_QUESTIONNAIRES = -1;
 
@@ -115,12 +116,40 @@ export const Reports: React.FC = () => {
   const answeredQuestionnaires: Questionnaire[] =
     isAssessmentsFetching || isQuestionnairesFetching
       ? []
-      : assessments
-          .map((assessment) => assessment?.questionnaire?.id)
-          .filter((id) => id > 0)
+      : Array.from(
+          new Set(
+            assessments
+              .map((assessment) => assessment?.questionnaire?.id)
+              .filter((id) => id > 0)
+          )
+        )
           .map((id) => questionnairesById[id])
-          .sort((a, b) => a.name.localeCompare(b.name))
-          .filter((questionnaire) => questionnaire !== undefined);
+          .filter((questionnaire) => questionnaire !== undefined)
+          .sort((a, b) => a.name.localeCompare(b.name));
+
+  const isAllQuestionnairesSelected =
+    selectedQuestionnaireId === ALL_QUESTIONNAIRES;
+
+  const questionnaire = isAllQuestionnairesSelected
+    ? null
+    : questionnairesById[selectedQuestionnaireId];
+
+  const assessmentRefs = isAllQuestionnairesSelected
+    ? assessments
+        .map((assessment) => {
+          const assessmentRef = toIdRef(assessment);
+          return assessmentRef;
+        })
+        .filter(Boolean)
+    : assessments
+        .filter(
+          ({ questionnaire }) => questionnaire.id === selectedQuestionnaireId
+        )
+        .map((assessment) => {
+          const assessmentRef = toIdRef(assessment);
+          return assessmentRef;
+        })
+        .filter(Boolean);
 
   return (
     <>
@@ -197,19 +226,8 @@ export const Reports: React.FC = () => {
                   </CardHeader>
                   <CardBody>
                     <Landscape
-                      questionnaire={
-                        selectedQuestionnaireId === ALL_QUESTIONNAIRES
-                          ? null
-                          : questionnairesById[selectedQuestionnaireId]
-                      }
-                      assessments={
-                        selectedQuestionnaireId === ALL_QUESTIONNAIRES
-                          ? assessments
-                          : assessments.filter(
-                              ({ questionnaire }) =>
-                                questionnaire.id === selectedQuestionnaireId
-                            )
-                      }
+                      questionnaire={questionnaire}
+                      assessmentRefs={assessmentRefs}
                     />
                   </CardBody>
                 </Card>

client/src/app/pages/review/review-page.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React from "react";
 import { useParams } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import {
@@ -26,12 +26,11 @@ import useIsArchetype from "@app/hooks/useIsArchetype";
 import { useFetchApplicationById } from "@app/queries/applications";
 import { useFetchArchetypeById } from "@app/queries/archetypes";
 import { IdentifiedRisksTable } from "../reports/components/identified-risks-table";
+import { Landscape } from "../reports/components/landscape";
 
 const ReviewPage: React.FC = () => {
   const { t } = useTranslation();
 
-  const [isRiskCardOpen, setIsRiskCardOpen] = useState(false);
-
   const { applicationId, archetypeId } = useParams<ReviewRoute>();
   const isArchetype = useIsArchetype();
 
@@ -113,12 +112,17 @@ const ReviewPage: React.FC = () => {
                     </FormSection>
                   </div>
                 </GridItem>
-                {/* <GridItem md={6}>
-              <ApplicationAssessmentDonutChart
-                application={application}
-                archetype={archetype}
-              />
-            </GridItem> */}
+                <GridItem md={6}>
+                  {(application?.assessments?.length ||
+                    archetype?.assessments?.length) && (
+                    <Landscape
+                      questionnaire={null}
+                      assessmentRefs={
+                        application?.assessments || archetype?.assessments
+                      }
+                    />
+                  )}
+                </GridItem>
               </Grid>
             </ConditionalRender>
           </CardBody>
@@ -132,6 +136,12 @@ const ReviewPage: React.FC = () => {
                 <Text component="h3">{t("terms.assessmentSummary")}</Text>
               </TextContent>
             </CardHeader>
+            <Landscape
+              questionnaire={null}
+              assessmentRefs={
+                application?.assessments || archetype?.assessments
+              }
+            />
             <IdentifiedRisksTable
               assessmentRefs={
                 application?.assessments || archetype?.assessments

client/src/app/utils/model-utils.tsx

@@ -3,6 +3,7 @@ import React from "react";
 import {
   Application,
   BusinessService,
+  IdRef,
   Identity,
   IdentityKind,
   IssueManagerKind,
@@ -213,6 +214,14 @@ export const IssueManagerOptions: OptionWithValue<IssueManagerKind>[] = [
   },
 ];
 
+export const toIdRef = <RefLike extends IdRef>(
+  source: RefLike | undefined
+): IdRef | undefined => {
+  if (!source || !source.id) return undefined;
+
+  return { id: source.id };
+};
+
 /**
  * Convert any object that looks like a `Ref` into a `Ref`.  If the source object
  * is `undefined`, or doesn't look like a `Ref`, return `undefined`.