feat: Additional content slot in Collection Preferences (#3124)

Co-authored-by: Ernst Kaese <[email protected]>
Co-authored-by: Gethin Webster <[email protected]>

pages/collection-preferences/simple.page.tsx

@@ -2,6 +2,8 @@
 // SPDX-License-Identifier: Apache-2.0
 import * as React from 'react';
 
+import Alert from '~components/alert';
+import Box from '~components/box';
 import CollectionPreferences from '~components/collection-preferences';
 
 import ScreenshotArea from '../utils/screenshot-area';
@@ -29,6 +31,15 @@ export default function CollectionPreferencesPermutations() {
           visibleContentPreference={visibleContentPreference}
           stickyColumnsPreference={stickyColumnsPreference}
           customPreference={customPreference}
+          contentBefore={
+            <Box margin={{ bottom: 's' }}>
+              <Alert type={'warning'} header={'Local storage not enabled'}>
+                Go to your browser settings to enable local storage. This will persist your settings across sessions
+                unless your local storage is cleared. If local storage is not enabled preferences are saved in session
+                storage as a fallback.
+              </Alert>
+            </Box>
+          }
         />
         <CollectionPreferences className={`cp-2`} {...baseProperties} customPreference={customPreference} />
         <CollectionPreferences

src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap

@@ -5667,7 +5667,13 @@ You must set the current value in the \`preferences.wrapLines\` property.",
       "type": "CollectionPreferencesProps.WrapLinesPreference",
     },
   ],
-  "regions": [],
+  "regions": [
+    {
+      "description": "Content displayed before the preferences. Use it to display additional information relating to the preferences.",
+      "isDefault": false,
+      "name": "contentBefore",
+    },
+  ],
   "releaseStatus": "stable",
 }
 `;

src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap

@@ -144,6 +144,7 @@ exports[`test-utils selectors 1`] = `
   "collection-preferences": [
     "awsui_cancel-button_tc96w",
     "awsui_confirm-button_tc96w",
+    "awsui_content-before_tc96w",
     "awsui_content-density_tc96w",
     "awsui_content-display-description_tc96w",
     "awsui_content-display-no-match_tc96w",

src/collection-preferences/__tests__/collection-preferences.test.tsx

@@ -85,6 +85,13 @@ describe('Collection preferences - Modal', () => {
     wrapper.findModal()!.findConfirmButton()!.click();
     expectVisibleModal(wrapper, false);
   });
+  test('is additional content displayed when provided', () => {
+    const wrapper = renderCollectionPreferences({
+      contentBefore: 'Test content before',
+    });
+    wrapper.findTriggerButton().click();
+    expect(wrapper.findModal()!.findContentBefore()?.getElement().textContent).toBe('Test content before');
+  });
 });
 
 describe('Collection preferences - Events', () => {

src/collection-preferences/index.tsx

@@ -60,6 +60,7 @@ export default function CollectionPreferences({
   customPreference,
   getModalRoot,
   removeModalRoot,
+  contentBefore,
   ...rest
 }: CollectionPreferencesProps) {
   const parentMetadata = useContext(CollectionPreferencesMetadata);
@@ -181,6 +182,10 @@ export default function CollectionPreferences({
             size={hasContentOnTheLeft && hasContentOnTheRight ? 'large' : 'medium'}
             onDismiss={onCancelListener}
           >
+            {/* Content before */}
+            <div className={styles['content-before']}>{contentBefore}</div>
+
+            {/* Preferences content */}
             <ModalContentLayout
               left={
                 hasContentOnTheLeft && (

src/collection-preferences/interfaces.ts

@@ -201,6 +201,10 @@ export interface CollectionPreferencesProps<CustomPreferenceType = any> extends
    * The values for all configured preferences are present even if the user didn't change their values.
    */
   onConfirm?: NonCancelableEventHandler<CollectionPreferencesProps.Preferences<CustomPreferenceType>>;
+  /**
+   * Content displayed before the preferences. Use it to display additional information relating to the preferences.
+   */
+  contentBefore?: React.ReactNode;
 }
 
 export namespace CollectionPreferencesProps {

src/collection-preferences/styles.scss

@@ -13,7 +13,8 @@
 .trigger-button,
 .cancel-button,
 .confirm-button,
-.custom {
+.custom,
+.content-before {
   /* used in test-utils */
 }
 

src/test-utils/dom/collection-preferences/index.ts

@@ -55,6 +55,10 @@ class PreferencesModalWrapper extends ModalWrapper {
   findCustomPreference(): ElementWrapper | null {
     return this.findByClassName(styles.custom);
   }
+
+  findContentBefore(): ElementWrapper | null {
+    return this.findByClassName(styles['content-before']);
+  }
 }
 
 export default class CollectionPreferencesWrapper extends ComponentWrapper {