feat: Table Column Groups Collection Prefs by NathanZlion · Pull Request #4487 · cloudscape-design/components

NathanZlion · 2026-05-04T14:47:55Z

Description

Add Table Column Grouping Feature support in collection preferences.

Related links, issue AWSUI-9594, if available: n/a

How has this been tested?

Review checklist

The following items are to be evaluated by the author(s) and the reviewer(s).

Correctness

Changes include appropriate documentation updates.
Changes are backward-compatible if not indicated, see CONTRIBUTING.md.
Changes do not include unsupported browser features, see CONTRIBUTING.md.
Changes were manually tested for accessibility, see accessibility guidelines.

Security

If the code handles URLs: all URLs are validated through the checkSafeUrl function.

Testing

Changes are covered with new/existing unit tests?
Changes are covered with new/existing integration tests?

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

codecov · 2026-05-08T01:01:33Z

Codecov Report

❌ Patch coverage is 98.40000% with 2 lines in your changes missing coverage. Please review.
✅ Project coverage is 97.41%. Comparing base (f493264) to head (3388a83).

Files with missing lines	Patch %	Lines
...c/collection-preferences/content-display/index.tsx	96.22%	2 Missing ⚠️

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #4487   +/-   ##
=======================================
  Coverage   97.41%   97.41%           
=======================================
  Files         933      933           
  Lines       29595    29681   +86     
  Branches    10757    10791   +34     
=======================================
+ Hits        28831    28915   +84     
- Misses        716      718    +2     
  Partials       48       48

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

…ring

georgylobko · 2026-05-12T09:55:03Z

+
+describe('Collection preferences - Grouped Content Display', () => {
+  test(
+    'renders group headers and leaf options',


I'd cover this in unit tests since they're cheaper to run. Is there anything browser-specific that jsdom can't reproduce? Looks like only drag and drop really needs integ tests in this file, the rest could be unit tests

georgylobko · 2026-05-12T09:55:43Z

+      const toggle = firstOption.findVisibilityToggle().findNativeInput();
+
+      // Toggle visibility
+      await page.click(toggle.toSelector());


We typically write an assertion statement after an event

georgylobko · 2026-05-12T09:57:34Z

+
+      // Order should have changed
+      const newTexts = await page.getElementsText(options.toSelector());
+      expect(newTexts).not.toEqual(initialTexts);


I'd suggest explicitly checking options order after drag and drop and introduce more complex scenarios such as:

drag and drop for groups

drag and drop for individual items

georgylobko · 2026-05-12T09:59:05Z

+    const wrapper = renderGroupedContentDisplay();
+    const options = wrapper.findOptions();
+    // Should render all 4 options (id1 ungrouped + id2, id3 in g1 + id4 in g2)
+    expect(options.length).toBeGreaterThanOrEqual(4);


I'd suggest to explicitly check the content of the options

georgylobko · 2026-05-12T09:59:51Z

+    // id1 is visible, id2 is visible, id3 is not visible, id4 is visible
+    const toggleStates = options.map(opt => opt.findVisibilityToggle().findNativeInput().getElement().checked);
+    // At minimum, not all should be checked (id3 is false)
+    expect(toggleStates).toContain(false);


Same - check explicitly what is inside the array

georgylobko · 2026-05-12T11:29:52Z

+  i18nStrings,
+  sortDisabled,
+}: {
+  node: OptionTreeNode & { type: 'group' };


Why the type: group isn't a part of the OptionTreeNode?

georgylobko · 2026-05-12T11:34:54Z

+  node: OptionTreeNode & { type: 'group' };
+  onToggle: (id: string) => void;
+  onChildrenChange: (children: OptionTreeNode[]) => void;
+  i18nStrings: React.ComponentProps<typeof InternalList>['i18nStrings'];


[nit] you can import underlying interface DndAreaI18nStrings directly from src/internal/components/sortable-area/interfaces.ts

georgylobko · 2026-05-12T11:37:56Z

+      i18nStrings={i18nStrings}
+      onSortingChange={
+        // istanbul ignore next: requires DnD interaction
+        ({ detail: { items } }) => onTreeChange([...items])


you can actually test this event same way as in src/file-dropzone/__tests__/file-dropzone.test.tsx

georgylobko · 2026-05-12T11:38:43Z

+        id: node.id,
+        announcementLabel:
+          node.type === 'group'
+            ? `${node.label}, ${node.children.length} items`


should it come from i18n strings?

georgylobko · 2026-05-12T11:44:50Z

+  const result: string[] = [];
+  for (const item of items) {
+    if (item.type === 'group') {
+      // istanbul ignore next: covered by integration tests


NathanZlion changed the title ~~feat: Add collection preferences for grouped items~~ feat: Table Groups Collection Pres May 4, 2026

NathanZlion changed the title ~~feat: Table Groups Collection Pres~~ feat: Table Column Groups Collection Pres May 4, 2026

NathanZlion changed the title ~~feat: Table Column Groups Collection Pres~~ feat: Table Column Groups Collection Prefs May 4, 2026

NathanZlion force-pushed the dev-v3-natidere-collection-prefs branch from aef643e to d30a4c0 Compare May 4, 2026 15:59

NathanZlion deployed to dev-pages-react18 May 5, 2026 05:23 — with GitHub Actions View deployment

NathanZlion deployed to dev-pages-react16 May 5, 2026 05:23 — with GitHub Actions View deployment

NathanZlion force-pushed the dev-v3-natidere-collection-prefs branch from 3eb8ca8 to ba91764 Compare May 5, 2026 14:25

NathanZlion deployed to dev-pages-react18 May 5, 2026 14:36 — with GitHub Actions View deployment

NathanZlion deployed to dev-pages-react16 May 5, 2026 14:36 — with GitHub Actions View deployment

NathanZlion force-pushed the dev-v3-natidere-collection-prefs branch from ba91764 to 8e47ee3 Compare May 5, 2026 14:49

NathanZlion deployed to dev-pages-react18 May 5, 2026 15:00 — with GitHub Actions View deployment

NathanZlion had a problem deploying to dev-pages-react16 May 5, 2026 15:00 — with GitHub Actions Error

NathanZlion deployed to dev-pages-react16 May 5, 2026 15:23 — with GitHub Actions View deployment

NathanZlion deployed to dev-pages-react18 May 5, 2026 16:44 — with GitHub Actions View deployment

NathanZlion deployed to dev-pages-react16 May 5, 2026 16:44 — with GitHub Actions View deployment

NathanZlion force-pushed the dev-v3-natidere-collection-prefs branch from 652c9fc to 2b8739b Compare May 5, 2026 18:00

NathanZlion deployed to dev-pages-react16 May 5, 2026 18:11 — with GitHub Actions View deployment

NathanZlion deployed to dev-pages-react18 May 5, 2026 18:11 — with GitHub Actions View deployment

NathanZlion deployed to dev-pages-react16 May 5, 2026 21:46 — with GitHub Actions View deployment

NathanZlion deployed to dev-pages-react18 May 5, 2026 21:46 — with GitHub Actions View deployment

NathanZlion deployed to dev-pages-react16 May 5, 2026 22:17 — with GitHub Actions View deployment

NathanZlion deployed to dev-pages-react18 May 5, 2026 22:17 — with GitHub Actions View deployment

NathanZlion deployed to dev-pages-react16 May 5, 2026 23:00 — with GitHub Actions View deployment

NathanZlion deployed to dev-pages-react18 May 5, 2026 23:00 — with GitHub Actions View deployment

NathanZlion deployed to dev-pages-react18 May 5, 2026 23:29 — with GitHub Actions View deployment

NathanZlion deployed to dev-pages-react16 May 5, 2026 23:29 — with GitHub Actions View deployment

NathanZlion marked this pull request as ready for review May 6, 2026 08:36

NathanZlion requested a review from a team as a code owner May 6, 2026 08:36

NathanZlion requested review from jperals and removed request for a team May 6, 2026 08:36

NathanZlion removed the request for review from jperals May 6, 2026 08:40

cloudscape-design deleted a comment from codecov Bot May 7, 2026

NathanZlion force-pushed the dev-v3-natidere-collection-prefs branch 2 times, most recently from a540dbe to ba9eff6 Compare May 8, 2026 00:45

NathanZlion deployed to dev-pages-react18 May 8, 2026 00:55 — with GitHub Actions View deployment

NathanZlion deployed to dev-pages-react16 May 8, 2026 00:55 — with GitHub Actions View deployment

NathanZlion added 5 commits May 11, 2026 13:45

fix: A11Y Improve screen reader experience for content display reorde…

1bef684

…ring

chore: Modify test

685b2ba

fix: Pass active state for sortable area to the drag button

3516ac1

fix: Test update

7b58334

feat: Support Table Column Groups collection prefernces

3388a83

NathanZlion force-pushed the dev-v3-natidere-collection-prefs branch from ba9eff6 to 3388a83 Compare May 11, 2026 11:45

NathanZlion requested review from avinashbot, michaeldowseza and pan-kot and removed request for michaeldowseza May 11, 2026 11:45

NathanZlion deployed to dev-pages-react16 May 11, 2026 11:55 — with GitHub Actions View deployment

NathanZlion deployed to dev-pages-react18 May 11, 2026 11:55 — with GitHub Actions View deployment

NathanZlion removed the request for review from pan-kot May 11, 2026 13:25

georgylobko self-requested a review May 11, 2026 14:01

georgylobko reviewed May 12, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Table Column Groups Collection Prefs#4487

feat: Table Column Groups Collection Prefs#4487
NathanZlion wants to merge 5 commits into
mainfrom
dev-v3-natidere-collection-prefs

NathanZlion commented May 4, 2026 •

edited

Loading

Uh oh!

codecov Bot commented May 8, 2026 •

edited

Loading

Uh oh!

georgylobko May 12, 2026

Uh oh!

georgylobko May 12, 2026

Uh oh!

georgylobko May 12, 2026

Uh oh!

georgylobko May 12, 2026

Uh oh!

georgylobko May 12, 2026

Uh oh!

georgylobko May 12, 2026

Uh oh!

georgylobko May 12, 2026

Uh oh!

georgylobko May 12, 2026

Uh oh!

georgylobko May 12, 2026

Uh oh!

georgylobko May 12, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

NathanZlion commented May 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

How has this been tested?

Correctness

Security

Testing

Uh oh!

codecov Bot commented May 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

NathanZlion commented May 4, 2026 •

edited

Loading

codecov Bot commented May 8, 2026 •

edited

Loading