Fix instructions display on MCP server edit

Author: kshmidt-digma

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

@@ -13,21 +13,25 @@ export const ToolsStep = ({
   tools,
   selectedTools: initialSelectedTools = [],
   isLoading,
+  instructions = "",
   error
 }: ToolsStepProps) => {
-  const [textAreaValue, setTextAreaValue] = useState("");
+  const [instructionsTextAreaValue, setInstructionsTextAreaValue] =
+    useState(instructions);
   const [selectedTools, setSelectedTools] = useState(initialSelectedTools);
   const [searchInputValue, setSearchInputValue] = useState("");
 
-  const handleTextAreaChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
-    setTextAreaValue(e.target.value);
+  const handleInstructionsTextAreaChange = (
+    e: ChangeEvent<HTMLTextAreaElement>
+  ) => {
+    setInstructionsTextAreaValue(e.target.value);
   };
 
   const handleSaveButtonClick = () => {
     sendUserActionTrackingEvent(
       trackingEvents.INCIDENT_TEMPLATE_EDIT_MCP_DIALOG_SAVE_BUTTON_CLICKED
     );
-    onSave(selectedTools, textAreaValue);
+    onSave(selectedTools, instructionsTextAreaValue);
   };
 
   const handleCancelButtonClick = () => {
@@ -95,9 +99,9 @@ export const ToolsStep = ({
           </s.ToolsList>
         )}
       </s.ToolsEditor>
-      <s.TextArea
-        value={textAreaValue}
-        onChange={handleTextAreaChange}
+      <s.InstructionsTextArea
+        value={instructionsTextAreaValue}
+        onChange={handleInstructionsTextAreaChange}
         placeholder={
           "Describe any specific instructions on how this MCP should be used"
         }

src/components/Agentic/IncidentTemplate/MCPServerDialog/ToolsStep/styles.ts

@@ -91,7 +91,7 @@ export const ToolTag = styled.div<ToolTagProps>`
   user-select: none;
 `;
 
-export const TextArea = styled.textarea`
+export const InstructionsTextArea = styled.textarea`
   ${({ theme }) => getCodeFont(theme.codeFont)}
   display: flex;
   flex-grow: 1;

src/components/Agentic/IncidentTemplate/MCPServerDialog/ToolsStep/types.ts

@@ -3,6 +3,7 @@ export interface ToolsStepProps {
   onSave: (tools: string[], instructions: string) => void;
   tools: string[];
   selectedTools?: string[];
+  instructions?: string;
   isLoading?: boolean;
   error?: string;
 }

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

@@ -140,6 +140,7 @@ export const MCPServerDialog = ({
       onSave={handleToolsStepSave}
       tools={tools}
       selectedTools={serverData?.selected_tools}
+      instructions={serverData?.instructions_prompt}
       isLoading={
         addMCPServerResult.isLoading || updateMCPServerResult.isLoading
       }