[Bug]: Button group widget and Menu widget accepts duplicate options

[YogeshJayaseelan]

Is there an existing issue for this?

• [X] I have searched the existing issues

Current Behavior

It is observed that the button group widget accepts duplicates button and the menu button widgets also accept duplicate menu button

Steps To Reproduce

1. Launch appsmith app in release/Production environment
2. Drag and drop Button group widget and menu button widget
3. Open property pane and new buttons or sub-menu button
4. Rename the newly added button or submenu button to any existing button names and see duplicate button name are accepted and no error message is displayed.

Environment

Production

Version

Cloud

[dilippitchika]

@YogeshJayaseelan the screenshot wasn't uploaded can you upload it again?

Please assign it to me after you do

[YogeshJayaseelan]

@dilippitchika Added screenshot

[dilippitchika]

@vasanth-appsmith how to indicate errors like this in this component? Please take a look at the current behavior in the table widget for duplicates. I believe we could improve the error feedback here.

This is how it looks for the table widget

[momcilo-appsmith]

@dilippitchika Why is this a problem?

[SunnyTitus]

Extracted the below technical solution through ChatGPT. Hope this gives some direction

Technical Solutions: (ChatGPT)

Front-End Code (React):

ButtonGroup Component Update:

Update the ButtonGroup component to handle the validation logic for unique button names:import React, { useState } from 'react';

const ButtonGroup = () => { const [buttons, setButtons] = useState([{ name: 'Favorite' }, { name: 'Add' }]); const [error, setError] = useState('');

const addButton = (name) => { if (buttons.some(button => button.name === name)) { setError('Button name must be unique'); } else { setButtons([...buttons, { name }]); setError(''); } };

return (

{buttons.map((button, index) => ( {button.name} ))} <input type="text" onBlur={(e) => addButton(e.target.value)} placeholder="Add button" /> {error &&

{error}

}

);};

export default ButtonGroup;

Menu Component Update:

Update the Menu component to handle the validation logic for unique menu item names:import React, { useState } from 'react';

const Menu = () => { const [menuItems, setMenuItems] = useState([{ name: 'Item1' }, { name: 'Item2' }]); const [error, setError] = useState('');

const addMenuItem = (name) => { if (menuItems.some(item => item.name === name)) { setError('Menu item name must be unique'); } else { setMenuItems([...menuItems, { name }]); setError(''); } };

return (

{menuItems.map((item, index) => (

{item.name}

))} <input type="text" onBlur={(e) => addMenuItem(e.target.value)} placeholder="Add menu item" /> {error &&

{error}

}

);};

export default Menu;

CSS for Error Message:

Ensure you have appropriate styling for the error message: .error { color: red; font-size: 12px; }

Back-End Code (Spring Boot):

Controller Update:

Update the controller to handle the validation logic if any backend validation is necessary:@RestController@RequestMapping("/api/widgets")public class WidgetController {

private Set buttonNames = new HashSet<>(); private Set menuItemNames = new HashSet<>();

@PostMapping("/addButton") public ResponseEntity addButton(@RequestParam String name) { if (buttonNames.contains(name)) { return ResponseEntity.badRequest().body("Button name must be unique"); } buttonNames.add(name); return ResponseEntity.ok("Button added successfully"); }

@PostMapping("/addMenuItem") public ResponseEntity addMenuItem(@RequestParam String name) { if (menuItemNames.contains(name)) { return ResponseEntity.badRequest().body("Menu item name must be unique"); } menuItemNames.add(name); return ResponseEntity.ok("Menu item added successfully"); }

}

[saicharan-zemoso]

Hello @Nikhil-Nandagopal @dilippitchika @YogeshJayaseelan , is this issue still open. can I try to solve this issue?

[Nikhil-Nandagopal]

@saicharan-zemoso I don't think this is a valid issue so I'm going to close it

[akshayvijayjain]

@Nikhil-Nandagopal , Even I had the same thought that this might not be a valid issue, but the UI and logic is already in place, therefore, we internally worked on this issue and will present pull request in few days,

Request you to consider it once. So it show Red border along the duplicate menu item, or duplicate button label, only logic piece was missing which will be there in the pull request.

@saicharan-zemoso you can create the draft pr, and explain the solution

[Nikhil-Nandagopal]

@akshayvijayjain would you be open to a quick chat next week? Here's my calendly https://calendly.com/appsmith-nikhil/30min

[akshayvijayjain]

@akshayvijayjain would you be open to a quick chat next week? Here's my calendly https://calendly.com/appsmith-nikhil/30min

sure, booked a slot!