✨ Add archetype filter for applications

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

client/src/app/components/labels-from-items/labels-from-items.tsx

@@ -36,16 +36,17 @@ export function LabelsFromItems<T extends { name: string }>({
   noneMessage?: string;
 }): JSX.Element {
   const { t } = useTranslation();
-
-  if (items?.length ?? 0 === 0) {
-    return <div>{noneMessage || t("terms.none")}</div>;
+  console.log("items", items);
+
+  // Check if items is not undefined and has length greater than 0
+  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>;
 }

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"),