OpenNoodl/dev-docs/tasks/phase-5-multi-target-deployment/01-byob-backend/TASK-004-edit-backend-dialog

TASK-004: Edit Backend Dialog

Task ID: TASK-004
Phase: 5 - Multi-Target Deployment (BYOB)
Priority: 🟡 Medium
Difficulty: 🟢 Easy
Estimated Time: 1-2 days
Prerequisites: TASK-001 (Backend Services Panel)
Branch: feature/byob-edit-backend

Objective

Add the ability to edit existing backend configurations. Currently users can only add new backends or delete them - there's no way to update URL, credentials, or settings.

Background

TASK-001 implemented Add Backend and Delete Backend functionality. Users frequently need to:

• Update API tokens when they rotate
• Change URLs between environments
• Modify authentication settings
• Rename backends for clarity

User Story

As a Noodl user, I want to edit my backend configurations, so I can update credentials or settings without recreating the entire configuration.

Current State

• Add Backend Dialog exists (TASK-001 ✅)
• Delete backend works
• No edit capability - must delete and recreate
• updateBackend() method exists in model but no UI

Desired State

• "Edit" button on BackendCard
• Opens pre-filled dialog with current values
• Save updates existing config
• Preserve schema cache and connection history

UI Design

The Edit dialog reuses AddBackendDialog with modifications:

┌─────────────────────────────────────────────────────────────────────┐
│ Edit Backend                                                   [×]  │
├─────────────────────────────────────────────────────────────────────┤
│                                                                     │
│ NAME                                                                │
│ ┌─────────────────────────────────────────────────────────────────┐ │
│ │ Production Directus                                             │ │
│ └─────────────────────────────────────────────────────────────────┘ │
│                                                                     │
│ TYPE                                                                │
│ [Directus            ▾]  ← Disabled (can't change type)            │
│                                                                     │
│ URL                                                                 │
│ ┌─────────────────────────────────────────────────────────────────┐ │
│ │ https://api.myapp.com                                           │ │
│ └─────────────────────────────────────────────────────────────────┘ │
│                                                                     │
│ AUTHENTICATION                                                      │
│ Method: [Bearer Token ▾]                                            │
│ Token: [•••••••••••••••••••••••••••         ] [👁] [Update]        │
│                                                                     │
│ ⚠️ Changing URL or credentials will require re-syncing schema      │
│                                                                     │
│                                    [Cancel] [Test] [Save Changes]   │
└─────────────────────────────────────────────────────────────────────┘

Implementation

Option A: Modify AddBackendDialog (Recommended)

Add an editMode prop to the existing dialog:

interface AddBackendDialogProps {
  isOpen: boolean;
  onClose: () => void;
  onSave: (backend: BackendConfig) => void;
  editBackend?: BackendConfig; // If provided, dialog is in edit mode
}

Option B: Create Separate EditBackendDialog

Create a new component specifically for editing. More code duplication but cleaner separation.

Recommendation

Option A - Reusing AddBackendDialog is simpler since 90% of the UI is identical.

Key Differences in Edit Mode

Aspect	Add Mode	Edit Mode
Title	"Add Backend"	"Edit Backend"
Type selector	Enabled	Disabled (can't change type)
Submit button	"Add Backend"	"Save Changes"
Initial values	Empty/defaults	Populated from editBackend
On submit	createBackend()	updateBackend()

Changes Required

1. AddBackendDialog.tsx

   • Accept optional editBackend prop
   • Initialize form with existing values
   • Disable type selector in edit mode
   • Change button text/behavior

2. BackendCard.tsx

   • Add "Edit" button to actions
   • Open dialog with editBackend prop

3. BackendServicesPanel.tsx

   • Handle edit dialog state
   • Pass selected backend to dialog

Code Changes

BackendCard Actions

// Current
<IconButton icon={IconName.Trash} onClick={onDelete} />

// After
<IconButton icon={IconName.Pencil} onClick={onEdit} />
<IconButton icon={IconName.Trash} onClick={onDelete} />

Dialog Mode Detection

function AddBackendDialog({ editBackend, onSave, ... }) {
  const isEditMode = !!editBackend;

  const [name, setName] = useState(editBackend?.name || '');
  const [url, setUrl] = useState(editBackend?.url || '');
  // ... etc

  const handleSubmit = async () => {
    if (isEditMode) {
      await BackendServices.instance.updateBackend({
        id: editBackend.id,
        name,
        url,
        auth
      });
    } else {
      await BackendServices.instance.createBackend({ ... });
    }
    onSave();
  };

  return (
    <Dialog title={isEditMode ? 'Edit Backend' : 'Add Backend'}>
      {/* ... form fields ... */}
      <Button
        label={isEditMode ? 'Save Changes' : 'Add Backend'}
        onClick={handleSubmit}
      />
    </Dialog>
  );
}

Success Criteria

• Edit button appears on BackendCard
• Clicking Edit opens dialog with pre-filled values
• Backend type selector is disabled in edit mode
• URL can be changed
• Credentials can be updated
• Save calls updateBackend() method
• Schema cache is preserved after edit
• Connection status updates after credential change