Fix responseEditor form checkbox

[senithkay]

Purpose

This PR will FIx the issue where In ResponseEditor for Make This Response Reusable field a normal text editor is rendered instead of the checkbox

Summary by CodeRabbit

• Chores
  • Updated form field configuration in the Service Designer to enhance response handling capabilities.

[coderabbitai]

📝 Walkthrough

Walkthrough

A single property is added to a form field configuration in ResponseEditor.tsx, introducing a types array to the FLAG-type field that controls the "Make this response reusable" checkbox.

Changes

Cohort / File(s)	Summary
Form Field Configuration workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/Forms/ResourceForm/ResourceResponse/ResponseEditor.tsx	Added types array property to FLAG-type form field with a single entry specifying fieldType "FLAG" and selected state as false.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Poem

🐰 A checkbox property takes its place,
A simple types array joins the race,
One line added, reusability grows,
In ResponseEditor, the config flows! ✨

🚥 Pre-merge checks | ✅ 1 | ❌ 2

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The PR description only includes a Purpose section that partially addresses the issue, but lacks critical sections like Goals, Approach, and other required template sections.	Complete the description template by adding Goals (how the fix resolves the problem), Approach (implementation details), and other relevant sections like Testing and Release notes.
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 (1 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'Fix responseEditor form checkbox' directly and clearly summarizes the main change: fixing a checkbox display issue in the ResponseEditor form.

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

✨ Finishing Touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

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.}

[coderabbitai]

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/Forms/ResourceForm/ResourceResponse/ResponseEditor.tsx (1)

181-219: ⚠️ Potential issue | 🟡 Minor

Remove the console.log debug statement on line 289 — it exposes the full form data

The core fix (adding types: [{fieldType: "FLAG", selected: false}]) is correct and handles both new and edit modes properly. The CheckBoxEditor component initializes checkbox state from field.value, not from types[0].selected. In edit mode where res.name.value is a non-empty string (e.g., "OkResponse"), the checkbox will correctly render as checked because the string is truthy. The value type mismatch concern is not an issue—CheckBoxEditor handles both boolean and string values via truthiness checks.

The only actionable item is the pre-existing console.log("Add New Response: ", dataValues) on line 289, which logs the entire form submission data to the console. Remove it or replace with a more targeted log.

🤖 Prompt for AI Agents

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

In
`@workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/Forms/ResourceForm/ResourceResponse/ResponseEditor.tsx`
around lines 181 - 219, Remove the debug console.log that prints the full form
data (the console.log("Add New Response: ", dataValues) call) from
ResponseEditor.tsx; locate the submission/handler where dataValues is used (the
form submit block that works with newFieldsRef, setNewFields and res.name.value)
and either delete that console.log or replace it with a minimal, non-sensitive
log (e.g., a success message or a specific field name), ensuring no full form
payload is printed to the console.

🧹 Nitpick comments (1)

workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/Forms/ResourceForm/ResourceResponse/ResponseEditor.tsx (1)

288-290: Remove debug console.log that leaks full form data

The console.log at line 289 dumps the entire dataValues map — which includes response body types, media types, header values, and response names — to the browser console in production. This is a pre-existing artifact but should be removed.

🧹 Proposed cleanup

 const handleOnNewSubmit = (dataValues: FormValues, formImports: FormImports) => {
-    console.log("Add New Response: ", dataValues);
     if (isValidResponse(dataValues)) {

🤖 Prompt for AI Agents

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

In
`@workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/Forms/ResourceForm/ResourceResponse/ResponseEditor.tsx`
around lines 288 - 290, Remove the debugging console.log that prints full form
data in handleOnNewSubmit — specifically delete the line logging "Add New
Response: " with dataValues so sensitive response details (dataValues) are not
leaked to the browser console; ensure the function handleOnNewSubmit continues
to call isValidResponse(dataValues) and process formImports normally after the
removal.

🤖 Prompt for all review comments with AI agents

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

Outside diff comments:
In
`@workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/Forms/ResourceForm/ResourceResponse/ResponseEditor.tsx`:
- Around line 181-219: Remove the debug console.log that prints the full form
data (the console.log("Add New Response: ", dataValues) call) from
ResponseEditor.tsx; locate the submission/handler where dataValues is used (the
form submit block that works with newFieldsRef, setNewFields and res.name.value)
and either delete that console.log or replace it with a minimal, non-sensitive
log (e.g., a success message or a specific field name), ensuring no full form
payload is printed to the console.

---

Nitpick comments:
In
`@workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/Forms/ResourceForm/ResourceResponse/ResponseEditor.tsx`:
- Around line 288-290: Remove the debugging console.log that prints full form
data in handleOnNewSubmit — specifically delete the line logging "Add New
Response: " with dataValues so sensitive response details (dataValues) are not
leaked to the browser console; ensure the function handleOnNewSubmit continues
to call isValidResponse(dataValues) and process formImports normally after the
removal.