fixed pr comments

frontend/webapp/app/overview/destinations/create/[id]/page.tsx

@@ -20,7 +20,11 @@ const NewDestinationContainer = styled.div`
 
 export default function NewDestinationFlow() {
   const { sectionData, setSectionData } = useSectionData(null);
+  const { show, Notification } = useNotification();
+  const { mutate } = useMutation((body) => setDestination(body));
   const searchParams = useSearchParams();
+  const router = useRouter();
+
   const { data: destinationType } = useQuery(
     [QUERIES.API_DESTINATION_TYPE, sectionData?.type],
     () => getDestination(sectionData?.type),
@@ -29,25 +33,29 @@ export default function NewDestinationFlow() {
     }
   );
 
-  const { isLoading, data } = useQuery(
+  const { data: destinationsList } = useQuery(
     [QUERIES.API_DESTINATION_TYPES],
     getDestinationsTypes
   );
-  const { show, Notification } = useNotification();
-  const { mutate } = useMutation((body) => setDestination(body));
-  const router = useRouter();
 
-  useEffect(onPageLoad, [data]);
+  useEffect(onPageLoad, [destinationsList]);
 
   function onPageLoad() {
     const search = searchParams.get(DEST);
+    if (!destinationsList || !search) return;
+
     let currentData = null;
-    data?.categories.forEach((item) => {
-      const filterItem = item.items.filter((dest) => dest?.type === search);
+
+    for (const category of destinationsList.categories) {
+      if (currentData) {
+        break;
+      }
+      const filterItem = category.items.filter(({ type }) => type === search);
       if (filterItem.length) {
         currentData = filterItem[0];
       }
-    });
+    }
+
     setSectionData(currentData);
   }
 
@@ -82,10 +90,6 @@ export default function NewDestinationFlow() {
     router.back();
   }
 
-  if (isLoading) {
-    return;
-  }
-
   return (
     <>
       <OverviewHeader

frontend/webapp/app/overview/destinations/create/page.tsx

@@ -1,11 +1,7 @@
 "use client";
 import React from "react";
-import { NewDestinationFlow } from "@/containers/overview/destination/new.destination.flow";
+import { NewDestinationFlow } from "@/containers/overview";
 
 export default function CreateDestinationPage() {
-  return (
-    <>
-      <NewDestinationFlow />
-    </>
-  );
+  return <NewDestinationFlow />;
 }

frontend/webapp/app/overview/destinations/manage/page.tsx

@@ -6,6 +6,7 @@ import { useSearchParams } from "next/navigation";
 import UpdateDestinationFlow from "@/containers/overview/destination/update.destination.flow";
 import { getDestinations } from "@/services";
 import { useQuery } from "react-query";
+import { KeyvalLoader } from "@/design.system";
 
 const DEST = "dest";
 
@@ -50,7 +51,7 @@ export default function ManageDestinationPage() {
   }
 
   if (destinationLoading || !selectedDestination) {
-    return;
+    return <KeyvalLoader />;
   }
 
   return (

frontend/webapp/components/side.menu/menu/menu.tsx

@@ -36,9 +36,8 @@ export function Menu() {
   }
 
   function handleMenuItemClick(item) {
-    if (!item) return;
     setCurrentMenuItem(item);
-    router?.push(item?.navigate);
+    router.push(item?.navigate);
   }
 
   function renderMenuItemsList() {

frontend/webapp/containers/overview/index.tsx

@@ -1,3 +1,4 @@
 export { OverviewContainer } from "./overview/overview";
 export { DestinationContainer } from "./destination/destination";
 export { SourcesContainer } from "./sources/sources";
+export { NewDestinationFlow } from "./destination/new.destination.flow";

frontend/webapp/design.system/notification/notification.tsx

@@ -7,7 +7,7 @@ import { KeyvalText } from "../text/text";
 import CloseIcon from "@/assets/icons/X-blue.svg";
 import SuccessIcon from "@/assets/icons/success-notification.svg";
 import ErrorIcon from "@/assets/icons/error-notification.svg";
-import PortalNotification from "./portal.notification";
+
 interface KeyvalNotificationProps {
   type: "success" | "error" | "warning" | "info";
   message: string;
@@ -48,16 +48,14 @@ export function KeyvalNotification({
   }
 
   return (
-    <PortalNotification wrapperId="notification-portal">
-      <NotificationContainer>
-        <StyledNotification style={getNotificationStyle()}>
-          {getIcon()}
-          <KeyvalText weight={500} size={14}>
-            {message}
-          </KeyvalText>
-          <CloseIcon onClick={onClose} />
-        </StyledNotification>
-      </NotificationContainer>
-    </PortalNotification>
+    <NotificationContainer>
+      <StyledNotification style={getNotificationStyle()}>
+        {getIcon()}
+        <KeyvalText weight={500} size={14}>
+          {message}
+        </KeyvalText>
+        <CloseIcon onClick={onClose} />
+      </StyledNotification>
+    </NotificationContainer>
   );
 }