fix: create application button on empty screen, selecting service in …

…edit form

keep-ui/app/topology/ui/TopologySearchAutocomplete.tsx

@@ -13,32 +13,31 @@ import {
   Option,
 } from "@/components/ui/AutocompleteInput";
 
-type TopologySearchAutocompleteWithApplicationsProps = Omit<
-  AutocompleteInputProps<TopologyServiceMinimal | TopologyApplicationMinimal>,
-  "options" | "getId"
-> & {
-  includeApplications: true;
+type BaseProps = {
+  excludeServiceIds?: string[];
   providerId?: string;
   service?: string;
   environment?: string;
 };
 
-type TopologySearchAutocompleteWithoutApplicationsProps = Omit<
-  AutocompleteInputProps<TopologyServiceMinimal>,
-  "options" | "getId"
-> & {
-  includeApplications: false;
-  providerId?: string;
-  service?: string;
-  environment?: string;
-};
+type WithApplications = BaseProps &
+  Omit<
+    AutocompleteInputProps<TopologyServiceMinimal | TopologyApplicationMinimal>,
+    "options" | "getId"
+  > & {
+    includeApplications: true;
+  };
+
+type WithoutApplications = BaseProps &
+  Omit<AutocompleteInputProps<TopologyServiceMinimal>, "options" | "getId"> & {
+    includeApplications: false;
+  };
 
-type TopologySearchAutocompleteProps =
-  | TopologySearchAutocompleteWithApplicationsProps
-  | TopologySearchAutocompleteWithoutApplicationsProps;
+type TopologySearchAutocompleteProps = WithApplications | WithoutApplications;
 
 export function TopologySearchAutocomplete({
   includeApplications,
+  excludeServiceIds,
   providerId,
   service,
   environment,
@@ -48,31 +47,29 @@ export function TopologySearchAutocomplete({
   const { topologyData } = useTopology({ providerId, service, environment });
   const { applications } = useTopologyApplications();
   const searchOptions = useMemo(() => {
-    const options: {
-      label: string;
-      value: TopologyServiceMinimal | TopologyApplication;
-    }[] = [];
-    topologyData?.forEach((service) => {
-      options.push({
-        label: service.display_name,
-        value: {
-          id: service.id,
-          name: service.display_name,
-          service: service.service,
-        },
-      });
-    });
+    const serviceOptions =
+      topologyData
+        ?.filter(
+          (service) =>
+            service.service && !excludeServiceIds?.includes(service.service)
+        )
+        .map((service) => ({
+          label: service.display_name,
+          value: {
+            id: service.id,
+            name: service.display_name,
+            service: service.service,
+          },
+        })) || [];
     if (!includeApplications) {
-      return options;
+      return serviceOptions;
     }
-    applications.forEach((application) => {
-      options.push({
-        label: application.name,
-        value: application,
-      });
-    });
-    return options;
-  }, [topologyData, includeApplications, applications]);
+    const applicationOptions = applications.map((application) => ({
+      label: application.name,
+      value: application,
+    }));
+    return [...serviceOptions, ...applicationOptions];
+  }, [topologyData, includeApplications, applications, excludeServiceIds]);
 
   if (includeApplications) {
     return (
@@ -100,12 +97,13 @@ export function TopologySearchAutocomplete({
   return (
     <AutocompleteInput<TopologyServiceMinimal>
       icon={MagnifyingGlassIcon}
-      // TODO: Fix type
-      // @ts-ignore
-      options={searchOptions}
+      options={searchOptions as Option<TopologyServiceMinimal>[]}
       getId={(option) => {
         return option.value.service;
       }}
+      onSelect={(option) => {
+        onSelect(option as Option<TopologyServiceMinimal>);
+      }}
       {...props}
     />
   );

keep-ui/app/topology/ui/applications/application-modal.tsx

@@ -0,0 +1,55 @@
+import { CreateOrUpdateApplicationForm } from "@/app/topology/ui/applications/create-or-update-application-form";
+import Modal from "@/components/ui/Modal";
+import { TopologyApplication } from "@/app/topology/model";
+
+type BaseProps = {
+  isOpen: boolean;
+  onClose: () => void;
+};
+
+type ApplicationModalCreateProps = BaseProps & {
+  actionType: "create";
+  application?: Partial<TopologyApplication>;
+  onSubmit: (application: Omit<TopologyApplication, "id">) => Promise<void>;
+  onDelete?: undefined;
+};
+
+type ApplicationModalEditProps = BaseProps & {
+  actionType: "edit";
+  application: TopologyApplication;
+  onSubmit: (application: TopologyApplication) => Promise<void>;
+  onDelete: () => void;
+};
+
+export function ApplicationModal({
+  actionType,
+  isOpen,
+  application,
+  onDelete,
+  onClose,
+  onSubmit,
+}: ApplicationModalCreateProps | ApplicationModalEditProps) {
+  const title =
+    actionType === "create" ? "Create application" : "Edit application";
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} title={title}>
+      {actionType === "create" ? (
+        <CreateOrUpdateApplicationForm
+          action="create"
+          application={application}
+          onSubmit={onSubmit}
+          onCancel={onClose}
+        />
+      ) : (
+        <CreateOrUpdateApplicationForm
+          action={actionType}
+          application={application}
+          onSubmit={onSubmit}
+          onCancel={onClose}
+          onDelete={onDelete}
+        />
+      )}
+    </Modal>
+  );
+}