Skip to content

Add NestedMultiSelect component#2250

Merged
bigfluffycookie merged 9 commits intomainfrom
lb/new
Apr 24, 2026
Merged

Add NestedMultiSelect component#2250
bigfluffycookie merged 9 commits intomainfrom
lb/new

Conversation

@bigfluffycookie
Copy link
Copy Markdown
Contributor

Fixes OPS-4178

@linear
Copy link
Copy Markdown

linear Bot commented Apr 23, 2026

OPS-4178 Cloudability

import { unsnoozeRecommendationAction } from './lib/actions/unsnooze-recommendations-action';
import { cloudabilityAuth } from './lib/auth';

export { getRecommendationTypesByVendor } from './lib/common/common-properties';
Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

my previous export didnt work the way i wanted it to so we need to do this

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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';
Copy link
Copy Markdown
Contributor Author

@bigfluffycookie bigfluffycookie Apr 23, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

reusable component for nested multi select in the wizard.

Image

@bigfluffycookie bigfluffycookie marked this pull request as ready for review April 23, 2026 21:25
Copilot AI review requested due to automatic review settings April 23, 2026 21:25
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 NestedMultiSelect component 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.

Comment thread packages/ui-components/src/components/nested-multi-select/nested-multi-select.tsx Outdated
Comment thread packages/server/api/tsconfig.json
Comment thread packages/blocks/cloudability/src/index.ts Outdated
Comment thread packages/ui-components/src/components/nested-multi-select/nested-multi-select.tsx Outdated
Comment thread packages/ui-components/src/components/nested-multi-select/nested-multi-select.tsx Outdated
Comment on lines +61 to +89
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) => {
Copy link
Copy Markdown
Contributor

@alexandrudanpop alexandrudanpop Apr 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

wrap functions with useCallback

@sonarqubecloud
Copy link
Copy Markdown

@bigfluffycookie bigfluffycookie merged commit 44608a1 into main Apr 24, 2026
25 checks passed
@bigfluffycookie bigfluffycookie deleted the lb/new branch April 24, 2026 09:07
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants