From 3b80309ceca49966a4e6fa15bb26b2cd2e879132 Mon Sep 17 00:00:00 2001
From: ibolton336 <ibolton@redhat.com>
Date: Thu, 12 Oct 2023 13:31:27 -0400
Subject: [PATCH] :bug: Add lists of associated apps & archetypes

Signed-off-by: ibolton336 <ibolton@redhat.com>
---
 client/public/locales/en/translation.json     |  2 +
 .../application-detail-drawer-assessment.tsx  | 29 +++++++++++++-
 .../components/archetype-detail-drawer.tsx    | 39 ++++++++++++++-----
 3 files changed, 59 insertions(+), 11 deletions(-)

diff --git a/client/public/locales/en/translation.json b/client/public/locales/en/translation.json
index 617c59b35e..5d41c28de3 100644
--- a/client/public/locales/en/translation.json
+++ b/client/public/locales/en/translation.json
@@ -214,6 +214,8 @@
   "terms": {
     "accepted": "Accepted",
     "acceptedAppsAndDeps": "Accepted applications and dependencies",
+    "associatedApplications": "Associated applications",
+    "associatedArchetypes": "Associated archetypes",
     "add": "Add",
     "additionalNotesOrComments": "Additional notes or comments",
     "adoptionCandidateDistribution": "Assessment confidence and risk",
diff --git a/client/src/app/pages/applications/components/application-detail-drawer/application-detail-drawer-assessment.tsx b/client/src/app/pages/applications/components/application-detail-drawer/application-detail-drawer-assessment.tsx
index 6df452469b..e4e6e44060 100644
--- a/client/src/app/pages/applications/components/application-detail-drawer/application-detail-drawer-assessment.tsx
+++ b/client/src/app/pages/applications/components/application-detail-drawer/application-detail-drawer-assessment.tsx
@@ -9,12 +9,13 @@ import {
   Text,
   Title,
   Label,
+  LabelGroup,
 } from "@patternfly/react-core";
 import spacing from "@patternfly/react-styles/css/utilities/Spacing/spacing";
 
 import { EmptyTextMessage } from "@app/components/EmptyTextMessage";
 import { EFFORT_ESTIMATE_LIST, PROPOSED_ACTION_LIST } from "@app/Constants";
-import { Task } from "@app/api/models";
+import { Ref, Task } from "@app/api/models";
 import { ApplicationRisk } from "./application-risk";
 import {
   ApplicationDetailDrawer,
@@ -52,6 +53,18 @@ export const ApplicationDetailDrawerAssessment: React.FC<
               default: "14ch",
             }}
           >
+            <DescriptionListGroup>
+              <DescriptionListTerm>{t("terms.archetypes")}</DescriptionListTerm>
+              <DescriptionListDescription>
+                {application?.archetypes?.length ?? 0 > 0 ? (
+                  <ArchetypeLabels
+                    archetypeRefs={application?.archetypes as Ref[]}
+                  />
+                ) : (
+                  <EmptyTextMessage message={t("terms.none")} />
+                )}
+              </DescriptionListDescription>
+            </DescriptionListGroup>
             <DescriptionListGroup>
               <DescriptionListTerm>
                 {t("terms.proposedAction")}
@@ -134,3 +147,17 @@ export const ApplicationDetailDrawerAssessment: React.FC<
     />
   );
 };
+const ArchetypeLabels: React.FC<{ archetypeRefs?: Ref[] }> = ({
+  archetypeRefs,
+}) =>
+  (archetypeRefs?.length ?? 0) === 0 ? null : (
+    <LabelGroup>
+      {(archetypeRefs as Ref[])
+        .sort((a, b) => a.name.localeCompare(b.name))
+        .map((ref) => (
+          <Label color="grey" key={ref.id}>
+            {ref.name}
+          </Label>
+        ))}
+    </LabelGroup>
+  );
diff --git a/client/src/app/pages/archetypes/components/archetype-detail-drawer.tsx b/client/src/app/pages/archetypes/components/archetype-detail-drawer.tsx
index f3a3fa86cb..c741109841 100644
--- a/client/src/app/pages/archetypes/components/archetype-detail-drawer.tsx
+++ b/client/src/app/pages/archetypes/components/archetype-detail-drawer.tsx
@@ -1,3 +1,4 @@
+import "./archetype-detail-drawer.css";
 import React, { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 
@@ -16,12 +17,10 @@ import {
 } from "@patternfly/react-core";
 import spacing from "@patternfly/react-styles/css/utilities/Spacing/spacing";
 
-import { Archetype, Tag, TagRef } from "@app/api/models";
+import { Archetype, Ref, Tag, TagRef } from "@app/api/models";
 import { EmptyTextMessage } from "@app/components/EmptyTextMessage";
 import { PageDrawerContent } from "@app/components/PageDrawerContext";
-import { useFetchTagCategories } from "@app/queries/tags";
 
-import "./archetype-detail-drawer.css";
 import { dedupeArrayOfObjects } from "@app/utils/utils";
 
 export interface IArchetypeDetailDrawerProps {
@@ -35,12 +34,6 @@ const ArchetypeDetailDrawer: React.FC<IArchetypeDetailDrawerProps> = ({
 }) => {
   const { t } = useTranslation();
 
-  const { tagCategories } = useFetchTagCategories();
-  const tags = useMemo(
-    () => tagCategories.flatMap((tc) => tc.tags).filter(Boolean),
-    [tagCategories]
-  );
-
   const manualTags: TagRef[] = useMemo(() => {
     const rawManualTags: TagRef[] =
       archetype?.tags?.filter((t) => !t?.source) ?? [];
@@ -52,7 +45,7 @@ const ArchetypeDetailDrawer: React.FC<IArchetypeDetailDrawerProps> = ({
       archetype?.tags?.filter((t) => t?.source === "assessment") ?? [];
     return dedupeArrayOfObjects<TagRef>(rawAssessmentTags, "name");
   }, [archetype?.tags]);
-
+  console.log("archetype", archetype);
   return (
     <PageDrawerContent
       isExpanded={!!archetype}
@@ -80,6 +73,17 @@ const ArchetypeDetailDrawer: React.FC<IArchetypeDetailDrawerProps> = ({
           </DescriptionListDescription>
         </DescriptionListGroup>
 
+        <DescriptionListGroup>
+          <DescriptionListTerm>{t("terms.applications")}</DescriptionListTerm>
+          <DescriptionListDescription>
+            {archetype?.applications?.length ?? 0 > 0 ? (
+              <ApplicationLabels applicationRefs={archetype?.applications} />
+            ) : (
+              <EmptyTextMessage message={t("terms.none")} />
+            )}
+          </DescriptionListDescription>
+        </DescriptionListGroup>
+
         <DescriptionListGroup>
           <DescriptionListTerm>{t("terms.tagsCriteria")}</DescriptionListTerm>
           <DescriptionListDescription>
@@ -164,6 +168,21 @@ const ArchetypeDetailDrawer: React.FC<IArchetypeDetailDrawerProps> = ({
   );
 };
 
+const ApplicationLabels: React.FC<{ applicationRefs?: Ref[] }> = ({
+  applicationRefs,
+}) =>
+  (applicationRefs?.length ?? 0) === 0 ? null : (
+    <LabelGroup>
+      {(applicationRefs as Ref[])
+        .sort((a, b) => a.name.localeCompare(b.name))
+        .map((ref) => (
+          <Label color="grey" key={ref.id}>
+            {ref.name}
+          </Label>
+        ))}
+    </LabelGroup>
+  );
+
 const TagLabels: React.FC<{ tags?: Tag[] }> = ({ tags }) =>
   (tags?.length ?? 0) === 0 ? null : (
     <LabelGroup>