fix: simplify presets updates (#2819)

keep-ui/app/(keep)/alerts/alert-actions.tsx

@@ -3,13 +3,14 @@ import { Button } from "@tremor/react";
 import { AlertDto } from "./models";
 import { PlusIcon, RocketIcon } from "@radix-ui/react-icons";
 import { toast } from "react-toastify";
-import { usePresets } from "utils/hooks/usePresets";
 import { useRouter } from "next/navigation";
 import { SilencedDoorbellNotification } from "@/components/icons";
 import AlertAssociateIncidentModal from "./alert-associate-incident-modal";
 import CreateIncidentWithAIModal from "./alert-create-incident-ai-modal";
 import { useApi } from "@/shared/lib/hooks/useApi";
 
+import { useRevalidateMultiple } from "@/shared/lib/state-utils";
+
 interface Props {
   selectedRowIds: string[];
   alerts: AlertDto[];
@@ -30,11 +31,9 @@ export default function AlertActions({
   isIncidentSelectorOpen,
 }: Props) {
   const router = useRouter();
-  const { useAllPresets } = usePresets();
   const api = useApi();
-  const { mutate: presetsMutator } = useAllPresets({
-    revalidateOnFocus: false,
-  });
+  const revalidateMultiple = useRevalidateMultiple();
+  const presetsMutator = () => revalidateMultiple(["/preset"]);
 
   const [isCreateIncidentWithAIOpen, setIsCreateIncidentWithAIOpen] =
     useState<boolean>(false);

keep-ui/app/(keep)/alerts/alert-change-status-modal.tsx

@@ -16,11 +16,12 @@ import {
   XCircleIcon,
   QuestionMarkCircleIcon,
 } from "@heroicons/react/24/outline";
-import { usePresets } from "utils/hooks/usePresets";
 import { useAlerts } from "utils/hooks/useAlerts";
 import { useApi } from "@/shared/lib/hooks/useApi";
 import { showErrorToast } from "@/shared/ui/utils/showErrorToast";
 
+import { useRevalidateMultiple } from "@/shared/lib/state-utils";
+
 const statusIcons = {
   [Status.Firing]: <ExclamationCircleIcon className="w-4 h-4 mr-2" />,
   [Status.Resolved]: <CheckCircleIcon className="w-4 h-4 mr-2" />,
@@ -76,8 +77,8 @@ export default function AlertChangeStatusModal({
 }: Props) {
   const api = useApi();
   const [selectedStatus, setSelectedStatus] = useState<Status | null>(null);
-  const { useAllPresets } = usePresets();
-  const { mutate: presetsMutator } = useAllPresets();
+  const revalidateMultiple = useRevalidateMultiple();
+  const presetsMutator = () => revalidateMultiple(["/preset"]);
   const { useAllAlerts } = useAlerts();
   const { mutate: alertsMutator } = useAllAlerts(presetName, {
     revalidateOnMount: false,

keep-ui/app/(keep)/alerts/alert-dismiss-modal.tsx

@@ -16,7 +16,6 @@ import "react-datepicker/dist/react-datepicker.css";
 import "react-quill/dist/quill.snow.css";
 import { AlertDto } from "./models";
 import { set, isSameDay, isAfter } from "date-fns";
-import { usePresets } from "utils/hooks/usePresets";
 import { useAlerts } from "utils/hooks/useAlerts";
 import { toast } from "react-toastify";
 const ReactQuill =
@@ -25,6 +24,8 @@ import "./alert-dismiss-modal.css";
 import { useApi } from "@/shared/lib/hooks/useApi";
 import { showErrorToast } from "@/shared/ui/utils/showErrorToast";
 
+import { useRevalidateMultiple } from "@/shared/lib/state-utils";
+
 interface Props {
   preset: string;
   alert: AlertDto[] | null | undefined;
@@ -41,8 +42,8 @@ export default function AlertDismissModal({
   const [selectedDateTime, setSelectedDateTime] = useState<Date | null>(null);
   const [showError, setShowError] = useState<boolean>(false);
 
-  const { useAllPresets } = usePresets();
-  const { mutate: presetsMutator } = useAllPresets();
+  const revalidateMultiple = useRevalidateMultiple();
+  const presetsMutator = () => revalidateMultiple(["/preset"]);
   const { usePresetAlerts } = useAlerts();
   const { mutate: alertsMutator } = usePresetAlerts(presetName, {
     revalidateOnMount: false,

keep-ui/app/(keep)/alerts/alert-preset-manager.tsx

@@ -0,0 +1,96 @@
+import React, { useMemo, useState } from "react";
+import { AlertDto } from "./models";
+import Modal from "@/components/ui/Modal";
+import { useRouter } from "next/navigation";
+import { Table } from "@tanstack/react-table";
+import { AlertsRulesBuilder } from "./alerts-rules-builder";
+import { CreateOrUpdatePresetForm } from "@/features/create-or-update-preset";
+import { STATIC_PRESETS_NAMES } from "@/entities/presets/model/constants";
+import { Preset } from "@/entities/presets/model/types";
+import { usePresets } from "@/entities/presets/model/usePresets";
+import { CopilotKit } from "@copilotkit/react-core";
+
+interface Props {
+  presetName: string;
+  // TODO: pass specific functions not the whole table?
+  table: Table<AlertDto>;
+}
+
+export function AlertPresetManager({ presetName, table }: Props) {
+  const { dynamicPresets } = usePresets({
+    revalidateOnFocus: false,
+  });
+  // TODO: make a hook for this? store in the context?
+  const selectedPreset = useMemo(() => {
+    return dynamicPresets?.find(
+      (p) =>
+        p.name.toLowerCase() === decodeURIComponent(presetName).toLowerCase()
+    ) as Preset | undefined;
+  }, [dynamicPresets, presetName]);
+  const [presetCEL, setPresetCEL] = useState("");
+
+  // modal
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const router = useRouter();
+
+  const onCreateOrUpdatePreset = (preset: Preset) => {
+    setIsModalOpen(false);
+    const encodedPresetName = encodeURIComponent(preset.name.toLowerCase());
+    router.push(`/alerts/${encodedPresetName}`);
+  };
+
+  const handleModalClose = () => {
+    setIsModalOpen(false);
+  };
+
+  const isDynamic =
+    selectedPreset && !STATIC_PRESETS_NAMES.includes(selectedPreset.name);
+
+  // Static presets are not editable
+  const idToUpdate = isDynamic ? selectedPreset.id : null;
+
+  const presetData = isDynamic
+    ? {
+        CEL: presetCEL,
+        name: selectedPreset.name,
+        isPrivate: selectedPreset.is_private,
+        isNoisy: selectedPreset.is_noisy,
+        tags: selectedPreset.tags,
+      }
+    : {
+        CEL: presetCEL,
+        name: undefined,
+        isPrivate: undefined,
+        isNoisy: undefined,
+        tags: undefined,
+      };
+
+  return (
+    <>
+      <div className="flex w-full items-start relative z-10">
+        <AlertsRulesBuilder
+          table={table}
+          defaultQuery=""
+          selectedPreset={selectedPreset}
+          setIsModalOpen={setIsModalOpen}
+          setPresetCEL={setPresetCEL}
+        />
+      </div>
+      <Modal
+        isOpen={isModalOpen}
+        onClose={handleModalClose}
+        className="w-[40%] max-w-screen-2xl max-h-[710px] transform overflow-auto ring-tremor bg-white p-6 text-left align-middle shadow-tremor transition-all rounded-xl"
+      >
+        <CopilotKit runtimeUrl="/api/copilotkit">
+          <CreateOrUpdatePresetForm
+            key={idToUpdate}
+            presetId={idToUpdate}
+            presetData={presetData}
+            onCreateOrUpdate={onCreateOrUpdatePreset}
+            onCancel={handleModalClose}
+          />
+        </CopilotKit>
+      </Modal>
+    </>
+  );
+}