feat(feature-flag): implement editing with custom server form (#821)

* feat(feature-flag): add editing

* feat(editing): adjust utilities

* feat(editing): implement update with custom server form

* refactor: revert normalization and adjust how to load formdata for editing

Author: samuv

main/src/feature-flags.ts

@@ -25,6 +25,10 @@ const featureFlagOptions: Record<FeatureFlagKey, FeatureFlagOptions> = {
     isDisabled: false,
     defaultValue: false,
   },
+  [featureFlagKeys.EDIT_WORKLOAD]: {
+    isDisabled: false,
+    defaultValue: false,
+  },
 }
 
 // Create a dedicated store for feature flags

renderer/src/features/mcp-servers/components/__tests__/card-mcp-server.test.tsx

@@ -12,6 +12,7 @@ const router = createTestRouter(() => (
     statusContext={undefined}
     url=""
     transport="http"
+    onEdit={() => {}}
   />
 ))
 

renderer/src/features/mcp-servers/components/__tests__/dialog-form-run-mcp-command.test.tsx

@@ -144,7 +144,11 @@ describe('DialogFormRunMcpServerWithCommand', () => {
             type: 'docker_image',
             envVars: [],
             secrets: [],
-            cmd_arguments: undefined,
+            cmd_arguments: [],
+            networkIsolation: false,
+            allowedHosts: [],
+            allowedPorts: [],
+            target_port: 0,
           }),
         },
         expect.any(Object)
@@ -179,7 +183,7 @@ describe('DialogFormRunMcpServerWithCommand', () => {
     // Fill all fields
     await userEvent.type(screen.getByLabelText('Name'), 'npm-server')
     await userEvent.click(screen.getByLabelText('Transport'))
-    await userEvent.click(screen.getByRole('option', { name: 'stdio' }))
+    await userEvent.click(screen.getByRole('option', { name: 'SSE' }))
     await userEvent.type(screen.getByLabelText('Target port'), '8080')
     await userEvent.click(screen.getByLabelText('Protocol'))
     await userEvent.click(screen.getByRole('option', { name: 'npx' }))
@@ -195,7 +199,7 @@ describe('DialogFormRunMcpServerWithCommand', () => {
         {
           data: expect.objectContaining({
             name: 'npm-server',
-            transport: 'stdio',
+            transport: 'sse',
             target_port: 8080,
             protocol: 'npx',
             package_name: '@test/package',

renderer/src/features/mcp-servers/components/card-mcp-server.tsx

@@ -12,7 +12,15 @@ import {
   DropdownMenuSeparator,
 } from '@/common/components/ui/dropdown-menu'
 import { Button } from '@/common/components/ui/button'
-import { MoreVertical, Trash2, Github, Text, Copy, Edit3 } from 'lucide-react'
+import {
+  MoreVertical,
+  Trash2,
+  Github,
+  Text,
+  Copy,
+  Edit3,
+  Settings,
+} from 'lucide-react'
 import { Link } from '@tanstack/react-router'
 import { toast } from 'sonner'
 import { Input } from '@/common/components/ui/input'
@@ -106,12 +114,14 @@ export function CardMcpServer({
   statusContext,
   url,
   transport,
+  onEdit,
 }: {
   name: string
   status: CoreWorkload['status']
   statusContext: CoreWorkload['status_context']
   url: string
   transport: CoreWorkload['transport_type']
+  onEdit: (serverName: string) => void
 }) {
   const confirm = useConfirm()
   const { mutateAsync: deleteServer, isPending: isDeletePending } =
@@ -120,6 +130,7 @@ export function CardMcpServer({
   const isCustomizeToolsEnabled = useFeatureFlag(
     featureFlagKeys.CUSTOMIZE_TOOLS
   )
+  const isEditWorkloadEnabled = useFeatureFlag(featureFlagKeys.EDIT_WORKLOAD)
 
   const { data: serverDetails } = useQuery({
     queryKey: ['serverDetails', name],
@@ -269,6 +280,17 @@ export function CardMcpServer({
                 </Button>
               </div>
               <DropdownMenuSeparator />
+              {isEditWorkloadEnabled && (
+                <DropdownMenuItem
+                  asChild
+                  className="flex cursor-pointer items-center"
+                >
+                  <a className="self-start" onClick={() => onEdit(name)}>
+                    <Settings className="mr-2 h-4 w-4" />
+                    Edit configuration
+                  </a>
+                </DropdownMenuItem>
+              )}
               {repositoryUrl && (
                 <DropdownMenuItem asChild>
                   <a