feat: OPTIC-1733: Standardize Dropdown Components Using LSE selector #7257

yyassi-heartex · 2025-03-19T17:38:08Z

New unified Select component

This pull request primarily focuses on replacing existing Select components with the Select component from the @humansignal/ui library across multiple files. Additionally, it includes some refactoring and enhancements to improve code readability and functionality. Below are the most important changes:

UI Component Updates:

Replaced the existing Select components with Select from @humansignal/ui in various files, including Select.jsx, Pagination.tsx, Config.jsx, CreateProject.jsx, GeneralSettings.jsx, Forms.jsx, StorageForm.jsx, SampleDatasetSelect.tsx, ModelVersionSelector.jsx, and Select.jsx in the datamanager directory. [1] [2] [3] [4] [5] [6] [7] [8] Fbb5e0ebL1, [9]

Functional Enhancements:

Updated event handlers for Select components to use the new onChange signature provided by @humansignal/ui, replacing the previous event-based handlers. [1] [2] [3] [4] [5] [6]

Code Refactoring:

Added useMemo hooks to optimize the computation of options for Select components, ensuring better performance and readability. [1] [2] [3]

CSS and Layout Adjustments:

Modified CSS styles to support the new Select component layout, including changes in uikit.css to use display: flex instead of display: block.

Miscellaneous:

Minor adjustments to imports and code structure to maintain consistency and improve code clarity. [1] [2] [3] [4]

These changes collectively enhance the consistency and maintainability of the codebase by standardizing the use of the Select component from @humansignal/ui and optimizing related code.

…mprovements

…e try to spread its values

…mprovements

Workflow run: https://github.com/HumanSignal/label-studio/actions/runs/13697081739

Workflow run: https://github.com/HumanSignal/label-studio/actions/runs/13697520796

…s/label-studio into fb-optic-1748/ui-improvements

…mprovements

…748/ui-improvements" This reverts commit 291f6e3, reversing changes made to 1c53cd9.

…1748/ui-improvements" This reverts commit 233340c.

Workflow run: https://github.com/HumanSignal/label-studio/actions/runs/14464548326

…e space

web/libs/datamanager/src/components/Filters/FilterInput.jsx

web/libs/datamanager/src/components/Filters/FilterLine/FilterLine.scss

…ine.scss

borisheartex · 2025-04-17T08:16:10Z

/fm sync

Workflow run

Workflow run: https://github.com/HumanSignal/label-studio/actions/runs/14511227706

yyassi-heartex · 2025-04-17T15:36:21Z

/git merge

Workflow run
Successfully merged: 10 files changed, 21 insertions(+), 18 deletions(-)

Workflow run: https://github.com/HumanSignal/label-studio/actions/runs/14519405375

yyassi-heartex · 2025-04-17T19:59:56Z

web/libs/ui/src/lib/select/select.tsx

+          setValue((prev = []) => {
+            if (isSelected) {
+              return (selectedOptions = [...prev.filter((v) => v !== val)]);
+            }
+            return (selectedOptions = [...prev, val]);
+          });


this could cause an issue with the callback handler getting called after passing selectedOptions up to props.onChange. use a valueRef instead of the callback

yyassi-heartex · 2025-04-17T20:14:34Z

web/libs/ui/src/lib/select/select.tsx

+            )}
+          </button>
+        </PopoverTrigger>
+        <PopoverContent className="z-99999 min-w-full" align="start" data-testid="select-popup">


Suggested change

<PopoverContent className="z-99999 min-w-full" align="start" data-testid="select-popup">

<PopoverContent align="start" data-testid="select-popup">

yyassi-heartex · 2025-04-17T20:25:46Z

web/libs/ui/src/lib/select/select.tsx

+                              onSelect={() => {
+                                children.forEach((child: SelectOption<T>) => {
+                                  const childVal = child?.value ?? child;
+                                  isOptionSelected ? _onChange(childVal, true) : _onChange(childVal, false);


Suggested change

isOptionSelected ? _onChange(childVal, true) : _onChange(childVal, false);

_onChange(childVal, isOptionSelected);

borisheartex · 2025-04-18T08:40:50Z

/fm sync

Workflow run

Workflow run: https://github.com/HumanSignal/label-studio/actions/runs/14532437125

yyassi-heartex and others added 30 commits March 3, 2025 09:27

adding test ids and updating how we check for toggle

f53c76c

lint cleanup

7156451

fixing column check

b323995

lint cleanup

470829e

fixed unit test + reduced padding on datamanger view toggle buttons

944fcb5

lint + test fixes

f8b437f

test fixes

1985de4

addressing issues around datamanager columns checkboxes

3700375

Merge remote-tracking branch 'origin/develop' into fb-optic-1748/ui-i…

ec20909

…mprovements

addressing failing checks

aed0587

fixing userDisplayName

d55bd05

lint cleanup

67f46c4

Merge remote-tracking branch 'origin/develop' into fb-optic-1748/ui-i…

8f0245b

…mprovements

fixing AnnotationsCarousel tests

2983fb2

cleaning up a situation where its possible for user to be null when w…

682f90d

…e try to spread its values

Merge remote-tracking branch 'origin/develop' into fb-optic-1748/ui-i…

8ddd48a

…mprovements

chore: OPTIC-1778: Unify and prettify icons

5eadf84

slight tweaks

02e66a3

Merge branch 'develop' into 'fb-optic-1748/ui-improvements'

d152e99

Workflow run: https://github.com/HumanSignal/label-studio/actions/runs/13697081739

Sync Follow Merge dependencies

a4f47f0

Workflow run: https://github.com/HumanSignal/label-studio/actions/runs/13697081739

Sync Follow Merge dependencies

d3a70e0

Workflow run: https://github.com/HumanSignal/label-studio/actions/runs/13697520796

test and lint cleanup

eb900ec

Merge branch 'fb-optic-1748/ui-improvements' of github.com:heartexlab…

0c800a6

…s/label-studio into fb-optic-1748/ui-improvements

fixing an issue that makes it impossible for a user to update the fields

1c53cd9

Merge remote-tracking branch 'origin/develop' into fb-optic-1748/ui-i…

291f6e3

…mprovements

Revert "Merge remote-tracking branch 'origin/develop' into fb-optic-1…

233340c

…748/ui-improvements" This reverts commit 291f6e3, reversing changes made to 1c53cd9.

Reapply "Merge remote-tracking branch 'origin/develop' into fb-optic-…

5ef00d2

…1748/ui-improvements" This reverts commit 233340c.

fixing merge

2bd247c

cleaning up imports

f59c735

Merge branch 'fb-optic-1748/ui-improvements' into fb-optic-1778/icons

38b22b8

robot-ci-heartex and others added 13 commits April 15, 2025 08:14

Merge branch 'develop' into 'fb-optic-1733/select'

311ecdd

Workflow run: https://github.com/HumanSignal/label-studio/actions/runs/14464548326

Sync Follow Merge dependencies

c44f4d9

Workflow run: https://github.com/HumanSignal/label-studio/actions/runs/14464548326

minor tweak to preselect first option if no placeholder provided

aa04e55

lint cleanup

5e8351d

updating focus visual

88331d6

undoing defaulting to first option as it breaks behavior in other spots

5c1573d

Merge remote-tracking branch 'origin/develop' into fb-optic-1733/select

fd02250

cleaning up icons

99b5f34

using corrected search icon

0e12112

lint cleanup

cc707ce

slight tweak to the popover content so it has a max-width of availabl…

48b6593

…e space

lint cleanup

53c1de8

slight visual tweaks based on feedback

c0eda4b

yyassi-heartex commented Apr 16, 2025

View reviewed changes

web/libs/datamanager/src/components/Filters/FilterInput.jsx Outdated Show resolved Hide resolved

yyassi-heartex commented Apr 16, 2025

View reviewed changes

web/libs/datamanager/src/components/Filters/FilterLine/FilterLine.scss Outdated Show resolved Hide resolved

yyassi-heartex and others added 2 commits April 16, 2025 17:20

Update web/libs/datamanager/src/components/Filters/FilterLine/FilterL…

46fbffa

…ine.scss

applying changes based on feedback

200bec9

robot-ci-heartex added 2 commits April 17, 2025 08:18

Merge branch 'develop' into 'fb-optic-1733/select'

e399ef4

Workflow run: https://github.com/HumanSignal/label-studio/actions/runs/14511227706

Sync Follow Merge dependencies

6d49896

Workflow run: https://github.com/HumanSignal/label-studio/actions/runs/14511227706

Merge branch 'develop' into 'fb-optic-1733/select'

6dbf4ea

Workflow run: https://github.com/HumanSignal/label-studio/actions/runs/14519405375

yyassi-heartex commented Apr 17, 2025

View reviewed changes

tweaking searching group container for Select + removing radix-ui select

6fa519c

bmartel approved these changes Apr 17, 2025

View reviewed changes

robot-ci-heartex added 2 commits April 18, 2025 08:43

Merge branch 'develop' into 'fb-optic-1733/select'

559d8ca

Workflow run: https://github.com/HumanSignal/label-studio/actions/runs/14532437125

Sync Follow Merge dependencies

dafc38c

Workflow run: https://github.com/HumanSignal/label-studio/actions/runs/14532437125

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: OPTIC-1733: Standardize Dropdown Components Using LSE selector #7257

feat: OPTIC-1733: Standardize Dropdown Components Using LSE selector #7257

yyassi-heartex commented Mar 19, 2025 •

edited

Loading

borisheartex commented Apr 17, 2025 •

edited by robot-ci-heartex

Loading

yyassi-heartex commented Apr 17, 2025 •

edited by robot-ci-heartex

Loading

yyassi-heartex Apr 17, 2025

yyassi-heartex Apr 17, 2025

yyassi-heartex Apr 17, 2025

borisheartex commented Apr 18, 2025 •

edited by robot-ci-heartex

Loading

	<PopoverContent className="z-99999 min-w-full" align="start" data-testid="select-popup">
	<PopoverContent align="start" data-testid="select-popup">

	isOptionSelected ? _onChange(childVal, true) : _onChange(childVal, false);
	_onChange(childVal, isOptionSelected);

feat: OPTIC-1733: Standardize Dropdown Components Using LSE selector #7257

Are you sure you want to change the base?

feat: OPTIC-1733: Standardize Dropdown Components Using LSE selector #7257

Conversation

yyassi-heartex commented Mar 19, 2025 • edited Loading

UI Component Updates:

Functional Enhancements:

Code Refactoring:

CSS and Layout Adjustments:

Miscellaneous:

borisheartex commented Apr 17, 2025 • edited by robot-ci-heartex Loading

yyassi-heartex commented Apr 17, 2025 • edited by robot-ci-heartex Loading

yyassi-heartex Apr 17, 2025

Choose a reason for hiding this comment

yyassi-heartex Apr 17, 2025

Choose a reason for hiding this comment

yyassi-heartex Apr 17, 2025

Choose a reason for hiding this comment

borisheartex commented Apr 18, 2025 • edited by robot-ci-heartex Loading

yyassi-heartex commented Mar 19, 2025 •

edited

Loading

borisheartex commented Apr 17, 2025 •

edited by robot-ci-heartex

Loading

yyassi-heartex commented Apr 17, 2025 •

edited by robot-ci-heartex

Loading

borisheartex commented Apr 18, 2025 •

edited by robot-ci-heartex

Loading