(null);
diff --git a/keep-ui/app/incidents/[id]/incident-overview.tsx b/keep-ui/app/incidents/[id]/incident-overview.tsx
index 9d8f88da1..f91f2ef90 100644
--- a/keep-ui/app/incidents/[id]/incident-overview.tsx
+++ b/keep-ui/app/incidents/[id]/incident-overview.tsx
@@ -4,7 +4,6 @@ import type { IncidentDto } from "@/entities/incidents/model";
import React from "react";
import { useIncident } from "@/utils/hooks/useIncidents";
import { Disclosure } from "@headlessui/react";
-import classNames from "classnames";
import { IoChevronDown } from "react-icons/io5";
import remarkRehype from "remark-rehype";
import rehypeRaw from "rehype-raw";
@@ -19,6 +18,7 @@ import {
FollowingIncidents,
} from "@/features/same-incidents-in-the-past/";
import { StatusIcon } from "@/entities/incidents/ui/statuses";
+import clsx from "clsx";
interface Props {
incident: IncidentDto;
@@ -43,13 +43,13 @@ function Summary({
if (collapsable) {
return (
-
+
{({ open }) => (
{title}
)}
diff --git a/keep-ui/app/workflows/builder/ToolBox.tsx b/keep-ui/app/workflows/builder/ToolBox.tsx
index eb9993bc5..341d248a0 100644
--- a/keep-ui/app/workflows/builder/ToolBox.tsx
+++ b/keep-ui/app/workflows/builder/ToolBox.tsx
@@ -1,5 +1,4 @@
import React, { useState, useEffect, useMemo } from "react";
-import classNames from "classnames";
import { Disclosure } from "@headlessui/react";
import { Subtitle } from "@tremor/react";
import { IoChevronUp, IoClose } from "react-icons/io5";
@@ -8,10 +7,16 @@ import { IoIosArrowDown } from "react-icons/io";
import useStore, { V2Step } from "./builder-store";
import { FaHandPointer } from "react-icons/fa";
import { PiDiamondsFourFill } from "react-icons/pi";
-
-const GroupedMenu = ({ name, steps, searchTerm, isDraggable = true }: {
- name: string,
- steps: any[],
+import clsx from "clsx";
+
+const GroupedMenu = ({
+ name,
+ steps,
+ searchTerm,
+ isDraggable = true,
+}: {
+ name: string;
+ steps: any[];
searchTerm: string;
isDraggable?: boolean;
}) => {
@@ -28,8 +33,12 @@ const GroupedMenu = ({ name, steps, searchTerm, isDraggable = true }: {
if (isDraggable) {
return;
}
- addNodeBetween(selectedNode || selectedEdge, step, selectedNode ? 'node' : 'edge');
- }
+ addNodeBetween(
+ selectedNode || selectedEdge,
+ step,
+ selectedNode ? "node" : "edge"
+ );
+ };
function IconUrlProvider(data: any) {
const { type } = data || {};
@@ -41,18 +50,20 @@ const GroupedMenu = ({ name, steps, searchTerm, isDraggable = true }: {
?.replace("condition-", "")}-icon.png`;
}
-
function getTriggerIcon(step: any) {
const { type } = step;
switch (type) {
case "manual":
- return
+ return ;
case "interval":
- return
+ return ;
}
}
- const handleDragStart = (event: React.DragEvent, step: any) => {
+ const handleDragStart = (
+ event: React.DragEvent,
+ step: any
+ ) => {
if (!isDraggable) {
event.stopPropagation();
event.preventDefault();
@@ -70,10 +81,7 @@ const GroupedMenu = ({ name, steps, searchTerm, isDraggable = true }: {
{name}
{(open || !isDraggable) && (
@@ -92,13 +100,15 @@ const GroupedMenu = ({ name, steps, searchTerm, isDraggable = true }: {
onClick={(e) => handleAddNode(e, step)}
>
{getTriggerIcon(step)}
- {!!step && !['interval', 'manual'].includes(step.type) && }
+ {!!step && !["interval", "manual"].includes(step.type) && (
+
+ )}
{step.name}
))}
@@ -110,39 +120,48 @@ const GroupedMenu = ({ name, steps, searchTerm, isDraggable = true }: {
);
};
-const DragAndDropSidebar = ({ isDraggable }: {
- isDraggable?: boolean;
-}) => {
+const DragAndDropSidebar = ({ isDraggable }: { isDraggable?: boolean }) => {
const [searchTerm, setSearchTerm] = useState("");
const [isVisible, setIsVisible] = useState(false);
const [open, setOpen] = useState(false);
- const { toolboxConfiguration, selectedNode, selectedEdge, nodes } = useStore();
+ const { toolboxConfiguration, selectedNode, selectedEdge, nodes } =
+ useStore();
useEffect(() => {
-
setOpen(
- !!selectedNode && selectedNode.includes('empty') ||
- !!selectedEdge
- )
- setIsVisible(!isDraggable)
+ (!!selectedNode && selectedNode.includes("empty")) || !!selectedEdge
+ );
+ setIsVisible(!isDraggable);
}, [selectedNode, selectedEdge, isDraggable]);
- const triggerNodeMap = nodes.filter((node: any) => ['interval', 'manual', 'alert', 'incident'].includes(node?.id)).reduce((obj: any, node: any) => {
- obj[node.id] = true;
- return obj;
- }, {} as Record);
-
+ const triggerNodeMap = nodes
+ .filter((node: any) =>
+ ["interval", "manual", "alert", "incident"].includes(node?.id)
+ )
+ .reduce(
+ (obj: any, node: any) => {
+ obj[node.id] = true;
+ return obj;
+ },
+ {} as Record
+ );
const filteredGroups = useMemo(() => {
- return toolboxConfiguration?.groups?.map((group: any) => ({
- ...group,
- steps: group?.steps?.filter((step: any) =>
- step?.name?.toLowerCase().includes(searchTerm?.toLowerCase()) && !triggerNodeMap[step?.id]
- ),
- })) || [];
+ return (
+ toolboxConfiguration?.groups?.map((group: any) => ({
+ ...group,
+ steps: group?.steps?.filter(
+ (step: any) =>
+ step?.name?.toLowerCase().includes(searchTerm?.toLowerCase()) &&
+ !triggerNodeMap[step?.id]
+ ),
+ })) || []
+ );
}, [toolboxConfiguration, searchTerm, nodes?.length]);
- const checkForSearchResults = searchTerm && !!filteredGroups?.find((group: any) => group?.steps?.length > 0);
+ const checkForSearchResults =
+ searchTerm &&
+ !!filteredGroups?.find((group: any) => group?.steps?.length > 0);
if (!open) {
return null;
@@ -150,8 +169,8 @@ const DragAndDropSidebar = ({ isDraggable }: {
return (
{/* Sticky header */}
@@ -167,30 +186,38 @@ const DragAndDropSidebar = ({ isDraggable }: {
/>
{/* Scrollable list */}
- {(isVisible || checkForSearchResults) &&
- {filteredGroups.length > 0 &&
- filteredGroups.map((group: Record) => (
-
- ))}
-
}
+ {(isVisible || checkForSearchResults) && (
+
+ {filteredGroups.length > 0 &&
+ filteredGroups.map((group: Record) => (
+
+ ))}
+
+ )}