✨ Add archetype filter for applications (#1507)

https://issues.redhat.com/browse/MTA-1541 Signed-off-by: ibolton336 <ibolton@redhat.com>
konveyor · Nov 2, 2023 · a797572 · a797572
1 parent 9eb3dbd
commit a797572
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 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
@@ -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/...rc/app/pages/applications/applications-table-assessment/applications-table-assessment.tsx b/...rc/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"),