From a8519050b8754ec62112c2c3a9f1047676e85d7f Mon Sep 17 00:00:00 2001
From: talboren <tal@keephq.dev>
Date: Sun, 11 Feb 2024 15:21:48 +0200
Subject: [PATCH] fix(ui): new Map because Map is immutable (#818)

---
 keep-ui/app/alerts/alert-assignee.tsx     | 5 +++--
 keep-ui/app/settings/webhook-settings.tsx | 3 +++
 keep-ui/utils/hooks/useAlerts.ts          | 8 ++++----
 3 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/keep-ui/app/alerts/alert-assignee.tsx b/keep-ui/app/alerts/alert-assignee.tsx
index 04819ae4c..c3dc67627 100644
--- a/keep-ui/app/alerts/alert-assignee.tsx
+++ b/keep-ui/app/alerts/alert-assignee.tsx
@@ -15,6 +15,7 @@ export default function AlertAssignee({ assignee }: Props) {
   }
 
   const user = users.find((user) => user.email === assignee);
+  const userName = user?.name || "Keep";
 
   return !imageError ? (
     // eslint-disable-next-line @next/next/no-img-element
@@ -22,7 +23,7 @@ export default function AlertAssignee({ assignee }: Props) {
       className="h-8 w-8 rounded-full"
       src={
         user?.picture ||
-        `https://ui-avatars.com/api/?name=${user?.name}&background=random`
+        `https://ui-avatars.com/api/?name=${userName}&background=random`
       }
       height={24}
       width={24}
@@ -32,7 +33,7 @@ export default function AlertAssignee({ assignee }: Props) {
     />
   ) : (
     <NameInitialsAvatar
-      name={user?.name || "Unknown User"}
+      name={userName}
       bgColor="orange"
       borderWidth="1px"
       textColor="white"
diff --git a/keep-ui/app/settings/webhook-settings.tsx b/keep-ui/app/settings/webhook-settings.tsx
index d0efdd034..47e20c673 100644
--- a/keep-ui/app/settings/webhook-settings.tsx
+++ b/keep-ui/app/settings/webhook-settings.tsx
@@ -20,6 +20,7 @@ import useSWR from "swr";
 import { getApiURL } from "utils/apiUrl";
 import { fetcher } from "utils/fetcher";
 import { toast } from "react-toastify";
+import { v4 as uuidv4 } from "uuid";
 
 interface Webhook {
   webhookApi: string;
@@ -53,6 +54,8 @@ export default function WebhookSettings({ accessToken, selectedTab }: Props) {
     {
       ...example,
       lastReceived: new Date().toISOString(),
+      id: uuidv4(),
+      fingerprint: uuidv4(),
     },
     null,
     2
diff --git a/keep-ui/utils/hooks/useAlerts.ts b/keep-ui/utils/hooks/useAlerts.ts
index 3c0c469d5..108f049c8 100644
--- a/keep-ui/utils/hooks/useAlerts.ts
+++ b/keep-ui/utils/hooks/useAlerts.ts
@@ -35,7 +35,7 @@ const getFormatAndMergePusherWithEndpointAlerts = (
     }
 
     return newAlertsMap;
-  }, alertsMap);
+  }, new Map(alertsMap));
 
 export const getDefaultSubscriptionObj = (
   isAsyncLoading: boolean = false,
@@ -101,7 +101,7 @@ export const useAlerts = () => {
       alertSubscription;
 
     useEffect(() => {
-      const alertsMap = new Map<string, AlertDto>(
+      const newAlertsMap = new Map<string, AlertDto>(
         alertsFromEndpoint.map((alertFromEndpoint) => [
           alertFromEndpoint.fingerprint,
           {
@@ -113,7 +113,7 @@ export const useAlerts = () => {
         ])
       );
 
-      setAlertsMap(alertsMap);
+      setAlertsMap(newAlertsMap);
     }, [alertsFromEndpoint]);
 
     useEffect(() => {
@@ -133,7 +133,7 @@ export const useAlerts = () => {
     }, [alertsFromPusher]);
 
     return {
-      data: [...alertsMap.values()],
+      data: Array.from(alertsMap.values()),
       ...restOfAlertSubscription,
       ...restOfAllAlerts,
     };