[MISC] Fix blank LLM profile edit form and settings menu bold style

[chandrasekharan-zipstack]

What

• Fix blank form when editing an LLM profile in Prompt Studio settings
• Remove unconditional bold styling on first settings popover menu item

Why

• Ant Design form.resetFields() resets to the initialValues snapshot captured at first render. Since adapter data loads asynchronously, initialValues is always {} (empty), causing the edit form to appear blank. This is especially visible under React Strict Mode (local dev) where effects run twice.
• The first item in the settings sidebar popover was always bold due to a font-weight: 600 on :first-child, which looked incorrect when hovering over submenu items.

How

• Replace form.resetFields() with form.setFieldsValue(formDetails) to explicitly push current values into the form regardless of when initialValues was captured
• Remove Strict Mode-incompatible cleanup that cleared editLlmProfileId during the mount-unmount-remount cycle
• Clear editLlmProfileId in the parent's "Add New" handler to prevent stale edit IDs from leaking into the add flow
• Remove font-weight: 600 from .settings-menu-item:first-child

Can this PR break any existing features. If yes, please list possible items. If no, please explain why. (PS: Admins do not merge the PR without this section filled)

• No. The setFieldsValue change is a direct replacement that explicitly sets the same values that resetFields was intended to restore. All other edit forms in the codebase already use this pattern (MenuLayout, PlatformApiKeys, Header). The CSS change only removes an unintended bold style.

Database Migrations

• None

Env Config

• None

Relevant Docs

• Ant Design Form - setFieldsValue

Related Issues or PRs

• None

Dependencies Versions

• None

Notes on Testing

• Open Prompt Studio → Settings → LLM Profiles
• Click edit on an existing profile → verify all fields are populated
• Click back → click "Add New" → verify form is blank (not pre-filled with previous edit data)
• Verify the first item in the settings sidebar popover is not bold

Screenshots

Checklist

I have read and understood the Contribution Guidelines.

[coderabbitai]

Summary by CodeRabbit

Release Notes

• Bug Fixes
  • Form reset now preserves current values instead of clearing fields.
  • "Add New LLM Profile" button properly clears edit context when switching to add mode.
  • Settings menu item styling adjusted for consistency.

Walkthrough

The changes modify the LLM profile management flow by removing automatic cleanup of edit context on component unmount, replacing form reset behavior with field population, and ensuring edit state is cleared when transitioning to add-new mode. Additionally, a CSS style override is removed from the first settings menu item.

Changes

Cohort / File(s)	Summary
LLM Profile Management frontend/src/components/custom-tools/add-llm-profile/AddLlmProfile.jsx, frontend/src/components/custom-tools/manage-llm-profiles/ManageLlmProfiles.jsx	Modified form reset behavior to populate fields with current formDetails instead of clearing them; removed cleanup logic that reset editLlmProfileId on unmount; added explicit clearing of editLlmProfileId when transitioning to add-new mode.
Settings Styling frontend/src/components/settings/settings/Settings.css	Removed font-weight: 600; override from .settings-menu-item:first-child, allowing the first menu item to use base font weight styling.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly identifies both main issues being fixed: the blank LLM profile edit form and the incorrect bold styling on the settings menu item.
Description check	✅ Passed	The description follows the template structure completely, with detailed explanations in all required sections including What, Why, How, impact assessment, testing notes, and the admin checklist.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/prompt-studio-settings-edit-form

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[greptile-apps]

Greptile Summary

This PR fixes two UI bugs in Prompt Studio: (1) the LLM profile edit form appearing blank because form.resetFields() restores the initialValues snapshot captured at first render — before async adapter data loads — so it always wiped the form back to empty; and (2) the first settings sidebar popover item being unconditionally bold. Both fixes are minimal and surgical.

• AddLlmProfile.jsx: form.resetFields() → form.setFieldsValue(formDetails), which explicitly pushes the already-loaded formDetails state into the form regardless of when initialValues was captured. This is consistent with the pattern used in MenuLayout, PlatformApiKeys, and Header. The Strict Mode-incompatible unmount cleanup (setEditLlmProfileId(null) in useEffect return) is also removed.
• ManageLlmProfiles.jsx: setEditLlmProfileId(null) is now called in the parent's handleAddNewLlmProfileBtnClick handler before setIsAddLlm(true), ensuring a stale edit ID from a previous session never leaks into the add-new flow.
• Settings.css: Removes font-weight: 600 from .settings-menu-item:first-child, restoring the consistent font-weight: 400 already declared on the base .settings-menu-item class.
• Minor: After removing the only call site of setEditLlmProfileId inside AddLlmProfile, the prop is now received but never used — its .isRequired PropTypes declaration is misleading and should be cleaned up.

Confidence Score: 4/5

Safe to merge; the form and CSS fixes are correct and minimal.

Score is 4 rather than 5 because setEditLlmProfileId is now unused inside AddLlmProfile but is still declared as a required prop in PropTypes — a P2 cleanup issue worth addressing before or shortly after merging.

frontend/src/components/custom-tools/add-llm-profile/AddLlmProfile.jsx — remove or make optional the now-unused setEditLlmProfileId prop and its PropTypes declaration.

Important Files Changed

Filename	Overview
frontend/src/components/custom-tools/add-llm-profile/AddLlmProfile.jsx	Replaces form.resetFields() with form.setFieldsValue(formDetails) to fix blank edit form; removes Strict-Mode-unsafe unmount cleanup; leaves setEditLlmProfileId as a now-unused required prop.
frontend/src/components/custom-tools/manage-llm-profiles/ManageLlmProfiles.jsx	Clears editLlmProfileId in the Add New handler before mounting AddLlmProfile, preventing stale edit ID from leaking into the add flow.
frontend/src/components/settings/settings/Settings.css	Removes unintended font-weight: 600 from .settings-menu-item:first-child, aligning with the base font-weight: 400 style.

Sequence Diagram

sequenceDiagram
    participant User
    participant ManageLlmProfiles
    participant AddLlmProfile
    participant AntForm
    participant API

    User->>ManageLlmProfiles: Click Edit on profile
    ManageLlmProfiles->>ManageLlmProfiles: setEditLlmProfileId(profileId)
    ManageLlmProfiles->>ManageLlmProfiles: setIsAddLlm(true)
    ManageLlmProfiles->>AddLlmProfile: mount(editLlmProfileId=profileId)
    AddLlmProfile->>API: GET /adapter
    API-->>AddLlmProfile: adapter list
    AddLlmProfile->>AddLlmProfile: setAreAdaptersReady(true)
    AddLlmProfile->>AddLlmProfile: useEffect[editLlmProfileId, areAdaptersReady] fires
    AddLlmProfile->>AddLlmProfile: setResetForm(true) + setFormDetails(profileValues)
    AddLlmProfile->>AntForm: form.setFieldsValue(formDetails)
    Note over AntForm: Form populated correctly ✓

    User->>AddLlmProfile: Click Back
    AddLlmProfile->>ManageLlmProfiles: setIsAddLlm(false)
    Note over ManageLlmProfiles: editLlmProfileId remains set (stale)

    User->>ManageLlmProfiles: Click Add New LLM Profile
    ManageLlmProfiles->>ManageLlmProfiles: setEditLlmProfileId(null)  ← fix
    ManageLlmProfiles->>ManageLlmProfiles: setIsAddLlm(true)
    ManageLlmProfiles->>AddLlmProfile: mount(editLlmProfileId=null)
    AddLlmProfile->>AddLlmProfile: useEffect[] fires (add mode)
    AddLlmProfile->>AddLlmProfile: setFormDetails(emptyValues)
    AddLlmProfile->>AntForm: form.setFieldsValue(emptyValues)
    Note over AntForm: Form correctly blank for new entry ✓

Loading

Comments Outside Diff (1)

1. frontend/src/components/custom-tools/add-llm-profile/AddLlmProfile.jsx, line 37 (link)

   Unused setEditLlmProfileId prop

   After removing the useEffect unmount cleanup, setEditLlmProfileId is no longer called anywhere inside this component — editLlmProfileId (the read value) is still used, but its setter is now dead. The PropTypes declaration also marks it as .isRequired, which misleads future readers into thinking the component depends on it.

   Consider removing it from the destructured props and the PropTypes block (line 658):

   Prompt To Fix With AI

   This is a comment left during a code review.
   Path: frontend/src/components/custom-tools/add-llm-profile/AddLlmProfile.jsx
   Line: 37
   
   Comment:
   **Unused `setEditLlmProfileId` prop**
   
   After removing the `useEffect` unmount cleanup, `setEditLlmProfileId` is no longer called anywhere inside this component — `editLlmProfileId` (the read value) is still used, but its setter is now dead. The PropTypes declaration also marks it as `.isRequired`, which misleads future readers into thinking the component depends on it.
   
   Consider removing it from the destructured props and the PropTypes block (line 658):
   
   
   
   How can I resolve this? If you propose a fix, please make it concise.

Prompt To Fix All With AI

This is a comment left during a code review.
Path: frontend/src/components/custom-tools/add-llm-profile/AddLlmProfile.jsx
Line: 37

Comment:
**Unused `setEditLlmProfileId` prop**

After removing the `useEffect` unmount cleanup, `setEditLlmProfileId` is no longer called anywhere inside this component — `editLlmProfileId` (the read value) is still used, but its setter is now dead. The PropTypes declaration also marks it as `.isRequired`, which misleads future readers into thinking the component depends on it.

Consider removing it from the destructured props and the PropTypes block (line 658):

```suggestion
  editLlmProfileId,
  setIsAddLlm,
  handleDefaultLlm,
```

How can I resolve this? If you propose a fix, please make it concise.

_{Reviews (1): Last reviewed commit: "[MISC] Fix blank LLM profile edit form a..." | Re-trigger Greptile}

[github-actions]

Frontend Lint Report (Biome)

✅ All checks passed! No linting or formatting issues found.

[coderabbitai]

🧹 Nitpick comments (1)

frontend/src/components/custom-tools/add-llm-profile/AddLlmProfile.jsx (1)

92-114: Consider adding editLlmProfileId to the dependency array for correctness.

This effect references editLlmProfileId but has an empty dependency array. While this works correctly in practice because the component always unmounts between edit/add transitions (due to isAddLlm toggling), adding the dependency would make the code more robust and satisfy the exhaustive-deps lint rule.

Suggested fix

     setModalTitle("Add New LLM Profile");
     setActiveKey(false);
-  }, []);
+  }, [editLlmProfileId, details?.tool_id]);

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@frontend/src/components/custom-tools/add-llm-profile/AddLlmProfile.jsx`
around lines 92 - 114, The useEffect in AddLlmProfile.jsx that initializes the
form on mount currently has an empty dependency array but reads
editLlmProfileId; update the dependency array for that useEffect to include
editLlmProfileId so the effect re-evaluates when the edit id changes (keep the
guard if (editLlmProfileId) return; and the existing calls to setResetForm,
setFormDetails, setModalTitle, and setActiveKey unchanged) to satisfy
exhaustive-deps and make the component robust.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@frontend/src/components/custom-tools/add-llm-profile/AddLlmProfile.jsx`:
- Around line 92-114: The useEffect in AddLlmProfile.jsx that initializes the
form on mount currently has an empty dependency array but reads
editLlmProfileId; update the dependency array for that useEffect to include
editLlmProfileId so the effect re-evaluates when the edit id changes (keep the
guard if (editLlmProfileId) return; and the existing calls to setResetForm,
setFormDetails, setModalTitle, and setActiveKey unchanged) to satisfy
exhaustive-deps and make the component robust.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: d36b0407-fa78-43bc-966c-a91643743392

📥 Commits

Reviewing files that changed from the base of the PR and between 7983c98 and bde7d1a.

📒 Files selected for processing (3)

• frontend/src/components/custom-tools/add-llm-profile/AddLlmProfile.jsx
• frontend/src/components/custom-tools/manage-llm-profiles/ManageLlmProfiles.jsx
• frontend/src/components/settings/settings/Settings.css

💤 Files with no reviewable changes (1)

• frontend/src/components/settings/settings/Settings.css