🐛 Add detail for archetype reviews in drawer (#1475)

https://issues.redhat.com/browse/MTA-1382

Signed-off-by: ibolton336 <[email protected]>

Author: ibolton336

client/public/locales/en/translation.json

@@ -216,13 +216,15 @@
     "acceptedAppsAndDeps": "Accepted applications and dependencies",
     "associatedApplications": "Associated applications",
     "associatedArchetypes": "Associated archetypes",
+    "archetypesReviewed": "Archetypes reviewed",
     "add": "Add",
     "additionalNotesOrComments": "Additional notes or comments",
     "adoptionCandidateDistribution": "Assessment confidence and risk",
     "affectedApplications": "Affected applications",
     "analysis": "Analysis",
     "answer": "Answer",
     "application": "Application",
+    "applicationReview": "Application review",
     "application(s)": "Application(s)",
     "applicationImports": "Application imports",
     "applicationName": "Application name",

client/src/app/pages/applications/components/application-detail-drawer/application-detail-drawer-assessment.tsx

@@ -21,6 +21,7 @@ import {
   IApplicationDetailDrawerProps,
 } from "./application-detail-drawer";
 import { useFetchReviewById } from "@app/queries/reviews";
+import { ReviewedArchetypeItem } from "./reviewed-archetype-item";
 
 export interface IApplicationDetailDrawerAssessmentProps
   extends Pick<IApplicationDetailDrawerProps, "application" | "onCloseClick"> {
@@ -44,6 +45,9 @@ export const ApplicationDetailDrawerAssessment: React.FC<
       onCloseClick={onCloseClick}
       detailsTabMainContent={
         <>
+          <Title headingLevel="h3" size="md">
+            {t("terms.archetypes")}
+          </Title>
           <DescriptionList
             isHorizontal
             isCompact
@@ -53,7 +57,9 @@ export const ApplicationDetailDrawerAssessment: React.FC<
             }}
           >
             <DescriptionListGroup>
-              <DescriptionListTerm>{t("terms.archetypes")}</DescriptionListTerm>
+              <DescriptionListTerm>
+                {t("terms.associatedArchetypes")}
+              </DescriptionListTerm>
               <DescriptionListDescription>
                 {application?.archetypes?.length ?? 0 > 0 ? (
                   <ArchetypeLabels
@@ -64,6 +70,28 @@ export const ApplicationDetailDrawerAssessment: React.FC<
                 )}
               </DescriptionListDescription>
             </DescriptionListGroup>
+            <DescriptionListGroup>
+              <DescriptionListTerm>
+                {t("terms.archetypesReviewed")}
+              </DescriptionListTerm>
+              <DescriptionListDescription>
+                {application?.archetypes?.length ?? 0 > 0 ? (
+                  application?.archetypes?.map((archetypeRef) => (
+                    <ReviewedArchetypeItem
+                      key={archetypeRef.id}
+                      id={archetypeRef.id}
+                    />
+                  ))
+                ) : (
+                  <EmptyTextMessage message={t("terms.none")} />
+                )}
+              </DescriptionListDescription>
+            </DescriptionListGroup>
+            <TextContent className={spacing.mtLg}>
+              <Title headingLevel="h3" size="md">
+                {t("terms.applicationReview")}
+              </Title>
+            </TextContent>
             <DescriptionListGroup>
               <DescriptionListTerm>
                 {t("terms.proposedAction")}
@@ -114,16 +142,6 @@ export const ApplicationDetailDrawerAssessment: React.FC<
                 {application && <ApplicationRisk application={application} />}
               </DescriptionListDescription>
             </DescriptionListGroup> */}
-            <DescriptionListGroup>
-              <DescriptionListTerm>
-                {t("terms.migrationWave")}
-              </DescriptionListTerm>
-              <DescriptionListDescription cy-data="migration-wave">
-                {application?.migrationWave
-                  ? application.migrationWave.name
-                  : t("terms.unassigned")}
-              </DescriptionListDescription>
-            </DescriptionListGroup>
           </DescriptionList>
           <TextContent className={spacing.mtLg}>
             <Title headingLevel="h3" size="md">

client/src/app/pages/applications/components/application-detail-drawer/application-detail-drawer.tsx

@@ -117,9 +117,20 @@ export const ApplicationDetailDrawer: React.FC<
                 <ApplicationBusinessService
                   id={application.businessService.id}
                 />
-              ) : null}
+              ) : (
+                t("terms.unassigned")
+              )}
+            </Text>
+            <Title headingLevel="h3" size="md">
+              {t("terms.migrationWave")}
+            </Title>
+            <Text component="small">
+              {application?.migrationWave
+                ? application.migrationWave.name
+                : t("terms.unassigned")}
             </Text>
           </TextContent>
+
           {detailsTabMainContent}
         </Tab>
 

client/src/app/pages/applications/components/application-detail-drawer/reviewed-archetype-item.tsx

@@ -0,0 +1,16 @@
+import { useFetchArchetypeById } from "@app/queries/archetypes";
+import { Label } from "@patternfly/react-core";
+import React from "react";
+
+export const ReviewedArchetypeItem = ({ id }: { id: number }) => {
+  const { archetype } = useFetchArchetypeById(id);
+
+  if (!archetype) return null;
+
+  return (
+    <Label color="grey" key={id}>
+      {archetype.name}
+      {archetype.review ? " (Reviewed)" : " (Not Reviewed)"}
+    </Label>
+  );
+};