From a79757225ccf8055ca5c541e0d72a0824a85d321 Mon Sep 17 00:00:00 2001
From: Ian Bolton <ibolton@redhat.com>
Date: Thu, 2 Nov 2023 12:29:04 -0400
Subject: [PATCH] :sparkles: Add archetype filter for applications (#1507)

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

Signed-off-by: ibolton336 <ibolton@redhat.com>
---
 .../labels-from-items/labels-from-items.tsx   | 19 ++++++------
 .../applications-table-assessment.tsx         | 29 +++++++++++++++++++
 2 files changed, 38 insertions(+), 10 deletions(-)

diff --git a/client/src/app/components/labels-from-items/labels-from-items.tsx b/client/src/app/components/labels-from-items/labels-from-items.tsx
index d152ea9413..2c65c59fcc 100644
--- a/client/src/app/components/labels-from-items/labels-from-items.tsx
+++ b/client/src/app/components/labels-from-items/labels-from-items.tsx
@@ -37,15 +37,14 @@ export function LabelsFromItems<T extends { name: string }>({
 }): JSX.Element {
   const { t } = useTranslation();
 
-  if (items?.length ?? 0 === 0) {
-    return <div>{noneMessage || t("terms.none")}</div>;
+  if (items && items.length > 0) {
+    return (
+      <LabelGroup>
+        {items.map((item, index) => (
+          <RandomColorLabel key={index}>{item.name}</RandomColorLabel>
+        ))}
+      </LabelGroup>
+    );
   }
-
-  return (
-    <LabelGroup>
-      {items?.map((item, index) => (
-        <RandomColorLabel key={index}>{item.name}</RandomColorLabel>
-      ))}
-    </LabelGroup>
-  );
+  return <div>{noneMessage || t("terms.none")}</div>;
 }
diff --git a/client/src/app/pages/applications/applications-table-assessment/applications-table-assessment.tsx b/client/src/app/pages/applications/applications-table-assessment/applications-table-assessment.tsx
index 9602e1d191..ce716b58c9 100644
--- a/client/src/app/pages/applications/applications-table-assessment/applications-table-assessment.tsx
+++ b/client/src/app/pages/applications/applications-table-assessment/applications-table-assessment.tsx
@@ -274,6 +274,35 @@ export const ApplicationsTable: React.FC = () => {
           }) + "...",
         getItemValue: (item) => item?.name || "",
       },
+      {
+        key: "archetype",
+        title: t("terms.archetype"),
+        type: FilterType.multiselect,
+        placeholderText:
+          t("actions.filterBy", {
+            what: t("terms.archetype").toLowerCase(),
+          }) + "...",
+        getItemValue: (item) => {
+          const archetypeNames = item?.archetypes
+            ?.map((archetype) => archetype.name)
+            .join("");
+          return archetypeNames || "";
+        },
+        selectOptions: [
+          ...new Set(
+            applications
+              .flatMap(
+                (application) =>
+                  application?.archetypes?.map((archetype) => archetype.name)
+              )
+              .filter(Boolean)
+          ),
+        ].map((archetypeName) => ({
+          key: archetypeName,
+          value: archetypeName,
+        })),
+        logicOperator: "OR",
+      },
       {
         key: "description",
         title: t("terms.description"),