From f0452b78bfb49e45c0bfd003ab663a80709bd713 Mon Sep 17 00:00:00 2001
From: ibolton336 <ibolton@redhat.com>
Date: Tue, 10 Oct 2023 13:01:39 -0400
Subject: [PATCH] Dedupe tags when selecting in app form

---
 .../components/application-form/application-form.tsx | 10 +++++++---
 client/src/app/utils/utils.ts                        | 12 ++++++++++++
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/client/src/app/pages/applications/components/application-form/application-form.tsx b/client/src/app/pages/applications/components/application-form/application-form.tsx
index 6e388b6c3d..0afa0d8b9b 100644
--- a/client/src/app/pages/applications/components/application-form/application-form.tsx
+++ b/client/src/app/pages/applications/components/application-form/application-form.tsx
@@ -16,9 +16,10 @@ import { yupResolver } from "@hookform/resolvers/yup";
 
 import { SimpleSelect, OptionWithValue } from "@app/components/SimpleSelect";
 import { DEFAULT_SELECT_MAX_HEIGHT } from "@app/Constants";
-import { Application, Tag } from "@app/api/models";
+import { Application, Tag, TagRef } from "@app/api/models";
 import {
   customURLValidation,
+  dedupeArrayOfObjects,
   duplicateNameCheck,
   getAxiosErrorMessage,
 } from "@app/utils/utils";
@@ -103,8 +104,11 @@ export const ApplicationForm: React.FC<ApplicationFormProps> = ({
     };
   });
 
-  const manualTags =
-    application?.tags?.filter((t) => t?.source ?? "" === "") ?? [];
+  const manualTags: TagRef[] = useMemo(() => {
+    const rawManualTags: TagRef[] =
+      application?.tags?.filter((t) => t?.source ?? "" === "") ?? [];
+    return dedupeArrayOfObjects<TagRef>(rawManualTags, "name");
+  }, [application?.tags]);
 
   const nonManualTags =
     application?.tags?.filter((t) => t?.source ?? "" !== "") ?? [];
diff --git a/client/src/app/utils/utils.ts b/client/src/app/utils/utils.ts
index 253533b1a4..ce1b98e0d1 100644
--- a/client/src/app/utils/utils.ts
+++ b/client/src/app/utils/utils.ts
@@ -75,6 +75,18 @@ export const dedupeFunction = (arr: any[]) =>
       index === self.findIndex((t) => t.value === value.value)
   );
 
+export const dedupeArrayOfObjects = <T>(arr: Array<T>, key: keyof T) => {
+  const seen = new Set();
+  return arr.filter((item) => {
+    const value = item[key];
+    if (seen.has(value)) {
+      return false;
+    }
+    seen.add(value);
+    return true;
+  });
+};
+
 export const numStr = (num: number | undefined): string => {
   if (num === undefined) return "";
   return String(num);