✨ Add archetype risk to drawer

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

client/src/app/api/models.ts

@@ -760,4 +760,5 @@ export interface Archetype {
   assessments?: Ref[];
   assessed?: boolean;
   review?: Ref;
+  risk?: Risk;
 }

client/src/app/components/PageDrawerContext.tsx

@@ -162,7 +162,7 @@ export const PageDrawerContent: React.FC<IPageDrawerContentProps> = ({
   // If the drawer is already expanded describing app A, then the user clicks app B, we want to send focus back to the drawer.
   React.useEffect(() => {
     drawerFocusRef?.current?.focus();
-  }, [drawerFocusRef, focusKey]);
+  }, [focusKey]);
 
   React.useEffect(() => {
     const drawerHead = header === null ? children : header;

client/src/app/pages/archetypes/components/archetype-detail-drawer.tsx

@@ -25,6 +25,7 @@ import { PageDrawerContent } from "@app/components/PageDrawerContext";
 import { dedupeArrayOfObjects } from "@app/utils/utils";
 import { LabelsFromItems } from "@app/components/labels-from-items/labels-from-items";
 import { ReviewFields } from "@app/pages/applications/components/application-detail-drawer/review-fields";
+import { RiskLabel } from "@app/components/RiskLabel";
 
 export interface IArchetypeDetailDrawerProps {
   onCloseClick: () => void;
@@ -198,6 +199,14 @@ const ArchetypeDetailDrawer: React.FC<IArchetypeDetailDrawerProps> = ({
               </DescriptionListDescription>
             </DescriptionListGroup>
           </DescriptionList>
+          <TextContent className={spacing.mtLg}>
+            <Title headingLevel="h3" size="md">
+              {t("terms.riskFromApplication")}
+            </Title>
+            <Text component="small" cy-data="comments">
+              <RiskLabel risk={archetype?.risk || "unknown"} />
+            </Text>
+          </TextContent>
         </Tab>
         <Tab
           eventKey={TabKey.Reviews}