Add NestedMultiSelect component#2250
Conversation
| import { unsnoozeRecommendationAction } from './lib/actions/unsnooze-recommendations-action'; | ||
| import { cloudabilityAuth } from './lib/auth'; | ||
|
|
||
| export { getRecommendationTypesByVendor } from './lib/common/common-properties'; |
There was a problem hiding this comment.
my previous export didnt work the way i wanted it to so we need to do this
There was a problem hiding this comment.
are we sure we want to import in the server from the blocks & not export this to somewhere common instead?
| @@ -0,0 +1,175 @@ | |||
| import * as React from 'react'; | |||
There was a problem hiding this comment.
Pull request overview
Introduces a new NestedMultiSelect UI component to support selecting multiple items grouped under collapsible parents (OPS-4178), along with exports and unit tests. The PR also includes unrelated Cloudability/server TypeScript export/path changes that may need justification or separation.
Changes:
- Added
NestedMultiSelectcomponent with collapsible groups, group-level select-all, and item toggles. - Added comprehensive React Testing Library tests for the new component.
- Exported the new component via component barrels; additionally added Cloudability exports and a server/api TS path mapping.
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 9 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/ui-components/src/components/nested-multi-select/nested-multi-select.tsx | New nested multi-select component implementation (collapsible groups + checkboxes). |
| packages/ui-components/src/components/nested-multi-select/nested-multi-select.test.tsx | Unit tests covering rendering and interaction flows for the component. |
| packages/ui-components/src/components/nested-multi-select/index.ts | Barrel exports for the new component and its types. |
| packages/ui-components/src/components/index.ts | Re-export nested-multi-select from the main components barrel. |
| packages/server/api/tsconfig.json | Adds a TS path alias for @openops/block-cloudability. |
| packages/blocks/cloudability/src/index.ts | Exposes Vendor and getRecommendationTypesByVendor from the Cloudability block package entrypoint. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| const toggleGroup = (groupId: string) => { | ||
| setOpenGroups((prev) => { | ||
| const next = new Set(prev); | ||
| if (next.has(groupId)) { | ||
| next.delete(groupId); | ||
| } else { | ||
| next.add(groupId); | ||
| } | ||
| return next; | ||
| }); | ||
| }; | ||
|
|
||
| const handleGroupToggle = (groupId: string, items: NestedOption['items']) => { | ||
| const currentItems = value[groupId] || []; | ||
| const allItemIds = items?.map((i) => i.id) || []; | ||
|
|
||
| if (currentItems.length === allItemIds.length) { | ||
| const newValue = { ...value }; | ||
| delete newValue[groupId]; | ||
| onValueChange(newValue); | ||
| } else { | ||
| onValueChange({ | ||
| ...value, | ||
| [groupId]: allItemIds, | ||
| }); | ||
| } | ||
| }; | ||
|
|
||
| const handleItemToggle = (groupId: string, itemId: string) => { |
There was a problem hiding this comment.
wrap functions with useCallback
|




Fixes OPS-4178