Enhancement Request - Dropdown values with description - Areteans

[s-thutupalli]

Enhancement of existing dropdown component

Title: Dropdown values with description.

Description

A search field has been introduced to facilitate easy access to the options. As users type in the search field, the options are filtered in real-time based on the entered characters. Upon selecting an option, the input field will display the chosen value.

Current behaviour

The existing dropdown lacks descriptions for each option.

There is no search functionality to filter the options in the dropdown list.

Expected behaviour

When a user selects the dropdown, they will be able to see options along with their descriptions. Additionally, users can search for options to quickly find the desired selection.

Uses of this Enhancement

The search functionality allows users to filter values easily, eliminating the need to scroll through the entire list. Additionally, descriptions have been added for every option to enhance clarity and usability.

Dependency packages

Material UI - @mui/material @emotion/react @emotion/styled

Configurations

DataPage

Attached the component code and detailed description with images below.

Dropdown_Values_With_Description_Component.docx
DropdownValueWithDescription.zip

[ricmars]

Such component makes sense but it should not be using material UI - I will review the code and see if this requirement can be integrated as a new component in the ui gallery using the OOB Constellation presentational component.

Note that when more meta data is required, you can use the show details that will let you configure a read only view to show more meta about the selected object - this is the recommended pattern since it scale better and is more flexible that adding a description field.

[s-thutupalli]

Thanks Richard. We will make the corresponding code changes as per the feedback and will provide updated code in couple of days.

[ricmars]

using a decouple dp to provide a secondary piece of information is increasing the maintenance cost - also all this code is using material UI and is not ready to be merged as is into the repo - the suggested approach is to configure the single select as ;picker' and use a view to provide the additional meta data

[ricmars]

Rejected- SDK only – for Constellation UI – use a single-select data reference with a picker to show additional metadata