diff --git a/client/public/locales/en/translation.json b/client/public/locales/en/translation.json index 64d2901eab..5ccabc81c5 100644 --- a/client/public/locales/en/translation.json +++ b/client/public/locales/en/translation.json @@ -237,6 +237,7 @@ "associatedApplications": "Associated applications", "associatedArchetypes": "Associated archetypes", "archetypesReviewed": "Archetypes reviewed", + "archetypesAssessed": "Archetypes assessed", "add": "Add", "additionalNotesOrComments": "Additional notes or comments", "adoptionCandidateDistribution": "Application confidence and risk", diff --git a/client/src/app/pages/applications/components/application-detail-drawer/application-detail-drawer.tsx b/client/src/app/pages/applications/components/application-detail-drawer/application-detail-drawer.tsx index 050925b54f..ce07f95a90 100644 --- a/client/src/app/pages/applications/components/application-detail-drawer/application-detail-drawer.tsx +++ b/client/src/app/pages/applications/components/application-detail-drawer/application-detail-drawer.tsx @@ -49,6 +49,7 @@ import { LabelsFromItems } from "@app/components/labels/labels-from-items/labels import { ReviewedArchetypeItem } from "./reviewed-archetype-item"; import { RiskLabel } from "@app/components/RiskLabel"; import { ApplicationDetailFields } from "./application-detail-fields"; +import { AssessedArchetypeItem } from "./assessed-archetype-item"; export interface IApplicationDetailDrawerProps extends Pick { @@ -180,6 +181,23 @@ export const ApplicationDetailDrawer: React.FC< )} + + + {t("terms.archetypesAssessed")} + + + {application?.archetypes?.length ?? 0 > 0 ? ( + application?.archetypes?.map((archetypeRef) => ( + + )) + ) : ( + + )} + + {t("terms.archetypesReviewed")} diff --git a/client/src/app/pages/applications/components/application-detail-drawer/assessed-archetype-item.tsx b/client/src/app/pages/applications/components/application-detail-drawer/assessed-archetype-item.tsx new file mode 100644 index 0000000000..e224e0fec9 --- /dev/null +++ b/client/src/app/pages/applications/components/application-detail-drawer/assessed-archetype-item.tsx @@ -0,0 +1,15 @@ +import { useFetchArchetypeById } from "@app/queries/archetypes"; +import { Label } from "@patternfly/react-core"; +import React from "react"; + +export const AssessedArchetypeItem = ({ id }: { id: number }) => { + const { archetype } = useFetchArchetypeById(id); + + if (!archetype?.assessed) return null; + + return ( + + ); +};