Add Incident template Edit dialog, improve styling (#1384)

* Add Incident template Edit dialog, improve styling

Author: kshmidt-digma

src/components/Admin/Environments/ActionsMenuButton/index.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { useAdminDispatch } from "../../../../containers/Admin/hooks";
-import { setEnvironmentToDelete } from "../../../../redux/slices/environmentsSlice";
+import { setEnvironmentToDelete } from "../../../../redux/slices/environmentsManagerSlice";
 import { TrashBinIcon } from "../../../common/icons/16px/TrashBinIcon";
 import { ThreeDotsVerticalIcon } from "../../../common/icons/ThreeDotsVerticalIcon";
 import { NewPopover } from "../../../common/NewPopover";

src/components/Admin/Environments/index.tsx

@@ -21,7 +21,7 @@ import type { Environment } from "../../../redux/services/types";
 import {
   setEnvironmentToDelete,
   setIsSidebarOpen
-} from "../../../redux/slices/environmentsSlice";
+} from "../../../redux/slices/environmentsManagerSlice";
 import { FeatureFlag } from "../../../types";
 import { sortEnvironments } from "../../common/IssuesReport/utils";
 import { Pagination } from "../../common/v3/Pagination";
@@ -38,7 +38,7 @@ export const Environments = () => {
   const containerRef = useRef<HTMLDivElement>(null);
   const { data: about } = useGetAboutQuery();
   const isCreateEnvironmentSidebarOpen = useAdminSelector(
-    (state) => state.environmentsSlice.isSidebarOpen
+    (state) => state.environmentsManager.isSidebarOpen
   );
 
   const dispatch = useAdminDispatch();
@@ -48,7 +48,7 @@ export const Environments = () => {
   );
   const [deleteEnvironment] = useDeleteEnvironmentMutation();
   const environmentToDelete = useAdminSelector(
-    (state) => state.environmentsSlice.environmentToDelete
+    (state) => state.environmentsManager.environmentToDelete
   );
   const { data: environments } = useGetEnvironmentsQuery();
 

src/components/Admin/Header/CreateEnvironmentButton/index.tsx

@@ -1,5 +1,5 @@
 import { useAdminDispatch } from "../../../../containers/Admin/hooks";
-import { setIsSidebarOpen } from "../../../../redux/slices/environmentsSlice";
+import { setIsSidebarOpen } from "../../../../redux/slices/environmentsManagerSlice";
 import { PlusIcon } from "../../../common/icons/16px/PlusIcon";
 import { NewIconButton } from "../../../common/v3/NewIconButton";
 import { Tooltip } from "../../../common/v3/Tooltip";

src/components/Admin/common/RepositorySidebarOverlay/RepositorySidebar/Issues/index.tsx

@@ -50,10 +50,10 @@ export const Issues = ({
   const drawerRef = useRef<HTMLDivElement>(null);
   const dispatch = useAdminDispatch();
   const insightInfoToOpenTicket = useAdminSelector(
-    (state) => state.repositorySlice.issues.insightInfoToOpenTicket
+    (state) => state.repository.issues.insightInfoToOpenTicket
   );
   const insightIdToOpenSuggestion = useAdminSelector(
-    (state) => state.repositorySlice.issues.insightIdToOpenSuggestion
+    (state) => state.repository.issues.insightIdToOpenSuggestion
   );
   const isInsightJiraTicketHintShown = useAdminSelector(
     (state) => state.persist.isInsightJiraTicketHintShown

src/components/Admin/common/RepositorySidebarOverlay/index.tsx

@@ -64,10 +64,10 @@ export const RepositorySidebarOverlay = ({
     sidebarQuery?.query?.scopedSpanCodeObjectId
   );
   const insightInfoToOpenTicket = useAdminSelector(
-    (state) => state.repositorySlice.issues.insightInfoToOpenTicket
+    (state) => state.repository.issues.insightInfoToOpenTicket
   );
   const insightIdToOpenSuggestion = useAdminSelector(
-    (state) => state.repositorySlice.issues.insightIdToOpenSuggestion
+    (state) => state.repository.issues.insightIdToOpenSuggestion
   );
   const { resetInsights, resetAssets, resetGlobalErrors } = useStore.getState();
   const dispatch = useAdminDispatch();

src/components/Agentic/IncidentDetails/AgentFlowChart/AgentFlowChartNodeToolbar/index.tsx

@@ -0,0 +1,61 @@
+import { Position } from "@xyflow/react";
+import { PlusIcon } from "../../../../common/icons/16px/PlusIcon";
+import { MCPServersSideContainer } from "../MCPServersSideContainer";
+import { MCPServersToolbar } from "../MCPServersToolbar";
+import * as s from "./styles";
+import type { AgentFlowChartNodeToolbarProps } from "./types";
+
+export const AgentFlowChartNodeToolbar = ({
+  servers,
+  position,
+  isEditMode,
+  onAddMCPServer,
+  onEditMCPServers,
+  showPlusButton
+}: AgentFlowChartNodeToolbarProps) => {
+  const handleAddMCPServer = () => {
+    onAddMCPServer(position);
+  };
+
+  const handleEditMCPServers = () => {
+    onEditMCPServers(position);
+  };
+
+  const toolbarItems = [
+    ...(servers.length > 0
+      ? [
+          <MCPServersToolbar
+            key={"mcp-servers-toolbar"}
+            servers={servers}
+            onAddMCPServer={handleAddMCPServer}
+            onEditMCPServers={handleEditMCPServers}
+          />
+        ]
+      : []),
+    ...(showPlusButton
+      ? [
+          <s.PlusButton
+            key={"add-mcp-server-button"}
+            buttonType={"secondaryBorderless"}
+            icon={PlusIcon}
+            onClick={handleAddMCPServer}
+          />
+        ]
+      : [])
+  ];
+
+  const sortedToolbarItems =
+    position === Position.Top ? toolbarItems.reverse() : toolbarItems;
+
+  return (
+    <>
+      {isEditMode ? (
+        [Position.Top, Position.Bottom].includes(position) && (
+          <s.NodeToolbarContainer>{sortedToolbarItems}</s.NodeToolbarContainer>
+        )
+      ) : (
+        <MCPServersSideContainer servers={servers} />
+      )}
+    </>
+  );
+};

src/components/Agentic/IncidentDetails/AgentFlowChart/AgentFlowChartNodeToolbar/styles.ts

@@ -0,0 +1,13 @@
+import styled from "styled-components";
+import { NewButton } from "../../../../common/v3/NewButton";
+
+export const PlusButton = styled(NewButton)`
+  padding: 5px;
+`;
+
+export const NodeToolbarContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 11px;
+`;

src/components/Agentic/IncidentDetails/AgentFlowChart/AgentFlowChartNodeToolbar/types.ts

@@ -0,0 +1,11 @@
+import type { Position } from "@xyflow/react";
+import type { ExtendedAgentMCPServer } from "../types";
+
+export interface AgentFlowChartNodeToolbarProps {
+  isEditMode?: boolean;
+  position: Position;
+  servers: ExtendedAgentMCPServer[];
+  onAddMCPServer: (position: Position) => void;
+  onEditMCPServers: (position: Position) => void;
+  showPlusButton?: boolean;
+}

src/components/Agentic/IncidentDetails/AgentFlowChart/MCPServerBlock/types.ts

@@ -1,18 +1,17 @@
-import { useViewport } from "@xyflow/react";
 import { DigmaLogoThemeableIcon } from "../../../../common/icons/24px/DigmaLogoThemeableIcon";
 import { MCPLogoIcon } from "../../../../common/icons/24px/MCPLogoIcon";
 import { KubernetesLogoIcon } from "../../../../common/icons/25px/KubernetesLogoIcon";
 import { PostgresLogoIcon } from "../../../../common/icons/25px/PostgresLogoIcon";
 import { GitHubLogoIcon } from "../../../../common/icons/28px/GitHubLogoIcon";
-import * as s from "./styles";
-import type { MCPServerBlockProps, MCPServerIconProps } from "./types";
+import type { MCPServerIconProps } from "./types";
 
-export const MCPServerIcon = ({ type, isActive }: MCPServerIconProps) => {
-  const DEFAULT_SIZE = 27; // in pixels
-  const viewport = useViewport();
-
-  const size = viewport.zoom * DEFAULT_SIZE;
+export const DEFAULT_SIZE = 12; // in pixels
 
+export const MCPServerIcon = ({
+  type,
+  isActive,
+  size = DEFAULT_SIZE
+}: MCPServerIconProps) => {
   switch (type) {
     case "github":
       return <GitHubLogoIcon size={size} color={"currentColor"} />;
@@ -34,13 +33,3 @@ export const MCPServerIcon = ({ type, isActive }: MCPServerIconProps) => {
       return null;
   }
 };
-
-export const MCPServerBlock = ({ type, isActive }: MCPServerBlockProps) => {
-  const viewport = useViewport();
-
-  return (
-    <s.MCPServerBlock $isActive={isActive} $zoomLevel={viewport.zoom}>
-      <MCPServerIcon type={type} isActive={isActive} />
-    </s.MCPServerBlock>
-  );
-};