fix: Fixes collection prefs filtering when column labels are not stri…

…ngs and filtering is disabled (#2887)
cloudscape-design · Oct 16, 2024 · 51d35e1 · 51d35e1
1 parent 5496d3e
commit 51d35e1
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 5 deletions.
diff --git a/src/collection-preferences/content-display/__tests__/content-display.test.tsx b/src/collection-preferences/content-display/__tests__/content-display.test.tsx
@@ -1,5 +1,6 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
+import React from 'react';
 import { fireEvent } from '@testing-library/react';
 
 import { CollectionPreferencesProps } from '../../../../lib/components';
@@ -255,6 +256,8 @@ describe('Content Display preference', () => {
         contentDisplayPreference: {
           ...contentDisplayPreference,
           enableColumnFiltering: false,
+          // Adding an option with a non-string label to ensure the filter does not break rendering
+          options: [...contentDisplayPreference.options, { id: 'id-extra', label: (<span>Extra</span>) as any }],
         },
       });
       const filterInput = wrapper.findTextFilter();

diff --git a/src/collection-preferences/content-display/index.tsx b/src/collection-preferences/content-display/index.tsx
@@ -17,7 +17,7 @@ import ContentDisplayOption from './content-display-option';
 import DraggableOption from './draggable-option';
 import useDragAndDropReorder from './use-drag-and-drop-reorder';
 import useLiveAnnouncements from './use-live-announcements';
-import { getSortedOptions, OptionWithVisibility } from './utils';
+import { getFilteredOptions, getSortedOptions, OptionWithVisibility } from './utils';
 
 import styles from '../styles.css.js';
 
@@ -60,10 +60,7 @@ export default function ContentDisplayPreference({
   const descriptionId = `${idPrefix}-description`;
 
   const sortedAndFilteredOptions = useMemo(
-    () =>
-      getSortedOptions({ options, contentDisplay: value }).filter(option =>
-        option.label.toLowerCase().trim().includes(columnFilteringText.toLowerCase().trim())
-      ),
+    () => getFilteredOptions(getSortedOptions({ options, contentDisplay: value }), columnFilteringText),
     [columnFilteringText, options, value]
   );
 

diff --git a/src/collection-preferences/content-display/utils.ts b/src/collection-preferences/content-display/utils.ts
@@ -24,3 +24,16 @@ export function getSortedOptions({
     }))
     .filter(Boolean);
 }
+
+export function getFilteredOptions(
+  options: ReadonlyArray<CollectionPreferencesProps.ContentDisplayOption>,
+  filterText: string
+) {
+  filterText = filterText.trim().toLowerCase();
+
+  if (!filterText) {
+    return options;
+  }
+
+  return options.filter(option => option.label.toLowerCase().trim().includes(filterText));
+}