Add code editor to the MCP dialog

Author: kshmidt-digma

package-lock.json

@@ -118,12 +118,14 @@
     "zip-webpack-plugin": "^4.0.2"
   },
   "dependencies": {
+    "@codemirror/lang-json": "^6.0.2",
     "@floating-ui/react": "^0.25.1",
     "@formkit/auto-animate": "^0.8.2",
     "@microsoft/fetch-event-source": "^2.0.1",
     "@react-oauth/google": "^0.12.1",
     "@reduxjs/toolkit": "^2.5.0",
     "@tanstack/react-table": "^8.7.8",
+    "@uiw/react-codemirror": "^4.23.14",
     "@xyflow/react": "^12.6.4",
     "allotment": "^1.19.0",
     "axios": "^1.8.4",

package.json

@@ -1,5 +1,10 @@
-import { type ChangeEvent } from "react";
+import { json } from "@codemirror/lang-json";
+import { oneDark } from "@codemirror/theme-one-dark";
+import { EditorView } from "@codemirror/view";
+import CodeMirror from "@uiw/react-codemirror";
+import { useTheme } from "styled-components";
 import { sendUserActionTrackingEvent } from "../../../../../utils/actions/sendUserActionTrackingEvent";
+import { getCodeFontFamilyRulesValue } from "../../../../common/App/styles";
 import { NewButton } from "../../../../common/v3/NewButton";
 import { trackingEvents } from "../../../tracking";
 import { Footer } from "../Footer";
@@ -25,9 +30,21 @@ export const ServerStep = ({
   isLoading,
   error
 }: ServerStepProps) => {
-  const handleTextAreaChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
-    onConnectionSettingsChange(e.target.value);
-  };
+  const theme = useTheme();
+
+  const codeMirrorTheme = EditorView.theme({
+    "&": {
+      padding: "24px",
+      borderRadius: "8px",
+      fontFamily: getCodeFontFamilyRulesValue(theme.codeFont),
+      fontSize: "14px",
+      fontWeight: "500",
+      backgroundColor: "#000 !important"
+    },
+    ".cm-scroller": {
+      overflow: "auto"
+    }
+  });
 
   const handleConnectButtonClick = () => {
     sendUserActionTrackingEvent(
@@ -41,10 +58,26 @@ export const ServerStep = ({
 
   return (
     <s.Container>
-      <s.TextArea
+      <CodeMirror
         value={connectionSettings}
+        onChange={onConnectionSettingsChange}
+        extensions={[codeMirrorTheme, EditorView.lineWrapping, json()]}
         placeholder={placeholderText}
-        onChange={handleTextAreaChange}
+        theme={oneDark}
+        height={"343px"}
+        basicSetup={{
+          lineNumbers: false,
+          foldGutter: false,
+          allowMultipleSelections: false,
+          rectangularSelection: false,
+          highlightActiveLine: false,
+          highlightSelectionMatches: false,
+          closeBracketsKeymap: false,
+          searchKeymap: false,
+          foldKeymap: false,
+          completionKeymap: false,
+          lintKeymap: false
+        }}
       />
       <Footer
         isLoading={isLoading}

src/components/Agentic/IncidentTemplate/MCPServerDialog/ServerStep/index.tsx

@@ -145,7 +145,7 @@ export const Sidebar = () => {
         <s.IncidentsList>
           {incidents.map((incident) => (
             <s.IncidentItem
-              key={incident.name}
+              key={incident.id}
               $isSelected={incident.id === incidentId}
               $isActive={isIncidentActive(incident)}
               onClick={handleIncidentListItemClick(incident.id)}