diff --git a/client/src/app/pages/applications/components/application-detail-drawer/review-fields.tsx b/client/src/app/pages/applications/components/application-detail-drawer/review-fields.tsx index 143fd1807..f10ef8cca 100644 --- a/client/src/app/pages/applications/components/application-detail-drawer/review-fields.tsx +++ b/client/src/app/pages/applications/components/application-detail-drawer/review-fields.tsx @@ -7,7 +7,7 @@ import { Title, TextContent, } from "@patternfly/react-core"; -import { Application, Review } from "@app/api/models"; +import { Application, Archetype, Review } from "@app/api/models"; import spacing from "@patternfly/react-styles/css/utilities/Spacing/spacing"; import { useFetchReviewById, useFetchReviews } from "@app/queries/reviews"; import { useFetchArchetypes } from "@app/queries/archetypes"; @@ -21,14 +21,16 @@ export type ReviewDrawerLabelItem = { isArchetype?: boolean; }; -export const ReviewFields: React.FC<{ application: Application | null }> = ({ - application, -}) => { +export const ReviewFields: React.FC<{ + application?: Application | null; + archetype?: Archetype | null; +}> = ({ application, archetype }) => { const { archetypes } = useFetchArchetypes(); const { reviews } = useFetchReviews(); const { t } = useTranslation(); const { review: appReview } = useFetchReviewById(application?.review?.id); + const { review: archetypeReview } = useFetchReviewById(archetype?.review?.id); const notYetReviewed = ( @@ -47,11 +49,24 @@ export const ReviewFields: React.FC<{ application: Application | null }> = ({ .filter(Boolean); const groupedReviewList: ReviewDrawerLabelItem[] = [ - { - review: appReview, - name: appReview?.application?.name, - isArchetype: false, - }, + ...(archetypeReview + ? [ + { + review: archetypeReview, + name: archetypeReview?.archetype?.name, + isArchetype: true, + }, + ] + : []), + ...(appReview + ? [ + { + review: appReview, + name: appReview?.application?.name, + isArchetype: false, + }, + ] + : []), ...matchedArchetypeReviews.map((archetypeReview) => ({ review: archetypeReview, name: archetypeReview?.archetype?.name, @@ -134,7 +149,6 @@ export const ReviewFields: React.FC<{ application: Application | null }> = ({ {groupedReviewList.length === 0 ? notYetReviewed : groupedReviewList.map((item, index) => { - const labelText = item?.review?.comments; return ( void; archetype: Archetype | null; } +enum TabKey { + Details = 0, + Reviews, +} + const ArchetypeDetailDrawer: React.FC = ({ onCloseClick, archetype, @@ -44,7 +53,11 @@ const ArchetypeDetailDrawer: React.FC = ({ archetype?.tags?.filter((t) => t?.source === "assessment") ?? []; return dedupeArrayOfObjects(rawAssessmentTags, "name"); }, [archetype?.tags]); - console.log("archetype", archetype); + + const [activeTabKey, setActiveTabKey] = React.useState( + TabKey.Details + ); + return ( = ({ } > - - - {t("terms.description")} - - {archetype?.description || ( - - )} - - - - - {t("terms.applications")} - - {archetype?.applications?.length ?? 0 > 0 ? ( - - ) : ( - - )} - - - - - {t("terms.tagsCriteria")} - - {archetype?.criteria?.length ?? 0 > 0 ? ( - - ) : ( - - )} - - - - - {t("terms.tagsArchetype")} - - {manualTags.length > 0 ? ( - - ) : ( - - )} - - - - - {t("terms.tagsAssessment")} - - {assessmentTags.length > 0 ? ( - - ) : ( - - )} - - - - - {t("terms.maintainers")} - - - - - {t("terms.stakeholder(s)")} - - - - {archetype?.stakeholders?.length ?? 0 > 0 ? ( - + setActiveTabKey(tabKey as TabKey)} + > + {t("terms.details")}} + > + + + + {t("terms.description")} + + + {archetype?.description || ( + + )} + + + + + + {t("terms.applications")} + + + {archetype?.applications?.length ?? 0 > 0 ? ( + ) : ( )} - - - - - - - - {t("terms.stakeholderGroup(s)")} - - - - {archetype?.stakeholderGroups?.length ?? 0 > 0 ? ( - + + + + + + {t("terms.tagsCriteria")} + + + {archetype?.criteria?.length ?? 0 > 0 ? ( + ) : ( )} - - - - - - - {t("terms.comments")} - - {archetype?.comments || ( - - )} - - - + + + + + + {t("terms.tagsArchetype")} + + + {manualTags.length > 0 ? ( + + ) : ( + + )} + + + + + + {t("terms.tagsAssessment")} + + + {assessmentTags.length > 0 ? ( + + ) : ( + + )} + + + + + + {t("terms.maintainers")} + + + + + + {t("terms.stakeholder(s)")} + + + + {archetype?.stakeholders?.length ?? 0 > 0 ? ( + + ) : ( + + )} + + + + + + + + {t("terms.stakeholderGroup(s)")} + + + + {archetype?.stakeholderGroups?.length ?? 0 > 0 ? ( + + ) : ( + + )} + + + + + + + {t("terms.comments")} + + {archetype?.comments || ( + + )} + + + + + {t("terms.review")}} + > + + + {/* TODO: action buttons -- primary: "Close", link: "Edit archetype" */}