feat: Table column groups API II

pages/collection-preferences/multi-level-reorder.page.tsx

@@ -0,0 +1,110 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+
+import CollectionPreferences, { CollectionPreferencesProps } from '~components/collection-preferences';
+
+import { contentDisplayPreferenceI18nStrings } from '../common/i18n-strings';
+import {
+  baseProperties,
+  contentDensityPreference,
+  customPreference,
+  pageSizePreference,
+  wrapLinesPreference,
+} from './shared-configs';
+
+const columnOptions: CollectionPreferencesProps.ContentDisplayOption[] = [
+  // ungrouped
+  { id: 'name', label: 'Name', alwaysVisible: true },
+  { id: 'status', label: 'Status' },
+
+  // performance
+  { id: 'cpuUtilization', label: 'CPU (%)' },
+  { id: 'memoryUtilization', label: 'Memory (%)' },
+  { id: 'networkIn', label: 'Network In (MB/s)' },
+  { id: 'networkOut', label: 'Network Out (MB/s)' },
+
+  // config
+  { id: 'instanceType', label: 'Instance Type' },
+  { id: 'availabilityZone', label: 'Availability Zone' },
+  { id: 'region', label: 'Region' },
+
+  // cost
+  { id: 'monthlyCost', label: 'Monthly Cost ($)' },
+  { id: 'spotPrice', label: 'Spot Price ($/hr)' },
+  {
+    id: 'reservedCost',
+    label:
+      'Reserved Instance Cost - Long text to verify wrapping behavior and ensure the reordering feature works correctly with extended content',
+  },
+];
+
+const columnGroups: CollectionPreferencesProps.ContentDisplayOptionGroup[] = [
+  { id: 'performance', label: 'Performance' },
+  { id: 'configuration', label: 'Configuration' },
+  { id: 'cost', label: 'Cost' },
+];
+
+const defaultContentDisplay: CollectionPreferencesProps.ContentDisplayItem[] = [
+  { id: 'name', visible: true },
+  { id: 'status', visible: true },
+  {
+    type: 'group',
+    id: 'performance',
+    visible: true,
+    children: [
+      { id: 'cpuUtilization', visible: true },
+      { id: 'memoryUtilization', visible: true },
+      { id: 'networkIn', visible: true },
+      { id: 'networkOut', visible: true },
+    ],
+  },
+  {
+    type: 'group',
+    id: 'configuration',
+    visible: true,
+    children: [
+      { id: 'instanceType', visible: true },
+      { id: 'availabilityZone', visible: true },
+      { id: 'region', visible: true },
+    ],
+  },
+  {
+    type: 'group',
+    id: 'cost',
+    visible: true,
+    children: [
+      { id: 'monthlyCost', visible: true },
+      { id: 'spotPrice', visible: true },
+      { id: 'reservedCost', visible: true },
+    ],
+  },
+];
+
+export default function App() {
+  const [preferences, setPreferences] = React.useState<CollectionPreferencesProps.Preferences>({
+    contentDisplay: defaultContentDisplay,
+  });
+
+  return (
+    <>
+      <h1>Multi-level Reorder Preferences</h1>
+      <CollectionPreferences
+        {...baseProperties}
+        pageSizePreference={pageSizePreference}
+        wrapLinesPreference={wrapLinesPreference}
+        contentDensityPreference={contentDensityPreference}
+        customPreference={customPreference}
+        preferences={preferences}
+        onConfirm={({ detail }) => setPreferences(detail)}
+        contentDisplayPreference={{
+          title: 'Column preferences',
+          description: 'Customize the columns visibility and order.',
+          options: columnOptions,
+          groups: columnGroups,
+          ...contentDisplayPreferenceI18nStrings,
+        }}
+      />
+    </>
+  );
+}

pages/list/nested-sortable.page.tsx

@@ -0,0 +1,155 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useState } from 'react';
+
+import { Box, Container, Header, SpaceBetween } from '~components';
+import List from '~components/list';
+
+interface TreeItem {
+  id: string;
+  content: string;
+  children?: TreeItem[];
+}
+
+const initialData: TreeItem[] = [
+  {
+    id: 'item-1',
+    content: 'Group 1',
+    children: [
+      { id: 'item-1-1', content: 'Item 1.1' },
+      {
+        id: 'item-1-2',
+        content: 'Item 1.2',
+        children: [
+          { id: 'item-1-2-1', content: 'Item 1.2.1' },
+          {
+            id: 'item-1-2-2',
+            content: 'Item 1.2.2',
+            children: [
+              { id: 'item-1-2-2-1', content: 'Item 1.2.2.1' },
+              { id: 'item-1-2-2-2', content: 'Item 1.2.2.2' },
+            ],
+          },
+          { id: 'item-1-2-3', content: 'Item 1.2.3' },
+        ],
+      },
+      { id: 'item-1-3', content: 'Item 1.3' },
+    ],
+  },
+  {
+    id: 'item-2',
+    content: 'Group 2',
+    children: [
+      { id: 'item-2-1', content: 'Item 2.1' },
+      {
+        id: 'item-2-2',
+        content: 'Item 2.2',
+        children: [
+          { id: 'item-2-2-1', content: 'Item 2.2.1' },
+          { id: 'item-2-2-2', content: 'Item 2.2.2' },
+        ],
+      },
+    ],
+  },
+  {
+    id: 'item-3',
+    content: 'Group 3',
+    children: [
+      { id: 'item-3-1', content: 'Item 3.1' },
+      { id: 'item-3-2', content: 'Item 3.2' },
+      { id: 'item-3-3', content: 'Item 3.3' },
+    ],
+  },
+];
+
+export default function NestedSortableListPage() {
+  const [items, setItems] = useState(initialData);
+
+  const updateItemChildren = (items: TreeItem[], targetId: string, newChildren: TreeItem[]): TreeItem[] => {
+    return items.map(item => {
+      if (item.id === targetId) {
+        return { ...item, children: newChildren };
+      }
+      if (item.children) {
+        return {
+          ...item,
+          children: updateItemChildren(item.children, targetId, newChildren),
+        };
+      }
+      return item;
+    });
+  };
+
+  const handleChildSort = (itemId: string, newChildren: TreeItem[]) => {
+    setItems(prev => updateItemChildren(prev, itemId, newChildren));
+  };
+
+  return (
+    <Box padding="l">
+      <SpaceBetween size="l">
+        <Header variant="h1">Recursive Nested Sortable Lists</Header>
+
+        <Container header={<Header variant="h2">Tree Structure with Recursive Sorting</Header>}>
+          <RecursiveList
+            items={items}
+            onSortingChange={newItems => setItems(newItems)}
+            depth={0}
+            onChildSort={handleChildSort}
+          />
+        </Container>
+
+        <Container header={<Header variant="h2">Debug: Current Data Structure</Header>}>
+          <pre style={{ fontSize: '12px', overflow: 'auto', maxHeight: '400px' }}>{JSON.stringify(items, null, 2)}</pre>
+        </Container>
+      </SpaceBetween>
+    </Box>
+  );
+}
+
+interface RecursiveListProps {
+  items: TreeItem[];
+  onSortingChange: (items: TreeItem[]) => void;
+  depth: number;
+  onChildSort: (itemId: string, newChildren: TreeItem[]) => void;
+}
+
+function RecursiveList({ items, onSortingChange, depth, onChildSort }: RecursiveListProps) {
+  const [localItems, setLocalItems] = useState(items);
+
+  React.useEffect(() => {
+    setLocalItems(items);
+  }, [items]);
+
+  const handleSort = (e: { detail: { items: ReadonlyArray<TreeItem> } }) => {
+    const newItems = [...e.detail.items];
+    setLocalItems(newItems);
+    onSortingChange(newItems);
+  };
+
+  return (
+    <List
+      items={localItems}
+      sortable={true}
+      onSortingChange={handleSort}
+      disableItemPaddings={false}
+      renderItem={item => ({
+        id: item.id,
+        content: (
+          <SpaceBetween size="s">
+            <Box variant={depth === 0 ? 'h3' : 'span'}>{item.content}</Box>
+            {item.children && item.children.length > 0 && (
+              <Box padding={{ left: 'l' }}>
+                <RecursiveList
+                  items={item.children}
+                  onSortingChange={newChildren => onChildSort(item.id, newChildren)}
+                  depth={depth + 1}
+                  onChildSort={onChildSort}
+                />
+              </Box>
+            )}
+          </SpaceBetween>
+        ),
+      })}
+    />
+  );
+}

pages/table-fragments/grid-navigation-custom.page.tsx

@@ -216,7 +216,7 @@ export default function Page() {
                     onConfirm={({ detail }) =>
                       setUrlParams({
                         visibleColumns: (detail.contentDisplay ?? [])
-                          .filter(column => column.visible)
+                          .filter(column => column.type !== 'group' && column.visible)
                           .map(column => column.id)
                           .join(','),
                       })