Revert "chore: Updates test pages and integ tests for compatibility w…

pages/sync-scrolls.page.tsx

@@ -12,29 +12,16 @@ export default function App() {
   return (
     <>
       <h1>Syncing horizontal scrolls</h1>
-      <div>
-        <div
-          id="element1"
-          ref={ref1}
-          style={{ inlineSize: '400px', overflow: 'scroll' }}
-          onScroll={e => {
-            n++;
-            numberOfCallsRef.current?.setAttribute('data-call-number', n.toString());
-            handleScroll(e);
-          }}
-        >
+      <div
+        onScroll={() => {
+          n++;
+          numberOfCallsRef.current?.setAttribute('data-call-number', n.toString());
+        }}
+      >
+        <div id="element1" ref={ref1} style={{ inlineSize: '400px', overflow: 'scroll' }} onScroll={handleScroll}>
           <div style={{ inlineSize: '800px', blockSize: '100px', backgroundColor: 'lightpink' }} />
         </div>
-        <div
-          id="element2"
-          ref={ref2}
-          style={{ width: '400px', overflow: 'scroll' }}
-          onScroll={e => {
-            n++;
-            numberOfCallsRef.current?.setAttribute('data-call-number', n.toString());
-            handleScroll(e);
-          }}
-        >
+        <div id="element2" ref={ref2} style={{ width: '400px', overflow: 'scroll' }} onScroll={handleScroll}>
           <div style={{ inlineSize: '800px', blockSize: '100px', backgroundColor: 'lightblue' }} />
         </div>
         <div ref={numberOfCallsRef} id="numberOfCalls">

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

@@ -1,6 +1,5 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-
 import React, { useContext, useMemo, useRef, useState } from 'react';
 import { orderBy, range } from 'lodash';
 
@@ -10,6 +9,7 @@ import {
   AppLayout,
   Button,
   ButtonDropdown,
+  Checkbox,
   CollectionPreferences,
   ColumnLayout,
   Container,
@@ -26,6 +26,7 @@ import {
   SpaceBetween,
   StatusIndicator,
 } from '~components';
+import { useEffectOnUpdate } from '~components/internal/hooks/use-effect-on-update';
 import {
   getTableCellRoleProps,
   getTableColHeaderRoleProps,
@@ -40,8 +41,7 @@ import {
 import AppContext, { AppContextType } from '../app/app-context';
 import appLayoutLabels from '../app-layout/utils/labels';
 import { contentDisplayPreferenceI18nStrings } from '../common/i18n-strings';
-import { id as generateId, Instance } from '../table/generate-data';
-import { allInstances50 } from '../table/instances-data';
+import { generateItems, id as generateId, Instance } from '../table/generate-data';
 import { stateToStatusIndicator } from '../table/shared-configs';
 
 import styles from './styles.scss';
@@ -56,6 +56,7 @@ type PageContext = React.Context<
     pageSize: number;
     tableRole: TableRole;
     actionsMode: ActionsMode;
+    autoRefresh: boolean;
     visibleColumns: string;
   }>
 >;
@@ -69,28 +70,30 @@ const actionsModeOptions = [
   { value: 'inline', label: 'Inline (anti-pattern)' },
 ];
 
-const allItems = allInstances50.slice(0, 25);
-
-let refreshIndex = 26;
-
 export default function Page() {
   const [toolsOpen, setToolsOpen] = useState(false);
   const { urlParams, setUrlParams } = useContext(AppContext as PageContext);
   const {
     pageSize = 10,
     tableRole = 'grid',
     actionsMode = 'dropdown',
+    autoRefresh = false,
     visibleColumns:
       visibleColumnsString = 'id,actions,state,imageId,dnsName,type,inline-select,inline-radio,inline-input',
   } = urlParams;
   const visibleColumns = visibleColumnsString.split(',').filter(Boolean);
 
-  const [items, setItems] = useState(allItems);
-  const refreshItems = () =>
-    setItems(prev =>
-      refreshIndex < 50 ? [...prev.slice(1), { ...allInstances50[refreshIndex++], id: generateId() }] : prev
-    );
-  window.refreshItems = refreshItems;
+  const [items, setItems] = useState(generateItems(25));
+  const [refreshCounter, setRefreshCounter] = useState(0);
+  window.refreshItems = () => setRefreshCounter(prev => prev + 1);
+
+  useEffectOnUpdate(() => {
+    setItems(prev => [...prev.slice(1), ...generateItems(1)]);
+    if (autoRefresh) {
+      const timeoutId = setTimeout(() => setRefreshCounter(prev => prev + 1), 10000);
+      return () => clearTimeout(timeoutId);
+    }
+  }, [autoRefresh, refreshCounter]);
 
   const columnDefinitions = [
     {
@@ -207,6 +210,17 @@ export default function Page() {
                     title="Preferences"
                     confirmLabel="Confirm"
                     cancelLabel="Cancel"
+                    customPreference={(
+                      customValue: undefined | { autoRefresh: boolean },
+                      setCustomValue: (value: { autoRefresh: boolean }) => void
+                    ) => (
+                      <Checkbox
+                        checked={!!customValue?.autoRefresh}
+                        onChange={event => setCustomValue({ autoRefresh: event.detail.checked })}
+                      >
+                        Auto-refresh every 10 seconds
+                      </Checkbox>
+                    )}
                     preferences={{
                       contentDisplay: columnDefinitions.map(column => ({
                         id: column.key,
@@ -219,6 +233,7 @@ export default function Page() {
                           .filter(column => column.visible)
                           .map(column => column.id)
                           .join(','),
+                        autoRefresh: detail.custom.autoRefresh,
                       })
                     }
                     contentDisplayPreference={{
@@ -233,7 +248,7 @@ export default function Page() {
                     }}
                   />
 
-                  <Button onClick={refreshItems} iconName="refresh" ariaLabel="Refresh">
+                  <Button onClick={() => setRefreshCounter(prev => prev + 1)} iconName="refresh" ariaLabel="Refresh">
                     Refresh
                   </Button>
                 </SpaceBetween>