From 034dfc005f93e7eee916b21c89584cc99961e22c Mon Sep 17 00:00:00 2001
From: Kirill Chernakov <yakiryous@gmail.com>
Date: Sat, 28 Sep 2024 22:02:04 +0400
Subject: [PATCH] hotfix: types

---
 .../ui/TopologySearchAutocomplete.tsx         | 88 +++++++++++++------
 .../ui/applications/applications-list.tsx     |  3 +-
 keep-ui/components/ui/AutocompleteInput.tsx   |  2 +-
 3 files changed, 63 insertions(+), 30 deletions(-)

diff --git a/keep-ui/app/topology/ui/TopologySearchAutocomplete.tsx b/keep-ui/app/topology/ui/TopologySearchAutocomplete.tsx
index 8ddc80de9..0e0527f52 100644
--- a/keep-ui/app/topology/ui/TopologySearchAutocomplete.tsx
+++ b/keep-ui/app/topology/ui/TopologySearchAutocomplete.tsx
@@ -3,37 +3,49 @@ import { useTopology } from "utils/hooks/useTopology";
 import { useTopologyApplications } from "utils/hooks/useApplications";
 import { AutocompleteInput } from "@/components/ui";
 import { MagnifyingGlassIcon } from "@heroicons/react/24/solid";
-import { AutocompleteInputProps } from "@/components/ui/AutocompleteInput";
-import { TopologyServiceMinimal, TopologyApplication } from "../models";
+import {
+  AutocompleteInputProps,
+  Option,
+} from "@/components/ui/AutocompleteInput";
+import {
+  TopologyServiceMinimal,
+  TopologyApplication,
+  TopologyApplicationMinimal,
+} from "../models";
+
+type TopologySearchAutocompleteWithApplicationsProps = Omit<
+  AutocompleteInputProps<TopologyServiceMinimal | TopologyApplicationMinimal>,
+  "options" | "getId"
+> & {
+  includeApplications: true;
+  providerId?: string;
+  service?: string;
+  environment?: string;
+};
+
+type TopologySearchAutocompleteWithoutApplicationsProps = Omit<
+  AutocompleteInputProps<TopologyServiceMinimal>,
+  "options" | "getId"
+> & {
+  includeApplications: false;
+  providerId?: string;
+  service?: string;
+  environment?: string;
+};
 
 type TopologySearchAutocompleteProps =
-  | (Omit<
-      AutocompleteInputProps<TopologyServiceMinimal | TopologyApplication>,
-      "options" | "getId"
-    > & {
-      includeApplications: true;
-      providerId?: string;
-      service?: string;
-      environment?: string;
-    })
-  | ({
-      includeApplications: false;
-      providerId?: string;
-      service?: string;
-      environment?: string;
-    } & Omit<
-      AutocompleteInputProps<TopologyServiceMinimal>,
-      "options" | "getId"
-    >);
+  | TopologySearchAutocompleteWithApplicationsProps
+  | TopologySearchAutocompleteWithoutApplicationsProps;
 
 export function TopologySearchAutocomplete({
-  includeApplications = true,
+  includeApplications,
   providerId,
   service,
   environment,
+  onSelect,
   ...props
 }: Omit<TopologySearchAutocompleteProps, "options">) {
-  const { topologyData } = useTopology(providerId, service, environment);
+  const { topologyData } = useTopology({ providerId, service, environment });
   const { applications } = useTopologyApplications();
   const searchOptions = useMemo(() => {
     const options: {
@@ -62,15 +74,37 @@ export function TopologySearchAutocomplete({
     return options;
   }, [topologyData, includeApplications, applications]);
 
+  if (includeApplications) {
+    return (
+      <AutocompleteInput<TopologyServiceMinimal | TopologyApplication>
+        icon={MagnifyingGlassIcon}
+        options={searchOptions}
+        getId={(option) => {
+          return option.value.id.toString();
+        }}
+        onSelect={(option) => {
+          // Type guard to check if the option is a TopologyServiceMinimal
+          if ("service" in option.value) {
+            onSelect(option as Option<TopologyServiceMinimal>);
+          } else {
+            // TODO: Fix type
+            // @ts-ignore
+            onSelect(option as Option<TopologyApplicationMinimal>);
+          }
+        }}
+        {...props}
+      />
+    );
+  }
+
   return (
-    <AutocompleteInput<TopologyServiceMinimal | TopologyApplication>
+    <AutocompleteInput<TopologyServiceMinimal>
       icon={MagnifyingGlassIcon}
+      // TODO: Fix type
+      // @ts-ignore
       options={searchOptions}
       getId={(option) => {
-        if ("service" in option.value) {
-          return option.value.service;
-        }
-        return option.value.id;
+        return option.value.service;
       }}
       {...props}
     />
diff --git a/keep-ui/app/topology/ui/applications/applications-list.tsx b/keep-ui/app/topology/ui/applications/applications-list.tsx
index 2f92e8ee4..d5a110ac0 100644
--- a/keep-ui/app/topology/ui/applications/applications-list.tsx
+++ b/keep-ui/app/topology/ui/applications/applications-list.tsx
@@ -14,9 +14,8 @@ import { ServiceSearchContext } from "../../service-search-context";
 export function ApplicationsList({
   applications: initialApplications,
 }: {
-  applications: TopologyApplication[];
+  applications?: TopologyApplication[];
 }) {
-  console.log("rendering ApplicationsList");
   const { applications, addApplication, removeApplication, updateApplication } =
     useTopologyApplications({
       initialData: initialApplications,
diff --git a/keep-ui/components/ui/AutocompleteInput.tsx b/keep-ui/components/ui/AutocompleteInput.tsx
index 73da2dfef..35dc2c3d8 100644
--- a/keep-ui/components/ui/AutocompleteInput.tsx
+++ b/keep-ui/components/ui/AutocompleteInput.tsx
@@ -2,7 +2,7 @@ import React, { useState, useEffect, useRef } from "react";
 import { TextInput } from "./TextInput";
 import { cn } from "utils/helpers";
 
-type Option<T> = {
+export type Option<T> = {
   label: string;
   value: T;
 };